Top 10 Usability Guidelines for Blogging

If you like this presentation – show it...

Slide 0

Top 10 Usability Guidelines for Blogging

Slide 1

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

Slide 2

Slide 3

Slide 4

What is Usability?

Slide 5

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)

Slide 6

Five Planes of User Experience

Slide 7

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. The Strategy Plane

Slide 8

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. The Scope Plane

Slide 9

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 Structure Plane

Slide 10

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 Skeleton Plane

Slide 11

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. The Surface Plane

Slide 12

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

Slide 13

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

Slide 14

Top 10 Usability Issues for Blogs

Slide 15

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

Slide 16

1. No Clear Blogging Strategy

Slide 17

It Always Starts With Strategy

Slide 18

25 Basic Styles of Blogging

Slide 19

25 Basic Styles of Blogging

Slide 20

Combine Strategies (Ex: LukeW)

Slide 21

Insight Blog: Mobile & Forms

Slide 22

Video Blog: View Presentations

Slide 23

Link Blog: Data Mondays

Slide 24

Event Blog: Convey UX

Slide 25

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

Slide 26

2. Lack of Credibility

Slide 27

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

Slide 28

Home Page is a Cartoon

Slide 29

Great People, Poor Blog

Slide 30

Why Credibility is Important?

Slide 31

Stanford Studies on Credibility

Slide 32

One Factor Damages It All

Slide 33

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

Slide 34

3. Poorly Written Headlines

Slide 35

Online versus Offline Headlines

Slide 36

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

Slide 37

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

Slide 38

40-60 Characters per Headline

Slide 39

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

Slide 40

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

Slide 41

4. Using One Navigation Scheme

Slide 42

Most Blogs are Time-Based

Slide 43

Default Setting is a Calendar

Slide 44

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

Slide 45

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

Slide 46

5. Writing Ineffective Content

Slide 47

How Users Read on the Web

Slide 48

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

Slide 49

The Scent of Information

Slide 50

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

Slide 51

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

Slide 52

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

Slide 53

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

Slide 54

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

Slide 55

Color and Text Appearance

Slide 56

Color-Blind Users and Content

Slide 57

6. Infrequent or Irregular Updates

Slide 58

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

Slide 59

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

Slide 60

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

Slide 61

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

Slide 62

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

Slide 63

7. Classic Hits are Buried CLASSIC TODAY HITS

Slide 64

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

Slide 65

Show Popular Articles

Slide 66

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

Slide 67

Use Embedded Content Embedded links Embedded video, audio, slides

Slide 68

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

Slide 69

8. Bad Forms are Used

Slide 70

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.

Slide 71

Linked-In: Optional is Required

Slide 72

Linked-In: Optional?

Slide 73

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

Slide 74

10 Rules for Good Forms Use a simple, vertical layout with labels above the input fields. It is easier to scan If vertically aligned labels are not possible, make them bold and left-aligned. 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. Emphasize section headings (via color or shading) if you want people to read them. Only ask for required information. Identify optional fields rather than required fields (don't use asterisks).

Slide 75

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

Slide 76

9. Bad or Ineffective Search

Slide 77

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

Slide 78

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.

Slide 79

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).

Slide 80

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

Slide 81

Site Search When Navigation Fails

Slide 82

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

Slide 83

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

Slide 84

10. Un-responsive Design is Used

Slide 85

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

Slide 86

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

Slide 87

Mashable Mobile = 50% Traffic

Slide 88

More Phones than Toothbrushes

Slide 89

Over 60% Read News Online

Slide 90

2014: Year of Responsive Design

Slide 91

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.”

Slide 92

Food Sense: Responsive Design

Slide 93

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

Slide 94

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

Slide 95