We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.
Category: UX Design
This category features quality articles on usability, information architecture, interaction design and other user experience (UX) related topics – for digital (Web, mobile, applications, software) and physical products. Through these articles, experts and professionals share with you their valuable ideas, practical tips, useful guidelines, recommended best practices and great case studies. Curated by Chui Chui Tan. Subscribe to the RSS-Feed.
Editor's Note: This article expresses the author's personal opinion and covers experimental UX techniques which aren't considered to be best practice.
Masking passwords is an old practice that’s commonly implemented in sign-up and log-in forms. It’s used to prevent over-the-shoulder snoopers from catching the user’s password. While masking passwords is a good security practice, there’s a chance it could jeopardize the user experience of your sign-up form. When users sign up on a website, they expect a no-hassle, worry-free form to fill out. But masking the password could prevent that.
Log-in forms are used more often than sign-up forms. Users only need to sign up once to create an account, whereas they will need to log in multiple times to access their account. Because log-in forms are used so frequently, there’s a strong chance that users will end up typing their password in front of other people.
When Albert Einstein was a professor at Princeton University in the 1940s, there came the time for the final exam of his physics class. His assistants passed the exam forms to the hundreds of students, and the hall was dead silent. One of the assistants suddenly noticed something was wrong.
She approached Einstein and told him that a mistake had been made with the exam form and that the questions were the same as those in the previous year’s exam. Einstein glanced over the exam form and said that it was OK. He explained that physics had changed so much in the last year that the answers to the questions were now different.
Unless you’re developing completely new products at a startup, you likely work in an organization that has accumulated years of legacy design and development in its products. Even if the product you’re working on is brand spanking new, your organization will eventually need to figure out how to unify the whole product experience, either by bringing the old products up to par with the new or by bringing your new efforts in line with existing ones. A fragmented product portfolio sometimes leads to an overall broken user experience.
Understanding an organization and its users and designing the right interaction and visual system take exceptional effort. You also need to communicate that system to teams that have already produced work that doesn’t align with it. This isn’t easy work. In this article, we’ll introduce you to a strategy for fixing the broken experience that starts with surface improvements, goes progressively deeper into structural issues and ends with a big organizational shift.
In the first television advertisement for the iPad, the narrator intoned, “It’s crazy powerful. It’s magical. You already know how to use it.” This was an astonishing claim. Here was a new, market-defining, revolutionary device, unlike anything we had seen before, and we already knew how to use it. And yet, for the most part, the claim was true.
How does a company like Apple make such great new things that people already know how to use? One answer lies in the ability of Apple designers to draw upon patterns that people are familiar with.
Today we are happy to release two printable UX sketching and wireframing templates, designed by Pixle for Smashing Magazine’s readers. This article presents Outline, a set of sketching and wireframing papers for mobile platforms and Tapsize, a set of templates for checking optimal tap areas without a mobile device.
Outline is a set of 28 printable sketching and wireframing papers (in PDF) for seven mobile platforms: Android, BlackBerry, iOS (iPad and iPhone), Meego, Symbian, webOS, Windows Phone 7. The set consists of a few combinations, such as actual size, 10 devices fit to a page, and landscape layout.
My relationship with the Internet oscillates between waves of euphoria and waves of angst. Some things make me extraordinarily happy: like a client who loves usability testing so much when they first experience it that they can’t sleep for days; or connecting with someone whose writing I’ve admired for many years.
But other things make me want to close my computer forever and go live on a farm somewhere: like people who take entire articles and present them as their own work, with tiny source links at the bottom of the page; or endless arguments and name-calling that ignore even the most basic human dignity.
As we’ve seen, audio is used as a feedback mechanism when users interact with many of their everyday devices, such as mobile phones, cars, toys and robots. There are many subtleties to designing with audio in order to create useful, non-intrusive experiences. Here, we’ll explore some guidelines and principles to consider when designing with audio.
While I won’t cover this here, audio is a powerful tool for designing experiences for accessibility, and many of the guidelines discussed here apply. Both Android phones and iPhones already have accessibility options that enable richer experiences with gestural and audio input and audio output.
Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I recently wondered whether sticky menus makes websites quicker to navigate, and I conducted a usability study to find the answer.
Let’s look at the results of the study, a few implementation techniques and some related challenges. Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll.
A year ago we published an article on 11 fundamental guidelines for e-commerce checkout design here at Smashing Magazine. The guidelines presented were based on the 63 findings of a larger E-Commerce Checkout Usability research study we conducted in 2011 focusing strictly on the checkout user experience, from “cart” to “completed order".
This year we've taken a look at the state of e-commerce checkouts by documenting and benchmarking the checkout processes of the top 100 grossing e-commerce websites based on the findings from the original research study. This has lead to a massive checkout database with 508 checkout steps reviewed, 975 screenshots, and 3,000+ examples of adherences and violations of the checkout usability guidelines.