User Needs & Goals

Empower the user

• People cost a lot more money than machines, and while it might appear that increasing machine productivity must result in increasing human productivity, the opposite is often true. Users determine the life and death of your product. If you understand your users' needs and how they actually use the product, then you have the information necessary to make improvements.

• The UCD team try to understand their target audience so that they can determine what the User are looking for in the product.

• The UCD standard practice is to have status mechanisms to keep users aware and informed at all times, keeping status information up to date and within easy view.

• Keep the user occupied. Since, typically, the highest expense in a business is labor cost. Any time the user must wait for the system to respond before they can proceed, money is being lost.

• To maximize the efficiency of a business or other organization you must maximize everyone’s efficiency, not just the efficiency of a single group.

• The system should provide the users with all possible signs and directions so that even with the least brain work they are able to sail get their job done in the least possible time. However, there should be details available for those who want to research and find more from the system.

• The UCD team conduct a full assessment of user’s proposed or existing product, and identify the strengths and weaknesses. From these strengths and weaknesses, they develop a targeted plan for how to improve the overall user experience. They examine both how existing screens and processes can be re-purposed, as well as what needs to be redesigned.

• The UCD team entire design process is iterative, where they rely heavily on user and client feedback to determine which direction to steer. It is rare that they get it right on the first try and even after years and years of experience; They are constantly improving and challenging themselves.

• Make user interfaces highly explorable.

• Offer users stable perceptual cues for a sense of "home”.

• Make Actions reversible.

• Always allow, “Undo”.

• Always allow a way out. However, make it easier to stay in.

Contextual User Interfaces on the Web

It is ironic that it took web UIs so long to discover the elegance and simplicity of context. Since its dawn, HTML lacked the sophisticated widgets that are present on the desktop and web UIs were always considered more primitive and slow. Contextual, AJAX-based UIs actually seem faster because they do not reveal all possible choices to the user. Instead they focus on surfacing just the bits that are necessary and then surfacing more based on user gestures.

A good example of context-based UIs can be found in modern video players. The controls in these apps are hidden until the user moves the mouse over the player. Depicted below is the player from Vimeo.

Another typical element of contextual UI is modal DHTML dialogs. Regular modal dialogs are annoying to the user, but the modal DHTML ones work great because they bring the actions into the spotlight. For example, the dialog below comes up when the user clicks on Embed option in the screen above.

Note the contextual options in the screen above. The user can either preview the video or customize its look. Neither of these options are required so they appear as closed off toggles. If the user decides to explore the option, the toggle simply expands as shown below.

Another important breakthrough in the contextual UI approach is the realization that function is more important than design. The famous Apple mantra that design is the function is true, but not everyone can design like Apple. Lots of web sites in the nineties ended up with designs that were overwhelming and needlessly flashy. Those designs paid more attention to colors and forms than to the function. The new UIs are different, because a lot of them are purposely plain. They favor CSS over images, and focus on function and context instead of knock-out looks.

Lots of companies got the context bug. Flickr, Digg, and 37 Signals are just a few that use contextual interfaces. Our next example comes from the literary social network Shelfari, which developed a contextual UI for interacting with individual books. The remarkable thing about this UI is that it violates a lot of classic principles yet it succeeds in delivering the necessary functions in a contextual and compact way.

When the user mouses over a book, a contextual popup comes up containing information about the book and a set of associated actions. Part of the popup is a button/menu (sort of like a button and combo box) widget that allows the user to provide information about what he or she did with the book. The first thing to note is that combination of a button in a menu is not standard, yet it makes sense because it saves a click for the most important action. Secondly, the menu is effectively a popup within a popup, which is a big no-no in the classic world, but works well in this context. The elements of the menu are not buttons but check boxes, which allow multiple selection - another violation of classic user interface elements, but which works very well in this context. What is remarkable is how intuitive this gadget is - you are interacting with it in the context of a book and each choice is simple and clear.

Such clarity and simplicity was never present in the old interfaces. Clearly, this new approach to UIs is great, and early adopters are loving it. But will it cross over to the mainstream?

Windows UI - The World Of Never-Ending Choices

Looking back at the years when Windows dominated our lives one can hardly believe what we put up with. These interfaces were massive and overwhelming. Each application was full of screens with huge numbers of options and settings.

Every imaginable choice was thrown at users at once and it was up to the poor user to figure out what to do. To cram more information onto the screen, the interfaces of that era used tabs. At some point Microsoft invented the ultimate UI element - a tab with a scroll button in the end which allowed the user to page through hidden tabs.

Another philosophy of the old UI approach was that the user wants to see all information all the time. Instead of building UIs that responded to the way that people actually interacted with the tool, the user interface opened up all possible choices at all times. Naturally, this is completely overwhelming and confusing to people.

The only way to cope with complexity was to introduce a standard set of widgets, such as tables, combo boxes, check boxes, etc., so that users at least had some familiarity with UIs from program to program. But on top of that, there was a myth spread that users were stupid and would not be able to understand a non-standard UI.

The myth was supported by the fact that a lot of people do not respond well to sophisticated visualizations, like graphs, heat maps, or treemaps. While this is true, it doesn't mean that people can not figure out new user interfaces. The proof comes from Apple, which continuously innovates with new UIs for its software products. Also, recent social web applications have made a strong case for simpler, contextual user interfaces.

The Rise of Contextual User Interfaces

Web 2.0 has brought many wonderful innovations and ideas to the Internet. We can no longer imagine the web without a social dimension, and we can no longer imagine an online world that is read-only - it is now a read/write web full of user-generated content. But there is another fairly recent innovation, which might have just as profound implications. We're speaking of the contextual user interface.

Even five years ago we lived in the boxed world of Windows-dominated UIs. There were standard UI elements - menus, tabs, combo boxes, tables - and every single desktop application was full of these elements and nothing else. User interface was not the place to be innovative. It was considered unorthodox and even dangerous to present the interface in non-standard ways because everyone believed that users were, to be frank, stupid, and wouldn't want to deal with anything other than what they were used to.

Strikingly, the recent wave of UI innovation is proving exactly the opposite. Users are not stupid, and in fact, they were overwhelmed with choices presented in traditional UIs. The new interfaces are winning people over because they are based on usage patterns instead of choices. The key thing about new UIs is that they are contextual - presenting the user with minimal components and then changing in reaction to user gestures. Thanks to Apple, we have seen a liberating movement towards simplistic, contextual interfaces. But can these UIs become the norm? In this post we take a look at the rise of the contextual UI and ponder if they will cross the chasm.

RSS. A Web 3.0 Driver

In ten years RSS and its related technologies will be seen as the single most important internet technology since Tim Berners-Lee and Robert Cailliau created the World Wide Web at CERN around 17 years ago.

Real Simple Syndication is crucial to the development of the new web because it’s just that, really simple. Anyone with a Wordpress account or a tiny bit of coding knowledge can generate an extensible, standards based database of information that can be transferred to almost any other modern web site.

If Web 3.0 is the Semantic Web, where computer agents read content like human beings do — then RSS will be its eyes (or at least its corrective lenses). Already, entire business models are being created around aggregating meta-data. Netvibes allows you to create your own personal homepage, drawing much of its content from RSS feeds that you select. iGoogle does the exact same thing, and a host of others are jumping on the concept that the easiest way to give users relevant content is to give them the ability to define relevance for themselves.

In this future, RSS will be extended to include a host of data-points it currently does not. Each blog post (or microblogging feed), every picture, every video clip will have searchable, taggable, XML based syndication around it.

But wait, there is more.

People Search

The web as a database means that your online persona is apt to become an entry in it. If you look at technologies like FOAF you will see what I mean. FOAF is a project founded by Libby Miller and Dan Brickley. You can think of it as RSS but for Social Networks. It takes common profile data and puts it into a form that makes it cross-compatible with other social networks. Once Search Engines are properly able to manage meta-data like RSS, FOAF and the half-dozen other protocols out there and present it more intuitively the concept of a truly universal internet is well without our grasp.

Defining Context

Finally, RSS enables users to define their own contexts for information. Imagine a word where creating a mashup between Google maps and your Twitter account was no more difficult than sticking a few widgets together. This type of widgetizing of the web is not too far off, already Yahoo has a mashup creator — Yahoo Pipes that lets you do just this. Web 3.0’s real power will be in the ability to create data and transfer it effectively, even now we are well on our way.

10 Principles Of Effective Web Design

1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.

If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.

Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to explore web-sites according to the “F”-pattern, these three statements would be the first elements users will see on the page once it is loaded.

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.

ExpressionEngine uses the very same structure like Beyondis, but avoids unnecessary question marks. Furthermore, the slogan becomes functional as users are provided with options to try the service and download the free version.

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t use your web site if they can’t find their way around it.

2. Don’t squander users’ patience

In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.

As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.

Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the form has horizontal orientation, the user doesn’t even need to scroll the page.

Ideally remove all barriers, don’t require subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.

3. Manage to focus users’ attention

As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.

The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.

Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the “free” product.

Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done. The less question marks visitors have, the better sense of orientation they have and the more trust they can develop towards the company the site represents. In other words: the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.

4. Strive for feature exposure

Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.

Dibusoft.com combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance. The choice of colors might be too light, though.

Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.

5. Make use of effective writing

As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.

An optimal solution for effective writing is to

• use short and concise phrases (come to the point as quickly as possible),
• use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),
• use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)
• 
  

6. Strive for simplicity

The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.

Crcbus provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer. Notice how even icons manage to communicate the information clearly. Once the icons are hovered, additional information is provided.

From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.

Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.

7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.

White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.

8. Communicate effectively with a “visible language”

In his papers on effective visual communication, Aaron Marcus states three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen.

• Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
• Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.
• Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.

9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).

With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox for more information)

BabelFish in use: Amazon.com in Russian.

A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with Babelfish) and provide your usability testers with a task to find something in the page of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective, even if they can’t understand a word of it.

Steve Krug suggests that it’s better to innovate only when you know you really have a better idea, but take advantages of conventions when you don’t.

10. Test early, test often

This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.

Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).

Some important points to keep in mind:

• according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.
• testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.
• usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.
• according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.