tour of mobile usability testing apps and services
DESCRIPTION
Ok, you have been asked to go off and research how to design/architect a mobile user experience. After the initial excitement and learning all about mobile UX, you decide to jump head-on and start designing. Then comes the realization, how are you going to test the designs in context of a mobile device? Do you have to package everything in an app or is there a way to test preliminary designs? What tools are available? Which works for what Mobile OS? When to use a particular tool? Can, we, designers use it without developer help?In this presentation I have various testing app/methods/tools/services available specifically for Mobile, for which OS, when to best use them during design process, cost associated with some of the tools, and what are pros & cons of each of them.TRANSCRIPT
ì Whirlwind tour of Mobile Usability Testing Apps & Services
Vijay Hanumolu @vijju2k
Disclaimer
@vijju2k
Mobile Operating Systems
@vijju2k
Responsive Design
@vijju2k
Terminology
Courtesy Pizza Kitchen @vijju2k
ì Conceptual Design
@vijju2k
Conceptual Design iOS Stencils
Courtesy UIStencils.com @vijju2k
Conceptual Design Android Stencil
Courtesy UIStencils.com @vijju2k
Conceptual Design Windows Stencil
Courtesy UIStencils.com @vijju2k
Conceptual Design Sketchpad
Courtesy UIStencils.com @vijju2k
Conceptual Design Sketchbook
Courtesy UIStencils.com @vijju2k
Conceptual Design SHckies
Courtesy UIStencils.com @vijju2k
Conceptual Design Paper Prototype
@vijju2k
Conceptual Design Paper Prototype
@vijju2k
ì Detail Design
@vijju2k
Detail Design Blueprint
hJp://www.groosoM.com/blueprint/ @vijju2k
Detail Design Blueprint
@vijju2k
Detail Design Blueprint
@vijju2k
Detail Design Blueprint
@vijju2k
Detail Design Blueprint
@vijju2k
Detail Design Blueprint Blueprint is a mockup app for iPhone and iPad applicaHons.
ì Highlights ì Pixel perfect alignment ì Import images ì ProperHes for each UI element ì AcHons for each UI element ì Supports tap (leM, right, up, down) ì Support Swipe (leM, right, up, down) ì Highlevel story board ì Dropbox integraHon ì Also Export to PDF/PNG
@vijju2k
Detail Design App Cooker
hJp://www.appcooker.com/ @vijju2k
Detail Design App Cooker
@vijju2k
Detail Design App Cooker
@vijju2k
Detail Design App Cooker
@vijju2k
Detail Design App Cooker App Cooker allows users to Design, Mockup and Prototype mobile applicaHons directly on your iPad
ì Highlights
ì Full blown graphics editor
ì Support upto 200 screens
ì Support upto 99 icons
ì Supports export/import directly to Dropbox
ì Supports both orientaHons
ì Icon editor
ì Pricing esHmates
ì In future Appcoker is looking into ways where your mockup created in Appcooker can be exported to xcode – COOL – if it works. Similar to FlashCatalyst concept – bridging gap between designer and developer.
@vijju2k
Detail Design Too much Hme on hand
@vijju2k
Detail Design Adobe Device Central
@vijju2k
Detail Design Adobe Device Central
@vijju2k
Detail Design Adobe Shadow
hJp://labs.adobe.com/technologies/shadow/ @vijju2k
Detail Design Adobe Shadow Adobe Shadow is an inspecHon and preview tools that allows designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices
ì Highlights ì MulHple iOS and/or Android devices at once ì Responsive web design tesHng ì Support OrientaHon
ì Support scrolling and zooming ì Support private user interacHon with the content (doesnot affect other parts)
ì Works with only Chrome
ì Make sure you are on the Same network and NOT using a VPN
@vijju2k
Visual Design Live View
hJp://www.zambe`.com/projects/liveview/ @vijju2k
Visual Design Live View LiveView is a specialized remote screen viewing applicaHon intended as a tool to help designers create graphics for mobile applicaHons, it has also proven to be useful for creaHng quick and dirty simulaHons, demos, and experience prototypes. ì Highlights
ì InteracHve mode – enables touch to control the mouse on the screen
ì 1 device at a Hme when different form factor ì MulHple iPhones or iPads can be connected at the same Hme ì AnimaHons are slow
ì Different opHons like loosless/high quality/medium quality/low quality ì Ability to rotate the viewer window on Mac
ì Support for reHna
ì Used successfully to do demo of a clickable prototype using keynote and clickable PDF – easy light weight
@vijju2k
Visual Design Bjango Skala
hJp://bjango.com/mac/skalapreview/ @vijju2k
Visual Design Bjango Skala Skala Preview is the fastest way to send pixel perfect, color perfect design previews from Mac to iPhone or iPad
ì Highlights ì Connect mulHple iOS devices at once ì Very responsive – images changes in realHme as the source file is
changed in Photoshop ì Also has different modes to sent images (live preview, or via
clipboard) ì Color blindness test ì Support for Scrolling and zooming on the device ì OrientaHon support – portrait and landscape ì Email/Tweet/Save to device ì You can even open up a previously saved photo and view it
@vijju2k
ì App Testing
@vijju2k
MAM TestFlight
@vijju2k
App TesHng Android
@vijju2k
Detail Design got 5 min?
Courtesy Kronos Inc @vijju2k
ì User Observation
@vijju2k
Usability Study Mods
@vijju2k
Usability Study Mods
@vijju2k
Usability Study Tobii Mobile Eye Tracking
Courtesy Tobii Technology
hJp://www.tobii.com/ui/pages/productoverviewpage.aspx?id=669&epslanguage=en
@vijju2k
Usability Study Looxcie Cam
hJp://looxcie.com/ Courtesy Looxcie Inc @vijju2k
ì Services
@vijju2k
Services UserTesHng
@vijju2k
Services MobileUserTests
@vijju2k
Services Apphance
hJp://www.apphance.com/ @vijju2k
HIT Crowd sourced Micro labor
hJps://www.mturk.com/mturk/welcome hJp://crowdflower.com/ @vijju2k
HIT Crowd sourced Micro labor
Courtesy Amazon.com @vijju2k
ì Others
@vijju2k
Others proto.io
hJps://proto.io @vijju2k
Others Responsinator
hJp://www.responsinator.com/ @vijju2k
ì Demo Time
@vijju2k
App/Services iOS Android WinMo Paper prototyping (Stencils/Sketchpad/SHckies/etc) X X X
Blueprint X
Appcooker X
Adobe Device Central (pre CS6) X X X
Adobe Shadow (web based app) X X
LiveView X
Bjango Skala X
got 5 min? X X X
TestFlight X
NaHve Android X
Mods (Mr.Tappy/Mod 1000/etc) X X X
Tobii Eye wear X X X
Looxcie Cam X X X
UsertesHng.com X X
apphance X X X
proto.io X X
Responsinator (web based app) X X
Support Matrix
@vijju2k
Thank you!! Vijay Hanumolu @vijju2k
@vijju2k