sharepoint usability and design tips for non designers
TRANSCRIPT
SharePoint Usability and Design Tips for
Non Designers
Presented By: Wendy NealAugust 12, 2015
Minnesota SharePoint User Group
Wendy Neal
Senior SharePoint Consultant, McGladrey
@SharePointWendy
facebook.com/wendynealblog
linkedin/in/wendyneal
wendy-neal.com
Contributing Author:• CMSWire.com• ITUnity
Agenda
Website Usability 101
Planning Your SharePoint Site
My Favorite Design Tools
Design Tips for Non Designers
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
According to Steve Krug, 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
SharePoint 2013 Navigation Areas
SearchGlobal Navigation
Quick Launch
Utilities Menu
Page Title
Navigation Best Practices
• Concise and consistent primary navigation• Identical no matter where you
are• Max 9 links
• Secondary links relative to where you’re at• Active links highlighted• Page titles match link
names• Breadcrumbs
Home Page Design
• Attract attention•Good balance of images and text• Answer these questions:
1. What is this2. 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…
Remember…
• Frustration is cumulative (the little things add up)• It doesn’t take much to frustrate a user
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?Customers?
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
• Logs and backup files
• Transactional applications or files that require locks
• Server side scripts
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
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
Sub Sites vs. PagesHow 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
Sub Sites:
• Hierarchical global navigation automatically cascades down
Pages:
• Global navigation hierarchy must be manually created
http://wendy-neal.com/2014/12/creating-pages-vs-sub-sites-sharepoint/
Create a Site Mockup
• A mockup is your site’s blueprint
• Paper sketch is fine• Mockup tools:– Balsamiq– Visio– Excel
My Favorite Design Tools
“Any darn fool can make something complex; it takes a genius to make something simple” - Albert Einstein
PixelWindow
http://pixelwindow.en.softonic.com/
• On screen ruler that measures pixels
• Drag/resize to measure anything on your screen
Canva
https://www.canva.com
• Design presentations, social media graphics, flyers, graphics, and tons more
• Good selection of free images/assets
• Upload your own images
OneNote
• It’s great as a screen/ image capture tool
Paint.Net
http://www.getpaint.net
• FREE image and photo editing software
• Similar to PhotoShop
Snagit
https://www.techsmith.com/download/snagit/
• Screen capture• Simple image
editing• Add cool effects
SharePoint Color Palette Tool
http://www.microsoft.com/en-us/download/details.aspx?id=38182
• Create custom color palette (theme) files
• Works for SP2013 on premises and Office 365
Design Tips for Non Designers
“Design is easy. All you do is stare at the screen until drops of blood form on your forehead” - Albert Camus
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 Toolhttp://paletton.com
Finding Images for your site
Free images and iconshttp://www.freedigitalphotos.net
http://www.freeiconsweb.com
http://www.flickr.com
http://www.everystockphoto.com
http://www.digitaltrends.com/photography/where-to-download-public-domain-images/
Stock Images (not always free)http://www.graphicstock.com
http://www.depositphotos.com
http://www.fotolia.com
http://shutterstock.com
http://www.vectorstock.com
http://www.istockphoto.com
Google or Bing image search– Be careful of copyright infringements
Cropping Images
Draws attention to details
Resizing Large ImagesLarge images take longer to download
Be sure to “Maintain aspect ratio” so you don’t distort the image
Determining Image Colors
Find hex code or RGB of image
Recoloring Images
To match your site colors
Applying Transparent Backgrounds
Remember to save as a .gif or .png because .jpg’s don’t support transparency
Before After
Change the Site Theme
Default SharePoint Site
Customized SharePoint Site
DEMO
THANK YOU!!