Website UX Design Usability Principles in Singapore

user experience in sg

As the internet becomes more competitive and more homogeneous, there is only one that offers the best user experience. Usability is a principle that designers must pay attention to in order to improve the website user experience.

Sites that compete with each other usually provide similar functionality. We often feel homogeneity of video sites, homogeneity of group buying sites, homogenization of social networking sites, homogenization of portals, duplication of information between them, similar service offerings, But only the one that offers the best user experience wins. During website design, development, and release, Usability experts typically help assess the ease of use of the site, gather internal feedback, and test the team for usability testing. The worst part is the website found in the line phase error, you need to spend a high price repair website interface errors. Therefore, the phased design, early testing, regular testing is extremely necessary.

To achieve the principle of availability, users need to analyze the real needs: the user needs without deconstruction to some extent in terms of “pseudo-demand”, cannot truly reflect the needs, often the surface needs, insight into the real needs behind the appearance of the user is The first step in website design. Experienced website designers tend to explore the real needs of users based on the description of what their real problems and polished demand.

The habit of surfing the internet is basically similar to that of shopping in the supermarket. Instead of looking at a large number of pages, they glance at the pages to find interesting content. But users are willing to endure ads and poor design for high-quality content. Website designers should not have higher expectations of the user’s patience, most users glanced at the page rather than reading, groping on their own intuition, if the page does not meet the user’s expectations, making the higher the learning cost load, the worse the intuitive, the user It will be very easy to leave, looking for an alternative page.

Take “Consistent Visual Design” as an example. When the visual design of a website is neat and consistent, and highly consistent, it is easy for users to understand how to use the website without any inconsistencies in visual design, which may make people feel cheated, When the interface is designed to jump and innovate too much, users may find it hard to understand at first glance and have to relearn how to use what they already know. Visual consistency can improve the brand image created by the product, to a certain extent, reduce the cognitive cost of the user.

To achieve a “consistent” interface does not mean that the interface elements need to be “unified”. There are many different means of expression visually. There are no two identical eggs in the world. In order to be consistent, the website information architecture is very important. Specifically reflected in the shape, colour, interface texture, icon, style, text description, presentation of information, etc., making the site in different sections, the same design, rather than the different sections of the next page visual differences, glance, not like a father and mother were born.

For the “text alignment” problem, take the alignment as an example: When the original line length difference is too large, there is a clear change between lines and lines. And for English, it’s often hard to fit length differences between lines for justification without hyphenation.

A growing number of browsers are beginning to implement end-justification algorithms for Chinese. In browsers that enable CSS hyphenation, we can consider using text-align: justify; to achieve pretty two-end alignment, But what is the ideal effect? Need to consider browser compatibility, good hyphenation is a necessary condition for beautiful text, but the correct method of hyphenation is in accordance with the word syllable to disconnect, so that users do not have to read the next line to read in order to spell out complete words, this issue is particularly important when the single line text is particularly long, the line spacing is small.

The principle that layout must be as close as possible to both ends does not necessarily apply to modern websites. Flush left, right-sided ragged right typesetting are becoming more common and people’s aesthetic perceptions are changing. Left-justification is also the default text setting on the Internet today. The length of the plain English text lines is patchy, and forcing the right justification may not be a wise choice. Designers can make good use of CSS techniques such as hyphens; letter-spacing, text-justify and others.

Fixed element retention routines cite a few examples:

  • Website headers are often displayed at the top left of the site.
  • LOGO can usually click to return to the homepage
  • Logout will normally appear at the top right of the site
  • Copyright information is always at the bottom of the footer
  • Website search box often appear in the upper right corner of the site or above the middle
  • Switch the language version of the site often appear on the right side of the site header and with the flag display more intuitive
  • The search box must be a box
  • Registration is usually in the upper right corner of the page

We advocate the use of pull-down menus only when necessary, although the drop-down menus take up less screen space, they also have drawbacks such as poor visibility of options and frustration with too many content items in drop-down menus. However, according to Jacob Nielsen’s pull-down menu, he thinks the drop-down menu does not have to be very small, and the Giant pull-down menu works well. In recent years, mega menu has become a trend in the web design, especially in the e-commerce website design and development, if used properly, it can really help users to quickly access to information, a large two-dimensional drop-down panel can navigate the options for a clear, Well-organized navigation groups free users from the scrolls they have to make. Whether the proper use of the design has become the key.

UI in sg

Giant menu advantages:

  • All options at a glance
  • You can organize the menu structure more clearly by dividing lines, rich texts, icons, picture decorations and other visual means

Giant menu disadvantage:

  • Mega menu before undeveloped is not easy to be detected by users
  • A large number of menu options occupy the screen space, covering part of the content
  • Reduce the browser size or small screen handheld device is not easy to see the entire menu content
  • Load Giant menu speed has an impact
  • Accessibility, fly-out menu can easily lead to accessibility problems, code writing needs to be more cautious

In addition, do not forget about protective design:

We should always assume that users will not use their common sense cards, will not use your site to your expectations, or be misused. So we have to have a protective design, for example, delete a document without confirmation prompt, did not provide recovery features, which will have unacceptable consequences for users; Another example, if the user enters the registration information to close the browser. Do not discard their data without asking; or, provide a useful 404 page when a page requested by the user does not exist.

read more:

user-experience-in-sg.hatenablog.com