Meeting User Expectations: Standard Web Design Practices
When users visit your website, chances are it’s not their first time opening a web page. They will have certain expectations on how the site should behave even if they’ve never visited it before. Although it’s fine to add some artistic flare to your website, you don’t want to do anything extremely different from what users are used to. Here are some common expectations users may have that you shouldn’t deviate far from in regard to your site layout, navigation, and overall functionality.
Layout
Web developers have a great deal of creative flexibility relating to the layout of a site. There’s no single rule defining the layout. However, at the very least, your site should have three areas: a header, a main content area, and a footer. How you choose to arrange the components within these areas is up to you. Users expect to find certain information in each of the three sections.
Header
The header is at the top of the site. It should always contain the site title. The main menu should be part of the header, or directly above or below it. It’s appropriate to put a short tagline about the site and the site’s logo here as well. The header should look identical across your website, with limited exceptions for slight variations or landing pages.
The best practice is to place your header within a <header> element. This tells search engines and accessibility software where your header is. You can treat it like a div. The header is different from the <head> section where you load scripts/css/metadata.
Main
The main content area should contain the bulk of the page text. This might be a WordPress page, a blog post, an article, etc. It contains the content the user visited the page to see. The layout of the main content area is up to you, but it should be responsive and easy to navigate.
The main content area of your page should be placed within a <main> element.
Footer
The footer sits at the bottom of the page. Links to other important documents (terms of service, contact page, careers page, privacy policy, etc.) are often found here. The site’s copyright information should be here. You may optionally include business contact information, the site title, logo, or tagline down here as well.
The footer may be placed within a <footer> element.
Navigation
Users should easily locate your website’s menu so they can navigate to different areas of the site. It shouldn’t be hard to find. The most important links should always be near the top of the site in or around the header area. The exact location may differ from site to site (left, right, center), but it should always be near the top. With limited exceptions, the user should never have to scroll down from the top of the page to see the main menu.
For menus with more than a few items, it may be more appropriate to create a second menu besides the top menu in the site’s left or right sidebar.
Dropdown menus should be used sparingly, if at all. They should be touch friendly. It should be easy to tell they’re dropdown menus. Do not hide important links behind dropdown menus, or some users may not be able to find them. Do not create overly complex dropdown menus. Avoid dropdown menus that go deeper than one level.
On mobile devices, the menu should reveal itself with a clearly placed toggle button. The links should stack to be easily clickable. If there are only a few links, about four or fewer, you may still be able to display them horizontally as you would on desktop. You may also display them in a grid. This is usually done in combination with icons.
If you use icons in your menus, you should almost always put a text label under the icon. Extremely common icons like home and search buttons may not require labels, but don’t assume everyone knows what each icon means.
Navigation should be consistent throughout your entire site. The location of the menu shouldn’t change from page to page.
Finally, users expect some of the more boring, but still important links to be in a menu in the site’s footer. Links to documents like the terms of service and privacy policy are usually found on the footer of each page.
Standard Practice
It’s best practice to put the main menu within a list in a <nav> element. This is where accessibility tools and search engines will first look to determine how to navigate your site.
For example, a basic main menu might look like this:
<nav>
<ul>
<li>
<a aria-current="page" href="#">Home</a>
</li>
<li>
<a class="nav-link" href="#">About</a>
</li>
<li>
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</nav>Code language: HTML, XML (xml)Note that the aria-current=”page” attribute is used to indicate where the user is currently at on the website. This is for accessibility purposes. So the location of this attribute should change if the user navigates to a different page. Always use links (a elements) rather than button elements for menus.
Here’s an example of a basic layout using all the above elements:
<header>
<h1>My Cool Website</h1>
<span>The best website ever</span>
</header>
<nav id="main-menu">
<ul class="menu-horizontal">
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About</a></li>
</ul>
</nav>
<main>
<h2>Welcome to My Website</h2>
<p>This is my website. This is a sample layout.
This is where I would put my main article and other page
content.</p>
</main>
<footer>
<span>© 2022 Kevin's Guides</span>
<ul class="footer-nav">
<li><a href="/tos.html">Terms of Service</a></li>
<li><a href="/privacy.html">Privacy Policy</a></li>
</ul>
</footer>Code language: HTML, XML (xml)Standardized Icons
Users expect certain icons to mean certain things. It’s important that you don’t deviate far from these standardized icons and keep their behavior consistent.
Menu Icons
The menu icon is most commonly represented by three horizontal lines. This has become known as a hamburger menu, since the three lines vaguely resemble a hamburger (two buns and a burger). It usually shows that there is a hidden menu, and the user can click this to open it.
Some hamburger menu icons may have more rounded edges to the lines or different spacing between them. This is OK. However, they should always be uniform and aligned.
If you don’t like the hamburger menu, an acceptable alternative is to just use the word “Menu” in its place.
Ellipsis menus are also OK, but not as common as the hamburger option. The ellipsis menu usually means there’s a dropdown with options or features a user can select from rather than a navigation menu.
Finally, the Bento/Grid menu is arranged in a grid. This icon is most commonly used for menus that link to different main sections or categories of a site. It may also be used for any menu that displays its contents in a grid layout.
For most site menus, I’d recommend going with either the hamburger menu or the word “Menu” typed out.
Other Common Icons
The icons above may use slightly different styling. You are free to change their colors as you see fit to go with your website’s theme. However, you should avoid selecting icons that are drastically different from the above, as it may confuse your users. If you don’t like the icons, you can always write out the word in a button.
- The home icon is nearly always a simple house with a rectangular base and a triangle roof. It should always return the user to the front page of the website, the index of the site.
- The search icon is always a magnifying glass to indicate that it’s used to search for something.
- The social sharing icon is three dots connected by lines. This represents a social network, sharing from one dot to another. Occasionally, a box with an arrow coming from it may also be a share icon. The arrow share icon usually has more functionality than the social sharing, allowing the user to share via email or print as well.
- The close button is always an x, like the x in the upper right hand corner of Windows applications to exit. It should be used on dismissible windows, dialogs, notifications, or popovers.
- There are two types of expand and collapse icons.
- The down arrow or the plus sign indicates a dropdown or expansion. The up arrow or minus sign indicates a collapse.
- A collapse should hide whatever is expanded by dropdowns. These are most often used to hide additional details the user might not want to see at first.
You may find it beneficial to use an icon library/icon font like FontAwesome to load your icons. This ensures consistency across devices and standard practices.
Testing and Feedback
It’s important that you test your website across a wide variety of browsers and devices to ensure nearly everyone accessing your website can use it. If you’re developing with a team of people, it’s relatively easy to get feedback on design changes and suggestions for improvement. However, if you’re a solo developer or hobbyist, it may be more difficult.
Avoid making assumptions about your users. Unexperienced users can provide valueable feedback. Your friends and family may make good testers even if they aren’t your primary target audience. They can notice things you didn’t, or try to do things you didn’t initially expect. Be open to their feedback, suggestions, and questions. If testers have issues navigating or using your website, look into these issues and see if there’s anything you can do to make the experience more usable.
Browser/Device Testing
When creating a website, you should make sure it works well on the major browsers. At the very least, I would aim to test a site out on:
- Chrome – Desktop
- MS Edge – Desktop
- Firefox – Desktop
- Safari – Mac
- Chrome – Android/Mobile
- Safari – iOS/Mobile
Ensure that the menus work, the images load, and any interactive/JavaScript experiences are not broken on any of the above devices. If you don’t have access to a Mac or iPhone for testing yourself, you can use a service like browserstack.com to preview how your site works on these devices.
User Feedback
After publishing your new website, or any major changes, ensure your site has a way to submit feedback. This could be a simple contact form. This way, if any users encounter an experience breaking bug or other minor issues, they can submit feedback for you to look into.