Five Design Principles for Better Webpages
Have you ever visited a website that felt like it was made by an amateur? I know I have. Sometimes it’s the aesthetics, and sometimes it’s how I easily get lost within the site and can’t find my way around. A great way to avoid amateur mistakes is to practice and implement guidelines from multiple design principles. There are a lot of them, and I recommend checking out the book Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler for more information on how to utilize them. I’ve identified five common principles that can greatly improve the usability and aesthetic of a webpage: alignment, consistency, iconic representation, legibility, and wayfinding.
Alignment
It can be fairly obvious when a webpage doesn’t implement a standard alignment for various items because it’s one of the first things you notice. It’s a very simple thing, but it can have a massive impact on how users perceive the page.
Alignment is the placement of items in a way that they line up along a common row, column, or center. All elements should be aligned with at least one other element to create a more stable aesthetic.
To the left is an example of a message board for a video. Each comment corresponds with a timestamp of the video, indicated on the left of the user’s name. All of the timestamps are aligned with each other, as well as the user’s names, and the replies. This creates a natural flow for a viewer to read through comments.
Consistency
The principle of consistency asserts that usability and aesthetics are greatly improved when alike features are expressed in alike ways. In terms of usability and functionality, consistency across many parts enables people to use their existing knowledge about how the design works. Consistency for aesthetics enhances recognition, and sets expectations. In the image above, all replies are show up underneath the original comment and are a different color. This helps users to know what type of comment they’re reading. They know that replies will always look different than original comments, so they are correct in assuming that their own comments and replies will look the same. Not only is consistency important on single webpages, but it’s very useful across entire websites. Imagine if a navigation bar changed where it appeared on a page, depending on which page you are visiting. How frustrating would it be to have to locate something that should be consistent site-wide? Ensuring that similar parts look like other similar parts will reduce a lot of frustration from a user’s standpoint.
Iconic Representation
There’s a common phrase that states, “a picture is worth a thousand words.” Icons may not be worth that many words, but they can be monumentally helpful when trying to convey information without cluttering a page with text. Using icons can improve recognition of signs and controls. Icons generally indicate the type of action or object that it represents. The picture below has six icons, each indicating to the user that they can comment in several different ways. The default is set to the comment bubble icon, which represents words or text. The video camera icon indicates you can upload a recording, the microphone allows you to record your voice, the up arrow has a universal meaning to upload files. The next icon is meant to represent a longer text response (this app has a character limit for comments), and the last icon of three vertical dots is another universally understood representation that if a user clicks on it, more options will appear. All of these icons present so many options to the user without overwhelming the design with text.
Icons should be easily understood, should not confuse the user, and should do what the user assumes it will. It would be very bad practice to take a universal icon and make it do something else, like if a user clicked on the vertical ellipsis and the comment submits instead of showing other hidden options.
Legibility
Digital design trends have changed drastically over the last 15 years, and one of the biggest improvements is the focus on legibility, or visual clarity of text. Legibility of text includes the size, contrast, font, spacing, and text-block. As a general rule, printed text should be between 9–12 point type. Text should always have a large contrast of more than 70% from its background. Use a dark text with a light background, or vice versa. Avoid patterned backgrounds. The font should be readable, especially for body text. Sometimes you can use fancier, ornate text on titles or headers, but do not make it hard for readers by using fancy fonts. Text-blocks should have line lengths of around 3 to 5 inches for standard point types. Text that goes across an entire page is hard to read and it never looks good.
In this example, the buttons on the left show bad legibility and the buttons on the right show two possible improvements.
Wayfinding
Wayfinding is how a user can orient themselves within a website so they know where they are and how they got there. There are four steps to wayfinding: orientation, route decision, route monitoring, and destination recognition. Orientation means determining location based on contextual clues like landmarks. Route decision refers to choosing the method for getting to the next destination. Routes on websites should be short and simple so that users don’t have to make too many decisions and possibly end up somewhere they don’t want to be. Route monitoring refers to checking the chosen route for confirmation that it’s going to the correct destination. One popular technique for route monitoring is something called “breadcrumbs”, which are visual cues that highlight the path that has been taken. Destination recognition is when the user knows they’ve arrived where they wanted to go.
A very popular way to implement wayfinding is within a navigation menu. Menu items could change color based on the user’s route or current location. If a website has many subcategories, showing the route of how a user got to that page could help them navigate backwards if they end up lost. Wayfinding is crucial for keeping users from exiting your website due to confusion.
There are many more design principles that should be utilized when designing a website, but these are the top five that are simple to implement and yield the best results when used correctly. Anyone visiting your site will appreciate the care in aligning items along common lines, displaying similar parts consistently, using icons to indicate certain actions or objects, using correct legibility text conventions, and providing a way for them to easily navigate the site.
Erin Hancock is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to the DGM 2250 Course and representative of the skills learned.
