Achieving Visual Consistency in Web Design: User Expectation and Usability Tests

Our eyes are one of the most dominant way to receive information, and it likes to see things that are tidy and orderly. Thus, to improve user experience (UX), consistency in the way we design must be taken into consideration. Designs which are visually inconsistent will feel chaotic and makes it harder for users to absorb information. On the other hand, designs which are visually consistent might just pique the interest of users and create a sense of trust. This article will discuss the first thing we must prepare before achieving visual consistency in web design: by gathering user expectations of the web.

Considering user expectation is a task to be done at the top of the list, and goes hand in hand with feature list development. How is this done? When designing a web, the first thing we as UX designers usually do is to ask ourselves what the user expects from the web. From that single question, we will formulate some design ideas for the user interface (UI) of the web, with design patterns they have applied before that corresponds to certain parts of the web. Then, we start designing from there. Sometimes it works just fine, however, by doing this, we are taking a biased approach in designing the web. We are assuming what works best with a particular component, forgetting that we need a fresh perspective.

What we must actually do is to run a test. Usability testing must be done before we even begin to think about designing. This is to ensure that what we assume what the user wants actually aligns with what the user actually wants. By running the test, we will also have a clearer picture of what the user expects. By the way it is carried out, usability test can be categorized into 3 types:
1. Moderated in-person: Tests are carried out face to face between users and developers. Because developers meet the users directly, they can easily respond to questions and
feedbacks.
2. Moderated remote: Tests are carried out by users and developers in a separate place. Developers can respond to questions and feedbacks via indirect communication.
3. Unmoderated remote: Participants from varying locations are given tasks to navigate through the web. A lot of data can be collected but there feedbacks and questions cannot
be responded on the spot.

There are varying methods to run usability tests, but this article will explain the methods that are written by Jerry Cao, et al. in their book: Web UI Design for the Human Eye: Principles of Visual Consistency. The methods mentioned in the book are especially useful if we want to run usability tests before the design process.
1. Card Sorting: It is a test that can be used to develop navigation in the web that we want to create. A hierarchy for the information that we want to convey in the web is determined by the users in the most natural way possible. The test can be done in two ways: the first is to let users divide certain information components into a few groups, after which we let them name the groups. This might give UX designers ideas as to what they should name the navigation hierarchy during the design phase. The other is to let users sort certain information into a predefined, named group. This is useful when the web structure has been established.
2. User Interview: It is also a commonly used method when gathering requirements in Software Engineering. Questions and answers are exchanged between developers and users. The interview should have sufficient sample from a varying range of users. Varying in the context of the target audience that we are trying to capture with the web. Interviewees should be someone who are potential targets for the web, ranging from person who has no knowledge but is interested about the information that we are trying to spread via the web, and professionals in the subject matter. When asking questions, do not ask deeply specific design questions, rather ask questions that could determine
the user’s behavior and needs. User tendencies are especially useful in web UX design.
3. Evaluating by Competitor Designs: This method is a modification of Heuristic Evaluation, a test run by examiners to the UI of the application, against well-established principles of usability (heuristics).

However, it is mainly focused on judging the competitors’ designs. The method has the following process:
1) Determine the fields to be evaluated: what fields are the web going to compete in, what are the competitive edge of said fields. List the criteria to evaluate.
2) Conduct the evaluation: using the list of criteria, go to competitors’ UI and UX design and evaluate them by giving scores for each item in the list.
3) Diagram the results: draw a graph to efficiently present the gathered data to the team.
4) Compare the results: Comparing the competitors’ scores will lead to an understanding on what users might expect in the fields that we are going for. We will understand what we have in common and what components are different with the competitors, what is consistent in the field we are working on and what is not. From that information, we can deduce what part of the web should follow the mainstream design, and what should break away from it.

References
Jeff Sauro. 11th August 2015. https://measuringu.com/five-types-usability/
Jerry Cao, et al. 2015.Web UI Design for the Human Eye: Principles of Visual Consistency. UXPin
inc.

Author: Jeffry (1901466471)
Supervisor: Dewi Suryani, S.Kom., M.Eng. (D5878)