The usability that can not be neglected in website design

As the internet becomes more competitive and more homogeneous sites are available, only the one that offers the best user experience will win. Usability is a designer must pay attention to the principle, from IBM's engineer Zhangqun author from several aspects elaborated the usability principle in the concrete website design Detail realization and the concrete case, is worth the website designer to draw lessons from.

The author first emphasizes the importance of usability design:

Competing websites usually provide similar functionality, we often feel the homogeneity of the video site, group purchase site homogeneity, social networking sites with the quality of the portal, the same quality of information between them, the same service items, but only provide the best user experience that one will win. During web design, development, and release, usability experts usually help assess the usability of the site, collect internal feedback, and test the team for usability testing. The worst thing is that the Web site on the online phase of the discovery of interface errors, the need to pay dearly to repair the site interface errors. Therefore, phased design, early testing, regular testing is extremely necessary.

To implement the usability principle, the author thinks that to analyze the real needs of users: the user needs are not deconstruction to some extent, it is "pseudo demand", can not reflect the demand, is often the surface demand, insight into the real needs of the user image is the first step of the website design. Experienced web designers are often based on the user's explicit requirements description, to explore their real problems, and to burnish demand.

The user's habit of surfing the internet is basically similar to going to the supermarket, with a large number of pages they hardly glance at, but rather glance at the page for interesting content. But users are willing to tolerate advertising and poor design for quality content. Web designers should not be patient with high expectations, most users are scanning the page rather than reading, relying on their own intuition, if the page did not meet user expectations, so that the higher the cost of learning, the less intuitive, users will be very easy to leave, looking for alternative pages.

In the case of "consistent visual design", the author points out that when a website's visual design is neat and coherent, highly consistent, users can easily understand how to use the Web site, inconsistent visual design, there may be a sense of deception, when the interface design too jump and innovation, the user may at first glance difficult to understand, Have to learn again how to use what they already know. Visual consistency can improve the brand image created by the product and reduce the user's cognitive cost to some extent.

To achieve "consistent" interface, does not mean that the interface elements need to "unify", visual can have a lot of different means of expression, the world does not have two identical eggs, in order to coincide, the website information architecture is very important. Embodied in the shape, color, interface texture, icon, painting wind, text description, hint information presentation way, so that the site in different columns, design consistent, rather than different columns under the page visual differences, a look, not like a parents born.

For the text alignment problem, the author analyzes the problem of justification: when the original length of the row is too different, there is a significant variation in the density between the rows and rows. And for the English language, if there is no hyphenation, it is often difficult to make the difference between the lengths of the lines suitable for justification.

More and more browsers begin to implement the alignment algorithm for Chinese, we can consider using text-align:justify in the browser that can enable CSS hyphenation (word hyphenation); To achieve a beautiful end-justified effect, but how is the ideal effect? browser compatibility needs to be considered, good hyphenation is a necessary condition for beautiful text, but the correct method is to break the word by the syllable, so that users do not have to read the next line in order to spell the full word, This problem is especially important when single-line text is particularly long and the line spacing is small.

The author pointed out that the layout must be as far as possible the principle of alignment is not necessarily applicable to modern web sites, left (flush left), the right side of the staggered (ragged) is more and more common, people's aesthetic is also changing. On the internet today, left alignment is also the default setting for text. The length of pure English text lines is patchwork, forcing right alignment is not necessarily a wise choice. Designers can make comprehensive use of hyphens; Letter-spacing, text-justify and other CSS skills to achieve aesthetic results.

Fixed element retention conventions, the authors cite a few examples:

The site title (header) is often displayed on the top left of the site.

Logos can usually be clicked to return to the home page

Exit logins typically appear on the top right of the site

Copyright information is always at the bottom footer

The Site search box often appears on the top right or center of the site

Switching the language version of the site often appears at the right end of the header and with a flag display more intuitive

The search box must be a box

Registration is usually in the upper-right corner of the page

The author advocates the use of Pull-down menus only when necessary, although the drop down menu takes up less screen space, but its drawbacks are obvious, such as the lower visibility of options and the amount of content items contained in the Drop-down menu that can be confusing. However, according to Jacob Nielsen's research on the Pull-down menu, he thinks the Pull-down menu doesn't have to be very small and the "mega" navigation pull-down menu works fine. In recent years, Mega menu has become a trend in web design, especially in e-commerce sites, if used properly, it can effectively help users get information quickly, large two-dimensional drop-down panel can be clear navigation options, well-organized navigation groupings, users from the need to carry out the rolling. Use it as a key to design.

The advantages of mega-menus:

All options at a glance

The menu structure can be organized more clearly through the visual means of dividing line, rich Text, icon, picture modification and so on.

Disadvantages of mega-menus:

Mega menu is not easy to be noticed by users before it is expanded

A large number of menu options occupy the screen space, covering up part of the content

Reduce browser size or see all menu content on small-screen handheld devices

Load Mega Menu Speed has an impact

accessibility, fly-out menus can easily lead to accessibility issues, and code writing needs to be more cautious

In addition to this, the author also emphasizes that protective design should not be forgotten:

We should always assume that the user does not follow the common sense of the card, will not use your site as expected, or misuse. So we have to have protective design, for example, to delete a document without a confirmation prompt, without providing a recovery function, this will cause unacceptable consequences to the user; If, for example, the user closes the browser while entering the registration information, do not discard their data without asking; When a user requests a page that does not exist, provide a useful 404 page. (Trikon/infoq)