SlideShare a Scribd company logo
1 of 96
Download to read offline
Top 10 Usability Guidelines 
for Blogging
Hi, my name is 
Brian Sullivan. 
@bigdesign 
@BrianKSullivan 
#UXblog
Top10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for Bloggers
What is Usability?
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
1. No Clear Blogging Strategy
It Always Starts With Strategy
25 Basic Styles of Blogging
25 Basic Styles of Blogging
Combine Strategies (Ex: LukeW)
Insight Blog: Mobile & Forms
Video Blog: View Presentations
Link Blog: Data Mondays
Event Blog: Convey UX
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)
2. Lack of Credibility
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.)
Home Page is a Cartoon
Great People, Poor Blog
Why Credibility is Important?
Stanford Studies on Credibility
One Factor Damages It All
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).
3. Poorly Written Headlines
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.
40-60 Characters per Headline
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
Most Blogs are Time-Based
Default Setting is a Calendar
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
How Users Read on the Web
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.
The Scent of Information
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)
Guidelines for Content Usability 
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
Guidelines for Content Usability 
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
Color and Text Appearance
Color-Blind Users and Content
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 Popular Articles
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).
8. Bad Forms are Used
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
Linked-In: Optional?
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.
9. Bad or Ineffective Search
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.
Mashable Mobile = 50% Traffic
More Phones than Toothbrushes
Over 60% Read News Online
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.”
Food Sense: Responsive Design
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
Thanks!!!

More Related Content

Viewers also liked

Seven Deadly Sins and Seven Heavenly Virtues
Seven Deadly Sins and Seven Heavenly VirtuesSeven Deadly Sins and Seven Heavenly Virtues
Seven Deadly Sins and Seven Heavenly VirtuesBrian Sullivan
 
Deliberate Design Thinking
Deliberate Design ThinkingDeliberate Design Thinking
Deliberate Design ThinkingBrian Sullivan
 
Leadership Lessons from Design Hell
Leadership Lessons from Design HellLeadership Lessons from Design Hell
Leadership Lessons from Design HellBrian Sullivan
 
Top 20 Things Successful People Do All the Time
Top 20 Things Successful People Do All the TimeTop 20 Things Successful People Do All the Time
Top 20 Things Successful People Do All the TimeBrian Sullivan
 
Redefining ux
Redefining uxRedefining ux
Redefining uxAndy Budd
 
9 common mistakes that make your slide look poor
9 common mistakes that make your slide look poor9 common mistakes that make your slide look poor
9 common mistakes that make your slide look poorBen Thai
 
Digital Shoreditch 2015: When business culture kills experience design
Digital Shoreditch 2015: When business culture kills experience designDigital Shoreditch 2015: When business culture kills experience design
Digital Shoreditch 2015: When business culture kills experience designTim Loo
 
Designing for Awareness in the Attention Economy
Designing for Awareness in the Attention EconomyDesigning for Awareness in the Attention Economy
Designing for Awareness in the Attention EconomyBrian Sullivan
 
Contagious Content: Going Viral Online
Contagious Content: Going Viral OnlineContagious Content: Going Viral Online
Contagious Content: Going Viral OnlineBrian Sullivan
 
Produce Like Picasso: Mastering Design Delivery #sxsw
Produce Like Picasso: Mastering Design Delivery #sxswProduce Like Picasso: Mastering Design Delivery #sxsw
Produce Like Picasso: Mastering Design Delivery #sxswBrian Sullivan
 
Making Slides that Rock and Resonate
Making Slides that Rock and ResonateMaking Slides that Rock and Resonate
Making Slides that Rock and ResonateBrian Sullivan
 

Viewers also liked (14)

Seven Deadly Sins and Seven Heavenly Virtues
Seven Deadly Sins and Seven Heavenly VirtuesSeven Deadly Sins and Seven Heavenly Virtues
Seven Deadly Sins and Seven Heavenly Virtues
 
Deliberate Design Thinking
Deliberate Design ThinkingDeliberate Design Thinking
Deliberate Design Thinking
 
Leadership Lessons from Design Hell
Leadership Lessons from Design HellLeadership Lessons from Design Hell
Leadership Lessons from Design Hell
 
Top 20 Things Successful People Do All the Time
Top 20 Things Successful People Do All the TimeTop 20 Things Successful People Do All the Time
Top 20 Things Successful People Do All the Time
 
Redefining ux
Redefining uxRedefining ux
Redefining ux
 
9 common mistakes that make your slide look poor
9 common mistakes that make your slide look poor9 common mistakes that make your slide look poor
9 common mistakes that make your slide look poor
 
Design for Awareness
Design for AwarenessDesign for Awareness
Design for Awareness
 
Design Like DaVinci
Design Like DaVinciDesign Like DaVinci
Design Like DaVinci
 
Digital Shoreditch 2015: When business culture kills experience design
Digital Shoreditch 2015: When business culture kills experience designDigital Shoreditch 2015: When business culture kills experience design
Digital Shoreditch 2015: When business culture kills experience design
 
Designing for Awareness in the Attention Economy
Designing for Awareness in the Attention EconomyDesigning for Awareness in the Attention Economy
Designing for Awareness in the Attention Economy
 
Contagious Content: Going Viral Online
Contagious Content: Going Viral OnlineContagious Content: Going Viral Online
Contagious Content: Going Viral Online
 
Design Like DaVinci
Design Like DaVinciDesign Like DaVinci
Design Like DaVinci
 
Produce Like Picasso: Mastering Design Delivery #sxsw
Produce Like Picasso: Mastering Design Delivery #sxswProduce Like Picasso: Mastering Design Delivery #sxsw
Produce Like Picasso: Mastering Design Delivery #sxsw
 
Making Slides that Rock and Resonate
Making Slides that Rock and ResonateMaking Slides that Rock and Resonate
Making Slides that Rock and Resonate
 

Similar to Top10 Usability Guidelines for Bloggers

ICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdfICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdfRedenOriola
 
Creating a Successful Magazine Website
Creating a Successful Magazine WebsiteCreating a Successful Magazine Website
Creating a Successful Magazine WebsiteKat Tancock
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01Farmanzaland
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhiCss Founder
 
Designing With Usability In Mind
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In MindCenergyDave
 
Website development company in mumbai
Website development company in mumbaiWebsite development company in mumbai
Website development company in mumbaiCss Founder
 
Anyone Can Write: Writing for Content
Anyone Can Write: Writing for ContentAnyone Can Write: Writing for Content
Anyone Can Write: Writing for ContentCandace Loya
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!Ashley McQuaid
 
Writing-Best-Practices
Writing-Best-PracticesWriting-Best-Practices
Writing-Best-PracticesCandace Loya
 
Content marketing for SEO - Conceptualisation And Implementation - Jones & Ze...
Content marketing for SEO - Conceptualisation And Implementation - Jones & Ze...Content marketing for SEO - Conceptualisation And Implementation - Jones & Ze...
Content marketing for SEO - Conceptualisation And Implementation - Jones & Ze...Lukasz Zelezny
 
Article Writing Tips
Article Writing TipsArticle Writing Tips
Article Writing TipsMd Ekram
 
LinkedIn - A simple guide to the basics
LinkedIn - A simple guide to the basicsLinkedIn - A simple guide to the basics
LinkedIn - A simple guide to the basicsGordon Freeman
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignChristy Van Heugten
 
Free Traffic Seo Smo 101 (Search Engine Social Media Optimization) Present...
Free Traffic  Seo Smo 101 (Search Engine   Social Media Optimization) Present...Free Traffic  Seo Smo 101 (Search Engine   Social Media Optimization) Present...
Free Traffic Seo Smo 101 (Search Engine Social Media Optimization) Present...jward5519
 

Similar to Top10 Usability Guidelines for Bloggers (20)

ICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdfICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdf
 
Creating a Successful Magazine Website
Creating a Successful Magazine WebsiteCreating a Successful Magazine Website
Creating a Successful Magazine Website
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
Designing With Usability In Mind
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In Mind
 
Web site design
Web site designWeb site design
Web site design
 
Website development company in mumbai
Website development company in mumbaiWebsite development company in mumbai
Website development company in mumbai
 
Web Site Design,
Web Site Design,Web Site Design,
Web Site Design,
 
Website world
Website worldWebsite world
Website world
 
Notes8
Notes8Notes8
Notes8
 
Notes8
Notes8Notes8
Notes8
 
Anyone Can Write: Writing for Content
Anyone Can Write: Writing for ContentAnyone Can Write: Writing for Content
Anyone Can Write: Writing for Content
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!
 
Writing-Best-Practices
Writing-Best-PracticesWriting-Best-Practices
Writing-Best-Practices
 
Content marketing for SEO - Conceptualisation And Implementation - Jones & Ze...
Content marketing for SEO - Conceptualisation And Implementation - Jones & Ze...Content marketing for SEO - Conceptualisation And Implementation - Jones & Ze...
Content marketing for SEO - Conceptualisation And Implementation - Jones & Ze...
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
Article Writing Tips
Article Writing TipsArticle Writing Tips
Article Writing Tips
 
LinkedIn - A simple guide to the basics
LinkedIn - A simple guide to the basicsLinkedIn - A simple guide to the basics
LinkedIn - A simple guide to the basics
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website Redesign
 
Free Traffic Seo Smo 101 (Search Engine Social Media Optimization) Present...
Free Traffic  Seo Smo 101 (Search Engine   Social Media Optimization) Present...Free Traffic  Seo Smo 101 (Search Engine   Social Media Optimization) Present...
Free Traffic Seo Smo 101 (Search Engine Social Media Optimization) Present...
 

More from Brian Sullivan

Extreme Collaboration: Getting Stuff Done with People You Don't Trust, Respec...
Extreme Collaboration: Getting Stuff Done with People You Don't Trust, Respec...Extreme Collaboration: Getting Stuff Done with People You Don't Trust, Respec...
Extreme Collaboration: Getting Stuff Done with People You Don't Trust, Respec...Brian Sullivan
 
Presenting to Executive Leadership
Presenting to Executive LeadershipPresenting to Executive Leadership
Presenting to Executive LeadershipBrian Sullivan
 
Continuous Onboarding in the Gig Economy
Continuous Onboarding in the Gig EconomyContinuous Onboarding in the Gig Economy
Continuous Onboarding in the Gig EconomyBrian Sullivan
 
Mapping Experiences for Product Innovation
Mapping Experiences for Product InnovationMapping Experiences for Product Innovation
Mapping Experiences for Product InnovationBrian Sullivan
 
Getting Design in Your Company's DNA
Getting Design in Your Company's DNAGetting Design in Your Company's DNA
Getting Design in Your Company's DNABrian Sullivan
 
Pixel Perfect: Strategies for Overcoming Perfectionism
Pixel Perfect: Strategies for Overcoming PerfectionismPixel Perfect: Strategies for Overcoming Perfectionism
Pixel Perfect: Strategies for Overcoming PerfectionismBrian Sullivan
 

More from Brian Sullivan (8)

Extreme Collaboration: Getting Stuff Done with People You Don't Trust, Respec...
Extreme Collaboration: Getting Stuff Done with People You Don't Trust, Respec...Extreme Collaboration: Getting Stuff Done with People You Don't Trust, Respec...
Extreme Collaboration: Getting Stuff Done with People You Don't Trust, Respec...
 
Presenting to Executive Leadership
Presenting to Executive LeadershipPresenting to Executive Leadership
Presenting to Executive Leadership
 
Continuous Onboarding in the Gig Economy
Continuous Onboarding in the Gig EconomyContinuous Onboarding in the Gig Economy
Continuous Onboarding in the Gig Economy
 
Mapping Experiences for Product Innovation
Mapping Experiences for Product InnovationMapping Experiences for Product Innovation
Mapping Experiences for Product Innovation
 
Getting Design in Your Company's DNA
Getting Design in Your Company's DNAGetting Design in Your Company's DNA
Getting Design in Your Company's DNA
 
Pixel Perfect: Strategies for Overcoming Perfectionism
Pixel Perfect: Strategies for Overcoming PerfectionismPixel Perfect: Strategies for Overcoming Perfectionism
Pixel Perfect: Strategies for Overcoming Perfectionism
 
Design Like Da Vinci
Design Like Da VinciDesign Like Da Vinci
Design Like Da Vinci
 
WUD 2010 Bad Signs
WUD 2010 Bad SignsWUD 2010 Bad Signs
WUD 2010 Bad Signs
 

Top10 Usability Guidelines for Bloggers

  • 1. Top 10 Usability Guidelines for Blogging
  • 2. Hi, my name is Brian Sullivan. @bigdesign @BrianKSullivan #UXblog
  • 6. 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)
  • 7. Five Planes of User Experience
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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.
  • 13. Good Blogs Require Thinking We’ll re-visit each of the planes in the next hour.
  • 14. 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
  • 15. Top 10 Usability Issues for Blogs
  • 16. 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
  • 17. 1. No Clear Blogging Strategy
  • 18. It Always Starts With Strategy
  • 19. 25 Basic Styles of Blogging
  • 20. 25 Basic Styles of Blogging
  • 23. Video Blog: View Presentations
  • 24. Link Blog: Data Mondays
  • 26. 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)
  • 27. 2. Lack of Credibility
  • 28. 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.)
  • 29. Home Page is a Cartoon
  • 31. Why Credibility is Important?
  • 32. Stanford Studies on Credibility
  • 34. 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).
  • 35. 3. Poorly Written Headlines
  • 37. 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.
  • 38. 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.
  • 40. Headlines: Writing Assignments Treat headlines as their own writing assignment!
  • 41. 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.)
  • 42. 4. Using One Navigation Scheme
  • 43. Most Blogs are Time-Based
  • 44. Default Setting is a Calendar
  • 45. 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.
  • 46. 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.
  • 48. How Users Read on the Web
  • 49. 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.
  • 50. The Scent of Information
  • 51. Spend More Time Elsewhere “People spend more time on another person’s site.” (Jared Spool)
  • 52. 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)
  • 53. Guidelines for Content Usability 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
  • 54. Guidelines for Content Usability 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
  • 55. Don’t Write What They Don’t Need 50% Less Words 2X Understanding
  • 56. Color and Text Appearance
  • 58. 6. Infrequent or Irregular Updates
  • 59. 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).
  • 60. Infrequent Schedules Hurt Fans Without new content, you risk losing your fans, who are your best customers.
  • 61. 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.
  • 62. 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.
  • 63. 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).
  • 64. CLASSIC HITS TODAY 7. Classic Hits are Buried
  • 65. 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.
  • 67. Show Related Articles Zemanta is a good plug-in for related articles.
  • 68. Use Embedded Content • Embedded links • Embedded video, audio, slides
  • 69. 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).
  • 70. 8. Bad Forms are Used
  • 71. 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.
  • 74. Example: Any Data is Accepted • Postal Code accepts any data format. • Phone number accepts any delimiter (dash, dot)
  • 75. 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).
  • 76. 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.
  • 77. 9. Bad or Ineffective Search
  • 78. Search Helps Small Sites Compete Big sites get more traffic, but niche sites can dominate.
  • 79. 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.
  • 80. 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).
  • 81. 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.
  • 82. Site Search When Navigation Fails
  • 83. All in One SEO is Good Plug-in This a good start for SEO, which is half the equation.
  • 84. 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.
  • 86. We live in a Post-PC Era In 2012, PC sales were down from the previous year.
  • 87. Tablet Sales Rapidly Increasing In 2014, tablet sales will exceed 100+ million units.
  • 88. Mashable Mobile = 50% Traffic
  • 89. More Phones than Toothbrushes
  • 90. Over 60% Read News Online
  • 91. 2014: Year of Responsive Design
  • 92. 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.”
  • 94. Responsive WordPress Themes • Lucid • Angular • Trim • Glamour • Deadline • Boxline • Inovado • Simple Press • Flexible • Blox
  • 95. 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