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

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. Read more

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

Read more

Tools for SharePoint User Experience (UX) Design: Wireframing

 What is Wireframing?

While a scamp is the first stage in designing a site, a quick way of getting the content and functionality required planned out, a wireframe is the next stage in the process when the detail and scale of elements need to be ascertained. Similar to a scamp, a wireframe should be quick and easy to change so the process of iterations with feedback from clients will allow quick refinement of the content required.

SharePoint 2013 Axure Wireframe

Like a scamp, a wireframe should have no design elements, such as colour, fonts or imagery, ideally these should be created in one colour, only using extra colours to denote different areas or functionality, by doing this the user is forced to focus on the content and not be distracted by design elements.

Where scamps and wireframes differ is that wireframes should contain the actual content that the site requires, list items, document names, names of departments and people, navigation items etc. (or as close as possible) so that the site feels as personable and as real as possible to the users.

Another reason for the content to be accurate at this stage is that the wireframes will be produced at SS (Same Scale) as the proposed design, so if the requirements are for the site to be optimised for a minimum browser size of 1024x768px with a minimum point size of 11px then the wireframe should be created to these specifications to ensure the content will fit when we get to the design stage.

Which tools can be used to create Wireframes?

The tools for creating wireframes are wide and varied and which tool you choose to use will depend on your skill set and the projects specific requirements. Below are some of the tools available with their pros and cons:

Photoshop

Although not the obvious choice for a wireframe, the wireframe taking slightly longer to create initially, the finalised wireframe can have design elements quickly applied by using Photoshop layer styles to add chromes etc.

Photoshop however does a lot more than just making wireframes and therefor is a lot more expensive and a lot harder to learn than other products, so if you don’t already have a copy of Photoshop and are unfamiliar with it this is probably not the right choice.

Fireworks

Fireworks is probably more suited to wireframes, using symbols and states to control the look of elements which can have the design added once finalised. Another advantage with Fireworks is that the wireframe can quickly be turned into an interactive prototype.

Similar to Photoshop, Fireworks is reasonably expensive and tricky to master.

Balsamic

Balsamic is a tool that is designed specifically for the purpose of wireframing, giving a selection of user interface elements that can be easily dragged and dropped into position to build a layout. Balsamic is simple application and so is a skill that can be quickly learnt.

On the downside Balsamic produces wireframes that are a little closer to scamps in style so getting the content accurate is a bit harder.

Axure

Like Balsamic, Axure is designed specifically for wireframing, it comes with a selection of User Interface elements and you can create your own UI elements to add to these if required. You also have more control over the look and scale of items than Balsamic, being able to control global text styles etc.

It is a relatively simple application to learn and there are a wealth of online resources and tutorials too.

One big advantage of Axure is that once you have built your wireframes these can be quickly wired together to make an interactive prototype.

Using Axure to create Wireframe

I won’t go into too much detail on how to use Axure as there are lots of tutorials on this subject floating around the web, below I will illustrate the process of creating a simple wireframe, using the tools that come with Axure and a few extra tools we have created at Pythagoras that are SharePoint 2013 specific (which can be downloaded at the end of this article).

Step 1: Create a blank Axure document

Blank Axure Document

Step 2: Load the “SharePoint_Axure_Library” (downloadable at the end of this blog)

Click on the title of the Widgets Panel and scroll down to “Load Library” then navigate to and load the “SharePoint2013_Axure_Library”. This will add a number of UI Elements that are specific to SharePoint such as the ribbon, lists, libraries etc.

Load SharePoint 2013 Axure Library

Step 3: Add the SharePoint Ribbon from the “SharePoint2013_Axure_Library”

Drag and Drop the Ribbon from the widget library on to the page.

Drag SharePoint 2013 Ribbon into Axure Document

Step 4: Add Navigation buttons from the Axure default widget library

Drag and Drop a button on to the page, the size and text can be edited once the button has been placed.

Add Navigation Buttons

Step 5: Add the SharePoint Search Box from the “SharePoint_Axure_Library”

When dragging elements onto the page Axure has handy dialogue boxes and guides to allow pixel perfect positioning of UI elements.

Add SharePoint Search Box to Axure Document

Step 6: Add more SharePoint 2013 widgets, Axure default widgets to the page

Add More Widgets

 

Step 7: Export as images or generate an interactive prototype in your web browser

Axure Interactive Prototpe

Conclusion

This process can be repeated to create all of the required pages of the site in one Axure document, if an element is used on multiple pages then it can be created as a master and edited in one place whilst updating any page it is placed on, these wireframes can either be exported as individual images or wired together to make an interactive prototype (the process of making an interactive prototype will be covered in the next blog in the series).

The wireframe is now much more detailed than the original scamp, and because it has been created to scale we can see that the all of the required content is no longer visible within a 1024×768 screen, finding this out now rather than at the design or build stage is beneficial as we can now quickly reassess and refine the content so that the information that the client requires on the page fits within the minimum screen size specified.

Download the SharePoint2013 Axure Library here – please note, this file will only work in Axure, not the other wireframing tools mentioned earlier

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

Introduction

Following on from the previous article in this series scamping, the topic for this article is the Paper Prototype.

What is Paper Prototyping?

A paper prototype, like a scamp, is a low-tech way of quickly visualising an idea, or in this case, an area of functionality that would either be difficult to explain or would require investigation for proving a concept.

In essence, a paper prototype is a scamp with interactive functionality, which can be quickly created, tweaked and thrown away if not required.

The example below is an expanding list showing how the finished prototype will be used.
Read more

Creating a SharePoint 2013 Theme

Introduction

Basic branding of SharePoint has been made easier than ever by the new release of SharePoint 2013, so it’s great that Microsoft have acknowledged that companies love branding their SharePoint solutions.

Don’t worry, you don’t have to be an advanced developer to create great SharePoint 2013 themes, you just need have good taste, an eye for design, and to know your brand.

In this post we go step by step on how to configure the font, colours, logo, and the background image for your new SharePoint 2013 theme. The configuration is done in the comfort of SharePoint designer.

Also in this post we also discuss other tools and techniques which make life easier when creating a theme.

Read more

User Interface (UI) Improvements in SharePoint 2013

SharePoint 2013 is a major leap forward for Microsoft as far as the end user is concerned. Improvements have been made in the general look and feel of the interface along with many new and exciting elements of functionality.

Firstly I shall discuss the look and feel of the SharePoint 2013 interface. The “Windows 8 Style” (or the design style formerly known as Metro, or whatever Microsoft are calling it today) has been used as a consistent user experience between SharePoint 2013, Windows 8, Office, mobile applications etc.

This will mean that if the user is comfortable in one application they will have a similar experience in all other Microsoft applications.

SharePoint and Office UI

 

Read more

Is Design as Important for an Intranet as a Public-Facing Website?

Design is important in any successful product.

In modern society now it’s pretty obvious that visual design plays a significant role in products that gain market adoption. On the flip side design architecture is also vital to the success of products that can perform tasks. A company who has taken these ideals to heart is the infamous Apple.

Read more

Web Design Trends in 2012

There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. All beauty, with no substance, gets boring after a while. 2012 is not about beauty, it’s about function. The trends for this new year and emerging decade are responsive design, constant connection and virtual reality.

Read more