Tools for SharePoint User Experience (UX) Design: Interactive Prototyping


You may also be interested in: O’Reilly - SharePoint 2010 at Work


 

Editor’s note: Contributor Adrian England is the Senior User Experience Designer at Creative Sharepoint. Follow him @ade_england

Introduction

Following on from the previous articles in this series Scamping, Paper Prototyping and Wireframing, the topic for this article is Interactive Prototypes.

What is Interactive Prototyping?

In the previous articles in this series a concept was taken through the stages of initial scamps to get the ideas down on paper and iterated quickly, a paper prototype to explain individual elements of functionality and then the creation of wireframes to show how the content will sit within the site.

At this stage you will probably have a number of wireframes depicting the different pages within a site. These wireframes will undoubtedly have the correct content and layout in place, but it may be difficult to illustrate how the individual pages come together to form a complete site.

This is where the interactive prototype comes in. Using Axure to create the initial wireframes means that these pages can now be wired together to form a clickable, navigable site. Again these files should contain no element of design, these should be purely monotone layouts with no imagery or stylised fonts, ensuring the focus is on the content with the addition of interaction.

Taking the wireframe created in the previous blog we can now add functionality, links, interactions and more… For the purpose of this blog I will focus on making the site navigable but there is a lot more that can be achieved by Axure, their site has a number of tutorials (http://www.axure.com/learn) and a lot more resources can be found online.

2013-10-04-InteractivePrototyping-01.jpg

Using Axure to create an Interactive Prototype

First off we need to decide which elements of the site will be used across all (or multiple) pages. For the purpose of this wireframe the header containing the navigation, site logo and search area will be required as a consistent element across the entire site.

For larger projects these elements could include document libraries, lists, newsfeeds, calendars or any other element that should remain consistent.

Similar to the SharePoint Ribbon in our SharePoint2013 Axure Library any page element can be turned into a “Master”.

Taking the wireframe created earlier, drag and select all of the elements in the header area.

2013-10-04-InteractivePrototyping-02.jpg

Right click on this selection and “Convert to Master”, naming the item “Header”.

2013-10-04-InteractivePrototyping-03.jpg

This new Master element will be displayed in the Masters panel (to the left of the prototype). Rename the pages (in the Pages panel) as required, then right click on the Header Master (in the Master panel) and select the pages it should be added to. The Master element can also be dragged on to an individual page and repositioned if required.

2013-10-04-InteractivePrototyping-04.jpg

Now edit the master by double clicking on the master element, either on the page (highlighted in red) or in the Master panel, this will open the Master created earlier so you can edit all the pages globally.

Links can be added to the Navigation buttons by right clicking on them and adding cases. The Header will now be updated with links on all pages that it has been placed on allowing the site to be navigable.

2013-10-04-InteractivePrototyping-05.jpg

When finished adding content and functionality to each page, the prototype can be exported into a html prototype allowing the user to click through the site and explore.

Once tested by the user and approved the project can then progress to the design stage, confident in the knowledge that the content and functionality have been agreed. Going through this process and separating content, functionality and aesthetics allows the designs to be considered purely on their own merit and the underlying functionality understood without further explanation or iteration.

For everything SharePoint and Office 365 from the community for the community!