Design Archives

Cutting the Homepage Clutter

Usually hailed as the most crucial and most difficult page to create on a website is the homepage.

One of the main reasons this page is so challenging to design is that it needs to include many essential site elements while not being overwhelming. Those elements typically are, but aren’t necessarily limited to, site ID/mission, site hierarchy, search functions, highlights of key content/features/deals, shortcuts to frequently/most used content and site features, and a login/registration form.

To cut through the confusion of designing the homepage, Krug advises that the homepage answer these four basic questions:

What is this site? [Site ID and mission]
What can I find here? [Content]
What can I do here? [Features]
Why should I be here? [Value proposition]

To illustrate the key message of a site, a few universal elements can be incorporated.

The first of these is a tagline. It’s the no more than 6-8 words found near the site logo that sums up your value proposition and illustrates your differentiating factor. Next is the welcome blurb. Usually located at the top left of the content space, the welcome blurb is a succinct description of the business—don’t mistake this as a space for the mission statement; those are more lengthy. Lastly, there should be a search button or link where users can directly search what they are looking for.

Once you’ve addressed the four questions above, you must show the user where to start (i.e., browse, search, get a free sample, or another CTA).

With the homepage, it is important to test every element. Don’t rely on common assumptions or assume all users (or the ‘average user’) will think like you or your design team.

The How and Who of Testing

Unlike the more common practice of focus groups, usability testing is about watching how people use something, like your website, whereas focus groups are small groups of people discussing something.

Usability testing can be done professionally, but usually at a cost that many teams can’t afford. This is why Krug outlines a few ways even small teams can implement usability testing to make their site better.

Keep the testing plan simple.

Spend one morning a month doing usability testing—having three testers is ideal. Then debrief over the lunch break and decide what you and your team should fix before the next monthly test.

The reason Krug only recommends three testers per session is that the problems faced by a few users will most likely apply to many. And since the goal is to keep steadily improving, you don’t need to uncover all the problems in one testing session. The goal is simply to get actionable insights to improve your site every month.

Usually, you can recruit participants (from social media, Craigslist, etc.) for an incentive of about $50-100 for 1 hour.

During the testing, have as many observers of the tester as possible. It would be best to put them in a separate observation room where they can see the participant’s screen and hear what’s happening in the testing room.

After each session, take a short break and get each observer to write down the top 3 usability problems they observed.

During the lunchtime debrief, have everyone share the top 3 problems they observed over the three testing sessions. Then, agree on the ten most serious issues and then rate each one on a scale of 1-10.

Often, the solution is to remove or simplify an existing item, not to add more stuff.

When it’s all said and done, it’s important to remember that even a little bit of testing is better than none, and the earlier on, the more time you and your team can save in the long run.

Why It Matters—Mobile and Accessibility

Another thing to consider when designing or redesigning a website is how it performs on mobile devices (cell phones, tablets, etc.). Though this is of greater importance now in 2020 than when the book was updated in 2013, Krug gives a few pieces of advice regarding mobile and accessible design.

To start, it’s important to note that the principles for usability are generally similar for mobile and web. However, for mobile, you need to design for a much smaller screen, which will require tradeoffs or eliminating some elements.

One way, which is becoming increasingly common, is to start the entire design process for mobile users first, so you’re forced to choose only the most vital content and features, before adding more elements for the desktop version.

For mobile, you can immediately implement a few of these things to increase the usability of your mobile site:

Allow zooming on your website (so users can view elements that are too small)
Ensure external links (emails, social media, etc.) bring users directly to relevant parts of the site
Give the option to view the full website instead of the mobile version
Make each element extremely clear (make things obviously clickable)
Make sure pages load quickly

On the topic of accessibility, Krug states that, ideally, desktop websites and mobile sites should be accessible for everyone, including those with disabilities. Even if you can’t afford to develop specifically for disability, you can start with these things. First, fix usability issues that affect everyone; second, try to include disabled users in your usability-tests; next, read up on web accessibility.

Additionally, there are easier things to fix, such as adding alt text for every image, using appropriate headings, using forms that work with screen readers, and choosing a web template designed to be accessible.

No Better Time than the Present

At the end of the day, I highly recommend reading this book. There are countless insights and infographics that are helpful for beginners and professionals alike.

Concerning website UX in the time of Covid-19, I would urge anyone looking to make their first site or looking to redesign their website not to wait. There is no telling if or when in-person, brick-and-mortar shopping will ever go back to ‘normal,’ having an attractive, usable, and revenue-generating website now is even more imperative.

Grab a copy of Don’t Make Me Think Revisited by Steve Krug

Introduction to “Webs of Influence”

In the spirit of continuing our #QuarantineReads series, we’d like to share our insights and summary of another book we’ve read recently: “Webs of Influence: The Psychology of Online Persuasion” by Nathalie Nahai.

This book consists of three main parts. The first is titled Know Who You Are Targeting, followed by how to Communicate Persuasively, and finally, Nahai wraps up with Sell with Integrity. Going forward, I’ll primarily focus on sharing the key concepts in those three sections and then give a brief summary of each.

Know Who You Are Targeting

The primary focuses for this section are how the human brain breaks down information and makes decisions, and how differences in culture, gender, and power affect what people prefer to see during the purchase process.

When it comes to purchasing decisions, Nahai explains that while there is one brain, there are two systems:

Automatic (emotional): is intuitive and operates below the level of ‘conscious’ thought, also known as ‘thinking fast.’
Controlled (cognitive): is more analytical, deliberate, and rational, also known as ‘thinking slow.’

To successfully convey why someone should be purchasing what you are offering, you need to address both systems.

Additionally, different cultural inclinations and preferences could make a user more or less likely to purchase. So, if you are trying to target other countries, this section would be especially salient.

These factors are based on the Hofstede model. A few examples are:

Individualism vs. Collectivism: group preferences vs. individual preferences
Power Distance: the difference in inequality levels between people
Masculinity vs. Femininity: how closely gender roles are adhered to
Uncertainty Avoidance: how comfortable/uncomfortable people are with ambiguity
Long-Term Orientation: how people view values and gratification (instant gratification or long term goals)
Indulgent vs. Restraint: how much people feel that they have control over their life and happiness

That said, these factors should be used more as general advice and not a strict guide—culture is not static. It is more important to be familiar with and genuinely understand the preferences of the specific audience you are trying to target.

Communicate Persuasively

The second section covers how to communicate your brand message and promotions in the most compelling way.

This can be done with the content you put on your site and social platforms (CTAs, articles, videos) as well as the design of your site (the colors, typography, and images used).

Starting out, Nahai introduces the two main ways to go about the general concept of persuasion. First is systematic persuasion, when you appeal to a person’s logic or reason. The second is heuristic persuasion when you leverage cognitive rules of thumb. This is usually the more common option due to human’s limited cognitive capacities and how much information we process daily.

This leads us to the concept of fluency, which means that, typically, people prefer messages that are fast and easy to process.

To implement these persuasion concepts online, your website, or however else people access your brand or content (mobile, app, or social media), needs to be optimized.

These persuasive tactics can be done in many ways:

By using images that are high quality and accurately depict your product or service
By grouping important information together (proximity) or by using the same color or boldness for important information, so it stands out (similarity)
By making content concise (clear out the clutter)
By using certain colors and hues to evoke different emotions

The list above is not exhaustive, but they are the most common ways to relay your site’s information credibly and quickly.

One of my personal favorites is the use of color to elicit specific emotions or feelings. And while these color guides can vary from culture to culture, there has been a sizable amount of research regarding how different colors can influence buyers’ emotions or portray particular messages about your brand.

For example, one study cites that using pale, unsaturated colors, such as light blue, cream, and grey, are perceived as more trustworthy, benevolent, competent, and predictable than more colorful websites.

Sell With Integrity

We’ll start with the easy part: what you can expect from us.

Speaking of being trustworthy, the final part of this book is aimed at gaining the trust of your visitors and using familiar selling techniques to which that visitors can easily relate.

After a brief explanation of what persuasion is and how it’s paramount not only to understand it, but to implement it credibly, Nahai discusses the six principles of influence by Professor Robert Cialdini. By using reciprocity, consistency, social proof, liking, authority, and scarcity, you can appeal to several common heuristics (mental shortcuts) that humans often rely on to influence their online behavior.

Chapters that follow mainly focus on pricing and some of the quirky ways human brains interpret prices and a common psychological model called the behavior chain.

The behavior chain sums up the process of how persuasion is structured over time and what a business can do to keep the persuasive process going.

First, you have to understand how users find out about your product or service and how they access the information you provide.

Next, once customers know about your brand and products, how do you encourage them to interact or take action (sign up for a newsletter or buy a product).

Finally, by creating content with value, optimizing your outreach on all your channels, and following up with customers regularly, you can keep the cycle of trust and persuasion going.

Conclusion

I found this book especially helpful and appealing in the sense that while it confirmed many things I already knew, it also introduced me to adjacent concepts with ease. Additionally, Nahai makes it easy for people with even the slightest background in UX, persuasion techniques, or interest in psychology to understand these topics by including countless graphics and examples.

This book is a must-read for sure! Also, let us know in the comments if you have read this book and what you think about it or if you have any similar book recommendations.

Tag: Design

“Don’t Make Me Think” During COVID-19 – Part 2

In Part 1, we discussed what Steve Krug calls ‘The Three Law of Usability’, how people use the web, and website navigation. In Part 2, we’ll be discussing how to clear website clutter, do user testing, and the importance of accessibility.