Designing Intuitive
SharePoint Sites
Using Visual Design Principles and Usability Best Practices to
Improve Intuitiveness ...
About Me
                       SharePoint UI Consultant with PointBridge

                       Diverse background in li...
Topics To Cover
• Intuitive Sites
• Usability Best Practices
• Color
• Visual Design Principles
• Q&A




1/30/2010       ...
Intuitive Products Change My Life




1/30/2010     @marcykellar
Help Me Find My Keys




1/30/2010    @marcykellar
Intuitive = Readily
     learned or understood


1/30/2010    @marcykellar
Defining the Intuitive Factor


  What Your Users                   What You Want
  Already Know                     Your ...
Defining the Intuitive Factor


  What Your Users                   What You Want
  Already Know                     Your ...
Users spend most of their
   time on other sites


            Jakob's Law of the Web User Experience



1/30/2010        ...
What Users Expect: Conventions




Found at Universal Usability Guidelines


1/30/2010                         @marcykellar
Questions Users Ask
  •   What type of site is this?
  •   Have I experienced a site like this
      before?
  •   Have I ...
Questions Users Ask
  •   What type of site is this?
  •   Have I experienced a site like this
      before?
  •   Have I ...
Intuitive Site Summary
  • The intuitiveness of a site is based on the user‟s knowledge

  • If user base has already been...
"Know thy user, and you are not
                             thy user."
                                  ~ Arnie Lund



...
Usability is a quality attribute that assesses how easy user
  interfaces are to use. The word "usability" also refers to ...
First Law: Don’t Make Me Think
Anytime a “guess” is brought into the
equation you are adding unnecessary
thought bubbles a...
What You Design For…




            Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability


1/30/2010...
The Reality…




            Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability


1/30/2010        ...
Usability Facts
• “Current best practices call for spending about 10% of a design
  project's budget on usability” Usabili...
Organization Information
• Users Don’t Read: provide clues that allow users to find their
  „nugget‟ of information‟ by sc...
VISUAL DESIGN

1/30/2010   @marcykellar
“We find that people quickly evaluate
 a site by visual design alone.”
               ~ Stanford Guidelines for Web Credib...
Visual Design
             Isn't About
            Making Things
               “Pretty”
1/30/2010         @marcykellar
Visual Design
            Communicates

1/30/2010         @marcykellar
Purpose
1/30/2010    @marcykellar
Mood/Emotion
1/30/2010       @marcykellar
Brand Message
1/30/2010       @marcykellar
Action/State
1/30/2010      @marcykellar
Orientation
1/30/2010      @marcykellar
Visual Design
            Has Purpose

1/30/2010        @marcykellar
Organizes Information
1/30/2010           @marcykellar
Conveys Relationships
1/30/2010           @marcykellar
1. Clear Visual Hierarchy

                                                   2. Unclear Visual Hierarchy




            ...
The Presentation Ecosystem




     • Educate users                                          • Maintain consistency to cre...
COLOR

1/30/2010   @marcykellar
Color Meanings*
    • Red: passion, love, anger                • Gray: moody, conservative,
                              ...
Color Guidelines
                      • A complicated color palette is
                        for advanced designers
   ...
Color Contrast




1/30/2010        @marcykellar
Color Tips
• Use a palette of colors found in nature

• Perform a readability test before go-live

• Test for high contras...
Avoid High Contrast Text on
Dark Backgrounds




1/30/2010       @marcykellar
Avoid High Contrast Text on
Dark Backgrounds




            Ouch… Make it Stop

1/30/2010          @marcykellar
Color Tools
Color Contrast                       Color Palette Generator
  Graybit.com                          Adobe Kule...
Design Principles
  The principles of design are guidelines used for putting
  elements together to create effective commu...
Design Principles:
Now They’ll Believe You!




1/30/2010       @marcykellar
The study of visual opposition.
  “If two items are not exactly the same, then make them different.
  Really different.”

...
Contrast




1/30/2010   @marcykellar
Contrast


Contrast sometimes is used
inappropriately or
inadvertently in SharePoint
thanks to the rich text editor.




1...
Contrast Tips
• Use typeface, color, whitespace, texture as contrasting
  elements
• Create a focal point on a page by con...
The use of repetition to create movement occurs when elements
  which have something in common are repeated regularly or
 ...
Repetition
             • Adds consistency
             • Unifies all parts of a design
             • Organizes informati...
Repetition
                            Repeated elements are
                            inherent in SharePoint.

        ...
Repetition
                                             Repeated elements are
                                            ...
Repetition Tips
• Repeat some element of design throughout the piece such as color,
  shape, texture, bullets

• Repeat vi...
Human beings perceive items that are aligned vertically and/or
  horizontally to be more organized than those that are not...
Alignment
                                            Don't center or justify lines of
                                   ...
Alignment: Example




1/30/2010    @marcykellar
Alignment: Corrected




1/30/2010     @marcykellar
More Examples…




1/30/2010   @marcykellar
More Examples…




            Can you spot the issues?

1/30/2010            @marcykellar
Alignment Tips
• Nothing should be placed on the page arbitrarily.

• All page items should have a visual connection

• Us...
The principle of proximity allows similar or related elements to be
  grouped together to form a cohesive whole. Items tha...
Proximity
                    Grouping several elements in
                    close proximity they become one
           ...
Proximity Example: Good




1/30/2010    @marcykellar
Proximity Example: Poor




1/30/2010     @marcykellar
Proximity Example: Poor




1/30/2010     @marcykellar
Proximity Tips
• Group related items together

• Keep non-related items far apart so that reader isn‟t confused

• DON'T u...
Design Principles


  SHAREPOINT EXAMPLES
  IN ACTION
1/30/2010             @marcykellar
People to People




1/30/2010     @marcykellar
People to People




1/30/2010     @marcykellar
Advanced Distributed Learning




1/30/2010     @marcykellar
Advanced Distributed Learning




1/30/2010     @marcykellar
Fluor




1/30/2010   @marcykellar
Fluor




1/30/2010   @marcykellar
Avista




1/30/2010   @marcykellar
Avista




1/30/2010   @marcykellar
Cadence




1/30/2010   @marcykellar
Cadence




1/30/2010   @marcykellar
MyClubMyLife.com




1/30/2010   @marcykellar
MyClubMyLife.com




1/30/2010   @marcykellar
Resources: Podcasts
  UXNet Podcast
  UIE: Brain Sparks
  Boagworld




1/30/2010             @marcykellar
Resources: Visual Design
  SmashingMagazine.com

  WebDesignLedger.com

  The Pursuit of Interface Design Simplicity -Luke...
Resources: Usability and UX
  useit.com                             Standard Web Components
  boxesandarrows.com          ...
Resources: Books




1/30/2010     @marcykellar
Where To Find Me




              Resources and epiphanies in
                140 characters or less.



        http://t...
References
  The Non Designers Design Book, Robin Williams

  Universal Usability Guidelines

  Don‟t Make Me Think, Steve...
Upcoming SlideShare
Loading in...5
×

Designing Intuitive SharePoint Sites

33,490

Published on

Building Intuitive SharePoint sites using Visual Design Principles and usability best practices.

Published in: Design, Technology
11 Comments
120 Likes
Statistics
Notes
  • This is really a Microsoft version of what Google Apps has been doing for a long time. Excel and Access has lost a lot of the rich features that make them applications for power users. The multi-solution software is making an introduction for a single solution UXP management system like Centralpoint by Oxycon. We had been hearing a lot about Centralpoint by Oxcyon but didn’t think too much of it until hearing Gartner’s report. SharePoint has been dominating the field with Microsoft new campaign of integrating products. I guess Access is about to become the new InfoPath a complete failure for the cloud.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • is there any chance to have a copy of this slideshow?

    I love it.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice presentation. Let me introduce you Bind Tuning http://bindtuning.com a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great stuff!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I sometimes had trouble with colors and thinking of designs.
    Great presentation that will help me.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
33,490
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
2,642
Comments
11
Likes
120
Embeds 0
No embeds

No notes for slide
  • About Me: Marcy KellarWorking atPointBridge as a user interface consultant. Diverse background in life sciences, psychology, data management and technologyOver four years experience in SharePoint architecture planning and implementationOver twenty years experience in fine art and visual design
  • I have ADD and often find myself running on autopilot. The success of my day-to-day activities can be dependent on the intuitiveness of the products in my life. The impact of not having an intuitive keyholder can be felt throughout those connected to me in my life. Let’s say I pull in my garage and I’m on the phone. I’m listening to the person on the other end and as I exit my car and walk in the door, I’m on autopilot. If I don’t have a key holder that is just intuitive to use, I may walk right by my key holder without putting my keys on it. I may not be able to find my keys when I am rushing out the door to my next appointment.
  • SThe message here is that intuitive is based on the user. It’s personal. What’s intuitive to one group of users may not be intuitive to another group.
  • Webster’s dictionary states that Intuitive means readily learned or understood. How do you determine what is readily understood? Is it the same for everyone?
  • To make something more intuitive you must understand what your users alerady know and what you want them to do.
  • Follow Web Conventions to Better Meet User Expectations and Make Site Intuitive
  • Designing Intuitive SharePoint Sites

    1. 1. Designing Intuitive SharePoint Sites Using Visual Design Principles and Usability Best Practices to Improve Intuitiveness of your SharePoint Site Presented by Marcy Kellar Presentation based on slides presented at SharePoint Saturday, Indianapolis January 30, 2010
    2. 2. About Me SharePoint UI Consultant with PointBridge Diverse background in life sciences, psychology, data management and technology Over four years experience in SharePoint architecture design, branding & implementation Over twenty years experience in fine art Marcy Kellar 1/30/2010 @marcykellar
    3. 3. Topics To Cover • Intuitive Sites • Usability Best Practices • Color • Visual Design Principles • Q&A 1/30/2010 @marcykellar
    4. 4. Intuitive Products Change My Life 1/30/2010 @marcykellar
    5. 5. Help Me Find My Keys 1/30/2010 @marcykellar
    6. 6. Intuitive = Readily learned or understood 1/30/2010 @marcykellar
    7. 7. Defining the Intuitive Factor What Your Users What You Want Already Know Your Users To Do Current Target Knowledge Knowledge 1/30/2010 @marcykellar
    8. 8. Defining the Intuitive Factor What Your Users What You Want Already Know Your Users To Do GAP Current Target Knowledge Knowledge 1/30/2010 @marcykellar
    9. 9. Users spend most of their time on other sites Jakob's Law of the Web User Experience 1/30/2010 @marcykellar
    10. 10. What Users Expect: Conventions Found at Universal Usability Guidelines 1/30/2010 @marcykellar
    11. 11. 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? 1/30/2010 @marcykellar
    12. 12. 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. 1/30/2010 @marcykellar
    13. 13. Intuitive Site Summary • The intuitiveness of a site is based on the user‟s knowledge • If user base has already been using SharePoint, consider this before moving Site Actions, Search, etc • If you don‟t have user information follow web conventions for where to place items, follow visual design guidelines and consider usability 1/30/2010 @marcykellar
    14. 14. "Know thy user, and you are not thy user." ~ Arnie Lund 1/30/2010 @marcykellar
    15. 15. Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process. USABILITY 1/30/2010 @marcykellar
    16. 16. First Law: Don’t Make Me Think Anytime a “guess” is brought into the equation you are adding unnecessary thought bubbles above the users head. The more challenging a website is for a user to use, the less likely they will use it. Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability 1/30/2010 @marcykellar
    17. 17. What You Design For… Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability 1/30/2010 @marcykellar
    18. 18. The Reality… Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability 1/30/2010 @marcykellar
    19. 19. Usability Facts • “Current best practices call for spending about 10% of a design project's budget on usability” Usability 101, Jakob Neilson • “A key principle for maximizing usability is to employ iterative design, which progressively refines the design through evaluation from the early stages of design.” Usabilityfirst.com 1/30/2010 @marcykellar
    20. 20. Organization Information • Users Don’t Read: provide clues that allow users to find their „nugget‟ of information‟ by scanning rather than reading • Users need to find information quickly and easily • Organize information into schema/hierarchy • „Chunk‟ information into small pieces 1/30/2010 @marcykellar
    21. 21. VISUAL DESIGN 1/30/2010 @marcykellar
    22. 22. “We find that people quickly evaluate a site by visual design alone.” ~ Stanford Guidelines for Web Credibility, 1/30/2010 @marcykellar
    23. 23. Visual Design Isn't About Making Things “Pretty” 1/30/2010 @marcykellar
    24. 24. Visual Design Communicates 1/30/2010 @marcykellar
    25. 25. Purpose 1/30/2010 @marcykellar
    26. 26. Mood/Emotion 1/30/2010 @marcykellar
    27. 27. Brand Message 1/30/2010 @marcykellar
    28. 28. Action/State 1/30/2010 @marcykellar
    29. 29. Orientation 1/30/2010 @marcykellar
    30. 30. Visual Design Has Purpose 1/30/2010 @marcykellar
    31. 31. Organizes Information 1/30/2010 @marcykellar
    32. 32. Conveys Relationships 1/30/2010 @marcykellar
    33. 33. 1. Clear Visual Hierarchy 2. Unclear Visual Hierarchy Provides Visual Hierarchy 1/30/2010 @marcykellar
    34. 34. 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 1/30/2010 @marcykellar
    35. 35. COLOR 1/30/2010 @marcykellar
    36. 36. Color Meanings* • Red: passion, love, anger • Gray: moody, conservative, formality • Orange: energy, happiness, vitality • White: purity, cleanliness, virtue • Yellow: happiness, hope, deceit • Brown: nature, wholesomeness, • Green: new beginnings, dependability abundance, nature • Tan or beige: conservative, piety, • Blue: calm, responsible, sadness dull • Purple: creativity, royalty, wealth • Cream or ivory: calm, elegant, • Black: mystery, elegance, evil purity *Western Cultures 1/30/2010 @marcykellar
    37. 37. Color Guidelines • A complicated color palette is for advanced designers • Limit to less than Four (4) • Best to use two (2) if you aren‟t a designer • Using different values of the same hue is acceptable • Black/white counts as one color 1/30/2010 @marcykellar
    38. 38. Color Contrast 1/30/2010 @marcykellar
    39. 39. Color Tips • Use a palette of colors found in nature • Perform a readability test before go-live • Test for high contrast • Do not use small fonts when using dark backgrounds • Do not use high contrast color text on dark backgrounds (red on green, purple on green, etc) • Consider accessibility guidelines • Beware of “Wash out” (brown on green or yellow on clear white) 1/30/2010 @marcykellar
    40. 40. Avoid High Contrast Text on Dark Backgrounds 1/30/2010 @marcykellar
    41. 41. Avoid High Contrast Text on Dark Backgrounds Ouch… Make it Stop 1/30/2010 @marcykellar
    42. 42. Color Tools Color Contrast Color Palette Generator Graybit.com Adobe Kuler Colr.org Color Meanings Color Theory for Designers Colour Lovers Color Meanings across cultures Color Meanings Color Wheel Pro: Color Meaning 1/30/2010 @marcykellar
    43. 43. Design Principles The principles of design are guidelines used for putting elements together to create effective communication 1/30/2010 @marcykellar
    44. 44. Design Principles: Now They’ll Believe You! 1/30/2010 @marcykellar
    45. 45. The study of visual opposition. “If two items are not exactly the same, then make them different. Really different.” CONTRAST 1/30/2010 @marcykellar
    46. 46. Contrast 1/30/2010 @marcykellar
    47. 47. Contrast Contrast sometimes is used inappropriately or inadvertently in SharePoint thanks to the rich text editor. 1/30/2010 @marcykellar
    48. 48. Contrast Tips • Use typeface, color, whitespace, texture as contrasting elements • Create a focal point on a page by contrasting elements together • Avoid using attributes that are too similar 1/30/2010 @marcykellar
    49. 49. The use of repetition to create movement occurs when elements which have something in common are repeated regularly or irregularly sometimes creating a visual rhythm REPETITION 1/30/2010 @marcykellar
    50. 50. Repetition • Adds consistency • Unifies all parts of a design • Organizes information • Repetition develops the organization and creates a strong brand 1/30/2010 @marcykellar
    51. 51. Repetition Repeated elements are inherent in SharePoint. Web part headers, navigation elements, etc 1/30/2010 @marcykellar
    52. 52. Repetition Repeated elements are inherent in SharePoint. Web part headers, navigation elements, etc What SharePoint doesn’t do, is provide proper whitespace or contrast with default styles 1/30/2010 @marcykellar
    53. 53. Repetition Tips • Repeat some element of design throughout the piece such as color, shape, texture, bullets • Repeat visual elements throughout your site • Look for existing repetition to strengthen 1/30/2010 @marcykellar
    54. 54. Human beings perceive items that are aligned vertically and/or horizontally to be more organized than those that are not, and people process, learn and remember organized information better than unorganized information. ALIGNMENT 1/30/2010 @marcykellar
    55. 55. Alignment Don't center or justify lines of text Never center headlines over HEADLINE flush left body copy or text that Never center headlines over has an indent. flush left body copy or text that has an indent. 1/30/2010 @marcykellar
    56. 56. Alignment: Example 1/30/2010 @marcykellar
    57. 57. Alignment: Corrected 1/30/2010 @marcykellar
    58. 58. More Examples… 1/30/2010 @marcykellar
    59. 59. More Examples… Can you spot the issues? 1/30/2010 @marcykellar
    60. 60. Alignment Tips • Nothing should be placed on the page arbitrarily. • All page items should have a visual connection • Use a grid • Align elements along "hard vertical edges“ • Don't combine left and right alignment on the same page 1/30/2010 @marcykellar
    61. 61. The principle of proximity allows similar or related elements to be grouped together to form a cohesive whole. Items that aren‟t related should be kept visually separate from those which are. PROXIMITY 1/30/2010 @marcykellar
    62. 62. Proximity Grouping several elements in close proximity they become one unit We change our perception and see these 4 elements as 2 groups 1/30/2010 @marcykellar
    63. 63. Proximity Example: Good 1/30/2010 @marcykellar
    64. 64. Proximity Example: Poor 1/30/2010 @marcykellar
    65. 65. Proximity Example: Poor 1/30/2010 @marcykellar
    66. 66. Proximity Tips • Group related items together • Keep non-related items far apart so that reader isn‟t confused • DON'T use white space to break up items that belong together 1/30/2010 @marcykellar
    67. 67. Design Principles SHAREPOINT EXAMPLES IN ACTION 1/30/2010 @marcykellar
    68. 68. People to People 1/30/2010 @marcykellar
    69. 69. People to People 1/30/2010 @marcykellar
    70. 70. Advanced Distributed Learning 1/30/2010 @marcykellar
    71. 71. Advanced Distributed Learning 1/30/2010 @marcykellar
    72. 72. Fluor 1/30/2010 @marcykellar
    73. 73. Fluor 1/30/2010 @marcykellar
    74. 74. Avista 1/30/2010 @marcykellar
    75. 75. Avista 1/30/2010 @marcykellar
    76. 76. Cadence 1/30/2010 @marcykellar
    77. 77. Cadence 1/30/2010 @marcykellar
    78. 78. MyClubMyLife.com 1/30/2010 @marcykellar
    79. 79. MyClubMyLife.com 1/30/2010 @marcykellar
    80. 80. Resources: Podcasts UXNet Podcast UIE: Brain Sparks Boagworld 1/30/2010 @marcykellar
    81. 81. Resources: Visual Design SmashingMagazine.com WebDesignLedger.com The Pursuit of Interface Design Simplicity -Luke Wroblewski Visible Narratives: Understanding Visual Organization -Luke Wroblewski Common Visual Design Misconceptions – Luke Wroblewski 1/30/2010 @marcykellar
    82. 82. Resources: Usability and UX useit.com Standard Web Components boxesandarrows.com 10 Useful Usability Findings and Guidelines uxmatters.com 20 Do‟s and Don‟ts of Effective uxmag.com Web Design thegridsystem.org Introduction to Good Usability Usability.gov Usability.net Usability Professional‟s Association Universal Usability Guidelines 1/30/2010 @marcykellar
    83. 83. Resources: Books 1/30/2010 @marcykellar
    84. 84. Where To Find Me Resources and epiphanies in 140 characters or less. http://thesharepointmuse.com 1/30/2010 @marcykellar
    85. 85. References The Non Designers Design Book, Robin Williams Universal Usability Guidelines Don‟t Make Me Think, Steve Krug, 2001 Site Seeing: A Visual Approach to Web Usability, Luke Wroblewski, 2002 http://www.lukew.com/ff/entry.asp?981, Luke Wroblewski 1/30/2010 @marcykellar
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×