Good Cop, Bad Cop
Today, we have access to a website for everything. I sought to find out if all websites are created equal. The best websites aren't always the fanciest, but they have some distinct qualities. Here are some tips and tricks for designing great, user-friendly websites.
1. Accessibility
Websites must be usable by anyone, anytime, anywhere. Users quickly get frustrated when they don't understand how to access a website and often switch to a more user-friendly site. Site functions should be self-explanatory, so visitors don't have to think. This also applies to websites requiring users to sign up for an account before viewing the site. Most users will search for sites they can use before putting in the effort to sign up. This HubSpot article lists website usability testing, including the services of Richard Littauer. Littauer's company, The User Is Drunk, offers a video review of your website after having several drinks to examine user-centricity.
2. Organization
Most internet visitors will search for the most relevant or eye-catching information available. Organizing with this visual hierarchy in mind is essential to creating a successful website. According to the articles I read, site structures should naturally draw attention toward the most important elements.
3. Responsiveness
Our smartphones offer access to the World Wide Web in seconds, so websites need to adjust and respond to the restraints of mobile devices. Nearly all mobile viewers will leave a website immediately if the page doesn't display correctly. Responsive web designs use flexible structures to adjust to mobile requests, which allow smaller devices to load pages properly.
4. Conventionality
Conventionality is more of a paradox because your website should be original but also comply with user expectations. For instance, we expect the company logo to be at the top left or center of the homepage. Visitors expect the navigation menu on the top right or along the left side of the page. We anticipate contact information, links to Frequently Asked Questions, Careers, or other navigation at the bottom. Originality is important but changing these set conventions disorients your viewers.
5. Navigability
The structure of your website should follow an intuitive navigation design. Many successful websites base their structure on a sitemap frame that showcases the relationship between the main page and each subsequent page. Based on the extensiveness of each page, you may consider "breadcrumb" navigation that allows users to return to a specific page without repeatedly reloading each page. Breadcrumbs usually appear as a ">" logo (i.e., Home > Environmental Responsibility > Areas of Impact > Responsible Sourcing). All websites should have a navigation menu visible and easily accessible. Website engineers also recommend implementing navigation options at the bottom.
6. Efficiency
Humans are impatient and demand constant gratification but don't want to put in extra work. Simplified websites limit the number of required clicks (and thus the effort) to find satisfying information. Dropdown menus are a good option because they allow visitors to preview menu options before clicking on each tab. Search bars also enable users to search for keywords related to their interests. Websites that provide paid services or subscriptions should be straightforward with their rates. Regardless of price, websites that are direct with their costs resulted in less aggravated consumers.
7. Search Optimization
"Google it!" Most of us have used and heard this phrase many times. Websites that optimize for search engines have more inbound traffic from users who are searching for specific interests. However, optimizing for search engines should be considerate of potential typos and similar keywords. Metatags, alternate captions for images, and page titles are good starts. Content should also include possible keywords that people would likely use to search.
Using these guidelines, let's compare some examples of good and bad sites. I stumbled across a particularly poor example of good web design while looking for a local chiropractor: Elite Performance and Rehabilitation.
The warning codes at the top are the first red flag. I applaud the use of functioning image carousels and clickable buttons, but the excessive whitespace underneath the buttons made me wonder if something wasn't loading. Their service buttons correctly link to more information. Scrolling down the homepage, they have icons that rotate when you hover over them to offer more details.
In the block concerning insurances, they have a carousel of insurances covered at the clinic with a button that implies a link to more insurances. However, this link goes to a Frequently Asked Questions page without showing users where to find more information on their insurance plans. My grandparents use this chiropractic service monthly and, though the website claims the clinics take Medicare, they do not. The "FAQ" page offers various questions (as it should) but gives vague and occasionally irrelevant answers.
The "How We Help" page is a word-for-word repeat of the information provided on the homepage. As far as pricing goes, they offer no solutions on how much their services cost except for massage therapy. I understand that insurance impacts out-of-pocket expenses, but they should still provide information for prices without insurance. Back to my grandparents, they pay without insurance coverage (I won't exploit the costs of their services), but the services are comparatively affordable.
On the "Contact" page: the map is not functional. If you look closely, you can see the general area of the secondary clinic but not the primary clinic. The map does, however, state the site is under development, so I hope they can correct some of these flaws. We generally expect the contact form to include your email, name, and message where their site displays an error code. They did have other options to contact the clinic directly, which is better than nothing.
The footer of their website is long for a small local business and includes dysfunctional maps and links. I appreciate the inclusion of business hours in the footer, but the search bar is unnecessary in the footer since they have one in the navigation menu.
Overall the site has limited accessibility and inadequate (though excessive) navigation. I don't think I could personally use the site while drunk, though a review by The User Is Drink would be entertaining. The designers tried hard to make the website spunky and original but instead made it clunky and dysfunctional. There is minimal organization used, and many features are repetitive. The mobile site is much worse and doesn't comply with smartphone requirements or size. Users will have to click through multiple links but likely won't find exactly what they wanted. I did find the clinic by searching for the primary chiropractor, so some of their SEOs must be working.
For a solid example of a successful website, I searched for the highest rated websites and found Airbnb at the top of nearly all lists. As an avid traveler, I use Airbnb often, so let's dive in.
First, the most distinct feature of the page is the most essential Call To Action: the option to search for available rooms. Located front and center, the CTA can't be missed. The homepage also features colorful artwork before continuing to nearby stays and frequently searched rentals. The top of the page allows visitors to choose between rentals and experiences. Down the homepage, they offer another chance to discover experiences near your vacation stays and include a list of inspirations for future travel.
Once you enter your desired getaway, you have unlimited options (or optional limitations). The filters include any concern or request you might have, and the interactive map allows you to search for stays in a specific neighborhood. The space is user-friendly and easily accessible. I have successfully used this site for possible vacations while drinking, so it's safe to say nearly anyone can use it. Many of the web design reviews regarding Airbnb's site reference the efficient use of minimalism. Though Airbnb does have a mobile app, their mobile site is simple and easy to use.
References
7 Qualities of a Great Website. Ideas On Purpose. (n.d.). https://www.ideasonpurpose.com/on/7-qualities-great-website/.
Friedman, V. (2021, May 20). 10 Principles Of Good Web Design. Smashing Magazine. https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/.
Juviler, J. (2020, September 3). 9 Guidelines for Exceptional Web Design, Usability, and User Experience. HubSpot Blog. https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-guidelines-for-exceptional-website-design-and-usability.aspx.
Top 5 Websites According to The Internet: Web Design. Bright Design. (n.d.). https://www.brightdesign.co.uk/5-of-the-best-website-designs-according-to-the-internet.