Usability
Here’s a list of web design usability guidelines based on the W3C and other references:
Use large fonts, large pictures, and bright colors to highlight important content and links
Use a separate background color for the content area of a page if the body background makes the text unreadable
Use padding for links to increase the clickable area for text using small fonts and for users on mobile devices
Use an event handler to disable the context menu for Flash objects unless needed so that accidental clicks are ignored and inadvertent zooming is avoided
Use a consistent background between the sidebar and main content, and create a contrast between the content background versus the body background unless it is white or black
Use a white background color for black text instead of adding a plain white background image to save bandwidth and ensure the text is readable with images turned off
Use relevant questions pertaining to saving and sharing useful info from your web apps to gather user information instead of a mandatory signup form to make the registration process unobtrusive
Use a single input field that accepts punctuation(comma, semicolon, period, etc.) or whitespace delimited input instead of multiple fields for related information, such as area codes w/ phone numbers, zip codes w/ plus four suffix, or simply first name and last name. Parse the input and store it as separate key/value pairs in the database or XML file
Use small fonts for specific, detailed information
Use narrow width text blocks with minimal scrolling for the best readability
In a good user interface design, no user should control more than seven screen elements
Use z-indexing to add 3-D effects and dynamically display content instead of using Javascript and CSS visibility properties
Use hidden overflow and relative position changes to scroll through text without pagination
Use typography and image zoom functionality to avoid scrollbars on iframes or overflow content within a page
Add a brief summary, tooltip or favicon next to links within the page content and navigation
Use CSS page breaks instead of separating long articles into URLs for each page
Put a breadcrumb at the top and bottom of each article
List pros and cons at the end of each section of a product review(innovation, eye candy, audio appeal, foolproof factor, excitement, usefulness, longevity, durability) and end the review with a graphic instead of a number
Don’t put links to user or support related pages (cart, wishlist, contact, help, or profile) in the footer
Don’t use Javascript or CSS to display sub navigation
Use a sitemap and a search engine instead of a nested navigation menu
Use title attributes, footnotes, and legends to give details and references about generic or obscure names used in links or content
List hidden pages and details about their prerequisites on a hierarchical graph of the sitemap
Use domain-specific names and verbs instead of redundant nouns and pronouns in links to provide more intuitive navigation and better SEO
Phrase links to wizards and tutorials in a question format
Use names for links which include keywords that describe the subject or purpose of the linked page
A monochromatic color scheme equates to one colour and all its tints, tones and shades.
A complementary scheme matches colors that are direct opposites of each other. Warm colours consist of violet, purple, red, and orange. Cool colors include yellow, green, turquoise and blue.
Use Serif fonts(Georgia, Times New Roman, Palatino Linotype/Palatino) for printable view and large business and news related text
Sans Serif fonts(Trebuchet MS, Andale Mono, Impact, Lucida Sans Unicode, Lucida Sans, Century Gothic, Verdana, Helvetica, Gill Sans/Gill Sans MT, Copperplate/Copperplate Gothic Light) for medium sized personal and entertainment related text
Use Monospace fonts(Lucida Console, Lucida Sans Typewriter) for small education and technology related text
Use a progress bar or animation with phase changes to indicate the remaining load time of an AJAX module
Layout a site by positioning the general sections in the following locations:
Top – Nav(or horizontal text ads) Search, Logo, and User or Support related pages(cart, wishlist, contact, help, or profile)
Left – Forum Icon, Related Stories, Flash Ads(or vertical nav), Bookmarklets
Bottom – Site Description, Blogroll, Citations, Referrers, References, Favorites
Right – Top Links, Table of Contents, Sitemap, Text Ads, CSS preferences, Archives
Center – Breadcrumbs, Content, RSS feeds, newsletter, embedded picture ads
Use CSS hover list instead of a select box if there are more than ten options and scrolling is needed
Avoid using anchor tags outside of long pages like a table of contents, FAQ, or sitemap
Crop images before scaling them down to create zoomed thumbnails with visible details
Avoid articles(the, this, that), adjectives, catchphrases, and technical jargon in page titles
Use keywords in a phrase that makes sense when creating link titles for search engines and external links
Use AJAX enabled tabs to avoid scrolling, page refresh for paginated content, and popup windows for sitemaps, long articles, dictionaries, and image galleries
Avoid AJAX for site navigation, viewing comments, login forms, and sidebar menu generation
Use ad links to direct users to the product specific page instead of the homepage
Use the home page to advertise all of the subpages within the navigation
Use bold, italic, oblique, and strikethrough text decoration to highlight content
Avoid scrolling text, horizontal scrollbars, looping animations, unscalable images, abstract icons, JavaScript hrefs, animated GIFs, and Flash banners
Use the name “Biography” or “Company History” instead of “About Us” as a page title
Put privacy policy and opt-out links in email offers, newsletters, contact forms and the page footer
Use lists with bold headers and buttons to highlight important links in the footer
Send email subscription confirmations before adding a user to a list
Design sites for 1280×1024 resolution with scalable fonts and content height, CSS centered templates, and fixed width for content, padding, and margins
Don’t link to the current page in a navigation menu or crumbtrail which includes the current page
Don’t set the document focus on a form field after loading a page
Don’t take the focus away from a form field after its size limit is reached (e.g. phone numbers, product codes, dates)
For e-commerce shopping, put “previous step” and “next step” buttons at the bottom of each form to discourage back and forward button usage
Put a order confirmation page with bold, colorful warnings before shopping cart submission, as well as an obvious “cancel order” button on the print receipt page
Use large line-heights and full column width pictures to encourage reading of articles(ex. ign.com)
Put favicons next to text ads that link to stores or popular sites(ex. gametz.com)
Enable shoppers to filter and sort search results using all available attributes before buying(ex. newegg.com)
Don’t split single pieces of data into multiple fields, like phone numbers, activation codes, or dates
Specify links to pdfs are for printing and give the file size, summary, and page count next to the hyperlink
Make sure PDFs aren’t indexed and the HTML alternative is indexed instead
Don’t make bullet points or alt text more than three rows long
Put dates and author/photographer names at the top of every article
Keep pages under 100k in HTML size
Use passive voice in page headings and summary text to include relevant keywords at the beginning of the article
Design and edit your graphics and text to complement each other in conveying a consistent mood, tone, and purpose
Set a default for all radio buttons and include an neither/none option for checkboxes
Include the update schedule or last modified date in the page title or homepage header
Use scrolling instead of pagination for reviews, product comparisons, and dictionaries
Use foldout effects for expert information like tech specs, ingredients, or materials
Use consistent delays, progress bars, and framerates for animations
Alert user if username does not exist after login failure
Allow user to use IM, SMS, or email to reset a forgotten password to a temporary one
Allow user to use a secret question in lieu of a password
Content(text and graphics) is a metaphor for data(SQL records), presentation(HTML) is a metaphor for data structures(DOM), and action(events and timers) is a metaphor for conditional statements that manipulate data within data structures
When redesigning interfaces, give users an option to use the old functionality
When combining redundant forms into a single page, maintain the existing expectations, such as confirming prices before asking for credit card information
Use expectations based on history, nature, failed competitors, complaints, and technical limitations to analyze and improve upon existing products
For branching paths, such as login vs register forms, default to the repeated option(login), and offer a link from there to the one-time option(register)
Show server side error messages inline instead of requiring the user to go back from a separate error page
Use smart defaults to remove obvious choices, but provide specific options and directions to recover from errors
Use modal windows to allow customers to immediately undo queue additions
Use a single input field for authorization codes to allow copy and pasting instead of multiple fields with auto tab forwarding and hardcoded hyphens
When redirecting users to the login form, return the browser to its previous destination upon successful entry
Only advise customers to print a receipt for a purchase after the transaction has been completed
Tell users in the beginning of an application what information they will need to complete a forms in the process, such as tax records, proof of purchase, or automobile VIN number
Insight into the users needs is found through qualitative research of their behavior and expectations. Combine that with the implementation of consistent visual design guidelines and the feedback of web analytics tools and hotspot tracking of user mouse and keyboard activity to optimize the user experience.
To take the example of which of 41 gradations of blue to pick for a design element: yes, one of these will have the highest clickthrough rate, and thus be the local optimum for the design of that one page. But it’s quite possible that another shade would be better for the overall look of the site and make the complete set of pages feel more like a coherent user experience, which would enhance user confidence and the site’s credibility, and lead to long-term loyalty, as more people return to buy next year.
And more important, while the best shade of blue might generate 0.1% more business than the second-best, it’s almost certainly the case that there is some other aspect of the design that would lead to 50% more business if you could identify it. To do so, use qualitative research to observe deep user behaviors.
The things you know to measure are rarely the ones with the big impact. The things you DON’T KNOW are the place to focus usability efforts.
Map the steps in an application to the users’ expectations based on experience using other sites and common sense
Put the most important forms or links in the center of the page
Put detailed information in accordion widgets or modal dialogs
Put critical links within main content or as sub navigation
Put labels above the input fields to minimize eye movement to associate names with boxes
Put the comment textarea first in a series of fields before the input fields to emulate the experience of writing a letter, then signing it
Put emphasis on what parts of the page attract the most attention and clicks over solicited comments and suggestions
Put the most important sentences in the first two paragraphs and the most important keywords in the first three words of every paragraph
Put prices upfront on sales driven pages
Use large hit boxes around links for touch screen and inaccurate mouse users
Use consistent styling for links and don’t make anything look like an ad
Use the default option value of a select dropdown box as the label instead of using text above the field
Use an input field which redirects queries to a search engine to add functionality to your site:
<!-- Google --> <form action="http://www.google.com/search" method="get"> <fieldset> <input type="hidden" name="sitesearch" value="mysite.com" > <input type="text" name="q" size="31" maxlength="255" value="" > <input type="submit" value="Google Search" > </fieldset> </form> <!-- Yahoo --> <form action="http://search.yahoo.com/search" method="get"> <fieldset> <input type="hidden" name="vs" value="mysite.com" > <input type="text" name="p" > <input type="submit" value="Yahoo Search" > </fieldset> </form>
Aim for the following goals when designing a user interface:
Intuitive: The system should be easy to learn so that the user can rapidly execute tasks
Efficient: The system should be efficient to use, so that once the user has learned the system, a high level of productivity is possible.
Recognizable: The system should be easy to remember, allowing the casual user to return to the system after some period of not having used it without difficulty
Helpful: The system should have a low error rate, so that users make few errors, and, if they do make errors, they get relevant advice and can undo the mistakes. Catastrophic errors must be anticipated and prevented at all costs
Appealing: The system should be aestethically pleasing and fun to use, so that users are satisfied with the experience.
Define use cases and user scenarios, sitemap diagrams, information architecture, schematics, wire frames, storyboards, and written specifications
Work with designers to analyze and refine wire frames and mockups prior to development to promote greater ease of use and positive consumer experience..
Conduct and deliver results from a variety of user experience studies appropriate to the business objective, e.g., competitive reviews, focus groups, field studies, usability tests, surveys, cognitive walkthroughs, paired comparisons, structured interviews, contextual inquiry, task analysis, field studies, heuristic review, remote testing, and card sorting.
Build, review, aggregate, and report Web site analytics (page views, visitors, path analysis, conversion rates, click-through rates, drop-off rates)
Research user needs throughout the entire product development cycle to provide focus for the features and marketing of the application
References:
Interface Design Pattern Websites
Windows User Experience Interaction Guidelines
Microsoft Inductive User Interface Guidelines
Architects and the User Experience
Windows Control Panel User Experience Guidelines
How To Quantify The User Experience
The Uncanny Valley of User Interface Design
Intuitive User Experience Design
Mobile PC User Experience Guidelines for Developers
Using CSS to Avoid Excessive Page Width
Modal Windows in Modern Web Design
Using JavaScript to Supplement Weaknesses in CSS Usability
Colour Schemes and Design Mockups
Information Architecture Planning
8 Innovative Design UI Elements That Make Sites Better
Things Every Designer Should Know
Effective User Assistance Design: Ten Best Practices
Misconceptions About Usability
Politics of Usability Decisions
25 Ecellent Usability Articles and Resources
Progressively Improve the User Experience based on the User Needs
Bill W Scott Presentations Archive
Archive of Presentations from UI Conferences
Google User Experience Guidelines
Windows User Experience Interaction Guidelines
Windows Vista UI Guideline Violations
Experience Design News Archive
Practical Interaction Design Lessons
Government Usability Guidelines
Principles of Interaction Design
Unit-Based Interfaces Considered Harmful
Iphone Human Interface Guidelines
User Interface Style Guidelines
OLPC Human Interface Guidelines
Gnome Human Interface Guidelines
Sun Web Application Guidelines
Putting A/B Testing in Its Place
Designing Cases for the Ipod and Iphone
Basing the Design of History on the User’s Memory
UI Button Placement Test Results
http://www.alistapart.com/articles/neveruseawarning
http://humanized.com/weblog/2006/06/30/collaboration_made_simple_with_bracket_notation/
http://www.shmula.com/408/humane-interface-ask-aza-raskin-anything
http://www.useit.com/alertbox/20050808.html
http://www.useit.com/papers/webwriting/
http://www.useit.com/alertbox/980712.html
http://www.useit.com/alertbox/nonprofit-donations.html
http://www.useit.com/alertbox/forms.html
http://www.useit.com/alertbox/9512.html
http://www.useit.com/alertbox/20050711.html
http://www.useit.com/alertbox/20030825.html
http://www.useit.com/alertbox/20050808.html
http://www.useit.com/alertbox/open_new_windows.html
http://www.sju.edu/~jhodgson/gui/guihome.html
http://www.humanfactors.com/services/crossculturaldesign.asp
http://www2.hawaii.edu/~sharritt/CISHCIExam/preece.html
http://www.hceye.org/UsabilityInsights/?p=103
http://wiki.laptop.org/go/OLPC_Human_Interface_Guidelines/The_Sugar_Interface
http://humanized.com/weblog/category/redesign/
http://humanized.com/weblog/category/ui-design-fundamentals/
http://www.devicelink.com/mddi/archive/98/05/032.html
Overcoming Banner Blindness
Taste for Makers
Interface Hall of Shame
Gnome Usability Principles
Usability Professionals Association
Top 10 UX Myths
The Paradox of Choice
Web Style Guide
Effective A/B Testing
The Myth of the Page Fold from User Testing
Click-Free Web Interface Experiment
http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/
http://www.interaction-design.org/encyclopedia/
http://www.d.umn.edu/itss/support/Training/Online/usability/glossary.html
http://www.usabilityfirst.com/glossary/index_terms.txl
http://www.insideria.com/2009/09/50-most-usable-rias.html
http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5
User interface techniques
http://en.wikipedia.org/wiki/Pareto_principle
http://en.wikipedia.org/wiki/De_Morgan’s_law
http://en.wikipedia.org/wiki/Fitts’s_law
http://en.wikipedia.org/wiki/Hick’s_law
http://en.wikipedia.org/wiki/Interaction_technique
http://en.wikipedia.org/wiki/Crossing-based_interfaces
http://en.wikipedia.org/wiki/Accot-Zhai_steering_law
http://www.pinnicle.com/Articles/Pareto_Principle/pareto_principle.html
http://en.wikipedia.org/wiki/Amdahl’s_law
http://en.wikipedia.org/wiki/Bradford’s_law
http://plato.stanford.edu/entries/church-turing/
http://www.almaden.ibm.com/u/zhai/topics/LawsOfAction.htm
http://en.wikipedia.org/wiki/Occam’s_Razor
http://en.wikipedia.org/wiki/Segal’s_law
http://en.wikipedia.org/wiki/Taguchi_methods
http://en.wikipedia.org/wiki/Monte_Carlo_method
http://en.wikipedia.org/wiki/Monte_Carlo_methods_in_finance
http://en.wikipedia.org/wiki/Zipf’s_law
No Comments Yet »
Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.
