Re-Learning UX: Going Mobile From Web

BROWN DIRT USER EXPERIENCERE-LEARNING UX : GOING MOBILE FROM WEBADAM POLANSKY Twitter: @AdamtheIA

#browndirt

RE-LEARNING UXGOING MOBILE FROM WEB

BROWN DIRTUSER EXPERIENCE

BROWN DIRT USER EXPERIENCERE-LEARNING UX : GOING MOBILE FROM WEB

WHOAM I?

WHAT?Information

ArchitectDesigner

Mobile StrategistKvetcher

AuthorBacon Lover

LecturerDad

SpeakerCook

Military Veteran

WHERE?

Bottle RocketTravelocity

Rare MediumAmerican

ExpressRoyal Bank of

CanadaTexas

InstrumentsRadio City

EntertainmentStarwood

HotelsCorporate

ExpressIntel

Akamai


UPON AROCKET…

ONCE


IF YOU HAVEN’TWORKED

ONMOBILEAPPS


HOW

READY ARE YOU?

IF YOU HAVEN’TWORKED

ONMOBILEAPPS


“TOTO

I HAVE A FEELING

- DOROTHYNOT IN KANSAS”

WE’RE NOT INKANSASANYMORE


THE FIRSTCLUE


ATTACHMENT

CONTRASTS

WEB & MOBILE


PHYSICALITY

CONTRASTS

WEB & MOBILE


AWARENESS

CONTRASTS

WEB & MOBILE


INTERACTION

CONTRASTS

WEB & MOBILE


INTERACTION

CONTRASTS

WEB & MOBILE


LAYOUT

CONTRASTS

WEB & MOBILE


CONTRASTS

WEB & MOBILECONTEXTCONTENT


MORE

USABILITY

IMPORTANTTHAN EVER!


PRACTICALACTIONABLE

SIMPLEQUICK RESULTS

PA

SQ


HEURISTICANALYSIS


REMOTETESTING


GUERILLAUSER

RESEARCH


…the iPad is that app. Switch to another app and the iPad becomes that app. If that's not magic, I don't know what is.

- ADAM ENGSTTidBITS 5 APR,

2010


CAN I DO?

WHAT ELSE


THE READING


THE READING


DESIGN ORBUILDSOMETHING


ANY

SO…THOUGHTS?


THANK YOU

[email protected]

@adamtheia


APPENDICES

BOOKSMOBILE FIRSTLUKE WROBLEWSKIhttp://www.abookapart.com/products/mobile-first

TAPWORTHY – DESIGNING GREAT iPHONE APPSJOSH CLARKhttp://shop.oreilly.com/product/0636920001133.do

MOBILE FRONTIER – A GUIDE FOR DESIGNING MOBILE EXPERIENCESRACHEL HINMANhttp://rosenfeldmedia.com/books/mobile-design/

SIMPLE AND USABLEGILES COLBORNEhttp://www.simpleandusable.com

THE MOBILE BOOKSMASHING MAGAZINEhttp://www.the-mobile-book.com


APPENDICES

TOOLSIOS HUMAN INTERFACE GUIDELINEShttps://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Principles/Principles.htmlANDROID USER INTERFAACE GUIDELINEShttp://developer.android.com/guide/practices/ui_guidelines/index.htmlTOUCH GESTURE GUIDEhttp://static.lukew.comTouchGestureGuide.pdf

INVISION – PROTOTYPING APPhttp://www.invisionapp.com

FIELDTEST – PROTOTYPING APPhttp://www.fieldtestapp.com


APPENDICESUSABILITY

HIBBITTS DESIGN - RESOURCE LISThttp://www.paulhibbitts.com/usability-ucd-ux-recommended-links-and-tools.html

BRAINSPARKS - UIE BLOG OF JARED SPOOL & COhttp://www.uie.com/brainsparks/

OPTIMAL WORKSHOPS – REMOTE TESTING TOOLShttp://www.optimalworkshop.com

USERTESTING.COM – REMOTE TESTINGhttp://www.usertesting.com

NIELSEN NORMAN GROUP – RESEARCH AND ARTICLEShttp://www.nngroup.com/articles/


APPENDICESHEURISTICANALYSIS



1.HEURISTIC DESCRIPTIONS2.RATING WORKSHEET



Mobile Touch-Screen Interactive Design HeuristicsEASE OF USE System Status Feedback – “The app kept me informed with appropriate and timely feedback.”The application should give evidence of anything that changes in the UI whether invoked by the user or the app. Speak the User’s Language – “The app used language and words that were familiar to me. I understood the concepts in the app.”An application should speak the user’s language with familiar words, phrases and concepts rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. Limit the use of jargon unless there is a reasonable expectation it will be understood in the context of the app. Recognition vs. Recall – “The app made all the information, images or controls visible when I needed them. I didn't have to remember content from previous screens in order to use it.”Make objects, actions, and options visible or easily discoverable. The user should not have to remember information from one part of the application to another.



Mobile Touch-Screen Interactive Design Heuristics – (Cont.)EASE OF USE Consistency and Standards – “The app was consistent in its appearance and language I was able to perform similar tasks in the same way.”Users look for patterns. Design conventions, navigation controls and interactions need to behave in consistent and similar ways. If general conventions exist for basic functions, are they followed or is there a good reason to depart from them? Flexibility and Efficiency of Use – “The app included affordances for either expert or novice users.”Advanced features should be optional and useful for speeding up usage and/or creating a better experience. Applications should enable immediate use for novices and short cuts or preferences for advanced users. Appropriateness for Device – " The app took advantage of my device capabilities.Does the application make use of hardware and software controls? Are keyboards, cameras and sensors integrated in logical and relevant ways? Does the UI take advantage of gestures, screen re-orientation and tappable controls vs. traditional web-controls? Are they easily discoverable?



Mobile Touch-Screen Interactive Design Heuristics – (Cont.)CONTENT & LAYOUT Streamlined Feature Set – “The purpose of the app was clear. It didn't seem overloaded with unrelated features.”Is the purpose of the application clear? Does the app do one thing extremely well or several things in a mediocre way? The apps with the highest adoption and retention rates are focused. They perform or support a limited, if not singular function very well. Aesthetic and Minimalist Design – “The app did not seem overcrowded with needless text, images or controls”Truer for mobile screens than the web; apps combine small screen real estate with the need to accommodate large touch areas. Applications may need new design patterns to work for both dynamics. Text, design elements and imagery must be considered carefully. (Consider the difference between the end of a cursor and the end of your finger)



Mobile Touch-Screen Interactive Design Heuristics – (Cont.)CONTENT & LAYOUT Content Organization – “The app was well organized. I could perform tasks and move between content areas without getting lost.”On mobile devices, deep hierarchies of information are difficult for users to navigate and make it hard to maintain a sense of place. Tiered indexes used to locate content can be annoying when users need to perform multiple searches in the same session. Sequences or steps may require multiple screens but informational content should not drill-down more than a few levels. Data Feeds – “The app made good use of real-time data or feeds.Mobile Applications are often used to reference data, like weather, news, friends social status, messaging, schedules or product inventories. Does the app integrate those feeds in logical and relevant ways?



Mobile Touch-Screen Interactive Design Heuristics – (Cont.)EXCEPTION SCENARIOS Easy to Escape – “I understood how to exit a screen if selected by mistake.”Users often choose functions by mistake. If it’s logical, does the application afford users a way to progressively return to previous screens including the main screen or menu in order to get back on track? Error Prevention – “I did not find errors that seemed needless or prevented me from accomplishing tasks. ”The best solution for error messaging is to eliminate the need for it in the first place. Does the application make interactions as foolproof as possible with validation or easy-to-understand controls? Help users Recognize, Diagnose, and Recover from Errors – “Error messages were clearly written and if possible, made it easy to recover and get back on track.”Error messages should clearly communicate the problem in plain language (no codes), the error cause if it’s relevant and a constructive recovery solution even if that means trying again later.



Mobile Touch-Screen Interactive Design Heuristics – (Cont.)EXCEPTION SCENARIOS

Support – “Support information was easy to locate and use. It provided clear solutions.”If it is necessary to provide help or documentation, that information should be easy to locate and use without causing detours that prevent the user from continuing their task.



Re-Learning UX: Going Mobile From Web

Documents

mobile frontier

web dorothy

learning polansky twitter

articles http

remote testing http

invision prototyping

fieldtest prototyping

touch gesture guide