Your SlideShare is downloading. ×
Designing Intuitive SharePoint Sites
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Intuitive SharePoint Sites


Published on

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

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

Published in: Design, Technology

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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
  • Transcript

    • 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. 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. Topics To Cover • Intuitive Sites • Usability Best Practices • Color • Visual Design Principles • Q&A 1/30/2010 @marcykellar
    • 4. Intuitive Products Change My Life 1/30/2010 @marcykellar
    • 5. Help Me Find My Keys 1/30/2010 @marcykellar
    • 6. Intuitive = Readily learned or understood 1/30/2010 @marcykellar
    • 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. 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. Users spend most of their time on other sites Jakob's Law of the Web User Experience 1/30/2010 @marcykellar
    • 10. What Users Expect: Conventions Found at Universal Usability Guidelines 1/30/2010 @marcykellar
    • 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. 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. 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. "Know thy user, and you are not thy user." ~ Arnie Lund 1/30/2010 @marcykellar
    • 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. 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. What You Design For… Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability 1/30/2010 @marcykellar
    • 18. The Reality… Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability 1/30/2010 @marcykellar
    • 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.” 1/30/2010 @marcykellar
    • 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. VISUAL DESIGN 1/30/2010 @marcykellar
    • 22. “We find that people quickly evaluate a site by visual design alone.” ~ Stanford Guidelines for Web Credibility, 1/30/2010 @marcykellar
    • 23. Visual Design Isn't About Making Things “Pretty” 1/30/2010 @marcykellar
    • 24. Visual Design Communicates 1/30/2010 @marcykellar
    • 25. Purpose 1/30/2010 @marcykellar
    • 26. Mood/Emotion 1/30/2010 @marcykellar
    • 27. Brand Message 1/30/2010 @marcykellar
    • 28. Action/State 1/30/2010 @marcykellar
    • 29. Orientation 1/30/2010 @marcykellar
    • 30. Visual Design Has Purpose 1/30/2010 @marcykellar
    • 31. Organizes Information 1/30/2010 @marcykellar
    • 32. Conveys Relationships 1/30/2010 @marcykellar
    • 33. 1. Clear Visual Hierarchy 2. Unclear Visual Hierarchy Provides Visual Hierarchy 1/30/2010 @marcykellar
    • 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. COLOR 1/30/2010 @marcykellar
    • 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. 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. Color Contrast 1/30/2010 @marcykellar
    • 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. Avoid High Contrast Text on Dark Backgrounds 1/30/2010 @marcykellar
    • 41. Avoid High Contrast Text on Dark Backgrounds Ouch… Make it Stop 1/30/2010 @marcykellar
    • 42. Color Tools Color Contrast Color Palette Generator Adobe Kuler Color Meanings Color Theory for Designers Colour Lovers Color Meanings across cultures Color Meanings Color Wheel Pro: Color Meaning 1/30/2010 @marcykellar
    • 43. Design Principles The principles of design are guidelines used for putting elements together to create effective communication 1/30/2010 @marcykellar
    • 44. Design Principles: Now They’ll Believe You! 1/30/2010 @marcykellar
    • 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. Contrast 1/30/2010 @marcykellar
    • 47. Contrast Contrast sometimes is used inappropriately or inadvertently in SharePoint thanks to the rich text editor. 1/30/2010 @marcykellar
    • 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. 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. 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. Repetition Repeated elements are inherent in SharePoint. Web part headers, navigation elements, etc 1/30/2010 @marcykellar
    • 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. 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. 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. 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. Alignment: Example 1/30/2010 @marcykellar
    • 57. Alignment: Corrected 1/30/2010 @marcykellar
    • 58. More Examples… 1/30/2010 @marcykellar
    • 59. More Examples… Can you spot the issues? 1/30/2010 @marcykellar
    • 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. 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. 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. Proximity Example: Good 1/30/2010 @marcykellar
    • 64. Proximity Example: Poor 1/30/2010 @marcykellar
    • 65. Proximity Example: Poor 1/30/2010 @marcykellar
    • 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. Design Principles SHAREPOINT EXAMPLES IN ACTION 1/30/2010 @marcykellar
    • 68. People to People 1/30/2010 @marcykellar
    • 69. People to People 1/30/2010 @marcykellar
    • 70. Advanced Distributed Learning 1/30/2010 @marcykellar
    • 71. Advanced Distributed Learning 1/30/2010 @marcykellar
    • 72. Fluor 1/30/2010 @marcykellar
    • 73. Fluor 1/30/2010 @marcykellar
    • 74. Avista 1/30/2010 @marcykellar
    • 75. Avista 1/30/2010 @marcykellar
    • 76. Cadence 1/30/2010 @marcykellar
    • 77. Cadence 1/30/2010 @marcykellar
    • 78. 1/30/2010 @marcykellar
    • 79. 1/30/2010 @marcykellar
    • 80. Resources: Podcasts UXNet Podcast UIE: Brain Sparks Boagworld 1/30/2010 @marcykellar
    • 81. Resources: Visual Design 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. Resources: Usability and UX Standard Web Components 10 Useful Usability Findings and Guidelines 20 Do‟s and Don‟ts of Effective Web Design Introduction to Good Usability Usability Professional‟s Association Universal Usability Guidelines 1/30/2010 @marcykellar
    • 83. Resources: Books 1/30/2010 @marcykellar
    • 84. Where To Find Me Resources and epiphanies in 140 characters or less. 1/30/2010 @marcykellar
    • 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, Luke Wroblewski 1/30/2010 @marcykellar