SHAREPOINT SITE USABILITY AND DESIGN TIPS FOR NON

DESIGNERS

Wendy NealSharePoint Saturday Twin Cities

November 3, 2012

WENDY NEAL

SharePoint Architect/Developer for GreatAmerica Financial Services

Blog: www.sharepointwendy.com

E-mail: wendy.neal@outlook.com

Twitter: @SharePointWendy

Contributing Author for NothingButSharePoint.com and NothingButBranding.com

Passionate about all things SharePoint: Branding, evangelism, governance, training, user adoption, user empowerment

• Website Usability 1011• Planning your SharePoint

Site2• Design Tips for Non

Designers3

• User Adoption Tips4• Case Study with Demos

Throughout5

TODAY’S OVERVIEW

WEBSITE USABILITY 101

“The main thing is that everything become simple, easy enough for a child to understand.” - Albert Camus

RULE #1: DON’T MAKE ME THINK

Websites should be:• Self-evident • Obvious• Self-explanatory

If you remember nothing else about usability, remember this rule!

TYPES OF NAVIGATION

• Navigation by browsing– Primary navigation– Secondary navigation– Utilities links

• Navigation by Searching

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– Identical no matter where you are– Max 9 links

SHAREPOINT NAVIGATION AREAS

SearchGlobal Navigation

Quick Launch

Utilities

Page Title

Breadcrumbs

HOME PAGE DESIGN

• Attract attention• Good balance of images

and text• Answer these questions:

1. What is this?2. What can I do here?3. Why should I be here?

• Place important content “above the fold”

HOME PAGE DESIGN (CONT.)

• Omit needless words– Don’t write a book;

people won’t read it anyway

– Provide short blurbs and links instead to wordy content

• Keep content succinct and uncluttered

“Get rid of half the words on each page, then get rid of half of what’s left.” – Steve Krug

DESIGN FOR DIFFERENT SCREEN SIZES

• Typical minimum screen size is 1024 x 768– Test your site on different

screen resolutions– You want to avoid left/right

scrolling at all costs!– The “fold” will be in

different places depending on screen resolution

HYPERLINK ETIQUETTE

Are you linking to… New Window

Same Window

A site other than yours?

Someplace within your site?

• To open in a new window or not, that is the question

SHAREPOINT 2010 USABILITY REPORT CARD

Element A B C D F

Primary navigation

Secondary navigation

Breadcrumbs

Page titles

Search

Screen size compatibility

EXAMPLE SITE http://www.logomaker.com/

REMEMBER…• Anything that confuses or frustrates users, or

makes them think too hard, will not reflect well on you or your site

PLANNING YOUR SHAREPOINT SITE

"Failing to plan is planning to fail" - Benjamin Franklin

WHO IS YOUR AUDIENCE?

Yourself?Your team?Your department?Entire company?Partners?

WHAT CONTENT SHOULD YOU PUT (AND NOT PUT) ON YOUR SITE?What to put in SharePoint• Documents where versioning is

required• Collaborative documents

• Electronic forms

• List items such as calendars, links lists, discussion boards, etc.

• Blogs and wikis

• Picture libraries

What NOT to put in SharePoint• Blocked file types

(.exe, .bat, .dll, .msi, .com, & others)• Very large files

• Large media files

• Log and backup files

• Transactional applications or files which require locks

• Server side scripts

Case Study - Background

• Human Resources site for medium-sized company• Audience is entire company; also want private area• Content to display:

– Self-service forms– HR Policies– Holiday and events calendar– Benefits information– Job postings– Online training

• Assumptions:– We are using the “Team Site” SharePoint template– There will be no custom branding done

DETERMINE THE SCOPE

• Define your criteria of success

• What will you include and not include?– Quick wins– Remember the 80/20

rule• Use an iterative

approach

Case Study - Scope

• Use all out of the box functionality; no customizations– HR Policies– Holiday and events calendar– Benefits information

• Self-service forms– Forms will email HR staff to update in the current system

• Job postings and online training will be links to current systems– Perhaps phase 2 initiative to move into SharePoint

• Criteria of success– HR will manage their own documents, forms, and site content– Company will have central place to find HR-related information– HR has private workspace where they can collaborate

PLAN YOUR PERMISSIONS

• Determine permissions levels needed

• Keep permissions as simple as possible

• Utilize SharePoint and/or Active Directory groups– Try not to put individuals

directly in the site/library/list level

Case Study - Permissions

• Team Site Owners– Full control (create sub sites, manage features & permissions)– 1 or 2 HR members

• Team Site Members– Contribute content (add/edit/delete documents & list items)– Entire HR team (AD group)

• Team Site Visitors– Read-only access– Company

SUB SITES VS. PAGES

Sub sites:

• Hierarchical global navigation automatically cascades down

Pages:

• Global navigation hierarchy must be manually created

How they affect navigation

• Use sub sites when:– You need several supporting lists and libraries– You have separate permissions needs– You don’t want to manually create/manage top

navigation links

Case Study - Solutions

Requirement Solution

Self-service forms • Sub site• OOB list utilizing content types and alerts

HR Policies • Document library with versioning and check in/check out

Holiday and events calendar

• Out of the box calendar

Benefits information • Document library for documents• Contact lists for benefit contact

information

Job postings • Link to existing system

Online training • Link to existing system

CREATE A SITE MOCKUP

• A mockup is your site’s blueprint

• Paper sketch is fine• Mockup tools:

– Balsamiq– Visio– Excel

Case Study - Mockup

DESIGN TIPS FOR NON DESIGNERS

"Design is easy. All you do is stare at the screen until drops of blood form on your forehead" - Marty Neumier

FINDING INSPIRATION

• Browse other sites you like for ideas

• Start with a photo or image– Choose color scheme

based on that• Use an online color

scheme tool

EXAMPLE COLOR SCHEME TOOL• http://colorschemedesigner.com/

FINDING IMAGES FOR YOUR SITE• Free images and icons

– http://office.microsoft.com/en-us/images/ – http://www.freeiconsweb.com/ – http://www.smashingmagazine.com/2008/03/06/35-rea

lly-incredible-free-icon-sets/

– http://www.instantshift.com/2009/08/19/75-free-useful-icon-sets-for-web-designers-and-developers/

• Stock images (not free)– http://www.vectorstock.com $1 per image!

– http://www.istockphoto.com • Google or Bing image search

– Be careful of copyright infringements

WORKING WITH IMAGES• Download Paint.Net http://www.getpaint.net

– FREE image and photo editing software– Similar to PhotoShop

CROPPING IMAGES• Draws attention to details

RESIZING LARGE IMAGES• Large images take longer

to download

• Be sure to “Maintain aspect ratio” so you don’t distort the image

DETERMINING IMAGE COLORS• Find hex code of image

RECOLORING IMAGES• To match your site colors

APPLYING TRANSPARENT BACKGROUNDS

• Remember to save as a .gif or .png!

Before After

PAINT.NET IMAGE EDITING DEMO

http://www.youtube.com/watch?v=QBWIOgazSWE

Case Study – Build It!

• Create site structure• Set permissions• Add content• Change site image and theme• Add home page web parts• Change quick launch (left nav) links

DON’T FORGET!• Remove the “Getting

Started” links• Test the solution!

CHANGE SITE AND HOME PAGE IMAGES

http://www.youtube.com/watch?v=rIc4p-15Yq0

CHANGE SITE THEME COLORS

http://www.youtube.com/watch?v=DtCYqF6vlXU

DEFAULT SHAREPOINT TEAM SITE

CUSTOMIZED SHAREPOINT TEAM SITE

USER ADOPTION TIPS

“If you make it easier to use than not to use, it will get used.” – Kerri Abraham

IF YOU BUILD IT…

• You’ve built a great site, but now what?

FREQUENT UPDATES TO CONTENT

• Announcements• Did You Know?• What’s New?• Quote of the

Week• Team Member

Spotlight

PROMOTE YOUR SITE

• Lunch and learns• Contests• Set up user alerts• Bulletin boards• Company newsletter

GIVE THEM INSTRUCTIONS• Never leave them wondering “What do I do

now?” – excerpt from article by Kerri Abraham

ADOPTION COMES BACK TO USABILITY, PLANNING, AND DESIGN

Ensure that your site is:

Easy to usePlanned properlyWell-designed

• Website Usability 1011• Planning your SharePoint

Site2• Design Tips for Non

Designers3

• User Adoption Tips4• Case Study with Demos

Throughout5

REVIEW

QUESTIONS?