Laying Out a Productive User Interface in SharePoint 2013

Intro

When discussing User Experience (UX), professionals in the field will often refer to the 7 ‘pillars’ of UX (see below).  Perhaps the most familiar of those pillars is ‘Usable’.  In this article, I will explain some best practices around usability (with specific reference to SharePoint 2013) and show how the SharePoint user interface (and its elements) can be used to create a great user experience.

Pillars_of_UX

The SharePoint Header

The header is the umbrella of your SharePoint site. It should contain all of the global functions a user would need to access anywhere in your site.

Standard SharePoint headers contain a logo (linking back to the homepage), primary navigation, and search.

Additional elements can be added to the SharePoint header, including:

  • Popular/quick links
  • Short news/announcements headlines
  • Stock figures
  • Time/Date

Below: An example of a customised SharePoint header

Custom_SharePoint_Header

Global Navigation

It’s no secret that the majority of websites keep the main navigation at the top of the page. Most users will look for high level navigation in this area.

It’s good to note that this placement is becoming an even more standard design approach due to the rise in demand for responsive design (which caters to improved experiences on mobile interfaces).

Below: A SharePoint global navigation

SharePoint_Global_Navigation_1

Below: A SharePoint global navigation with responsive design

SharePoint_Global_Navigation_Responsive

Dropdown Menus

If the site is designed for desktop interfaces which utilise a mouse, then a dropdown menu (activated on mouse hover) could be used to display secondary/ 2nd level navigation links.

Implementing a dropdown menu could potentially alleviate the need for a side navigation (containing secondary/ 2nd level navigation links) in the page layout thus increasing space in the page design.

Although dropdown menus work well in this scenario they are not too effective when using touch interfaces. The word on web is that the functionality can irate visitors, and therefore damage the quality of the experience.

It’s good to note that if you have a ‘large’ site with many pages then this will increase the size of a drop down menu. Drop down menus are suited to around 5 – 8 links, any more and the menu could potentially disappear below the page fold which can negatively affect a visitor’s browsing experience.

SharePoint_Dropdown_Navigation

Search Area

Traditionally search areas have always been aligned right in the header and the site logo aligned left. Occasionally website designers may swap these two elements around to put more emphasis on the search or to add a unique touch to their design.

In a solution where usability is the focus, aligning the search to the right of the header is the best choice as this is where people normally look for this kind functionality.

Adding scopes to search is a good idea if your solution has matured and you have data to back up the need for scopes. Upon launch it would be advisable not to use scopes, unless you know with confidence what parameters the users will need to refine their results.

SharePoint_Search

Web Parts

Too many web parts on a page will clutter up the interface and effect navigation efficiency. As a rule of thumb, it is wise to incorporate a maximum of 4-6 web parts on a page.

Other links to important information from a page can be displayed as a link list web part as part of the 4-6.

Make sure that individual web part size on the page reflects the hierarchy of importance.

For example a ‘news’ web part could be the most important thing on your page. Make sure that it is bigger than other web parts and aligned left so that it is the first thing a visitor sees on page load.

Normally you can attach 1-3 levels of importance to your web parts on a page. Make sure this is reflected in the design.

Applying these techniques will make readability easier for visitors arriving on your page.

Below: A homepage with multiple web parts

SharePoint_Homepage_Webparts

Below: A homepage with multiple web parts spread across a giant carousel page

SharePoint_Homepage_Webparts_Carousel

Images, graphics and text

Visitors should be able to tell the difference between links and read only text. Assigning one colour to links will help visitors differentiate between text types. Keep read only content in grey or dark grey.

Solid black on paragraphs text can be visually hard, and studies have shown that this can (in some cases) slow reading speed, so keep this in mind when you are designing content appearance.

When selecting small images to upload onto your site, make sure they are ‘zoomed in’, cropped and not busy. SharePoint 2013 aids this process by providing the ‘image renditions’ feature which can be used to display single image in different sizes (or renditions) depending on rules set.

SharePoint_Fonts

Buttons

If something is made to look ‘clickable’ then chances are people are going to click on it. This is good to note when designing or choosing buttons for your interface. Two good techniques are to give your buttons depth and assign a consistent colour (this could be the same as a hyperlink) to separate them from other interface elements.

Assigning a hover state to buttons using CSS really helps visitors ‘explore’ the interface, giving reference to an elements’ functionality.

A ‘next action’ button is better placed below a paragraph and to the right. This position is better because the user’s eye finishes at the right edge of the paragraph.

SharePoint_Buttons

Advanced interface customisations

Introducing fades and movement using jQuery can add a real cutting edge look and feel to the experience of your solution. However, use animation sparingly as it will slow loading time, and can cause unwanted distraction to your visitors if not correctly implemented. A tip would be to only include animation upon user interaction with an interface element.

If your solution only has to work in modern web browsers (IE9+, Chrome, Firefox, Safari), utilise CSS3 techniques when branding your solution. CSS3 allows for visual touches to the interface to load better and load quicker than bitmap graphics, especially to visitors using retina screens. This site is a great resource to establish which CSS features work in which modern browsers.

If you would like to design for another sense – hearing, then Chris Coyier shows some funky ways you can implement sound upon interaction using jQuery and Html5.

Adding touch sensitive gesture action is a great way to promote usage of your solution on tablet and mobile devices e.g a swipe action image carousel etc.

Conclusion

Most of these tips and techniques are just small adjustments or considerations. On their own they have may seem to have little impact, but altogether they can make a truly polished user experience.