Post on 05-Dec-2014
description
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
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?