SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy
-
Upload
wendy-neal -
Category
Technology
-
view
28.500 -
download
1
description
Transcript of SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy
![Page 1: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/1.jpg)
SHAREPOINT SITE USABILITY AND DESIGN TIPS FOR NON
DESIGNERS
Wendy NealSharePoint Saturday Twin Cities
November 3, 2012
![Page 2: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/2.jpg)
WENDY NEAL
SharePoint Architect/Developer for GreatAmerica Financial Services
Blog: www.sharepointwendy.com
E-mail: [email protected]
Twitter: @SharePointWendy
Contributing Author for NothingButSharePoint.com and NothingButBranding.com
Passionate about all things SharePoint: Branding, evangelism, governance, training, user adoption, user empowerment
![Page 3: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/3.jpg)
• Website Usability 1011• Planning your SharePoint
Site2• Design Tips for Non
Designers3
• User Adoption Tips4• Case Study with Demos
Throughout5
TODAY’S OVERVIEW
![Page 4: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/4.jpg)
WEBSITE USABILITY 101
“The main thing is that everything become simple, easy enough for a child to understand.” - Albert Camus
![Page 5: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/5.jpg)
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!
![Page 6: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/6.jpg)
TYPES OF NAVIGATION
• Navigation by browsing– Primary navigation– Secondary navigation– Utilities links
• Navigation by Searching
![Page 7: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/7.jpg)
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
![Page 8: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/8.jpg)
SHAREPOINT NAVIGATION AREAS
SearchGlobal Navigation
Quick Launch
Utilities
Page Title
Breadcrumbs
![Page 9: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/9.jpg)
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”
![Page 10: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/10.jpg)
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
![Page 11: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/11.jpg)
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
![Page 12: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/12.jpg)
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
![Page 13: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/13.jpg)
SHAREPOINT 2010 USABILITY REPORT CARD
Element A B C D F
Primary navigation
Secondary navigation
Breadcrumbs
Page titles
Search
Screen size compatibility
![Page 15: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/15.jpg)
REMEMBER…• Anything that confuses or frustrates users, or
makes them think too hard, will not reflect well on you or your site
![Page 16: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/16.jpg)
PLANNING YOUR SHAREPOINT SITE
"Failing to plan is planning to fail" - Benjamin Franklin
![Page 17: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/17.jpg)
WHO IS YOUR AUDIENCE?
Yourself?Your team?Your department?Entire company?Partners?
![Page 18: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/18.jpg)
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
![Page 19: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/19.jpg)
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
![Page 20: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/20.jpg)
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
![Page 21: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/21.jpg)
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
![Page 22: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/22.jpg)
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
![Page 23: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/23.jpg)
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
![Page 24: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/24.jpg)
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
![Page 25: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/25.jpg)
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
![Page 26: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/26.jpg)
CREATE A SITE MOCKUP
• A mockup is your site’s blueprint
• Paper sketch is fine• Mockup tools:
– Balsamiq– Visio– Excel
![Page 27: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/27.jpg)
Case Study - Mockup
![Page 28: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/28.jpg)
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
![Page 29: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/29.jpg)
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
![Page 30: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/30.jpg)
EXAMPLE COLOR SCHEME TOOL• http://colorschemedesigner.com/
![Page 31: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/31.jpg)
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
![Page 32: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/32.jpg)
WORKING WITH IMAGES• Download Paint.Net http://www.getpaint.net
– FREE image and photo editing software– Similar to PhotoShop
![Page 33: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/33.jpg)
CROPPING IMAGES• Draws attention to details
![Page 34: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/34.jpg)
RESIZING LARGE IMAGES• Large images take longer
to download
• Be sure to “Maintain aspect ratio” so you don’t distort the image
![Page 35: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/35.jpg)
DETERMINING IMAGE COLORS• Find hex code of image
![Page 36: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/36.jpg)
RECOLORING IMAGES• To match your site colors
![Page 37: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/37.jpg)
APPLYING TRANSPARENT BACKGROUNDS
• Remember to save as a .gif or .png!
Before After
![Page 38: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/38.jpg)
PAINT.NET IMAGE EDITING DEMO
http://www.youtube.com/watch?v=QBWIOgazSWE
![Page 39: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/39.jpg)
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!
![Page 40: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/40.jpg)
CHANGE SITE AND HOME PAGE IMAGES
http://www.youtube.com/watch?v=rIc4p-15Yq0
![Page 41: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/41.jpg)
CHANGE SITE THEME COLORS
http://www.youtube.com/watch?v=DtCYqF6vlXU
![Page 42: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/42.jpg)
DEFAULT SHAREPOINT TEAM SITE
![Page 43: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/43.jpg)
CUSTOMIZED SHAREPOINT TEAM SITE
![Page 44: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/44.jpg)
USER ADOPTION TIPS
“If you make it easier to use than not to use, it will get used.” – Kerri Abraham
![Page 45: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/45.jpg)
IF YOU BUILD IT…
• You’ve built a great site, but now what?
![Page 46: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/46.jpg)
FREQUENT UPDATES TO CONTENT
• Announcements• Did You Know?• What’s New?• Quote of the
Week• Team Member
Spotlight
![Page 47: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/47.jpg)
PROMOTE YOUR SITE
• Lunch and learns• Contests• Set up user alerts• Bulletin boards• Company newsletter
![Page 48: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/48.jpg)
GIVE THEM INSTRUCTIONS• Never leave them wondering “What do I do
now?” – excerpt from article by Kerri Abraham
![Page 49: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/49.jpg)
ADOPTION COMES BACK TO USABILITY, PLANNING, AND DESIGN
Ensure that your site is:
Easy to usePlanned properlyWell-designed
![Page 50: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/50.jpg)
• Website Usability 1011• Planning your SharePoint
Site2• Design Tips for Non
Designers3
• User Adoption Tips4• Case Study with Demos
Throughout5
REVIEW
![Page 51: SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy](https://reader033.fdocuments.in/reader033/viewer/2022061207/5483fb6eb07959240c8b4a6e/html5/thumbnails/51.jpg)
QUESTIONS?