How to create user friendly, engaging share point sites (no coding needed!)
Download as PPTX, PDF7 likes5,668 views
This document summarizes an online conference about improving the usability of SharePoint sites without coding. The conference covers usability best practices including intuitive navigation, clean home page design, and responsiveness across devices. It discusses common usability issues with out-of-the-box SharePoint and provides tips like using function-driven navigation and metadata instead of folders. A demo shows before and after examples of a home page and form with improved usability.
How to create user friendly, engaging share point sites (no coding needed!)
- 1. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS How to create user-friendly, engaging SharePoint sites (no coding needed!)
- 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. WWW.COLLAB365.EVENTS Agenda Usability Best Practices Usability Issues with OOTB SharePoint UI Top Usability Tips That We’ll Apply DEMO: Before and After
- 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. 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. 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. 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. 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. WWW.COLLAB365.EVENTS Usability Issues with OOTB SharePoint UI
- 11. WWW.COLLAB365.EVENTS OOTB Default List Views Aren’t Useful Too many columns Not sorted, grouped, or filtered Hard to decipher data
- 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. WWW.COLLAB365.EVENTS New Sub Site Default Navigation Inheritance When creating a new sub site, navigation inheritance defaults to “No”
- 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. WWW.COLLAB365.EVENTS Too Easy to Create Folders You can disable users from creating them in List/Library Settings
- 16. WWW.COLLAB365.EVENTS Top Usability Tips That We’ll Apply
- 17. WWW.COLLAB365.EVENTS Usability Tips Use function-driven navigation when possible (verbs instead of nouns)
- 18. WWW.COLLAB365.EVENTS Usability Tips Avoid too much content on the home/landing pages
- 19. WWW.COLLAB365.EVENTS Usability Tips Only show relevant information to the user
- 20. WWW.COLLAB365.EVENTS Usability Tips Change the default view on lists to a view that is more useful
- 21. WWW.COLLAB365.EVENTS Usability Tips Use descriptive names for content (lists, libraries, documents, & items)
- 22. WWW.COLLAB365.EVENTS Usability Tips Use metadata to organize your data, not folders
- 23. WWW.COLLAB365.EVENTS Usability Tips Hide unnecessary form data from users
- 24. WWW.COLLAB365.EVENTS Usability Tips Identify required fields and other validation on forms
- 25. WWW.COLLAB365.EVENTS Usability Tips Set default values on forms when it makes sense
- 26. WWW.COLLAB365.EVENTS Usability Tips Let users know that their form submission was successful
- 27. WWW.COLLAB365.EVENTS DEMO: Before and After
- 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. 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. WWW.COLLAB365.EVENTS New Issue Form Only showing relevant data Required fields are marked Redirect after form submission BEFORE: AFTER:
- 31. WWW.COLLAB365.EVENTS Stay tuned for more great sessions …