Websites today can often be the first communication a business has with future clients. This first impression, however, can be a lasting one. Statistics indicate website visitors are quick to judge:
- Skilled cites website visitors take 90 seconds to assess a website; however, a study in Behavior & Informational Technology journal cites this number could be less than even 1 single second.
- Skilled cites that 93% of visitors consider overall website design to the number one factor affecting their purchasing decisions.
- Quicksprout cites that 40% of consumers abandon a website that takes more than 3 seconds to load.
There are many things that impact a website design and a user’s experience with it. To create the best experience, these ten things better be in your website:
- An attractive and clear Design System
- Clearly stated Unique Selling Proposition
- Subject matter expertise
- Supporting evidence
- Authentic shots
- Breathing space
- Clear calls to action
- Accessible contact information
- All the necessary legal documents
- SSL protection
From graphic design, to information hierarchy, to content strategy, these ten requirements lay the foundation for a strong, convincing website that leaves visitors informed and excited about your brand.
An Attractive & Clear Design System
A design system is probably the very first thing a user sees when a website begins to load, so it’s important that designers implement it excellently and consistently. The builders behind the popular UI/UX prototyping tool InVision defines a Design System as a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Briefly, a Design System contains brand guidelines, UI libraries, and usage rules:
A company’s Brand Guidelines documents, also known as a Style Guide, includes rules for designing the graphic components: the fonts, color palettes, logos, key patterns, and so on.
A UI Library or Pattern Library documents the (finished) component designs: menus, buttons, Call to Action treatments, image styles, typographic sizing and rules, grid systems, and master templates.
Finally, usage rules explain how to properly and consistently implement these components and designs across media channels, including social media habits, copywriting, and editorial practices.
For further discussion, UX designer Zack Rutherford explains the differences between these and how they are used in Design System at UX Pin. Together, brand guidelines, UI libraries, and usage rules form the pieces of a complete Design System.
Skipping a Design System may lead to issues later. Common problems include inconsistent application of a company’s visual identity:
- Several tints and shades of a hue confusing the official color palette
- Items of lesser importance carrying greater visual weight through larger sizes or bolder colors
- Varying templates change layouts from page to page, constantly breaking and reforming user habits
- Bloated design storing and using many more components than necessary
- Components and templates aren’t reusable as the design scales
Sadly, Design Systems are struggling to get a market foothold: when asked what their favorite Design System tool or software is, most respondents skipped the question entirely in UXtools.co’s 2017 survey. SparkBox’s 2018 Design Systems Survey also cited that Design Systems are often perceived as “low value.” (Update: also see the 2019 survey.)
The trends are changing however. Many in-house creatives have found Design Systems very useful in eliminating the above problems.
SparkBox’s 2018 Design Systems Survey also reveals that the primary motivators for creating Design Systems are UI/UX consistency, efficient design and development, and code reusability. The same survey cites 60% of respondents who did implement Design Systems claiming the Design Systems were “successful” or “very successful.” Indeed, the largest deterrent from implementing Design Systems was not a perception of low value, but rather a skills gap in locating the talent to make one.
People are increasingly excited about Design Systems. In the news, InVision is debuting its own InVision Design System Manager to compete with Sketch’s native libraries and expand the market.
Fortunately creating a Design System isn’t difficult. With planning, foresight, and communication across the design, development, and marketing teams, a Design System results in much more efficient work in-house and a better experience for users.
For inspiration, check out the following examples of publicly available Design Systems: USAJobs, HubSpot Canvas, and MailChimp.
Clearly Stated Unique Selling Proposition (USP)
Every businessperson needs a Unique Selling Proposition (USP), also called a Unique Value Proposition (UVP). A USP is the one factor that makes a person or company different from competitors and enticing enough to convert users.
When determining a USP, highlight benefits rather than features. Features might include technical specs, efficiency stats, adoption rates, numbers of followers or users, or other numbers.
Yet facts alone obscure why a company is better than others. Find the relationship between features—the overarching goal—and explain why these features help users in their day-to-day and accomplish their tasks and interests. A USP might highlight specialization as offering the best expert in the industry launch products quickly and excellently. Another USP might highlight low-cost to explain how users can do more with less.
To help brainstorm your USP, check out my related articles on professional skills and success:
What You Get By Hiring a Designer Besides Adobe
With a solid USP prepared, make it prominent in a website. While some companies declare the USP straightforwardly in a tagline, perhaps within a hero image above the fold, also consider showing the USP in other ways. For a USP in expertise, tailor the content strategy accordingly, and write long, in-depth blog articles and case studies. This USP, then, isn’t written out in a tagline, but illustrated instead with written communication and knowledge sharing. For a USP in low-cost/high-value, consider offering freebies to website visitors such as a downloadable infographic or report. A website’s Calls to Actions (CTAs) should also relate back to the USP in some way. A USP is most prominent when incorporated throughout the website, reminding users of the USP wherever they go.
Subject Matter Expertise & Supporting Evidence
All users interested in conducting business want their business handled by an expert. Users want to feel their investment of time, money, and resources is worthwhile. Meanwhile businesses want to share their products and services and build powerful relationships. A website should show this Subject Matter Experience (SME).
SME might be hinted at short statements like “I’m a designer with X years of experience” or “Our company offers X years of combined experience” or “Don’t believe us? Believe our X,XXX followers!” These statements help website visitors position the business within an industry. They help distinguish the amateur, the up and coming, and the mature.
However Subject Matter Experience is best conveyed by example, like:
- timely news and updates;
- tips, tricks, and tools;
- explanations of best practices and when/how to deviate;
- insightful case studies;
- behind-the-scenes looks at a business process;
- clear communication and documentation;
- and in-depth research and discussion of relevant topics.
Strengthen claims with supporting evidence.
Citing pertinent sources such as trustworthy and authoritative news sources or prominent agencies lends credence.
Statistics and numbers also help too. Stats might relate to an industry study, or analytics gathered from a creative project.
Word of mouth can be helpful as well—press releases, social proof, and testimonials can be powerful. A high number of followers also suggest that has one is offering something high in demand.
However, be careful not to rely too much on a bandwagon approach. Don’t crowdsource brand control. Testimonials, review rates, and followers alone do little to explain the expertise behind the scenes, where outsiders aren’t always privy. Instead, keep sharing knowledge and expertise and the rest will follow.
Authentic Shots
A website isn’t static—it should be interactive. Many relationships begin when a user visits a company’s website, so to foster that relationship, the website must be interactive. One way to make a website feel more interactive is in-action shots. Carefully select the imagery in hero images, icons, portfolio works, and case studies.
Today’s users increasingly desire transparency and authenticity.
For example, it’s well-known that people like seeing photos of other people.
People will even go so far as to follow the model’s gaze to wherever he or she is looking. One source for this is the study, “Eye gaze cannot be ignored (but neither can arrows)” by Giovanni Galfano (Galfano, 2012). This creates the effect of “humanizing” a brand and encourages engagement. Strategically position Calls to Action to align with gazes to encourage website visitors to follow suit.
Stock photography is also seeing a downward trend.
VWO Blog shared a case study by Harrison Movers in which they replaced a stock image of a moving couple with an actual photo of their moving crew and another version with an actual photo of their moving truck—both “authentic” photos resulted in significantly more clicks on their CTA button, “Request a Quote,” and boosted consumer confidence levels (Chawla, 2014, Feb. 21).
MarketingExperiments witnessed similar results in a case study for a consumer credit counseling service: visitors were 35% more likely to sign up for a free consultation when viewing an actual photo of the service’s founder rather than a stock photo of a smiling woman (McCraw, 2011).
The images on a website should provide context of use. Besides trying to attract attention and engage users, images should be informative as well. Images showing people interacting with a product is useful, and as well as glimpses into a workflow for people interested in a service.
Breathing Space
Strategic whitespace is a must for website design. Whitespace is the intentional use of negative space to organize visual information, show relationships between elements on a page, improve readability, and draw attention to certain areas of a design. In fact, most websites benefit from strategically increasing white space.
UXPin shares several case studies where increasing white space improved websites (MacDonald, 2017):
- Users visited gDiaper’s CTA pages 150% more and the whole website’s overall conversion rate increased 20% after adding spacing between primary elements—a banner and two CTAs.
- User conversion rates increased to 15% instantly and their web lead revenue increased by over 70% over time after removing a sidebar, re-adjusting the layout, and moving CTAs to the top to create more whitespace in a webpage for Cummins Allison.
- User engagement increased 20%, users added 5% more product to the cart, and 33% more users completed the purchase after removing extra links and increasing white space around CTAs in a product page for Shop Xerox.
White space is not empty space. A cramped layout feels just that way to users. It can look “busy,” and users might not know how to navigate through it, focus on key elements, or notice any CTAs.
Indeed, an infographic of upcoming 2019 graphic design trends by Graphic Mama claims “open, airy layouts” will be high in-demand.
Conversely, too much white space can be just as confusing for users.
If additional content isn’t visible on the screen, users may not know to scroll for more and miss it entirely. Popular web design trends like full-screen hero images/videos, disjointed grid layouts, hidden carousel controls, and disruptive ad placement often fall victim to this “illusion of completeness.” Avoid this problem by hinting at additional content. Don’t make a hero image full-screen, but rather leave some content peaking below. Include content that “disappears” off screen to encourage users to scroll. Provide visible user controls so users know to swipe or click to advance.
Clear Calls to Action
Another important aspect of a website design is a clear Call to Action (CTA).
No page should be a “dead end;” every page should have some CTA for the user. An About page might lead users to a Contact Form. A blog article might ask users to share the article on social media. A Case Study might suggest similar works that might interest the user. Whatever the CTA is, be sure to include one.
There’s no magic formula for styling CTAs but a few trends generally hold true, such as:
- Choose CTA buttons over CTA images (Vocell, 2018)
- Place CTAs are above the fold, after some copy, but before scrolling is required (Google, 2014).
- Use first-person phrasing in CTAs, such as “Start my free 30 day trial” (Gheliuc, n.d.)
- Use only one CTA per website landing page to dramatically increase leads (Patel, 2014)
- Avoid using flat design to style CTAs (Nielson, 2017)
Accessible Contact Information
Contact information is an obvious component of a website. After all, once the Design System leads users to the USP and the USP inspires them, the next step is clearly contacting the company to advance the relationship.
Thorough contact information is cited as the most trust-boosting content a vendor website can offer, with 82% of respondents citing this as a “Must Have” or “Very Important” item (Huff Industrial Marketing, KoMarketing, & Buyer Zone, 2015).
However, many webmasters might not include all the contact information they should. When working with recent entrepreneurs, many of my clients felt uncomfortable publicly publishing what amounted to their own personal and private contact information. An email address, phone number, or postal address might be omitted.
Privacy concerns are definitely legitimate, and fortunately, several easy solutions exist to help business owners with that. For example:
- the business email address might forward to another personal address;
- a small JavaScript might concatenate the three pieces of an email address (username, the “@” symbol, and the domain) to prevent website robots and crawlers from accessing it;
- contact forms collect the user’s contact information while the business address remains behind the scenes;
- a P.O. Box is listed in the postal address;
- generic names like “webmaster” and “info” are used;
- WHO IS protection anonymizes webmaster info;
and more.
Some privacy practices build consumer trust more than others.
For example, website visitors love to see team biographies, including photos of the actual people. 37% of respondents call about information and/or team biographies a “Must Have” or “Very Important” item on a vendor website, according to a 2015 study (Huff Industrial Marketing, KoMarketing, & Buyer Zone, 2015).
A/B testing case studies from the VWO Blog also found that replacing pictures of paintings with photos of the artists, or replacing generic icons with photos of the authors, both resulted in substantial gains to conversion rates (Chopra, 2011).
Yet despite its importance to users, 51% of respondents think many company websites fail to provide “thorough contact information” (Huff Industrial Marketing, KoMarketing, & Buyer Zone, 2015).
Ultimately, this drives away visitors: lack of contact information is the second-highest reason for website abandonment (Huff Industrial Marketing, KoMarketing, & Buyer Zone, 2015).
Unfortunately, omitting contact information results in new problems:
- User options to contact the business are limited, making the business less accessible
- Contacting the business becomes a more difficult task and frustrating user experience
- Requiring user info without sharing in return can make many users feel like their privacy is invaded instead
- Privacy Policy and Terms of Services documents might not adhere to legal requirements, increasing business liability
(For legal documentation, please read on; I discuss this more below!)
Consider offering a least two channels users might use to contacting the business. An email and postal address might be required, but several users appreciate phone numbers, Live Chats, and social media channels as well.
Helpful Legislation
Websites must have the proper paperwork, like any publicly accessible interactive design, especially one that collects user information.
Website legislation might include:
- terms of use (also known as terms of service)
- a privacy policy
- copyright information
- limited warranty statements (if selling a product)
- disclosures for sponsored content
- disclaimers (e.g. “I am not a lawyer” or “I am not your doctor”)
The paperwork will vary depending on what information a website uses and collects, and what products and/or services are offered. Generally speaking, every website needs a privacy policy and every website should have a terms of use.
With the advent of GDPR, all websites serving European users must disclose any collection of private user data via a GDPR-compliant privacy policy. A popular webmaster solution (although hated by users) is a pop-up window when users enter the website.
However, most U.S. websites also probably meet the criteria for a privacy policy anyway. Any data collected from users results in a legal requirement—mandatory by law!—for a privacy policy. This includes contact forms, analytics, user tracking, cookies, advertising, and obviously e-commerce.
The legal paperwork provides several webmaster and user benefits, such as:
- Defines accepted user behavior for interacting with the website
- Allows the webmaster to enforce rules to improve experiences for users and safely correct bad behavior
- Limits the webmaster’s liability for issues that arise
- Explaining what data is collected from users
- Answering user questions about how their data is used
- Provides contact information for the business
An informative resource for learning more about legal requirements for websites is “7 Things Your Blog Needs to Be Legal” from Jade & Oak maintained by real-life attorney Jackie “Jade” Stoughton.
SSL Protection
SSL protection secures websites and user information. To clarify, SSL, or Secure Sockets Layer, is a protocol that encrypts Internet connections on the client side, the server side, and the place messages spend in between going from one place to the other. Because everything is encrypted, authenticated users need keys to decrypt and view the data. Webmasters obtain a private key and a public key to prove who they are. To get a SSL public key, purchase a SSL certificate from a trusted Certificate Signing Authority. To get a private key, get the certificate “signed.”
SSL protection promotes safe browsing, protects user information, and protects the website from cyberattacks where unknown, untrusted third parties might intercept the data during the client-server connection.
Google started marking websites without SSL protection as “Not Secure” in the URL bar in July 2018. To reward webmasters for switching and creating an all-around safer web, Google actually boosts SEO rankings for websites with HTTPS and SSL protection. It’s rare to receive a hard and fast clue into the way this search engine’s algorithms work, so Google feels this is a Big Deal. If that’s not enticing enough, Mariah Magazine Web & Strategy Studio also discovered that their analytics were much more accurate after implementing SSL protection and going HTTPS.
How To Secure Your WordPress Website With HTTPS & An SSL Certificate
Fortunately, it’s easy to get SSL protection. To read more about how SSL protection works and how to evaluate SSL encryption options, check out my earlier post, “How To Secure Your WordPress Website With HTTPS & An SSL Certificate.”
Conclusion
In conclusion, crafting an effective, thoughtful website takes a lot of work. It’s important to create positive first impressions and meaningful relationships with users. To recap the ten things every website needs:
- Make a Design System and use it, share it, scale it.
- Craft a USP that highlights benefits and incorporate it thoughtfully in the website.
- Demonstrate expertise within an industry and exemplify it through in-depth research, timely news and updates, case studies, and other website content.
- Choose authentic photos that capture attention, guide users around a webpage, and engage with them.
- Plan for strategic whitespace to increase user attention and readability and encourage users to interact with the rest of the website.
- Create a CTA for each webpage and focus on one primary action the user should take.
- Make contact information easy for users to find and use.
- Complete any mandatory or advisable legal documentation.
- Protect the website, the website data, and user data with a SSL certificate installation.