Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SharePoint Usability and Design Tips for Non Designers


Published on

Presented at Minnesota SharePoint User Group meeting on August 12, 2015

Published in: Technology
  • Be the first to comment

SharePoint Usability and Design Tips for Non Designers

  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 linkedin/in/wendyneal Contributing Author: • • 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: 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!
  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 you’re 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 – 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
  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
  14. 14. Remember… • Frustration is cumulative (the little things add up) • It doesn’t 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 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
  21. 21. Create a Site Mockup • A mockup is your site’s 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 • On screen ruler that measures pixels • Drag/resize to measure anything on your screen
  24. 24. Canva • Design presentations, social media graphics, flyers, graphics, and tons more • Good selection of free images/assets • Upload your own images
  25. 25. OneNote • It’s great as a screen/ image capture tool
  26. 26. Paint.Net • FREE image and photo editing software • Similar to PhotoShop
  27. 27. Snagit snagit/ • Screen capture • Simple image editing • Add cool effects
  28. 28. SharePoint Color Palette Tool 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
  32. 32. Finding Images for your site Free images and icons here-to-download-public-domain-images/ Stock Images (not always free) Google or Bing image search – Be careful of copyright infringements
  33. 33. Working With Images Download Paint.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 don’t 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 .jpg’s don’t 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!!