The Archives

Browse the content below to find what you're looking for.

Information Architecture: IA & The Social Network

Monday, April 19th, 2010

Information architecture (IA) is the approach you take to structure and navigation on your website. The IA model that you choose will have an impact on how you design your site. For some websites, this is as simple as choosing to put all your content on a single homepage. For a social network’s IA, a more sophisticated approach is needed.

Flat

The flat IA model is where you have more than one page, and each page is granted equal importance. You can go from one page to another page in a single click. This method can also be called monocline grouping. See below.

Flat Structure

This type of hierarchy is too rudimentary for a social networking website. If you have a simple social network where each user is given their own profile page, your website could have millions of links on each and every page. While a flat structure may be suitable for a simple brochure website, it is not suitable for a social network.

Index

The index structure is the web equivalent of a directory. The homepage acts as the index, navigating you to the right page within the directory. See below.

Index Structure

This model could work well for a social network with a small number of users. However, information architects must consider scalability. A pure index hierarchy is not built to scale. For a phone directory with a few hundred entries, this could work. For a social network with 10,000 users, it would be a disaster.

Strict Hierarchy

The strict hierarchy looks like an organizational chart in most large companies. People report to their boss, and their boss reports to their boss. Management links to lower level employees via their managers. In the web architecture example, you access a lower level page via its parent. See below.

Strict Hierarchy

This structure is more suitable for social networks than the previously discussed models. To consider its application, let’s imagine a social network that facilitates communication among a golf club’s members. There could be a separate parent category for male and female golfers. You could drill down from home > male golfers > Name Surname to find the person you are looking for.

What happens if you want to expand the categories beyond male and female golfers and add another category for “competition winners”? In that case, competition winners would need to be a member of a gender category and a member of the “competition winners” category. This would not be possible with a strict hierarchy, since each file has only one parent. For this reason, a strict hierarchy will usually lead to usability problems on more complex social networks.

Multi-dimensional Hierarchy

Most social networks, other than the most primitive, must opt for a multi-dimensional hierarchy to achieve their usability and navigation goals. See below.

Multi Dimensional Hierarchy

The multi-dimensional hierarchy embraces the nuance that a strict hierarchy ignores. In the golf club example, golf members have relationships with one another. A golfer can be a “male” and a “competition winner” and have friends who are “male and “female”. You can move from one golfer’s profile to another directly, if they are friends. Profiles possess multiple properties and can be filed in more than one place. This adds flexibility to navigation and allows users to follow more than one path to achieve the same objective.

Search

Twitter Search

Search has become fundamental to understanding the architecture of many of today’s leading websites. Google, clearly, would be unusable without search functionality. Twitter does not rely on search to be functional, but it adds a whole new dimension to their social network. Without search, users would exist in pockets of followers connected only by disparate connections.  Search adds a discovery mechanism to content and people.

On some social networks, search acts as a means of short-circuiting the hierarchical structure. In others, search makes hierarchical structures superfluous.

Search usually works in one of two ways in a social network. It allows you to search within a particular parent or it allows you to search across parent to find profiles. And, sometimes you can do both.

Website Navigation Models For Social Networking Websites

Monday, April 19th, 2010

Intro

There is no right or wrong navigation model for a social networking website. Social networks usually combine more than one method in their website architecture, providing a choice for website users.  Too much choice can risk causing confusion and cluttering your design. In this article, we shall guide you to choosing an intuitive and attractive website navigation model for your social network.

From their experiences elsewhere on the web, website users have engrained views on how your website navigation should work. Consider this when formulating your navigation model and reduce the friction involved in navigation.

Breadcrumb Trail

Breadcrumb trail navigation lets you know where you are in the hierarchy of a website. In the example below, you know you are inside News > World news > United States.  This allows your website users to know where they are in a website, and provides a navigational shortcut to skip back.

Guardian's website navigation

  • Know where you are at all times.
  • Move back steps with minimal interruption.

Great for social networks when:

  • You present structured data. Your schooling listings might present USA > Illinois > Colleges > Illinois College > Illinois College ’05 > Philip West. Users can easily navigate away from Philip West’s profile back to others who graduated in the same year (Illinois College ’05), or even back to “Colleges” if they wish to find a friend who attended another college.
  • You want to increase page views by encouraging visitors to check out similar categorizations.

Horizontal Top Bar

Horizontal top bars are among the most common navigation models used on all websites, including social networking websites. Here is an example of a simple horizontal top bar used on Twitter.

Twitter Navigation

While website users are comfortable browsing vertically, they are less comfortable browsing horizontally. Try to keep this is mind when formulating your navigation – make sure the number of links is known in advance.  Adding friends, applications or switching on options should not add more links to a horizontal top bar unless this has been tested and creates a comfortable browsing experience.

  • Users are comfortable using a horizontal top bar due to their widespread adoption.
  • Do not include “dynamic” options that could cause the website to expand horizontally in the browser.

Great for social networks when:

  • You want to create an easy and simple method of navigating to key tasks that users perform on your network.

Horizontal Top & Vertical Side Bar

A top and side bar method is deployed on most prominent social networks.  Usually the top bar will be used for top-level navigation, while the side bar will allow users to access sub-categories. The side bar will be used for any conditional or dynamic links. It is easier to add additional links vertically, but you must be more careful when adding additional links horizontally. This is the method favored by Facebook.

Facebook top bar

Facebook left menu bar

  • Use top bar for top-level navigation
  • Use side bar for drilling down sub-categories and expanding navigation options.

Great for social networks when:

  • You need to add “dynamic” links and expand navigation options.
  • You want to leverage an approach that users will feel comfortable with through their experience on other social networking websites.

Horizontal Top Bar With Revealed Drop Downs

This has become an increasingly popular navigation method, which comes with some variations. Sometimes you click on a menu and a further sub-menu or link is revealed. In other occasions, simply hovering over the menu causes this to be revealed. One advantage of this method is space efficiency.  The menu takes up little room and it can provide an intuitive method of navigating social networks with a deep structure.

While this has become an increasingly popular navigation method, it also has some serious downfalls. Not least, a lack of familiarity with the approach can cause confusion. For those with disabilities or poor IT literacy, it can cause difficulties. Another issue arises from users being unaware of what is below a particular menu option until they hover over it. In the example below, Myspace has deployed this method.

Myspace's drop down

  • This can be a great way to optimize space efficiency.
  • There are some usability concerns with this approach.

Great for social networks when:

  • You prefer an interface focused around a horizontal top bar, but your site is too big to accommodate all links within the main menu.

Paging

This is a method used by social networks where content spans several pages. News websites will sometimes use this method to break up larger articles. Social networks often use this approach to browse through profiles and present search result pages. Look at the example below, on Myspace.

Myspace Pagination

This allows users to skip back and forward between results, and browse from start to finish easily. When your social network displays search results, this can be the most intuitive way to present them to your users.

  • Paging is ideal for presenting search results.
  • Allows users to skip back and forward easily.

Great for social networks when:

  • You wish to structure large amounts of content in a list format, unsuitable to fit on one page.
  • Let’s say a user can see a list that is sorted in date format and they want to find the oldest data in the list. They know they can go to the last page to quickly find what they are looking for.

Tabs

Tabs are usually a type of horizontal navigational bar, although they can be used in other settings too. They serve to make it easy for the user to know the section of a network they are on. Tabs have rapidly became a major feature of web browsers, so users are now increasingly comfortable with their use. In the example below, check out how Linkedin uses tabs.

Linkedin Tabs

  • Tabs clearly distinguish the page or section of a social network a user is currently visiting.
  • The popularity of using tabs within website browsers has made users more comfortable with the concept.

Great for social networks when:

  • You want to create a clear distinction between different sections of your network. Users know they cannot be active on more than one tab at once.

Site Structure for Humans and Search Engines

Wednesday, April 14th, 2010

Most website designers put the focus of creating a website only on its visual appeal. While this is certainly important, focusing on how easy the website is to use, how simple it will be to change and expand in the future, and how search engine friendly it is can be even more important in the process of creating a successful website.

Building a website keeping these issues in mind depends on a designer well versed in site architecture. Under the creation of a web architect, websites achieve just the right balance between visual appeal, ease of use, functionality, and search engine friendliness. Think of web application architecture as being similar to the constructing a building. While beauty is important, strength and function make the building usable and long-lasting.

Drafting site architecture involves using the information gathered for your website. Although in digital form, these architectural structures resemble construction blueprints; also called skeletons. The goal of this phase is categorizing, organizing, and prioritizing how users will navigate through your website.

Good web application architecture involves making your website easy to navigate through site mapping, task flows, and wireframes. This results in a user centered website that saves money and produces results.

Site Map

Like a business organizational chart, a site map is a visual way of showing the organization of your website. In this step, a web architect names and arranges the pages of your website in a way that makes sense to both human users and search engines.

Task Flow

Similar to a site map, a task flow also shows how users will navigate your website. For example, a site map shows a block that represents the ‘contact us’ page, but a task flow shows what happens if the user interacts with that page. If they submit a contact form from this page, where will they go next? What happens if they experience an error? Site architecture plans for every option.

Wireframe

A grayscale digital skeleton, a wireframe helps a web architect visualize the layout of your website pages. Placeholder headlines, subheadings, text, images, navigation, advertising, and other content show where information will appear when users view your website.

What is Website Architecture

Wednesday, April 14th, 2010

Website architecture is the organization and structure of website information. It is a phase that begins after a website plan has been documented, but before the website is developed. If your website had proper planning before starting to draft the architecture, you will already have a clear idea of (1) website objectives, (2) content requirements, and (3) user groups. These three components tell an informational architect what is required in order to produce a digital structure that will meet the needs of both the business and the website users.

Website Objectives

Website objectives help architects prioritize information. They are measurable goals that answer the question, “What will the website accomplish”? More clearly, what the website will accomplish for the business. Will the website spawn a 15% increase in leads? Generate 25% more sales? Create $100,000 in new subscriptions within the first year? Help gather feedback 50 times faster from users of your products and services? Cut business costs 5% by automating processes? Whatever the objectives, they need to be defined clearly in a quantifiable, time conscious statement.

User Groups

User groups describe who will use the website. They help architects categorize informational architecture in a way that humans can understand.  Will the users be shoppers, researchers, investors, donors, potential members, and/or potential employees? Depending on time and budget, these user groups can be further developed into individual user profiles or personas that help the website architecture empathize with the user. This results in a deep understanding of who primary users are and what content they want.

Content Requirements

Content requirements are detailed statements that answer the question, “What will the website do?” This helps the architect organize the informational architecture in a way that meets the needs of the business, website users, and the search engines. Will the website need a checkout process that can be completed in one step? Will the business need a way to recover abandoned orders? Will users want to track their orders? Will the search engines need to be blocked from indexing SSL pages and printer friendly pages to avoid duplicate content issues? Content requirements align with website objectives and user groups to define this final component. It’s at this point that the job of website architecture begins.

A website architect uses the components gathered above to start shaping, connecting, and forming the informational architecture. Making your website easy to navigate is a process that involves site mapping, task flows, and wireframes.

Site Map

A site map is a lot like a business organizational chart. It’s a visual way of showing how the website will be organized. In this step, website architecture gives names to pages and arranges them in a way that makes sense to human users and the search engines.

Task Flow

A task flow is like a site map, but also shows how users will navigate the site. For example, a site map would show a block that represents the Contact Us page, but a task flow shows what happens if the user interacts with that page. If users submit the Contact Us page, where will they go next? What if they experience an error?

Wireframe

A wireframe is a grayscale digital skeleton that helps visualize how website pages will layout. Placeholder headlines, subheading, text, images, navigation, advertising, and other required content will be added to show the informational architecture users will view when visiting the website.

An organized and structured website begins with creating a website architecture before development begins. By knowing the objectives, content requirements, and user groups, you can produce an informational architecture that includes a site map, task flow, and wireframe that ensures a website meets the needs of both the business and the website’s users.

Web Architecture Benefits Pros of Planning, Architecting, and Prototyping

Wednesday, April 14th, 2010

Web architectures have pros and cons, but the benefits far outweigh the downfalls. In this article, I will use the term ‘web architectures’ in the broader since, including defining the website plan, drafting web architectures, and designing the web prototype.

Benefits

Clarifies Fuzzy Ideas

Website ideas are loose concepts that are a great jumping off point. Yet, the goal of internet development planning is to define clear requirements. So, by really digging into an idea, you help uncover a solution that works.

Defines Measurable Goals

Websites need to make money and web architectures achieve this. When information architects understand the goals of your business, they guide the creation of navigation when drafting and prototyping during internet development planning.

Satisfies User Needs

A website also needs to be useful. Websites that provide value in the form of content that is useful make people happy. Successful internet development planning focuses on making users happy. Web architectures allow the creator to think like a user. Therefore, content is categorized, prioritized, and shaped in a way that makes sense.

Saves Money & Time

This sounds cliché, but architecting out a clearly defined, drafted, and prototyped website structure helps you get accurate quotes and timelines from developers. You can even present your plans to multiple companies without having to explain yourself to death. It’s all documented and digitally structured so there are no inflated quotes.

Sells Your Idea

Your website might be a multi-million dollar project that requires you to pitch your ideas to investors. Maybe you don’t have the budget to develop your website this year, but want to make sure decision makers allocate enough funds next year. Web architectures provide a visual prototype that sells your idea because others can see and interact with your vision.

Test Your Concept Before It Goes To Market
Web architectures encourage usability testing and user acceptance before it’s too late. Testing your website prototype with real people who fit your target audience helps validate your design. If there are obstacles, changes can be made quickly to a prototype during the internet development planning phase.

It’s Productive

Web architectures are efficient. As mentioned a moment ago, changes are made much faster at this stage. Implementing solutions is quicker because it is free of complex programming and detailed graphics.

Downfalls

The thought of internet development planning, architecting, and prototyping can seem unnecessary. This is partially true. Depending on the type of website you are creating, you might not have to get so detailed in the wireframe and prototyping phase.

Doing It All Can Be Redundant

If your website doesn’t require the user to perform a lot of tasks (low interaction), then you could get by with just internet development planning, creating a site map, and some light wireframing. This will be more efficient.

If your website requires a lot of interaction, but doesn’t present a lot of information to organize, less time can be spent structuring information

Color Wastes Time

Another downfall can occur when colors are added to the wireframe or prototype. Color should be left to visual designers in the development phase. Colors slow down the process and lead to tangents that have nothing to do with architecting. Web architectures are about function rather than the formation of color.

Functionality Isn’t Perfect

Functionality of prototypes isn’t perfect. Although it’s a real representation of what you want your website to look like, it will not function perfectly. Prototypes simulate how users navigate and interact with elements, but this experience isn’t always true to how it will work when it’s live on the internet.

Conclusion

As stated at the beginning, the benefits of web architectures far outweigh the downfalls. Web architecting is a necessary tool, although it needs to be used correctly to be efficient and effective.

AtomicLabz Sidebar Components

Tuesday, April 6th, 2010

Over the past few posts I’ve discussed global components, components, homepage design, internal page design and style guides. Today I’ll end by discussing the sidebar and give you some ideas on how to use them effectively.

The majority of websites have sidebars on their internal pages. Sometimes there on the left, other times they are on the right. Sometimes there are two sidebars, with the content in the middle. I’ve even seen layouts with two sidebars on the right with the content on the far left. My personal favorite is to use a two column layout on internal pages with the sidebar on the left or right. In the following example you’ll see a right sidebar.

The sidebar is going to consistent, yet different for every page. This consistency will be in the sub-navigation that is directly related to the primary navigation. The sub-navigation will remain in the same location (top of sidebar) on every page, but the links will be different on each secondary navigation component.

Sidebar Components

Solutions – This secondary navigation will show when user click on solutions in the primary navigation and this navigation will show for each page within this section.

Company
– Similarly when users click on company in the primary navigation and this navigation will show for each page within this section.

Company
– What’s nice about this is website owner can easily add pages to these section in the future without causing technical problems.
News and Events – shows news articles, upcoming events and past events. I’ll show you how there are other components below each of these subnavigations.
Blog – is different. I’ve made a slight compromise by including a search field just above the secondary navigation. Knowing that this could be a large section, I wanted to make sure website user had a way to find the information they are looking for quickly. Categories are a way for the user to help organize their subject matter and archive is a dynamic component that will archive blog post by month. There are additional components we could have added to the sidebar for blog, but decide to keep it simple for now.

Additional Components

After the obvious basics, you may want to include other components below the primary components of the sidebar. For example:

Upcoming Events Calendar – Can be a nice touch if you have a lot of events and you want to give users a way to navigate to events at specific times. This would of course link them to the events happening on the day they select. This would be a nice component to sit below the New and Events secondary navigation.
White Paper Download – meets an objective for our client. His objective is to collect information from potential prospects. This white paper download links to a landing page describing the value of downloading the white paper. This might be a nice component to sit below the sub-navigation on the solution page.
Sales Training Newsletter – is yet another way to collect information from interested parties. Only this will be a retention tool to keep user coming back to the website. This links to a landing page that describes the benefits of signing up. This component can will be a nice touch to add in the sidebar of any page below the other components.
Contact Information – works best as a sidebar component on the Contact page sitting just below the secondary navigation.

Conslusion

The sidebar components mentioned help users effectively navigate your website content and lead them to taking action. Other sidebar components that are very good are credibility factors. If you want to lower the website user’s anxiety and demonstrate value you may want to create components for that. Examples might be (testimonials, organizations you are associated with, certifications you have, etc…)

It’s important to know what you want before the programmers start coding. Some of these components will be dynamically driven and some will be wigitized for used individually within certain pages or page template. Thinking ahead will make the website management process much more satisfying to the website owners. They will be able to easily rearrange component order and target components to specific sections if programmed right.

AtomicLabz Style Guide

Tuesday, April 6th, 2010

Over the past couple posts we’ve cover how I prototype a corporate website architecture. We’ve looked at the atomic elements, global components, components, corporate homepage design and briefly covered internal page structure. Today I want to talk about the style guide.

Website Style Guide

The website style guide is an important part of every website. It will keep the formatting of each page consistent throughout the entire website. I doubt I have to explain the benefit of a style guide. What’s awesome about it though I try to style as many common HTML elements as you think the website administrator will need to manage content effectively on each page.

When the prototype is passed onto the design team, they will know exactly what to build into their css style sheet, and this will also let the programmers know what to build into the WYSIWYG rich text editor. This will help us build search engine friendly pages that are easy to format for website owners and also easy to change colors and font properties across all pages if needed.

Headings

H1, h2, h3, and h4 are headings that are show in the style guide. Each have different font sizes, colors and styling to make the website more readable when being read by visitors. User like to scan page heading looking for the information they are interested in and using different font properties helps organize the page content. When the website owner is adding content to their WYSIWYG editor, they will just have to select h1, h2, h3 or h4 from the drop list to format the text properly.

Paragraph Text

Paragraph text is the body text that is consistent throughout all pages in the main body area. This is the default text that will show when a website owner is writing text in their WYSIWYG rich text editor.

Lists

At some point the website owner will want to create an unordered list or an ordered list. An unordered list is a bullet point list. Ordered lists are numbered list (1,2,3,4) as opposed to bullets.

Blockquotes

Blockquotes are HTML elements that are smart to stylize so the website owner has an opportunity to make quotes really stand out. They can be used to emphasize main points on a page, show testimonials, client stories and more.

Alerts

Alerts are smart to think of ahead of time. They will be used for confirmation messages, error messages, or even notes / tips that stand out from other content. The confirmation or success message is something a website visitor would see after filling out a form. If they didn’t fill out the form properly, they would see the error message. The note alert is a component that the website owner might want to use to make sure the reader knows something about the page before continuing to read. It could also be a tip, download, or did you know area that stands out front the surrounding text.

Footnotes

Footnotes are great for giving credit to sources throughout your text. If the website owner quotes a source when writing content, they can add a superscript to the sentence (e.g., you have three seconds to attract a website visitors attention 1 ). Now in the future you can use an ordered list to quote the source at the bottom of the web page.

In the next article I’ll be discussing the sidebar, why it’s important and how you can use it effectively.

AtomicLabz Homepage and Internal Page Components

Tuesday, April 6th, 2010

I previously discussed global components. In this post I’ll converse about some of the other elements that make AtomicLabz.com homepage. Also, we’ll look at the internal page structure.

Carousel

A carousel is like a rotating billboard that consists of a background image, and text that will lead the visitor into an internal page. This I a great sport for product promotion, upcoming events, hot deals, new arrivals or a featured product/service. The user can navigate back and next using the navigation located in the bottom right. As each picture fades in, a circle in the bottom right changes color showing the user which they are viewing. They can also click the circle to navigate to that specific billboard.

Site Introduction

An introduction sits below the carousel and quickly introduces the customer to you and what your site offers. You need to quickly let the user know what you do. Website users are thinking, “is this where I want to be? Do they have the solution, Can I trust them?” This can be a great spot to introduce credibility factors (sample client list, testimonials, service and product offerings,). It really depends on what your objective is.

You can see the layout nicely flow from a one column carousel to a three column introduction that is pleasing to the eye. In this case we used two of the columns to introduce the client to service offering, client case studies. The third column was a call to action, inviting the user to download a white paper, Driving Sales in a Down Economy.

Subpage / Internal Web Page

Next, it was onto the internal page. The internal page has a consistent structure through the entire website. Of course, the body contents changes relative to the page you are viewing and the right sidebar changes for each section.

The first component in the right sidebar is the secondary navigation, or sub-navigation for all page related to the primary navigation selected. In this scenario, the user clicked on Solutions in the primary navigation, which leads the user to the first page in the solution section, named Lead Generation. In my prototype, I didn’t set the Solution button in the primary navigation to red, although that is how it would look when programmed to let the user know that is the section they are viewing. You also see in the right sidebar that Lead Generation is red (different then the other sub navigation pages) letting the user know which page they are viewing. Throughout every section, the secondary navigation will also remain in the top right corner. Although, if we get to a section that requires searching (i.e. a blog), then I would sacrifice a bit and put a small search box just above the sub navigation.

Calls to Action

The other two components of the sidebar are calls to action. The goal of this website is to collect information from potential clients. To do this we’ve include a white paper download and a sale training newsletter sign-up that lead to landing page stating the value of signing-up.

Today we covered a lot, so I’ll save the Style Guide for the next post as that is a significant component of every design.

AtomicLabz Components and Homepage Wireframe

Tuesday, April 6th, 2010

I already discussed the site map with the project stakeholders in my previous meetings and they approved. Next, it was onto wireframeing some of the atomic elements and global components.

Atomic elements cannot be broken down any further. An example might be, H1 Text, paragraph text or a logo.

Components are made up of atomic elements, but their relationship with each other groups them together into single components. Some of these components I knew would be global (show up consistently on each page) and some would be page specific. I like to start with the global components first.

Global Components

Header

The header consists of three elements, Logo, Value Proposition and Call to Action. These three elements make up the header component and will show up consistently on every page. The logo is a clickable link that leads the website user back to the homepage. Value Proposition is a clear statement that tells website visitors what this site is about and how they unique. The call to action is a phone number. The goal of this site is to generate leads, so why make it difficult for users to find the phone number when they are ready to act?

Primary Navigation

The primary navigation is the menu users will interact with to find information they are interested in. As mentioned, I had developed a site map, so I had a good idea of how I wanted the navigation to flow. This site is not going to be hundreds of pages, so I decided to eliminate the use of drop-down navigation. I personally don’t like to use. If there are sub pages, I like to include them within their specific section, so they are always displaying to users. I don’t like to keep making users hunt for things. I also don’t like creating more than seven menu items in the primary navigation and is this illustration; I was able to make six menu items work.

You’ll notice that the homepage show a different color that the other buttons because the homepage is active, or currently being viewed. The other five buttons are inactive, but change color on hover.

Footer

I won’t spend a lot of time on this, but the footer section contains some of the standard utility page (site map, privacy policy, terms of use) that can are important for legal purposes and also valuable for search engine positioning. I know some sites, or directories won’t even link to your site if you don’t have these elements in place. I also included links to the main service page that are keyword rich text links (leader generation, sales consulting and sales training). In the copyright, I always like to use a dash followed by keywords that are linked to the homepage as well.

Today I covered global components and next will discuss other components including: sub-navigation on internal pages, style guide, and all of the other components that make up the homepage wireframe.