Read the first part of the article.
Read the second part of the article.
Read the third part of the article.
Read the fourth part of the article.
As a house begins with a project and a foundation, a usable site begins with an optimal arrangement of blocks and modules. In this article you will learn how to ensure the usability of the site at the stage of creating a prototype and layout. You will also find several recommendations on user friendliness and user-friendliness of mobile resources and applications.
- What you need to know about the modular grid 960 and 970
- What you need to know about prototypes with high detail
- User person will help ensure the usability of the site
- What should be the virtual keyboard for mobile site forms and applications
- Use skeuomorphism only to increase functionality.
- How to make loading waiting less painful
- Site usability begins ...
Prototype and layout: what is wireframe and mockup
A prototype or wireframe in web design is similar to an architectural drawing in construction. At the prototyping stage, the creator plans the page structure, navigation, and the way content is organized. The prototype is not intended to assess the visual attractiveness of the site, so it runs in black and white.
Layout or mockup is created to assess the visual appeal and functionality of the site. At the prototyping stage, colors, images, graphics are added to the prototype. After completing the work with the layout, the designer sends it to the web programmer to "revitalize" or provide design functionality.
Prototyping helps to organize content, and layouts provide visual appeal of pages and ease of perception of materials. To create a usable page, start with a prototype, then go to the layout.
What you need to know about the modular grid 960 and 970
Using a modular grid to create prototypes helps the designer to organize content and ensure the simplicity of its perception. Among designers, the most popular are 960gs grids, designed to create pages of 960 pixels wide. However, the use of modular systems with this width leads to usability problems, the main ones of which are listed below:
- The width of the spaces between the columns is 20 pixels. This is too large a distance, creating a noticeable visual space between the columns and preventing the user from scanning the content.
- In fact, when using the 960gs modular grid, the width of the content is 940 pixels. 10 pixels "eat up" the fields on the left and right. The content width of 940 pixels is too small for modern high-resolution monitors.
The problem is solved by the use of modular grid 970gs. It has the following characteristics:
- Content is organized in 12 columns, as in the modular system 960.
- The width of the columns is 68 pixels, which is 8 pixels more than 960gs.
- The space between the columns is 14 pixels.
The use of modular grid 970gs is preferable in terms of usability. It allows you to combine a page in 2, 3, 4 or 6 modules wide.
Modules successfully structure the page without creating visual barriers.
The modular network 970 pixels wide allows to use different navigation elements. Grid 970gs provides a good arrangement of navigation elements relative to the content: images and text. This provides visual appeal and usability.
The use of a modular grid with a width of 970 pixels ensures a good organization of content in terms of usability. This modular grid option guarantees the designer more freedom when designing a prototype.
What you need to know about prototypes with high detail
Prototypes are combined into two types: low and high detail. The first ones are basic sketches of the future page, devoid of details. The latter are distinguished by the presence of details. They are as close as possible to the layouts, allowing to evaluate not only the structure of the page, but also its functionality and visual appeal. In particular, highly detailed prototypes include user interface elements that provide site usability.
The following information will help you work with detailed prototypes and create usable sites:
- You can quickly create a prototype with high details. Use interface libraries for this, for example, Keynotopia.
- Detailed prototypes will help you evaluate the functionality of site usability already at the prototyping stage. This increases the efficiency of the designer and reduces the likelihood of making blunders that adversely affect the user experience.
- A highly detailed prototype is convenient to use if you are creating a website for a customer who does not have professional knowledge in the field of web design. It will be easier for you to avoid the amateurish requests "to insert such a button here, but to reduce this form twice." Naturally, this will have a positive effect on the usability of the developed site.
User person will help ensure the usability of the site
Marketers use shoppers to develop products, create content, or plan advertising campaigns. This tool must be adopted by designers. Using a person at the stage of prototyping and prototyping increases the usability of the site. This can be illustrated by example.
Imagine that your site is used by two main groups of customers, embodied in the following marketing persons:
- Middle Manager Igor, who is 24 years old. He does not part with the gadgets around the clock.
- Pensioner Sergey Borisovich, who is 76 years old. He is not very good at using a computer, and also spends a lot of time searching for the necessary sections of the site, products and services.
Do you agree that the interface created for Igor will in most cases have low usability from the point of view of Sergey Borisovich? To make the site usable for all groups of clients, you need to segment them with the help of marketing people and try to take into account the needs of each group when creating prototypes and layouts.
What should be the virtual keyboard for mobile site forms and applications
Filling out forms on mobile versions of sites, users are faced with the need to enter text, numbers and email addresses. This must be considered when creating a virtual keyboard.
Virtually every form has an email field. For this field, you must use an adapted keyboard for entering e-mail addresses. It is characterized by the presence on the first screen of the @ sign and a point.
For the "web address" field or URL, the keyboard adaptation consists of adding a point, a slash and the ".com" button. This button can switch to ".net", ".ru" and so on. In addition, the keyboard for entering the URL is better to remove the space.
For fields that involve entering numbers, it is better to display a numeric keyboard on the first screen.
For the "Phone number" field, you can offer users a keyboard styled as a dialing interface on a smartphone.
Use skeuomorphism only to increase functionality.
Designers often use skevomorphism to make elements of mobile applications or sites look like objects in the real world. In most cases, this does not affect the functionality and usability. For example, a user with the same success will use a skeuomorphic and "flat" calculator.
A skeuomorphic design is useful when the interface becomes clearer. For example, the illustration below shows the interface for reading electronic books. Thanks to skeuomorphism, the user intuitively understands how to turn the pages.
How to make loading waiting less painful
No one likes to wait. Most of all do not like to wait for users of mobile gadgets, accustomed to do everything on the run. The following tricks will make them wait when downloading apps or content less painful:
- Use process indicator. When a user sees that the wait is not long, he is unlikely to leave your site or application.
- Take the user away from the wait. Ask him to do something while the content or application is loading. This principle is implemented in the Instagram application. While the photo is being uploaded, the user has the ability to add a photo name, a short description and tags.
Site usability begins ...
... from creating an understandable and easy-to-understand page structure. This problem is solved at the prototyping stage. Use a modular grid width of 970 pixels to create prototypes. Use interface libraries to quickly create highly detailed prototypes. Use layouts to gauge visual appeal and page functionality. Create custom persons to develop interfaces tailored to the needs of the main groups of site visitors.
When working on mobile resources and applications, remember to create convenient forms. Adapt the virtual keyboard to specific fields of the form. Use skevomorphism to enhance the functionality of the resource. Distract users from waiting with process indicators or additional actions.