A Classic for UX Best Practices

A Review of Don’t Make Me Think Revisited: A Common Sense Approach to Web and Mobile Usability by Steve Krug, with a Compiled List of Do’s and Don’ts Tips

Usability Consultant Steve Krug revisited his classic Don’t Make Me Think in the advent of mobile. Krug found that his basic principles still held true in 2014 even if the landscape had changed because usability is not about technology, but rather about people and how they understand and use things.

More specifically, Krug assigned three attributes to usability: it is learnable, it is effective and it is efficient. For a website or app to be usable, a person of average to below average ability and experience can figure out how to use it (learnable) to accomplish something (effective) without expending more time and effort than it’s worth (efficient.)


USE EXISTING WEB CONVENTIONS

For a design to work it has to be self-evident. One of your jobs as a designer and/or content creator is to answer all potential questions for the user. Questions add to a user’s cognitive workload and only serve to frustrate and distract from a given task. Krug recommends the use of standard web conventions to satisfy user expectations on: where things are located on a page, how things will work and how things should look.

Content creators should question their decisions to add clever marketing speak or company-specific terms when they need to orient and direct the user. Designers should question their decisions to “reinvent the wheel” for the sake of offering something new and different. If you are going to innovate, Krug cautions, it’s best to understand the value of what you’re replacing.   

Valuable Conventions

  • Persistent navigation on every page that contains the logo in the top left corner that links back to the homepage, a main menu section that indicates current location, utilities and a search function
  • Visual cues for interactivity like buttons, tabs, menus and text formatted with a bright color or an underline
  • Universal icons

 

NAVIGATION

Krug splits users into the borrowed categories of “search-dominant” vs. “link-dominant”. Search-dominant users immediately look for a search function after entering a site. Krug maintains that access to a search function belongs on every page, given the power of searching and the number of users who fall into the search-dominant category.

Link-dominant users tend to browse first. These users need to immediately understand three things from a page’s navigation: their current location in the sitemap, how they can use the site and how they can quickly find what they’re looking for. All pages need prominent names that closely match what the user just clicked to enter the site. These page names should also speak to the page’s function.


MAKE WEB PAGES WORK AT A GLANCE

Users don’t read, they scan. Even exceptions to this rule, such as news reports and product information, often have the user alternating between scanning and reading. Krug states that this behavior is one of few well-documented facts about web usability—so it is imperative that web teams design for high-speed intake.

Users that enter a site via the homepage need to see the “big picture” right away. A company’s identity and mission need to be conveyed so users know what the site is and what it’s for. Krug suggests a tagline as an efficient way to state a purpose as opposed to a wordy mission statement that no one will take the time to read.


CREATE A CLEAR VISUAL HIERARCHY & FORMAT FOR QUICK READABILITY

Brevity is better! Krug encourages writers to omit needless words and keep paragraphs short. Once content is honed, it should be broken up into clearly defined areas that form a hierarchy. The more important something is, the more prominent it should be. Related information should be either styled similarly or grouped together and nested.

Use headlines that are assigned css styles from <H1> down to <H6> so that they show an information outline for the user at a glance—also best practices for SEO. Visually break up sections of paragraph copy with highlighted key terms, bulleted lists and callouts. All hyperlinks need to be obvious to the user.


TESTING

Krug highly encourages web teams to conduct usability testing at least once a month. He even devotes a chapter to step-by-step instructions for cost-effective user testing with three participants and site stakeholders.

Usability testing can uncover typical problems, such as:

  • Users don’t understand what a site is or what to do with it
  • The words they are looking for aren’t there
  • There is too much going on, content needs to be paired back and/or visual hierarchy needs to be better enforced

Frequent usability testing can put an end to the frustrating debate over what the “Average User” likes and dislikes. In Krug’s many years of direct observation, he found that all users are unique and their web use is idiosyncratic; the Average User is a myth. Usability testing shows, beyond subjectivity, what works and what doesn’t.

Don’t Make Me Think Revisited is a straight-forward approach to basic UX principles that follow common sense and best practice. While it is a must read for beginners, today’s veteran web teams may find the advice either dated or too obvious. Still, the book is a timeless reminder for what was proven to work — and why that needs to be the measure of success.

 

A Compiled List of Do’s and Don’ts Tips


CONTENT STRATEGISTS

Do create wireframes that make use of standard web conventions

Do omit needless words and keep paragraphs short

Do give every page a name that matches its menu equivalent

Do use headlines and bulleted lists to enable scanning

Don’t diminish the good will of users inadvertently by:

  • asking for any personal information that isn’t necessary
  • hiding information like customer support numbers, shipping rates and prices
  • hiding checkboxes that are selected by default

If you have to make these sorts of moves, at least be informed of the full impact. Not only will users potentially leave your site, but they may also think less of your company brand.

 

DESIGNERS

Do create strong visual hierarchies

Do make links and buttons immediately recognizable

Do provide a branded experience with the proper stylistic tone

When using flat design, Do compensate for the dimension that is lost

Don’t use small, low-contrast type

Don’t use labels inside form fields

Don’t float headers between paragraphs

 

DEVELOPERS

Do preserve the distinction between visited and unvisited text links

Do provide printer-friendly pages that include images like photos and illustrations but not advertisements

When it comes to accessibility, Do grab low-hanging fruit at the very least:

  • Add appropriate alt text to every image
  • Tag headlines correctly
  • Make your forms work with screenreaders
  • Put Skip to Main Content links
  • Make all content accessible by keyboard

Don’t punish the user for formatting (dashes on social security numbers, parenthesis on phone numbers, spaces on credit card numbers.)

How Brands Benefit from Visual Storytelling – Tips from Pixar Alum Matthew Luhn

There can be no doubt that Matthew Luhn is a master of visual storytelling. At only 19, he became the youngest animator to join The Simpsons while in its third season. Luhn later joined Pixar Animation Studios and collaborated on the most commercially successful and well loved movies of our time: Toy Story, Finding Nemo, Monsters Inc., Ratatouille, Up, Cars, Toy Story II and Toy Story III.

From Hollywood to the boardroom, Luhn now advises Fortune 500 companies on how to successfully narrate their brand and connect to an audience through visual storytelling. On September 13th, the Chamber of Commerce for Greater Philadelphia hosted a seminar on digital storytelling and invited Luhn to be the keynote speaker. Mixing popular examples with his own experience, Luhn outlined how today’s brands can craft their own powerful stories that resonate.

Visual Storytelling Makes a Brand
MemorableImpactful and Personal.

Only 5% of people remember a statistic, but 65% of people remember the stories they are told.

Statistics show that when you wrap a story around something, people remember it. Given the age of short attention spans and media oversaturation, how do we make a story wrapper that sticks?

BE CONCISE

Use as few words as possible. If you can’t explain something simply, you have to go back to the drawing board.

HAVE A GREAT HOOK

What if a rat dreamed of being a French chef?

Sound familiar? Pixar writers knew that people don’t like rats and especially don’t like them around food. What’s more, they don’t like uppity Parisians dictating good taste. Add this up, and you get the unexpected hook of Ratatouille.

What if you could fit 1,000 songs in your pocket?

Steve Jobs knew the importance of storytelling. Before unveiling the first generation iPod, he described the disappointments and drawbacks of his competition’s current technology. With the stage set, he gave his hook to create anticipation for Apple’s revolutionary products.

BE AUTHENTIC

Don’t be clever or snarky. Be vulnerable and honest. Come from a place of truth and passion. Don’t be afraid to be bold because if you try to please everyone, the message will get weaker until no one is affected.

Never state the theme in your story. Make people feel it. This comes down to the old adage, “Show. Don’t tell.” The theme of Finding Nemo was: Being overprotective won’t lead your loved ones to a better life, letting them go will. However, no character beats us over the head by overstating it. Great storytelling has to be subtle. Dory the fish says, “Well, you can’t never let anything happen to him. Then nothing would ever happen to him.”

USE UNIVERSAL THEMES ABOUT CHANGE

Once you’ve hooked an audience, take them on a journey of change, be it striving towards impossible dreams, facing fear of abandonment and learning about love and sacrifice. Your consumer/user needs to play the role of the hero; not your product or company founders.

The Always #LikeAGirl campaign used video interviews where young girls, both before and after puberty, were asked, “What does it mean to do something ‘like a girl?’ How would you run ‘like a girl’ and fight ‘like a girl?’” The videos demonstrate that somewhere in puberty, girls learn that “like a girl” translates to weakness and is meant as an insult. If this was something learned, then it could be unlearned. So campaign creators set out to transform “like a girl” and make it a call for confidence, as in “try, fail, learn & Keep Going #LikeAGirl.”

Stories that are memorable, impactful and personal are about the kind of transformation that inspires us to make decisions towards our own change.

Basic Best Practices for Web Design

When onboarding new designers, I like to introduce them to basic best practices to follow during the design phase of a full web build process.

CONTENT HAND-OFF

At the start of week six in my agency’s web build process, phases for discovery, site structure planning and content creation are complete. A Lead Strategist begins the design phase by handing off the following materials to our Creative team:

  • Creative Brief — a document that guides the project and fully summarizes objectives, target audiences, tone, message, initial feedback and examples from stakeholders, etc.  
  • Client Assets — photography, video, vector logos, existing brand guidelines, etc.
  • Content — consisting of listed assets and copy from a subject expert
  • Wireframes — showing the basic framework of information and functionality
  • Site map — visualization of the website structure and main navigation
  • Timelines — with internal deadlines, external deadlines and specified ownership

Our first responsibility as web designers is to get what we need.
Ideally, we would have all complete information upfront in order to make the most informed and timely decisions possible.

WEB DESIGN PHASE

Stay true to a brand.
While designers consider the following elements of composition, they must remember to stay true to either a pre-existing brand, a refreshed brand or their entirely new brand. Designers should develop and build a brand while maintaining its strength and consistency.

TYPOGRAPHY

My in-house developers suggest that we design with a maximum of five different fonts—which includes font weights—so as not to impact loading time. I suggest designers select a great workhorse for body copy and use the Light, Italic and Bold weights plus two display fonts for headlines, callouts, and block quotes. We use a mix of Typekit, Google Fonts and custom purchased fonts when budget allows.

A great resource for web typography trends is Typewolf (www.typewolf.com.)

Typography is essential in communicating hierarchy and creating structure, both to a user and search engine.
All headlines, from <H1> – <H6>, need to be styled in order of descending importance. Even if all of these labeled styles aren’t used in the current homepage or subpage templates, they need to be available in a client’s publishing platform (such as WordPress or Drupal.)

COLOR PALETTE

Don’t mix color models.
When working with an existing brand, refer to its digital palette specified in the brand guidelines. One common mistake that I see is a mixing of color models. Use only the RGB builds or HEX codes from a provided Brand Guidelines and only place graphics that use the same color model. If a designer uses the correct HEX colors but places a logo with PMS colors—they won’t match.

Reserve an accent color for indicating interactivity.
Use it consistently on buttons and text links without competing backgrounds in order to drive users to your call-to-actions. When selecting this accent color, make sure it works on the full range of background colors from the darkest you intend to use to the lightest gray and white.

LAYOUT

A wireframe serves as a framework for the content’s flow and functionality. It is not an intended layout. Our Creative team takes the provided wireframes and combines them with best practices for UI/UX and brand strategy in order to create fully-designed desktop and mobile layouts.

Web design needs to be device-agnostic in order to provide a seamless brand experience
Designers need to consider a multi-device approach. Desktop working designs should be viewed on both a large screen monitor and a small laptop. Mobile designs should be viewed on a smartphone in real time with the Adobe Preview CC mobile app. There is no substitute for viewing working designs as they are meant to be viewed.

All of my agency's webpage layouts align to Bootstrap’s flexible grid system. Column widths will be set in percentages during the site development phase so that the layouts automatically size to the width of the browser window. In this way, our designs are always responsive to any current or future device on the market.

Function before Form; Usability must come first. 
Usability has to be effortless as possible, which is why a direct, simple approach should always be considered because it is often the most successful.

Use interaction, not for its own sake, but for user engagement and navigational cues. Extra bells and whistles work best when they work to reinforce the brand and messaging.

No matter what the medium, the rules of good graphic design apply. 
To conclude, web designers have their own challenges, but they also need to heed the rules of good graphic design and brand strategy that apply to every medium. 

The Benefits of Adding Video to Your Content Marketing Strategy

Video as a Rising Social Medium

According to Cisco, video will account for 69% of all consumer traffic by 2017. Both current statistics and trend predictions like this one indicate video’s rapid rise as a social medium. It’s clear that marketers need to include it in their content strategy in order to provide maximum exposure for their businesses.

What Does Video Bring to a Content Marketing Strategy?

  • Maximized engagement
  • Cross-device targeting
  • Brand authenticity and communication on a human level
  • Cross-promotion with digital marketing initiatives

Even Small- and Medium-Sized Businesses Can Leverage Video Marketing

One of the factors fueling video’s growing popularity is the decrease in production costs. With the advent of video cameras on mobile phones and desktops, wearable cameras like GoPros, and single-camera, documentary-style footage, great videos can be made at a fraction of budgets deemed necessary just 5 years ago.

With a lowered barrier to entry, video isn’t just for enterprise businesses with enterprise budgets. In fact, Facebook COO Sheryl Sandberg stated that over 1.5 million small businesses posted video on Facebook in the month of September alone in 2015. 

When the opportunity for relevant video content presents itself, companies of all sizes should seize it. Here’s an example of how Zer0 to 5ive recently helped a client take advantage of such an opportunity to create a compelling video series.

Tips on How to Promote and Cross-Promote Video Content

After post-production, how can a marketer best promote and cross-promote video content online? Author Andrew Macarthy provides the following tips in his bestseller, 500 Social Media Marketing Tips.

Tips for Facebook

  • Because videos auto-play on silent, hook viewers with a striking visual within the first 3 seconds
  • Upload SRT caption files with your video to broadcast your message even while muted
  • Keep your video to approximately 30 seconds for optimum viewer engagement
  • Upload video to Facebook natively, as opposed to sharing it from YouTube, in order to increase reach
  • Via the Video tab, organize your videos into playlists, tag people, and add descriptive labels

Tips for YouTube

  • Keep your video to approximately 3 minutes for optimum viewer engagement
  • Include keywords at the front of your video title and branding at the end
  • Tag your video with keywords and keyword phrases in quotations
  • Take advantage of YouTube’s interactive cards, the evolution of annotations
  • If you have a series of videos, add all of them to a dedicated playlist so they run continuously and indicate the series name in the title of each video

Tips for Cross-Promotion

  • Embed video in blog posts
  • Embed a YouTube Subscribe channel widget on your website, which is also a way to advertise your video content and YouTube activity
  • Tweet about your video with relevant hashtags, making sure to include “Video:” before the title
  • Comment on other videos your audience is watching to increase your brand awareness

Now may be a great time for you to start considering video if you haven’t already. The benefits will continue to grow as demand rapidly increases, so why not take the leap now? You can start small and build up to a more robust content plan as your skills improve and as you get feedback from your prospects and customers.