Catching Your Eye: Using UI Principles to Design a Website
Note: The content in this article has been adapted from a discussion I wrote for an online course; “Introduction to User Experience Principles and Processes” is an online course offered by Coursera and by the University of Michigan. You can enroll here!
There are many different strategies that user interface designers can employ, but one core idea is considered the priority in all designs: make it easy for the user.
In this article I will be analyzing and evaluating two different website interfaces. For our purposes, I will be mainly focusing on the following design principles: the use of primitive visual features and considerations of short-term memory. I will be analyzing these concepts in respect to two different websites.
Good example: Netflix’s home page
Immediately, we are shown a preview for the default program on the home page. This is a primitive visual feature and it catches our eyes much better than a static screen would. Netflix has the added advantage of presenting different colors representing different programs to watch, which contribute to grabbing our attention.
The website also makes use of the pop-out “Play” button on the left side of the screen. The contrasting colors that highlight the presence of the button allow for it to be easily detected, making it convenient for the user to begin watching their program.
One other desirable design characteristic we see here is in the toolbar located at the top of the screen. Items are separated into various categories, but do not contain lengthy lists of information (a proper design considering the short-term memory limitations of users).
Overall, both the nature of the service Netflix offers (an online streaming platform for television and motion pictures) as well as their design strategies allow them to maintain a strong interface and enjoyable experience for the user.
Opportunity for growth: Craigslist
I am interpreting the visual layout of this website in accordance to the design principles I learned, but before I get into it I want to acknowledge something: in my own experience, and in the experience of some who use this site, the minimalist, category-heavy layout is actually seen to be a preference. Maybe this “give-it-to-me-straight” preference is a positive component of this design for some users. However, I think there could be a potential benefit with an updated layout, and let me explain how.
First off, we see tabs on both sides of the website. This is more of an “H” letter visual layout of information, with tons of lines of text connecting two separate bars of text-heavy items. Typically, users follow an “F” pattern when visually scanning a webpage for information. Consolidating all these items into a left sidebar and top bar could be more effective and also could create space for other items.
Furthermore, there are no visuals, only text, with the only opportunity for “pop-out” items being bolded text and a slightly greyed text box. I think that these can be updated with more colors (i.e., a darker text box background and a different color header for each category header). The lists clearly do not take short-term memory limitations into account and for an inexperienced user this could cause problems identifying the right place to accomplish their task. This could be improved by creating separate pages for each main header and then organizing the subheaders in a way that is easier to palette visually.
No matter what strategies you use, the success of your website’s design truly rests on only one thing: make it easy for the user.
