Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to create user friendly, engaging share point sites (no coding needed!)

4,404 views

Published on

Slides from the Collab365 Summit presented on May 12, 2016.

Published in: Technology

How to create user friendly, engaging share point sites (no coding needed!)

  1. 1. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS How to create user-friendly, engaging SharePoint sites (no coding needed!)
  2. 2. WWW.COLLAB365.EVENTS Wendy Neal .NET SharePoint Developer for DMI Email : wendy.neal@outlook.com Twitter : @SharePointWendy Facebook : facebook.com/wendynealblog LinkedIn : linkedin.com/in/wendyneal Google+ : plus.google.com/+WendyNeal Website: • http://wendy-neal.com Contributing Author: • CMSWire • ITUnity • SharePoint-Community.net Contact Details: Iowa City, Iowa, USA
  3. 3. WWW.COLLAB365.EVENTS Agenda Usability Best Practices Usability Issues with OOTB SharePoint UI Top Usability Tips That We’ll Apply DEMO: Before and After
  4. 4. WWW.COLLAB365.EVENTS Usability Best Practices
  5. 5. WWW.COLLAB365.EVENTS Rule #1: Don’t Make Me Think According to Steve Krug, websites should be: • Self-evident • Obvious • Self-explanatory • Should not cause users confusion or to think
  6. 6. WWW.COLLAB365.EVENTS Navigation Best Practices • Secondary links relative to where you’re at • Active links highlighted • Page titles match link names • Breadcrumbs YOU ARE HERE • Concise and consistent primary navigation o Identical no matter where you are o Max 9 links
  7. 7. WWW.COLLAB365.EVENTS Home Page Design • Attract attention • Good balance of images and text • Keep content succinct and uncluttered • Place important content “above the fold”
  8. 8. WWW.COLLAB365.EVENTS Design for Different Screen Sizes • Typical minimum screen size is 1024 x 768 o Test your site on different screen resolutions o You want to avoid left/right scrolling at all costs! o The “fold” will be in different places depending on screen resolution
  9. 9. WWW.COLLAB365.EVENTS What Makes Users Frustrated? • Inconsistent navigation • Too many primary nav links • Active links not highlighted • Too many mouse clicks • Can’t find what you’re looking for • Cluttered (balance between text, images, whitespace) • Too many words on page • Left/right scrolling • Performance (site is slow) • Not evident whether form was submitted successfully • It isn’t clear what you’re supposed to do/focus on • Unclear error messages
  10. 10. WWW.COLLAB365.EVENTS Usability Issues with OOTB SharePoint UI
  11. 11. WWW.COLLAB365.EVENTS OOTB Default List Views Aren’t Useful Too many columns Not sorted, grouped, or filtered Hard to decipher data
  12. 12. WWW.COLLAB365.EVENTS Quick Launch Links Not Intuitive Uses list/library name as link name Not using “action words” to describe what you can do by clicking
  13. 13. WWW.COLLAB365.EVENTS New Sub Site Default Navigation Inheritance When creating a new sub site, navigation inheritance defaults to “No”
  14. 14. WWW.COLLAB365.EVENTS Page Title Navigation is Confusing Looks like breadcrumbs? But… not really bread- crumbs Can’t fix without changing master page
  15. 15. WWW.COLLAB365.EVENTS Too Easy to Create Folders You can disable users from creating them in List/Library Settings
  16. 16. WWW.COLLAB365.EVENTS Top Usability Tips That We’ll Apply
  17. 17. WWW.COLLAB365.EVENTS Usability Tips Use function-driven navigation when possible (verbs instead of nouns)
  18. 18. WWW.COLLAB365.EVENTS Usability Tips Avoid too much content on the home/landing pages
  19. 19. WWW.COLLAB365.EVENTS Usability Tips Only show relevant information to the user
  20. 20. WWW.COLLAB365.EVENTS Usability Tips Change the default view on lists to a view that is more useful
  21. 21. WWW.COLLAB365.EVENTS Usability Tips Use descriptive names for content (lists, libraries, documents, & items)
  22. 22. WWW.COLLAB365.EVENTS Usability Tips Use metadata to organize your data, not folders
  23. 23. WWW.COLLAB365.EVENTS Usability Tips Hide unnecessary form data from users
  24. 24. WWW.COLLAB365.EVENTS Usability Tips Identify required fields and other validation on forms
  25. 25. WWW.COLLAB365.EVENTS Usability Tips Set default values on forms when it makes sense
  26. 26. WWW.COLLAB365.EVENTS Usability Tips Let users know that their form submission was successful
  27. 27. WWW.COLLAB365.EVENTS DEMO: Before and After
  28. 28. WWW.COLLAB365.EVENTS Home Page – Before Global nav missing Quick Launch not intuitive Tasks/Issues not personalized & too much data Use of folders
  29. 29. WWW.COLLAB365.EVENTS Home Page – After Global nav consistent Quick Launch more descriptive Showing My Tasks/Issues & less cluttered No folders! Using metadata instead
  30. 30. WWW.COLLAB365.EVENTS New Issue Form Only showing relevant data Required fields are marked Redirect after form submission BEFORE: AFTER:
  31. 31. WWW.COLLAB365.EVENTS Stay tuned for more great sessions …

×