THE AVION
B4 RUX Corner
The Good & Bad of Website Design
Jessyca, Ali, and Kobe are students in the Research in User eXperience (RUX) Lab in the Department of Human Factors and Behavioral Neurobiology. RUX investigates the usability and user experience of technology in our everyday world. This is a regular column that explores different technologies typically used by Embry-Riddle students. Jessyca Derby Graduate Researcher Alexandria Gombas & Kobe Reese Undergraduate Researchers Have you ever looked at a website and just wondered why you couldn’t understand it at all? It was probably because of the website, not you. Because of bad design, websites can become cluttered, hard to read, difficult to understand, and frustrating to use. To avoid this, designers often use heuristics, or best practices, to develop an interface. These are created based on the cognitive limitations and capabilities of people using the site. Nielsen's Ten Usability Heuristics are the most common heuristics that are used. Here in this article, we are diving into a few of them: aesthetic and minimalist design, visibility of system status, the match between system and the real world, and consistency and standards. Nielsen's Ten Usability Heuristics 1) Visibility of System Status 2) Match Between System & Real World 3) User Control & Freedom 4) Consistency & Standards 5) Error Prevention 6) Recognition Rather than Recall 7) Flexibility & Efficiency of Use 8) Aesthetic & Minimalist Design 9) Help Users Recognize, Diagnose, & Recover from Errors 10) Help & Documentation
Photo Courtesy: Yahoo.com & Google.com
Left: Poor aesthetic & minimalist design on yahoo.com Right: Simplistic design on google.com
For example, have you ever visited a site for the first time and looked for a specific item but didn't know where to start? To find what you needed, you probably spent a great deal of time browsing the homepage. It may be because the interface layout didn't have important information organized so that you could identify correct action items; this is usually the case with a cluttered display.
All of the information you need is clearly stated in a prominent place in the center of the screen. Match Between System and Real World Match between system and real-world addresses the fact that people come in with expectations. It notes that their prior knowledge affects how they
Visibility of system status is another way of saying that the user understands what is going on within a website. An example of this is seeing a loading symbol after clicking on a link. This tells you that it is working on something so that you don’t feel the need to repeatedly click to get a response. A lack of visibility can cause stress and annoyance because a user may not know if there is an error or how to fix it. Another notable example of this heuristic would be clear confirmation messages, such as popups on online stores, like Amazon, use to indicate that something has been added to a list or a cart.
Photo Courtesy: ssc.com
interact with a website. For example, it might be challenging to navigate a website filled with acronyms, jargon, or icons that you haven't seen before. How
Aesthetic and Minimalist Design
Photo Courtesy: Amazon.com
Consistency means that specific formatting in one place has the same meaning as it does in another. Standards are the rules of thumb for the formatting of a site, which the user expects or is used to. An example is underlined blue text indicating the text is a hyperlink or bold text to signify important information. Being con-
Visibility of System Status
(Credit to Jessyca Derby)
The central idea behind the aesthetic and minimalist design heuristic is based upon keeping a user interface (UI) display balanced between relevant information and irrelevant information and making sure that they are distinct from one another. This heuristic guideline details that anything on a UI that presents itself as information such as pictures, words, infographics, videos, icons, buttons, and others needs to be formatted in a way that avoids clutter and is easy to understand. An interface that fails to do this may result in confusion with intended actions or tasks.
Consistency and Standards
Example of poor consistency and standards
sistent and following standards makes the site easier to read and makes navigation efficient. Websites defy this heuristic if every line has a different font, color, and size. This can be confusing to look at and can make some lines hard to read. It violates the standard of hyperlink formatting because it uses blue text that is not a hyperlink, but the line of blue text further down is. The varying sizes and colors make it confusing to identify relevant information; uniformity of text style is crucial to readability. Making the text the same size, style, and color, and distinguishing hyperlinks would make this information easier to read and understand. Conclusions
Photo Courtesy: Jessica Derby
Labels help explain the icon’s function
The messages clearly states what was done, where the item was put, what it was, and what other options that you have after the task.
Confirmation message for adding phone chargers to a list
would you know what to click on an aviation weather website if you don't know what METAR, TAF, PIREP, or SIGMETs are? Or you might not know what an icon means and what would happen if you click on it unless it is labeled clearly. It's essential to consider those who have limited background information and may use your site during the designing process.
Usability heuristics, such as Nielsen's Ten, are used to assess interface optimization and design based on optimal usability and cognitive load. These guidelines can help design a website to be functional, understandable, and easy to navigate. In the Research in User eXperience (RUX) Lab, we are using heuristic guidelines to create our own website detailing what we do and what the lab has to offer. By following these heuristics, we are aiming to avoid mistakes other websites have made in the past and are hoping to create a website that puts the user’s experience first.