SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy
•Télécharger en tant que PPTX, PDF•
5 j'aime•5,245 vues
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: http://www.youtube.com/playlist?list=PLxSc1uqWwEXljBcsCYtUiPxvYBm_ePgfT 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.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy
Similaire à SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy (20)
Dernier
Dernier (20)
SharePoint Site Usability and Design Tips for Non Designers by @SharePointWendy
- 1. SHAREPOINT SITE USABILITY AND DESIGN TIPS FOR NON DESIGNERS Wendy Neal June 5, 2013 MetaVis Webinar Series
- 2. WENDY NEAL SharePoint Architect GreatAmerica Financial Services Cedar Rapids, Iowa Twitter @SharePointWendy Blog sharepointwendy.com LinkedIn linkedin.com/in/wendyneal About.Me about.me/wendyneal Author NothingButSharePoint.com SharePoint-Community.net
- 3. • Website Usability 1011 • Planning your SharePoint Site2 • Design Tips for Non Designers3 • User Adoption Tips4 TODAY’S OVERVIEW
- 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 • Secondary links relative to where you’re at • Active links highlighted • Page titles match link names • Breadcrumbs YOU ARE HERE • Concise and consistent primary navigation – Identical no matter where you are – Max 9 links
- 8. 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”
- 9. 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
- 10. GOOD HOME PAGE DESIGN EXAMPLE http://www.logomaker.com/
- 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. SHAREPOINT NAVIGATION AREAS Search Global Navigation Quick Launch Utilities Page Title Breadcrumbs
- 13. SHAREPOINT 2010 USABILITY REPORT CARD Element A B C D F Primary navigation Secondary navigation Breadcrumbs Page titles Search Screen size compatibility http://www.sharepointwendy.com/2013/02/sharepoint-2010-usability-report-card.html
- 14. PLANNING YOUR SHAREPOINT SITE "Failing to plan is planning to fail" - Benjamin Franklin
- 15. WHO IS YOUR AUDIENCE? Yourself? Your team? Your department? Entire company? Partners?
- 16. 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 • Log and backup files • Transactional applications or files which require locks • Server side scripts
- 17. 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
- 18. 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
- 19. SUB SITES VS. PAGES Sub sites: • Hierarchical global navigation automatically cascades down Pages: • Global navigation hierarchy must be manually created 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
- 20. CREATE A SITE MOCKUP • A mockup is your site’s blueprint • Paper sketch is fine • Mockup tools: – Balsamiq – Visio – Excel
- 22. 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
- 23. 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
- 24. EXAMPLE COLOR SCHEME TOOL • http://colorschemedesigner.com/
- 25. 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
- 26. WORKING WITH IMAGES • Download Paint.Net http://www.getpaint.net – FREE image and photo editing software – Similar to PhotoShop
- 27. RESIZING LARGE IMAGES • Large images take longer to download • Be sure to “Maintain aspect ratio” so you don’t distort the image
- 28. DETERMINING IMAGE COLORS • Find hex code of image
- 29. RECOLORING IMAGES • To match your site colors
- 30. CROPPING IMAGES • Draws attention to details
- 31. APPLYING TRANSPARENT BACKGROUNDS • Remember to save as a .gif or .png! They support transparency. Before After
- 32. DEMOS Demo Link Paint.Net Image Editing Demo http://www.youtube.com/watch?v=QBWIOgazSWE Change Site and Home Page Images http://www.youtube.com/watch?v=rIc4p-15Yq0 Change Site Theme Colors http://www.youtube.com/watch?v=DtCYqF6vlXU
- 33. DEFAULT SHAREPOINT TEAM SITE
- 34. CUSTOMIZED SHAREPOINT TEAM SITE
- 35. USER ADOPTION TIPS “If you make it easier to use than not to use, it will get used.” – Kerri Abraham
- 36. IF YOU BUILD IT… • You’ve built a great site, but now what?
- 37. FREQUENT UPDATES TO CONTENT • Announcements • Did You Know? • What’s New? • Quote of the Week • Team Member Spotlight
- 38. PROMOTE YOUR SITE • Lunch and learns • Contests • Set up user alerts • Bulletin boards
- 39. EAT YOUR OWN DOG FOOD • Lead by example • Use SharePoint for collaboration and document sharing
- 40. ADOPTION COMES BACK TO USABILITY, PLANNING, AND DESIGN Ensure that your site is: Easy to use Planned properly Well-designed
- 41. CLOSING THOUGHTS A well-designed website is like a clean house… It doesn’t always get the full appreciation it deserves, but when it’s messy, everyone notices!
- 42. THANK YOU! Wendy Neal ◦ sharepointwendy.com ◦ @SharePointWendy
Notes de l'éditeur
- 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!