User Experience Design: A rich interaction-featured web Interface design pattern

Web page Production WEBJX article introduction: two of the most effective web interface design patterns.

Web Interface Design

The cover describes this book: want to know how to create a great user experience on the web today? ...... This book takes the current most popular web site as an example, introduces two good good web interface design patterns. If you want to build or refactor the site, and hope that the site with rich interaction characteristics, then this book is your surprise of the treasure.

First of all, this is a reference book.

Second, this is a good book that you think is a bad one. Good book, because it provides a lot of ideas and practices ("best Practice" part); Bad is mediocre use cases and flashy organizations (repetition and abuse). In view of this, I discard the book rhetoric, unintelligible "six principles", according to the function of the organization. In addition, the book priced 80 yuan, a little outrageous.

Before the text, it must be emphasized that "great user experience" is not the same as the superposition of principles and patterns, but rather selective and characteristic deployment on demand. Now the internet rich interactive technology has been a flood of the trend.

First, the mouse principle

The "direct operation" involving the mouse is categorized into the mouse principle.

1, hover

Hover is now, based on hover display tool can reduce the visual interference on the interface. Design to avoid any element of the offset, otherwise the user's view is to the wrong place.

2, click

"Edit" link

Click on the page to edit content, so that users do not have to leave the page, and secondly, the editor can directly refer to the context. You can either let the user know that you can edit it here, or add the word "edit" or the button.

3, double click

The book doesn't seem to mention this, but people who have used the online map know that there is a "magnified map" effect. The following are the recommendations on this article.

4, right key

Right-click the menu and perform the task as conveniently as the application. The right menu is generally not easy to find, so it must be fungible.

5, drag and drop

Drag and Drop layout

Drag-and-drop sorting, layout, and drag-and-drop processing tasks that conform to the user's mental model. be prompt to drag and drop, calculate the distance unit (5 pixels) and time unit (holding down the mouse for 0.5 seconds) to start the drag and drop. When dragging and dropping, users need to get the necessary information at any time.

6, Rolling

Scrolling to load new content in real time

Scroll to load new content in real time, out of the shackles of the page. This approach is better based on all the continuity content of the individual. Personally, it should also ensure the fluency of the display. For example, Google Reader and Google image search is very fluent, and everyone nets and QQ space old give people a card of the feeling.

Second, the keyboard principle

The collation method is the same as the mouse principle.

1. Real-time suggestion

Users may be able to hit the end without losing. In general, it is better to display feedback for one character per input. To ensure that there is enough useful information on top of it, there are several options for selecting the suggested entry: carriage return, up and down arrows, and mouse clicks. In my view, the cancellation of the proposed entry should also be the case.

2, automatic completion

Ditto. Personally, the automatic completion of the entry to the accuracy of higher requirements, should not give too many entries at once.

3, Real-time prompts

such as user password strength.

Three, display principle

The display principle contains patterns that are not directly related to the mouse or keyboard, and as an auxiliary effect that simplifies interaction and improves the user experience.

1. Focus

Highlight changes in the interface. Personally, if it's a mess, don't use it.

2. Expansion and concealment

Expand and hide

The irrelevant content or other panels can be hidden. This is a very old technology, the use of the time to pay attention to the continuity of the switch, abruptly fragmented picture is not good.

3, menu button

menu button

It provides the default button operation, and has more operation tips, convenient and quick. Design, avoid the target too small, on the other hand, the keyboard and mobile devices to ensure normal access.

4. Process processing

The book is written to delete a comment should simplify the steps to ensure that within a page. This one...... Well, it's all done now, isn't it? What, you're not?

5. Operation Guide

Have a new function (product), or website revision, with static (or dynamic) page to guide users to learn and understand. Static page booting can take advantage of unfinished areas to guide user actions, and human nature will prompt the user to "finish" it. Dynamic guidance (such as small bubbles or something) should be concise and simple. I think that you have to be able to shield the boot or open it again.

6. Component Embedding

Personally, the addition of such widgets (such as a shopping cart or chat window) allows you to centralize the operation of a task while accessing multiple pages.

7, pop-up layer

Pop-up layer

The word "overlay" is used in the book, and I think the "pop-up layer" is more popular. With the pop-up layer, you can handle the task in the text stream, eliminating the hassle of the jump page. Compared to the window, it occupies less resources, faster, easier to control the style. Can be used as confirmation dialog, details, and input overlay.

8. Timed Refresh

Regular refresh without user intervention can keep the site content is fresh, extremely convenient. The only thing to note is that the refresh is not too frequent to find a balance between readability and association.

8. Other animation effects

This point is mixed in every corner of the book, nothing more than fade, translation, such as sliding effect. Appropriate ornaments, website fluency and user experience certainly on a grade.