Original text: medium.com/@kollinz/mi…
If you’re an experienced designer, you’ll probably agree that in the realm of UI design, being inspired by others is not the same thing as stealing ideas, Instead, work together on what is best practice, use Design Patterns, follow Design guidelines, and use Patterns to make sure your users are familiar with how to operate the user interface you Design.
Some say that adhering to design principles and following the footsteps of others kills creativity, and that in the end, all apps look the same. From a UX perspective, I see a different problem. When you begin to import some design patterns, may make you think Google/Facebook/sets/other App is right, you like their design goal is your goal, you have never been questioned. Here are some of the best design patterns you might think are not as good as you might think.
I’m guessing there have been at least half a million articles discussing Hamburger Menu, most of them written by designers and debated over it. If you haven’t read any of them, read one or two of them, but in short, the problem isn’t the burger menu icon itself, it’s the design that hides the navigational behavior behind the icon.
For designers, the burger menu solution is both tempting and convenient: you don’t have to worry about screen size anymore, just pack the entire browsing behavior into a scrolling, pre-hidden menu.
However, experiments have shown that displaying options directly leads to increased user interaction, user satisfaction, and revenue. As a result, all of the big players in the App market are now moving from burger menu design to more directly visible features.
If your App’s navigation behavior is complex, hiding the navigation will not make your design mobile-friendly. Instead, pick the most important features and display them.
Because of screen size limitations, many people use graphics instead of text to save space without thinking. Using images in a screen uses less space, doesn’t require a multi-lingual translation, and people are used to graphics, right? In addition, every other App does the same thing.
With this assumption in mind, many App designers hide a lot of functionality behind ICONS that are really hard to understand. For example, when you’re on Instagram, is there a way to see that you can actually use this icon to send messages to other users?
Or, if you’ve never used Google Translate, what do you think happens when you press this button?
It is a common mistake to assume that users are familiar with these abstract symbols, or to assume that they will take the time to explore and understand the functions of these abstract symbols.
If you create a graphic that users don’t understand and add a floating text, you have a real problem with your design. Even if you are Foursquare, then users have to learn the feature, which is also a problem.
That doesn’t mean you shouldn’t use ICONS. After all, there are plenty of ICONS that users already clearly understand. Most of these ICONS represent a variety of common functions, including search, play movies, email, Settings… And so on. (The user may not be sure what the ICONS do, for example, so he doesn’t know exactly what happens when he presses the icon.)
When designing complex and abstract features, proper text should be used. In such cases, ICONS can still be useful, reinforcing the user’s recognition of these features in the menu and presenting your App’s unique style.
Diagrams can effectively represent many basic functions, but when features are complex, text is more useful. (Also, when you use diagrams, be sure to do usability testing.)
After Apple introduced the iPhone in 2007, the mainstream began to focus on multi-touch, and users learned to use gestures such as multi-finger zooming and scrolling in addition to the single-point screen.
Therefore, gesture operation became popular among designers, and many apps also made gesture operation design experiments.
Like hiding navigation or replacing text with ICONS, adding gestures to your design is tempting because it saves space. (There’s no need to place a delete button on the screen, just swipe left or right.)
First of all, we know that gestures are hidden behaviors. People need to make extra effort to remember. Take the burger menu example: the more features are hidden, the fewer people will use them.
In addition, gesture manipulation has the same problem as graphic abuse: some gestures are more commonly used, such as single pointing, zooming, and scrolling, while others are more complex and require users to learn additional gestures from different apps.
Unfortunately, the vast majority of gestures are not uniform across apps — this is still a fairly new area in touch interface design. Even single finger strokes have different behaviors in different email apps.
Even when you shake your phone, you behave differently. Shaking your phone on iOS means undoing it, but in Google Maps, it means sending feedback.
Don’t forget that gestures are hidden actions that take a lot of effort to remember. If you’re Tinder, you probably have a way to educate the world about what swiping right means, but only if this gesture is at the heart of your App’s design concept.
Onboarding is a very popular UX topic these days, which represents the user’s first contact with your App. In many cases, a first use description usually means an overlay on your original interface explaining the purpose of each function.
Why is this a bad solution? Because most users will skip these introductory prompts, they just want to start using your App right away. And even if they do notice the instructions, they forget everything as soon as the overlay is turned off (especially if the screen is chock-full of information). Plus, adding tags doesn’t make your interface any more intuitive. Remember:
Uis are like jokes: jokes that need explaining aren’t good jokes, and UIs that need explaining aren’t good UIs.
Startup Vitamins
First use instructions can be made more useful to users in a number of different ways. The first screen you see when you open Slack, for example, is context-building: they do a brief self-introduction that focuses on the benefits of using the App, instead of a screen that explains its features.
A more interactive, user-friendly approach is to use progressive first-use instructions. Duolingo doesn’t explain how the App works, but users are immediately given a short language test in their chosen language (they don’t even have to sign up for an account), because the best way for people to learn is by doing. Moreover, directly revealing the value of this App is also a more effective way to deepen the user’s impression.
Remember in Mailbox, the horizontal gesture is different from Apple Mail? They also used progressive instructions: users would have to go through the gestures before actually using the App.
Before you start designing arrows on translucent overlay screens, stop and think about how users should experience your App for the first time. We need to focus on the situation. In most cases, there must be a better way to welcome your new users than overwriting them.
Less experienced designers tend to ignore empty data screens, but empty data screens can be an important part of creating an overall App experience.
Some designers use error messages or the status of empty data as a blank canvas for creativity.
Let’s take a look at Google album’s empty profile screen:
At first glance, it looks good, right? Good layout, captions, and beautiful pictures.
We took a second look and noticed something strange:
- Why is there such a prominent search button at the bottom when there is no photo collection? Why would you want to search through nothing?
- The second screen element that stands out is a large, apparently unpressed image at the top. (Some of you might want to check it out, though)
- It’s bad enough that I should check the + sign at the top of the screen, so why not just put the “Join” button inside the prompt? This text is as ridiculous as “Please press the continue button to continue.”
Such an empty data screen obviously cannot let users understand the current situation:
- What is a collection? Why is collecting useful?
- Why don’t I collect anything?
- What am I supposed to do about it? (If I have to do something)
When it comes to creativity, less is more. The following example of an empty data screen does a good job of this. (Let’s ignore the “please press the button below” for a moment.)
Don’t forget that empty profile screens (or website 404 pages) aren’t just a place for visual beauty or brand personality. Empty data screens also play an important role in App usability. Please make them more intuitive.
Make no mistake: design patterns and best practices are still your best friend. But remember that every App’s audience is different, and a design might work in one App, but it might fail in yours. No design can be one-size-fits-all. And you never really know why an App was designed that way before.
You have to do your own thinking, you have to do your own design, you have to do your own research.
Measure, test, examine. Also, don’t be afraid to violate established norms when you find that your ideas make sense.