Website usability menu design
We also rejected the third version of the menu in the mobile version proposed by the client - at that time we had a classic top "burger" and a bottom panel, and the client suggested adding a menu with horizontal scrolling to them. Such redundancy of duplicate navigation can overload the site architecture and confuse the user.
9. Help users recognize, diagnose, and resolve errors
Error messages should be written in plain language, not in the form of codes, clearly indicate the problem and suggest possible solutions to the user.
In our design, we paid a lot of attention to input forms. This is one of those interface elements that is of great importance for conversion and overall usability of sites, but which, unfortunately, is very rarely given due attention.
For example, even instead of the standard phrase that is displayed when a user does not fill in a required field - "Required field", we try to politely indicate to the client what exactly mexico phone number lookup went wrong and what needs to be done, we write - "Please indicate your name - the field is required."
Other examples of phrases issued when fields are filled in incorrectly are: “The phone number must be 10 digits long, 5 left”, “Incorrect email format – check the spelling”. Even such small details as the acceptable field length are important here – we initially took into account not only the desktop version, but also the capabilities of the mobile version, so the phrase was verified to be suitable for a shorter mobile field.
Website usability errors in the Phone field
10. Help and documentation
It's good if the site is made in such a way that no explanations or documentation are needed for it, but, unfortunately, this depends on the level of information load of the site and its subject matter. For online stores in general, additional documentation and answers to questions are not needed, since this is a type of site that many users are already accustomed to. We tried to make the site for our client as convenient and understandable as possible without explanatory materials
Additional criteria for user-friendly design
Designing a user-friendly website design is not limited to the ten listed heuristics. This is just a minimal checklist that you can use to check, for example, your own design or the design of your company's website
For example, we additionally checked the contrast of the text using special services. So that the site meets the modern requirements of inclusive design . Let us briefly explain what is meant. Inclusive design implies a human-oriented process of designing interfaces so that they are convenient, understandable and, most importantly, accessible to the maximum number of people, regardless of their age, gender, physical or mental characteristics. The principles of such design are enshrined in international standards.
Thus, the WCAG standard (Web Content Accessibility Guidelines) is used worldwide to minimize the difference in the perception of interface elements by different users. WCAG standards for non-text elements recommend maintaining a contrast ratio of interface components and graphic objects of at least 3:1 in relation to surrounding colors, which is what we checked.
Following the principles of inclusive design at least at a minimum level is very important, because, first of all, it allows us to create simply good and high-quality design. We can all at some point find ourselves in a situation of limited physical and mental capabilities. From a noisy subway, where subtitles come in handy, or bright sun shining on the screen, to a broken arm that interferes with holding a phone, or a high temperature or depression that affects memory and the ability to concentrate, etc.
Features of the mobile version
We also thought through the user's path, imagining how they would choose a product. For example, are the product cards spaced far enough apart so that the price is read from the right card.
We tested the mobile version layout directly on our devices and through the preview functions in Figma to make sure that a user with a small phone screen as well as with the latest flagship model will be able to use the site comfortably. For example, in the mobile version, it is important to consider the ease of pressing. To do this, they check the minimum distance (from 2 to 10 mm for critical areas) between elements and the size of the elements themselves.
Two huge, but closely located elements can still cause an error. Two small, although located far away, can also be inconvenient. You can use the guides created for the main popular systems now - a guide for iOS and for Android : there the minimum pressing area is 44 pixels, i.e. approximately 7 by 7 mm on a smartphone display. For example, such recommendations can be found in the translated heuristics of designer Stephen Hoeber .
We checked our mobile version for the convenience of the pressure zones and made sure that our buttons, bottom menu items, the distance between menu items and filter and sorting items, and the quantity buttons (they are often too small) meet the 7 mm criterion. The icons are slightly smaller, but there is a specially wider pressure zone around them, exceeding the visible part.
Ease of use of the site. Results
Sometimes a really good product or service may not reach its target audience if its presentation on the Internet is not effective enough. And the usability of the site is frankly lame. After all, to design a site that meets the rules of usability, special skills and research are needed, and not just a sense of style and good eyesight.
It is important to think through the main task of the site , design a clear structure, provide it with sufficient functionality for the market. Check the availability and quality of the content (from a visual and semantic point of view), ensure the completeness of this content and its competitiveness.
Share with friends