This subject may seem incredibly “big” for a single article, but it’s about the specific nature of usability that we often overlook or confuse. With this appreciation, you’ll be able to design more effectively, and your website’s usership will be able to grow, too.
Usability replaced the outmoded label “user friendly” in the early 1990s. “Usability” has had trouble finding the definition we use now. Different approaches to what made a product “usable” splintered between looking at it with the view of the product in mind (i.e., the ergonomic design, such as a curved keyboard); looking at it from the point of view of the user (how much work and satisfaction/frustration he/she experiences using it); and the view of the user’s performance, which involves how easy the product is to use, if it’s to be used in the real world.
“Usability” refers to the ease of access and/or use of a product or website. It’s a sub-discipline of user experience design. Although user experience design (UX Design) and usability were once used interchangeably, we must now understand that usability provides an important contribution to UX; however, it’s not the whole of the experience. We can accurately measure usability.
A design is not usable or unusable per se; its features, together with the user, what the user wants to do with it, and the user’s environment in performing tasks, determine its level of usability. A usable interface has three main outcomes:
- It should be easy for the user to become familiar with and competent in using the user interface on the first contact with the website. If we take a travel agent’s website that a designer has made well, the user should be able to move through the sequence of actions to book a ticket quickly.
- It should be easy for users to achieve their objective through using the website. If a user has the goal of booking a flight, a good design will guide him/her through the easiest process to purchase that ticket.
- It should be easy to recall the user interface and how to use it on subsequent visits. So, a good design on the travel agent’s site means the user should learn from the first time and book a second ticket just as easily.
This isn’t the only set of requirements for usability. For example, a usable interface will be relatively error-free when used.
We can measure usability throughout the development process, from wireframes to prototypes to the final deliverable. Testing can be done with paper and pencil but also remotely when we have higher-fidelity prototypes.
It’s important to analyze the users’ performance and concerns with a web design as early as possible. From there, we can apply a set of guidelines with a grain of salt; because they tend to be general, we need to adapt them to our specific area. Guidelines show a product’s features proven to improve usability. We can fine-tune design revisions according to these guidelines, as long as we look at all the dimensions. Sometimes, it might just involve tweaking a menu layout; or, it might involve looking much higher.
We have to consider the user at all points when determining usability. If our designs are to be “usable”, they have to pass the test with a minimum number of criteria. If our product were a mouse and not a website, we’d have to ensure that it conformed to standards (to receive that all-important “CE” imprint). For a website, it might be easier to explore how our design ranks alongside a competitor’s. Let’s go back to the travel agent’s and see where we might improve our design
- Users can navigate to “buy” button in 294 seconds, on average.
- Returning users navigate to “buy” button in 209 seconds, on average.
- 18% of users bought a ticket on finding landing page.
- 42% of users went no further than the landing page.
Happy Huzzah’s Getcha There, Inc.
- Users can navigate to “buy” button in 198 seconds, on average.
- Returning users navigate to “buy” button in 135 seconds, on average.
- 32% of users bought a ticket on finding landing page.
- 12% of users went no further than the landing page.
Glancing at these metrics tells us something. We need to check out what “Happy Huzzah’s Getcha There, Inc.” is doing, because something’s certainly working there!
Author/Copyright holder: GNU FDL. Copyright terms and licence: CC BY-SA 3.0
In addition to content, we have web development and design considerations for usability. These are (mainly) outlined as follows:
Servers used to host websites are a usability consideration. Two major factors to consider when selecting servers are:
- Speed - Google ranks by usability to some extent. How quickly your page loads is one of the ranking factors — so, speed to load is also a Search Engine Optimization (SEO) concern. A website that’s slow to load and slow to respond turns users off. Servers influence how fast a page will load depending on their capacity, specialization, etc. Naturally, it’s not just servers that influence the speed of a page — the web designer has a lot of influence over this in the way he/she serves images, graphics, etc., too.
- Downtime - During downtime, a website is completely inaccessible. It’s fair to say that most websites will experience the occasional moment of downtime when a server falls offline. However, some suffer more than most; choosing a reliable server enables the delivery of a better user experience. One bad experience might have a user shrug and come back later. More, and that user may go somewhere else.
Focus the HTML you use on delivering a better user experience. While, to date, only mobile websites benefit from user experience ranking on Google, it’s probably fair to infer that in the future this will also be true on all platforms. Some key considerations for your HTML include:
- Use ALT tags - ALT tags are used in conjunction with images; they let you convey additional information about the image that isn’t displayed as part of the main text. ALT tags assist with indexing in search engines (they let you tell the search engine about the content of the image). They also help with screen-reader narration for visually impaired users.
- 404 Not Found Page - Broken links happen, particularly in large websites. While ideally, you should test all links on a regular basis and repair any broken ones, it’s a good idea to have a plan for when users encounters a broken link. That plan is the “404 Not Found Page” — a well-designed 404 page will try to assist the user in returning to a positive experience. The default 404 page isn’t helpful in this respect. Clunky and primitive, it gives users the impression that they’ve come to the end of an escalator that isn’t attached to a floor. They don’t want to fall off and land on an archaic message. As a designer, never lose sight of that. That little courtesy goes a long way.
The visual factors that impact the overall user experience are the factors where, normally, youthe designer have the most control. That means paying careful attention to:
- Font Size and Color- Choose fonts that are easy to read. That means high levels of contrast with the background and font sizes large enough for users to read easily. If some of your user base is elderly or visually impaired, make fonts larger.
- Branding - Branding, in particular the company logo, helps users know where they are online. Based on eye movement patterns, the ideal place for the logo is the top-left corner of the screen. This is where users who read from left to right are most likely to look when first arriving on the site.
- Layout Colors - Colors need to be consistent in order to convey branding and also to develop an aesthetic appeal. In addition, they must deliver readability. Often, they need to convey hierarchy of information, too.
- Navigation - For users to get the most from a website, they need to get from point A (the entry point) to point B (where they want to be) as quickly and easily as possible. That means providing useful navigation systems, including (for larger websites) search functions, to facilitate that transition.
- Content - The web designer may or may not be responsible for creating the website copy, but there are design elements in the way you display that copy for user experiences:
- Headings - Organize content into manageable chunks through the use of headings, sub-headings, etc. This means developing a scheme for consistent display of each type of heading throughout the website, ensuring a consistent experience as users navigate around the site.
- Paragraphs - Make paragraphs clear and easily recognizable to help prevent the user from being overwhelmed by a “wall of text”. You can also apply Gestalt principles to paragraphs to help better illustrate the relationships between blocks of content.
Website Usability Tools
Testing your website is easy, thanks to a host of tools. Many are free; some are freemium, others premium. Get one that works for your website, then let it gather the data about usability. Many let you test on your existing usership; you can tell from the data what they’re experiencing, what’s going right and not-so right. Here’s a list of some:
IntuitionHQ enables you to test the usability of a website. It also offers an iPad specific testing function.
Usablilla is another usability testing tool that can also provide information based on actual usage of your current site.
Juicy Studio is a tool for testing the readability of content on a website.
Pingdom offers an insight into speed of response from your website.
An Element of User Experience
Author/Copyright holder: visualpun.ch. Copyright terms and licence: CC BY-SA 2.0
It would be wonderful if we could draw the borders of user experience as if it were a country on a map. Unfortunately, the reality is more fuzzy. As much as we like making sense of phenomena and applying frameworks, we must remember that users are people. As such, they make decisions steered by logic and emotions.
As we saw above, many designers get confused at the difference between usability and the larger branch of user experience. Core areas of the user experience include (Usability, 2014):
- Usability: A measure of a user’s ability to arrive on a site, use it easily, and complete the desired task. Remember, we’re designing websites, where there is flow, rather than focusing on page design and assuming everything will flow later.
- Useful content: The website should include enough information in an easily digestible format that users can make informed decisions. Keep Hick’s Law in mind here: streamline your design to be simple. Use restraint.
- Desirable/Pleasurable Content: The best user experiences come when the user can form an emotional bond with the product or website. That means moving beyond usable and useful and on to developing content that creates that bond. Emotional design is a huge part of the user experience. An English grammar website that offers daily tips might prove itself useful. But if that tip is funny, users won’t only remember the rule; they may return for more!
- Accessibility: For people with different levels of disability, online experiences can be deeply frustrating. There are a set of accessibility standards with which sites should conform to assist the visually impaired, the hearing impaired, the motion impaired, etc. Content for the learning disabled needs careful consideration in order to provide a more complete user experience, too.
- Credibility: The trust that your website engenders in your users also plays a part in the user experience. One of the biggest concerns users have online is security (in many cases, they worry about privacy, too). Addressing these concerns through your design, for example by showing security features and having easily accessible policies regarding these concerns, can help create a sense of credibility for the user.
Naturally, the usability of a design is important. However, we need to consider usabilityalongside these other concerns to create a great user experience. The UX comes as much from graphical design, interactive design, content, etc. as it does from usability alone.
The Take Away
Usability refers to how easily a user interacts with a website or product. It comes under the heading of UX design, but is not the whole story of user experience design. In usability, we designers have to focus on three aspects in particular:
- Users should find it easy and become proficient when using a design interface.
- They should be able to achieve their goal easily through using that design.
- They should be able to learn the interface easily, so that return visits are just as, if not more, easy.
We should analyze our web design when determining usability, taking into account everything from accessibility and usefulness of content to credibility and designing content users will enjoy. That means thinking ahead. Who are your users? Might they have trouble reading your text? Can you make them smile or laugh by adopting a fun tone (e.g., edument—entertainment and education—is useful when teaching)? Users will want to feel reassured that they are navigating securely. Make them feel so.
You also should consider the realities of the web. Finding a reliable server for your site that loads quickly is crucial. At the HTML level, you should use ALT tags and design a helpful catch page in case a link is broken.
Visual factors, including layout colors and content formatting are important, too. Having a good-looking site is all very well, but can users navigate easily?
Finally, test, test, and test. A plethora of website usability tools exist. Never underestimate the value of testing from an early stage. By working out where users click, for example, you’ll be well on track to learning their ways and how usable your site is.
Where To Learn More
Leavitt, M. O., &Shneiderman, B. (2006). Research-based Web Design &Usability Guidelines.US Department of Health and Human ServicesUsabilityUser Experience Basics. Retrieved from: http://www.usability.gov/what-and-why/user-experience.html. [2015, May]
Bevan, N. (1992). “What is Usability”. Proceedings of the 4th International Conference on HCI, Stuttgart, September 1991. Retrieved from: http://www.nigelbevan.com/papers/whatis92.pdf
The Smashing Editorial (2012). “Usability and User Experience”. Smashing Magazine. Retrieved from: http://www.smashingmagazine.com/usability-and-user-experience/
Chapman, C. (2011). ”Comprehensive Review of Usability And User Experience Testing Tools”. Smashing Magazine. Retrieved from: http://www.smashingmagazine.com/2011/10/comprehens...
Hero Image: Author/Copyright holder: Peter Morville. Copyright terms and licence: CC BY-NC 2.0
Websites and Web applications have become progressively more complex as our industry’s technologies and methodologies advance. What used to be a one-way static medium has evolved into a very rich and interactive experience.
But regardless of how much has changed in the production process, a website’s success still hinges on just one thing: how users perceive it. “Does this website give me value? Is it easy to use? Is it pleasant to use?” These are the questions that run through the minds of visitors as they interact with our products, and they form the basis of their decisions on whether to become regular users.
User experience (abbreviated as UX) is how a person feels when interfacing with a system. The system could be a website, a web application or desktop software and, in modern contexts, is generally denoted by some form of human-computer interaction (HCI).
Those who work on UX (called UX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, efficiency in performing tasks and so forth.
Further Reading on SmashingMag:
User experience design is all about striving to make them answer “Yes” to all of those questions. This guide aims to familiarize you with the professional discipline of UX design in the context of Web-based systems such as websites and applications.
UX designers also look at sub-systems and processes within a system. For example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. They could delve deeper by studying components of the sub-system, such as seeing how efficient and pleasant is the experience of users filling out input fields in a Web form.
Compared to many other disciplines, particularly Web-based systems, UX is relatively new. The term “user experience” was coined by Dr. Donald Norman, a cognitive science researcher who was also the first to describe the importance of user-centered design (the notion that design decisions should be based on the needs and wants of users).
Why Is UX Important?
Nowadays, with so much emphasis on user-centered design, describing and justifying the importance of designing and enhancing the user experience seems almost unnecessary. We could simply say, “It’s important because it deals with our users’ needs — enough said,” and everyone would probably be satisfied with that.
However, those of us who worked in the Web design industry prior to the codification of user-centered design, usability and Web accessibility would know that we used to make websites differently. Before our clients (and we) understood the value of user-centered design, we made design decisions based on just two things: what we thought was awesome and what the client wanted to see.
We built interaction based on what we thought worked — we designed for ourselves. The focus was on aesthetics and the brand, with little to no thought of how the people who would use the website would feel about it.
There was no science behind what we did. We did it because the results looked good, because they were creative (so we thought) and because that was what our clients wanted.
But this decade has witnessed a transformation of the Web. Not only has it become more ubiquitous — the Web had at least 1.5 billion users globally in 2008 — but websites have become so complex and feature-rich that, to be effective, they must have great user experience designs.
Additionally, users have been accessing websites in an increasing number of ways: mobile devices, a vast landscape of browsers, different types of Internet connections.
We’ve also become aware of the importance of accessibility — i.e. universal access to our Web-based products — not only for those who with special requirements, such as for screen readers and non-traditional input devices, but for those who don’t have broadband connections or who have older mobile devices and so forth.
With all of these sweeping changes, the websites that have consistently stood out were the ones that were pleasant to use. The driving factor of how we build websites today has become the experience we want to give the people who will use the websites.
What Situations Would Benefit From UX Design?
Saying that all Web systems would benefit from a solid evaluation and design of the user experience is easy; arguing against it is hard if you care about user-centered design at all. But we don’t live in a perfect world, and we don’t have unlimited resources. Thus, we must prioritize and identify the areas that stand to gain the most from UX design and UX designers.
The more complex the system, the more involved will the planning and architecture have to be for it. While investing in a full-blown multi-member UX study for a simple static website seems excessive, multi-faceted websites, interaction-rich Web applications and e-commerce websites stand to benefit a lot from UX design.
Systems that involve a myriad of user tasks must be perceived as being valuable, pleasant and efficient. Designers risk big losses in revenue by neglecting the user experience.
Start-ups and smaller companies generally do not have the resources to hire dedicated employees for this. For example, 37Signals (now Basecamp), a lean start-up company that builds highly successful and robust Web applications, including Basecamp and Highrise, relies on well-rounded individuals, people who can “wear different hats.”
In this situation, training existing employees (specifically, the Web designer) in the principles and processes of UX, or contracting out the UX work as needed, might be more suitable than hiring a full-time employee. However, creating a solid user experience for users in the very first versions of a product or service can certainly make it stand out and attract users’ attention. But as the owner of a start-up, sometimes you may just not have enough resources for hiring a skilled UX designer.
Is your pattern library up to date today? Alla Kholmatova has just finished a fully fledged book on Design Systems and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. Just sayin'.
Projects With “OK” Budgets
Smaller agencies that work for small and medium-sized businesses need to keep costs low for the customer base and prioritize deliverables in order to stay on the budget. The focus in these situations is more on the build process and less on planning, research and analysis. Projects with small budgets will be driven more by the launch of the final product. That doesn’t mean that these projects wouldn’t benefit from the good UX — of course they would — but in practice, small or medium-sized companies often do not feel compelled to invest resources into something that is not necessary for the launch of the site.
Projects With Longer Timeframes
By simple logic, adding a cog to the traditional website production process will extend the timeline. Time must be allotted for user experience design. UX designers could, in theory, shorten timelines by taking on some of the tasks traditionally assigned to Web designers and developers, thus potentially saving time and costs in revision phases by having addressed user issues.
Things To Know About UX Design
UX design is an amazing discipline, but it cannot, or will not, accomplish certain things.
UX Design Is Not One Size Fits All
User experience design won’t work in every situation for every user because, as human beings, we are all different. What works for one person might have the opposite effect on another. The best we can do is design for specific experiences and promote certain behaviors, but we can’t manufacture, impose or predict the actual experience itself.
And just as we can’t design a user experience, we can’t replicate the user experience for one website exactly on another website. User experiences will be different between websites. a design must be tailored to the goals, values, production process and products of its website.
Can’t Be Directly Assessed With Traditional Metrics
You can’t determine the effectiveness of a user experience design based solely on statistics such as page views, bounce rates and conversion rates. We can make assumptions, and we can ask users for anecdotal evidence, but we can’t install an app (at least not yet) that automatically records user experience statistics directly.
Not the Same Thing as Usability
User experience and usability have become synonymous, but these two fields are clearly distinct. UX addresses how a user feels when using a system, while usability is about the user-friendliness and efficiency of the interface.
Usability is big part of the user experience and plays a major role in experiences that are effective and pleasant, but then human factors science, psychology, information architecture and user-centered design principles also play major roles.
Criticisms Of UX As A Profession
Not everyone sees the value of having a UX designer on the team. Arguments against hiring UX specialists revolve around the perceived associated costs, redundancy in skill set and fear of change.
Yet Another Thing to Worry About
The traditional website production process, especially at small agencies and start-ups, whose resources aren’t as deep as they’d like, consists of one Web designer and one Web developer. The Web designer might be the one who develops the user experience, along with other tasks such as designing a wireframe and functional prototype, while the developer builds the production website as specified by the designer. A UX specialist only complicates this process.
Too Far Removed From the Process
A few people in the business of building websites believe that UX designers are too far removed from the actual process. Ryan Carson, founder of Carsonified and a leading voice in the Web design industry, for example, has criticized UX professionals who aren’t “involved in the day-to-day process of designing, building, testing, marketing and updating a Web project.”
This view of the profession basically says that UX professionals with no background in the actual process of building websites can’t devise solutions as expertly as people who create the actual products.
However, many UX professionals do have a background in the build process; many were Web designers or developers who chose to specialize in this particular area of the production process.
Simple logic dictates that hiring a UX person costs money (unless they’re willing to work for free, and none are).
A counter-argument is that we should look at UX design as an investment. Although the benefits of UX are not as readily apparent as those of other parts of the website or application, it can lead to higher returns later on. For example, a simple improvement in the user experience design of a checkout process could increase revenue by millions of dollars.
Results Are Not Directly Measurable
Evaluating the effectiveness and return on investment of a UX design using quantitative measures is difficult. This is because the field is subjective. UX deals with users’ emotions, and you can’t put a number on it the way you can with page views, loading speed or conversion.
Instead, we have to tease out the results indirectly by analyzing revenue levels, page views, before-and-after surveys of users and the like. However, saying that any positive effects are the result of a better user experience or aesthetics or some other factor, such as improved marketing or front-end performance optimization, would be inconclusive.
The difficulty is in trying to quantify effects that are subjective in nature. We have to rely on qualitative evidence.
Tasks And Techniques Of UX Designers
UX designers perform various tasks at various points in the process. Here are a few things that they deliver.
Evaluation of Current System
If a system already exists, a UX professional will holistically evaluate its current state. They will report issues and suggest fixes based on their analysis of research data.
A UX specialist might devise a study to compare the effectiveness and quality of experience of different user interfaces.
This is done by stating a hypothesis (e.g. “A green button is more attractive than a red button.”), proposing or creating multiple versions of a design, defining what a “better experience” means (e.g. “The green button is better because users clicked it more.”) and then conducting the test.
A UX designer could interview existing and potential users of the system to gain insight into what would be the most effective design. Because the user’s experience is subjective, the best way to directly obtain information is by studying and interacting with users.
Wireframes and Prototypes
Based on their findings, UX specialists might develop wireframes of different layouts and perhaps also higher-fidelity prototypes.
Designing how users should move through a system is another popular deliverable.
By engaging the emotions of users and drawing on familiar elements, UX designers tell stories and teach information. Learn more about the value of storytelling in the context of UX in the two-part post “Better User Experience With Storytelling.”
Patterns provide consistency and a way of finding the most effective “tool” for the job. With user interface design patterns, for example, picking the right UI elements (e.g. module tabs, breadcrumbs, slideshows) for certain tasks based on their effectiveness leads to better and more familiar experiences. UX designers not only propose design patterns that are used on other websites, but develop custom patterns specifically for the current project.
User Profiles and Personas
Knowing your audience is the first step in UX design and enables you to develop experiences that reflect the voice and emotions of your users. Personas can be developed using website data.
In the simplest of terms, content inventory is an organized list of pages on a website. Doing a content inventory is a step towards proposing changes in information architecture to enhance the user experience (e.g. user flow, findability and efficiency).
Content Style Guides
Consistency is critical to crafting a memorable user experience through your brand. Content style guides give writers and designers a framework in which to work when creating content and developing a design, and they also ensure that the brand and design elements align with the owner’s goals.
There are plenty of other UX design deliverables; check out this more complete listing.
Tools Of The Trade
Here are a few popular and easily accessible tools for UX professionals. The tools aren’t exclusive to UX professionals; developers, designers and interaction designers, among others, use them as well.
Wireframing and Prototyping Applications
Wireframing and prototyping can be done simply with pen and paper. Paper prototyping, in particular, has many benefits, such as being inexpensive, conducive to group prototyping and quick and easy to produce.
Some software-based wireframing and prototyping tools are:
A/B Testing Software
A/B testing (also known as split testing or multivariate testing) compares different versions of a page, and it can be conducted with any of several programs.
Basically, A/B testing software splits a website’s traffic into two equal segments. One group sees version A, and the other group sees version B. Statistics such as conversion rate and bounce rate are tracked for each version. Split testing determines which version is better based on these statistics. One of the most popular applications for A/B testing is Google’s Website Optimizer.
Content Inventory Software
There are plenty of methods of conducting a content inventory. Using an on-site server application (for which you’ll require access to the Web server) is best for production websites; being closer to the source than third-party software, these applications will naturally be more accurate and efficient. You can use as simple a tool as Excel to create and manage a content inventory (check out the GetUXIndex() template).
Websites built with content management systems such as WordPress and Drupal typically have built-in tools that show a map of the existing website.
User Testing and Feedback Software
Interviewing users is another popular UX design task. The most effective and cost-saving way to do this is with a surveying or feedback app and remote user testing.
User feedback tools are abundant. General survey tools such as PollDaddy are flexible solutions that can be used for other tasks, too. There are usability-specific feedback tools, such as Usabilla, and remote user-testing services, such as Usability Hub, which administer usability tests on reviewers.
UX designers can analyze traffic statistics to hypothesize what types of experiences would be most effective for the audience of the website.
Let’s say the data indicates that the most popular browser for a website is Google Chrome. Google Chrome is regarded as a power user’s browser (as opposed to Internet Explorer, which is more mainstream). From that assumption, a UX designer can craft user experiences that appeal to power users and tech-savvy people.
A feature-packed and free analytics tool is Google Analytics.
Websites About UX
Plenty of websites cover the topic of UX. Here are a few of them.
UX Magazine UX Magazine is a high-quality resource that publishes discussions on ways to enhance the user experience.
UX Booth UX Booth is a multi-author blog catering to the user experience community. It also covers usability and interaction design.