The User Interface Resource Centre have published an article I wrote for them called What, Where, How: Designing and selecting components for user interfaces.
The article is about how to make sure your components will be usable and easy to learn. It covers some fundamental cognitive principles and their implications for component selection.
This article was originally published at Boxes and Arrows: Four modes of seeking information and how to design for them.
I discovered the concepts in this article while preparing material for an introductory information architecture workshop. In the workshop, I thought it important to highlight that one aspect of designing for users was to understand the ways in which they may approach an information task. I was already familiar with the concepts of known-item and exploratory information seeking: they are common in the library and information science literature and are also discussed in Information Architecture for the World Wide Web.
In my work on intranets and complex websites, I noticed a range of situations where people didn’t necessarily know what they needed to know. Additionally, when I opened my browser history to look for examples from recently-visited sites, I noticed that the majority of my own time was spent trying to find things that I had already discovered. These two modes didn’t fit into the concepts of known-item and exploratory information seeking. I call these “don’t know what you need to know” and re-finding.
I spent a while letting this rattle around my head, talking with IAs and designers, and realized that most only thought in terms of known-item searching. When discussing the other types of tasks, they’d ask with a horrified look, “So how do you design for that?”
Let’s look at the modes of seeking information in some depth and their implications for web design.
Known-item information seeking is the easiest to understand. In a known-item task, the user:
In addition, the user may be happy with the first answer they find (though not always) and the task may not change significantly during the process of finding the answer.Some examples include finding out whether Katharine Kerr has a new novel, learning about how the CSS color:transparent attribute works, and getting a copy of the travel form. These are all clearly defined, easy to describe, and the starting point is straightforward.There are a number of design approaches to help with this type of task:
For this mode, it is important that people are able to answer their question quickly.
In an exploratory task, people have some idea of what they need to know. However, they may or may not know how to articulate it and, if they can, may not yet know the right words to use. They may not know where to start to look. They will usually recognise when they have found the right answer, but may not know whether they have found enough information.
In this mode, the information need will almost certainly change as they discover information and learn, and the gap between their current knowledge and their target knowledge narrows.
As an example, a few years ago I was looking for information on the cognitive mechanisms that allow people to navigate the physical world (I was comparing the concept of online and physical navigation). I knew what I was after, but couldn’t describe it (‘navigation’ in a search engine would return results for web navigation). I had no idea where to start. I tried a number of places and didn’t succeed at all. (Six months later I stumbled across some wayfinding papers and realised that was the term I needed).
Other examples of exploratory tasks include looking for history on the technique of card sorting, finding examples of sites with complex forms laid out using CSS, and finding music I like.
The first challenge can be getting the user to a good starting point (this was the main problem in the navigation example). This is less of a problem on an intranet as staff may only have one place to explore. Portal sites, subject-based directories, or sites with a wide range of content (such as Wikipedia) can provide avenues to follow on the open Web.Design approaches for this mode include:
For this mode, it is critical that there are always avenues for exploration and that the visitor never reaches a dead end.
The key concept behind this mode is that people often don’t know exactly what they need to know. They may think they need one thing but need another; or, they may be looking at a website without a specific goal in mind.This mode of seeking information occurs in a number of situations:
The challenge is providing an answer while exposing people to the necessary information, thus showing what they may need to know. This can be achieved by:
The solutions allow people the satisfaction of getting an answer and then the opportunity to get additional information.
This mode is relatively straightforward—people looking for things they have already seen. They may remember exactly where it is, remember what site it was on, or have little idea about where it was. A lot of my personal information seeking is hunting down information I have already seen. I don’t know how prevalent this is, but discussions with others indicate that I am not alone.
Design solutions can be active (where the user takes explicit action to remember an item) or passive (where the user takes no action but items are remembered).
Active solutions exist on many web sites: wishlists (amazon.com), “save for later” (emusic), and favorites (Pandora). These solutions work well but require a conscious effort from the user, who needs to know they will want to return to an item in the future. Del.icio.us is another example of an active solution for the web as a whole.
A good passive solution allows users to see items they have seen before, order them by frequency of use, easily get to the content, and the information within it persists over time (longer than the current session).
Domains where passive solutions offer value include the following:
Once you understand the modes, examples are easy to spot during user research.
Known-items show up in heavy use of search with accurate keywords, when users can easily list what they need from the site and support e-mail will ask for specific content.
Exploratory information seeking shows up in search when vague phrases or repeated searches for similar keywords are used; when users express that they are researching, looking for background information, or “finding out about” something; and when support e-mails ask for general information.
“Don’t know what you need to know” is a little harder to identify. In interviews, users may express that they just want to keep up with things. It may also be clear that users do not have sufficient background knowledge or have not read information they should have. You can identify gaps in content by walking through the content, acting out a scenario from the user perspective, and checking that sufficient information is available.
Re-finding is easy to identify if your site has user registration and the logs show what pages people visit. You can also look at the number of items in wish lists.
The most important issue is not whether you notice a mode of seeking information that fits into one of these categories, but that a range of modes exist. Observe how your users approach information, consider what it means, and design to allow them to achieve what they need.
Note: Thank you to IAI members for suggestions for sites that offer navigation for the re-finding task.
Originally published by Digital Web Magazine: Usability for rich internet applications
After struggling for years to design Internet applications around the limitations of HTML, I have been very excited by the recent release of a range of Internet applications with increased richness and interactivity.
Rich Internet applications (RIAs) can provide opportunities to design much better user experiences. They 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. The richer interaction requires a better understanding of users and of human-computer interaction (HCI). Although there is a lot of HCI material and research available, it can be difficult to determine how it applies to this new environment.
In this article, I provide some practical tips for designing usable RIAs, based on fundamental principles of HCI.
According to the Wikipedia, RIAs are “a cross between Web applications and traditional desktop applications, transferring some of the processing to the client end.”
The key difference between RIAs and other Internet applications is the amount of interaction in the interface. In a traditional page-based Internet application, interaction is limited to a small set of standard controls such as checkboxes, radio buttons, form fields and buttons. This severely limits our ability to create usable and engaging applications, and most Internet applications have been clumsier and more difficult to use than their desktop counterparts. An RIA can use a wider (and hopefully better) range of controls to improve users’ interaction with the interface, allowing efficient interactions, better error management, feedback and overall user experience.
Some of my favorite sites with RIA-style interfaces include:
Many are built with Flash or using Ajax techniques.
The key features of these applications include:
These rich features are also those that provide the most challenge for designers who wish to ensure applications are highly usable.
When designing RIAs, it is tempting to design many new features that add a lot of richness. Don’t give in to this temptation! Regular folks who have been using the Internet for a number of years are comfortable with the existing page-based model and limited interactivity, as clumsy as it may appear to designers and developers. It takes time for people to adapt to new approaches. It will be some time before conventions emerge and users are comfortable with the new generation of applications. Go slowly, adding richness where it significantly improves usability, and relying on traditional models where these better suit your user group.
Good user research (and a focus on users throughout the design process) and regular usability testing will help you determine how much richness is appropriate at a point in time.
One way to add richness to your application is to allow users to directly interact with page elements: editing text inline, dragging and dropping graphic elements, panning a map.
A primary challenge is to communicate what can be done with page elements and how to use new controls. People must be able to identify that a control exists and easily determine how to use it.
In The Design of Everyday Things, Don Norman popularized the idea of perceived affordance (the perceived and actual properties of a thing that determine just how the thing could possibly be used). For example, the original 3D button has great perceived affordance. By highlighting the top and shadowing the bottom, people perceive it as popping out of the screen and easily understand that it can be pushed by clicking.
One way is to use controls that mimic things people are familiar with from the physical world, such as the slider on Fidelity Labs Mortgage Search.
Another is to change the appearance of the element or show the controls when the mouse hovers over it, showing what can be done without cluttering the interface. Backpack uses this to indicate elements that can be edited or deleted.
In addition to ensuring your controls have good perceived affordance, you should:
There is significant advantage in updating part of the page instead of refreshing it or opening a new page. It allows us to create faster applications, improve feedback to the user and manage errors better. Error management and feedback are critical to improving usability, but it’s particularly difficult to do with the page-based model. Users have become accustomed to taking an action (such as clicking a link), waiting for the action to complete, and checking the result of the action.
The key challenge in designing part-page updates is making sure people see them. We can use what we know about visual attention and visual processing to ensure people will see that part of the page has been updated:
As we interact with the world, we develop a mental model of how things work. Most users have developed a mental model of the Web based on pages—every click takes you to a new page. Clicking on the back button takes you to the previous page. This is a strong mental model, and is reasonably accurate for the majority of content-rich sites. Users will continue to apply their page-based mental model to RIAs unless they can clearly identify that the RIA uses a different model.
The first part of this challenge is to think very hard about where to use individual pages and where to use in-page richness. Think about the entire interaction of your application and break it up appropriately. Don’t try to put everything into one “page” just because you can.
One factor is the likely use of the back button. Consider when people may need to go “back”—this will give you clues about where to use pages. Don’t disable the back button, reducing users’ control of their situation.
Another challenge is how to visually express the difference between pages and in-page changes. You may need to design different visual navigation models so people can identify when they are getting a new page. It is likely that some new navigation methods will emerge over time.
Google Reader manages pages very poorly. The buttons in its traditional top navigation bar (Home, Your Subscriptions, etc.) imply navigation to individual pages, but actually change the content in the body of the page. When I first used Google Reader, I frequently tried to use the back button to return to the home page but was thrown right out to the last page I visited before reaching Google Reader. This was so frustrating, I stopped using it.
In contrast, Yahoo! News manages pages and in-page updates well. It has traditional top tabbed navigation to individual pages and in-page panels that change based on the news source:
Many intranets are structured around the organisational chart. It is well known that this method of grouping content is difficult for staff – they can’t find information if they don’t know who is responsible for it. However, it often seems too difficult to move from an organisational- based structure to a more intuitive topical structure.
Before moving to a better structure it is necessary to identify why the intranet is currently designed around the organisational chart, and address these issues first.
Published by Step Two Designs: Why are intranets structured like the organisation chart?
This article outlines 10 practical ways that an intranet can be improved incrementally without yet another redesign. Although some of the methods may require mini-projects to be set up within the intranet team, many of the methods can be applied alongside the team’s usual maintenance activities.
Published by Step Two Designs: 10 ways to continually improve your intranet
This article provides an overview of what usability is (and what it is not). It provides ideas on how to include more usability activities in projects and the types of activities that are needed in order to create more usable systems.
Published by Step Two Designs: What is usability?
Designing the page layouts for a new or redesigned intranet can be complex. One of the most difficult aspects is creating the first layout. Starting with an empty screen, you need to determine what will go on each page and where it will go.
Using a strawman design – a design that is created with the intent of discarding it – can help to overcome many of the difficulties in the design process.
Published by Step Two Designs: Using a “strawman” for page layout design
This article documents the usability and information architecture activities conducted as part of the intranet redesign for the Family and Community Services intranet.
Published by Step Two Designs: User-centred redesign of the FaCS intranet
Card sorting is a technique that many information architects (and related professionals.) use as an input to the structure of a site or product.
This article provides a detailed description of the basic technique, with some focus on using the technique for more complex sites. This article does not cover some issues such as the use of online tools, which will be covered in a future article.
Originally published in Boxes and Arrows: Card sorting – A definitive guide.
This article provides five techniques to identify likely usability problems in your intranet. Some techniques provide indications about where the main problems lie, others provide concrete evidence. Each technique can be used alone, or in combination to give you a rich picture of usability issues.
Published by Step Two Designs: Five ways to identify intranet usability issues