Updated slide deck for SharePoint Saturday NYC 2012

1. How to Make a SharePoint
Site Intuitive
The Science of “Easy-to-Use”
Presented by Marcy Kellar
SharePoint Saturday New York City #SPSNYC

2. Your Speaker: Marcy Kellar
• SharePoint Solution Architect at Perficient
• Co-author of Beginning SharePoint Designer
2010 (Wrox, October 2010)
• Professor, Art Institute, Intro to User Centered
Design” and “Usability Testing.”
• Specialties include
– SharePoint – Over 6 years experience
– User experience design (UX)
– SharePoint Branding and UI customization
– Information architecture
– Web content management
Marcy Kellar – usability testing
Twitter: @marcykellar
Blog: http://thesharepointmuse.com
Linkedin: http://linkedin.com/in/marcykellar

3. What You Will Learn Today
• How to articulate and define “easy-to-use” (and how to
measure it)
• Why your users do what they do
• Fundamentals and best practices in usability
• How to take advantage of current web conventions and
patterns
• The relationship between “easy-to-use”, psychology and
user adoption

7. 3 Things Must Be Defined For a Site To
Be “Easy To Use”

8. This Sink Should Be Easy to Use
Sink, 33rd floor, Hard Rock Hotel, Chicago April 2012

9. Define the User to make it “Easy to Use”
Sink, 33rd floor, Hard Rock Hotel, Chicago April 2012

10. Define the Task
Photo Courtesy icanhascheezburger.com

11. Defining Metrics
• What are you measuring?
– Time to Task?
– Completion?
– User Satisfaction?
• Be Specific
– %
– Seconds
• How will you test?
– Feedback
– Survey
– Logs
– Usability Testing

12. USABILITY
Usability is a quality attribute that assesses how easy user interfaces are to
use.

13. First Law of Usability
• Don’t Make Me THINK!!
• Thought Bubbles = The
Moment When User is
Pulled Out of Task
• Buy Steve Krug’s book,
“Don’t Make Me Think”

14. Fundamentals of Usability – The 5 E’s
• Effective
• Efficient
• Engaging
• Error Tolerant
• Easy to Learn
Photo: Courtesy of http://commons.wikimedia.org/wiki/Image:Elephant_side-view_Kruger.jpg

15. Fundamentals of Usability – The 5 E’s
Effectiveness – Did you do what you said you were going to
do?
Efficiency ISO 9241 defines efficiency as the total resources
expended in a task.
Engaging -An interface is engaging if it is pleasant and
satisfying to use.
Errors - Make it difficult to take incorrect actions. Make it difficult
to take invalid actions.
Easy to Learn – This one is the part people spend too much
time focusing on. So if your users have to think – make them
only think one time. Easy to learn can still be usable.
http://www.wqusability.com/articles/more-than-ease-of-use.html

16. Testing Those Metrics
• Qualitative – Users
provide anecdotal
evidence; Informal;
“feedback”
• Quantitative – Data.
Scientific. Don’t Really
Need User. (Search Fails.
404s. Logs)
Photo Courtesy of Fox Broadcasting Company

17. QUESTION:
What 3 things should be defined to
successfully make a site “Easy to Use”

18. Better Requirement Definitions
• Efficient - "The system will improve user performance on expense
tasks by 3 minutes"
• Effective - "Less than 5% of the registrations will have errors,
omissions or inconsistencies requiring a follow-up contact by the
staff."
• Engaging - "At least 80% of employees will express comfort with
using the online system rather than visiting the HR office."
• Error Tolerant – "The system will validate all housing, meal and
tutorial choices and allow the user to confirm pricing for these
options before completing the registration."
• Easy to Learn – "Users will be able to successfully complete a
benefits calculation without needing any external instruction or help
screens."
http://www.wqusability.com/articles/more-than-ease-of-use.html

19. Better Requirement Definitions for
“Easy to Use”
• Authors will be able to upload content daily without
complaint
• Content authors will report no more than 2 errors per
month with content uploads
• Email Servers will reduce load by 50%
• Users will be able to complete expense reports 100% of
attempts.
• Users will be able to complete expense reports without
errors after receiving training.

20. HOW USERS REALLY USE
THE WEB

21. What You Design For…
Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

22. The Reality…
Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

23. Questions Users Ask
• What type of site is this?
• Have I experienced a site like this
before?
• Have I been to this site before?
• Where am I?
• Where have I been?

24. Questions Users Ask
• What type of site is this?
• Have I experienced a site like this
before?
• Have I been to this site before?
• Where am I?
• Where have I been?
The answers to these questions are generally
first conveyed to the user through visual design.

25. Intuitive =
Readily learned or
understood

26. Defining the Intuitive Factor
What Your Users What You Want
Already Know Your Users To Do
Current Target
Knowledge Knowledge

27. Defining the Intuitive Factor
What Your Users What You Want
Already Know Your Users To Do
GAP
Current Target
Knowledge Knowledge

28. Intuitive Sites
• Intuitiveness is based on the user’s current knowledge
• Design around users expectations
• Learn Design Patterns
• Follow Visual Design Best Practices
• Be Consistent

29. Get Inside Users Minds
Photo Courtesy iStock

30. “If I had asked people what they
wanted, they would have said faster
horses.”
Henry Ford

31. Users spend most of their
time on other sites
Jakob's Law of the Web User Experience

32. What Users Expect: Conventions
Found at Universal Usability Guidelines

33. Users don’t like to feel
dum b
~Marcy Kellar and basic general psychology

34. Discussion/
Whiteboard

35. “We find that people quickly evaluate
a site by visual design alone.”
~ Stanford Guidelines for Web Credibility,

36. Visual Design
Isn't About
Making Things
“Pretty”

37. Visual Design
Communicates

38. The Presentation Ecosystem
• Educate users • Maintain consistency to create
• Establish relationships between a sense of place
content • Effectively convey your
message to your audience
• Guide users through actions
• Emotional impact
• Focus user attention
• Make organizational systems clear • Engage and invite
• Give sites a unique personality
• Provide situational awareness
Slide Based on information created by Luke Wroblewski

39. Purpose

40. Mood/Emotion

41. Brand

42. Action/State

43. Orientation

44. Visual Design Communicates
• Relationships
• Importance
• Relevance

45. Organizes Information

46. Conveys Relationships

47. 1. Clear Visual Hierarchy
2. Unclear Visual Hierarchy
Provides Visual Hierarchy

48. Take Aways
• “Easy to Use” is not a good enough definition to make it so
• Usability must be considered at the beginning of a project
• Usability metrics can be defined by anecdotes or data
• To build something intuitive means understanding how users think and what
they expect
• Anyone can make a SharePoint site easy to use by considering the user, task
and defining how it will be measured.
• Users adopt what is easy and engaging
• If you don’t have user information follow web conventions for where to place
items, follow visual design guidelines and consider usability
• Visual design communicates many things to the user before one word is read

49. Questions?

50. Where To Find Me
• Twitter: @marcykellar
• Blog: http://thesharepointmuse.com
• Linkedin: http://linkedin.com/in/marcykellar

51. Resources
• useit.com • 10 Useful Usability Findings and Guidelines
• boxesandarrows.com • 20 Do’s and Don’ts of Effective Web Design
• uxmatters.com • Usability – More than Ease of Use
• uxmag.com • http://designingwebinterfaces.com/
• Usability.gov • Gestalt Principles of Design
• Usability.net • The Gestalt Principle: Design Theory for
Web Designers
• Usability Professional’s Association
• Universal Usability Guidelines
• Standard Web Components

52. Resources: Design Patterns
• http://patternry.com
• http://ui-patterns.com
• http://mobile-patterns.com
• QUINCE: X Patterns Explorer
• Interaction Design Pattern Library
• Pattern Tap
• http://designingsocialinterfaces.com/patterns/