Editor’s note: Today’s highly readable post takes a close look at some of the most overused UI designs of the day: burger menus, gestures, guide pages, blank pages, etc., and gives you the right posture for using them. It’s dry, it’s fun, it’s fun. Take it!
TerryFan: Innovation is rare, and mutual learning is rare. Let’s take a look at some of the designs that have been abused and sometimes not that good.
If you are an experienced designer, you may often take inspiration from other interfaces, which is not the same as copying. This is the best case study that can apply common design patterns, conform to mainstream design specifications, and use familiar UI components to make the interface easier to use.
One could argue that relying too much on design specifications and copying completely kills creativity, and eventually, all applications grow up to be the same. From an experience standpoint, however, I see another problem. Getting used to reusing common UI components can lead you to fall into the trap of thinking that your favorite apps like Google, Facebook, Instagram, etc., are always right, that their design intentions are the same as yours, and you completely forget to look at their designs with skepticism. Here are some UI components that are considered (or were considered) to be very well designed, but they may not be that good.
First, “deep hidden” navigation
There have been countless articles about burger menus in the past, and most designers have resisted using them, but the bottom line is not that the ICONS are to blame, but that navigation is hidden beneath them.
This is especially handy for designers, who don’t have to worry about the limited screen size, just arrange all your menu items in order and put them into this scrollable floating layer, hidden inside the burger menu.
However, the use of visual menu items has been proven to increase user engagement, satisfaction and even business benefits. That’s why most apps have moved from burger menus to visible menus with navigation at the bottom.
Review images
▽ Evolution of Youtube menu Design Luke
Summary:
If your menus are large and complex, hiding them won’t improve friendliness; reorganizing and prioritizing is the way to go.
Second, the “Everywhere” icon
Again, with limited screen space, it seems a no-brainer to use ICONS instead of text whenever possible to save space. Graphics obviously take up less space, they ignore multilingualism, and users get used to it, right? Almost all apps do this.
Review images
With this in mind, designers often choose to hide features somewhere, even under ICONS that are particularly unrecognizable. Like Instagram, can you imagine that you can click on this icon to send a message directly?
Review images
Also, if you’ve never used Google Translate, what do you think will happen if you click on the doohickey icon?
It is a common design mistake to assume that users are familiar with abstractions or that they will spend extra time exploring and learning what ICONS can do.
Review images
△ Magical menu bar in Bloom. FM
If you think that giving ICONS a pop-up annotation in the interface will improve usability, think again. Even in Foursquare, your users will learn and remember, but that doesn’t mean it’s the right thing to do.
Review images
△ Swarm app icon instructions
But that doesn’t mean you can’t use ICONS. There are plenty of ICONS that have become popular with users, like those that represent common functions such as search, video playback, email, Settings, and so on. (Users can still be uncertain, for example, about what happens when they click on a heart-shaped icon.)
Review images
▷ These ICONS are familiar to users and can be widely used
For complex features, there should always be appropriate text. ICONS are still useful in this case, because graphics improve menu discoverability, create a suitable touch area in the interface, and add personality to the application.
Review images
△ Menu of an image editing tool
Summary:
Basic features can be replaced with ICONS, and complex features need text (if you must use ICONS, do usability testing).
Gesture-based menus
When Apple introduced the iPhone in 2007, multi-touch technology became mainstream, and users gradually realized that they could zoom and swipe instead of just clicking.
Gestures are becoming increasingly popular in design, and many applications are purely gesture-driven.
Review images
△ Clear gesture operation
Gestures can sometimes help designers save screen space, as can hiding menu items and using ICONS instead of text. (” There should be a delete button here, you can swipe left to bring up, or swipe right, and we can decide.” )
The first thing you need to know about gestures is that they are always hidden and need to be remembered by the user. It’s like the burger menu: if you hide an option, fewer people will use it.
Also, gestures have the same problem as ICONS: there are gestures that users are familiar with, such as tapping, zooming, and scrolling, and there are gestures that users need to discover and learn in different applications.
Unfortunately, most gestures aren’t standardized and can be used differently in different applications — this is still a fairly new area of touch interface design. Even something as simple as swiping on an email can vary widely between different email applications.
Review images
In Apple Mail, right click on the message marked as read.
Review images
The same gesture in the Mailbox says “Save email”
Also, shake may have different functions — undo on iOS and send feedback on Google Maps. (Translator’s note: I really should let the author try my Chinese apps…)
Summary:
Don’t forget that gestures are also hidden actions that require the user to make an effort to remember. If you were on Tinder, you could probably teach the world what happens when you swipe right — but only if gestures are an important part of your concept.
Four, a open application is the boot
Lead-in pages, a hot TOPIC in UX, refer to users’ first encounters with applications. In most cases, a guide page is simply a guide to the user that explains the interface:
Review images
▽ Guidance of Dcovery application
Why is this a bad design? Because many users skip this introduction, they just want to get started right away. Even if they do notice your guidance, they’ll quickly forget about it after they turn it off. (Especially when the interface is chock-full of information.) And last but not least: adding guidance to the interface doesn’t necessarily make it easier for the user. Remember: user interfaces are like telling jokes, and if you need to explain the punchline, you get it.
Review images
There are many other design possibilities for the bootstrap process that would be more useful. Slack, for example, creates context for users through first-screen interactions. Introduce yourself briefly and focus on the benefits to the user rather than the interface and features.
Review images
△ Introduction to Slake
A more effective approach is to increase interaction with the user and use step-by-step guidance. Duolingo doesn’t explain the app: it encourages users to join in and take a simple quiz (even if they’re not logged in), because practice is the best way to learn. And it’s a much more effective way to demonstrate the benefits of an app.
Review images
Duolingo interactive guide
Remember the gesture difference between Mailbox and Apple Mail? Let’s take a look at how Mailbox takes users on the road step by step: Users see the guided flow and try out all the gestures before they actually use the app.
Review images
Delta Mailbox guide
Summary:
Before designing the translucent mask + boot, stop and think about what the user will encounter the first time they use it. Think about the usage scenarios. In most cases, there’s always a better way to welcome your users.
5. A blank page that is creative but not useful
Blank pages are often overlooked by inexperienced designers. However, they play an important role in the overall user experience.
Sometimes designers see error messages or blank space as an empty canvas and think it’s a great opportunity to do something creative. Take the Google Photos blank page as an example:
Review images
△ Blank status page for Google Photos
At first glance, it seems very well designed, right? The hierarchy is clear and compliant, and the graphics are beautifully designed
But look again, and you’ll see a lot of oddities:
Why is there a search button on a blank page? Do you want to search for content that has no content?
Second, the icon, the most visible element in the interface, is obviously unclickable (yet many users will try to click on it).
It says I should go to the top and find the +, which is super weird. Why can’t this prompt have an add button? It’s as silly as saying “press continue and button Continue”.
The design of the blank status page above clearly does not help the user understand the situation:
What is a highlight? What’s the use? Why don’t I have any? What can I do (if I need to do anything)?
When it comes to creativity, less is more. The following blank page is perfectly designed (let’s ignore the phrase “now click the button below” for a moment)
Review images
△ Blank page design of Lootsy
Summary:
Don’t forget that blank page design (similar to 404 pages on the Web) is not just about visual design and branding, but usability. Design well.
Question everything
Don’t get me wrong: Design components and best practices are still your best design partner. But keep in mind that apps are different from apps, and users are different from users. A design that works well in someone else’s application may not work well in yours. Design is not all size underwear. Also, you don’t know the underlying reason why their app is designed the way it is.
So please think independently, design independently, and do your own research.
Estimate, test, validate — and don’t be afraid to break norms if your design is more feasible.
Translator wechat: Open book has translated, welcome to follow yo
On medium Jianshu