Finding information online has become second nature to us. Whenever we have a random thought or need, we simply pull out our phones and search for answers. How many stars are in the Milky Way? Just Google it. What time is the movie starting? Go to the movie theaters website and get the showtimes. Both Google and AMC theaters have perfected their website so users can find what they’re looking for quickly, which makes for a great user experience.
What makes these sites better than others? What are the key factors in creating a good website? Here’s a list of 6 essentials to follow when designing a website:
1. Keep it Simple
The most crucial rule in web design is to keep it simple. The user and their desired action take precedence over any artistic stylings. Going back to the example of AMC theaters, if the user’s goal is to see a movie, AMC gives them their answer in one step. All the user had to do was type in their zip code, and AMC presented them with a list of the movies playing and their showtimes at the closest theater. There were no pop-ups, no promotional text, and nothing blocking the user from getting the answers they were looking for. The experience was extremely straightforward.
2. Use Conventions
At a young age, we are taught to read, starting at the upper left of a page and moving down to the lower right. In the same way, we have become conditioned to website design standards. For example, we expect the site logo to be on the top and click back to the home page. We also expect the navigation to be at the very top, blue words with underlines to link to somewhere, and long rectangles or pill shapes to be buttons. Straying from these basic web conventions can frustrate users and lead them to abandon the site.
Take a look at the Yale School of Art example; this site does not use any website convention and leaves the user wondering where to start. Would a potential student know where to enroll? It’s nearly impossible to figure out what the school has to offer. Instead, look at the Paier College of Art website. Although Paier doesn’t have the same prestigious name Yale does, a student looking for an art school in New Haven, CT, would have a much easier time navigating through the Paier website.
3. Use Visual Cues
The next essential part of a good website is to use visual cues to let people know where they are on the website. For example, if a user clicks on an element in the navigation bar, highlight the tab and properly name the page, so the user knows they landed on the page they clicked. Then if a user continues to click, it helps to keep highlighting the navigation in some way, so the user knows how they got there. A breadcrumb trail is also beneficial. For example, Ebay is a highly robust website with countless items for sale, yet it does not overwhelm the user and shows them exactly where they are within the site with bolded text in the navigation and a breadcrumb trail.
Additional visual cues that are reassuring to users are loading animations, button rollover states, or a completion bar showing the number of steps left in a process.
4. Include Information Hierarchy
Make the most critical information the hero and keep it conversational. Users will pass over the promotional language, so the writing must be easy-to-read and concise. Keep text blocks short and use subheads since users prefer to scan. Using images and lists also helps to break up long articles and helps a user find the information they’re looking for faster.
5. Make the Site Responsive
Over half of website traffic is from mobile devices such as smartphones or tablets, so a website must work on multiple screens. A responsive website means that the elements of the website change size in response to the screen it’s on. If you compare the Orbitz desktop site to their mobile site, you can see all of the design elements are identical. Still, the most striking difference is how the form fields stack up and the elongated search button built for easier visibility and tapping. Orbitz does not break from its branding and keeps the same user experience on both devices.
6. Make it Accessible
Take the extra step to name every page, use alternative text for photos, tag headlines with H1, H2, etc., and use contrasting colors. These are essential website best practices, but they are critical for people with disabilities. This includes people with physical, auditory, or visual disabilities but also people with temporary disabilities like a broken wrist, bright sunlight, noisy area, or slow internet connection. By incorporating web accessibility standards into your website, you make it inclusive for all and more user-friendly. Simple online tools like WAVE will scan your website and flag the potential problem areas so you know exactly what needs to be adjusted.
When designing a website, keep the user at the forefront. What are the goals they need to achieve? Also, think about what you prefer in your own online browsing experience and design around the functionality you like. Users will appreciate it when your site is easy to use and it provides them with the information they’re looking for. If you can accomplish that, they’ll keep coming back.