How to guide for: SAP User Experience - Part 3

[former_member186612]

Before we do a deep dive into all the various things that go into design, I want to first talk about different types of prototyping.  One of my favorite activities when designing is prototyping.  That's when things start to get interesting.   There are three main categories of prototyping:  low, medium, and high fidelity prototyping.  Fidelity refers to the level of detail and completeness.  So low fidelity generally has no visual design and little-to-no details.  Generally we start with low fidelity and evolve into high fidelity.

Low Fidelity Prototyping

This should be done first.  Here you want to gather the main pieces of content on each page and try to establish a base page flow (i.e. Home Page -> Catalog Page -> Order Page -> Confirmation).  You should have no visual design at this point nor should you have any detailed content.  It should feel like a sketch, in fact it can be a sketch.  One of the techniques we have found very helpful in this stage is using giant sheets of paper to form a page.  Then within the giant page use 8.5x11 sheets to write a single word representing a content section.  You might then put multiple 8.5x11 sheets, each for the different content, on the larger page.  When you need a new page, grab another giant piece of paper.  If you want to get really creative for visual effect, you can use strings to show links between pages.  This technique is commonly referred to as paper prototyping.  Some folks will do paper prototyping at the medium fidelity level too, however we prefer not to use paper when making medium fidelity prototypes as you can easily get caught up in making everything more visually appealing.

Medium Fidelity Prototyping

During this stage of prototyping you are going to fill in all the content and starting linking the pages together.  Here you should begin to finalize your information architecture, or the page structure of your site.  I could write a whole series about information architecture, but for now check out this link.  Most people refer to medium fidelity prototyping as wireframing.  Your pages will look similar to architectural drawings of a house.  You will have your content in place, however you will have place holders for visual elements.  Also you should start building the interactions within the pages; expand collapse, drag and drop, hover effects, etc.  SmashingMagazine has a great article that lists lots of wireframing resources here.  You should also add in delighters at this stage of prototyping.  Delighters is a term coined by the Kano Model which are unexpected things where we try to delight the customer.  While we should aim to meet our users needs and wants, here we can stretch our creative legs and really push for some wild or the "wouldn't that be cool if" features.  I encourage you to do this when creating medium fidelity prototyping.

High Fidelity Prototyping

Now we have our medium fidelity prototypes which include content, some interactions, and navigation we can start to add the final touches.  This includes adding in the visual design, remaining interactions, any minor content updates, and finish any delighters.  We want to keep the visual design and aesthetics until last, otherwise you will get caught in a cycle of which blue looks best.  The majority of the design work should be spent on solving design problems not on aesthetics.  Don't get me wrong choosing aesthetics can help and hurt the overall user experience, especially when it comes to using grays on links.  In general (not 100% of the time) a great design will still be great even without colors.  Look at your designs, if you removed all the visual design would it still function?  Could you still use it if you only had access to black and white or just gray scale?

High Fidelity prototypes should mimic very closely what the real system would look and feel like.  It should not mimic every function but only the ones you set out to prototype.  One very important thing to note here is that the prototype should be all smoke and mirrors; it should not be connected to any backend systems.  Why you ask?  Connecting to any backend system takes time and resources.  Then if you need to correct any data you need to do it in the backend which depending on your organization's setup could take time. UX prototypes are meant to prototype and validate the user experience not the technology.  The prototyping tools I mention below help facilitate creating UX prototypes.

Prototyping Tools

There are a variety of tools available now to do prototyping.  Some of the major players are Axure, iRise, Balsamiq, and Just In Mind.  At User Euphoria we prefer to use Axure, however I encourage you to examine them all and determine which one will fit your needs.  (Spoiler Alert - at the end of this series I will be posting one of our Axure template projects)

Why is Prototyping so important

Most people have hear the old saying "A picture is worth 1000 words".  Well it is probably worth at least 10,000 in software development.  Prototyping allows all parties involved to get on the same page.  We at User Euphoria even take it a step further and suggest running usability tests with prototypes.  By doing this we can validate our designs and verify that we addressed the users needs and wants.

Stay tuned for Part 4...Ideation

Part 1, Part 2