![Page 1: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/1.jpg)
Online Conference
June 17th and 18th 2015
WWW.COLLAB365.EVENTS
How to create user-friendly, engaging SharePoint sites (no coding needed!)
Wendy NealDigital Management Inc. (DMI)
![Page 2: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/2.jpg)
WWW.COLLAB365.EVENTS
Wendy Neal.NET SharePoint Developer for DMI
Email : [email protected] Twitter : @SharePointWendyFacebook : facebook.com/wendynealblogLinkedIn : linkedin.com/in/wendynealGoogle+ : plus.google.com/+WendyNeal
Website:• http://wendy-neal.comContributing Author:• CMSWire• ITUnity• SharePoint-Community.net
Contact Details:
Iowa City, Iowa, USA
![Page 3: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/3.jpg)
WWW.COLLAB365.EVENTS
AgendaUsability Best Practices
Usability Issues with OOTB SharePoint UI
Top Usability Tips That We’ll Apply
DEMO: Before and After
![Page 4: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/4.jpg)
WWW.COLLAB365.EVENTS
Usability Best Practices
![Page 5: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/5.jpg)
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
![Page 6: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/6.jpg)
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 navigationo Identical no matter where you areo Max 9 links
![Page 7: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/7.jpg)
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”
![Page 8: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/8.jpg)
WWW.COLLAB365.EVENTS
Design for Different Screen Sizes• Typical minimum screen
size is 1024 x 768o Test your site on different
screen resolutionso You want to avoid left/right
scrolling at all costs!o The “fold” will be in
different places depending on screen resolution
![Page 9: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/9.jpg)
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
![Page 10: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/10.jpg)
WWW.COLLAB365.EVENTS
Usability Issues with OOTB SharePoint UI
![Page 11: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/11.jpg)
WWW.COLLAB365.EVENTS
OOTB Default List Views Aren’t Useful
Too many columns
Not sorted, grouped, or filtered
Hard to decipher data
![Page 12: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/12.jpg)
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
![Page 13: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/13.jpg)
WWW.COLLAB365.EVENTS
New Sub Site Default Navigation Inheritance
When creating a new sub site, navigation inheritance defaults to “No”
![Page 14: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/14.jpg)
WWW.COLLAB365.EVENTS
Page Title Navigation is Confusing
Looks like breadcrumbs?
But… not really bread-crumbs
Can’t fix without changing master page
![Page 15: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/15.jpg)
WWW.COLLAB365.EVENTS
Too Easy to Create FoldersYou can disable users from creating them in List/Library Settings
![Page 16: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/16.jpg)
WWW.COLLAB365.EVENTS
Top Usability Tips That We’ll Apply
![Page 17: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/17.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Use function-driven navigation when possible (verbs instead of nouns)1
![Page 18: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/18.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Avoid too much content on the home/landing pages2
![Page 19: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/19.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Only show relevant information to the user3
![Page 20: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/20.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Change the default view on lists to a view that is more useful4
![Page 21: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/21.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Use descriptive names for content (lists, libraries, documents, & items)5
![Page 22: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/22.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Use metadata to organize your data, not folders6
![Page 23: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/23.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Hide unnecessary form data from users7
![Page 24: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/24.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Identify required fields and other validation on forms8
![Page 25: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/25.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Set default values on forms when it makes sense9
![Page 26: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/26.jpg)
WWW.COLLAB365.EVENTS
Usability Tips
Let users know that their form submission was successful1
0
![Page 27: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/27.jpg)
WWW.COLLAB365.EVENTS
DEMO: Before and After
![Page 28: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/28.jpg)
WWW.COLLAB365.EVENTS
Home Page – BeforeGlobal nav missing
Quick Launch not intuitive
Tasks/Issues not personalized & too much data
Use of folders
![Page 29: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/29.jpg)
WWW.COLLAB365.EVENTS
Home Page – AfterGlobal nav consistent
Quick Launch more descriptive
Showing My Tasks/Issues & less cluttered
No folders! Using metadata instead
![Page 30: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/30.jpg)
WWW.COLLAB365.EVENTS
New Issue Form
Only showing relevant data
Required fields are marked
Redirect after form submission
BEFORE:
AFTER:
![Page 31: How to create user friendly, engaging share point sites (no coding needed!)](https://reader035.vdocument.in/reader035/viewer/2022062823/5870f9bd1a28ab5f528b55dd/html5/thumbnails/31.jpg)
WWW.COLLAB365.EVENTS
Stay tuned for more great sessions …