In this series of blog posts, we have been talking about designing a SharePoint team site. The first two posts detailed the process of working with the teams to determine the Apps to support collaboration and business processes. I also introduced you to Pages and what they are used for. In this blog post, we focus more on web design and user interface design. Now, I’m not an expert on either of these, but fortunately with SharePoint, you don’t have to be. Site Owners are not supposed to have to know web design or coding and should not have to rely too heavily on IT to provide this expertise. When it comes to user experience I hope common sense guides me.
Most web sites on the Internet are revenue driven. The web site owners want visitors to frequent their web sites and for most of them there are tons of advertisements that they hope will catch your eye. To keep you coming back, the websites must have value to the visitors. Take Amazon for example. Amazon displays content to each visitor based on past visits and past experiences. Amazon knows what you purchase and they tailor what you see in hopes that they display merchandise that you are most likely to purchase. Another example is CNN. If you have an account and log in, you can customize your news consumption experience and they will show you content that is relevant to you. In both cases, the sites provide immediate and relevant information to the visitor. Otherwise, you would not frequent the site. Imagine if you visited CNN and the news was 2 weeks old. Or, if you visited Amazon and they kept presenting you with female bath products when you were a guy that leaned more towards electronics as a hobby. In any case, a web site must have valuable and relevant content. This is the most important thing to remember when you as a Site Owner are architecting your sites pages.
So, how do we go about architecting the pages? First, just like we did when determining the apps that our site would provide, we have to work with the users. We need to know what they will find relevant and valuable on the pages. So we need to get the input of the team. I go about this by setting up a few meetings in a room with a big white board. The white board will be where you design the pages and what is placed on the pages. I have also used other methods such as Visio and PowerPoint. I’ve even used a legal pad. Whatever works best for your team is what you should use.
I start by drawing a representation of the home page of a team site. I leave room for the Quick Launch menu, Top Link bar, and the Suite bar. See Below:
Image may be NSFW.
Clik here to view.
Now, we need to revisit all of the Apps that we have created in the site. I usually list them somewhere on the white board so the team doesn’t forget what they were. Using that list of Apps and some of the other OOTB apps from Microsoft, we will start to think about what we want to place on the page. We have to take into consideration some best practices for web design as well as adoption. So, here are some of the Apps we have at our disposal. I included some of the common Apps as well as a few web parts from Microsoft that I think we might use. I listed some of these in the previous blog post:
- Discussion Board
- Newsfeed
- Team documents
- Announcements List
- Team Members
- Common Links list
Now, this is not an exhaustive list, but for the sake of my blog space I’m just listing some examples. So these are the Apps and a few web parts from Microsoft that we think will be important to our team.
The next thing to do with the team is to address the first of the next 2 important steps:
1) Determine WHAT goes on the page and WHERE?
With the team, determine which of this Apps and Web Parts will provide the most ROI and is most relevant to the team. The Newsfeed and Discussion Board should be front and center. See the sample layout below keeping in mind this could be different in your organization.
Image may be NSFW.
Clik here to view.
Keep in mind that you will have a lot more content in your site than you will have real estate for in visible content area. And not everything is relevant enough to be displayed in the content area anyway. For those things you might consider simply providing a link to them in the Quick Launch menu. For example, in your analysis, you may find that the Team Members and Common Links are really not that important to be taking up space in the content area, so you instead create links for them in the Quick Launch menu.
Ok, so that’s the first step. Work with your team to determine WHAT gets placed on the page and WHERE it gets placed.
In the next blog post, I will talk about step 2, which is HOW the information in each of these Apps gets displayed. Remember, the goal is to make sure what they see is relevant and has value to team members so we have to customize how the information is presented.