Usability & User Experience
This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles related to Usability and User Experience and published here over all the years.
Quick Overview
- Persuasion Triggers in Web Design
- Innovative Techniques To Simplify Sign-Ups and Log-Ins
- Why User Experience Cannot Be Designed
- Lean UX: Getting Out Of The Deliverables Business
- A Design Is Only As Deep As It Is Usable
- Fundamental Guidelines Of E-Commerce Checkout Design
- The Path To Advertising Nirvana
- 10 Useful Usability Findings and Guidelines
- Design To Sell: 8 Useful Tips To Help Your Website Convert
- 9 Common Usability Mistakes In Web Design
- 12 Useful Techniques For Good User Interface Design
- 10 Useful Web Application Interface Techniques
- 10 Useful Techniques To Improve Your User Interface Designs
- Better User Experience With Storytelling – Part One
- Better User Experience With Storytelling, Part 2
- 10 Principles Of Effective Web Design
- Five More Principles Of Effective Web Design
- 10 Usability Nightmares You Should Be Aware Of
- 30 Usability Issues To Be Aware Of
Persuasion Triggers in Web Design
How do you make decisions? If you’re like most people, you’ll probably answer that you pride yourself on weighing the pros and cons of a situation carefully and then make a decision based on logic. You know that other people have weak personalities and are easily swayed by their emotions, but this rarely happens to you. You’ve just experienced the fundamental attribution error — the tendency to believe that other people’s behaviour is due to their personality (“Josh is late because he’s a disorganised person”) whereas our behaviour is due to external circumstances (“I’m late because the directions were useless”).
Cognitive biases like these play a significant role in the way we make decisions so it’s not surprising that people are now examining these biases to see how to exploit them in the design of web sites. I’m going to use the term ‘persuasion architects’ to describe designers who knowingly use these techniques to influence the behaviour of users. (Many skilled designers already use some of these psychological techniques intuitively — but they wouldn’t be able to articulate why they have made a particular design choice. The difference between these designers and persuasion architects is that persuasion architects use these techniques intentionally).
Innovative Techniques To Simplify Sign-Ups and Log-Ins
There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. But understanding and applying a few innovative techniques could make your forms simpler and more efficient to fill out. In this article, we’d like to present a couple of new ideas that might be useful for your next designs. Please notice that before using these techniques, you should make sure that they make sense in the context in which you are going to use them. We’d love to hear about your case-studies and usability tests that affirm or dismiss the suggestions proposed below.
The purpose of every sign-up form is for users to complete it successfully and send it in. However, if the form is long and complicated, then the user’s excitement for your website could turn to displeasure. Here are a few innovative techniques that will make your forms faster and easier to fill out.
Why User Experience Cannot Be Designed
A lot of designers seem to be talking about user experience (UX) these days. We’re supposed to delight our users, even provide them with magic, so that they love our websites, apps and start-ups. User experience is a very blurry concept. Consequently, many people use the term incorrectly. Furthermore, many designers seem to have a firm (and often unrealistic) belief in how they can craft the user experience of their product. However, UX depends not only on how something is designed, but also other aspects. In this article, I will try to clarify why UX cannot be designed.
I recently visited the elegant website of a design agency. The website looked great, and the agency has been showcased several times. I am sure it delivers high-quality products. But when it presents its UX work, the agency talks about UX as if it were equal to information architecture (IA): site maps, wireframes and all that. This may not be fundamentally wrong, but it narrows UX to something less than what it really is.
Lean UX: Getting Out Of The Deliverables Business
User experience design for the Web (and its siblings, interaction design, UI design, et al) has traditionally been a deliverables-based practice. Wireframes, site maps, flow diagrams, content inventories, taxonomies, mockups and the ever-sacred specifications document (aka “The Spec”) helped define the practice in its infancy. These deliverables crystallized the value that the UX discipline brought to an organization.
Over time, though, this deliverables-heavy process has put UX designers in the deliverables business — measured and compensated for the depth and breadth of their deliverables instead of the quality and success of the experiences they design. Designers have become documentation subject matter experts, known for the quality of the documents they create instead of the end-state experiences being designed and developed.
A Design Is Only As Deep As It Is Usable
There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. “It’s what’s inside that counts” and “Beauty is only skin deep” are a few simple examples. Because the Web design industry is now flooded with a lot of raw talent, and because virtually anyone can create a “beautiful” website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.
In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not superficial, but rather improves and enhances the user experience.
Fundamental Guidelines Of E-Commerce Checkout Design
Here is the harsh reality of e-commerce websites: according to recent e-commerce studies, at least 59.8% of potential customers abandon their shopping cart (MarketingSherpa puts it at 59.8%, SeeWhy at 83% and MarketLive at 62.14%). The main question is why do customers abandon their shopping cart so often? Is there some fundamental mistake that designers of e-commerce websites do very often? Are there any common guidelines or rules of thumbs that make it more difficult for our users to purchase products? And is there some meaningful way to improve the conversion rates for our products?
Well, that’s exactly what we wanted to find out. In 2010, we recruited a batch of Web users and conducted a usability study, focusing only on the checkout user experience, from “Cart” to “Completed order.” The study was conducted using the “think aloud” protocol and was documented by recording everything that happened on the computer screen. The behavior of the test subjects was then analyzed by scrutinizing these recordings at a later date.
The Path To Advertising Nirvana
With advertising, a curious thing happens: most people want its benefits but are rarely willing to put up with its hassles. Those who run websites and applications have enough on their plates without having to worry about handling transactions, putting banners across their website or hearing requests from advertisers. Moreover, users have little to no interest in even looking at advertisements that flank a website’s content, some going so far as to block ads before they’re delivered. So, what’s a website owner to do?
Advertising hasn’t always been this way. Some people even enjoy them. Scary thought, I know, but stay with me. You know those previews shown before movies and those signs outside of gas stations announcing fuel prices? Those are rarely seen as advertisements at all. That’s because people find them informative, helpful and engaging. Heck, some people say they watch the Superbowl for the advertisements themselves. So why are websites any different? What has changed online that people (apparently) find less acceptable than offline? Not much, really… well, not much unless you count that whole “Internet” thing.
As a general rule, when people surf the Web, they’re in control of the experience. If someone wants information about a particular topic, they might query Google or look up an article on Wikipedia. Regardless of what they do, they choose how to obtain the information they want. The traditional advertising model — shout at your audience until it listens (as Groundswell would put it) — is diametrically opposed to this.
10 Useful Usability Findings and Guidelines
Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.
A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use.
Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.
Design To Sell: 8 Useful Tips To Help Your Website Convert
As we see more and more businesses move their services online, and even more that begin their life on the Web, a greater need arises for websites that are designed and built to sell. A great-looking website may achieve the goal of shaping and delivering a strong brand, but its good looks alone aren’t enough to sell the products or services on offer. For that, you need to introduce the element of marketing.
Research shows that objects and images you see around you can prime you for certain behaviors. For example, a study on children showed that after being shown a Santa Claus cap, they were more likely to share candy with others. The cap embodied the concept of sharing and giving in their minds, and exposure to it primed them for regarding sharing more positively. The same study also exposed kids to a “Toys ‘R’ Us” logo, which had the opposite effect of the Santa Claus cap, making them less likely to share their candy.
9 Common Usability Mistakes In Web Design
By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them.
Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Why would we want a larger clickable area? Simple. Because our hand movement with the mouse isn’t very precise. A large clickable area makes it easier to hover the mouse cursor over the link. To ensure we get a large clickable area, we could either make the whole link bigger or increase the padding around the link using the CSS “padding” property.
12 Useful Techniques For Good User Interface Design
Last week, we presented 10 Useful Web Application Interface Techniques, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page.
This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. Please feel free to suggest further ideas, approaches and coding solutions in the comments below.
10 Useful Web Application Interface Techniques
More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.
In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.
Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter.
10 Useful Techniques To Improve Your User Interface Designs
Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started.
Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. This clickable area, or the space where you can click to go to that link’s destination, can be increased for greater usability. We can do this by adding padding and, in some cases, also converting the link into a block element.
Better User Experience With Storytelling – Part One
Stories have defined our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around fires. They have continued to evolve with their purpose remaining the same; To entertain, to share common experiences, to teach, and to pass on traditions.
Today we communicate a bit differently. Our information is fragmented across various mass-media channels and delivered through ever-changing technology. It has become watered down, cloned, and is churned out quickly in 140-character blurbs. We’ve lost that personal touch where we find an emotional connection that makes us care.
Using storytelling, however, we can pull these fragments together into a common thread. We can connect as real people, not just computers. In this article we’ll explore how user experience professionals and designers are using storytelling to create compelling experiences that build human connections.
Better User Experience With Storytelling, Part 2
In the first part of this Better User Experience With Storytelling series, we explored some of the basic structures and story patterns found in myths and religions. We saw how these patterns continued into modern stories such as The Matrix and Star Wars. We also explored some of the basics of bringing storytelling into the user experience process and some places to get started.
Concluding this two-part article, we hear from creative professionals who are leading the way in this relatively new world of combining the craft of storytelling with user experience. We’ll also see how storytelling can be applied to more than just interactive experiences: we find it in everything from packaging to architecture.
10 Principles Of Effective Web Design
Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has established as a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.
We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.
In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior.
Five More Principles Of Effective Web Design
Web design has significantly improved over the last years. It’s more user-friendly and more appealing today — and there is a good reason behind it: over the years we’ve found out that design with focus on usability and user experience is just more effective. Modern cut-edge design isn’t filled with loud happy talk and blinking advertisements. We’ve learnt to initiate the dialogue with visitors, involve them into discussions and gain their trust by addressing their needs and speaking with them honestly and directly.
Few weeks ago we’ve presented 10 Principles Of Effective Web Design — a comprehensive article about effective Web design and provided you with insights about how users actually think as well as with some examples of how effective designs can be achieved.
This article highlights 5 further principles, heuristics and approaches for effective Web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.
10 Usability Nightmares You Should Be Aware Of
Sometimes you just want to get the information you’re after, save it and move along. And you can’t. Usability nightmares — which are rather the daily routine than an exception — appear every now and again; usually almost every time you type your search keywords in Google. In his article “Why award-winning websites are so awful” Gerry McGovern points out that “the shiny surface wins awards, real substance wins customers” and that is absolutely true.
Nevermind what design you have, and nevermind which functionality you have to offer — if your visitors don’t understand how they can get from point A to point B they won’t use your site.
In almost every professional design (except from special design showcases such as, e.g., portfolios) you need to offer your visitors
- a clear, self-explanatory navigation,
- precise text-presentation,
- search functionality and
- visible and thought-out site structure.
And that means that you simply have to folow the basic rules of usability and common sense. You want to communicate with your visitors, don’t drive them away, right?
In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you’ll also find 8 usability check-points you should probably be aware of.
30 Usability Issues To Be Aware Of
You don’t have to agree upon everything. As a professional web developer you are the advocate of your visitors’ interests and needs; you have to protect your understanding of good user experience and make sure the visitors will find their way through (possibly) complex site architecture. And this means that you need to be able to protect your position and communicate your ideas effectively — in discussions with your clients and colleagues. In fact, it’s your job to compromise wrong ideas and misleading concepts instead of following them blindly.
In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. But even if you know most of them it’s important to know how to name these concepts and how to refer to them once they appear in the conversation. Furthermore, it’s always useful to have some precise terms ready to hand once you might need them as an argument in your discussions.
Eye-Tracking: Source.
In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it’s time to dive in.
Related Posts
You might be interested in the following Best of selections as well:
We love high-quality content and we care about little details. We believe that good content and design are crafts worth sharpening. Located in the lovely city of Freiburg, Germany. Mostly Vitaly (vf), Iris (il), Stephan (sp) and Sven (sl).
-
1
Hello,
One usability topic I have found little information on has been about FAQ page design. For the most part, FAQ pages are the most unusable pages of a website. They seem to be just data dumps for hundreds or reactions to customer service calls. Yet, they are supposed to be the place where users go for help. A place where a user can turn to get answers before they are forced to either call a support phone number or just leave the site.
I came across a technique on a site that was very cool and made the FAQ page extremely usable. The page (http://www.bookbaby.com/Help/FAQ) has an instant search text box that will filter the question/answers groups by what keyword(s) you type. So if you type in something like “fees”, you only get faqs relevant to that topic. The matched strings are highlighted and makes searching for what you are looking for a thing of the past. Also, if the keyword you enter is in the category, all faqs for that category are displayed. I just wanted to share this in hope that perhaps you write an article on FAQ Usability, since there is almost nothing out on the web right now.
Thanks, Kris.
Leave a Comment
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
rkjayam
August 30th, 2011 3:50 amGreat article! I’m glad to see most of the UX related stuffs are covered here.
These kind of posts will definitely help a lot to UX designers. Thank you Smashing.
Kris Jackson
September 30th, 2011 9:59 amHello,
One usability topic I have found little information on has been about FAQ page design. For the most part, FAQ pages are the most unusable pages of a website. They seem to be just data dumps for hundreds or reactions to customer service calls. Yet, they are supposed to be the place where users go for help. A place where a user can turn to get answers before they are forced to either call a support phone number or just leave the site.
I came across a technique on a site that was very cool and made the FAQ page extremely usable. The page (http://www.bookbaby.com/Help/FAQ) has an instant search text box that will filter the question/answers groups by what keyword(s) you type. So if you type in something like “fees”, you only get faqs relevant to that topic. The matched strings are highlighted and makes searching for what you are looking for a thing of the past. Also, if the keyword you enter is in the category, all faqs for that category are displayed. I just wanted to share this in hope that perhaps you write an article on FAQ Usability, since there is almost nothing out on the web right now.
Thanks, Kris.