Discussion on the difference between Web UI and mobile UI in interactive design

Do a few years of UI and interaction, this period has been in contact with web design and mobile phone application interface design, now a simple talk about the difference between the two, personal humble make a small summary, different views pat.

First of all, the Web design and mobile UI, the operation of the media is different, mouse and hand, which is a big difference, and this difference caused by a few differences as follows:

　　1. Different accuracy:

The accuracy of the mouse is quite high, even if the small button, for the mouse is also acceptable (note, is only acceptable), the error rate is not very high click.

And the accuracy of the hand is relatively less high, but also take care of some of the larger users, so the Mobile UI button, you need a larger range to reduce the error rate (I believe many people have cursed the iphone input method, this is a good example)

　2. Different position:

For the mouse, you can say that the button in any position on the screen, the effect of the operation is not very large, you can easily move the mouse to any location you want to go, click any button you need. So we can see most of the pages, the buttons are on the edge of a small space.

And for the mobile UI, you need to consider the mobile phone's use of the environment, usually more people want to operate a single hand mobile phone (a brand other than 7-inch bricks), so we designed the button, usually more in the bottom of the screen, or the thumb can be controlled to the area.

　　3. Different operating habits:

For the mouse, usually we have a click, double-click, right button these several operations, so in the web design, we can design the right menu, double-click the action and so on.

And for the mobile UI, usually we have clicks, long press and slide even multi-touch, so we can design a long press out menu, you can design sliding page or switch, you can design dual-pointing zoom in and out, as well as double finger rotation and so on.

But obviously, we can not mix the above two kinds of operation habits, imagine if the mobile phone application in the right button menu, or the Web page in a multi-touch operation, then the first dozens is the user, then the designer's boss.

　　4. Different button states:

For a button in a Web page, there are usually four states: default state, mouse over state, mouse click state, unavailable state. For a button in the mobile UI, there are usually only three states: The default state, the click State, and the unavailable state.

Therefore, in the web design, the button and the environment and the background more harmonious integration, do not worry about the user can not find the button, because when the user can not find the time, the mouse will be used to scribble on the screen, then the button's mouse through the state to come in handy.

In the mobile interface, the button needs to be more clear, more directional, let the user know where there is a button, because once the user clicks, the Trigger button event occurs. Then, the web design and the mobile UI, the output of the region size is different, this is also a big difference, the current mainstream display size is usually 19-24 inches, and the main mobile phone size is only 3.7-4 inches (Please fruit powder forgive me for not taking the iphone's screen size as a mainstream standard, because it is too small Even the most stupid manufacturers have developed big bricks that are only 7 inches in size.

The result of this difference is that we are not in the Web design and mobile UI, in the same screen to put the same amount of content, generally speaking, an application or a Web application, the overall amount of information is certain, so, at the end of the page, we can as much as possible to put content into the homepage, and try to avoid more levels, General class of Web sites, basically only level 3 directory, and this level 3 directory, is built in the first level of subdirectories produced enough of the case.

At the end of the phone, we need more levels, because we can't put an infinite amount of content in the first page, we need to give users a clearer flow of operations, so that users can more easily know where they are in the overall application, and easily reach the page or step they want to go. Therefore, the map is more important in the mobile UI than the Web page.