Consistency analysis of online application windows

Although the Internet revolution always feel unstoppable, we all look forward to, one day, only need a browser, you can complete the usual client to complete the task. While HTML5 and Chrome once let us see the browser's hope of replacing the operating system (via&http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp;1,2,3,4 , 5), but at the moment, the user maintains the use of both platforms for a long time to come.

We also face a lot of problems in trying to get users to seamlessly move from client applications to online applications.

Logically, the online application is a set of programs that run within the browser client application in the operating system, and many interactions still rely on the top-level application (the browser client), as is the difference between running a Windows virtual machine in Mac OS.

Such an environment poses a serious and unavoidable problem for online applications: experience inconsistency. Online applications can not provide the same experience as the client application environment, users if you want to make good use of online applications, need to learn again, the cost is too high. Especially for those productivity applications, and this inconsistency is undoubtedly a fatal blow.

Productivity application refers to the tasks that can be done to organize and process specific information. Users can create and process information through productivity applications. Like Outlook,photoshop,word,autocad.

The inconsistencies of these experiences on the UI mainly include the following points:

keyboard shortcuts-only a small number of online applications support shortcut keys, which are difficult to find and do not support complex combinations. right mouse button-only a small number of online application support, and the browser can not coexist with the right menu. (The new Flickr cross display is good.) Exchange of information--drag local photos into Photoshop to open them, can you drag Flickr photos into photoshop.com?

If there are other, please add. But I personally think that the biggest inconsistency is the gradual changes in the page, window depth changes and modal changes. Because of this inconsistency, the user is easily lost in an online application and confused, so the "home" link becomes the highest click, the most firefighting link.

observation One: Diverse dialogues

In the browser, users will encounter 4 types of dialog windows, respectively:

Browser dialog box-browser-Driven dialog box window, modal dialog box (except opera, relative to browser). In the upper-left corner of the following figure, delete the dialog box. Built-in dialog box--the dialog window provided by the online application, below the lower left corner of the image, for QQ mail letter prompts, modal (only relative to the current browser tab.) Small pop-up window-modeless small browser window, used to complete a number of online applications subtasks. In the middle of the image below, add a small window to Gmail for another email account. Common dialog box-a modal window provided by the operating system, such as uploading files, saving files, specifying folders, and so on.

For more information on the categories of dialog boxes, refer to Windows User Experience Consortium Guildelines > Windows

Observation II: Page Flow difference

The same page, even if they have the same function, but in the client and online applications, there is a big difference.

In the client, the window's modal overlay is used to give the user navigation, while the Windows platform also provides a taskbar to help users manage their own windows. For the user, back to the first step, just close the current window, return to the origin of the operation process, clear off the taskbar window placeholder.

In the on-line application, because of the window's modal superposition existence difficulty, and the effect is also poor. Meanwhile, there will be no task bar such a control to manage the user in the end of the page window (Firefox panorama is only a browser to provide a solution to the label management), even if there is bread crumbs and navigation, it is difficult to avoid navigation lost, users can not quickly find the exact back path in the page, Have to directly choose the "back to the home" way to quickly flee.

window and Page flow

The above image looks more complex, but through the overlay of the window, effectively records the user's entire operation flow. When a user returns, it is possible to return to the previous step by clicking on the window's X, or cancel.

But for online applications, although there is bread crumbs, but he is not the user operation process, but the classification of information.

The difference of

page modal

The same content (set), in the client, using modal dialog box, and will open a new window, and in the online application, this becomes modeless, and does not open a new window.

Web End back operation too much

There are a variety of elements on the Web page, and before you click, you don't know what the next step is, maybe a new window, maybe a built-in dialog, maybe a little pop-up window, maybe a browser dialog box. Moreover, there are visual elements with misleading users: as shown above, although it looks like the appearance of tabs, it makes it easy for me to think that after I click I will continue to stay on this page, and in fact I will jump to a new window.

and online applications, you can back up in a variety of ways, close the built-in dialog box, close the Small pop-up window, close the New tab window, click the browser back navigation button.

On the client side, there is always only one, click on the X button.

Web End Experience Case Discussion

10 of the major usability guidelines, including two points: giving user control, consistency and standardization. But online applications, many times, have to face a dilemma.

I will contrast in the same function, NetEase mailbox and QQ mailbox design contrast, to express this problem.

In the QQ mailbox, if you need to completely delete a message, there will be a dialog box for users to reconfirm. This is a browser dialog box.

The problem arises, although the dialog box is only for the current tab, but it is modal relative to the browser, and you cannot switch to another tab in the browser. Limit the user's control, and its appearance, difficult and mailbox built-in dialog box to achieve unity, if the Mac system, the OK button will also appear in the bottom right corner of the dialog box. The operation experience is inconsistent.

NetEase mailbox uses the built-in dialog box, seemingly solves the problem, but actually does not:

Source Address: http://www.userkon.com/to......standard.html