A rant against pretty designs
“Guard against that vanity which courts a compliment, or is fed by it.” –Chalmers
Surfing some
Yes, I know that some of these design showcasing sites are not meant to be necessarily for real-world products, but then I still say they need to reflect a thoughtful approach to design, primarily by asking the main question “Who is this for?”, “How will people use my product” and “Is it actually usable?”.
Superficial app designs that follow the latest fads and blatantly ignore basic usability conventions, UX best practices, and fundamental principles of interaction design would most likely fail in the real world! Luckily, they usually don’t go beyond the generally ridiculous, self-parading fantasyland on Dribbble and Behance.
Unfortunately, these “concept designs,” a single screen in an imaginary app, only serve to perpetuate designers being
I’m talking about UX.
If people in the real world tried to actually use these apps, I guarantee that more than 50% would have a hard time doing so and would subsequently give up in confusion.
Who doesn’t need yet another weather app? There are no clues to the user how to use it. (Jona Dinges on Dribbble)
Digital product designers worth their salt and wanting to elevate their game know it’s essential to leave their ego at the door and to steer clear of unnecessary flourishes, self-serving public parading, and pointless audience seduction. #UXFail!
No amount of fancy GIF animation will fix serious user experience issues with a badly designed app, such as hidden gestural interaction, meaningless icons, or low-contrast text.
(Travel app by Arunraj on Dribbble)
Abandoning usability for flattery
Great user experiences are a must if digital product design is to succeed in the marketplace. To be sure, aesthetics—great looking and feeling designs are important, but they’re only the final touch that complements a usable product that is also a pleasure to use. Striving for aesthetic perfection alone while abandoning usability is ultimately a loser’s game.
As Don Norman—the oft-dubbed “guru of workable technology”—said, “Great designers produce pleasurable experiences.”
Pleasurable experiences are those which create the least amount of friction while delivering fluid, seamless interaction and anticipatory experiences (i.e., having things appear as if by magic. The right things, in the right moment, in the right way).
The way to get there is definitely not by ignoring established best practices and design conventions and simply focusing on the facade. It’s evident, Dribbble strutters: 1) You don’t understand your user, and 2) You’re copying fads.
Ignore conventions at your peril
Design conventions, whether in digital product design or industrial design—for
It’s foolhardy and somewhat arrogant to ignore or violate design conventions. They are fundamental and serve as a foundation from which we can then innovate. It’s about what’s expected. Without them, you risk annoying the hell out of people. Imagine if every bicycle, every door handle—or the pedals and the steering wheel in every car—worked differently, all purely in the name of “innovation.”
Two words: total mayhem.
A user interface is
Another app design from Dribbble (Aaron 1991 on Dribbble)
Mind the heuristics
Well-designed apps that strive to be usable products follow well-established design conventions, basic usability guidelines, and principles of interaction design (among other things) and pass
For app designs to work well in the real world, they should observe the ten usability heuristics for user interface design as defined by the Nielsen Norman Group, a leading voice in the user experience field for twenty years. These are:
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users
10. Availability of help (this may be “quick tours” or walkthroughs)
Read about these ten general principles for interaction design in more detail here.
Infatuation in the name of innovation
Oftentimes app concept screens are designed by designers looking for lots of likes on portfolio showcasing sites with the aim of pushing their way up to the daily hot shots section on Dribbble. A couple of fancy, minimalist UI designs are not the product. It’s akin to designing a car door without offering any idea of what the rest of the car looks like, or how it works in a real-world scenario.
A trading app design from Dribbble. It sports not one, but two menus replete with mystery icons and low-contrast text (Iftikhar Shaikh on Dribbble)
Don’t get me wrong! Design innovation is necessary. It’s healthy and critical for any discipline or creative domain to flourish. But it should not happen at the expense of good UX. Let’s make a distinction here and call it design experimentation. Under the
Usability 101
Usability, a bedrock of great user experiences, is a quality attribute that assesses how easy user interfaces are to use. The word usability also refers to the practices for improving ease-of-use during the design process.
Whether an app is useful is defined in terms of utility as well as usability. Utility provides users the features they need; usability is how easy and pleasant those features are to use. Therefore, fancy app designs that ignore these basic tenets of usability end up being useless by definition.
It’s understandable that designers are looking for innovative and interesting ways to design their app’s navigation. But there’s a fine line between the unexpected and unusable. Three things to consider in navigation design are consistency, user expectations, and contextual clues. It doesn’t matter how fancy your eCommerce—for example—app concept design is. If users can’t find the product, they can’t buy it.
Useful design
As Steve Jobs said, “It’s not just what it looks like and feels like.
He was talking about useful design.
If a designer messes too much with a person’s mental model of how things should work, the app will fail. If there is a huge mismatch between users’ mental model and the conceptual model, the app is toast. Mental models, as the name implies, are conceptual models in people’s minds that represent their understanding of how things work.
One of the most basic principles of interaction design is that
As much as you as a designer may be infatuated with your product, users care about usefulness much more. They don’t want to learn your app, and they don’t want to go on a journey of discovery or experimentation to see what works by trying to swipe things in the UI. As Steve Krug, a usability consultant for more than twenty
How does one use this app? (Astrology app from
Brandon Termini on Dribbble)
To be sure, as Dieter Rams, a legendary German designer at Braun in the 70s and an inspiration for all things Apple said:
“The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.”
In other words the design has to work on all levels.
A Braun radio designed by Dieter Rams. True functional minimalism.
Here are the ten commandments of good design according to Dieter Rams:
Let’s remember that visual design—the aesthetic—is just one aspect of UX design. It’s the final layer that should elevate everything that took place before it in the UX design process, i.e., defining the business objectives, identifying the core user (personas), user research, sketches, ideation, wireframing, mockups, prototypes, and usability testing. It’s the final veneer that lifts the overall user experience in alignment with designing for emotions.
Reduce mental effort
Most people would have no idea what the unlabeled icons mean, and the lack of contrast in the header would render the navigation invisible to most users. (eCommerce app Fancy)
With bad design in action, what
What does “ON and OFF” mean? What do the icons do? This design is asking users to interpret and learn too much.
(Stan Yakusevich on Behance)
Designers need to provide clear
Make it obvious where users should tap, if they can swipe, and make the targets large enough to be easily tapped. Prevent errors. Don’t make people guess what something means. Don’t be lazy. Avoid hamburger and kebab menus (the three dots) as they hide navigation and make content less discoverable. In particular, avoid hamburgers that don’t even look like hamburger menus! Yes, space is limited, but it’s been proven that the combination of tabs (top bottom) and hamburger menus perform vastly better than just a single hamburger.
Hamburger-like menu at the top. Unlabeled icons that need interpretation. (Accounting app from
Even Uber is a big UX offender in an otherwise well-designed app. Can you see that hamburger menu? Most people wouldn’t either.
Turo is another big offender with their unlabeled icons in the tab bar. There is zero clue as to their meaning.
Most people in the real world would have genuine difficulty trying to figure out how to use this app. (Home budgeting app by
It’s not a perfect world
If your product found its way into users’ hands, would they be able to find things and actually use it? They may not have access to a super-duper setup like the one you used to design these screens. Think again about usability and accessibility (visual disability, physical disability, cognitive disability). According to census data, in the United
Is your design ‘finger-friendly’ or literally a pain to use? How much do people have to strain to reach different parts of the app screen? Are you considering user task flows, putting actionable items under people’s fingertips instead of making them jump around the four corners of the screen? Is the design really touch-compliant? Have you accounted for the obscured area under the hand that holds the mobile?
As Luke Wroblewski points out in Designing for Large Screen Smartphones, have you considered how your designs would perform on larger screens?
Larger mobile screens make certain UI elements hard to reach
Is your design really following Apple’s iPhone Human Interface Guidelines recommendation of a minimum target size of 44 pixels wide 44 pixels tall? Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px.
Don’t fall in love with
Almost indecipherable due to the lack of contrast between elements. Icons in three locations, some unlabeled. (uxiBandit on Dribbble)
Due to low contrast, the navigation is almost impossible to read. (Speed tracker app by Rono on Dribbble)
Better UX
Spotify’s app design is clean and well-labeled. Its main functions are quickly understood. (But there is that pesky kebab menu!)
Designers at Starbucks don’t get lazy. Look, no hamburger menu! The designers even did away with icons and opted for simple text labels instead.
Even if a designer gets creative with icons, if clearly
We need mo’ better design
So, what is good design? That discussion could fill a book but, generally speaking, “good design” is when it all comes together for the user of that design.
That means for a design to be “good” and useful to users, it has to take into account multiple levels and factors on which it must deliver to be successful.
Design trends come and go. The average design trend only sticks around for a year or two; good usability, the foundation of UX design, is here to stay.
Products that have been designed according to the seven factors of great UX will outlast any design trend, guaranteed. Designers who pay attention—to great usability, UX best practices, interaction design conventions, and the factors that influence user experience—will make a greater impact than those who don’t. At the end of the day, they will be rewarded, and their digital products more widely accepted and successful in the marketplace.
The Seven Factors That Influence User Experience, from
The Interaction Design Foundation
If, as a designer, you want to become better at UX—to create useful mobile and desktop apps, not just pretty ones—invest some time learning at least the basics of UX. Start by following UX blogs, subscribe to newsletters and online publications such as the
Read user studies conducted with living, breathing participants—real people. As they say, the numbers don’t lie; everything else is hypothesis and assumption.
Follow UX thought leaders on Twitter. Read UX articles and white papers, the créme de la créme being The Nielsen Norman Group and Adaptive Path.
Medium is one of my
Read some of the foundational, classic books that every UXer I know has on their bookshelf, and treat them like scripture.
1. Don Norman’s seminal book on design The Design of Everyday Things
2. Don Norman’s Emotional Design: Why We Love (or Hate) Everyday Things
3. Steve Krug’s Don’t Make Me Think
4. Jeff Gothelf’s Lean UX: Applying Lean Principles to Improve User Experience
5. Jakob Nielsen’s Usability Engineering
6. Susan Weinschenk’s 100 Things Every Designer Needs to Know about People
Read informative online resources about usability guidelines, principles of interaction design, and UX best practices: studies, whitepapers, articles, etc.
1. First Principles of Interaction Design
2. Full set of 2,397 usability guidelines (across multiple reports) from the NNGroup
3. 10 Usability Heuristics for User Interface Design from the NNGroup
4. Baymard Institute Articles: Baymard studies
5. UX Mastery Articles: All things UX
And finally, add these five UX podcasts to your iTunes library:
1. UX Pod: Discussions with UX designers and about usability in general
2. Inside Intercom: Interviews with top designers at leading companies
3. UX Podcast for people passionate about balancing business, technology, and users
4. UIE Podcast: Insights from User Interface Engineering on the world of design
5. True North: Uncovering design stories highlighting design testing and research
This article is brought to you by