boost turku - prototyping workshop - mobile and web prototyping
TRANSCRIPT
Web and mobile app prototyping
Joni Juup 2.4.2016 – Boost Turku
With presentation notes!
What is prototyping?
“ A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. “ — Wikipedia
Prototype is a rough version of your idea. It’s a functional sketch.
Prototyping helps you to…
• test your ideas.
• find potential problems early on.
• iterate fast and easily.
• understand your product and its requirements better.
• present your ideas to others in a functional form.
Putting your ideas in prototype, might open up possibilities and problems you never knew existed. Iterating should also be fast and easy in a prototype, compared to making the changes in the final phases of the product development. Presenting your ideas to others is important and often static images alone cannot convey your idea, especially if it’s interaction heavy. By building prototypes you are able to understand your product better.
Best of all you don’t have to be an amazing coder or a hip designer to
build a working prototype.
You’re good just as you are now.
FidelityThe level of detail in your prototype
Pen & paper wireframes
Grayscale prototype (Proto.io)
Detailed design (Sketch, Proto.io)
Interaction prototypes (Flinto, FramerJS)
Example process of designing an app
Fidelity levels
Paper Wireframe Grayscale Detailed Interaction
Iteration speed
UI detail level
Low-fidelity High fidelity
Grayscale fidelity is used for giving an realistic image of the service UI, but driving users focus out of commenting on fonts and colors - it’s a level commonly used when the final visual look of the service is not yet determined. Consider it a better looking wireframe. Detailed prototype is a working mockup of the final product, with near final visuals. Interaction is a fidelity level we use often at Taiste when prototyping single interactions and fine tuning the intricacies of the animations and feel of a single part of the product.
Some good prototyping tools
Paper Wireframe Grayscale Detailed Interaction
Pen & paper
Cardboards
Post-its
Whiteboard
Balsamiq
Proto.io
Flinto
Keynote / Powerpoint
InVision
Proto.io
Flinto
HTML/CSS/JS
InVision
Proto.io
Flinto
HTML/CSS/JS
Flinto
HTML/CSS/JS
Origami/Avocado
FramerJS
Low-fidelity High fidelity
http://www.cooper.com/prototyping-toolshttp://prototypingtools.co/
I usually pick my prototyping tools on a couple of criteria: fidelity level which we’re working in, shareability of the prototype, is it for native app or web, does it have a lot of custom interactions or not and is it a whole service/app flow prototype, or a detailed interaction prototype.
Some general do’s and don’ts
• Use animation to convey position, or to draw attention to critical elements. Don’t animate everything.
• Always try to follow good usability rules. On the mobile, read up on the OS UI guidelines.
• When testing a detailed prototype outside of your team, avoid lorem ipsums and unnecessary funny names or texts - they draw the testers attention away from your product.
• Prototype and test prototypes as early as possible.
Good usability uses C.R.A.P
• Contrast - establish a difference between headers and body texts - with important call-to-actions and minor links.
• Repetition - design elements should follow a similar visual and functional logic throughout your product.
• Alignment - align elements to create a coherent look. Don’t let stuff just float around.
• Proximity - group related elements so users don’t have to find them.
From The Non-Designer's Design Book by Robin Williams
