SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy


Published on

This webinar was presented as part of the MetaVis SharePoint MVP Webinar Series on June 5, 2013. It was a slightly modified version of the session I did with the same name at SharePoint Saturday Twin Cities in November 2012. To get the full context and see the slide notes, please download the slides.

Accompanying video demos are on YouTube:

Session Abstract:
So you've been given a SharePoint site to administer for your team or project, but now what? How do you configure it? What types of content should you store there? How do you change the boring standard interface to something with a little more zing without involving a designer? How should your navigation be structured and what exactly do you put on the home page to draw traffic to your site?

This webinar will walk through the basic steps that anyone constructing a website, regardless of platform, should take into consideration and how these concepts fit into the SharePoint world. Basic usability concepts will be introduced, along with some quick and easy branding tips that will make a big difference in the look and feel of your site, and you don't need to have any design or coding skills to implement them. Whether you've been given a blank slate or inherited a site from someone else, you'll come away with several ideas you can apply right away to improve the layout and design of your site, thus helping to increase user adoption. Many of the concepts in this session apply to any version of SharePoint, however all demos will be done in SharePoint 2010.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • At my company, we give SharePoint sites to teams and groups that request them, and most of them aren’t familiar with SharePoint at all; so a lot of the first questions we get are:How do I configure my site?What types of content should I store there?How should our navigation be structured?What do we put on the home page?So I put this together as a training class for my end users; and I also thought it may provide value to others in the SharePoint community. In fact, I’ve written a few posts on my blog about these topics, and they’re some of the most visited articles.
  • This is what we’re going to cover today. I like to give my users a very high level overview of website usability, just to keep in the back of their minds when they’re designing their sites. We’ll talk about the planning your should take before you just “dump all your stuff” into SharePoint. Then I’ll share with you some design tips that I’ve learned over the years, and a few tips to get users to actually use your site after you’ve built it. And we’ll also do a live example with demos throughout the sessions.
  • According to Wikipedia, Usability is the ease of use and learnability of a human-made object. This can be anything human-made: a tool, a machine, a book, even a software application or website.So website usability refers to how easy it is for users to use and learn a particular website.The terms User-Friendly and Intuitive are things that come to mind when thinking about website usability.
  • This is a great book on usability by Steve Krug. Quick, easy read. Doesn’t go into a lot of usability theory or other boring stuff. Just a lot of common sense things to make your site better.Don’t do anything out of the norm. E.g. Make buttons look like buttons; Don’t call your Search button Locate or Find; even though they’re similar terms, it still makes people stop and think; Don’t name your page title something totally different than the link name they clicked to get there
  • Primary navigation is sometimes referred to as Main navigation. It’s usually a horizontal navigation bar at the top of the site, but not always. SharePoint OOB does have the primary navigation as horizontal and is also referred to as the top link bar (non publishing site) or the global navigation (publishing site).Secondary links are also sometimes referred to as the sub navigation. It’s usually a vertical list of links on the left or right side of the page. SharePoint refers to these as the quick launch links (non publishing site) or the current navigation (publishing site).Utilities links include things such as login/logout, privacy policy, terms of use, edit my profile, etc.A lot of people these days rely on search to find what they want, so good websites need to have search functionality! The good news is that SharePoint has search built in.
  • Primary or global links should not change. Think of those as the aisles in a grocery store. Studies have shown that the maximum number of links a human can process are nine.Secondary links will be different depending where you’re at. Using our grocery store example, think of them as the items on the shelves.Navigation should be used not only to assist you in getting to where you want to go, but it should also tell you exactly where you’re at along the way. Just like those maps you find at rest areas when travelling.
  • Home page design is probably the hardest part about designing your site.“Above the fold” is a term that newspaper firms use to describe the content that appears at the top half of the front page of the newspaper, so that when it's folded, the most important stories are visible.  For web sites, "above the fold" loosely refers to the content that users see on the screen before they have to scroll down the page to see the rest of the content. 
  • Many people are tempted to put their team’s entire mission statement on the home page. Don’t do it!
  • Good things: I know exactly what I can do here. Short, succinct, whitespace, uncluttered. 7 top nav links.Not so good: Active tabs aren’t highlighted; page titles don’t match nav links when you click to a different page
  • All sites that I create, I design them so they’ll fit on a minimum screen size of 1024 x 768 without left/right scrolling.
  • Do you want users to leave your site? Do they have an easy way to get back to your site?
  • Let’s take a look at the navigation areas in SharePoint.For the most part, SharePoint does pretty good about following navigation and general usability rules [point out all the different areas]
  • Primary and secondary navigation get very high marks, but only as long as the user sets them up properly. If they are, then functionally the navigation works as expected. Breadcrumbs get a D because it’s not evident where they are on the page. You have to know exactly where they’re at, and then if you find them, they’re not in a format that typical breadcrumbs follow.Page titles are a little misleading as well, as they appear to be breadcrumbs but they’re not.Search is really good, as long as it’s turned on! An admin has to do this.And screen size compatibility gets a B because it can be a little tricky to work with sometimes to get everything to fit without left/right scrolling on smaller screen resolutions.
  • Just like architects create a blueprint before they begin building, anyone creating a SharePoint site should plan out exactly what they want before they just start throwing content into it.There are several key questions you should ask before starting to build your site (see next slides).
  • If this site is just for yourself, you probably don’t need to put as much thought into it, since you’ll remember where you put things.If it’s just for your team, perhaps it’s OK to put the funny Dilbert comic on your home page. If the audience is the entire company, then it’s probably not.
  • It’s helpful to know what content is a good candidate to put into SharePoint, and what isn’t.This doesn’t mean you have to put the items in the left column in SharePoint, it’s just to give you ideas.When SharePoint gets installed, there are over 100 blocked file types by default! And there aren’t too many administrators who will unblock many of them.
  • I chose an HR site because every company has an HR department, and I thought it would relate to the most people.
  • Determining the scope is very important; if you don’t set limits and define your criteria of success, then you never know when your project is done.For first phase, implement some quick wins, or low hanging fruit.80/20 rule: 80% of the benefit can be achieved with 20% of the work; the remaining 20% benefit takes 80% of the work. So don’t make things too complicated, keep it simple
  • Keep your permissions simple; you don’t want to add several groups and permission levels, it will just make things complicated and become a maintenance nightmare.
  • Utilize OOB SharePoint groups whenever possible.You typically only want 1 or 2 site owners; the entire team doesn’t need to have those rights. Usually contribute is sufficient for them.
  • A lot of my users have questions about setting up their navigation, they don’t understand when to use pages vs. sub sites.
  • Now we’re ready to map SharePoint solutions with our requirements.
  • Whenever I design a site, I create a mockup of the layout. This might be overkill for simple out-of-the-box solutions, but it can be very helpful, especially if you have customizations, to give you and your stakeholders a visual representation of your site before you begin building it.
  • Mockups are meant to be very lo-fidelity, meaning that they are very plain with no colors or formatting. The idea is to garner stakeholder feedback on the CONTENT and FUNCTIONALITY; you don’t want to distract them with design at this point.The very first mockup I ever did several years ago, I make it look very pretty with colors and images. And even though I told them, ignore the design, I just want your feedback on the functionality, the first feedback I got was, I don’t like that color; or can we move this button over here?
  • I am not a designer; I can’t draw; I can’t create images from scratch in PhotoShop. If you gave me a blank canvas I’d probably stare at it for hours. However, I do know what I like when I see it. Yet I’m able to work a little bit with images and design websites that look pretty decent. So I thought, if I can do it, then anyone can; and I’m going to show you how I do it.
  • So if you’re like me and you’re not a designer, where do you begin?Color scheme tools can help you find complimentary colors.
  • Here is just one example of a color tool that can help you find complimentary colors. You choose a color (the color in the center of the wheel) and it creates a palette of pleasing colors that you could use with it.
  • I highly recommend Paint.Net – it has all the features I need, and it’s free!
  • Even though you can resize the image directly in SharePoint, it’s still downloading the large image from the server, and if you have a lot of very large images on your site it can cause performance issues.
  • To color: #6293AD (ctrl + left click)From color: #7CA6D8 (ctrl + right click)
  • Demo
  • Demo
  • Ask people to help you test the different permissions levels.I’ve already built the site structure and add some sample data for time sake.
  • Always upload the image to your site. Don’t just link to the image directly.
  • Mention my theme colors blog post
  • A lot of the time when you move content or functionality into SharePoint that used to live somewhere else, you are changing the way people work. Maybe those files used to be on a file share, or on an Intranet that was built on a different platform. It is crucial that the tasks that people used to do outside of SharePoint, are just as easy if not easier than they were previously. These next slides will detail some ways you can attract visitors to your site, as well as tips on making your site “easier to use than not use.”
  • Just because you’ve built it, doesn’t mean that users will use it.
  • You always want to have fresh content on your home page, but make it easy on yourself to update. Use an announcements list, for example. Also very important: Someone needs to own this and make sure it gets done on a regular basis. You can populate the lists ahead of time and use a date field to determine when the content displays.You may be thinking, these are great ideas for making sure my content doesn’t get stale, but how do I get users to my site in the first place?
  • Advertise your site as much as you can, in every avenue that you can. Where I work, believe it or not one of the best ways for something to get noticed is to post a flier in the bathroom right by the paper towel dispenser.
  • If you want someone to do something, you need to first do it yourself. I’ve seen a lot of IT departments who don’t even use SharePoint themselves, and then wonder why the business isn’t quick to move their content into SharePoint.
  • Kerri wrote a great article on NBSP that explains in great detail how to create consistent instructions. She sits with users to see where they may end up frustrated or confused and then documents those tips in a how-to tutorial.Admittedly where I work, we don’t use this advice as much as we should.
  • So we’ve come full circle. The key to making a site “easier to use than not use” is to ensure that you’ve employed good usability practices, put in the time to properly plan it, and spend a little effort in making it look nicer than the standard SharePoint out-of-the-box interface. And by using some of the other tips mentioned here, you should ensure that people will keep coming back to your site.
  • People may not realize or appreciate the amount of time you put into either cleaning your house, or designing your SharePoint site. But if you don't put that time in, everyone will notice!
  • SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy

    2. 2. WENDY NEALSharePoint ArchitectGreatAmerica Financial ServicesCedar Rapids, IowaTwitter @SharePointWendyBlog sharepointwendy.comLinkedIn
    3. 3. • Website Usability 1011• Planning your SharePoint Site2• Design Tips for Non Designers3• User Adoption Tips4TODAY’S OVERVIEW
    4. 4. WEBSITE USABILITY 101“The main thing is thateverything becomesimple, easy enough fora child to understand.” -Albert Camus
    5. 5. RULE #1: DON’T MAKE ME THINKWebsites should be:• Self-evident• Obvious• Self-explanatoryIf you remembernothing else aboutusability, rememberthis rule!
    6. 6. TYPES OF NAVIGATION• Navigation by browsing– Primary navigation– Secondary navigation– Utilities links• Navigation by Searching
    7. 7. NAVIGATION BEST PRACTICES• Secondary linksrelative to whereyou’re at• Active links highlighted• Page titles match linknames• BreadcrumbsYOU AREHERE• Concise and consistent primary navigation– Identical no matter where you are– Max 9 links
    8. 8. HOME PAGE DESIGN• Attract attention• Good balance of imagesand 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”
    9. 9. HOME PAGE DESIGN (CONT.)• Omit needless words– Don’t write a book;people won’t read itanyway– Provide short blurbsand links instead towordy content• Keep content succinctand uncluttered“Get rid of half the wordson each page, then getrid of half of what’s left.”– Steve Krug
    11. 11. DESIGN FOR DIFFERENT SCREEN SIZES• Typical minimum screensize is 1024 x 768– Test your site on differentscreen resolutions– You want to avoid left/rightscrolling at all costs!– The “fold” will be indifferent places dependingon screen resolution
    12. 12. SHAREPOINT NAVIGATION AREASSearchGlobal NavigationQuickLaunchUtilitiesPage TitleBreadcrumbs
    13. 13. SHAREPOINT 2010 USABILITY REPORT CARDElement A B C D FPrimary navigationSecondary navigationBreadcrumbsPage titlesSearchScreen size compatibility
    14. 14. PLANNING YOURSHAREPOINT SITE"Failing to plan isplanning to fail" -Benjamin Franklin
    15. 15. WHO IS YOUR AUDIENCE?Yourself?Your team?Your department?Entire company?Partners?
    16. 16. WHAT CONTENT SHOULD YOU PUT(AND NOT PUT) ON YOUR SITE?What to put in SharePoint• Documents where versioning isrequired• Collaborative documents• Electronic forms• List items such as calendars, links lists,discussion boards, etc.• Blogs and wikis• Picture librariesWhat 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 fileswhich require locks• Server side scripts
    17. 17. DETERMINE THE SCOPE• Define your criteria ofsuccess• What will you includeand not include?– Quick wins– Remember the 80/20rule• Use an iterativeapproach
    18. 18. PLAN YOUR PERMISSIONS• Determine permissionslevels needed• Keep permissions as simpleas possible• Utilize SharePoint and/orActive Directory groups– Try not to put individualsdirectly in the site/library/listlevel
    19. 19. SUB SITES VS. PAGESSub sites:• Hierarchical globalnavigation automaticallycascades downPages:• Global navigation hierarchymust be manually createdHow 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 topnavigation links
    20. 20. CREATE A SITE MOCKUP• A mockup is your site’sblueprint• Paper sketch is fine• Mockup tools:– Balsamiq– Visio– Excel
    22. 22. DESIGN TIPS FORNON DESIGNERS"Design is easy. All youdo is stare at the screenuntil drops of bloodform on your forehead"- Marty Neumier
    23. 23. FINDING INSPIRATION• Browse other sites youlike for ideas• Start with a photo orimage– Choose color schemebased on that• Use an online colorscheme tool
    25. 25. FINDING IMAGES FOR YOUR SITE• Free images and icons––––• Stock images (not free)– $1 per image!–• Google or Bing image search– Be careful of copyright infringements
    26. 26. WORKING WITH IMAGES• Download Paint.Net– FREE image and photo editing software– Similar to PhotoShop
    27. 27. RESIZING LARGE IMAGES• Large images take longerto download• Be sure to “Maintainaspect ratio” so youdon’t distort the image
    28. 28. DETERMINING IMAGE COLORS• Find hex code of image
    29. 29. RECOLORING IMAGES• To match your site colors
    30. 30. CROPPING IMAGES• Draws attention to details
    31. 31. APPLYING TRANSPARENT BACKGROUNDS• Remember to save as a .gif or .png! They supporttransparency.Before After
    32. 32. DEMOSDemo LinkPaint.Net ImageEditing Demo Site andHome Page Images Site ThemeColors
    35. 35. USER ADOPTION TIPS“If you make it easier touse than not to use, itwill get used.” – KerriAbraham
    36. 36. IF YOU BUILD IT…• You’ve built agreat site, butnow what?
    37. 37. FREQUENT UPDATES TO CONTENT• Announcements• Did You Know?• What’s New?• Quote of theWeek• Team MemberSpotlight
    38. 38. PROMOTE YOUR SITE• Lunch and learns• Contests• Set up user alerts• Bulletin boards
    39. 39. EAT YOUR OWN DOG FOOD• Lead by example• Use SharePoint forcollaboration anddocument sharing
    40. 40. ADOPTION COMES BACK TO USABILITY,PLANNING, AND DESIGNEnsure that yoursite is:Easy to usePlanned properlyWell-designed
    41. 41. CLOSING THOUGHTSA well-designed websiteis like a clean house…It doesn’t always get thefull appreciation itdeserves, but when it’smessy, everyone notices!
    42. 42. THANK YOU!Wendy Neal ◦ ◦ @SharePointWendy