While product findability is a key factor of success in e-commerce, it is predominantly enabled by simple search alone. And while simple search usually doesn’t fulfill complex needs among users, website developers and owners still regard advanced search as just another boring to-do item during development. Owners won’t go so far as to leave it out, because every e-commerce website has some kind of advanced search functionality, but they probably do not believe it brings in much revenue.On the contrary, well-devised advanced search offers several benefits and can be more than just a clumsy, complicated tool. First of all, effective search can accelerate the sales process. And faster sales can increase conversions, because you will not be losing customers who give up trying to find products. Furthermore, fast, precise and successful searches increase your customers’ trust.In this article, we will review how to build an interface that offers users the power of advanced search while preserving the clarity of simple search.Also consider our previous articles:Search Results Design: Best Practices and Design PatternsDesigning The Holy Search Box: Examples And Best Practices15 Common Mistakes in E-Commerce Design1. Dismantling BarriersAlthough almost every e-commerce website has advanced search, visitors do not use it. First of all, people only use tools that they see. Advanced search is usually hard to detect. The link is usually too small and ugly, and so the flashy simple search button nearby overwhelms it. So even if the user was inclined to perform an advanced search, they have no motivation to do it.The word itself is scary: “advanced.” It suggests we are about to encounter something complicated. And very often, we do. But even if we notice the advanced search link and are not intimidated by it, we don’t use it because we don’t see the benefit. The few who do use it see that once they perform the search, all “advanced-ness” is lost. So, to help our users exploit the power of advanced search, we have to fix usability problems, implement new approaches and improve our search terminology.2. ApproachesThere are several ways to enhance search. The classic approach for advanced search is parameter search. The user sets parameters using text boxes, operators and drop-down menus. When usability gurus tell you not to use advanced search, they are generally referring to this type. It usually has a complicated interface but can be very simple and effective if only the most important fields are shown and you stick to the basic guidelines of form design.Momondo elegantly and effectively sticks to the most important input fields, making parameter search user-friendly.Trulia’s parameter search is a bit more complicated but thoughtfully supported by input hints and prompts. Even more options are hidden under the “More search options” link for advanced users.A good way to avoid intimidating people is to disguise the complexity of the parameter search. Show only snippets of the interface by using the responsive disclosure/responsive enabling pattern. When the user sets a parameter, they move along, and then the next filter is shown. This solution can be useful for guiding novice users, but it can bore and irritate advanced users.On MyBankTracker, users have to select “Yes” for the “Compare your bank APY” option for the “What is your current APY?” question to be displayed.Faceted search is becoming the de facto standard for e-commerce website. The user performs a simple search first, but then on the results page, they can narrow the search through a drill-down link (for a single choice) or a checkbox selection (for multiple non-overlapping choices).This can be faster than the progressive disclosure/enabling pattern and easier to use than plain advanced search. Amazon takes a similar but slightly modified approach: when a user begins a search, they can set some narrowing filters like “Only books” at the very start.Filtering on Amazon.The search filtering on Plus+ is a bit more complex but still easy to use. Again, it is supported by input hints and prompts.From hereKontain emphasizes the most important filtering options with different colors.Travelers begin with a parameter search on Cleartrip but then find the best deal with faceted search.Website maintainers may choose to tag products, or even let users tag them themselves. Tagging gives a website an overlapping taxonomy so that users have different ways to reach products.After a user performs a keyword search, Issuu shows related tags to help the user narrow down the results. Note that the tags that are semantically closer to the search term have brighter colors.3. Building Better SearchFaceted search is the easiest and now safest method by which developers can offer users advanced search functionality. But how to implement it?Before undertaking something as time-consuming as that, make sure your website conforms to basic search usability principles. Is the search box in the right place? Does it work as expected?The structure of the search results page must also be crystal clear. The results must be ranked in a logical order (i.e. for the user, not for you) by relevance. Users should be able to scan and comprehend the results easily. Queries should be easy to refine and resubmit, and the search results page should show the query itself.Consider basic user needs and behavior when planning search. You could frame it as adopting an “incremental construction” pattern. Let users create their own search, step by step. People may not comprehend the whole system at once, but if you guide them gently, searching will be made easier. Make their exploration of search functionality safe: users should be reassured that they can undo any option and not lose their results or settings.MyFonts allows users to control the complexity of their queries by using the - and + buttons to add and remove filters.Your imagination may be a good start in defining which features deserve facets, but it is far from enough. Examine the traffic from your website and the search terms that users have typed into the simple search interface. Analyzing search query logs helps you handle spelling issues more effectively. Based on your analysis, you can also refine your auto-suggest system. What words, categories or taxonomy would describe these searches best? Use the most popular words in your search logs to label your facets and options.Don’t forget to check your competitors’ categories either. Perhaps you would sort your products differently, but you may get good ideas from them. When you have sorted out your facets, test them with real users. Don’t just test the interface during the final phase; let users play with earlier versions as well.4. Categorizing ProductsLet users choose from among only the features that might influence their purchase. Omit features that are not important to users, even if you think they are. Features rarely chosen by customers should be put at the end of the list or hidden under a “More options” link.PriceGrabber allows users to control the complexity of their queries by using the - and + buttons to add and remove filters.For your facets to work perfectly, you need a good taxonomy (categories). If users don’t understand your system, you lose. Don’t make users have to guess your system. Figure out their mental model of your product range first. The categories in your taxonomy should cover all products without overlap. For example, if a user can filter by color, do not omit colorless items in the results, or items for which color is irrelevant. Avoid vague words like “Other” and “More.” The category hierarchy should be shallow, so that users do not have to drill too deep to find a product.5. Architecture Of SearchAlthough faceted search is much easier to use than the classic advanced search, it can become complex if too many facets are shown. Based on George A. Miller’s research, humans can deal adequately with 7 items, plus or minus 2. This short-term memory constraint also informs the popular recommendation of the number of items to include in a navigation menu. Don’t have more than 10 facets. Any more will confuse users, and the results will be about as helpful as the Dewey Decimal system.Hide extra facets under a “More filters” link, even if you think they’re all important. Everything cannot be equally important. If you think certain facets will be important for one user group and other facets important for another, then create a drag-and-drop interface, and allow users to close facets. Letting them save results or facet settings is useful, too, but make sure unregistered users can do it as well.Globrix has many facets, but the interface can be cleaned up easily by closing unused ones.Order facets by importance. Most users will use only a few. Display only filter values that apply to the inventory you have available. If a facet has more than seven or eight options, put the extra options under a “More options” link or a different panel.The Perfume Shop gives priority to age and price. Note that it also indicates what is available in a given price range.Rate My Area offers an unconventional combo input box to begin a search, but its role is communicated clearly. After performing a search, the user can access various facets in different panels.Faceted search is still keyword-driven. If products would be easier to find by referring to categories or if users will have problems identifying their needs, then use filtered search or a well-designed parameter search. Faceted search is cool but not a cure-all.You do not have to type in your flight destination at Wizz Air. Simply select it from a map.6. Enhancing SearchWhatever method you choose, you have several means of enhancing search. Do not automatically order the results page of the most frequent queries. Prioritize what you think best matches the search (i.e. the best bets). Add popular queries to the ones you’ve verified, and review the most popular results from time to time.Apple puts what most users look for front and center. These best bets are supported with pictures.Cluster results based on your or your users’ tags, or get clustering algorithms to do the job. Clustering groups search results into categories but must be implemented with a powerful algorithm that can compete (or at least cooperate) with human tagging.Tag clusters on Flickr group results.Spell-check is also crucial. Many products have names that are hard to remember or type correctly. Users might think to correct their misspelling when they find poor results, but they will be annoyed at having to do that… or worse, they might think that the website either doesn’t work properly or does not have their product.eBay helps users type complicated words.Auto-suggestions can decrease the problems caused by mistyping or not knowing the proper terminology. Queries usually start with words, so unambiguous character inputting is crucial.Get Satisfaction offers auto-suggestion that is easily scannable and structured.If your results are somehow able to be localized in the real world, always show them on a map.MyBankTracker shows its results on Google’s well-known map. The pins are fairly big so that users can see what’s on them, while the transparency maintains visual consistency.7. Communication And LanguageThe success of your search depends heavily on your users’ understanding of what facets, filters and parameters do. Label them in easily understood language. Think about non-native English speakers as well. Communicate the benefits of advanced search clearly and concisely, and show visitors that advanced search helps them be more effective. Change the terrifying phrase “Advanced search” to something friendlier, like “Better search” or “Smart search.” If your advanced search functionality is integrated in the simple search area, just name the whole tool “Search.”OfficeMax names labels facets in simple and unambiguous language.8. Grouping And AlignmentGroup similar items and separate different items clearly. Indicate what is selected or not selected. Use a “Select” button that turns into an “Unselect” button when the user selects something, rather than a “Select all” checkbox (after checking “Select all,” the user might want to check other boxes, in which case the system might not behave consistently). When you arrange items in a facet, think of what would be the most common workflow for using the facet.Your Web Job provides checkboxes for narrowing a search. The page has no search button; when the user finishes typing, the search begins. Although this way of handling search is unconventional, it works because the feature is fast.Several interface patterns are available to make search more usable. Titled sections can effectively separate facets. Use bigger font for titles, and position them close to the content. Allow panels to be closed and moved. Align labels flush with input fields to make them more scannable, even when they vary in length. If you have a lot of facets or if the filters on the search results page have many options, you can arrange them using card stacks. But beware, information that users manipulate in one card won’t be visible when they manipulate another. They may forget their settings or assume that search results will be based on the last-manipulated facet and that earlier filtering has been undone.Comet lets users narrow their searches by clicking on facet links. Users can close and add facets, and the groupings show unambiguously what belongs to which facet. Note that Comet shows the number of items in a category beside each link.Diagonal balance and a liquid layout make a search interface more usable. If users are able to change the size of the search interface, be aware of what happens to labels and values in drop-down lists when the size is set very small. Beautiful interfaces can fall apart if their behavior is not tested at many screen resolutions. And don’t forget about mobile users, even if you don’t have a mobile version yet.Buttons play an important role in a search interface. Have as few as possible, but anything that triggers an action should be a button. Do not disguise such functionality with a non-button-like element. Label meaningfully; avoid vague words like “Okay” and “Done.” Make buttons stand out on the page so that users see them when they’ve finished what they’re doing. Place buttons at the end of workflows. Do not put anything that can modify the results of a button-triggered action after the button.9. Forms And ControlsThe design of facets is up to you. Text boxes and drop-down lists are usually more than enough, but you might want to use other things that can make forms and controls more usable.Choose sensible defaults for radio buttons and drop-down lists. Also, illustrations often convey information much better than words. For example, illustrating types of mobile phones is much less clumsier than describing them. Forgiving formats and structured formats help users input useful queries. Forgiving formats give users flexibility in entering data, while structured formats help them enter data more precisely.Vodafone uses simple yet attractive icons to help users choose quickly.Input prompts tell users what to do or type in a field, whereas input hints explain to users what they are expected to input in a field. Use them wisely: input prompts can be deleted, and too many input hints will annoy users. Also, the visual clutter might make them simply ignore important information.TripAdvisor uses input hints, illustrated options and sensible defaults to enhance the usability of its parameter search.10. Handling ResultsUse dynamic filtering where possible. Users want immediate results, so don’t disappoint. If dynamic filtering would make your architecture too slow, consider reprogramming the page or narrowing the number of options. It might be worth it.Show the number of actual results as well as the number of results the user would get if they were to filter by some other options. “List” and “tiled” are the basic views, but alternative views could help users scan results more easily.11. ConclusionContrary to widespread belief, advanced search is not an old lumbering monster of the past. If usability is taken into account and key structural and conceptual modifications are made, it can be an effective tool for increasing conversions and helping your users access more products. Of course, not every e-commerce website needs advanced search. You may have too few products or your products may be unique and hard to categorize. Advanced or faceted search is more useful when you have a wide variety of products.Showcase of Effective Search InterfacesTopsy implements just one facet, but the visual accents are effective.Collabfinder helps users with input hints in the parameter search.Firefox combines parameter search with faceted search in a complex but easy-to-use interface.Delicious allows filtering by tags and auto-suggests during searches.Rofo implements a slider and drop-down menu in its filtered search. Users can refine their search results with facets, too.Grooveshark filters by tabs. It could have used a drop-down menu, but this solution lets users see all of their options at once.FanSnap uses illustrations and good defaults to handle complex data. Putting the search results on the left is a bit unusual, but good visual highlighting helps users understand the role of each tool.A simple yet elegant implementation of filtered search by The Dubai Mall.Like.com includes a color-picker panel as part of its filtering options. The visual samples help, because color names have different meanings for different people.Further ResourcesUseful and nice search interface examplesAdvancing Advanced SearchSearch Patterns by Peter Morville3 Quick Design Patterns for Better Faceted Search10 Rules for Faceted Search on Travel SitesBest Practices for Designing Faceted Search FiltersFilter & sort: Improving ecommerce product findabilityFaceted NavigationSearch & Advanced Search User Experience RequirementsAdvanced Search: Is The Name A Problem?About the AuthorAndras Rung is a Hungarian usability expert who has worked for various institutions and companies since 2002. He is the co-author of the first Hungarian usability book and author of the usability blog Ergomania.(al)© Rung András for Smashing Magazine, 2009. | Permalink | 14 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: e-commerce, usability

  While product findability is a key factor of success in e-commerce, it is predominantly enabled by simple search alone. And while simple search usually doesn’t fulfill complex needs among users, website developers and owners still regard advanced search as just another boring to-do item during development. Owners won’t go so far as to leave it out, because every e-commerce website has some kind of advanced search functionality, but they probably do not believe it brings in much revenue.On the contrary, well-devised advanced search offers several benefits and can be more than just a clumsy, complicated tool. First of all, effective search can accelerate the sales process. And faster sales can increase conversions, because you will not be losing customers who give up trying to find products. Furthermore, fast, precise and successful searches increase your customers’ trust.In this article, we will review how to build an interface that offers users the power of advanced search while preserving the clarity of simple search.Also consider our previous articles:Search Results Design: Best Practices and Design PatternsDesigning The Holy Search Box: Examples And Best Practices15 Common Mistakes in E-Commerce Design1. Dismantling BarriersAlthough almost every e-commerce website has advanced search, visitors do not use it. First of all, people only use tools that they see. Advanced search is usually hard to detect. The link is usually too small and ugly, and so the flashy simple search button nearby overwhelms it. So even if the user was inclined to perform an advanced search, they have no motivation to do it.The word itself is scary: “advanced.” It suggests we are about to encounter something complicated. And very often, we do. But even if we notice the advanced search link and are not intimidated by it, we don’t use it because we don’t see the benefit. The few who do use it see that once they perform the search, all “advanced-ness” is lost. So, to help our users exploit the power of advanced search, we have to fix usability problems, implement new approaches and improve our search terminology.2. ApproachesThere are several ways to enhance search. The classic approach for advanced search is parameter search. The user sets parameters using text boxes, operators and drop-down menus. When usability gurus tell you not to use advanced search, they are generally referring to this type. It usually has a complicated interface but can be very simple and effective if only the most important fields are shown and you stick to the basic guidelines of form design.Momondo elegantly and effectively sticks to the most important input fields, making parameter search user-friendly.Trulia’s parameter search is a bit more complicated but thoughtfully supported by input hints and prompts. Even more options are hidden under the “More search options” link for advanced users.A good way to avoid intimidating people is to disguise the complexity of the parameter search. Show only snippets of the interface by using the responsive disclosure/responsive enabling pattern. When the user sets a parameter, they move along, and then the next filter is shown. This solution can be useful for guiding novice users, but it can bore and irritate advanced users.On MyBankTracker, users have to select “Yes” for the “Compare your bank APY” option for the “What is your current APY?” question to be displayed.Faceted search is becoming the de facto standard for e-commerce website. The user performs a simple search first, but then on the results page, they can narrow the search through a drill-down link (for a single choice) or a checkbox selection (for multiple non-overlapping choices).This can be faster than the progressive disclosure/enabling pattern and easier to use than plain advanced search. Amazon takes a similar but slightly modified approach: when a user begins a search, they can set some narrowing filters like “Only books” at the very start.Filtering on Amazon.The search filtering on Plus+ is a bit more complex but still easy to use. Again, it is supported by input hints and prompts.From hereKontain emphasizes the most important filtering options with different colors.Travelers begin with a parameter search on Cleartrip but then find the best deal with faceted search.Website maintainers may choose to tag products, or even let users tag them themselves. Tagging gives a website an overlapping taxonomy so that users have different ways to reach products.After a user performs a keyword search, Issuu shows related tags to help the user narrow down the results. Note that the tags that are semantically closer to the search term have brighter colors.3. Building Better SearchFaceted search is the easiest and now safest method by which developers can offer users advanced search functionality. But how to implement it?Before undertaking something as time-consuming as that, make sure your website conforms to basic search usability principles. Is the search box in the right place? Does it work as expected?The structure of the search results page must also be crystal clear. The results must be ranked in a logical order (i.e. for the user, not for you) by relevance. Users should be able to scan and comprehend the results easily. Queries should be easy to refine and resubmit, and the search results page should show the query itself.Consider basic user needs and behavior when planning search. You could frame it as adopting an “incremental construction” pattern. Let users create their own search, step by step. People may not comprehend the whole system at once, but if you guide them gently, searching will be made easier. Make their exploration of search functionality safe: users should be reassured that they can undo any option and not lose their results or settings.MyFonts allows users to control the complexity of their queries by using the - and + buttons to add and remove filters.Your imagination may be a good start in defining which features deserve facets, but it is far from enough. Examine the traffic from your website and the search terms that users have typed into the simple search interface. Analyzing search query logs helps you handle spelling issues more effectively. Based on your analysis, you can also refine your auto-suggest system. What words, categories or taxonomy would describe these searches best? Use the most popular words in your search logs to label your facets and options.Don’t forget to check your competitors’ categories either. Perhaps you would sort your products differently, but you may get good ideas from them. When you have sorted out your facets, test them with real users. Don’t just test the interface during the final phase; let users play with earlier versions as well.4. Categorizing ProductsLet users choose from among only the features that might influence their purchase. Omit features that are not important to users, even if you think they are. Features rarely chosen by customers should be put at the end of the list or hidden under a “More options” link.PriceGrabber allows users to control the complexity of their queries by using the - and + buttons to add and remove filters.For your facets to work perfectly, you need a good taxonomy (categories). If users don’t understand your system, you lose. Don’t make users have to guess your system. Figure out their mental model of your product range first. The categories in your taxonomy should cover all products without overlap. For example, if a user can filter by color, do not omit colorless items in the results, or items for which color is irrelevant. Avoid vague words like “Other” and “More.” The category hierarchy should be shallow, so that users do not have to drill too deep to find a product.5. Architecture Of SearchAlthough faceted search is much easier to use than the classic advanced search, it can become complex if too many facets are shown. Based on George A. Miller’s research, humans can deal adequately with 7 items, plus or minus 2. This short-term memory constraint also informs the popular recommendation of the number of items to include in a navigation menu. Don’t have more than 10 facets. Any more will confuse users, and the results will be about as helpful as the Dewey Decimal system.Hide extra facets under a “More filters” link, even if you think they’re all important. Everything cannot be equally important. If you think certain facets will be important for one user group and other facets important for another, then create a drag-and-drop interface, and allow users to close facets. Letting them save results or facet settings is useful, too, but make sure unregistered users can do it as well.Globrix has many facets, but the interface can be cleaned up easily by closing unused ones.Order facets by importance. Most users will use only a few. Display only filter values that apply to the inventory you have available. If a facet has more than seven or eight options, put the extra options under a “More options” link or a different panel.The Perfume Shop gives priority to age and price. Note that it also indicates what is available in a given price range.Rate My Area offers an unconventional combo input box to begin a search, but its role is communicated clearly. After performing a search, the user can access various facets in different panels.Faceted search is still keyword-driven. If products would be easier to find by referring to categories or if users will have problems identifying their needs, then use filtered search or a well-designed parameter search. Faceted search is cool but not a cure-all.You do not have to type in your flight destination at Wizz Air. Simply select it from a map.6. Enhancing SearchWhatever method you choose, you have several means of enhancing search. Do not automatically order the results page of the most frequent queries. Prioritize what you think best matches the search (i.e. the best bets). Add popular queries to the ones you’ve verified, and review the most popular results from time to time.Apple puts what most users look for front and center. These best bets are supported with pictures.Cluster results based on your or your users’ tags, or get clustering algorithms to do the job. Clustering groups search results into categories but must be implemented with a powerful algorithm that can compete (or at least cooperate) with human tagging.Tag clusters on Flickr group results.Spell-check is also crucial. Many products have names that are hard to remember or type correctly. Users might think to correct their misspelling when they find poor results, but they will be annoyed at having to do that… or worse, they might think that the website either doesn’t work properly or does not have their product.eBay helps users type complicated words.Auto-suggestions can decrease the problems caused by mistyping or not knowing the proper terminology. Queries usually start with words, so unambiguous character inputting is crucial.Get Satisfaction offers auto-suggestion that is easily scannable and structured.If your results are somehow able to be localized in the real world, always show them on a map.MyBankTracker shows its results on Google’s well-known map. The pins are fairly big so that users can see what’s on them, while the transparency maintains visual consistency.7. Communication And LanguageThe success of your search depends heavily on your users’ understanding of what facets, filters and parameters do. Label them in easily understood language. Think about non-native English speakers as well. Communicate the benefits of advanced search clearly and concisely, and show visitors that advanced search helps them be more effective. Change the terrifying phrase “Advanced search” to something friendlier, like “Better search” or “Smart search.” If your advanced search functionality is integrated in the simple search area, just name the whole tool “Search.”OfficeMax names labels facets in simple and unambiguous language.8. Grouping And AlignmentGroup similar items and separate different items clearly. Indicate what is selected or not selected. Use a “Select” button that turns into an “Unselect” button when the user selects something, rather than a “Select all” checkbox (after checking “Select all,” the user might want to check other boxes, in which case the system might not behave consistently). When you arrange items in a facet, think of what would be the most common workflow for using the facet.Your Web Job provides checkboxes for narrowing a search. The page has no search button; when the user finishes typing, the search begins. Although this way of handling search is unconventional, it works because the feature is fast.Several interface patterns are available to make search more usable. Titled sections can effectively separate facets. Use bigger font for titles, and position them close to the content. Allow panels to be closed and moved. Align labels flush with input fields to make them more scannable, even when they vary in length. If you have a lot of facets or if the filters on the search results page have many options, you can arrange them using card stacks. But beware, information that users manipulate in one card won’t be visible when they manipulate another. They may forget their settings or assume that search results will be based on the last-manipulated facet and that earlier filtering has been undone.Comet lets users narrow their searches by clicking on facet links. Users can close and add facets, and the groupings show unambiguously what belongs to which facet. Note that Comet shows the number of items in a category beside each link.Diagonal balance and a liquid layout make a search interface more usable. If users are able to change the size of the search interface, be aware of what happens to labels and values in drop-down lists when the size is set very small. Beautiful interfaces can fall apart if their behavior is not tested at many screen resolutions. And don’t forget about mobile users, even if you don’t have a mobile version yet.Buttons play an important role in a search interface. Have as few as possible, but anything that triggers an action should be a button. Do not disguise such functionality with a non-button-like element. Label meaningfully; avoid vague words like “Okay” and “Done.” Make buttons stand out on the page so that users see them when they’ve finished what they’re doing. Place buttons at the end of workflows. Do not put anything that can modify the results of a button-triggered action after the button.9. Forms And ControlsThe design of facets is up to you. Text boxes and drop-down lists are usually more than enough, but you might want to use other things that can make forms and controls more usable.Choose sensible defaults for radio buttons and drop-down lists. Also, illustrations often convey information much better than words. For example, illustrating types of mobile phones is much less clumsier than describing them. Forgiving formats and structured formats help users input useful queries. Forgiving formats give users flexibility in entering data, while structured formats help them enter data more precisely.Vodafone uses simple yet attractive icons to help users choose quickly.Input prompts tell users what to do or type in a field, whereas input hints explain to users what they are expected to input in a field. Use them wisely: input prompts can be deleted, and too many input hints will annoy users. Also, the visual clutter might make them simply ignore important information.TripAdvisor uses input hints, illustrated options and sensible defaults to enhance the usability of its parameter search.10. Handling ResultsUse dynamic filtering where possible. Users want immediate results, so don’t disappoint. If dynamic filtering would make your architecture too slow, consider reprogramming the page or narrowing the number of options. It might be worth it.Show the number of actual results as well as the number of results the user would get if they were to filter by some other options. “List” and “tiled” are the basic views, but alternative views could help users scan results more easily.11. ConclusionContrary to widespread belief, advanced search is not an old lumbering monster of the past. If usability is taken into account and key structural and conceptual modifications are made, it can be an effective tool for increasing conversions and helping your users access more products. Of course, not every e-commerce website needs advanced search. You may have too few products or your products may be unique and hard to categorize. Advanced or faceted search is more useful when you have a wide variety of products.Showcase of Effective Search InterfacesTopsy implements just one facet, but the visual accents are effective.Collabfinder helps users with input hints in the parameter search.Firefox combines parameter search with faceted search in a complex but easy-to-use interface.Delicious allows filtering by tags and auto-suggests during searches.Rofo implements a slider and drop-down menu in its filtered search. Users can refine their search results with facets, too.Grooveshark filters by tabs. It could have used a drop-down menu, but this solution lets users see all of their options at once.FanSnap uses illustrations and good defaults to handle complex data. Putting the search results on the left is a bit unusual, but good visual highlighting helps users understand the role of each tool.A simple yet elegant implementation of filtered search by The Dubai Mall.Like.com includes a color-picker panel as part of its filtering options. The visual samples help, because color names have different meanings for different people.Further ResourcesUseful and nice search interface examplesAdvancing Advanced SearchSearch Patterns by Peter Morville3 Quick Design Patterns for Better Faceted Search10 Rules for Faceted Search on Travel SitesBest Practices for Designing Faceted Search FiltersFilter & sort: Improving ecommerce product findabilityFaceted NavigationSearch & Advanced Search User Experience RequirementsAdvanced Search: Is The Name A Problem?About the AuthorAndras Rung is a Hungarian usability expert who has worked for various institutions and companies since 2002. He is the co-author of the first Hungarian usability book and author of the usability blog Ergomania.(al)© Rung András for Smashing Magazine, 2009. | Permalink | 12 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: e-commerce, usability

  The standard approach to interface design is to craft a channel that allows you to easily and efficiently control hardware or software; it’s all about the interaction between people and computers. But today, the two entities on each side of the user interface are changing: it’s no longer about people interacting with computers, but rather about people interacting with people through computers.This is the nature of the social Web. Social news websites, message boards, social networks, online stores and blogs all have some sort of user interaction going on, whether it’s comments on a blog post or social games on Facebook. The critical issue here is that people are not interacting directly with other people; rather the interaction occurs through a user interface. The computer acts as a mediator.In essence, we control the flow of user interaction on our websites. By crafting an interface to facilitate certain behaviors, we can influence the direction in which our community goes.“Small software implementation details result in big differences in the way the community develops, behaves and feels.” — Joel Spolsky, More Joel on SoftwareIn this article, we’ll demonstrate the power of social interface design and what it can do for you, using several practical examples.Social Interface Design TechniquesUser points and BadgesAchievement, and more importantly, the feeling of achievement, can play a big part in social websites and games. You may be familiar with the massive multi-player games that have a system whereby players progress through levels as they play the game. Each level brings more prestige to the player and so keeps them playing more — with the next level always just a little bit out of reach.The same idea can be used on social websites by recognizing your users’ contributions. For example, for a social news website, you could award points to users for submitting stories. You could also give users special badges when they perform a certain number of tasks. In a social environment, these badges would lift the recipient’s ego, and so people would be motivated to compete for badges.These kinds of things enable us to influence the direction in which our community moves. For example, to increase user participation, such as the number of comments people leave, you could give users a badge after they’ve made a certain number of comments. The same could be applied to any other user driven-content: submitting stories, answering questions, asking questions, writing reviews and so on. The Envato marketplace awards badges to its sellers and buyers.Of course, the flaw to this method is that while getting quantity may be easy, controlling quality may not be. You want users to leave a lot of comments or reviews on your website, but you want these contributions to add value. There is no exact science or formula for how to do this, so the best advice is simply to keep this factor in mind when designing a social mechanism of this type. Will the technique you’re considering add more volume or value?Social news websites tend to give their users points from the submissions that people have liked. This drives people to find better and more interesting stories to submit. Websites such as Envato marketplaces and Stack Overflow give people badges when they perform certain actions or do something a set number of times. Stack Overflow’s achievement badges.Unlockable Features as RewardsPoints and badges are superficial prizes: they’re all about ego. You can go a step further and offer tangible benefits to your biggest contributors, such as by unlocking new features for your website or application. Unlocking new features differs from things like badges and points because the user isn’t interested here in building their ego; they’re interested in getting more value out of your website or application.You may be familiar with the “Skinner Box,” the famous psychological experiment developed by B. F. Skinner that saw a rat placed in a box with a button and a food dispenser. If the rat stepped on the button, it would receive some food. The food here was the reward for pushing the button, and it worked. The rat kept pushing the button to get more food.The same principles apply to social interface design. By giving your users little rewards for accomplishing certain things, you can steer the direction of your community. The trick is to make the rewards beneficial enough for people to want to achieve them.Hacker News unlocks comment down-voting when you accumulate a certain number of points (highlighted).Hacker News, a social news website for developers and entrepreneurs, unlocks things like comment down-voting as you earn points from your submissions and comments. While you cannot lose points for your submissions (there is no down-voting for submitted stories), you can lose points for your comments. Coupled with the fact that you could potentially gain or lose certain functionality on the website depending on the quality of your comments, this makes users more careful about what comments they leave, and they have more incentive to add real value to what another user says.Reply NotificationsA popular feature on blogs and message boards is email-based notification of new replies to your messages. The feature works like this: you submit a new post to a social website, and when somebody replies, you are notified by email. This allows you to keep track of new replies without having to visit the website. The reply notification checkbox on the Webdesigner Depot comments form.While this feature makes sense from the user’s perspective, it might not make sense for the website owner. Email notifications move your audience from direct on-site browsing to off-site email. If users can be notified of new replies, why would they check the website manually?But they do have a reason to come back. When users come back to your website they not only check for replies to their messages, they also read other messages and browse other new content. This keeps the website alive and visitor loyalty high. So while providing such notification systems may not seem logical at first, think about the long-term effects of such features.Dealing With TroublemakersHowever much we want our community members to all get along, there will inevitably be one or two people who seem to want to cause nothing but trouble. Unfortunately, one rotten apple can spoil the barrel, so you’ll want to deal with these troublemakers quickly and efficiently.The traditional method of dealing with such people is to remove their access to the website, to ban them. This is the inclination of most people because that’s how things work in the real world. If someone causes trouble in your home, shop or bar, you ask them to leave. In more extreme cases, you might ask security personnel to escort them out. But you just want to get them out by any means.That’s exactly how most people deal with troublemakers online: they simply ban them using one of several methods. These methods include deleting their messages, de-activating their account and blocking their IP address. In many cases, this works just fine. The user is booted from your website and order is restored. However, things don’t always go smoothly. Some people enjoy the attention they get and may create new accounts to continue making a disturbance.A social interface technique can come in handy here. Instead of banning these individuals, we could let them stay and use the website as they like, but we would hide all of their messages and content from everyone… everyone, that is, but them. So the troublemaker would still see all of their messages and wouldn’t suspect that anything is up, but no one else would see them, so they would cause no disturbance. Yes, the troublemaker may eventually find out that something is going on, but then again, they may assume that everyone is just ignoring them, which is not an unlikely scenario. Whether they leave or stay wouldn’t matter anyway if they’re invisible.Reply ThreadingThreading, or branching, is a way to organize comments and posts on message boards and blogs. A thread, or branch, is a collection of comments that stem from one particular post, and so they focus the discussion on whatever that parent post is about. Threads organize different topics on the same page, usually by indenting the child comments under the parent. This technique may not work in all circumstances.Threading comments under blog posts or message board posts may result in parallel discussions taking place. If you don’t want this — if you don’t want people to talk about different topics but instead focus on the original post — then it may be best to keep the comments and replies in a flat, linear structure.On the other hand, threading can be effective in different contexts. For example, on social news websites such as Slashdot, which feature heavy threading of comments on posts, it effectively turns the comment area into a platform for related discussions, each wrapped in a separate thread. This means that if someone had an interesting angle to explore related to the entry, they could pursue it, and subsequent comments would follow that tangent. Slashdot features deep comment threading on stories, with each comment following its own tangent.Threading can be useful on blogs because it allows you to effectively reply to individual commenters. One of the best ways to generate healthy discussion is to take the time to reply to as many comments as possible. This sends a clear message: you care. When someone leaves a comment and gets a reply from the blog’s author, they know that their comment is being read and that the author is interested in what they have to say. This makes them much more likely to add more comments in future because they know their input will be read and considered and that they won’t be wasting their time. Threading better organizes comments when there are a lot of such targeted replies.Wrapping Up…So, how do you go about designing an interface with social elements in mind? Focus on your goals. Before you can come up with an effective interface, you need to know exactly what your goals are. What do you want to happen? Do you want people to leave many comments on your blog? Do you want to encourage people to post answers to questions, or to submit them? Do you want people to submit files or leave ratings? Form a clear picture in your mind of what you want the interface to promote. Before you set off, you need to know your destination.Only when you have defined your objectives can you begin to develop a strategy to meet them. Social interface design is a new field. Much has been written about usability and interactive design, but still not a lot on social interface design. It is an intersection of various fields: interface design, sociology and psychology, and as such it requires more than just an understanding of usability and design; it requires an understanding of human behavior and interaction. Using concepts from these other fields help you make interfaces that aren’t just easy to use, but that steer your community in the intended direction.(al)© Dmitry Fadeyev for Smashing Magazine, 2009. | Permalink | 33 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: interfaces, social, ui, usability

It’s interesting to see the latest developments in the phone market. Everyone is scrambling to match the iPhone in form and function in order to hold on to their market share. Sure, the iPhone is a high end phone, so not everyone is going for it, but it at is also a very very successful phone that gets a lot of things right, and the competition knows it. Which is why we’re seeing all those Storms, Pres and Droids on the market lately. They come close, but always seem to fall short. It’s not the features — these phones usually have more features and better specs than Apple’s offering — it’s something else. To me, it all boils down to just 3 things. If any phone manufacturer gets these 3 things right, they’ll beat the iPhone at its own game: 1. Flow 2. Responsiveness 3. Polish 1. Flow Usable devices are all about flow. What’s flow? For every task that people perform on their device there is a sequence of actions they go through. Sometimes it’s just one action — you click a button and whatever you wanted to happen, happens: e.g. pushing the Home button to get back to the main screen. For other tasks you may go through dozens of actions before you reach your desired end. Good flow means the designers have anticipated common tasks, reduced the number of actions required to accomplish them, and ensured the next actions are always there in front of the user so they don’t even have to think about what to push next. Here’s a great presentation by Ryan Singer from 37signals talking about usability — Ryan talks about flow at about 38 minutes in with some great examples. 2. Responsiveness Responsiveness here is all about speed. Stuff should happen when you press buttons or slide your finger across the screen. That’s obvious, right? Yet most phones on the market aren’t very responsive. You slide your finger, and half a second later the screen begins to move in a choppy manner. The device is laggy and slow — it’s not responsive. All of the lag, the waiting between screens, the waiting for applications to launch and for the screen to scroll creates serious friction with the user. When you want to do something you have to wait for the device to catch up. That’s frustrating. 3. Polish Polish is craftsmanship. When you’re finalising the user interface, make it look good. This doesn’t mean adding gradients, shiny gloss, reflections, shadows or a plethora of other visual effects — most of that stuff is superfluous — it means tasteful typesetting, choice of palette and contrast calibration. The important things should pop out at you, while the secondary and tertiary elements should fade into the background. There should be enough whitespace to make things easy to read and scan. That’s all you really need, yet we’re still seeing a lot of blunders in this department. Just look at the settings panels of a Blackberry — there isn’t even any left padding on the text there, which means its touching the left edge of the screen. A little bit of polish will go a long way. Get those 3 things right and you’ll beat the iPhone, or will at least match it. Why? Because the phone is a different device to say, a PC. The phone is always there with you, and its used primary for quick, almost mechanical, tasks. Calling people, checking SMS, checking the time, checking the map, snapping a quick picture. There are many different things you can do with a phone, but all of them are quick actions. This means the phone should aim to be closer to how a mechanical device works. Think about a toaster. You put in the bread, you push the lever, and that’s it. Your action is done, and now you just wait for the bread to toast. The interface is dead simple and its instantly responsive. That’s because it’s mechanical. There’s not a lot to get between you and what you want to achieve. In electronic devices though, there is a lot of “interface” in your way, which tends to also be very laggy and confusing. What you want to do though is get closer to the mechanical toaster and do the users’ actions easily and quickly. That’s why the iPhone is so effective. It’s fast and responsive. It’s also very polished, which raises it even higher. Apple doesn’t care about features because it knows that that stuff just doesn’t matter. What people want is a device that doesn’t get in your way. Other phone manufacturers are too focused on the hardware. Most of them produce really great hardware. But the problem is that hardware is only half the problem — the OS is just as, if not more, important than the hardware it runs on. The OS is the interface — it’s what lets people do the stuff they want to do with their phones. The OS is also the thing that my 3 points above are governed by. Forget features, forget specs, forget comparison charts. A comparison chart will never tell you about user experience and usability, and in the end, that’s what matters most in a pocket device.

I’ve noticed a little problem from time to time in various applications. Just recently I’ve had issues with my Internet connection and Firefox decided to automatically switch to offline browsing mode. I’ve never actually used the offline browsing mode before on Firefox so when I tried to visit an address on my local development machine I was greeted with the following error message:

An offline mode notice — looks clear enough. Now, I was just trying to access a local address so I knew the page should have worked — but that’s not the problem. The issue here is that while the message is clear and tells me that to proceed I need to put the browser into online mode, it doesn’t tell me how. Ok, so Firefox doesn’t have that many controls and options, so on a quick look around I found it under the ‘File’ menu, but the thing is, I shouldn’t have to look around. A simple addition to the message like: “Place the browser in online mode (under the File menu) and try again.” would have told me exactly how to do it. And if they wanted to be really good they could have placed a button to go to online mode right there on this notice next to “Try Again”. Here’s another example, this is from a preference pane in the Vuze torrent client:

The app lets you choose a “mode” when you first launch it: beginner, intermediate or advanced. Choosing anything less than advanced blocks out some of the options in the application preferences, so you are greeted with messages like the one above, which informs me about the situation but doesn’t tell me anything about how to go about changing it. The user is then left informed but lost at the same time. The best solution would be to place the control in question right under the notice so you can do something about it right away. If you can’t be bothered to do that at least a few words to direct the user towards the place where the setting in question can be changed, so if they do want to change it they can go directly to the right place. UPDATE (2009.05.03): The latest release of Firefox (3.5 beta 4) features some new text which does exactly what I’ve talked about above. Hurray!

Your website is designed, the CMS works, content has been added and the client is happy. It’s time to take the website live. Or is it? When launching a website, you can often forget a number of things in your eagerness to make it live, so it’s useful to have a checklist to look through as you make your final touches and before you announce your website to the world. This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release. Favicon A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head. <link rel="icon" type="image/x-icon" href="/favicon.ico" /> And if you have an iPhone favicon: <link rel="apple-touch-icon" href="/favicon.png" />

Titles And Meta Data Your page title is the most important element for SEO and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content. <title>10 Things To Consider When Choosing The Perfect CMS | How-To | Smashing Magazine</title> Meta description and keyword tags aren’t as important for SEO (at least for the major search engines anyway), but it’s still a good idea to include them. Change the description on each page to make it relate to that page’s content, because this is often what Google displays in its search result description. <meta name="description" content="By Paul Boag Choosing a content management system can be tricky. Without a clearly defined set of requirements, you will be seduced by fancy functionality that you will never use. What then should you look" />

Cross-Browser Checks Just when you think your design looks great, pixel perfect, you check it in IE and see that everything is broken. It’s important that your website works across browsers. It doesn’t have to be pixel perfect, but everything should work, and the user shouldn’t see any problems. The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox 3, Safari 3, Chrome, Opera and the iPhone.

Cross-Browser Checks: Services and Test Suites 7 fresh and simple ways to test cross-browser compatibility

Proofread Read everything. Even if you’ve already read it, read it again. Get someone else to read it. There’s always something you’ll pick up on and have to change. See if you can reduce the amount of text by keeping it specific. Break up large text blocks into shorter paragraphs. Add clear headings throughout, and use lists so that users can scan easily. Don’t forget about dynamic text too, such as alert boxes.

Writing for the web

Links Don’t just assume all your links work. Click on them. You may often forget to add “http://” to links to external websites. Make sure your logo links to the home page, a common convention. Also, think about how your links work. Is it obvious to new users that they are links? They should stand out from the other text on the page. Don’t underline text that isn’t a link because it will confuse users. And what happens to visited links?

W3C Link Checker

Functionality Check Test everything thoroughly. If you have a contact form, test it and copy yourself so that you can see what comes through. Get others to test your website, and not just family and friends but the website’s target market. Sit back and watch how a user uses the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.

Silverback - guerrilla usability testing

Graceful Degradation Your website should work with JavaScript turned off. Users often have JavaScript turned off for security, so you should be prepared for this. You can easily turn off JavaScript in Firefox. Test your forms to make sure they still perform server-side validation checks, and test any cool AJAX stuff you have going on.

Validation You should aim for a 100% valid website. That said, it isn’t the end of the world if your website doesn’t validate, but it’s important to know the reasons why it doesn’t so that you can fix any nasty errors. Common gotchas include no “alt” tags, no closing tags and using “&” instead of “&amp;” for ampersands.

10 reasons your code won’t validate (and how to fix it) W3C validator

RSS Link If your website has a blog or newsreel, you should have an RSS feed that users can subscribe to. Users should be able to easily find your RSS feed: the common convention is to put a small RSS icon in the browser’s address bar. Put this code between your <head> tags. <link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />

Analytics Installing some sort of analytics tool is important for measuring statistics to see how your website performs and how successful your conversion rates are. Track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1. Google Analytics is a free favorite among website owners. Others to consider are Clicky, Kissmetrics (still in closed beta yet), Mint and StatCounter.

Sitemap Adding a sitemap.xml file to your root directory allows the major search engines to easily index your website. The file points crawlers to all the pages on your website. XML-Sitemaps automatically creates a sitemap.xml file for you. After creating the file, upload it to your root directory so that its location is http://www.mydomain.com/sitemap.xml. If you use WordPress, install the Google XML Sitemaps plug-in, which automatically updates the sitemap when you write new posts. Also, add your website and sitemap to Google Webmaster Tools. This tells Google that you have a sitemap, and the service provides useful statistics on how and when your website was last indexed.

Defensive Design The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in. Another defensive design technique is checking your forms for validation. Try submitting unusual information in your form fields (e.g. lots of characters, letters in number fields, etc.) and make sure that if there is an error, the user is provided with enough feedback to be able to fix it.

404 error pages reloaded

Optimize You’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources. Besides, depending on the publishing engine that you are using, you may need to consider taking more specific measures – for instance, if you are using WordPress, you may need to consider useful caching techniques to speed up the performance.

Best practices for speeding up your website Web page analyzer

Back Up If your website runs off a database, you need a back-up strategy. Or else, the day will come when you regret not having one. If you use WordPress, install Wordpress Database Backup, which you can set up to automatically email you backups.

Print Style Sheet If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed. To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your <head> tags. <link rel="stylesheet" type="text/css" href="print.css" media="print" />

Printing The Web: Solutions and Techniques A List Apart: Going to print

Download the Ultimate Website Launch Checklist! Just recently Dan Zambonini has published a very detailed checklist that covers both the pre-launch and the post-launch phase of the web site life cycle. Among other things his Ultimate Website Launch Checklist contains checks related to content and style, standards and validation, search engine visibility, functional testing, security/risk, performance and marketing.

The pdf-version is available as well. The checklist is a very useful reference that may help you in your daily projects and will help you to prevent errors and mistake once the site is released. You may also want to consider the Quick Usability Check List by David Leggett that highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts. Not all of these items will apply to every website, these are just suggested things to look for in your own site design.

What other checks would you list? Make yourself a to-do list and keep it handy to check over before making any website live. Are there any other points you would add? Share them in the comments! About the author Lee Munroe is a freelance Web designer from Belfast. You can see his other writings on Web design on his blog, or follow him on Twitter. (al)

© Lee Munroe for Smashing Magazine, 2009. | Permalink | 181 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: checks, design, launching, release, usability

As we see more and more businesses move their services online, and even more that begin their life on the Web, a greater need arises for websites that are designed and built to sell. A great-looking website may achieve the goal of shaping and delivering a strong brand, but its good looks alone aren’t enough to sell the products or services on offer. For that, you need to introduce the element of marketing. You may want to take a look at the following related articles:

10 Principles Of Effective Web Design 5 More Principles Of Effective Design 9 Common Usability Mistakes In Web Design 10 Useful Web Application Interface Techniques

1. Subliminal Suggestion Research shows that objects and images you see around you can prime you for certain behaviors. For example, a study on children showed that after being shown a Santa Claus cap, they were more likely to share candy with others. The cap embodied the concept of sharing and giving in their minds, and exposure to it primed them for regarding sharing more positively. The same study also exposed kids to a “Toys ‘R’ Us” logo, which had the opposite effect of the Santa Claus cap, making them less likely to share their candy. LegacyLocker features a photo of a happy family on its landing page, presumably to evoke in visitors a warm feeling for its product and a desire to care for their loved ones. When choosing images for your website, think carefully about the message you’re trying to send. Pick images that are meaningful and that embody that message or feeling. Don’t put graphics on your website for their own sake — if they’re not doing a job, they don’t have to be there. Clichéd and overused imagery and stock photos are also dangerous because it may not send the right message in the given context, so select images that get the effect you’re after.
2. Prevent Choice Paralysis There is a phenomenon in marketing known as “choice paralysis.” Choice paralysis happens when the user is given too many options. Choice is great, but when your customers are presented with too many options, they may be confused about where to go. Nobody wants buyer’s remorse (where a person chooses an item and decides later it’s not right for them), so many people spend more time than they should on the selection process: they become paralyzed. In fact, according to Barry Schwatz, when customers have too many options to consider, they end up avoiding a specific service or the task in general (Paradox of Choice) – and this is exactly what we as designers need to carefully consider in our designs. The Highrise pricing list shows a set of monthly payment plans. The most popular one stands out visually to help you make a choice. To remedy choice paralysis, make it easier for people to find the right product or service for them. Tell them what each option is great for, and then suggest the one they should choose. You can even use visuals to highlight the most popular product and steer potential customers towards it. If the product is not right for them, they’ll pick another, but if they’re confused, a “default” choice helps prevent choice paralysis.
3. Show The Product When you visit a physical store, perhaps a grocery, you can look at, examine and sometimes even taste the products on sale. You make your purchasing decision based on the information you gather there. Are the tomatoes ripe enough? Are those strawberries red enough? What about the look and smell of that freshly baked bread? When you sell services or Web apps online, you should do exactly the same thing: show the product. It’s surprising how many websites that sell software don’t actually show screenshots of their applications. Sure, these are intangible goods, digital goods that you can’t touch or smell, but they’re still goods you can see. Dashboard puts large screenshots of its lead-tracking app right on the front page. People make judgments based on what products look like. Why? Because appearance is an indicator, rightly or wrongly, of a product’s usability. This is known as the aesthetic-usability effect. Xtorrent, a torrent download client for OS X, has a product screenshot right at the top of its minimalist landing page. If people see a complicated and cluttered interface or, in some cases, even just an unattractive interface, they may assume it is not very usable or is hard to learn. On the other hand, if people see an attractive and simple-looking interface, they may start figuring out how it works right then and will want to give it a try. Get people to imagine using your software, and you’ll get closer to closing the sale.
4. Let People Try It Once you start using a product, you become involved in it. Once you start entering data into it, you begin to make it your own. Every second a user spends trying out features is a second of their time invested in learning and using your product. When that user is then presented with the question of whether to purchase or subscribe to the product or service, they will more likely say “yes” because they are already involved and have invested time in it. Of course, if the product is bad, then it may turn people off, but then your priority should really be to improve the product until it reaches a level people are happy with. MailChimp, an email marketing service, allows you to start using the service for free with your first 100 subscribers. In recent years, we’ve seen the emergence of the “freemium” business model. A freemium service allows people to use a portion of it free of charge, but requires a purchase to use all of its features. It gives people a taste of the full product but doesn’t limit them to a trial period. This lets them use the product for free without monetary commitment and then upgrade if they like it. It’s a great model for many online Software-as-a-Service businesses because once somebody begins using your product, they get sucked in. They start to rely on it, and when they rely on it to do business or manage their life, they will very likely need the premium features down the line and will be happy to upgrade because they already know your service well. Stories are very important in sales because they get potential customers to imagine what it would be like to use your product. Letting people actually try your product for free goes even further. They don’t have to imagine because they can begin using it right away at no cost. Letting people try out your product, whether through a demo, a trial period or a freemium model, is an excellent way to win customers. Now, this isn’t really a “design” element but is important to mention here because of its potential to drive conversions.
5. AIDA AIDA is a well-known strategy in sales and stands for: Attention, Interest, Desire and Action. It is relatively simple and describes the sequence of events you should aim for to get a sale. So, first of all, you must capture the attention of your potential customer. Once you have it, you should win their interest by explaining how your product or service can help them. Then, once they’re interested, generate a desire in them for your product. For example, a story about how this product has helped someone like your visitor can help them imagine what this product would do for them, and especially what benefits it would bring. Indeed, the benefit part is key here because benefits, not features, sell products. Finally, you need to get people to act. This means purchasing the product or signing up for the service. If people want your product, all they may need is a button to check out. If they are interested but not yet sure, you could use a few methods to motivate them further; for example, creating a sense of urgency with a limited-time offer or limited supply. Yokaboo features large, eye-catching graphics. You’re likely to first read the short description on the left. The stats on the t-shirt then help build trust. Finally, you are presented with a call to action on the right. Now, the AIDA approach applies more to copy — the actual marketing text on the website — than design, so what we need to do on the design side is reinforce that copy, make it stand out and ensure visitors read it. This means making sure the first thing a new visitor sees really grabs their attention. The flow of the page should then direct their focus to the items that achieve the other two goals: interest and desire. Finally, at the end of this flow, we need to convert. So, provide calls to action: “Order now,” “Sign up here.” It’s important to understand that the design alone won’t sell: you need strong copy in place to do most of that work. The design is there to reinforce and support the copy, rather than the other way around. Reinvigorate captures your attention with three large words at the top: “measure. analyze. evolve.” You’re then led to a more descriptive bit of text below and a call to action link. This means you shouldn’t design a nice website first and then fill up the space with words. Instead, think about the message you want to send out, write the copy and then construct a design that delivers that. If a delivery truck breaks down, then the package does not arrive, but if there was no package in the first place, then the delivery wouldn’t matter at all.
6. Guide attention To benefit from something like AIDA, you have to lead your visitors through your content. You can do this by aligning items in a manner that will flow, and using images that guide the eyes. For example, if you want to focus attention somewhere, use a big arrow. Our eyes will notice the arrow and will naturally want to see where it points to. Business Catalyst uses an arrow graphic to lead the visitor’s gaze onto the “Watch the video” button. The content on the Silverback site flows down towards the download button. Additionally, the arrow on that button points towards the purchase link. Structure your content in a way that will flow towards something. Having a bunch of scattered feature descriptions may confuse and make your visitors lost, unless of course if all of the points end in calls to action. If you want to ensure your visitors don’t miss anything, align everything in a linear structure so that the user scans along it. Make sure to end it with the ultimate call to action: that signup or download link.
7. Always Provide Next Actions ABC: Always Be Closing. If you’re designing a website to sell something, whether a software application or Web service, you should always be thinking about how you’re closing the deal on each page. This doesn’t mean filling every page with big “Buy now” buttons; it means when the customer is ready to buy, they shouldn’t have to look around for the check-out link. Notice how each of the three bits of text on the Skype website has a call to action after it, whether it’s a “Learn more” or a purchase link. Always provide next-action links to keep the flow going and to ensure you don’t lose the attention of potential customers. Next-action links can direct the visitor to a page with more information about the product or to the actual page where they can make the purchase or sign up. These links could read something like: “Ready to order? Click here,” “Learn more,” “Take the tour” or “Shop now.” Don’t leave a dead end on any page: always suggest to your visitors where they should go next.
8. The Gutenberg rule The Gutenberg diagram (or the Gutenberg rule) is a concept that maps out something called reading gravity. Reading gravity describes a habit of reading in the western world: left to right, top to bottom. The Gutenberg diagram splits up a page into four quadrants: the “Primary Optical Area” in top left, the “Strong Fallow Area” in top right, the “Weak Fallow Area” in the bottom left and a “Terminal Area” in bottom right. The Gutenberg diagram It suggests that the bottom left area of the page will get least attention as our eyes scan the page from top left to bottom right and that our glance would end up in the lower right portion of the page. How can we utilize this concept? Buttons and calls to action could be placed in bottom right instead of bottom left, as this is the place where the visitor’s glance is likely to alight. Notice how GoodBarry has the trial signup button placed at the bottom right of the above the fold area of the landing page. Note that the Gutenberg diagram is more likely to work on pages which have more a balanced distribution of content. If parts of your page have strong highlights through high contrast and bold typography, then those areas would likely attract more attention and so will direct the way a user scans the page. Related Posts You may want to take a look at the following related articles:

10 Principles Of Effective Web Design 5 More Principles Of Effective Design 9 Common Usability Mistakes In Web Design 10 Useful Web Application Interface Techniques

About the Author Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.

© Dmitry Fadeyev for Smashing Magazine, 2009. | Permalink | 118 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: convert, design, usability