SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy
•Download as PPTX, PDF•
57 likes•89,149 views
This session was presented at SharePoint Saturday Twin Cities on November 3, 2012. To get the full context and see the slide notes, please download the slides. Accompanying video demos are on YouTube: http://www.youtube.com/playlist?list=PLxSc1uqWwEXljBcsCYtUiPxvYBm_ePgfT Session Abstract: So your IT department has handed you 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 class 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 class apply to any version of SharePoint, however all demos will be done in SharePoint 2010.
Recommended
Recommended
More Related Content
More from Wendy Neal
More from Wendy Neal (9)
Recently uploaded
Recently uploaded (20)
SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy
- 1. SHAREPOINT SITE USABILITY AND DESIGN TIPS FOR NON DESIGNERS Wendy Neal SharePoint Saturday Twin Cities November 3, 2012
- 2. WENDY NEAL SharePoint Architect/Developer for GreatAmerica Financial Services Blog: www.sharepointwendy.com E-mail: wendy.neal@outlook.com Twitter: @SharePointWendy Contributing Author for NothingButSharePoint.com and NothingButBranding.com Passionate about all things SharePoint: Branding, evangelism, governance, training, user adoption, user empowerment
- 3. TODAY’S OVERVIEW 1 • Website Usability 101 • Planning your SharePoint 2 Site • Design Tips for Non 3 Designers 4 • User Adoption Tips • Case Study with Demos 5 Throughout
- 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 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. 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 YOU ARE • Active links highlighted HERE • Page titles match link names • Breadcrumbs
- 8. SHAREPOINT NAVIGATION AREAS Page Title Search Global Navigation Quick Launch Utilities 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 “Get rid of half the words – Don’t write a book; on each page, then get people won’t read it rid of half of what’s left.” anyway – Steve Krug – Provide short blurbs and links instead to wordy content • Keep content succinct and uncluttered
- 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 • To open in a new window or not, that is the question New Same Are you linking to… Window Window A site other than yours? Someplace within your site?
- 13. SHAREPOINT 2010 USABILITY REPORT CARD Element A B C D F Primary navigation Secondary navigation Breadcrumbs Page titles Search Screen size compatibility
- 14. EXAMPLE SITE http://www.logomaker.com/
- 15. REMEMBER… • Anything that confuses or frustrates users, or makes them think too hard, will not reflect well on you or your site
- 16. PLANNING YOUR SHAREPOINT SITE "Failing to plan is planning to fail" - Benjamin Franklin
- 17. WHO IS YOUR AUDIENCE? Yourself? Your team? Your department? Entire company? Partners?
- 18. WHAT CONTENT SHOULD YOU PUT (AND NOT PUT) ON YOUR SITE? What to put in SharePoint What NOT to put in SharePoint • Documents where versioning is • Blocked file types (.exe, .bat, .dll, .msi, required .com, & others) • Collaborative documents • Very large files • Electronic forms • Large media files • List items such as calendars, links lists, • Log and backup files discussion boards, etc. • Transactional applications or files • Blogs and wikis which require locks • Picture libraries • Server side scripts
- 19. • Human Resources site for medium-sized company • Audience is entire company; also want private area • Content to display: – Self-service forms – HR Policies – Holiday and events calendar – Benefits information – Job postings – Online training • Assumptions: – We are using the “Team Site” SharePoint template – There will be no custom branding done
- 20. 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
- 21. • Use all out of the box functionality; no customizations – HR Policies – Holiday and events calendar – Benefits information • Self-service forms – Forms will email HR staff to update in the current system • Job postings and online training will be links to current systems – Perhaps phase 2 initiative to move into SharePoint • Criteria of success – HR will manage their own documents, forms, and site content – Company will have central place to find HR-related information – HR has private workspace where they can collaborate
- 22. 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
- 23. • Team Site Owners – Full control (create sub sites, manage features & permissions) – 1 or 2 HR members • Team Site Members – Contribute content (add/edit/delete documents & list items) – Entire HR team (AD group) • Team Site Visitors – Read-only access – Company
- 24. SUB SITES VS. PAGES How they affect navigation Sub sites: Pages: • Hierarchical global • Global navigation hierarchy navigation automatically must be manually created cascades down • 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
- 25. Requirement Solution Self-service forms • Sub site • OOB list utilizing content types and alerts HR Policies • Document library with versioning and check in/check out Holiday and events • Out of the box calendar calendar Benefits information • Document library for documents • Contact lists for benefit contact information Job postings • Link to existing system Online training • Link to existing system
- 26. CREATE A SITE MOCKUP • A mockup is your site’s blueprint • Paper sketch is fine • Mockup tools: – Balsamiq – Visio – Excel
- 28. DESIGN TIPS FOR NON DESIGNERS "Design is easy. All you do is stare at the screen until drops of blood form on your forehead" - Marty Neumier
- 29. 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
- 30. EXAMPLE COLOR SCHEME TOOL • http://colorschemedesigner.com/
- 31. FINDING IMAGES FOR YOUR SITE • Free images and icons – http://office.microsoft.com/en-us/images/ – http://www.freeiconsweb.com/ – http://www.smashingmagazine.com/2008/03/06/35- really-incredible-free-icon-sets/ – http://www.instantshift.com/2009/08/19/75-free- useful-icon-sets-for-web-designers-and-developers/ • Stock images (not free) – http://www.vectorstock.com $1 per image! – http://www.istockphoto.com • Google or Bing image search – Be careful of copyright infringements
- 32. WORKING WITH IMAGES • Download Paint.Net http://www.getpaint.net – FREE image and photo editing software – Similar to PhotoShop
- 33. CROPPING IMAGES • Draws attention to details
- 34. RESIZING LARGE IMAGES • Large images take longer to download • Be sure to “Maintain aspect ratio” so you don’t distort the image
- 35. DETERMINING IMAGE COLORS • Find hex code of image
- 36. RECOLORING IMAGES • To match your site colors
- 37. APPLYING TRANSPARENT BACKGROUNDS • Remember to save as a .gif or .png! Before After
- 38. PAINT.NET IMAGE EDITING DEMO http://www.youtube.com/watch?v=QBWIOgazSWE
- 39. • Create site structure • Set permissions • Add content • Change site image and theme • Add home page web parts • Change quick launch (left nav) links DON’T FORGET! • Remove the “Getting Started” links • Test the solution!
- 40. CHANGE SITE AND HOME PAGE IMAGES http://www.youtube.com/watch?v=rIc4p-15Yq0
- 41. CHANGE SITE THEME COLORS http://www.youtube.com/watch?v=DtCYqF6vlXU
- 42. DEFAULT SHAREPOINT TEAM SITE
- 43. CUSTOMIZED SHAREPOINT TEAM SITE
- 44. USER ADOPTION TIPS “If you make it easier to use than not to use, it will get used.” – Kerri Abraham
- 45. IF YOU BUILD IT… • You’ve built a great site, but now what?
- 46. FREQUENT UPDATES TO CONTENT • Announcements • Did You Know? • What’s New? • Quote of the Week • Team Member Spotlight
- 47. PROMOTE YOUR SITE • Lunch and learns • Contests • Set up user alerts • Bulletin boards • Company newsletter
- 48. GIVE THEM INSTRUCTIONS • Never leave them wondering “What do I do now?” – excerpt from article by Kerri Abraham
- 49. ADOPTION COMES BACK TO USABILITY, PLANNING, AND DESIGN Ensure that your site is: Easy to use Planned properly Well-designed
- 50. REVIEW 1 • Website Usability 101 • Planning your SharePoint 2 Site • Design Tips for Non 3 Designers 4 • User Adoption Tips • Case Study with Demos 5 Throughout
- 51. QUESTIONS?
Editor's Notes
- 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.
- 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]
- Home page design is probably the hardest part about designing your site.
- Many people are tempted to put their team’s entire mission statement on the home page. Don’t do it!
- 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?
- 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.
- 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
- 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
- Ask people to help you test the different permissions levels.I’ve already built the site structure and added 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.
- 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.
- Closing thoughts: Building a usable website is like cleaning your house. When you have company over to your house, no one really appreciates the amount of time you put into cleaning it, but they’ll definitely notice if you didn’t vacuum or sweep the floor. With a website, your users may not realize the effort you put into designing it, but they will definitely notice a poorly designed site.Questions (if time):According to Steve Krug, what is the number one rule of website usability? Can you give me an example of when you’d open a hyperlink in a new window?What are some questions you should ask or things to consider when planning your SharePoint site? (multiple answers)Why would you want to resize (make smaller) a very large image?What are some ways you can promote your site? (multiple answers)