PROTOTYPE
WHY PROTOTYPE?
A prototype is a draft version of a product that allows ideas to be explored and shows the intention behind a feature or the overall design concept to users before investing time and money into development
MUCH CHEAPER TO CHANGE
early in the design and development process than after the product or service is developed
USER INPUT ON EARLY DESIGNS
evaluates features and the eventual product by trying them out - rather than having to try and interpret descriptions
TESTED BY END USERS
to find potential issues and prove needs that have not been considered - again a key factor in the commercial success
PROTOTYPE FIDELITY
Chosen based on the prototype goal | budget | time | resources
LOW-FIDELITY
- PAPER-BASED
- QUICK & CHEAP TO CREATE
- HAND DRAWN | STICKY NOTES WIREFRAME
- MANUAL USER INTERACTIONS
- CREATE | EXPLORE DESIGNS/FEATURES
- USERS HAPPY TO SUGGEST CHANGES
MEDIUM-FIDELITY
- COMPUTER-BASED
- QUICK TO CREATE WITH EXPERTISE
- MONOCHROME (INTERACTIVE) WIREFRAME
- MANUAL/REALISTIC USER INTERACTIONS
- REFINE DESIGNS AND/OR FEATURES
- USERS OK WITH SUGGESTING CHANGES
HIGH-FIDELITY
- COMPUTER-BASED
- TAKE TIME & EXPERTISE TO CREATE
- BRANDED INTERACTIVE WIREFRAME
- REALISTIC USER INTERACTIONS
- DEMONSTRATE ACTUAL PRODUCT
- USERS RELUCTANT TO SUGGEST CHANGES
DESIGN ELEMENTS OF THE PROTOTYPE
alpha (prototype) stage into beta (build) stage
TEMPLATES /
PATTERNS
DEFINE OVERARCHING STRUCTURE
position/style (CSS) of product elements (navigation | menus | columns | images | text etc) - also known as layouts or grids
INFORMATION
ARCHITECTURE
ORGANISES AND LABELS
to support findability/usability - involves categorisation (taxonomy) | hierarchies | site maps | metadata - card sorting is a popular technique
CONTENT
DESIGN
ENSURES CLEAR COMMUNICATION
of useful/current information to targeted groups most effectively - correct medium (text | images | video) | clear signposts | simple language
INTERACTION
DESIGN
ENHANCES USER SATISFACTION
in interacting with the product - focused on clearly defined user goals it considers look and feel | intuition | usability | accessibility | learnability
RESPONSIVE DESIGN
ENABLES ONE PRODUCT
usable regardless of device | platform | screen orientation | screen resolution via automatic detection - uses CSS media queries with flexible layouts/images
Each screen should have a clear purpose and ultimately lead to achieving the user goals
GOAL OF THE PROTOTYPE
The prototype will always ‘wireframe’ screens – defining placement/size of elements and features
Where the prototype ends and build begins (alpha to beta stages) is a blurred boundary depending on the model
– holistically the prototype will be part of the final product – or it won’t
Low-Fidelity | Medium Fidelity
THROWAWAY
Created knowing it’s for the bin – paper-based sketches, printouts, or interactive wireframes from a product like Axure or Sketch.
For initial design concepts, it’s quick/cheap for wireframes – used where no need for long term refinement/reuse into the product.
Even with interactive wireframes, reusable code is not often created – if the product is to be built, it will be from scratch.
Since all other models form part of the final product – they are outlined in the ‘build’ stage
ALPHA PHASE - FORMATIVE TO SUMMATIVE
METHODS TO CAPTURING USER FEEDBACK
The benefit of throwaways
RITE
With 'Rapid Iterative Testing and Evalution' prototypes can be used by individuals or demonstrated to groups - changes are iterated real-time with issues discovered by one or more users - a form of early usability testing.
GUERRILLA
A rapid, low-cost method of quickly capturing feedback about specific product areas to anyone that may use the product - or one similar (rather than recruit participants) and mocking-up alternatives real-time.
- Copyright Users First Ltd 2024