Six Revisions » User Interface

5 Reasons Why Metaphors Can Improve the User Experience

Jacob Gube — Fri, 11 May 2012 10:00:31 +0000

There are many ways to experience the world around us. Especially offline, we can make use of our different senses to collect information, interpret our environment and make judgments.

On the Web, however, our senses are more limited. As designers, we need to present information carefully to make sure our users think, feel and do the right thing.

A great way to help your users understand abstract content, create a sense of familiarity, trigger emotions, draw attention and motivate action are metaphors.

"The way we think, what we experience, and what we do every day is very much a matter of metaphor."
- Lakoff and Johnson

In their frequently cited book, Metaphors We Live By, Lakoff and Johnson demonstrate the important role of metaphors in our language and in our everyday lives. Our conceptual system is largely metaphorical, which means that we use metaphors to reason and understand the world.

Let’s look at how you can use metaphors to add to the user experience on your website. Below are five reasons why metaphors can improve the user experience.

1. Metaphors Can Put Abstract Concepts in Concrete Terms

Metaphors are a great tool to help your users understand abstract or unfamiliar content. By linking abstract information to a concrete concept, it becomes easier for people to understand the information.

Let’s start off with the most basic and common use of metaphors on the Web: Icons. These little symbols help users grasp a concept quickly. Icons usually refer to something that we know from the physical world and that we can somehow relate to an abstract concept on the Web.

For example, on the site Startups, This Is How Design Works, you can see how a light bulb icon is used to denote the word "innovation", a wrench icon to refer to making a product useful (utility), and a paintbrush icon to represent the word "aesthetic":

Source

Metaphors can be used creatively to explain complex or uncommon concepts. For example, take a look at Huw Wilkins’s 404 error page on his blog:

Source

Many Web users don’t know what a 404 error is, and generic 404 error pages may be intimidating to them. Instead of giving a technical explanation of why the requested page is not available, the user gets a humorous image of a running ninja who stole the page being requested.

Metaphors can also be used to explain a process. Datashift shows an imaginary machine that turns different social media icons into statistics that can be displayed on your screen:

Source

Of course, the machine isn’t real and the process is way more abstract than what’s displayed in the image, but it becomes very clear what kind of service they offer.

2. Metaphors Create Familiarity

We love to recognize things. Whenever we can’t recognize something, our brain tries its best to make sense of whatever we’re looking at. (That’s why Gestalt principles can be applied to our design work.)

In his article Brains Agree: The Case for Website Usability Guidelines, Todd Follansbee explains that we use patterns to get an idea of what to expect. Recognizing mental patterns helps us to accept and understand the unfamiliar.

The user interface of Paper, a drawing app for the iPad, makes use of a sketchbook metaphor to create familiarity:

Source

The app is designed to look and work like a sketchbook. You can easily bring sketches onto paper, choose between different pens and colors, flip through the pages and show your creations to friends by sharing them on social media. By applying familiar features to a digital tool, interactions become very intuitive and easy to learn.

Everyone knows knock-knock jokes, right? The people from Knock Knock Factory use the positive associations linked to the words for the image of their company.

Source

Not only does the name promise us that they’re a down-to-earth company, it also sounds familiar. Even someone who has never heard of the agency before will most likely have some fun and positive memories that stem from the company’s name.

3. Metaphors Can Trigger Emotions

You can use metaphors to trigger emotions. Emotions not only make your design appealing to people, but also more effective, pleasurable and memorable.

As mentioned before, icons help us grasp abstract concepts. However, if exaggerated and designed with personality, like on the site of Eye Bridge, they can also trigger emotions:

Source

While we associate the abstract icon of a coffee cup with a certain meaning or function, a detailed picture makes us think of yummy, hot coffee at the same time.

The Roambi app works with a metaphor to trigger emotions as part of their marketing strategy:

Source

Of course, a business doesn’t have a pulse and taking a pulse into your hand is not physically possible either. However, the idea of doing so anyways is very attractive.

As a side note, great references for emotional design are Don Norman and Aarron Walter, who both focus on the additional value we can add to a website when we consider human emotions.

4. Metaphors Can Draw the Attention of Users

Numerous techniques can make certain elements of a web design more distinctive than others, and the use of metaphors is among them. Metaphors can be used to draw attention to a website in general or to very specific elements within a web page. Things we recognize draw our attention, just like when we recognize familiar faces in a big crowd of unfamiliar people.

For example, we associate nametags with events and social gatherings, such as conferences and workshops. A nametag means that you are a registered member, a paying attendee, or entitled to things people without a nametag are not entitled to. So a nametag metaphor was used in the following login web form concept by Meng To to make an otherwise plain web form more attractive:

Source

Flourish decided to use a tree illustration to explain what they do, along with the tagline "We plant Web sites that flourish in the harshest climates." They show a big flourishing tree in the middle of a desert to denote the power of their services. The illustration and metaphor is eye-catching and memorable.

Source

5. Metaphors Can Motivate Users into Action

Another interesting aspect of metaphors is that they can influence people’s actions. By translating interactions that we know from the real world to the Web, we can also transfer our knowledge to the screen. This way, metaphors can be very engaging and actionable because we intuitively know what to do.

The Cascade Brewery Co website offers a very engaging metaphor for their navigation menu:

Source

Users can brew their own content by adding different proportions of content categories. It is quite creative how this navigation menu grabs your attention and makes you check out the content just to see what happens if you change the brewing proportions.

Another great way to trigger users to register for beta access is this countdown clock on Minute Race:

There is no indication of what happens if the time has run out, but still, I felt a strong urge to register as quickly as possible. Also, making it sound like a competition adds to my motivation to register immediately.

Conclusion

Metaphors can be a powerful tool for improving the user experience. Metaphors can:

explain abstract or complex concepts
create a sense of familiarity
trigger emotions
draw attention to your site or certain components of it
motivate users to take action

How do you use metaphors in your designs? Have you seen other great examples of how metaphors are used on the Web?

About the Author

Sabina Idler is community manager, information designer and writer on Usabilla. Her education focused on usability, her passion is the user experience and design is her key to both of them. Follow her on Twitter @sabinaidler.

Mobile UI Design Patterns: 10+ Sites for Inspiration

Jacob Gube — Thu, 29 Mar 2012 09:00:47 +0000

Advertise here with BSA

User interface design patterns are solutions to common design challenges, such as navigating around an app, listing data or providing feedback to users.

Mobile apps and sites have unique UI design requirements because, compared to their desktop counterparts, they’re used in smaller screens and, at least with today’s modern mobile devices, rely on fingers instead of a keyboard and mouse as input mechanisms.

Whether you’re designing a mobile app UI for the first time or in need of specific design solutions, these mobile UI design pattern resources will surely help!

1. Mobile UI Patterns

Mobile UI Patterns is a great site to visit to see common mobile UI design patterns such as activity feeds and notifications. The patterns are organized into 20 categories so that you can easily find what you’re looking for.

2. Inspired UI

Inspired UI is an excellent mobile UI design pattern gallery with over 1,000 screenshots of real mobile apps. Design patterns featured in the site include sign up pages and check-in user interfaces.

3. lovely ui

This site features common mobile app user interface elements such as buttons, lists and popovers. lovely ui was created by NYC-based interactive designer Diana Frurip.

4. Mobile Design Pattern Gallery

This design pattern gallery is a supplement to UX designer Theresa Neil’s mobile design pattern book published by O’Reilly Media. This gallery features an anti-patterns section featuring UI design techniques to avoid. You can also view the design patterns on Flickr.

5. pttrns

Over 30 mobile UI design patterns (e.g. splashscreens and walkthroughs) are featured on pttrns, a gallery site with large screenshots and a clean interface. The site is by Robin Raszka (founder of popular iOS development firm Tapmates) and chemiX.

6. Patterns of Design

This site seeks to present notable mobile app UI patterns from exceptional iPhone and iPad apps. Patterns of Design is by Will Simons, a freelance UX designer and project manager.

7. 4ourth Mobile Design Pattern Library

This wiki resource is a general reference guide to mobile UI design patterns. It discusses a wide array of design patterns such as slideshows and pagination, to advertising within your mobile app.

8. Android UI Design Patterns

This blog by German technologist/developer/Android user Juhani Lehtimaki publishes posts that cover Android UI design patterns. In each post, a design pattern is discussed and relevant screenshots from mobile apps are included.

9. android pttrns

android pttrns, inspired by pttrns (featured above), is a gallery of Android app UI design patterns. It currently only has a few patterns, such as action bar and tab bar.

10. Official Developer Documentation of Mobile Operating Systems

Mobile OS manufacturers typically have official docs geared for professionals developing for their platform. These docs often include guides on UI design patterns.

For Android, check out Android Design’s Pattern section.
For iOS app designers, see iOS Human Interface Guidelines in the iOS Developer Library.
Designing for Nokia phones? Head over to Nokia Wiki’s Mobile Design Patterns.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

With Great (CMS) Power Comes Great Responsibility

Jacob Gube — Mon, 26 Sep 2011 10:00:03 +0000

Advertise here with BSA

One of the biggest advantages of using a content management system (CMS) is that it allows developers to empower site owners with unprecedented control of their website.

Giving website owners the ability to create, edit and manage their web property has many benefits. However, having too many features and site-management capabilities can burden the client and can wreak havoc on a website.

Read on for the five most common mistakes web developers make in an effort to empower their clients.

Mistake #1: WYSIWYG Editor Overload

What You See Is What You Get (WYSIYWG) editors (or rich-text editors) are great features to install in content management systems because they allow content creators the ability to create, edit and manage web pages without the need to know HTML.

WYSIYWG editors are so useful to end-users that you’d find most open source content management systems with it enabled by default. For example, WordPress has the Visual Editor and it’s the default content-editing view.

But is it really a good idea to let your client center text and turn it purple? Probably not. Ever been to a site with blue underlined text that wasn’t clickable? How about a company website that have hyperlinks in bolded, black text? These probably happened because they had out-of-the-box, un-customized WYSIWYG editors, which usually comes with everything but the kitchen sink.

In fact, the first thing most of our clients ask about is if they can limit how much their editors can use formatting.

Consider customizing WYSIWYG editors to only have the following:

Text Formatting

Heading 1
Heading 2
Heading 3
Heading 4 (if needed)
Blockquote
Ordered and unordered lists
Italics
Bold
One or two special CSS classes for emphasizing or de-emphasizing text

Web Content Elements

Links
File upload/attach
Images
Tables (with instructions to use properly on tabular data only)

Get Rid of

Underlining (because the industry best practice is to use underlines only for hyperlinks)
Direct font controls (such being able to change the color)
Emoticons

Below, see an example of a rich-text editor with too many options and features. It burdens the user interface and, when used improperly, can make web pages look like a Myspace page.

By configuring the CMS’s rich-text editor, content creators can have a less intimidating time composing content.

Of course, this is just a general guideline. Some project might need more and some might need less. A good practice would be to determine what’s needed and what’s not for each project instead of shortcutting the process and simply just providing the client with everything.

Mistake #2: Clients Editing CSS or HTML

A reasonably astute person with a desire to learn can edit HTML and CSS. But that’s true about anything. Just as car manufacturers don’t expect us to understand the inner workings of a car to be able to operate it, we shouldn’t expect our clients to know CSS and HTML to be able to run their website.

Like many design agencies, we tried to train our clients and their staff with HTML and CSS so that they could be fully empowered to make changes to their site. But every time, typically within a year or so, the client was so sick of it and had wasted so much time and money doing something they hated that they had us take back control of their websites.

When deploying content management systems, consider limiting access to the style sheets only to experienced professionals.

Mistake #3: Confusing "Empowered" with "Expert"

There was a recent Harvard Business Review report that talked about a number of studies that have shown that in order to be an expert at something, you need to have 10,000 hours of experience at it. It applies to chess, and music and business. It could also apply to web design and web development.

While you might have been in this industry for 5 or 10 years, your clients might only have a few hours experience as an operator of a site.

Don’t just turn over a CMS and hope that your client has enough experience to be an expert at usability and web design. Make sure you’re available for when they’re stuck.

Mistake #4: Giving Them More Than They Ask For

We’ve had a couple of clients come to us and tell us that their last web developer created a site that doesn’t do what they need it to do.

When we looked closer, we discovered that it did, in fact, do everything they needed it to do. And a lot more.

By going in, modifying the interface and removing and renaming things, we were able to create a much easier UI to use.

We know too many developers who create too many features for a project. Of course, when they put the product in front of real users, it becomes quickly obvious that it’s not user-friendly.

Mistake #5: Thinking That the Default CMS Settings Is Good

Today’s content management systems are so robust that you can pick any of the top five systems and 99% of your clients will have more features than they need.

What clients need is the ability to get their job done, and as web developers, it’s our responsibility to facilitate that. We need to make educated, experienced decisions so that our clients don’t have to. We need to help clients focus on what makes them awesome (as a person and as a company) and give them tools to leverage that.

Conclusion

As developers, we need to step up to the plate and make sure that our clients have tools that not only empower them in being able to manage the content on their site, but also empowers them to make the best use of their time.

Giving clients more choices and abilities to mess around with their website isn’t the same thing as empowering them. We might really just be hampering them and slowing them down with too many options, features and doodads.

About the Authors

Katie Methe is one of the sharpest Drupal Chicks on the East Coast. Her experience with Drupal ranges from small websites to complex and advanced databases. Catch up with Katie on Twitter @katiemethe or join the Gravity Switch mailing list to stay up to date!

Jason Mark is an educator, business owner, and author. His Massachusetts-based firm, Gravity Switch, continues to be the leader in web, iPhone and iPad development in New England, and Jason keeps their carbon footprint down by bicycling to work year round. Follow him on Twitter @jasonnmark.

Essential E-Commerce Website Features: Tips and Examples

Jacob Gube — Fri, 08 Jul 2011 10:00:12 +0000

Advertise here with BSA

There are many different approaches you can take when designing an e-store. However, you might notice that effective e-commerce websites have certain site features that are absolutely critical to the shopper’s experience.

We will look at these common features that you will find in almost all e-commerce websites.

Product Navigation

Perhaps the most important component of an online store is its navigation system.

Good website navigation is essential for any site, but much more so for e-commerce sites. Users need to have the ability to browse among different categories and products quickly through an intuitive navigation system. Investing in the information architecture of an e-commerce website is paramount in the site’s success.

Amazon

Amazon has had one the best-designed (and also extensive) navigation systems out there. The categories of the products that can be found on the site are well organized and give users the ability to swiftly navigate between different product categories.

As you’ll see in the preceding examples, a left vertical navigation menu is popular because it allows us to include more links versus a horizontal navigation menu.

Overstock

Overstock represents its comprehensive primary product navigation system as a vertical menu bar. In addition to the site’s primary navigation menu, Overstock has a robust navigation menu in the site’s footer.

Olive & Myrtle

This e-commerce site sells eco-friendly products. It has a vertical navigation menu on the left. They chose to style the "Sale" link so that it’s bold and in red in order to make it more prominent.

Via Snella

When an e-store has a small amount of products or product categories, a horizontal menu bar can be all that’s needed for product navigation. In the example below, you can see that Via Snella, a male fashion company that’s only been in business since 2006, can get away with a simple filter navigation arranged horizontally.

4th Street Cookie Company

The 4th Street Cookie Company is primarily a physical, brick-and-mortar store. However, they complement their physical store sales through their online shop. The product navigation in this case doesn’t need to be as extensive as a store like Amazon.com, since the cookie company only has a handful of unique products to offer. They’ve resorted to a thumbnail navigation for navigation to product pages.

Mozilla Store

The Mozilla store uses a left vertical navigation menu, displaying the product categories they have in the site.

etnies

This e-store provides shoppers two ways to browse products: a vertical navigation menu and a drop-down menu that appears when you hover over the "Shop" menu item in the site’s horizontal menu bar.

Trilby Phoenix

In this e-store, you can browse products using the left vertical navigation menu. The menu is subdivided into three main categories. Clicking on one of the main categories displays more links.

Empire Patio Covers

Empire Patio Covers uses a horizontal navigation menu. To get around the lack of space that’s associated with fixed horizontal navigation menus, submenu items are progressively disclosed using drop-down menus.

OneHorseShy

The product navigation system on this e-store is simple. You can browse by theme or by product.

Search Box

Having a clear and well-positioned search box is crucial to an e-commerce site. The ability to search an e-commerce website is very important because many online buyers have a specific item that they are looking for. A search box is a powerful site feature that will improve findability and navigability.

Often, search boxes in e-commerce stores are in very prominent positions, high up in the layout, enticing the user to search the site for the product they want.

Etsy

The search box of Etsy is a jutting fixture of the site’s design. It also allows you to limit your search within specific categories.

TasteBook

This e-commerce site has a search box that’s highly visible and placed in a high-value location. It has placeholder text to give users ideas on what they could search.

Cosmicsoda

The search box in Cosmicsoda is located on the right sidebar. Its unusual shape and eye-catching design can draw the attention of site users.

ThinkGeek

ThinkGeek places its search box on top of the vertical product navigation menu to make it easy to find. In addition, grouping the search box and product navigation menu makes sense because they are two site features that can be used together.

Airfix

Airfix has a search box widget that has options for advanced search criteria filtering. This example demonstrates a good way to provide a persistent advanced search feature that’s compact.

Shopping Cart

A shopping cart is almost always present in e-commerce stores. The shopping cart is usually the first screen in a checkout process. Products in the user’s shopping cart are typically displayed in a table/matrix format.

Its purpose is to display the items that the user has decided to purchase. It’s a highly functional feature that gives you a summary of the things you’re buying.

Common elements of shopping cart pages are:

Product name
Short product description (if the product name needs further explanation)
Product’s price
Total cost of products in the shopping cart
Product image thumbnail that displays a preview of the item
Quantity box that allows users to modify the number of items they want to purchase

DesignByHumans

The shopping cart of DesignByHumans is clear and functional.

The Brown Corporation

This example displays most of the common features we repeatedly see in shopping cart pages: quantity box, cost summary, the ability to remove a product or modify the quantity you want to purchase, etc.

BustedTees

The shopping cart of BustedTees gives you suggestions of other things you may wish to purchase based on the items currently in your shopping cart.

Atom Bicycles

When you hover over the shopping cart icon on this e-commerce website, instead of being directed to a shopping cart page, it will show you a short summary of items in your cart. This is a convenient way for shoppers to quickly see what they have placed in their cart without having to wait for another web page to load.

Threadless

The Threadless shopping cart is clean and straightforward.

Featured Products

Often, e-commerce stores have certain products they want to highlight. These products are often found on the front page of the site. These products are usually items that are on sale/clearance or new items that have recently been added to the inventory.

There are many ways to put featured products on center stage. A popular method is to have an image slideshow at the top of the home page’s layout.

Alexandalexa

The image slideshow on this e-commerce website takes center stage. At set intervals, it changes slides to display featured products and news.

Rifle Paper Co.

Featured products on the Rifle Paper Co. website are displayed in an image slideshow, as well as in a 3-column thumbnail arrangement below the main slideshow.

River Island

A big featured area can be seen in this e-commerce website. It takes up a significant amount of home page real estate.

Chicago L-Shirts

Featured items in this e-commerce website are displayed as the site’s background. As you navigate through the items using the left and right arrows on the left, the background image changes.

Product View Filtering and Sorting

When displaying a category of products or a list of search query results, having the ability to filter or sort products can greatly enhance the ability of the user to find exactly what she’s looking for.

Crate&Barrel

Crate&Barrel allows you to filter products by price, type and more. The e-store also allows you to sort products alphabetically or by price.

Ten Little Monkeys

The Ten Little Monkeys e-commerce site, which sells designer clothing for kids, gives shoppers the option to sort products chronologically or by price.

Bridge55

Bridge55 has a vertical checklist of product attributes to help you filter products so that you can find ones that match your criteria.

Product Images

The main disadvantage of e-commerce websites when compared to traditional physical retail stores is that websites can’t give shoppers the ability to touch and see products.

Thus, images of the products being sold must be included and displayed in an enticing way. Images must be big enough to see details and features of a product.

Free People Clothing Boutique

This clothing e-store has high-resolution images. Browsing through product photos gives shoppers an interesting user interface that allows them to drag their mouse over areas of the photo to see the area in greater detail/resolution.

Storenvy

Many e-stores place thumbnails of other product images below the current image. However, in this example, they are arranged vertically on the right side of the current product image being viewed, making them highly visible to users.

Jules

The product images on this site are beautiful and large. They integrate well with the other contents of the product page.

Black Estate Vineyard

Photos of the wines being sold in this e-store are masterfully arranged to complement the site’s design.

Jax Vineyards

Large product images secondarily serve towards the aesthetic appeal of this e-store’s web design.

Is It Time to Rethink Website Navigation?

Jacob Gube — Mon, 27 Jun 2011 18:34:43 +0000

Advertise here with BSA

The hyperlink has been a staple of the Internet since it began. The Web simply wouldn’t be a web at all if we didn’t link from one web page to another. Links make the Web work.

So it would make sense to put a lot of time and effort into how we design our links and navigation systems.

But, this isn’t always the case. Oftentimes, we shortchange the information architecture phase of a site build and fall back to one of the few tried-and-true design patterns — a canned template — for designing site navigation.

The Status Quo of Site Navigation

One of the many beautiful things about Web Design is the near-limitless options available to us. Yet, still, our navigation systems seem stuck into the existing preformed solutions.

For small, personal sites, a simple top horizontal navigation bar is the typical option.

For larger sites with more pages to link to, we default to a stacked vertical navigation bar to give us the ability to include more links.

In other situations, we find that drop-down menus or fly-out menus are used to keep the navigation menu compact.

Drop-down menu on Google home page.

It’s easy to see why we have these options. To some degree, we have been forced to conform to them because of the early limits in web design.

As time went on, our users got used to the status quo. As a result, we’ve been hesitant to rethink the way navigation systems are designed.

And even if we didn’t put our users first, why spend time creating something new when the hackneyed solutions work? (At least we think they do, anyways.)

But are these conventional forms of navigation still the best solutions?

Natural Evolution

Since its inception, Web Design continues to evolve at a rapid pace. Our designs are getting easier to use, they’re more pleasing to experience, they have become richer in features, and are better optimized for speed.

Through the changes, our conventions for navigation have stayed the same, perhaps with the exception of the short surge we saw of entirely Flash-based websites that introduced some pretty unique navigation system designs.

This Flash site forgoes the common navigation design patterns we see in most websites.

While there are plenty of reasons to avoid going back to the days of entirely Flash website builds — whether your reasons are related to performance, SEO, web accessibility, independence from a proprietary technology, etc. — for most of our projects, we may still be able to gain some inspiration from what Flash sites showed us, especially in the rethinking of how website navigation can look and function.

As web browsers become broader in features and as web design specifications continue to advance — most recently with CSS3 and HTML5 — our design opportunities broaden.

Website navigation should be at the forefront of our minds as we take advantage of these new technologies for the betterment of the user experience.

We have already seen CSS3 in action to some degree, most notably on responsive web designs that transform the navigation menu’s layout on-the-fly depending on the size of the user’s display (with the help of media queries).

On the Forgotten Presidents site, navigation layout changes from horizontal to vertical depending on display size.

Change with Purpose

Of course, changing something just for the sake of change is a poor excuse. We shouldn’t be changing the design and layout of navigation systems just because we have the tools to do so.

Instead, we should approach the situation by looking at existing issues with navigation design, and how we may address them with the new techniques available to us.

Some of the bigger questions touch on things such as where the navigation should be located, how expansive it should be, what shapes it consists of and what kind of feedback it will provide users. All of these lead to huge decisions that play a pivotal role in how usable, flexible and practical your design is.

Newegg provides the ability to navigate its immense inventory of products with multiple navigation solutions.

The New Face of Navigation

CSS can do some downright exciting things these days and it’s in the nature of many designers to experiment and push the boundaries of innovation.

For example, blogger and web developer Chris Coyier shows that we can draw adaptive shapes that can transcend the scalability limitations of images.

Graphic designer/web developer Alex Girón shows us that we can create pretty impressive animation effects and transformations with his experiment involving the solar system’s orbit.

This sampling of possibilities demonstrates some pretty impressive capabilities. It doesn’t take long to see that these experiments can be adapted practically to solve design problems.

With shapes, and the ability to animate them, we have the building blocks to create flexible and imaginative interfaces.

Offline Inspiration?

We don’t have to go far to see new twists on navigation. Our computers, stereos, appliances, vehicles, and even our keyboards all use a wide array of shapes, sizes and colors to build interaction.

The spacebar on your keyboard is not larger than the other keys because it contains more characters. It’s used the most, so it’s the largest — an application of Fitt’s Law.

Source: Wikipedia

Compare the size of your spacebar to your Y key, for example. In your web design, could the Home link (or any other frequently used navigation link) also benefit from the same boost in size over a less important link?

The interfaces on our sound system receivers, remote control, and car dashboards all house a wide variety of size, shape and color to denote differences in importance and function.

We hold the ability to craft these solutions in our web interfaces without sacrificing flexibility or accessibility, the traditional reasons we’ve stayed away from them, using progressive enhancement and other best practices.

To illustrate my point, I put together a quick example of an early-generation-iPod-inspired navigation using just HTML and CSS.

iPod illustration by Matthieu Riegler, Wikimedia Commons

In reality, a circle can often provide a much more convenient use of space when compared to rectangular shapes.

Also with all of the active areas of our navigation naturally placed at equal distance from each other, this type of navigation is consistent with Fitts’ Law.

Of course, this may or may not be the best solution for any single situation, but that is the beauty of our profession. Designers should be taking the time and consideration to explore all of the constraints each project comes with and working out individualized and ideal solutions.

Take Advantage of New Opportunities

Now, more than ever, we have the opportunity to use our creativity to solve complex issues with our navigation systems. The rapid adoption of CSS3 unlocks a huge amount of design potential. We can start to think outside of the limited array of design patterns we have for site navigation.

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

10 Important UI Design Considerations for Web Apps

Jacob Gube — Mon, 30 May 2011 14:53:23 +0000

Advertise here with BSA

When I finished building my first web app (CompVersions, which allows you to collect feedback from clients), I was surprised at the number of user interface decisions and considerations I hadn’t accounted for at the beginning of my journey. I’d like to share some of those things with you.

Many of these design considerations might seem superficially obvious, but once you’re going through the design and development process, it’s easy to forget about them because they’re like condiments — you hardly notice them when they’re there, but if they’re missing, your food just doesn’t taste right.

Blank State

The blank state is how your app will look and function when the user hasn’t entered any data yet (except perhaps their email address after signing up for an account). This is the first interaction and scenario that your user will encounter with your app and it can make or break their first experience and impression.

This state is a critical time for retaining users, because, at this point, users haven’t had enough invested into using the app for them to be discouraged to look for another solution.

One way of dealing with the blank state is to use media to show the user how to use your interface, e.g., a video or a product tour with screenshots. For example, upon signing up for a Fitbit account and logging in as an authenticated user for the first time, you’re presented with a slideshow of the different components of the app.

You can also provide your UI with cues, tips, and hints for first-time users, pointing out features in-line. For example, below, you can see that FreshBooks displays a message that tells you that you haven’t created any estimates yet, and then provides you with a link for creating one.

For my web app, the first time you log in, you’ll see four boxes that are numbered sequentially. You can’t progress to the second box without completing the first one so that there’s no guessing and the user immediately knows what to do to get started. There’s also only one textbox and button visible at the blank state, so there’s no ambiguity about what the next step should be. As users complete each step, the next box is unlocked for them, and they can proceed.

Let’s look at a couple more examples of blank states. At Basecamp, the first thing they show users is a video that gives you an overview of the way the web app works.

Dropbox has an interesting approach. They start you at a "Get Started" tab that has a numbered list of action items that steps you through what you need to do to get maximum value from using Dropbox.

As you complete the action items, they’re crossed out, and the box on the left incrementally fills up until you are complete.

Dropbox incentivizes exploration and use of the app by giving you rewards for completing items in the "Getting Started" tab, effectively gamifying the training and familiarization stage of their product.

Quota/Usage Information Displays

If you have limits to things such as storage, number of projects you can create, etc. you should constantly give users visual cues of how much they have left so that, if needed, they can upgrade their account before they reach the limit. It’s best to include some visible measurement of the unit that has a cap.

You don’t want to blindside your users by suddenly telling them they’re out of storage space or whatever it is that has a limit. Imagine that you’re working under a tight timeline, and you’re composing an email that has large file attachments. You hit the Send button only to find out that your file quota has been reached. You’d be one frustrated user.

Let’s go through some examples of quota/usage information displays.

On Gmail, you can see simple textual information showing how much storage you’re using and how much storage you have (in MB), as well as a percentage of how much storage you’ve used up. They’ve located this at the footer of the layout using a distinct color (green) for prominence.

Dropbox goes with a simple visual display showing you a bar with the percentage of storage you’ve used up.

On Evernote, the quota/usage information isn’t persistent in the interface; you have to visit the Settings page in order to see it. This isn’t as intuitive to locate as having it displayed persistently on the user interface (or providing a shortcut link to the usage information).

For my app, I went with a simple text display that shows storage space allotment and the quotas for the number of clients and projects the user has.

Plan Upgrading/Downgrading

How do you design the UI to remind users that they can upgrade their plan without interfering with their workflow? Once a user has bought a plan, they may want to upgrade or downgrade, and you don’t want to send them out of your app to do that. It should be seamless and convenient, so changes to the user’s plan are best done within the app.

Let’s go through some examples of how apps deal with changes in the user’s plan.

The FreshBooks upgrade reminder is persistent, positioned at the web app’s footer. It’s a constant reminder without being an obstruction to the workflow of the user, as it’s located outside of the task area of the UI.

The upgrade screen on Basecamp shows you clearly what you get from changing your plan.

The upgrade screen in Dropbox is clear and simple, as shown below.

On my app, CompVersions, here’s what the upgrade screen looks like.

States of UI Elements

Elements such as buttons, text areas, input fields, and so on can have several states. Normal, hover, disabled, active, inactive, focused states, etc. help users determine what possible actions they can perform on a given element. It gives them visual cues as to what they’re interfacing with, and what they aren’t.

These states are very important considerations. They add a tactile look and feel to your UI, and give your app a sense of being alive.

States are obvious on things like navigation menus and buttons because these are standard user interface elements, but what about on sections that you want to draw attention to or what about uncommon UI elements?

In CompVersions’ case, I wanted to guide the user through the four boxes with as many subtle visual cues as I could. One way was to have the outlined box change color when they hovered over a box (i.e. the box lights up) to indicate that it’s an interface-able UI element.

When the cursor leaves the box, it dims back down.

They all seem so seamless, but I had to make a conscious decision and write CSS rules for each state.

Here’s an example of different states of UI elements on Fitbit when you’re logging food. The inactive state is compact, but has clear instructions on how to interface with the element (an Add a note text control). When you click the Add a note text control, it switches to the active state featuring a text area (a standard text input UI element) with in-line instructions that says, "Write a new note…" which simultaneously deals with the blank state scenario (i.e. no note has been added yet).

Let’s look at an example of a hover state on Basecamp’s pricing table. When you hover over a pricing plan, the plan becomes highlighted and displays a tool tip with more information.

Keep the User Interface Simple and Intuitive

This is something that all UI designers will tell you but is a difficult concept to grasp until you’ve had to design your own UI: Keep it simple.

Making decisions on what goes and what stays is tough. How do you present the user interface of your web app as simply as possible, while still making it powerfully feature-rich? How do you design 30 different possible user actions in one screen without making it look like the cockpit of a fighter jet?

One thing you should practice when applicable is progressive disclosure. If the user doesn’t need a button, menu, or link — hide it. Get out of the user’s way and allow them to do what they want to do without having to wade through a ton of choices.

For example, on Dropbox, there are multiple contextual commands you can perform on your files. Here’s the inactive state of files in your Dropbox:

When you hover over a file, a contextual menu is progressively disclosed showing additional tasks you can perform on the targeted file or sub-folder, such as Delete or Move.

This concept sounds very easy to do in theory, but it’s surprisingly hard especially if your app has a lot of features.

Do you have to have an Edit command on every editable item at all times, or do you just progressively disclose this command when the user hovers over an editable item? If it’s the latter, how do you indicate that there are possible commands that can be performed, if the user hasn’t hovered over the item yet? Do you use an icon to save some space or do just use a text command that says Edit or do you have both an icon and a text command? If you use an icon, what would be an intuitive symbol for it? Does the symbol conflict with other icons already existing in the interface? If you use a text command, should it say Edit or Edit item?

And that’s just one element out of the many that you’ll have to be making constant micro-decisions on; decisions that are often going to be hard to reverse after users have taken on your app because even slight changes in user interfaces require retraining and recalibration from your users, which hinders their workflow.

Keeping things simple, intuitive and consistent really makes the UI easy to use, and this all takes a lot more work than many would think.

Use Visuals Smartly

Images and icons can help ease-of-use. Using visuals such as icons, graphs, charts, photos, etc. can replace long blocks of text and data tables altogether. It can make the readability of data easier and they can be used to provide visual cues as to what a certain command does.

Visuals are powerful elements in a graphical user interface. Let’s look at some examples of how visual elements are used in some web apps.

Below, a trash can icon, which is a recognizable and ubiquitous symbol for a Delete command, is progressively disclosed as a possible action when you hover over a to-do item on Basecamp.

Below, you can see a trash can icon, an icon that allows you to drag-and-drop the to-do item, and, at the far right, a chat bubble icon that when clicked, allows you to comment on the to-do item.

Think about the reasons for the design choices made in the above contextual menu. Why is the Edit command a text link? Perhaps because it’s the primary task a user would be performing the most, and the UI designer wanted it to have a more distinct visual appearance (using the inverse of Gestalt psychology’s Law of Similarity). Why are the icons arranged the way they are? Why is the comment bubble icon separated from the other icons?

Provide Instructions and Information at the Proper Places

There are times when you’ll need a callout box or notification area that tells the user something specific that they need to know to most effectively use the UI to its fullest potential. Provide as many of these helpful information as much as you can, at the right places, and make sure they’re integrated in the interface in such a way that they don’t pose as a hindrance to the user’s workflow.

For example, if you use icons for commands, you can use the alt and title HTML attribute to give the user a quick summary of what the icon will do when they hover over the icon.

Don’t overdo it. The key is to identify the places where more information and instructions are needed. If there are too many tooltips, hints, callout boxes, etc. the user can become desensitized to them and they can interfere with the use of the app because they constantly distract the user.

Optimize UI Speed

A web app should be responsive and fast. When there’s huge delays between sequential tasks, the user may develop an unconscious resistance to using the app. Apps are tools to accomplish specific jobs, and if it’s not fast, then it’s not a very effective tool.

For the most part, using best practices for optimizing page response times will help ensure you’re giving your users as fast and as efficient as an experience as possible. Most of these best practices are commonsense and, for maximum bang for your buck, you should focus on front-end web page performance first (e.g. reducing the file sizes of your page assets and reducing the number of HTTP requests needed to render a web page).

Use CSS when you can. Reduce your need for JavaScript. Don’t use Flash if there’s another comparable option (as it can be a resource hog).

Design using data to help you make informed decisions and to help you see if you can start using CSS3 to save on having to load CSS background images for rounded corners and color gradients. Use CSS3 as much as you can. Avoid using images if you don’t have to — rounded corners, text shadows, box shadows and a whole host of other popular aesthetic elements render much quicker than images in web browsers that support them.

Educate yourself on practical CSS3 by using this slideshow presentation created by Lea Veroukeep; refer to it constantly as you develop your app.

Designing with progressive enhancement in mind can help you optimize front-end performance. Allow yourself to make some sacrifices in aesthetics for users using older browser like IE6 for the overall good of your entire user base (if data suggests old browser usage is relatively low).

Use the Appropriate Cursor Pointer and Alt Attributes

This is a mini-tip that many of us forget. JavaScript DOM manipulation can make any element clickable. However, sometimes we forget to style clickable elements appropriately. Styling clickable elements by changing the cursor to a pointer helps indicate that an element is interactive. This is one of those things that you don’t notice until it’s not there.

Let’s say that you created span elements that are clickable using a web development library like jQuery.

HTML

...
Delete this record
...

jQuery

$('span.delete-row')
.click(function() {
$(this).parent('tr').remove();
});

Although the HTML element is interactive, it doesn’t change the mouse pointer to a cursor. To do so, you can use either CSS or jQuery.

CSS

span.delete-row {
cursor: pointer;
}

jQuery

$('span.delete-row')
.click(function() {
$(this).parent('tr').remove();
})
.css('cursor', 'pointer');

Also, use alt attributes on images, which can assist people in determining what icons are for if you’re using them in the UI. For example, even though you’re using a trash can icon instead of the word "Delete", let the alt attribute of the icon say "Delete".

Not only do alt and title attributes help screen readers for visually impaired users, it also helps remove ambiguities for users that aren’t visually impaired.

Finished State

You need to consider what the app will look like when data has been entered. In the case of CompVersions, I wanted to show (in chronological order) a particular flow — client information, project names, stage names and image names — in one view.

With Basecamp, this is the dashboard view. The user gets a quick snapshot of all of their projects and the activity associated with that project.

For Dropbox, this is just a listing of all the files and folders in your account.

This state tends to be the first screen that’s designed/mocked up when designing our app because this will be the most frequently seen/visited state once a user starts using our product.

Conclusion

There are many other examples of web apps that have successfully done all of the above. Once I went through this process and discovered these things, I started to notice of them in other apps — it becomes a natural habit, I suppose.

In my experience, it was surprising to realize how many little things you had to really think about, consider, and decide on when crafting an interface. It’s easy to gloss the details over when you want to ship a product as quickly as possible, but if you take some time to really polish the little things, your interface will be as awesome as possible and your users will enjoy using it.

The best compliment you can get when designing interfaces is that they’re easy to use. I hope the things I shared with you here get you a step closer to that praise.

About the Author

Marc Gayle lives in Jamaica and is bootstrapping CompVersions with blood, sweat and care. He’s a proud advisor to Kingston Beta, an organization set up to help nurture local tech entrepreneurship. He blogs at marcgayle.com. Follow him on Twitter @marcgayle.

Designing Effective FAQ Pages

Jacob Gube — Tue, 24 May 2011 10:00:55 +0000

Advertise here with BSA

FAQ stands for "frequently asked questions." As the name implies, it is a type of web page (or group of web pages) that lists questions frequently asked by users, usually about different aspects of the website or its services. The answers are typically shown with the questions.

FAQ pages aim to make finding answers easy for users. The ideal FAQ page helps people use the website without the need for outside assistance. More often than not, unfortunately, this ideal is not realized.

This article explores various aspects of FAQ pages, from design to efficiency issues. We will also look at some examples (and counter-examples) of great FAQ pages.

Where FAQ Pages Go Wrong

Here are a few things that detract from the usefulness of an FAQ page.

The Questions Aren’t Frequently Asked

Imagine that you’ve just launched a new website and have included an FAQ page. Why? If you don’t have any users yet, then you certainly haven’t received any questions (much less frequently asked ones).

Without user feedback, questions on this page are simply the site owner’s assumptions of what his users might want to know.

The Questions Are From Left Field

We’ve all seen FAQ pages that have bizarre questions — questions that have probably never entered anyone’s mind. Such questions are ones that website owners would like to be asked (e.g., "Why is this website so amazing?", "Who are the talented people running this website?").

The Page Label Isn’t Intuitive

The first time I saw an "FAQ" link was 10 years ago. I wondered about it for a while and eventually learned its meaning. Designers must be considerate of users who don’t understand technical terms. "Frequently asked questions" is clearer than "FAQ."

Also, descriptive and standard labeling is important. For example, California Court uses the label "Q&A," but that’s even more ambiguous than FAQ. Unless you have a good reason, stick with the standard label of "FAQ" or "Frequently asked questions."

The FAQ Page Isn’t Really Needed

Many websites have an FAQ page, but some don’t need one at all. Sometimes users find all the information they’re looking for and have no further questions. This means that the information architecture was designed well.

Imagine an online shop that presents prices and shopping instructions in one particular location; say, on a separate page or part of the home page. But if the FAQ page addresses pricing, it will be redundant; yet some users might seek it out to find pricing information. Link to the main pricing page instead.

Here’s a rule of thumb: if one type of information can be relayed in many ways on one website, there is something wrong with the information architecture of the website. Everything should be placed in its proper location.

How to Design an Effective FAQ Page

A good FAQ page lightens the load on help desks and customer support calls, which translates to cost savings and convenience for the user (since they don’t have to send a help ticket or pick up the phone to have their question answered). Thus, the importance of a well-crafted FAQ page can’t be denied.

When designing FAQ pages, have the following tips and strategies in mind.

Say "No" to FAQ Pages

Start by saying "No" to FAQ pages. In web design, you should strive for simplicity and you should constantly eliminate things that simply aren’t needed. The FAQ page supports the rest of the website’s content; if it doesn’t enhance what’s already there, it shouldn’t be a priority.

When an FAQ page is needed, it will be your users indicating the need for it. Perhaps you’ll start getting the same questions over and over again or a reoccuring feedback you get is the need for an FAQ page. Let users determine whether they need an FAQ or not.

Gather the Right Questions

The questions on the FAQ page must be real. For a new website, choose a timeframe (say, one month), and then survey and categorize the questions that users ask during that time via direct calls or email. You could even announce your open question period on the website.

If patterns emerge, it probably indicates a topic that should be addressed on the FAQ page. In this way, you can update the FAQ page regularly. This method is effective because users are actually participating in the page’s creation.

For example, The Invoice Machine invites questions, thus showing off its desire to create an FAQ page filled with useful questions.

Providing Good Entry Points

To use an FAQ page, users must be able to find it. Provide an obvious entry point: a distinct, clear and well-positioned link will do the trick. The two most common places for an FAQ link is in the primary navigation or site footer; these sections are separated from the rest of the web layout (often by color, hue, solid lines or white space) and thus stand out. Visitors are used to checking the navigation menu and footer for important links.

Bet Your Followers links twice to its FAQ page, once in the header and once in the footer. Users won’t have any trouble finding it.

GoSiteWave puts their FAQ links in the primary navigation menu and footer, providing two entry points.

The Resumator has a well-positioned and clear link to its FAQ page.

Readability

FAQ pages are generally text-based, so readability is important.

Readability can be achieved in different ways: text decoration (always minding the contrast between text and background), as well as line- and letter-spacing. Good CSS typography applies here.

Bet Your Followers uses contrasting colors to good effect.

As a counter-example, Vegas Uncork’d loses on legibility because of the lack of contrast between background and text, as well as the small font size.

Categorization of Questions

Users who are looking for an FAQ page probably got confused somewhere else on the website. Don’t make it worse with tangled topics.

Basic categories increase readability — a major building block of efficiency. Name the categories intuitively to avoid further confusion.

AGIA displays categories in a tree schematic, with a short description of each.

Here’s one idea: put the most important questions and answers in a distinct category. IMDB puts its top questions in their own category, no doubt increasing findability.

Mint has a well-categorized FAQ page. The categories are named well, too. In addition, they list the most frequently viewed questions.

Notable also has good categories, as well as a list of top FAQs.

Using icons can be effective in supporting categories, as Vertical Response does here.

While ABA English categorizes relatively well, the naming is inappropriate, so readability suffers.

Search

For ease-of-use, search functionality is essential for longer FAQ pages. When an FAQ page has many categories and subcategories, each described in detail, search becomes more important than ever.

FAQ search should differ from the general search system of the website, and this difference must be denoted in order to reduce the amount of search results and make finding the right questions easier.

IMDB adds a heading to indicate that the search will retrieve helpdesk topics only.

The label of the search feature on the FAQ page of SurveyMonkey works well.

Providing Visuals with Answers

Often, a picture is worth a thousand words. If images can help solve a user’s question, don’t hesitate to use them.

For example, The Bank of Washington offers screenshots to illustrate the answer to a question like, "How do I recover my lost password?"

Tips For Structuring an FAQ Page

If you have only a few questions and answers, put them together rather than on separate pages.

Of course, page length must be considered. Endless scrolling will tire users and cause them to leave before finding answers to their questions. Keep the page as short as possible. Make sure each question and answer pair is valuable.

Some circumstances make long pages unavoidable; linking to the top of the page after each answer is a good solution.

For the sake of readability, distinguish questions from answers, whether by color, size, typeface or decoration.

ETS has a well-structured FAQ page. Questions and answers are organized by topic, and the topics are collapsed by default, thus saving space.

CrazyEgg puts its questions on one page and answers on another, which is not very convenient for users.

Despite the wealth of material on NASA‘s website, the difference between the questions and answers isn’t very clear.

The way NetFaqs separates questions and answers is problematic.

PodShop indicates questions with a different background, a simple and effective way of creating a distinction between questions and answers.

The "Back to top" links on Rapid XHTML allow users to return to earlier sections of the page without having to scroll up.

Conclusion

Designing FAQ pages, amid all the other pages of a website, can be complicated work. Keep in mind that "FAQ" is a general name for the type of page that answers real questions and guides users. Most users have had trouble somewhere else on the website and are looking for a specific answer, so design the page in a way that actually helps them.

About the Author

Effective Website Help Systems: Tips and Examples

Jacob Gube — Tue, 10 May 2011 10:00:53 +0000

Advertise here with BSA

Web designers should regard every user who comes to our websites as potential newcomers, providing enough instruction and guidelines for them to complete their tasks and get familiar with the site.

Almost every type of website has to help its users, but in different ways. The type of website will determine the type of help system you should be providing.

Moreover, the effectiveness of a help system has a direct relationship to the quality of the site’s design. A poorly designed help system — however good its content — makes for a shoddy user experience.

In this article, we’ll study some approaches to designing effective help pages through examples, which might inspire you in your work.

What Is a Help System?

We see many terms and types of help systems used in the context of site design: "Help," "Support," "FAQ," "Docs," "Knowledge Base," etc. All of these web pages are intended to provide assistance to users.

Help systems should be conveniently accessible in locations where users can possibly need answers to their questions, e.g., when they get started using a website, and when they could benefit from useful information.

They’re critical because they are one of the last places a website visitor will look before deciding to give up and search for another website that will fulfill their requirements. Therefore, help systems can be crucial in retaining your site visitors.

While help systems are important and oftentimes indispensable, many website designs overlook the usefulness and importance of them. The reason for this is usually a lack of awareness by the website owner of the need for help content or of the benefit of integrating it into the content of the website.

For example, in the case of an online shop, you could put purchasing instructions on the home page or somewhere where users could easily find them, instead of creating a separate help section. This would also increase findability.

Some Examples of Help Systems

To help with the discussions that will follow, let’s look at just a few examples of help systems.

As you can see below, the site, Marie Catrib’s, puts its contact information and hours of operation in the footer of its home page. This subtly embeds the content for what is sometimes a completely separate page right into the footer. This information can be considered a part of the site’s help system.

An FAQ (which stands for frequently asked questions) is a place to answer questions that many users repeatedly ask or think of.

In other words, it could be a subset of guidelines from a top-level category like Support or Help for larger site help systems.

In most of cases, "Help" would be a better name for a top-level page. "Support" is usually used on commercial websites that offer some sort of technical service. Some sections are named "Help/support center."

Below, you can see Josh Lockhart’s website uses a "Help" link as an entry point to his help pages. The help pages is further subdivided into sections such as "How to Install," "How to Buy," "FAQ," and so on.

What follows is another example of a help system. Given its content (which is various categories), "Help Centers" is the right name for this section of Google’s site. Because they have many products, their system is very comprehensive and must be organized well in order for it to be effective and usable.

California Courts has a suitable help center, with well-defined categories. Icons are used to facilitate visual cognition of the different sections of the help system.

Survey Monkey‘s help center has well-crafted categorization.

Ten Little Monkeys lists some help pages under the heading, "help & information" on the footer.

BrightKite, like Ten Little Monkeys, uses the "Help" heading on the footer, and then lists some useful help pages that are part of their help system.

As a counter-example, Fine Point puts only their contact information in its help center, a lesson in misnaming and of an incompletely designed help system. As a good convention to follow, "Contact" or "Contact us" should be the label of this web page.

Help Page Features

All help pages, whatever their individual characteristics, have some common features.

The pages must be clear and illustrative.
They should have a short, descriptive explanation of each topic that can be read quickly. Users who come to help pages are usually already confused, so they aren’t inclined to read long blocks of text.
Following good scanning aids (such as bolding keywords) can increase readability.

In the example below, you can see that Maverick Label bolds important parts of the text and so helps the user along.

Despite the simple design, the links on System 7 Today work well to highlight important subjects.

In addition to these features, some other attributes deserve consideration. Let’s review them.

Accessibility

One of the most important aspects of any page is accessibility, but it’s even more critical for help pages. Help pages should be simply and quickly accessible.

Link to them in the header and footer, especially on long pages and the home page. Users shouldn’t have to dig into deeply buried pages. The experience should be straightforward.

For example, Traffik puts clear links on a plain background to increase readability.

ProWorkflow places a direct link to its support page in their primary navigation bar.

Invoice Machine follows the pattern we’ve seen above but also shows what can be found on the help page with descriptive text.

Constant Contact uses appropriate wording ("Learning center") for its resources and distinguishes it aesthetically from other links.

AAFP‘s breadcrumb shows the long path to the help center. Being so buried, the section could escape the attention of users.

Finding Google‘s help center from the home page is rather difficult. In fact, Googling it is quicker.

Categorization

To prevent confusion, help systems with a lot of content should be carefully structured by topic. For a help system to be effective, you must spend time in information architecture. Have a small number of main categories, each of which can have sub-categories.

There are different ways to categorize, but in general, put more important topics and common issues higher up in the structure.

Also, consider using icons to increase visual cues for the categories, as well as add life to the page.

In the example below, Apple‘s help center is brilliant, like its products! The topics are well categorized and cover all areas users might need help on.

ProWorkflow organizes its help content into several categories, each containing sub-categories.

Campaign Monitor uses icons to support its categorization, putting everything in the right place.

To prevent congestion, Google puts less important items on another page, accessible by a link.

Hostway is another example of classification with icons but with its own style.

HWG‘s FAQ page has very simple categorization, without anything superfluous.

Apache’s help system is another page of pure HTML. It’s simple but gets the job done.

Searchable Content

For extensive help systems, being able to search can be very useful.

Search results should display all of the information about a topic at a glance. But to be truly useful, it should display only pages from the help section and not the rest of the website so that the results presented doesn’t get overwhelming or confusing.

Google‘s help center has section-specific search appropriately labeled "Search Help," to indicate that you’re only searching the help center.

Storenvy‘s search feature is well positioned and well labeled (i.e., "Search Support").

TiVo also shows good positioning and creates a distinctive space for the search box. The colors add to the beauty.

ProWorkflow, despite good categorization, lacks search, which could cause difficulty.

Link to Other Resources

Sometimes users end up in the wrong place or can’t find what they’re looking for. Provide them with other useful options, like other help topics, a forum and so on via relevant hyperlinks.

The usefulness of such links will depend on their location: visible, nearby and distinct is best.

ThinkGeek lists almost every other place a user might want to go, and they put it in the right place and with a good heading.

Notable links to the latest forum posts, a good idea to introduce new resources and improve discoverability.

Like ThinkGeek, Yahoo organizes links under informative headings, which are helpful.

Contact Information

Putting contact information in the right place is another way to help users. When users can’t find what they’re looking for, they’ll ask, so you should be accessible in some way: phone, email, online chat, etc.

While contact information commonly appears on the home page and, of course, on the contact page, putting it on the help page is a good idea for fallback in case the user can’t find what they’re looking for.

Contact information on Crazy Egg is well presented and well positioned.

iPersonalAssistant offers simple contact information, without any unnecessary decoration. Like Crazy Egg, it also welcomes email.

TiVo offers live chat, an invaluable feature for a website.

ThinkGeek provides thorough contact information. And it is well positioned.

Help.com invites users to submit a ticket, which is handy, but perhaps less so than live chat. Of course, both methods require enough staff on hand to satisfy demand.

Getting User Feedback

To improve help material, assess its efficiency and gauge user satisfaction, feedback is important. The process shouldn’t be time consuming, or else users won’t participate; star or numerical ratings work better than forms.

A very simple survey by Microsoft asks whether a help resource was helpful or not.

Help.com asks users to write their suggestions, complaints and other feedback. While the feedback may be more detailed, analyzing it is tiresome work. And given the time required to participate, users might decline anyway.

Yahoo‘s complex form seems overly burdensome on users.

A cosmic survey by NASA! Displaying the average rating and number of ratings is smart. And they even provide help (see the question mark).

Putting It All Together

We’ve reviewed some essential elements of help pages. Many help pages don’t have any of them, while some present them concurrently.

Nearly perfect help sections are rare, and the ones out there tend to belong to the most successful companies on the web.

Campaign Monitor exhibits all of the traits of a perfect help section.

Like its other features, web giant Yahoo has a great help area.

Conclusion

This guide has introduced some essential tips and best practices for designing effective help pages. I hope that you’ll be able to heed the rules that apply to you and not pay too big a price for bypassing the rest. So start experimenting, while remembering the basics.

About the Author

Progressive Disclosure in User Interfaces

Jacob Gube — Mon, 04 Apr 2011 10:00:54 +0000

Advertise here with BSA

As designers, we’re always trying to get the most out of our interfaces and maximize whatever space is made available to us. While many solutions have been devised over the years, one above all others has consistently influenced the way visitors access the content they seek.

From simple techniques, such as tooltips and drop-down menus, to complex single-page websites powered by Ajax, progressive disclosure has become a formidable force.

This article explores the methodology of progressive disclosure and its impact on our interface design work.

What Is Progressive Disclosure?

Before we begin, let’s quickly define progressive disclosure. We all know how damaging clutter can be on usability, so simplifying interfaces whenever we can makes sense.

Progressive disclosure breaks content into smaller, more digestible blocks (showing them only when required). HTML elements, for example, can be hidden from users using the visibility or display properties in CSS; and scripting for events such as onclick can make things appear when requested.

By using these content presentation design patterns, we can keep our interfaces simple and help the user accomplish their tasks with greater ease.

The Good, Bad and Indifferent

The thing is, users can be quite exacting. Most demand power and flexibility in the tools they use to accomplish their everyday tasks — which we provide to them on the web with increasingly complex methods of delivery — yet users also want that power to be delivered with simplicity. For instance, many users may want feature-rich apps without needing to learn anything more than they already know (e.g., not having to read an instruction manual).

This dual need of complexity and ease of use has to be dealt with, even though it seems that both things are diametrically opposed.

Progressive disclosure can bring simplicity and feature-richness to a website.

The idea for progressive disclosure originated as a guideline in software design. When you click on an item in a menu, a dialog box usually appears with an array of carefully organized options. Disclosure happens not just in the dialog becoming visible, but also in the tabs used to move between categories.

On the web, this technique has come to be relied on because of the increased demands of users. Web designers will disclose parts of a page, offering secondary "advanced" options as required.

The benefits of progressive disclosure are these:

Clean, simpler, more productive interfaces (a godsend for small displays)
Important content is prioritized by giving the initial focus to the most common features
Less important content is hidden from view so as not to confuse visitors
Time is saved if scrolling is reduced and fewer refreshes are needed
Fewer errors occur because novice users will take easier, more manageable steps

There are also a few disadvantages to consider:

Accessibility can be tricky, as in the case of helping screen readers navigate to page sections
Page-loading times could increase because of the size of preloading content
Client-side technologies like JavaScript (Ajax), CSS3 or Flash could be disabled by the user (so you must take into account graceful degradation, which could add to the development time)
Too many choices on a navigation path could be confusing
Indexing by search engines and social networks could be affected by progressive disclosure methods (such as in the case of using the display:none; CSS property)

Progressive Disclosure Basics

In designing a site with progressive disclosure in mind, we should prioritize content into primary or secondary categories.

Primary content appears immediately in the normal flow of the page (and is highly visible).

Secondary content makes space for itself by doing one of three things:

Taking up a part of the browser window when requested (as we see with content that slides down when requested)
Replacing visible content in the layout (such as in tabbed interfaces)
Overlaying over the primary content (such as in lightboxes/modal windows)

Primary and secondary disclosure methods accomplish their purpose in different ways.

Progressive Disclosure Design Patterns

Let’s look at some of the ways progressive disclosure shows up in design work. Because this technique has existed for quite some time, designers have come up with innovative ways to give content added depth and substance, while making readability and the learning curve easier on users.

As with any pattern, every website will have its own requirements, and you should investigate your options before renovating your layout.

Primary Progressive Disclosure Methods

Below are some primary disclosure methods.

Hyperlinks

Clicking on a link redirects us to another page (or we scroll to the target content in the case of fragment links). This might entail losing the visible content, but it’s the most basic and recognizable way of navigating content.

Scrolling

Scrolling provides a way of disclosing content in order of priority. It could be as simple as ensuring that important content appears higher in the page.

CSS Media Queries

Different browsing devices will involve different requirements for content. A print stylesheet, for example, can remove unnecessary bulk (such as menus) and avoid wasted ink. Media queries, which was discussed in the article on responsive web design, can also help with this disclosure effect by taking away content from plain view for screen sizes that are smaller (which is the case with netbooks and smartphones).

Server-side Techniques

Languages such as PHP enable us to make requests to databases, external files and even other websites. As users request this content, we can mould an experience around them, rather than just showing just generic, static content.

Secondary Progressive Disclosure Methods

Below are some secondary disclosure methods.

Mouse and Focus Events

If you’ve made use of the :hover pseudo-class, you’ll know that we can dynamically style content based on mouse events such as a mouse hover. A reaction to a hover event could involve displaying a tooltip, presenting tab content or presenting menus in dropdown menus.

A focus event (which can be captured using the :focus dynamic pseudo-class) can also help with progressive disclosure in a similar manner.

Conditional CSS

Two CSS3 pseudo-classes in particular (:target and :checked) can be used for progressive disclosure (see a proof-of-concept here).

Ajax

The technique of content-on-demand has seen a significant rise in popularity through the use of Ajax. Ajax allows us to request new content based on user decisions and then embed it without needing to refresh the page. However, JavaScript is essential to this process (which can be problematic for a few users).

Pop-up windows

While many designers do not recommend them, pop-ups are another form of progressive disclosure. They bring up a new window or new content through some interaction with the current page. This method is less cleaner and more invasive than the others.

Modal windows

Progressive disclosure doesn’t always involve swapping content (either temporarily or long term). You could display a lightbox, a step-by-step wizard or a dialog box, thereby putting the focus on the requested content.

Some Things to Keep In Mind

With all of these techniques available to us, we should highlight a few guidelines for making use of this dynamic form of content presentation. We’ve already covered the advantages and disadvantages of this method. Below, you’ll find some practical advice on how best to eliminate or minimize any impairment of the user experience.

Keeping it brief, first decide whether a single- or multi-page layout suits your content (there is no harm in extending long articles and tutorials over multiple pages).

You’ll want to ensure that the disclosed content gets the full attention of the user (for example, lightboxes fade the background to reduce noise).

Limit choice so that users are not overwhelmed with options and content, but give enough options for them to make an informed decision.

Never force an option on users.

One page or many? The question often faces designers.

As always, compatibility is critical to the process. The method you adopt should have good solid browser support. If you opt for a dropdown menu with hover events, then you may need to use anchor links to ensure that IE6 users see the dropdown menu. If you use Flash or JavaScript, then make sure alternatives are available for when they are not, which many web designers forget about.

All basic points, but important nonetheless!

Users can disable scripting and Flash, so ensure that alternatives are available.

To avoid quirks with visibility, label your links so that users know what action is coming.

Structure and organize your mechanisms logically (having copy appear on the screen at random isn’t helpful), and use calls to action to point users to key data (since the material won’t be immediately visible, users need to know where they can locate the content).

Mystery-meat navigation is like playing guess who, without the fun.

Also, with regard to accessibility, ensure that screen readers can navigate around disclosed content effectively. Use skip links and label fragment identifiers clearly (because most screen readers will take this as an instruction to read part of the page, rather than just repeat everything).

Embedding skip links in the content and body helps orient screen reader users.

Finally, a note on performance. Technically speaking, progressive disclosure allows us to keep content hidden or off the page until it’s required (which reduces page requests and inter-sectional downloads). But performance can take a hit on single-page layouts if content is merely hidden until needed by the user, because content that is not in use is being loaded. While Ajax alleviates this (via asynchronous requests), it’s still a concern (Ajax can cause high amounts of persistent network traffic, which can slow down a website).

Showcase of Progressive Disclosure Examples

Here are a few examples of progressive disclosure in the real-world.

Hyperlinks are straightforward. Users simply click and go to a page with more content.

Traditional scrolling makes content below the fold of the canvas visible.

Mid-window scrolling can be initiated through iframes and the CSS overflow property.

Positional scrolling, to push users down the page, can be triggered with scripting.

Print style sheets disclose content, hopefully without the junk!

Media queries can contract and expand content, catering to different device

Amazon has a database of products and discloses them via server-side requests.

Tooltips disclose content temporarily and can be quite elegant.

Navigation tabs can be used to group and break sections of a page into categories.

Dropdown menus in web forms can be implemented not only via lists, but with option inputs.

Breakout boxes (slide-out menus) can present a variety of options in a structured way.

Using the target or checked pseudo-class gives the impression of multi-page depth.

JavaScript methods of altering visibility create effects similar to CSS3 but with the advantage of compatibility.

Panels can be produced by swapping content. (The event can even be a timed.)

Some websites make use of AJAX requests to speed up the appearance of content.

Pop-up windows aren’t usually welcome by users, but they are a form of disclosure.

Websites can do amazing things with Flash. Just a shame about all the disadvantages.

aightbox effects exist all over the web. They hold small individual items beautifully.

Step-by-step wizards can break up progressively disclosed content into digestible chunks.

Dialog boxes and alert windows provide a basic level of detail for decision-making.

Summary

There are many different ways to display content on the screen, and progressive disclosure is one of the most exciting. It increasingly frees us from having to refresh pages and from navigating to a unique location just to see something change slightly; it even allows us to simplify complex aspects of a website.

Enhancing a website is straightforward, but maximizing the available space can be quite a task. As you produce designs for clients or yourself, consider the impact that disclosure could have on your workflow. Perhaps a lengthy web form could be made easier; perhaps you could use lightboxes to better distinguish useful content on the page; and there is always the option of just giving more (or less) choice to users in order to reduce information overload.

However you disclose your wonderful content to visitors, give it some consideration and be creative!

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

User Interface Patterns for Dealing with Interactive Content

Jacob Gube — Tue, 08 Mar 2011 12:00:31 +0000

Advertise here with BSA

Websites and web applications are getting more and more interactive each day. Content on websites have the advantage over their printed counterparts in that, if we wanted to, we can let our users interact with them.

We have already discussed site navigation patterns and popular web content presentation patterns. Now, let us explore some UI patterns for our interactive website content.

Edit-in-place

Edit-in-place is a valuable UI for web applications that either allows users to create or edit content. Edit-in-place means that users can edit values right where they appear within the page instead of going to a new page with another interface.

Edit-in-place is often seen in WYSIWYG editors and apps that focus on data entry or organization (like mind-mapping apps, for example).

When to Use

Use edit-in-place as a UI design pattern wherever practical within your web apps. It’s more intuitive to use and causes less confusion among users.

Examples

Here are two examples of edit-in-place.

Flickr

In this wildly popular photo-sharing site, users can edit photo titles and certain other information in place.

Lovely Charts

This mind-mapping app has an edit-in-place editor, making it super easy to use.

Copy Box

Copy boxes are useful anytime you’re sharing formatted text or code with your visitors. A copy box provides formatted text that can be easily copied to a user’s clipboard.

Some sites have an auto-copy feature, so that text is copied as soon as the user clicks inside the box. This saves time and makes it easier for less tech-savvy users to copy the text they need. In most cases, a note indicating that text is automatically copied is displayed next to the box.

Other times, a button is provided to copy text or keyboard shortcuts are provided.

When to Use

Use a copy box any time you want your visitors to copy formatted text or code from your website.

Examples

Below are three examples of copy boxes used on website interfaces.

Snook.ca

This blog uses copy boxes wherever code snippets are displayed.

Web Designer Wall

This popular web design blog uses copy boxes for code snippets.

Mozilla Ubiquity

The copy box used on this site is formatted a bit differently, with code showing up parallel to the descriptions rather than underneath.

Input Suggestion and Forgiving Format

Search boxes and other input fields that allow for a variety of inputs are becoming more popular. For example, a mapping app might allow users to enter a zip code, coordinates, or a city and state all within the same input box, and either suggesting a correction of the input or allowing the user to enter it as-is and making the server-side code parse and correct the entered data.

This reduces confusion and makes it quicker and easier for visitors to supply the information they want to. It also lends itself nicely to a more streamlined and cleaner layout versus multiple input boxes.

When to Use

Any time there is a variety of possible inputs for a box, it makes sense to use input suggestion and a forgiving format that allows multiple types of inputs.

Examples

Here are three examples of input suggestion and forgiving format.

American Airlines

This redesign mockup by Dustin Curtis would use a forgiving format for booking travel, allowing users to enter their search terms the way they want to.

Google Calendar

The Quick Add function in Google Calendar uses an auto-suggestion and a forgiving format for input.

Bing Maps

Bing Maps offers forgiving search inputs when you are looking for directions.

Multi-Step

Any time you have a lengthy web form for your visitors to interact with (e.g. checkout forms, questionnaires, and signup forms) it can be made less daunting if you split it up into multiple steps.

A common practice for multi-steps is to show the user which step of the process they’re on and how many steps they have left.

Note that multi-steps do not negate the fact that your web forms should always be as short as possible.

When to Use

Any time you have a form or other process that takes more than half a dozen questions, it can be helpful to users if you break it up into multiple steps. Remember, though, that having too many steps can be just as frustrating, so make sure you account for that situation.

Also, make sure that answers are saved between each step, in case the user runs into any problems.

In addition, make sure that users can review and go back to change or edit their answers in previous steps.

Examples

Here are four examples of multi-step web forms.

Statement Stacker

This site uses a three-step web form for their signup process.

Livestream

This live streaming platform has a three-step signup process.

Autobutler.dk

This website uses a five-step signup process, but each step is short.

Onbile

Onbile has a four-step process for creating a mobile website.

Hover Controls for Content

UI controls for pieces of content can make it easier to interact with. These controls often appear when you hover over the target content.

Facebook, for example, makes great use of hover controls in the newsfeed. Hover over someone’s status in your newsfeed, and you get the option to block them or remove their updates from your feed. Hover over your own Facebook status or comment, and you get the option to delete it. It’s user-friendly and de-clutters the user interface.

When to Use

Any time you need functions that are easily accessed but aren’t used often, hover controls can be the perfect solution.

Examples

Here are a couple of examples of hover controls for content.

Facebook

On Facebook, hover controls allow admins to edit a Facebook Page’s information.

Twitter

Twitter uses hover controls to show options for replying to a tweet, along with retweet options and other controls.

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.

Six Revisions » User Interface

5 Reasons Why Metaphors Can Improve the User Experience

1. Metaphors Can Put Abstract Concepts in Concrete Terms

2. Metaphors Create Familiarity

3. Metaphors Can Trigger Emotions

4. Metaphors Can Draw the Attention of Users

5. Metaphors Can Motivate Users into Action

Conclusion

Related Content

About the Author

Mobile UI Design Patterns: 10+ Sites for Inspiration

1. Mobile UI Patterns

2. Inspired UI

3. lovely ui

4. Mobile Design Pattern Gallery

5. pttrns

6. Patterns of Design

7. 4ourth Mobile Design Pattern Library

8. Android UI Design Patterns

9. android pttrns

10. Official Developer Documentation of Mobile Operating Systems

Related Content

About the Author

With Great (CMS) Power Comes Great Responsibility

Mistake #1: WYSIWYG Editor Overload

Text Formatting

Web Content Elements

Get Rid of

Mistake #2: Clients Editing CSS or HTML

Mistake #3: Confusing "Empowered" with "Expert"

Mistake #4: Giving Them More Than They Ask For

Mistake #5: Thinking That the Default CMS Settings Is Good

Conclusion

Related Content

About the Authors

Essential E-Commerce Website Features: Tips and Examples

Product Navigation

Search Box

Shopping Cart

Featured Products

Product View Filtering and Sorting

Product Images

Related Content

Is It Time to Rethink Website Navigation?

The Status Quo of Site Navigation

Natural Evolution

Change with Purpose

The New Face of Navigation

Offline Inspiration?

Take Advantage of New Opportunities

Related Content

About the Author

10 Important UI Design Considerations for Web Apps

Blank State

Quota/Usage Information Displays

Plan Upgrading/Downgrading

States of UI Elements

Keep the User Interface Simple and Intuitive

Use Visuals Smartly

Provide Instructions and Information at the Proper Places

Optimize UI Speed

Use the Appropriate Cursor Pointer and Alt Attributes

Finished State

Conclusion

Related Content

About the Author

Designing Effective FAQ Pages

Where FAQ Pages Go Wrong

The Questions Aren’t Frequently Asked

The Questions Are From Left Field

The Page Label Isn’t Intuitive

The FAQ Page Isn’t Really Needed

How to Design an Effective FAQ Page

Say "No" to FAQ Pages

Gather the Right Questions

Providing Good Entry Points

Readability

Categorization of Questions

Search

Providing Visuals with Answers