Prototyping

The what, why and how at the University of Edinburgh

Neil AllisonUniversity Website Programme

Web Publishers Community October 2015

Overview• What is prototyping?

• Prototypes and the design process

• Example projects

• How to prototype

• Case study: Website search results page

• Balsamiq demo

Shared understanding is vital

WHAT IS PROTOTYPING?

What is prototyping?

• Sketching out how an idea or concept will work

Why should I prototype?

• Anyone can prototype – not just specialists• It encourages upfront planning• It’s a useful team design exercise• It means you can test with users and make

changes quickly and cheaply• You can try out different concepts• Effective way to communicate with stakeholders,

designers, programmers• The end product is more robust

Prototyping basics

• Prototypes are good in the early design phase – Focus on navigation, workflow, terminology and

functionality than visual design• Too much visual design is a bad thing

– It encourages focus on the wrong things• Paper prototyping brings out problem

solving skills – Not sketching or technical skills

Read more: 7 myths about paper prototypingwww.userfocus.co.uk/articles/paperprototyping.html

When is a prototype not a prototype?

• When you can’t implement changes quickly for retesting

• When it’s a pain to try alternative approaches, particularly in parallel

• When you get too attached and the thought of starting over because something fundamental is wrong makes you want to cry

PROTOTYPES AND THE DESIGN PROCESS

How prototypes fit in the design process

• Know who your users are and what tasks they will do (personas)

• Create prototypes of the designs• User test (not show!) the

prototypes with the representative audience

• Make changes and test again (and repeat)

User testing with prototypes

• Testing, not just showing, is an important part of prototyping – What people say and what they do is

different!

• It is important to have a solid understanding of the tasks before putting screens in front on users – Always have a pilot test

Pocket guide to running a usability test with a prototype

1. Set the scene – talk through the scenario we’ve provided so participant can play the role of the target user

2. Play computer – enable your prototype to replicate functionality to allow participant to work through the scenario (e.g. Changing tabbed content)

3. Ask questions – prompt participant to think aloud, but save the ‘why’ questions til the end

4. Make notes – pertinent comments and actions

…so long as you can be when you present or test them

Prototypes don’t have to be clever or sophisticated…

Video demo of paper prototype

EXAMPLE PROJECTS

Example 1: Requirements gathering

http://www.slideshare.net/mrscammels/prototyping-for-responsive-web-design

Example 2: AB testing

http://ausweb.scu.edu.au/aw04/papers/refereed/alexander/paper.html

Example 3: Rapid iterations

http://www.bunnyfoot.com/about/clients/screwfix.php

Example 4: Communicate ideas

HOW TO PROTOTYPE

Prototype sophistication

• It depends:– On what you’re looking to find– On where you are in the design process– On who you’re working with

• Does it facilitate– Interaction?– Communication?

Choosing the right tools

• Use the tool(s) that work best for you

• Doesn’t matter what you prototype with– Are you comfortable with it?– Can you work quickly?– Opportunities for collaboration are good too

Prototyping options

• Pencil, paper, post-it notes

• Graphics package (we love Snagit)• Office packages: PowerPoint, Visio, Word• Firefox free add-on: Pencil• Online services like Mockingbird, UXPin...

• Specialist tools like Axure, iRise, Balsamiq • Your preferred development framework

CASE STUDY: RAPID ITERATIVE PROTOTYPING

Website search results page

• We needed to redevelop website search to fit the new website design– Responsive layout vital

• Early draft designs were taking too long and not testing well with users

• New approach: Rapid, iterative, collaborative prototyping

Rapid team prototyping

• Quick: Session took 90 minutes

• Cheap: Team time, pencils and paper

• Inclusive: 6 members of UWP involved with a range of backgrounds

• Creative consensus: 20+ rough designs evolved into a single preferred option

How to…1. Everyone spends 5

minutes independently generating as many solutions to a problem as possible

2. Everyone presents their ideas to the group

3. Everyone independently sketches their one preferred solution

– Must include at least one idea from someone else

How to…

4. Everyone presents back to the group again

5. Working in pairs each team evolves their design again

6. Final presentation to the group

What happened next• By the final round designs had significantly

converged

• Designer/developer used this prototype as the basis for a revised design– Rough interactive prototype produced & tested

with users – significantly better results

• Interactive prototype evolved into the current search page design

Read more: http://bit.ly/uwp-search-sketch

BALSAMIQ DEMOhttps://www.wiki.ed.ac.uk/display/mockups/Home+-+Prototyping+wiki

Balsamiq – EdWeb templates

Share your experiences

• Has anyone

– Used prototyping as part of a development process?

– Attended our training on prototyping?

– Used Balsamiq?

Thank you

Get in touch if you’d like support or advice to begin prototyping in your team

neil.allison@ed.ac.ukUX Manager, University Website Programme