User Experience Books Free to Read Online

The truly worldwide reach of the Web has brought with it a new realisation among computer scientists and industry professionals of the enormous importance of usability and user interface design. In the last ten years, much has become understood about what works in user interfaces from a usability perspective, and what does not.

The following are free-to-read books on user experience, available online:

Human Computer Interaction

Interaction Design

Web Accessibility

If there are any more you think need or can be added to the list, please leave a comment.

(via The UX Bookmark)

Jakob Nielsen’s Ten Usability Heuristics

These are ten general principles for user interface design suggested by Jakob Nielsen. They are called heuristics because they are more in the nature of rules of thumb than specific usability guidelines.

  1. Visibility of system status — The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
  2. Match between system and the real world — The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
  3. User control and freedom — Users often choose system functions by mistake and will need a clearly marked emergency exit to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
  4. Consistency and standards — Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
  5. Error prevention — Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
  6. Recognition rather than recall — Minimise the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
  7. Flexibility and efficiency of use — Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
  8. Aesthetic and minimalist design — Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
  9. Help users recognise, diagnose, and recover from errors — Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
  10. Help and documentation — Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

References

IDEO’s Human Centered Design Toolkit

IDEO’s Human Centered Design Toolkit is a free innovation guide for NGOs and social enterprises.

Human-Centered Design (HCD) is a process used for decades to create new solutions for companies and organisations. HCD can help you enhance the lives of people. This process has been specially-adapted for organisations like that work with people in Africa, Asia, and Latin America. HCD will help you hear people’s needs in new ways, create innovative solutions to meet these needs, and deliver solutions with financial sustainability in mind.

The Toolkit is divided into four sections that can be downloaded individually or together:

  1. The Introduction will give an overview of HCD and help you understand how it might be used alongside other methods.
  2. The Hear guide will help your design team prepare for fieldwork and understand how to collect stories that will serve as insight and inspiration. Designing meaningful and innovative solutions that serve your customers begins with gaining deep empathy for their needs, hopes and aspirations for the future. The Hear booklet will equip the team with methodologies and tips for engaging people in their own contexts to delve beneath the surface.
  3. The Field Guide and Aspirations Cards are a complement to the Hear guide; these are the tools your team will take with them in order to conduct research.
  4. The Create guide will help your team work together in a workshop format to translate what you heard from people into frameworks, opportunities, solutions, and prototypes. During this phase, you will move from concrete to more abstract thinking in identifying themes and opportunities and back to the concrete with solutions and prototypes.
  5. The Deliver guide will help catapult the top ideas you have created toward implementation. The realisation of solution includes rapid revenue and cost modeling, capability assessment, and implementation panning. The activities offered in this phase are meant to complement your organisation’s existing implementation processes and may prompt adaptations to the way solutions are typically rolled out.

Download the complete toolkit (PDF, 30.5MB)

BBC Homepage LogoI’m not a big fan of the BBC’s recent website redesign! While I believe that a few structural and hierarchical elements could have been addressed better, the overall result of this redesign is too “Facebook” and Web 2.0 for my liking; exactly what an online news site does not need. Who are the BBC trying to appeal to? They have gone from being content centric to design and technology centric. This in itself isn’t a bad thing, but I don’t understand the BBCs motivation for doing so.

Richard Titus, the Acting Head of User Experience at the BBC was a key driver of the project.

From a conceptual point of view, the widgetisation adopted by Facebook, iGoogle and netvibes weighed strongly on our initial thinking.

Titus identifies the key features of the new homepage as being:

  • Simple, clean and beautiful, the final design, … visually striking yet unpretentious.
  • Personalization: you can choose the content that interests you by adding and removing the content boxes via the “Customise Your Homepage” tab.
  • Localization: Users can now set their own location, enabling them to access local sites, weather, news, radio and TV schedules without the hassle often associated with user journeys to local content.
  • Simplicity: the customization is intuitive and includes an interactive demo and tips to guide users through the process. It is also unobtrusive if the user has no desire to customize their page their experience won’t be compromised.
  • Search: The site is much easier to read and scan at a glance. At the top of the page there’s a search function (now reduced from two search boxes to one), and at the bottom a full directory of all BBC sites and a link to the A-Z, allowing users to quickly find what they’re looking for.
  • Nostalgia: the new homepage also manages to incorporate eccentricity alongside innovation.

Aesthetically bold and bright.

Aesthetically, the new homepage looks nice. It’s big, bold and bright – a far cry from the old days when BBC sites had text almost too small to read and a fixed-width design optimised for tiny monitors. But at the same time it appears far too clunky! I’d prefer something that would look a little more elegant and understated. Something that doesn’t appeal to The Facebook Generation, who are less likely to read the BBC pages at lunchtime, than update their Facebook, Bebo or Twitter profile during that ‘valuable’ hour. This begs the question, does the BBC know who their core audience is?

Confusing interactions.

The homepage makes great use of AJAX, but at the same time, there are a number of confusing interactions going on. For instance, the ‘Edit’ button next to each area of customisable content seems like the wrong label text. I’m not editing the news, the weather or blogs – I’m selecting which news categories I want to see, where I am and which blogs I want to read. These types of button ought to be contextual rather than generic. Edit is simply too vague.

Also, what’s the idea behind those plus and minus buttons for news? Strange idea. Add or remove articles from the displayed list? Why would you want to remove them from view sequentially? If the idea was to allow the user to asynchronously update a short list of available headlines, then why not move back/forwards in blocks of five? Plus and minus are often used as metaphors for creation/deletion in software, so the usage doesn’t seem right.

Personalisation vs Simplicity … an uneasy relationship

BBC Customise Homepage

The ability to personalise a website is, in general, a good thing. Google has done it with their iGoogle, Yahoo! with My Yahoo and Microsoft with Windows Live. But I think the balance here is gone too far towards design and borrowing from succesful Web 2.0 sites. The BBC website has always been an impressive destination for (relatively) impartial news and current affairs throughout the world, not a Web Portal. Or is this the point? Does the BBC want to become a destination for all your information needs and compete with Google, Microsoft and Yahoo?

The BBC should consider that 14-25 year old users, what I term The Facebook Generation, will require far greater scope for adding their individuality than is currently available. The social networking generation are page-savvy. They want control of their interface to information, their screen is their window on the world and I don’t think that you have gone far enough in divesting control of the display of that information to the user.

But for those who aren’t part of The Facebook Generation, the people who care about getting to the content fast and with little fuss, is the ability to personalise the homepage worthwhile or even simple? I’m not so sure.

Who needs a clock?

BBC Homepage Clocks Finally, the clock and date. What an important waste of webpage ‘real estate’, even though in the BBC’s case I understand it was a throwback to the old clock that preceded individual TV programmes. If you’ve got a modern computer capable of displaying the clock with the Flash plugin, then you’ll almost certainly have the date and time visible to you anyway. It’s needlessly superfluous on a website.

Website Success via Desire Lines

To paraphrase Plato

Human behaviour flows from three main sources: desire, emotion and knowledge

Desire lines are those well-worn ribbons of dirt that you see cutting across a patch of grass, field or park, often with nearby pavements, particularly those that offer a less direct route, ignored. In winter, desire lines appear spontaneously as trampled down paths in the snow. These paths are never perfectly straight but instead, they meander like a river this way and that, as if to prove that desire itself isn’t uniform or linear and (literally, in this case) straightforward. Desire Lines show that it is human to choose, but it is also human to choose what other people have chosen before. Be it for establishing a pattern, be it for convenience, or be it for not reinventing the wheel. In this way the Desire Lines become well-trodden and pseudo-permanent routes to a particular destination.

Desire Lines are the ultimate unbiased expression of natural human purpose

The term ‘Desire Lines’ originates from the field of urban planning in the early 20th Century.

An optimal way to design pathways in accordance to natural behaviour is not to design them at all

Extending the concept to websites

Broadening the concept of Desire Lines, it is also possible to see other impressions of human desire in websites, many of which can provide a commercial advantage to the particular website in question.

The web phenomenon is simply another way people find entertainment, communicate and interact. Whether the purpose of using the web is for enjoyment or employment, Desire Lines are are a such perfect expression of natural human intention that they become the utlimate design pattern for building successful and intuitive websites. It is easy to envisage users like an army of ants moving in single file towards their goal, not following set paths, but bypassing the planned route directly towards the news article, the video, indeed any product being offered by the website concerned.

Instead of websites providing classic access points via menus and taxonomies, they can employ different access points based upon user preferences and previous browsing history. This is heavily dependent upon capturing user’s details via a cookie or a login system, like at Amazon, but the benefits to the user can be far more rewarding.

So who is doing this?

Understanding the demographics of your users and your site usage is key to Desire Lines. The BBC website is a great example whereby search statics are monitored frequently. They adapt their web user interface and site structure based upon what people are typing into their search box thus making it easier for subsequent users to view the more relevant or interesting stories of the day.

Amazon makes Desire Lines more explicit and beneficial to their users through Listmania, recommendations, Customers Who Bought This Item Also Bought, What Do Customers Ultimately Buy After Viewing Items Like This?, Better Together, Recently Viewed Items, Wish Lists etc. In essence, Amazon does not provide a single standard way of finding an item, but relates each item together through a myriad of historic information from its user community. The user therefore has the option to search for an item, use the catagories, or click on links and begin their own desired user journey, which can be uniquely distinct from other users journeys or a mirror of those journeys.

Current TV takes the concept even further by showing content that is purely based upon what users want, or what they term as viewer-created content. Current slice the schedule into short segments into “pods” — each just a few minutes long. These pods profile interesting people on the rise, intelligence on trends as they spring up around us, and international news from new perspectives. Anyone who wants to contribute can upload a video. Then, everyone in the Current online community helps decide what should be on TV. You can join in at either stage — watch & vote or make video.

Limitations to Desire Lines

A key limitation, or possibly a challenge, to the successful adoption of Desire Lines concerns advertising revenues. For a user it is beneficial to be able to reached the desired destination as quickly and efficiently as possible, but for a website’s advertising revenue it certainly is not. To be simplistic and possibly cynical, many sites don’t want users to have an overly efficient experience as this limits page views and page impressions. The challenge, therefore, is to retain users on the website and provide them more relevant information and targeted advertising.

There are also implications on what is considered more relevant and what is not. The BBC to some extent decides based upon user searches, but this serves also to hide potentially captivating an important stories. One user’s preference isn’t necessarily the next’s, therefore creating an information bias. This may be even more problematic with our over-reliance on Google for finding information. The Google algorithms essentially decide what we find even though we are told that the sites listed are based upon relevance and popularity.

Finally, you can’t pave every desire line. To do so would end in a playing field not covered in lush green grass with a few tracks intersecting the green, but a concrete mess.

The day of the emasculated Web 1.0 where the client-side was functionally poor, where the user interface was akin to the days of the mainframe computer, is rapidly diminishing and the new era of the Web 2.0 has yielded a new way of thinking. The demand for web applications, particularly in the business arena, is increasing at an exponential rate as the benefits of new technologies and paradigms are comprehended by the CTOs, CIOs and decision makers. Web interfaces have significantly restricted the interactive user experiences possible on the Web, and the ability of those Web applications to present increasingly complex information to the user, to date.

To solve a myriad of today’s problems, modern web applications must be able to solve an equal myriad of requirements.  These requirements provide the principles behind the emerging Rich Internet Applications (RIAs) and include some, if not all, of the following.

  1. Run unchanged across multiple platforms
  2. Deliver engaging user interfaces with high levels of interactivity
  3. Restore processing power and rendering capabilities to the client
  4. Execute well across varying connection speeds (broadband rather than the  archaic dial-up)
  5. Utilise audio, video, images and textual content in a seamless mannor
  6. Support mobile workflow by allowing users to work on- and off-line
  7. Allow the client to decide what content should be accessed and when that content should be retrieved (asynchronous execution)
  8. Access any number of middle-tier services (e.g. .NET, Java, ColdFusion) and data stores
  9. Provide powerful and dynamic user interfaces
  10. Use standards such as XML-RPC, SOAP and REST in Web Services-based applications
  11. Integrate with legacy applications
  12. Allow for incremental addition of functionality to enhance the Web application environments
  13. Be accessible to all
  14. and, Utilise ubiquitous content

Candidate technologies for these solutions are developing primarily in the form of AJAX, Flex/Flash and XAML. They do not simply address the limitiations of the page based model as seen in Web 1.0, but provide the above capabilities whilst also empowering developers and designers to create new kinds of engaging and innovative applications and user experiences.

The Internet has emerged from obscurity to become a dominant platform for application development and is integral to the idea of Software as a Service (SaaS). Unfortunately the demand to build applications of increasing complexity has continued to outpace the ability of traditional Web applications to represent that complexity and expectation. Utilisation of AJAX technologies attempts to reconcile some of the issues, but frequently the result is a frustrating, confusing or disengaging user experience resulting in unhappy customers, lost sales, and increased costs.

We are in a period of expanding opportunity for Internet and intranet applications. The growth in adoption and usage of the Internet has acted as a driver behind technology spending, spawned such terms as Service Orientated Architecture (SOA), Software as a Service (SaaS) and Web Services, and enterprise integration trends that seek to combine back-office infrastructures with new front-office applications and the Internet.

Integral to this is the need to communicate better with employees, customers, suppliers, and partners. Intranet applications, including enterprise information portals and employee facing applications, are increasingly depended upon to share information across a company, while outwardly focused extranet applications seek to more tightly bind networks of partners, suppliers and customers and make communication, business transactions and support easier.

A key reason Web applications cannot represent these types of complexity is because of the limitations of HTML pages. The Internet grew up on the notion of a network of loosely coupled, unintelligent clients that communicate with increasingly intelligent servers by sending requests for pages. The emergence of Rich Internet Applications (RIA’s) has served to blur the distinction between the desktop and the Web and has resulted in smart, powerful and dynamic user interfaces. RIA’s seek to combine the best of the desktop, Web and communication technologies.

As one would expect, the driving forces behind Rich Internet Applications are the big guns in the technology and Web industry; namely Adobe, Google and Microsoft. Each company has produced their own RIA platforms:

Rich Internet Applications

Adobe Integrated Runtime (AIR)

AIR is a cross-operating system runtime that allows developers to leverage their existing web development skills Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s.

Applications can be built using the following technologies:

  • Flash / Flex / ActionScript
  • HTML / JavaScript / CSS / AJAX
  • Combination of these technologies
  • PDF can be leveraged with any application

Adobe Integrated Runtime can be found at http://labs.adobe.com/technologies/air/

Google Gears

Google Gears is an open source browser extension that lets developers create web applications that can run offline.

Google Gears consists of three modules that address the core challenges in making web applications work offline.

  • LocalServer Cache and serve application resources (HTML, JavaScript, images, etc.) locally
  • Database Store data locally in a fully-searchable relational database
  • WorkerPool Make your web applications more responsive by performing resource-intensive operations asynchronously

Google Gears can be found at http://gears.google.com

Micrsoft Silverlight

Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. Silverlight supports fast, cost-effective delivery of high-quality video to all major browsers running on the Mac OS or Windows.

Microsoft Silverlight can be found at http://silverlight.net

Rich Internet Applications (RIAs) combine the best user interface functionality of desktop software applications with the broad reach and low-cost deployment of Web applications and the best of interactive, multimedia communication. The end result is an application which provides a more intuitive, responsive, and effective user experience.

Rich Internet Applications Venn Diagram

More specifically, the best of the desktop environment includes providing an interactive user interface for validation and formatting, fast interface response times with no page refresh, common user interface behaviours such as drag-and-drop and the ability to work online and offline. The best of the Web includes capabilities such as instant deployment, cross-platform availability, the use of progressive download for retrieving content and data, the magazine-like layout of Web pages and leveraging widely adopted Internet standards. The best of communication means incorporating two-way interactive audio and video technologies.

This means that in a RIA environment, the client is capable of doing more than just rendering pages. It is able to perform computations, send and retrieve data in the background asynchronously from the user’s requests, redraw sections of a screen, use audio and video in a tightly integrated manner, and so forth, independently of the server or back end to which it is connected.

An RIA environment provides a strong technical platform that effectively restores the client’s abilities to be more like that of desktop software applications, or a traditional client in a client/server system. It fits into the traditional n-tier development process and integrates into legacy environments to extend existing applications without the need to rework them. And it also can serve as an interactive presentation layer above underlying Web Services. It is able to address various kinds of complexity. It enables development of applications that have complexity requirements, reducing the cost of development and frequently making development of such an application possible in the first place.

Because of their architecture and capabilities, RIAs have the potential to fundamentally change the way companies engage and interact with their Web users, leading to more effective user experiences with top- and bottom-line results.