Top 10 Usability Guidelines for Blogging

Transcription

1 Top 10 Usability Guidelines for Blogging

2 Hi, my name is #UXblog

3

4

5 My Friends and I run the Big Design Conference.

6 Nathan Shedroff

7 Todd Zaki Warfell

8 Chris Fowler

9 Brandon Oldenburg

10 Other Notable Speakers Bill Scott (VP, PayPal Author, Design Web Patterns) Eric Reiss (CEO, FatDUX Author, Usable Usability) Stephen Anderson (Author, Seductive Interactions) Sharon Rush (Executive Director, Knowbility) Dan Willis (UX Director, Marriott International) Jeremy Johnson (UX Director, Travelocity) Eric Swayne (Dir. of Customer Insights, Golin Harris) And lots more.

11 Step Up to the Mike Do you have what it takes to be the next. Big Design Idol! Submissions open up on April 1 st.

12 What is Usability?

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

14 Five Planes of User Experience

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

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

17 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

18 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

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

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

21 Nielsen s 10 Heuristic Guidelines

22 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 22

23 1. Feedback Principle 23

24 2. Metaphor Principle 24

25 2. Metaphor Principle 25

26 3. Navigation Principle 26

27 3. Navigation Principle 27

28 4. Consistency Principle 28

29 4. Consistency Principle 29

30 5. Prevention Principle 30

31 5. Prevention Principle Wikipedia Auto-focus Google auto-recommend 31

32 6. Memory Principle 32

33 6. Memory Principle Can someone tell me why this would aid your memory? 33

34 What s on the head s side of a penny?

35

36 How many ways can you identify these pennies?

37 Recall Recognition

38 Recognition is easier than recall.

39 7. Efficiency Principle 39

40 7. Efficiency Principle Buy Now with 1-Click is very efficient and scary on Black Friday, Cyber Monday, and any day of the week. 40

41 8. Design Principle 41

42 8. Design Principle 42

43 9. Recovery Principle 43

44 9. Recovery Principle 44

45 10. Help Principle 45

46 10. Help Principle Embedded Video Tool Tips 46

47 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 47