Sprachen
Seiten
Rechtliche
Memi Beltrame@bratwurstkomet
Prototyping for Mobile
UX Romandie meets COMEM+February 26th 2013
We are all Elephants
Prototypen für Mobile sind auf Papier oder am Computer schwierig zu verstehen.
Practice!
Chapter 1
5 ChallengesChapter 2
ToolsChapter 3
Practice!
5 ChallengesChapter 1
1Know your audience
Finding out user behavior regarding touch & mobile.
Define the relevant criteria
• Age. • Devices. • Location. • Homogeneity.• Education / Professional background.
Relevant = High impact on experience
Age
• Single Page• No Chrome• No adds • No wrong
places
visit http://preview.liip.ch/zooon an iPad or iPhone.
Location
Züriwald App Educational Hiking
Planning Offline =Download
Closed Places
Weather
2Make it tangible
Users have a hard time to understand paper or desktop
prototypes for mobile.
Get as close to the real deal as possible
Jungfraubahnen Tourism
Scribbles HTML-WebPrototype
Balsamiq
Make users interact on the device.
Neue Zürcher Zeitung Webpaper
Our Fingers
Short
44px
44px
Thick
44px
44px
Provide the proper affordances
Some gestures are more established than others.
3Testability
The more interactive, the easier to test,
the harder to record.
Do it.Early. Often.More on testing later
4Quality
Speed vs. Accuracy
Pick one.
Speed vs. Accuracy
Pick one.
5Data
Do anything to get real data.
Does it exist?How does it look like?
Prototype Data:(Fonds in an application
for bankers)
VF - European Mid and Small Cap Equity B (Lux)Aberdeen Global - Emerging Markets Equity A AccUBS (Lux) Medium Term Bond Fund - CHF P-accUBS (Lux) Medium Term Bond Fund - EUR P-accUBS (Lux) Medium Term Bond Fund - USD P-acc
Real Data:
ToolsChapter 2
Pen and PaperThe usual start to any
prototyping
Extremely rudimentalAffordableFast and without electricity
What you need
Extremely rudimentalAffordableFast and without electricity
What you get
Handy Helpers
Templates and stencils
http://www.uistencils.com
http://tinyurl.com/2cbebjb
Technique matters:Design Studio
Libraries and Toolsfor Responsive and Mobile
Prototyping
Balsamiq
•Wide range of standard elements• Static desktop application or webapp• Templates and Snippets
• Everything inside the desktop
Balsamiq
Bootstrap
•Widely adopted (also for productive sites)• Library with CSS and Javascript Files•HTML has to be copied individually from Bootstrap site•Not documented well in all respects.
• No ability to define Templates/Snippets, (if the navigation changes, it has to be adapted on every single page)
• No mobile functionality like iOS Tabbars, „Save to Homescreen“ etc.
http://maker.github.com/ratchet/
Ratchet
Ratchet
•Mobile only, mobile optimised elements• Library with CSS und Javascript Files•HTML has to be copied individually from Ratchet site •Having a good editor is essential.
• No ability to define Templates/Snippets• No mobile functionality like iOS Tabbars, „Save to
Homescreen“ etc.
Protostrap
Code: https://github.com/liip/ProtostrapDemo: http://preview.liip.ch/Protostrap/
Protostrap•Based on Boostrap• Library with CSS and Javascript Files• PHP Files to hold templates and snippets together•Documentation and examples in the package•Optimized for Mobile:
- fast tap recognistion- iOS Tabbar for Prototyping of native apps- „Add to home“
•Basic PHP knowledge needed•Not pretty, but functional!•Can get messy.
Do yourself a favor:Learn how to code.
Livetyping: http://livetyping.capcloud.com
GUI Editoren
JETSTRAPWebbased WISIWYG Editor for Bootstrap Components
http://jetstrap.com
JETSTRAP/EASEL• Suitable wenn responsive is important• No programming skills needed• Tied to Bootstrap/Easel• You can generate HTML and CSS• Simple Base when you „need something fast“
• No ability to define Templates/Snippets• No mobile functionality like iOS Tabbars, „Save to
Homescreen“ etc.
Fireworks & TAP
http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
Touch Application Prototypes
• Prototyp In Fireworks erstellen• Seiten mit Hotspots verlinken• Als Dreamweaver Bibliothek exportieren• Auf Server laden• „Build“ Panel aufrufen und den eigentlichen
Prototypen generieren• Prototypen im Mobilen-Browser anschauen.
Fireworks & TAP
Testing
LiveView Screencaster
Preview Prototypes via WiFi/USB on the devices
Android Design Preview
Previewers
Reflector
Reflector is an AirPlay mirroring app for Mac / PC to display the screen of iPhones on a desktop.
Reflector let‘s you record the iPhones screen.
http://reflectorapp.com
UX Recorder
Record users that are testing a Website.Sound, facial expression and gestures are recorded as well
WTF?
http://www.uxrecorder.com
Practice!Chapter 3
1. Sketch up on Paper
2. Stitch up with Prototype on Paper
An app for hikers that helps them solve problems with
their bike while on the road.
Bicycle Hiking Companion
I want to get instructions on how to fix a problem.
I want to get professional help.
User Stories
Top Related