Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Designing Intuitive SharePoint Sites

62.257 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design, Technologie
  • HOW TO UNLOCK HER LEGS! (SNEAK PEAK), learn more... ■■■ http://t.cn/AiurDrZp
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ●●● https://tinyurl.com/rockhardxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Designing Intuitive SharePoint Sites

  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.” Usabilityfirst.com 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 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. 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. MyClubMyLife.com 1/30/2010 @marcykellar
  79. MyClubMyLife.com 1/30/2010 @marcykellar
  80. Resources: Podcasts UXNet Podcast UIE: Brain Sparks Boagworld 1/30/2010 @marcykellar
  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. 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. Resources: Books 1/30/2010 @marcykellar
  84. Where To Find Me Resources and epiphanies in 140 characters or less. http://thesharepointmuse.com 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 http://www.lukew.com/ff/entry.asp?981, Luke Wroblewski 1/30/2010 @marcykellar

×