Top10 Usability Guidelines for Bloggers

Top 10 Usability Guidelines
for Blogging

Hi, my name is
Brian Sullivan.
@bigdesign
@BrianKSullivan
#UXblog

Classic Definitions of Usability
Usability assesses how easy your site,
app, or blog is to learn and use by your
customers. (Jakob Nielsen)
The usability of a website is based upon
whether people can find the information
they need. (Jared Spool)
Usability is based on whether you are
meeting your business and user goals
with your product. (Brian Sullivan)

Five Planes of User Experience

The Strategy Plane
The Strategy provides an overview of what you
want to get out of your blog and what do your
customers want to get out of it. From a business
view, the strategy plane is interested in Return on
Investment (ROI) for a product.
• User Needs: externally derived goals for your
blog, which are identified through web analytics,
interviews, and testing.
• Site Objectives: business, creative, or other
internally derived goals for the site.
Goals:
 Earn money from patron
 Impress other artists
Users:
 Patron: impress peers
 Other artists: to make
Michelangelo jealous
 Other viewers: enjoy
the artwork
Usage Contexts:
 Private Gallery
 Public Gallery
Strategy

The Scope Plane
The Scope plane transforms your strategy into
requirements. What features does your blog need
to meet your customer requirements?
• Functional Needs: defines the “features” you
need for your site, such as a shopping cart, sign
up form, or download features.
• Content Requirements: defines your content
elements required to meet customer needs, such
as large bandwidth for video blogs.
Render a portrait of a
woman:
 Shall be facing the
viewer
 Shall be attractive
 Shall have dark hair
 Shall be in an
interesting outdoor
setting
 Show an intriguing
smile
 Show a little cleavage
Scope

The Structure Plane
Structure
Your blog has some overall Structure. The
Structure plane gives shape to how the overall
pieces fit together, behave, and interact.
• Interaction Design: development of application
flows to facilitate user tasks and defining how
the user interacts with site functionality
• Information Architecture: structural design of
the information space to facilitate intuitive
access to content

The Skeleton Plane
Skeleton
The Skeleton plane lies just below the surface.
The Skeleton helps people to easily understand,
learn, and use something.
• Interface Design: how the design of interface
elements facilitates user interaction with
functionality
• Information Design: how the presentation of
information facilitates understanding
• Navigation Design: how the design of GUI
elements helps the user's navigate through the
information architecture

The Surface Plane
Surface
As its name suggests, the Surface plane describes
the basic finished project. We could use visual
design techniques to describe the Mona Lisa.
From UCD perspective, we are primarily
concerned with Visual Design, such as the
graphic treatment of GUI elements (the "look" in
"look-and-feel"), the visual treatment of text,
graphic page elements and navigational
components.

Good Blogs Require Thinking
We’ll re-visit each of the planes in the next hour.

Nielsen’s 10 Heuristic Principles
1. Feedback: Visibility of System Status
2. Metaphor: Match Between System and Real World
3. Navigation: User Control and Freedom
4. Consistency: Consistency and Standards
5. Prevention: Error Prevention
6. Memory: Recognition Rather than Recall
7. Effort: Flexibility and Efficiency of Use
8. Design: Aesthetic and Minimalistic Design
9. Recovery: Recognize, Diagnose & Recover from Errors
10.Help: Help and Documentation
Slide 14

Top 10 Usability Issues for Blogs

Brian’s Top 10 List for Blogs
1. Strategy: No Clear Blogging Strategy
2. Credibility: Lack of Credibility Cues on Blogs
3. Headlines: Poorly Written Headlines to Grab Attention
4. Navigation: Using Only One Navigation Scheme
5. Content: Writing Ineffective Content
6. Frequency: Infrequent or Irregular Updates
7. Burying: Classic Hits are Buried
8. Bad Forms: Cumbersome Forms to Use
9. Search: Bad Search Forces Users to Think
10.Un-responsive: Blog Can Only Be Views on One Device
Slide 16

It Always Starts With Strategy

Combine Strategies (Ex: LukeW)

Video Blog: View Presentations

Your Strategy Defines You!
1. Luke as an Expert:
- Three Books, But One Blog
- Luke W is now a personal brand
2. Data Mondays:
- Probably, links from a Google Search
- Resources for many designers
3. Video Blog Posts:
- Self-promotion, but that’s ok
- The videos are really good
4. Mixture of Writing Style:
- Link, video, presentation, and event posts
- Data is on Monday (at a set frequency)

Four Types of Web Credibility
1. Presumed Credibility: You already have heard of this
person or brand. (Ex: Known brands vs generic brands.)
2. Reputed Credibility: You have heard of this person or
site from someone you trust. (Ex: Your friend likes it.)
3. Surface Credibility: You like how something looks on a
casual inspection. (Ex: Looks good vs looks confusing.)
4. Earned Credibility: You know it is credible from your
personal experience. (Ex: Good customer service.)

Stanford Studies on Credibility

Ways to Add Credibility
1. Make your site look professional (surface credibility).
2. Make it easy to verify accuracy of info (sources, links).
3. Show there’s person behind the site (name, picture, bio).
4. Highlight your expertise (credentials, organizations).
5. Make it easy to contact you (email, social, phone).
6. Keep your content fresh (old content is not trusted).
7. Restrain from marketing (reduce ads, offers).
8. Avoid errors (broken links, spelling) impact credibility.
9. Use simple, plain language for people to understand.
10. Use testimonials and case studies (reputed credibility).

Online versus Offline Headlines

Online Headlines
1. Displayed out of context.
2. Part of a series.
3. Compete with other links.
4. No background material.
5. Text is the same size.
6. Do not use ALL caps.

Offline Headlines
1. Displayed with context.
2. Surrounding data:
- Photos
- Decks
- Article
3. More information to start.
4. Usually the biggest text.
5. Use ALL caps a lot.

Headlines: Writing Assignments
Treat headlines as their own writing assignment!

Guidelines for Headlines
1. Short abstracts of your article.
2. No teasers to entice people. (They don’t click.)
3. Written in plain language. No cute or clever puns.
4. Skip leading words like “The”, “A”, or “An”.
5. Do not use the same verbs each time (to differentiate).
6. Make the first word an information carrying one.
(Ex: Titanic Sinks, Design Like Da Vinci.)

4. Using One Navigation Scheme

Use Pages, Categories, & Tags
1. Pages to separate content.
2. Categories to group similar types of content together.
3. Tags to group related content together.

Guidelines for Navigation
1. Timelines are only one method to organize content.
2. Provide more than one navigation scheme.
3. Use pages, categories, and tags to group content.
4. Avoid the mistake of tagging to all your categories.
5. Categories must be sufficiently detailed to reduce posts.
6. 10-20 categories are usually enough for any subject.
7. Highlight each category’s most recent articles and the
most popular ones.

5. Writing Ineffective Content

Implications of the F Pattern
1. Customers will not read your text thoroughly.
2. They do not read in a word-by-word manner.
3. Use inverted pyramid style for writing.
4. First two paragraphs must state most important info.
5. Use information carrying words for headings, paragraphs,
and lists—people can easily scan them on the left.
6. Most people scan the first two words of every line.

Spend More Time Elsewhere
“People spend more time on another
person’s site.” (Jared Spool)

Guidelines for Content Usability
1. Use clear, simple language.
“We won the award.” vs “The award was won by us.”
2. Limit each paragraph to one idea:
- Easier to scan
- Get the general sense of what is coming
- Move to the next idea (or paragraph)
3. Front-load your content (put the conclusion first):
- Quickly scan the opening sentence.
- First sentence is usually read (again, F pattern)

4. Use descriptive sub-headings:
- Breaks up the page
- Shows the organization
- Easy to scan to see your idea, or argument
5. Use font differences sparingly:
- Harder to read with competing fonts
- Decrease your credibility
6. Use descriptive links:
- “Click Here” is rude
- Descriptive links support your article, too

7. Use lists for scannability:
- Less intimidating
- Information chunking
- More succinct, usually
8. Left-align text:
- Easier to read
- Blockquotes add credibility, but decrease reading speed

Don’t Write What They Don’t Need
50%
Less Words
2X
Understanding

6. Infrequent or Irregular Updates

Blog of a Well-Known Person
1. Latest post is from February 1, 2013 (not too bad).
2. Next post is from October 2012 (this is old).
3. Outdated meeting widget on sidebar (on every page).

Infrequent Schedules Hurt Fans
Without new content, you risk losing your fans,
who are your best customers.

Establish an Editorial Calendar
1. Use the Wordpress Editorial Calendar plug-in.
2. Write universal content, which can moved around.
3. Publish at regular intervals to keep your site fresh.

Let Users Know of Expiring Content
1. Use the Wordpress Content Scheduler plug-in.
2. Provides notification for expiring content to contributors.
3. Change when content expires, too.

Do You Know When to Publish?
1. Lowest readership is on Saturdays.
2. Mondays and Tuesdays have the highest readership.
3. Dips on Fridays (most of the time).

CLASSIC
HITS
TODAY
7. Classic Hits are Buried

Most People Do Not Visit Daily
1. Average 500 daily
views.
2. We have 3 posts with
over 50,000 views.
3. We get 25,000+ views
at the conference.

Show Related Articles
Zemanta is a good plug-in for related articles.

Use Embedded Content
• Embedded links
• Embedded video, audio, slides

Guidelines for Past Hits
1. Don’t relegate past hits to your archive.
2. Revisit past hits with a fresh perspective.
3. Embed links, video, or audio in newer articles.
4. Use a Popular Articles list on the Home page.
5. Embed related links using a plug-in like Zemanta.
6. Do not assume that people visit everyday.
7. Compile lists of past articles (ex: SEO 101, Top 10 List).

The Tool is Good, Usage is Bad
• Gravity Forms is an awesome plug-in.
• Google Forms is also great for simple forms.
• Most people don’t know how to build good forms.

Linked-In: Optional is Required

Example: Any Data is Accepted
• Postal Code accepts any data format.
• Phone number accepts any delimiter (dash, dot)

10 Rules for Good Forms
1. Use a simple, vertical layout with labels above the input
fields. It is easier to scan
2. If vertically aligned labels are not possible, make them
bold and left-aligned.
3. If you put more than one field on a row (e.g. first and last
name) make them look like a single piece of information.
4. Emphasize section headings (via color or shading) if you
want people to read them.
5. Only ask for required information. Identify optional fields
rather than required fields (don't use asterisks).

10 Rules for Good Forms
6. Use a single input field for numbers and postal codes,
and allow input in various forms.
7. Avoid displaying unnecessary information and make sure
important information stands out.
8. Real time feedback may be distracting — good
implementation is key.
9. Place instructions to the side of the field.
10. For multi-page forms tell users how many steps remain
before completion.

Search Helps Small Sites Compete
Big sites get more traffic, but niche sites can dominate.

SEO and Usability
• Search Engine Optimization (SEO) is about
attracting people to your site by making sure
your blog and article show up in search engines.
• SEO happens before the first click.
• Usability is about people completing tasks, so it is
interested in their behavior after they arrive on
your blog. It is about conversions (and more).
• Usability is about what makes them click.

The Importance of Search
• If your website is
difficult to use,
customers leave.
• If they get lost in
your website,
customers leave.
• If a customer can’t
FIND your product,
they can’t BUY it.
….
Then, they leave!
About 60% of people are search-dominant (1st step).

No Search Better Than Bad Search
1. Bad search greatly
impacts credibility.
No search slightly
impacts credibility.
2. Bad search loses
lots of customers.
No search loses
less customers.

Site Search When Navigation Fails

All in One SEO is Good Plug-in
This a good start for SEO, which is half the equation.

Guidelines for Site Search
1. Make it a box.
2. Button on the right.
3. On top right of page.
4. Must be on all pages.
5. Box is initially empty.
6. Button label = “Search”.
7. Searches whole site.
8. Don’t search Internet.
9. Read Rosenfeld book.

10. Un-responsive Design is Used

We live in a Post-PC Era
In 2012, PC sales were down from the previous year.

Tablet Sales Rapidly Increasing
In 2014, tablet sales will exceed 100+ million units.

2014: Year of Responsive Design

What is Responsive Design?
“In simple terms, a responsive
design uses media queries to
figure out what resolution of
device it’s being served on.”

Responsive WordPress Themes
• Lucid
• Angular
• Trim
• Glamour
• Deadline
• Boxline
• Inovado
• Simple Press
• Flexible
• Blox

Brian’s Top 10 List for Blogs
1. Strategy: No Clear Blogging Strategy
2. Credibility: Lack of Credibility Cues on Blogs
3. Headlines: Poorly Written Headlines to Grab Attention
4. Navigation: Using Only One Navigation Scheme
5. Content: Writing Ineffective Content
6. Frequency: Infrequent or Irregular Updates
7. Burying: Classic Hits are Buried
8. Bad Forms: Cumbersome Forms to Use
9. Search: Bad Search Forces Users to Think
10.Un-responsive: Blog Can Only Be Views on One Device
Slide 95

Top10 Usability Guidelines for Bloggers

More Related Content

Viewers also liked

Similar to Top10 Usability Guidelines for Bloggers

More from Brian Sullivan

Recently uploaded

Top10 Usability Guidelines for Bloggers