Thursday, December 8, 2011

Tips for a well-designed, great looking SharePoint team site

We recently rolled out SharePoint 2010 to our users. One thing we've repeatedly been asked for by our users are tips and best practices on how they can make their team sites look the best they can while still being user-friendly. I wrote an internal blog article on the subject, since in addition to SharePoint, I also have a passion for user interface design and website usability.  Below is the slightly-adapted "public" version of that post:

I've been asked to write a post to share tips and best practices on how to make your team sites look the best they can while still being user-friendly.  I could probably write a book on the subject, but for brevity sake I'll try to keep it fairly short.  Following are a few things off the top of my head that I always try to do when designing a new website (in SharePoint or otherwise)​:
  • Create a concise and consistent top navigation - in SharePoint this is also referred to as the Global Navigation.  You want to include here the top 5 or so elements that you most need to have on hand at all times.  Links to pages or subsites that you've created are good examples. 
The global navigation will follow the user at all times, so no matter where they are on your site (as long as you haven't explicity said to NOT inherit the global navigation) they will see the same links at the top.  Unless you want something to be completely isolated (such as a private site) I would recommend to always use navigation inheritance from the parent site.
Also, studies have shown that the maximum number of top navigation links that a human brain can process at once are nine.  Anything more than that appears to be too cluttered and confusing.
  • Try to avoid left/right scrolling at all costs!  There is nothing more frustrating for a user than having to constantly scroll back and forth to read or view all the contents on your web page.  You may have to move extra wide web parts into a header or footer zone so that it spans the entire page in order to avoid left/right scrollbars.  (Note:  We used the Team Site template for all our team sites.  By default, your home page is created with two columns, so it likely won't contain a header or footer zone.  No problem, you can change the layout by selecting "Text Layout" in the Ribbon, and then choosing a different layout in the dropdown menu.) 
Also keep in mind the different screen resolutions when designing your site.  Most office computers are set to minimum 1280 x 1024 pixels.  Some laptops are widescreen and are much wider, so you'd want to test it in a narrower browser window to make sure it will look ok on other people's computers.  In addition, most conference room computers are set to a much smaller screen resolution - 1024 x 768.  So if you will ever show your site on a screen this small, you may want to test it in a smaller browser window first to make sure it doesn't have any left/right scrolling.
  • Left navigation links should be relative to where you're at on your site.  By this, I mean that the left navigation can and should change depending on where you are (unlike the top navigation).  If you're on your top level site (i.e. your home page), you might see links to a calendar, any custom lists you've created, discussion boards, etc.  However, if you're on a subsite, the left navigation links would be different and would point to areas within or below the subsite.
Also, feel free to modify the default links that appear in the left nav whenever you create a new site.  I personally almost always change them because I don't care for the way they are structured.  It doesn't make sense to me logically why the links would be categorized under the headers Libaries, Lists, Discussion Boards, and Sites.  I much prefer actionable links, such as "Add New Widget" instead of just a link to a Widgets list.  And I would probably add links to subsites to the top nav, not the left nav.
  • Properly configure your hyperlinks.  My opinion on whether to set your hyperlinks to open in a new window vs. the same window involves simply asking yourself a couple questions:  "Do I want my users to leave my site?" and "Is there an easy way for users to get back to my site?"  If the answer to either or both of these is "No", then force your link to open into a new window.  This keeps your site open in the background so they can easily return by closing or minimizing the new window.  I typically would do this if the link is to a site other than yours.  If you have a link to somewhere else within your site, it should open in the same window, because you have the navigation and breadcrumbs to lead you back to where you came from.
  • Design your home page to attract attention and convey the purpose/meaning of your site.  This is probably the hardest thing to do.  Many people struggle with the following questions:  How do I lay out my home page?  What do I put on my home page?  How do I make it look interesting?  How do I entice people to come back to my site?  There are a lot of great resources out there on the web, but here are a few tips that I think pertain to Team Sites and other internal sites that will be created in SharePoint here at GreatAmerica:
    • Keep your content succinct and uncluttered - you don't want to get too wordy.  Many people make the mistake of putting their entire mission statement or a huge paragraph of text welcoming their visitors on their home page.  While you do want your visitors to feel welcome, you don't want to write a book.  One or two short sentences is all you need.  The majority of visitors will not take the time to read anything longer than that.  If you have more to tell them, you can link to another page so those who are interested in reading about it can learn more.
    • Place the most important information "above the fold".  This 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.  This can get really tricky, because as mentioned above, different browser screen resolutions will render the "fold" at different spots.  Just keep that in mind when placing content at the top of the page.
    • Utilize images and colors/effects to draw attention to key content.  Replace the image that appears when your site was created to something relevant to your team or the content on your site.  Use a different color and font weight than the regular text for the page title and headers to make your page visually appealing.  That being said, you don't want to get too gawdy.  Don't use a myriad of different colors, fonts, and text sizes for your headers and page text.  You want to keep some consistency.  For example, use the same font style for all your regular text.  You can use a different font for headers than for the regular text, but use the SAME font for all headers.
    • According to Steve Krug*, there are 4 questions that need to be answered as quickly and clearly as possbile when a visitor first enters your site:
      • What is this?
      • What do they have here?
      • What can I do here?
      • Why should I be here?
If your home page answers these questions, you have succeeded in conveying the purpose/meaning of your site.

These are just a few tips, and like I said, this is only the "tip" of the iceberg.  If you have any other tips or ideas that you'd like to share, please leave a comment below.

*From the book "Don't Make Me Think - A Common Sense Approach to Web Usability" by Steve Krug

2 comments:

  1. These are some of the fabulous tips to take into account to make your site look good and to get the good result from users point of view. Now onwards will keep these in mind while developing a new site in SharePoint.

    ReplyDelete
  2. Great article Wendy, let me introduce you www.bindtuning.com we follow most of the tips you have here and put everything together with amazing custom designs that you can personalize in just a few clicks achieving amazing custom branding SharePoint sites without writing a single line of code.

    ReplyDelete