SlideShare a Scribd company logo
1 of 52
Download to read offline
How to Make a SharePoint
Site Intuitive
The Science of “Easy-to-Use”

Presented by Marcy Kellar
SharePoint Saturday New York City #SPSNYC
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
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
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
3 Things Must Be Defined For a Site To
Be “Easy To Use”
This Sink Should Be Easy to Use




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




Sink, 33rd floor, Hard Rock Hotel, Chicago April 2012
Define the Task




Photo Courtesy icanhascheezburger.com
Defining Metrics
• What are you measuring?
   – Time to Task?
   – Completion?
   – User Satisfaction?
• Be Specific
   – %
   – Seconds
• How will you test?
   –   Feedback
   –   Survey
   –   Logs
   –   Usability Testing
USABILITY
Usability is a quality attribute that assesses how easy user interfaces are to
use.
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”
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
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
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
QUESTION:
What 3 things should be defined to
successfully make a site “Easy to Use”
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
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.
HOW USERS REALLY USE
THE WEB
What You Design For…




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




     Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability
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?
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.
Intuitive =
Readily learned or
   understood
Defining the Intuitive Factor


 What Your Users         What You Want
 Already Know           Your Users To Do


  Current                    Target
  Knowledge                  Knowledge
Defining the Intuitive Factor


 What Your Users          What You Want
 Already Know            Your Users To Do
                   GAP


  Current                     Target
  Knowledge                   Knowledge
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
Get Inside Users Minds




Photo Courtesy iStock
“If I had asked people what they
wanted, they would have said faster
horses.”
 Henry Ford
Users spend most of their
   time on other sites


     Jakob's Law of the Web User Experience
What Users Expect: Conventions




Found at Universal Usability Guidelines
Users don’t like to feel
                dum b

   ~Marcy Kellar and basic general psychology
Discussion/
Whiteboard
“We find that people quickly evaluate
 a site by visual design alone.”
               ~ Stanford Guidelines for Web Credibility,
Visual Design
 Isn't About
Making Things
   “Pretty”
Visual Design
Communicates
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
Purpose
Mood/Emotion
Brand
Action/State
Orientation
Visual Design Communicates
• Relationships
• Importance
• Relevance
Organizes Information
Conveys Relationships
1. Clear Visual Hierarchy

                            2. Unclear Visual Hierarchy




   Provides Visual Hierarchy
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
Questions?
Where To Find Me
• Twitter: @marcykellar
• Blog: http://thesharepointmuse.com
• Linkedin: http://linkedin.com/in/marcykellar
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
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/

More Related Content

What's hot

SharePoint Exchange Forum - How to Make a SharePoint Site Intuitive
SharePoint Exchange Forum - How to Make a SharePoint Site IntuitiveSharePoint Exchange Forum - How to Make a SharePoint Site Intuitive
SharePoint Exchange Forum - How to Make a SharePoint Site IntuitiveMarcy Kellar
 
Design with the User In Mind: Best Practices for a Usable and Adopted SharePo...
Design with the User In Mind: Best Practices for a Usable and Adopted SharePo...Design with the User In Mind: Best Practices for a Usable and Adopted SharePo...
Design with the User In Mind: Best Practices for a Usable and Adopted SharePo...Marcy Kellar
 
"Creating user-centered websites that drive results" by Savage at the HiMA IS...
"Creating user-centered websites that drive results" by Savage at the HiMA IS..."Creating user-centered websites that drive results" by Savage at the HiMA IS...
"Creating user-centered websites that drive results" by Savage at the HiMA IS...Robin Tooms
 
COMP 4010: Lecture 6 Example VR Applications
COMP 4010: Lecture 6 Example VR ApplicationsCOMP 4010: Lecture 6 Example VR Applications
COMP 4010: Lecture 6 Example VR ApplicationsMark Billinghurst
 
Introduction to building and using personas and scenarios in design
Introduction to building and using personas and scenarios in designIntroduction to building and using personas and scenarios in design
Introduction to building and using personas and scenarios in designPenny Hagen
 
Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Christina Wodtke
 
INSIGNIA Open Badges Design Workshop
INSIGNIA Open Badges Design WorkshopINSIGNIA Open Badges Design Workshop
INSIGNIA Open Badges Design WorkshopJoyce Seitzinger
 
UX: The Power of Getting Things Designed
UX: The Power of Getting Things DesignedUX: The Power of Getting Things Designed
UX: The Power of Getting Things DesignedAustin Govella
 
Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Robert Stribley
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction DesignChristina Wodtke
 
Basics of Interaction Design & Strategy - 4/9/16
Basics of Interaction Design & Strategy - 4/9/16Basics of Interaction Design & Strategy - 4/9/16
Basics of Interaction Design & Strategy - 4/9/16Robert Stribley
 
Basics of Interaction Design & Strategy - 6/12/15
Basics of Interaction Design & Strategy - 6/12/15Basics of Interaction Design & Strategy - 6/12/15
Basics of Interaction Design & Strategy - 6/12/15Robert Stribley
 
Online Collaboration with Google Docs
Online Collaboration with Google DocsOnline Collaboration with Google Docs
Online Collaboration with Google DocsP Parson
 
School board presentation
School board presentationSchool board presentation
School board presentationgallet
 
Understanding Information Architecture: A Workshop
Understanding Information Architecture: A WorkshopUnderstanding Information Architecture: A Workshop
Understanding Information Architecture: A WorkshopAbby Covert
 

What's hot (20)

SharePoint Exchange Forum - How to Make a SharePoint Site Intuitive
SharePoint Exchange Forum - How to Make a SharePoint Site IntuitiveSharePoint Exchange Forum - How to Make a SharePoint Site Intuitive
SharePoint Exchange Forum - How to Make a SharePoint Site Intuitive
 
Design with the User In Mind: Best Practices for a Usable and Adopted SharePo...
Design with the User In Mind: Best Practices for a Usable and Adopted SharePo...Design with the User In Mind: Best Practices for a Usable and Adopted SharePo...
Design with the User In Mind: Best Practices for a Usable and Adopted SharePo...
 
Mobile Games & Culture
Mobile Games & CultureMobile Games & Culture
Mobile Games & Culture
 
"Creating user-centered websites that drive results" by Savage at the HiMA IS...
"Creating user-centered websites that drive results" by Savage at the HiMA IS..."Creating user-centered websites that drive results" by Savage at the HiMA IS...
"Creating user-centered websites that drive results" by Savage at the HiMA IS...
 
COMP 4010: Lecture 6 Example VR Applications
COMP 4010: Lecture 6 Example VR ApplicationsCOMP 4010: Lecture 6 Example VR Applications
COMP 4010: Lecture 6 Example VR Applications
 
Introduction to building and using personas and scenarios in design
Introduction to building and using personas and scenarios in designIntroduction to building and using personas and scenarios in design
Introduction to building and using personas and scenarios in design
 
Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)Designing Interfaces (and Wireframes)
Designing Interfaces (and Wireframes)
 
October 28, 2015 NISO Virtual Conference Interacting with Content: Improving ...
October 28, 2015 NISO Virtual Conference Interacting with Content: Improving ...October 28, 2015 NISO Virtual Conference Interacting with Content: Improving ...
October 28, 2015 NISO Virtual Conference Interacting with Content: Improving ...
 
INSIGNIA Open Badges Design Workshop
INSIGNIA Open Badges Design WorkshopINSIGNIA Open Badges Design Workshop
INSIGNIA Open Badges Design Workshop
 
UX: The Power of Getting Things Designed
UX: The Power of Getting Things DesignedUX: The Power of Getting Things Designed
UX: The Power of Getting Things Designed
 
Griot: Open Source Storytelling Tool
Griot: Open Source Storytelling ToolGriot: Open Source Storytelling Tool
Griot: Open Source Storytelling Tool
 
Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17
 
Designing Structure: Interaction Design
Designing Structure: Interaction DesignDesigning Structure: Interaction Design
Designing Structure: Interaction Design
 
Basics of Interaction Design & Strategy - 4/9/16
Basics of Interaction Design & Strategy - 4/9/16Basics of Interaction Design & Strategy - 4/9/16
Basics of Interaction Design & Strategy - 4/9/16
 
Basics of Interaction Design & Strategy - 6/12/15
Basics of Interaction Design & Strategy - 6/12/15Basics of Interaction Design & Strategy - 6/12/15
Basics of Interaction Design & Strategy - 6/12/15
 
UX is not UI
UX is not UIUX is not UI
UX is not UI
 
Online Collaboration with Google Docs
Online Collaboration with Google DocsOnline Collaboration with Google Docs
Online Collaboration with Google Docs
 
School board presentation
School board presentationSchool board presentation
School board presentation
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To Usability
 
Understanding Information Architecture: A Workshop
Understanding Information Architecture: A WorkshopUnderstanding Information Architecture: A Workshop
Understanding Information Architecture: A Workshop
 

Viewers also liked

Best Practices Guide: Introducing Web Application Firewalls
Best Practices Guide: Introducing Web Application FirewallsBest Practices Guide: Introducing Web Application Firewalls
Best Practices Guide: Introducing Web Application Firewallsalexmeisel
 
Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
 Building & Maintaining A Living Style Guide for a Post Apocalyptic Web Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
Building & Maintaining A Living Style Guide for a Post Apocalyptic Webmjovel
 
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims AuthenticationSharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims AuthenticationBrian Culver
 
Enterprise Collaboration and Employee Engagement with Microsoft SharePoint My...
Enterprise Collaboration and Employee Engagement with Microsoft SharePoint My...Enterprise Collaboration and Employee Engagement with Microsoft SharePoint My...
Enterprise Collaboration and Employee Engagement with Microsoft SharePoint My...rwuhrman
 
Create your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page LayoutsCreate your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page LayoutsEric Overfield
 
Share Point Presentation Introduction To Sharepoint
Share Point Presentation    Introduction To SharepointShare Point Presentation    Introduction To Sharepoint
Share Point Presentation Introduction To Sharepointrpeterson1
 
What's new in SharePoint 2016 for IT Professionals Webinar with CrowCanyon
What's new in SharePoint 2016 for IT Professionals Webinar with CrowCanyonWhat's new in SharePoint 2016 for IT Professionals Webinar with CrowCanyon
What's new in SharePoint 2016 for IT Professionals Webinar with CrowCanyonVlad Catrinescu
 
10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)Christian Buckley
 
Don't Suck at SharePoint - Avoid the common mistakes
Don't Suck at SharePoint - Avoid the common mistakesDon't Suck at SharePoint - Avoid the common mistakes
Don't Suck at SharePoint - Avoid the common mistakesBenjamin Niaulin
 
SharePoint 2016: Features Overview
SharePoint 2016: Features OverviewSharePoint 2016: Features Overview
SharePoint 2016: Features OverviewShareGate
 

Viewers also liked (10)

Best Practices Guide: Introducing Web Application Firewalls
Best Practices Guide: Introducing Web Application FirewallsBest Practices Guide: Introducing Web Application Firewalls
Best Practices Guide: Introducing Web Application Firewalls
 
Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
 Building & Maintaining A Living Style Guide for a Post Apocalyptic Web Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
 
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims AuthenticationSharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
 
Enterprise Collaboration and Employee Engagement with Microsoft SharePoint My...
Enterprise Collaboration and Employee Engagement with Microsoft SharePoint My...Enterprise Collaboration and Employee Engagement with Microsoft SharePoint My...
Enterprise Collaboration and Employee Engagement with Microsoft SharePoint My...
 
Create your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page LayoutsCreate your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page Layouts
 
Share Point Presentation Introduction To Sharepoint
Share Point Presentation    Introduction To SharepointShare Point Presentation    Introduction To Sharepoint
Share Point Presentation Introduction To Sharepoint
 
What's new in SharePoint 2016 for IT Professionals Webinar with CrowCanyon
What's new in SharePoint 2016 for IT Professionals Webinar with CrowCanyonWhat's new in SharePoint 2016 for IT Professionals Webinar with CrowCanyon
What's new in SharePoint 2016 for IT Professionals Webinar with CrowCanyon
 
10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)
 
Don't Suck at SharePoint - Avoid the common mistakes
Don't Suck at SharePoint - Avoid the common mistakesDon't Suck at SharePoint - Avoid the common mistakes
Don't Suck at SharePoint - Avoid the common mistakes
 
SharePoint 2016: Features Overview
SharePoint 2016: Features OverviewSharePoint 2016: Features Overview
SharePoint 2016: Features Overview
 

Similar to Designing Intuitive SharePoint Sites: The Science of "Easy to Use"

User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an OverviewJulie Grundy
 
Introduction to User Experience Design 2/15/20
Introduction to User Experience Design 2/15/20Introduction to User Experience Design 2/15/20
Introduction to User Experience Design 2/15/20Robert Stribley
 
What Makes SharePoint UX Good?
What Makes SharePoint UX Good?What Makes SharePoint UX Good?
What Makes SharePoint UX Good?Thomas Daly
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiThanos Makaronas
 
Conducting User Research
Conducting User ResearchConducting User Research
Conducting User ResearchJeremy Horn
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...Karen Bachmann
 
Website Usability - Direct Marketing Association NorCal 042016
Website Usability - Direct Marketing Association NorCal  042016Website Usability - Direct Marketing Association NorCal  042016
Website Usability - Direct Marketing Association NorCal 042016John Thyfault
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team Guilherme Rodrigues
 
Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?Johan Verhaegen
 
Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Samantha Bailey
 
User Experience Design Fundamentals - Part 2: Talking with Users
User Experience Design Fundamentals - Part 2: Talking with UsersUser Experience Design Fundamentals - Part 2: Talking with Users
User Experience Design Fundamentals - Part 2: Talking with UsersLaura B
 
Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Robert Stribley
 
A bluffer's guide to IA and content strategy
A bluffer's guide to IA and content strategyA bluffer's guide to IA and content strategy
A bluffer's guide to IA and content strategyNeil Allison
 

Similar to Designing Intuitive SharePoint Sites: The Science of "Easy to Use" (20)

User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
Introduction to User Experience Design 2/15/20
Introduction to User Experience Design 2/15/20Introduction to User Experience Design 2/15/20
Introduction to User Experience Design 2/15/20
 
What Makes SharePoint UX Good?
What Makes SharePoint UX Good?What Makes SharePoint UX Good?
What Makes SharePoint UX Good?
 
Intro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful uiIntro to ux and how to design a thoughtful ui
Intro to ux and how to design a thoughtful ui
 
Conducting User Research
Conducting User ResearchConducting User Research
Conducting User Research
 
Usability 101
Usability 101Usability 101
Usability 101
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...
 
Designing the user experience
Designing the user experienceDesigning the user experience
Designing the user experience
 
Website Usability - Direct Marketing Association NorCal 042016
Website Usability - Direct Marketing Association NorCal  042016Website Usability - Direct Marketing Association NorCal  042016
Website Usability - Direct Marketing Association NorCal 042016
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team
 
Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?
 
Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012Usability Workshop, 11-8-2012
Usability Workshop, 11-8-2012
 
Putting the Customer's User Experience First Online
Putting the Customer's User Experience First OnlinePutting the Customer's User Experience First Online
Putting the Customer's User Experience First Online
 
COMP 4026 - Lecture 1
COMP 4026 - Lecture 1COMP 4026 - Lecture 1
COMP 4026 - Lecture 1
 
VIGC Academy
VIGC AcademyVIGC Academy
VIGC Academy
 
User Experience Design Fundamentals - Part 2: Talking with Users
User Experience Design Fundamentals - Part 2: Talking with UsersUser Experience Design Fundamentals - Part 2: Talking with Users
User Experience Design Fundamentals - Part 2: Talking with Users
 
Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15
 
Ch 3
Ch   3Ch   3
Ch 3
 
A bluffer's guide to IA and content strategy
A bluffer's guide to IA and content strategyA bluffer's guide to IA and content strategy
A bluffer's guide to IA and content strategy
 

More from Marcy Kellar

Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...
Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...
Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...Marcy Kellar
 
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint BrandingSharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint BrandingMarcy Kellar
 
10 Worst Mistakes in SharePoint Branding
10 Worst Mistakes in SharePoint Branding10 Worst Mistakes in SharePoint Branding
10 Worst Mistakes in SharePoint BrandingMarcy Kellar
 
SharePoint User Experience: What Can it do for Adoption
SharePoint User Experience: What Can it do for AdoptionSharePoint User Experience: What Can it do for Adoption
SharePoint User Experience: What Can it do for AdoptionMarcy Kellar
 
SPSRIC - A SharePoint Designer’s Lessons Learned
SPSRIC - A SharePoint Designer’s Lessons Learned SPSRIC - A SharePoint Designer’s Lessons Learned
SPSRIC - A SharePoint Designer’s Lessons Learned Marcy Kellar
 
SPSColumbus - A SharePoint Designer’s Lessons Learned
SPSColumbus - A SharePoint Designer’s Lessons LearnedSPSColumbus - A SharePoint Designer’s Lessons Learned
SPSColumbus - A SharePoint Designer’s Lessons LearnedMarcy Kellar
 
Twitter for the Newbie: How to Use Twitter
Twitter for the Newbie: How to Use TwitterTwitter for the Newbie: How to Use Twitter
Twitter for the Newbie: How to Use TwitterMarcy Kellar
 
SharePoint User Experience Design Project Plan v1.0
SharePoint User Experience Design Project Plan v1.0SharePoint User Experience Design Project Plan v1.0
SharePoint User Experience Design Project Plan v1.0Marcy Kellar
 
Branding Wont Fix Crappy Content - SharePoint User Experience Discussion
Branding Wont Fix Crappy Content - SharePoint User Experience DiscussionBranding Wont Fix Crappy Content - SharePoint User Experience Discussion
Branding Wont Fix Crappy Content - SharePoint User Experience DiscussionMarcy Kellar
 

More from Marcy Kellar (9)

Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...
Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...
Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...
 
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint BrandingSharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
SharePoint Exchange Forum - 10 Worst Mistakes in SharePoint Branding
 
10 Worst Mistakes in SharePoint Branding
10 Worst Mistakes in SharePoint Branding10 Worst Mistakes in SharePoint Branding
10 Worst Mistakes in SharePoint Branding
 
SharePoint User Experience: What Can it do for Adoption
SharePoint User Experience: What Can it do for AdoptionSharePoint User Experience: What Can it do for Adoption
SharePoint User Experience: What Can it do for Adoption
 
SPSRIC - A SharePoint Designer’s Lessons Learned
SPSRIC - A SharePoint Designer’s Lessons Learned SPSRIC - A SharePoint Designer’s Lessons Learned
SPSRIC - A SharePoint Designer’s Lessons Learned
 
SPSColumbus - A SharePoint Designer’s Lessons Learned
SPSColumbus - A SharePoint Designer’s Lessons LearnedSPSColumbus - A SharePoint Designer’s Lessons Learned
SPSColumbus - A SharePoint Designer’s Lessons Learned
 
Twitter for the Newbie: How to Use Twitter
Twitter for the Newbie: How to Use TwitterTwitter for the Newbie: How to Use Twitter
Twitter for the Newbie: How to Use Twitter
 
SharePoint User Experience Design Project Plan v1.0
SharePoint User Experience Design Project Plan v1.0SharePoint User Experience Design Project Plan v1.0
SharePoint User Experience Design Project Plan v1.0
 
Branding Wont Fix Crappy Content - SharePoint User Experience Discussion
Branding Wont Fix Crappy Content - SharePoint User Experience DiscussionBranding Wont Fix Crappy Content - SharePoint User Experience Discussion
Branding Wont Fix Crappy Content - SharePoint User Experience Discussion
 

Recently uploaded

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 

Recently uploaded (19)

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 

Designing Intuitive SharePoint Sites: The Science of "Easy to Use"

  • 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.
  • 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
  • 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”
  • 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
  • 41. Brand
  • 44. Visual Design Communicates • Relationships • Importance • Relevance
  • 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
  • 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/