SharePoint Usability and Design Tips for Non Designers
•Transferir como PPTX, PDF•
2 gostaram•2,374 visualizações
This document summarizes a presentation about SharePoint usability and design tips for non-designers. The presentation covers website usability best practices, planning a SharePoint site, and design tools for non-designers. The agenda includes discussing navigation, home page design, screen sizes, hyperlinks, planning sites, permissions, and inspiration sources. Recommendations are given for making sites self-evident and concise through simplified navigation, balanced content, and use of images.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (10)
Semelhante a SharePoint Usability and Design Tips for Non Designers
Semelhante a SharePoint Usability and Design Tips for Non Designers (20)
Último
Último (20)
SharePoint Usability and Design Tips for Non Designers
- 1. SharePoint Usability and Design Tips for Non Designers Presented By: Wendy Neal August 12, 2015 Minnesota SharePoint User Group
- 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. Agenda Website Usability 101 Planning Your SharePoint Site My Favorite Design Tools Design Tips for Non Designers
- 4. Website Usability 101 “The main thing is that everything become simple, easy enough for a child to understand.” - Albert Camus
- 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. Types of Navigation • Navigation by browsing • Primary navigation • Secondary navigation • Utilities links • Navigation by Searching
- 7. SharePoint 2013 Navigation Areas SearchGlobal Navigation Quick Launch Utilities Menu Page Title
- 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. 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. 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. 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. 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…
- 14. Remember… • Frustration is cumulative (the little things add up) • It doesn’t take much to frustrate a user
- 15. Planning Your Sharepoint Site “Failing to plan is planning to fail” – Benjamin Franklin
- 16. Who Is Your Audience? Yourself? Your team? Your department? Entire company? Partners? Customers?
- 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. 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. 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. 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 http://wendy-neal.com/2014/12/creating-pages-vs-sub-sites-sharepoint/
- 21. Create a Site Mockup • A mockup is your site’s blueprint • Paper sketch is fine • Mockup tools: – Balsamiq – Visio – Excel
- 22. My Favorite Design Tools “Any darn fool can make something complex; it takes a genius to make something simple” - Albert Einstein
- 23. PixelWindow http://pixelwindow.en.softonic.com/ • On screen ruler that measures pixels • Drag/resize to measure anything on your screen
- 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. OneNote • It’s great as a screen/ image capture tool
- 26. Paint.Net http://www.getpaint.net • FREE image and photo editing software • Similar to PhotoShop
- 27. Snagit https://www.techsmith.com/download/ snagit/ • Screen capture • Simple image editing • Add cool effects
- 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. 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. 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. Example Color Scheme Tool http://paletton.com
- 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. Working With Images Download Paint.Net http://www.getpaint.net
- 34. Cropping Images Draws attention to details
- 35. Resizing Large Images Large images take longer to download Be sure to “Maintain aspect ratio” so you don’t distort the image
- 36. Determining Image Colors Find hex code or RGB of image
- 37. Recoloring Images To match your site colors
- 38. Applying Transparent Backgrounds Remember to save as a .gif or .png because .jpg’s don’t support transparency Before After
- 39. Change the Site Theme
- 42. DEMO
- 44. THANK YOU!!