Category Archives: 0006400086bba434@live.com

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.

Tools for SharePoint User Experience (UX) Design: Wireframing


You may also be interested in: Simple SharePoint Migration Tool - Content Matrix by Metalogix


 

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 on Scamping and Paper Prototyping, the topic for this article is the Wireframe.

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.

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 a simple application and so, is a skill that can be quickly learned.

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 from the scamp created in the previous article, using the tools that come with Axure and a few extra tools we have created that are SharePoint specific (which can be downloaded at the end of this document).


Above: The scamp from my previous post

Step 1: Create a 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.

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

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

Step 4: Add 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.

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.

Step 6: Use the Axure default widgets or create your own widgets to add more content

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 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


You may also be interested in: fpweb.net


 

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

2013-08-27-SharePointPrototyping-01.jpg

What you will need

  • Cutting mat
  • Scalpel
  • Metal ruler
  • Glue (optional)
  • Marker pens
  • Medium weight card (around 200gsm)

Step 1

Draw a Scamp of the functionality area in its static state (on page load with no interaction).

2013-08-27-SharePointPrototyping-02.jpg

Step 2

Using the scalpel, metal ruler and cutting mat cut a line in the scamp along the top of the interaction area. This hole should be a little larger than the thickness of the card that is being used.

2013-08-27-SharePointPrototyping-03.jpg

Step 3

Next a scamp needs to be drawn for the interaction item, in this case this is the expanded list item.

Once drawn, the interaction item should be cut out so that the main body area is slightly narrower than the hole which was cut in Step 2 whilst leaving a bar at the top (this will allow the item to stop at the correct place).

2013-08-27-SharePointPrototyping-04.jpg

Step 4

Flip the two pieces of card over and feed the interaction item created in Step 3 into the hole created in Step 2.

2013-08-27-SharePointPrototyping-05.jpg

Step 5

Flip the paper prototype back over and have a play.

Other Uses

Paper prototypes can be used to illustrate a vast range of functionality, the only limitation really is your creativity.

The process outlined above is only a very basic paper prototype; be creative and think up new ways of being able to demonstrate functionality.

Rolls of paper can be used to allow large areas of content to be scrolled through, long horizontal pieces of card can be good for demonstrating image carousels, tinted acetate or tracing paper can be used to replicate a modal window popping up…the possibilities are endless.

Tools for SharePoint User Experience (UX) Design: Scamping


You may also be interested in: Scinaptic OnePlaceMail - Enterprise Email & Document Management for SharePoint


 

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

Introduction

This is the first in a series of articles exploring useful tools for designing a user experience for a SharePoint site.

I will explain what the tools are, why the tools should be used, in which circumstances they are best utilized, provide examples of usage and downloadable templates for use where possible.

What is Scamping?

In the context of User Experience a scamp is a quick, hastily drawn visual of a webpage.

Scamps should be the first stage of designing a SharePoint site (or any other site for that matter) when the content that is displayed on each page needs to be defined.

The content does not need to be pretty or drawn with perfectly straight lines (see below). In fact quite the opposite, we’re not aiming for a work of art here, it’s rough for a reason.

Creating these scamps in this crude way allows us to focus purely on content and if any element of visual design were added it would distract from this.

By only using a single color and having no styling applied a client will be led towards only giving feedback on the content of the page rather than being distracted by other elements and giving feedback on the color, imagery or the fonts used etc.

Another reason for doing these scamps quickly is that they will be disposable. An idea can be quickly agreed or disregarded by doing a quick scamp to assess its merits and throwing it away if it does not work. Many hours could be wasted by designing a perfect site with a full blown User Interface design only for the content to be changed and the time spent being wasted.

On a similar note, from the designer’s point of view, if you spend a few days on a design you will become attached to your design and you would be reluctant to make major changes to the layout. If these changes are made at the scamp stage, a 5 minute scamp is easier to throw in the bin and start again.

SharePoint Scamping Template

We have created a pdf template for quick and easy scamping which can be downloaded from the link at the end of the article and printed out. The template comprises of a browser window (1024px x 768px), pixel dimensions and a pixel grid to aid alignment and scale.

Also included in this template are layers that can be turned on/off in acrobat reader to add the Bookmarks Bar and the SharePoint Ribbon to the browser window.


Above: The basic scamp pad


Above: The basic scamp pad with bookmarks bar and SharePoint ribbon

Download the Creative Sharepoint scamp pad template here