sharepoint usability and design tips for non designers

Download SharePoint Usability and Design Tips for Non Designers

Post on 19-Aug-2015

135 views

Category:

Technology

0 download

Embed Size (px)

TRANSCRIPT

  1. 1. SharePoint Usability and Design Tips for Non Designers Presented By: Wendy Neal August 12, 2015 Minnesota SharePoint User Group
  2. 2. Wendy Neal Senior SharePoint Consultant, McGladrey @SharePointWendy facebook.com/wendynealblog linkedin/in/wendyneal wendy.neal@outlook.com wendy-neal.com Contributing Author: CMSWire.com ITUnity
  3. 3. Agenda Website Usability 101 Planning Your SharePoint Site My Favorite Design Tools Design Tips for Non Designers
  4. 4. Website Usability 101 The main thing is that everything become simple, easy enough for a child to understand. - Albert Camus
  5. 5. Rule #1: Dont 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!
  6. 6. Types of Navigation Navigation by browsing Primary navigation Secondary navigation Utilities links Navigation by Searching
  7. 7. SharePoint 2013 Navigation Areas SearchGlobal Navigation Quick Launch Utilities Menu Page Title
  8. 8. Navigation Best Practices Concise and consistent primary navigation Identical no matter where you are Max 9 links Secondary links relative to where youre at Active links highlighted Page titles match link names Breadcrumbs
  9. 9. 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
  10. 10. Home Page Design (cont.) Omit needless words Dont write a book; people wont 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 whats left. Steve Krug
  11. 11. 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
  12. 12. 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
  13. 13. Example Site http://www.logomaker.com/
  14. 14. Remember Frustration is cumulative (the little things add up) It doesnt take much to frustrate a user
  15. 15. Planning Your Sharepoint Site Failing to plan is planning to fail Benjamin Franklin
  16. 16. Who Is Your Audience? Yourself? Your team? Your department? Entire company? Partners? Customers?
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Sub Sites vs. Pages How they affect navigation Use sub sites when: You need several supporting lists and libraries You have separate permissions needs You dont 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/
  21. 21. Create a Site Mockup A mockup is your sites blueprint Paper sketch is fine Mockup tools: Balsamiq Visio Excel
  22. 22. My Favorite Design Tools Any darn fool can make something complex; it takes a genius to make something simple - Albert Einstein
  23. 23. PixelWindow http://pixelwindow.en.softonic.com/ On screen ruler that measures pixels Drag/resize to measure anything on your screen
  24. 24. 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
  25. 25. OneNote Its great as a screen/ image capture tool
  26. 26. Paint.Net http://www.getpaint.net FREE image and photo editing software Similar to PhotoShop
  27. 27. Snagit https://www.techsmith.com/download/ snagit/ Screen capture Simple image editing Add cool effects
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. Example Color Scheme Tool http://paletton.com
  32. 32. Finding Images for your site Free images and icons http://www.freedigitalphotos.net http://www.freeiconsweb.com http://www.flickr.com http://www.everystockphoto.com http://www.digitaltrends.com/photography/w here-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
  33. 33. Working With Images Download Paint.Net http://www.getpaint.net
  34. 34. Cropping Images Draws attention to details
  35. 35. Resizing Large Images Large images take longer to download Be sure to Maintain aspect ratio so you dont distort the image
  36. 36. Determining Image Colors Find hex code or RGB of image
  37. 37. Recoloring Images To match your site colors
  38. 38. Applying Transparent Backgrounds Remember to save as a .gif or .png because .jpgs dont support transparency Before After
  39. 39. Change the Site Theme
  40. 40. Default SharePoint Site
  41. 41. Customized SharePoint Site
  42. 42. DEMO
  43. 43. THANK YOU!!