New friends click on the top of the blue word “PMIdeas” for quick attention
If you are an experienced designer, you might agree with such a view: inspired by other works/design guidelines for design or imitate other design does not necessarily is a kind of plagiarism, on the contrary, it is one of the best learning process, is the mode of study design, study on the principles of design, is a kind of design of the user interface that user can understand.
Some might argue that relying too much on design guidelines or following other people’s design patterns/ideas will kill the designer’s own creativity, and one day, all programs may look the same. However, from a user experience perspective, I realized another serious problem: Following the design patterns/ideas of the so-called best design cases may lead you to believe that a design like Google/ Facebook/Instagram (most likely your favorite app) is always right and that you will see their goals as your goals without questioning them. Here are some patterns that are thought to be (or were) the best representations of design, but they may not actually be as good as you think at first glance.
1 Hide Navigation
At least half a million articles have been written about the burger menu, most of them by designers who disagreed with the design. If you haven’t, take a look at these two: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/, http://jamesarcher.me/the-hamburger-menu/), It’s not about the icon itself, it’s about how to evaluate the hidden navigation behind the icon.
A sliding sidebar is flexible and easy to use
This approach is attractive and convenient for designers: because you don’t have to worry about taking up too much screen real estate, you just put all your navigation in a side slider that’s hidden by default.
However, experiments have shown that displaying menu-bar options in a more visible way increases user engagement and satisfaction, and even revenue. That’s why YouTube has ditched the original burger menu bar and instead made the all-important navigation options visible all the time.
If your navigation structure is complex, hiding processing won’t make the experience friendly.
2 There are ICONS everywhere
Given the limited screen size, replacing all text labels with ICONS seems like a no-brainer at first glance. Hieroglyphs take up less space, don’t have to be translated into limited texts, and people tend to be more familiar, don’t they? It seems that all applications today think and do the same.
However, this is just an assumption, and it is this assumption that sometimes leads designers to create impenetrable ICONS pointing to specific features. For example, in Instagram, can you imagine that the icon in the upper right corner is for sending messages?
Or, assuming you’ve never used Google Translate, what do you think clicking on the icon in the lower right corner triggers?
Whether it’s assuming that your users are familiar with abstract pictographs, or assuming that they will take the time to understand them, it’s often not true.
Bloom. FM mystery TAB bar
If you’ve ever designed an icon and thought adding a pop-up TAB would make it more visually usable, you’re wrong. Even if you’re designing a square, the user still needs to know about it.
Swarm icon prompt
However, that doesn’t mean you shouldn’t use ICONS. In fact, there are some ICONS that users are already familiar with, and most of these ICONS represent functions such as search, video playback, email, Settings, etc. (Users still aren’t sure what happens when they click on a heart icon, though.)
Some ICONS are familiar to most users and can be used universally
In any case, complex and abstract functions should generally be marked with appropriate text tags. ICONS are still useful in these cases, as they enhance the recognition and touch of menu options.
Pixelmatr navigation
Gesture based on navigation structure
When Apple released the iPhone in 2007, multi-touch technology caught everyone’s attention (and quickly went mainstream), as people realized they weren’t just tapping on an interface anymore, but zooming, meshing, and swiping.
Since then, gestures have naturally become popular with designers, and many programs using gestures to achieve functional control have been born.
Clear inside the gesture operation
Just like hiding navigation and using ICONS instead of text labels, gestures seem to be an effective way for designers trying to save screen real estate.
The first thing you need to know about gestures is that they are often hidden. People need to remember them, and the result is like a hamburger menu: if you hide some options/actions, fewer people will use them.
In addition, gestures face a similar problem to ICONS: while there are some general gestures that most people understand, including tapping, zooming, and scrolling, certain gestures in some applications still need to be discovered and learned before they can be used.
Unfortunately, the gestures that populate most apps today are not standardized — this is still a new frontier in interface design. Even actions such as swiping a message may face different results in different mailbox programs.
In Apple’s Mail program, messages swipe right to indicate an option to “mark as unread.
In the Mailbox, the same gesture represents archiving the message
Mask type instruction
Tutorial instructions, one of the hottest topics in user experience these days, are the help that an application presents to users when they first come into contact with it. Most programs respond to this concept by using a mask layer to explain the necessary elements and functions of the interface to the user.
The practice of dcovery
But why is this a bad solution? Because most users will skip your instructions. They just want to start using your program quickly. Even if they notice your instructions, they usually forget them when they exit the mask layer. (Especially if the screen is chock full of information). The last key point is that this mask-guided approach shows that the functionality of your application is not intuitive enough (intuitive design doesn’t need to be explained to the user). Keep in mind:
If you need to explain it to the user, it’s not good enough
In fact, the bootstrap process can be designed in many ways that benefit the user. Slack, for example, uses a first screen to show users what they need, a brief introduction of themselves, and a focus on telling users what they value rather than using on-screen notes to show too specific features.
A more conversational approach to introducing new users is to use step-by-step instructions. Duolingo does this by enticing users into the app with a lead, then launching a quick test in the language of their choice (users don’t even need to sign up) because learning by doing is the best way to learn. It’s also a more sophisticated way to communicate value to users.
Remember that the swipe gestures in Mailbox are different from apple’s? The step-by-step instructions go something like this: users must try each gesture before they start using the program.
Before designing instructions on a translucent mask layer, stop and think about how a new user’s first experience will look. Focus on the context. In most cases, there is a better way to welcome your users.
Creative but not intuitive empty states
Empty state is an area that most inexperienced designers often ignore, but it is also an important part of a complete user experience.
Sometimes designers see error message pages or empty state handling pages as a place to get creative. Take a look at how Google Photos handles the empty state:
At first glance, it seems to handle it well. It follows design specifications, has a good layout and a nice picture.
However, when you look again, there are some obvious oddities:
(1) Why is there a prominent search button when there is no data? How can you possibly use search in this situation?
(2) The middle image (highlighted elements) is obviously undoable (although many people will try)
(3) The text prompt says you should click the button in the upper right to create content, so why not put the create button directly after the prompt?
This empty state does not allow the user to understand the following:
(1) What is a photo album? Why are they useful?
(2) Why don’t I have any data?
(3) What can I do or should I do?
When it comes to creativity, we think that sometimes less is more. This empty state is handled very well. (Let’s ignore the “click the button below” instruction for now, which means the button below the text prompt is an obvious guide on its own.)
Null state handling of Loots
Don’t forget that empty states (similar to 404 pages on the web) should be more about usability than just visuals and branding. So make sure your design is intuitive and easy to use.
Conclusion: Keep questioning
Keep in mind that different applications and users are different, and what works for one application may not work for another. This is definitely not a one size fits all thing. Also, it’s hard to know exactly why a program is designed that way.
So be skeptical, and think for yourself, design for yourself, and research for yourself.
Weigh, experiment, validate — don’t worry about not following design guidelines if your design is more valuable.
Translation: https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570?adbid=667750768665997312#.v789aqc8d
