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

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)


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

http://wendy-neal.com/


AgendaUsability Best Practices

Usability Issues with OOTB SharePoint UI

Top Usability Tips That We’ll Apply

DEMO: Before and After


Usability Best Practices


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


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


Home Page Design• Attract attention• Good balance of images and

text• Keep content succinct and

uncluttered• Place important content

“above the fold”


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


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


Usability Issues with OOTB SharePoint UI


OOTB Default List Views Aren’t Useful

Too many columns

Not sorted, grouped, or filtered

Hard to decipher data


Quick Launch Links Not Intuitive

Uses list/library name as link name

Not using “action words” to describe what you can do by clicking


New Sub Site Default Navigation Inheritance

When creating a new sub site, navigation inheritance defaults to “No”


Page Title Navigation is Confusing

Looks like breadcrumbs?

But… not really bread-crumbs

Can’t fix without changing master page


Too Easy to Create FoldersYou can disable users from creating them in List/Library Settings


Top Usability Tips That We’ll Apply


Usability Tips

Use function-driven navigation when possible (verbs instead of nouns)1


Usability Tips

Avoid too much content on the home/landing pages2


Usability Tips

Only show relevant information to the user3


Usability Tips

Change the default view on lists to a view that is more useful4


Usability Tips

Use descriptive names for content (lists, libraries, documents, & items)5


Usability Tips

Use metadata to organize your data, not folders6


Usability Tips

Hide unnecessary form data from users7


Usability Tips

Identify required fields and other validation on forms8


Usability Tips

Set default values on forms when it makes sense9


Usability Tips

Let users know that their form submission was successful1

0


DEMO: Before and After


Home Page – BeforeGlobal nav missing

Quick Launch not intuitive

Tasks/Issues not personalized & too much data

Use of folders


Home Page – AfterGlobal nav consistent

Quick Launch more descriptive

Showing My Tasks/Issues & less cluttered

No folders! Using metadata instead


New Issue Form

Only showing relevant data

Required fields are marked

Redirect after form submission

BEFORE:

AFTER:


Stay tuned for more great sessions …

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

Technology