85 Usability tips, tutorials, techniques & resources
The Benefits of Mixing Branding and Usability in a Design
"Including branding in the whole website design could also improve usability, making a particular website a more comfortable place to surf through. Many companies are taking advantage of this, Apple, for example, is not only successful because of a beautiful design but they also combine easiness and first class interaction design to the whole branding and marketing strategy on the web."
Improve form usability with auto messages
"This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field."
Improving Navigation In 5 Simple Steps
"Navigation is one of the most important elements of website usability. A good navigational structure can make visits much more pleasant for your users, and poor navigational structure can cause them to leave in frustration. Of course, accessibility should be the first concern for navigation so that everyone can use the site, and these 5 steps can help to make your navigation much more effective."
Search Patterns
"A sandbox for collecting search examples, patterns, and anti-patterns. Over time, I hope to add patterns that illustrate user behavior and the information architecture of search."
Top-10 Application-Design Mistakes
"Application usability is enhanced when users know how to operate the UI and it guides them through the workflow. Violating common guidelines prevents both."
Reading Online Text: A Comparison of Four White Space Layouts
"In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions. Results show that the use of margins affected both reading speed and comprehension in that participants read the Margin text slower, but comprehended more than the No Margin text. Participants were also generally more satisfied with the text with margins. Leading was not shown to impact reading performance but did influence overall user preference."
Finding Information on the Web: Does the Amount of Whitespace Really Matter?
"It has been a long-held notion that the use of open space or "whitespace" adds not only to the attractiveness of the design of a written publication, but adds to the functionality as well."
30 Usability Issues To Be Aware Of
"In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it’s time to dive in."
10 Usability Nightmares You Should Be Aware Of
"In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you’ll also find 8 usability check-points you should probably be aware of."
User Interface Design - Taking the Good with the Bad
"The key to any successful marriage is compromise. While things may not always go the way you want them to, in the end, coming to an agreement helps you to achieve a greater good. The same holds true for user interface (UI) design. After all, what else is the user interface if not a marriage of form and function?"
Accessibility and usability
"At the moment we Web developers are learning the basics of accessibility, as once we mastered the basics of usability. However, in my last column I hinted at a potentially dangerous “accessibility vs. usability” question. The time has come to study this question in more detail."
More usability frosting for your accessibility cake
"Some of you may remember my last article for A List Apart, in which I discussed separation of JavaScript into self-limiting functions that leave pages usable and accessible whether they run or not. This is another take on that concept, applied to a form."
Advanced Search: Is The Name A Problem?
"According to Google only 1% of the searches uses “advanced search”. It’s a remarkable low figure if you think about how tough some people think it is to find what they are looking for. But then it struck me, is it advanced to use “Advanced search”? Not particularly."
23 Actionable Lessons from Eye-Tracking Studies
"Eye-tracking studies are hot in the web design world, but it can be hard to figure out how to translate the results of these studies into real design implementations. These are a few tips from eye-tracking studies that you can use to improve the design of your webpage."
3 Important Usability Challenges for Designing Web Apps
"Matching the user's natural flow is just one challenge a web-based application developer needs to address during the design and development process. To help our clients, we've compiled a list of three challenges they'll want to keep their eye on."
The End of Usability Culture
"Usability culture has steered the Web development ship long enough. It’s time for a new approach. To understand the urgent nature of making that shift, we need to understand how we got where we are today."
The Information Design approach to Web development
"Information Design is dedicated to making information as effective as possible. In order to be as effective as possible, information must carefully balance a variety of factors, including, but not limited to clarity, relevance, timeliness, amplitude, volume, and differentiation."
Usability for Rich Internet Applications
"Rich Internet applications can be faster, more engaging and much more usable. However, this improvement is not without its downside—RIAs are much more difficult to design than the previous generation of page-based applications."
User Interface Design for Web Applications
"The design choices one makes for a Web-based application are often quite different from those of a content-based Web site. Why? Because they are used for different purposes."
Rethinking Application Design
"I’ve realized that the basic corporate design model for Web and application design is broken. This article will share some of the conclusions I’ve drawn and propose some better approaches for designing successful applications."
Losability vs. Usability
"The rules of Web design can be summed up in two words: Whatever works. In other words, if your Web design is based on a strong business strategy, it sets its own standards."
Finding The Sweet Spot
"The Web is slowly but surely growing up. For Web professionals it’s becoming more and more important to understand not only how various disciplines interact with and affect each other, but also the impact of business objectives on Web projects."
Brand Value and the User Experience
"Successful companies match business objectives with customer needs. They combine ongoing testing, feedback and improvement cycles into their daily practices and invest in listening, learning and modifying the user experience to create positive returns in revenue and loyalty."
Apples and Oranges
"Usability and design are two fields that collide more often than not. But why is that? Why can’t we all just get along and center our efforts around delivering a better product, a top-notch Web site or a user-friendly interface. Everybody would benefit from an open-minded, reciprocal understanding. Right?"
The Designer Is Dead, Long Live The Designer!
"Usability maharishis, with idiosyncratic attitudes and blaring random opinions about design, irritate me. While the importance of their field has been acknowledged for some years now, it is simply a sham to assume or suggest their role is principal (or sole) in shaping user interaction. In this column I will go as far as stating the contrary: design comes first, usability second."
Back to the User: Creating User-Focused Websites
"This article summarizes five key lessons learned from listening to and observing all kinds of users (from teens to seniors to doctors) try out all kinds of Web sites at various stages of development. Our goal: to provide some overarching guidelines about bringing a customer voice to site design."
Mind your phraseology!
"Controlled vocabulary is aimed at getting people to what they are seeking. No matter what crazy thing they type in the search box. Let's see it in action."
In Defense of Search
"There's no doubt that the implementation of search on many sites actually does stink. But to draw the general conclusion that search is an ineffective tool from these specific observations of existing e-commerce web sites is like eating a frozen egg roll and declaring that all Chinese food is bad."
Three Ways to Improve External Search Engine Usability
"One of the most important details that server logs show is which search engines visitors use to get to the site, and which search terms visitors enter. Checking this information is an extremely useful, fascinating, and almost voyeuristic endeavor that has become a hobby in and of itself."
Simplicity vs. Innovation
"This article presents a look at the more limited field of usability and offers a way around the simple = dull equation that threatens good usability design."
Navigation Complex
"A combination of different types of navigation is the best way to go. A DHTML hierarchical navigation combined with a text navigation presents the hierarchical navigation on all pages and it gives experienced users the possibility to immediately jump to the page of their choice."
Better Living Through Taxonomies
"Large websites and intranets can benefit from improved methods of search and navigation. These include site maps, A-Z indexes, sophisticated search engines, and generally improved navigational design—and playing a potential role in all of these methods is well-planned taxonomy."
Information Architecture as an Extension of Web Design
"There are several information architecture techniques that Web designers can easily learn and apply to all of their projects. This involves looking at information architecture as an extension of Web design."
Don't Forget to Architect the Home Page
"One of the hardest things to do during Web site creation is to finalize a vision for the home page. So much to do, and so little real estate! How will users find anything? Where will it all fit?"
More Than Just a Footer
"While arguments about getting more links, content, and important elements “above the fold” are common, more sites are taking advantage of the entire Web page, adding useful elements to the bottom of the page."
How did you get here?
"Too frequently is it assumed that visitors are knowledgeable about the company and Web site, and that they enter through the home page. False assumptions about visitor entry can plague even a well-planned, well-designed site."
A User-Centered Approach to Selling Information Architecture
"The most common approach to selling IA involves introducing the basic concepts, along with explanations and examples of what deliverables are produced, and some discussion of the benefits. At that point, usually the client will comment, or ask about how these procedures can fit in to a specific project."
Persuasive Navigation
"Persuasive navigation is navigation that persuades a user to do something. By understanding user needs and matching them up with business goals, you can persuade users to go where you want them to go, making them happy at the same time."
The Psychology of Navigation
"The navigation decision—whether or not to click—hinges on the mental image users create of the page they expect to see. Fortunately, a few tools are available to help influence the images in users’ minds: language, design, and the understanding of the expectations users bring to sites."
Eat Me, Drink Me, Push Me: In which the subtle arts of the interface are examined.
"You've gone through organizing content and designing interaction. Now you come to the last piece of the architecture pie: interface. How do you enable people to use all that brilliant structure?"
Information Architecture is not Usability
"The difference between information architecture and usability is vital to understand, because, as discussed last month, information architecture is more than just understanding what users want and need. A usability-only approach to IA is only one piece of the puzzle. Information architecture problems often account for a large percentage of usability problems, but there are many other things unrelated to IA that have an impact on usability."
Visual Architecture: The Rule of Three
"The object of this article is to discuss the universal language between words and visual objects (picture, illustration, graph, area boxing, layout, titling) and can be extrapolated to advertising, print, TV, Flash development and CD-ROM productions."
Packaging Design for Web-based Products
"I’ve taken it upon myself to dive deeper into the principles and lessons of packaging design in order to learn what lessons can be applied to the world of web applications. Here’s some of what I’ve found so far."
Designing Interfaces: Patterns for Effective Interaction Design
"Features real-live examples from desktop applications, web sites, web applications, mobile devices, and everything in between."
Research-Based Web Design & Usability Guidelines
Universal Usability
"A universal design approach to web usability."
Getting Real
"Discover the smaerter, faster, easier way to build a successful web-based application. A book by 37signals."
Web Typography Style Guide
"This guide covers the basics of good typography on the web, explaining theory behind font choices, and the details of providing accessible and good looking text."
It's in the Details: Seven Secrets of a Successful International Website
"In a world where web sites are the calling cards of most companies, localizing web content for your international audience is the key."
Better Web Forms: Redesigning eBay's Registration
"The eBay registration form isn’t so unusable that it brings sign-ups to a screeching halt, but it is rough enough to justify some tweaking."
Practical Usability Testing
"The most critical aspect of user-centered design, usability testing breaks down the wall between the designer and user, and allows us to see how real users do real tasks in the real world."
Reading Design
"With so many specialists working so hard at their craft, why are so many pages so hard to read? Unabashed text enthusiast Dean Allen thinks designers would benefit from approaching their work as being written rather than assembled."
Never Use a Warning When you Mean Undo
"Does the way we design our web apps cause people to lose their work? Raskin’s simple, foolproof rule solves the problem."
Where Am I?
"We’ve got web standards. We’ve got Ajax. We’ve got content. So why are we still messing up global navigation? Derek Powazek gets back to basics and offers a few simple guidelines for getting it right."
Home Page Goals
"...home pages are anxiety-inducing for companies. The home page is your first impression. And like the old saying goes, you only get one chance. So home pages themselves have a unique set of design goals."
Power to the People
"Relentlessly simple solutions to complex design problems can be the difference between an average experience and a great one. D. Keith Robinson reminds web designers and developers that ease of use is more important than technological sophistication."
Usability experts are from Mars, graphic designers are from Venus
"Usability mavens like Jakob Nielsen think the web is an ill-used database. Graphic designers like Kioken think it is a fledgling multimedia platform. Could both groups be right? New ALA author Curt Cloninger explains why usability experts are from Mars, graphic designers are from Venus. This one’s a hottie."
Helping Your Visitors: a State of Mind
"Even the simplest website is harder to figure out than a catalog or magazine. We all know how to “use” a catalog: start at the front cover and keep turning the pages. But with every new site we visit, we have to “learn” how it works, how its “pages” turn, how to find what we’re looking for. Text that takes visitors’ needs into account can help guide them through the maze."
The Perfect 404
"No matter how carefully you design and structure your site, visitors will sometimes request missing, moved, or non-existent pages. A well tempered 404 error page will plunge these visitors back into the flow of your site. Ian Lloyd shares strategies for crafting the perfect 404."
User-Proofing Ajax
"When good web apps go bad, Peter Quinsey’s guidelines and techniques can help you and your users stay informed and productive."
Sensible Forms: A Form Usability Checklist
"...we can make our users’ lives easier by thinking about the way people interact with our websites, providing clear direction, and then putting the burden of sorting out the details in the hands of the computers—not the users."
Slash Forward (Some URLs are Better Than Others)
"Some URLs are better than others: easier for visitors to remember, easier for designers and developers when it comes time to change the technology that drives the site. Waferbaby neatly and briefly considers the effect of web addresses on usability, design, and ease of maintenance and technological transition."
Improving Link Display for Print
"It seemed my zeal for linkage had come into conflict with my desire to improve print usability."
35 Designers x 5 Questions
"35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world."
9 Essential Principles for Good Web Design
"I've put together my 9 principles for good web design, it's only my opinions and I've tried to link off to more reading on subjects so you don't only hear my voice."
Web Page Hierarchy
"This presentation walks through how people parse Web pages and the implications of this behavior for designers - specifically, using the principles of visual hierarchy to communicate key information about the purpose and use of Web applications."
Web Form Design Best Practices
"This presentation outlines form organization, form elements, and form interactions with an overview of best practices and examples for each."
A CSS styled table version 2
"This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS."
JavaScript: It's Just Not Validation!
"The term "JavaScript validation" is misleading! As Colin explains, JavaScript really provides input assistance, and that assistance is best achieved if it's tied closely to the back-end code that actually performs the validatio"
10 Accessibility Blunders of the Big Players
"Major sites - from Amazon to Google – can and do make usability blunders. Learn from their mistakes with this quick round-up of prime offenders!"
Secret Benefits of Accessibility Part 1: Increased Usability
"Trenton reveals how increased accessibility can also improve a site's usability."
A-Z Website Indexes Explained
"A-Z Indexes are a far more accurate than search engines for searching the content of a Website or intranet."
Why You Don't Need a Usability Lab
"Although the James Bond-esque appeal of a high-tech lab cannot be denied, it's probably not necessary for your purposes."
Design Effective Navigation in 10 Steps
"We'll discuss the task of designing navigation -- and hopefully give you a head start in creating a navigation system that works the best for your users."
An Introduction to Information Architecture
"Information architecture (or IA) is the science - some would insist art - of defining the structure, organization, navigation, labeling and indexing of a website."
Beware of Opening Links in a New Window
"Jakob Nielsen has likened the practice of opening links in a new window to a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet."
Not The Usual Suspects: How To Recruit Usability Test Participants
"Here are a few simple ways to round up a more interesting -- and truly useful -- cast of characters for your next investigation."
Why Consistency is Critical
"There is little doubt that consistency is important for users. Consistency makes sites easier to use, because visitors don't have to learn new tricks as they move around."
Seven Screen Reader Usability Tips
"Who says making a site usable to screen reader users is a pain? Trenton provides 7 quick, easy fixes that boost your site's usability for all visitors, including those who use screen reader technology."
Improve Usability for Older Users
"A growing portion of the population is over 60 -- and online! Tim reveals his first-hand research into the ways people aged 60+ use the Internet, and what it means for designers and developers."
Wire Frame Your Site
"Wire frames can untangle your site's layout from its graphical communication, to help boost usability, logical content flow, and support the creation of a compelling graphic design - Matt explains how."
Essential Navigation Checklists for Web Design
"These checklists pull together best practice in the disciplines of information design, usability and accessibility, into an easy to apply format."
Revealing Relationships Can Be Good Form
"Ian Lloyd labels up and ships out a tip for improving the usability of form labels."
Typesetting Tables
"Mark Boulton revisits the HTML data table for a quick look at how legibility and communication of complex data can be helped through careful typesetting."
Fast and Simple Usability Testing
"Natalie Downe describes a simple approach to usability testing for those of us working to tight timescales or budgets. That’d be nearly all of us then. Learn how to make the most of your available user testing time."