User Experience Design: Design of common style templates

This topic is at the invitation of Tencent ISD colleagues to share the theme of Webrebuild three anniversary meeting. Because of the spot and so on some problems at that time did not speak clearly, back in accordance with the original idea formed a small paper, some of these issues were further elaborated. A friend at the scene raised the question of the use of expressive semantics, and did not give him a satisfactory answer, so the article spent a lot of space to explore the question of semantics, which is the answer to the friend.

The meaning of "public" for common style templates

1. Can be applied to different functions of the web system (where?) ）

In addition to developing web products that operate on public platforms for corporate users, the enterprise's Web development team also develops information management systems (Ims,information Management System) for use within the company's internal teams to optimize processes and improve office efficiency. For example, Enterprise ERP (Enterprise Resource planning), Personnel management, workflow management, sales management, warehouse resource management systems. This kind of system mainly for internal departments to use, the function is multifarious, pay attention to the information organization and the function realization, to the front interface personalization request is not high, does not need each system to redesign the production interface, provides a set of common style template can effectively enhance the development efficiency.

2. For people with different professional backgrounds (for whom?) ）

There is a class of web pages that are time-sensitive and need to be produced very quickly, such as some news topics, while others are large in size but structurally similar, such as many different functional modules of the IMS system mentioned above. This type of page because of time constraints or there is no need for professional refactoring personnel to elaborate, write every page of each label code, so it is necessary to provide a convenient use of common style templates for content editors, or background developers to use directly.

Design requirements for common style templates

Can be applied on multiple Web systems to require

1. Public template design needs to be abstract, representative

(1). Overall planning page Hierarchy logic

1. Overall planning of H1,h2,h3,h4,h5,h6

   The catalogue section of a book often clearly reflects the structural level of the book, chapter One, section one, orderly the order of the first. Good web pages should also have a clear level of logic, the Web page title, secondary title, paragraph content, and so on, layers unfold. X The HTML markup language itself also provides us with tags that identify the level of the page: H1/h2/h3/h4/h5/h6. In the public template to the overall planning of the content of the structure of the Web page, and appropriate use of these tags to reflect. When you disable CSS, you can easily see the hierarchy of the Web page from the default browser style.

2. Clear navigation menu and breadcrumbs (crumb) logo

   In order to properly plan H (N) identification above, navigation menu and breadcrumbs can more visually reflect the level of Web page, and also the Web page elements that enhance the usability of web pages.

(2). Representative page Layout structure

Web page structure Layout also has a certain paradigm, often including the page header, navigation menu, main content and footer. Follow these most common layout principles to maximize the commonality of public templates.

(3). Representative page elements

2. Logo, Web page headline

   Logo has the role of brand identity. The headline tells the user the content/purpose of the Web page/system, but it is not necessary, some pages have only logo and subtitle, so the title of the Web page can be an optional item when designing.

4. Navigation Menu

   The important role of the navigation menu is no longer emphasized. It's important to note that when designing a template menu style, you have to have a style that identifies the current item, as well as a highlighted item style that needs special emphasis. Also consider the situation where the multilevel menu is pulled down or collapsed on the menu. The design of the time to consider the comprehensive, when the need for easy to expand.

6. Breadcrumbs Navigation

   Not much emphasis, equivalent to the GPS on the Web page.

8. Data tables, text content

   Such elements are often the main content of a Web page to render formatted information. When designing a table header, cell style, you need to consider that the styles may be different depending on the data form. For example, longer text content may need to be left aligned in a cell, and numeric type data, in order to visually compare the number of digits, usually requires right alignment. Sometimes the data content is more, need paging to display, so it is necessary to provide a good user experience of the pagination style.

10. Data Entry Form

    A form component for entering data: a radio box, check box, drop-down box, text box, and so on. The default appearance of the native interaction of such a Web page can be uniformly initialized as needed. If the interaction effect requires a higher level, you need to set the different styles (such as onmouseover, OnClick, onfocus, and so on) when the mouse, keyboard events interact with the form items. Because the ie6-support for pseudo class selectors (hover, focus) is not perfect, make these effects by using a script for some compatibility processing. In addition, there are some tips for filling out the form, such as note information, and error message when validating input data, this information is usually displayed next to the form, and error-proof form items need to be highlighted when validating errors, which are designed in common templates.

12. All kinds of comments, error messages, tips

    This includes the above mentioned form filling prompts and validation errors that are displayed next to the element, and some notes explaining the content, and others that may appear in a separate module, such as a successful user operation, a failure, or a login timeout.

14. Interactive UI components: Toggle tabs, Pull-down menus, and modal pop-up windows

    In addition to Web Form controls and the message components (alert, confirm, prompt) that the browser provides, you often need to use custom interactions, such as toggle labels, pull-down menus, As well as modal windows that encapsulate the browser message components, such as Lightbox, Thickbox, that take into account usability issues, you can select the most common components to integrate into a common template.

Those who can be used for different professional backgrounds require: