I’ve been reading Steve Krug’s book DON’t MAKE ME THINK. Most of the book is about usability research on the Web. It’s very short on mobile, and the chapters aren’t very thorough. So HERE I share with you my thoughts on the usability of this book relative to mobile, hoping to give you some useful inspiration for future design.

Present product design is becoming more and more to the interaction experience supreme trend, pure and beautiful UI interface design has been greatly fulfilled a company requirement for mobile terminal product designers, obtained certain result after project want to online (at least to download the user doesn’t have to delete the idea of), to meet the user’s habits, Here I have come up with three mobile design rules for good user experience and their corresponding solutions.


Rule 1: Drop the question mark rule

Making a page or screen self-evident is like having a well-lit store: it will make your product look better.

You know, most users will spend a lot less time using our product than we think, unless your product is awesome and a necessity.



People are lazy, you are in the design of a lot of interface or interaction, the head should be the first image is your own user is very lazy, they don’t want to think, unwilling to use the App again on such a small thing to study spend more energy, so you as a designer, they are trying to avoid it, trying to avoid let user think.

This is something that many of us know, these very simple user experience concerns are well understood, but how do you do it? Here are two solutions, if you can satisfy both of them, you can “get rid of the question mark” and greatly improve the usability of your product.


① By changing the appearance of interface elements

So how can we better help users scan? To quote the author, “If you make every page speak for itself, users will know how to use it at a glance.”

Self-evident? The easiest way to do this is by changing the shadow of buttons, the label name, size, color or layout of interface elements, using contrasting colors, etc., so that the whole page can explain itself, so that anyone can understand the structure of the whole page and how they should operate next.



② Clearer interaction logic

Please note that the word “clear” is used here, not “less”. It is generally known that there is less interaction logic to avoid the existence of a deeper level of interaction, which makes users lose their position, and even some companies’ product design rules explicitly stipulate avoidance
Level 5 + logical interaction.

But is there any absolute correlation between user disorientation and these levels of interaction? Not necessarily! If every click and every jump can be clearly visible and clear, there will not be question marks or anxiety for users even at levels above 3. In fact, users do not have strict requirements for clicking in the App. If you’re having a hard time deciding between fewer layers of interaction and a more complex page structure versus more layers of interaction and a clearer page structure, go for the latter!

Here the author kindly gives us a reference formula for fatigue value:

3 clicks by the user without thinking = 1 click by the user without thinking

That is, four simple page interactions are approximately equal to two complex page interaction rules


Rule two: Pay attention to the gander effect

If you can achieve a high degree of clarity by breaking consistency in some way, choose simplicity over consistency.
As most people use new appliances will seriously look at the instructions, people in the use of software is also not very attention to software inside the content, what are they like you don’t (refers to the design and development of products), in the massive mobile market, users sometimes do not care about the product fully functional, Most of them will just quickly scan your product after downloading it from the AppStore, find features that might help him, and decide if your product is eligible to stay on his phone.

This is the gander effect, where first impressions are absolutely everything. The first time they use your product (or the first time they use iteration 2.0) will be quickly scanned. Where are the features they need (looking for)? How is the required piece of functionality available (found)? What’s new (under observation)? Have they solved their problems (thinking)? Is the solution efficient (result)? (Form the first and often final impression of the product)

This is a classic anchor, and it’s the first impression that makes a big difference whether a user is willing to pay for a range of services in the later stages of your product. Therefore, the simpler the 1.0 project product, the better, overtime design, speed development, seize the market. This is not necessarily true, but it is necessary to do good interaction logic, usability and product user experience unless it is absolutely necessary.

So how should the product give users a good first impression? Here are three solutions for your reference.


1) clean! Help users scan, reduce visual burden.

If you can’t make it look good when you enter your mobile product interface, at least make it clear and concise. Take advantage of the principle of intimacy, that is, related areas are grouped into modules in the interface, and divide the page into distinct areas. Check the bottom navigation bar to see if it’s clear. Get an Axure Demo before you start product development
Test the user group. How long and how many steps does it take from clicking on the launch icon to finding the feature you want? If the results are confusing, then you should consider whether you are following the rules of intimacy or whether the ICONS and text are clear.


② The visual level is far more beautiful than the interface

If you want to choose between beauty and hierarchy, designers should resolutely choose hierarchy and design an interface structure. The most important thing is to help users think, especially the home page, which is the most important, which is similar, and which is just a reminder. It has to be obvious at a glance. The more important the more prominent, the related structure should be nested. This is particularly evident in the new iOS10 design, iOS10 design in the big title, super bold font even very ugly. Weaken the UI, only highlight the content, simplify and simplify the interface, all these are for better output visual level, to make the user better scan interface, no matter whether the new style is a correct attempt, but its direction is absolutely correct, the future visual direction of the product, It’s definitely a shift from letting the user see what you want to see to letting the user see what he wants to see.

Layering is also very simple, remember
  1. Make it as obvious as possible (sometimes you think it’s enough, but it’s not enough)
  2. Reduce visual noise (screen out all that users do not need at the first time, and use the most simple and interesting ICONS and refined words to express the most complete content)
  3. Always pay attention to the principle of intimacy



③ Don’t try to challenge habits

After ten years of development, mobile terminals have formed their own operating habits, which are recognized by everyone (users), so please do not challenge these habits without a very good reason. If you do not know what these habits are, please refer to the latest IOS and Android design specifications.



Rule 3: Make navigation clear

If people can’t find their way in your software, they won’t use it again.

The importance of navigation is unparalleled, and the user’s loss is terrible, which is why almost all apps will put Tab Bar. The key to the good or bad of a product is not user experience or interface design, but interaction logic (how important the interaction designer of the product is). Interaction logic determines usability, and it is the highest level of user experience that needs to be valued. Mobile screens are expensive, and we can’t always put a navigation bar underneath to tell the user where you are (it would be silly to do that), so good interaction and necessary prompts have become the most important breadcrumb navigation in our mobile design to help users find their way. Instead of pressing your phone’s home screen to shut down your app in a fit of rage.

In terms of interaction design, when you’re drawing your prototypes, how do you get a voice in the user’s head that tells them the software is reliable when they use it? Here I offer three solutions (and some caveats).


① Correct jump and naming

Navigation Bar on mobile terminals is usually at the top of the page with a return key next to it to return to the previous page. The size of the name on this Bar should be consistent, that is, every page should have the same style and a proper name. When you click on a site, you will be redirected to the corresponding page, and the name of the page should be very clearly related to the place you click on. It is also worth mentioning that, through repeated interactions, it can sometimes be surprisingly helpful for users to understand where interface elements, content information or associated interfaces are coming from and where they are going.

Secondly, the jump of the back key is not silly just go back to the previous page, think you are the user to operate here, click the back key, you want to go back to where, to help the user to omit unnecessary back interface. Helps improve usability, avoid user loss and reduce operational anxiety. Also, try to include a return key in every interface you need to return to, even if it’s not that important.


(2) Necessary encapsulation and false hints

When the submission server waits for some operations for a long time, or the background computing of the mobile phone is very complicated, and users need to wait, if it can be avoided, it should be encapsulated, that is, users should not know the real situation. The calculation and submission of the software are carried out in the background, and loading or progress bar should not be designed during the front-end design. Let the user directly do what he wants to do next, rather than wait for the server or phone’s computing speed.

On the other hand, some very important operation, but does not require users to wait, but you should make the loading and the progress bar, allow the user to wait for a while, and give clear success tips and back out all small operation back to the home page button below, these are not just to improve the user operational and security design, also is the software to the user contact navigation.


③ The sub-page is different from the superior page

Don’t make all pages look the same, and make clear differences where there are clear distinctions.



Epilogue: Usability versus hierarchy choices

At the end of the day, if you need to put too many things on several pages, remember when choosing between the interaction hierarchy and usability:

The challenge of managing screen space should not come at the expense of usability.

Having more layers of interaction isn’t as bad as you might think. People don’t object to a few clicks, as long as each click doesn’t require too much thought. Forget the rules, study the user, even if we are designers, we need to study the market, after all, everything we design is for our users, we don’t care what they like, as long as they don’t hate.

All right, here’s the whole web design thing. DON’t MAKE ME THINK The Midas Touch is thinking about mobile. The first half of the book focuses on user experience usability research that can be ported to mobile, and the second half focuses on product usability testing, which I won’t go into here.


Thank you for watching, and if you have any thoughts on my share, feel free to leave them in the comments section.