User Centered Mobile Web DesignPresentation Transcript
User Centered Mobile Web Design 04-17-2012 | BEA Yvette Shen Assistant Professor James Madison University School of Media Arts and Design
BACKGROUND Landscape of web browsers changed. User expectations also changed. OLD NOW NEXT
THE PROCESS deﬁne users plan design evaluate build
DEFINE Understand and identify core problems Persona Scenario
DEFINE Persona Create a short list of speciﬁc attributes for the most common audience types. Rank the importance of each persona in terms of project needs and goals.
DEFINE Scenario Use ﬂowchart diagram to identify speciﬁc patterns in how users interact with information design. Research current industry and mobile market trends.
PLAN Identify possible solutions Context Message
PLAN Message What are you trying to say about your mobile site visually?
DESIGN With mobile considerations iconography Graphics Screen smallsub-pixel based landscape Typography Orientation sans-serif portrait new gestures: tapping/pull-down simpler Structure Interaction ﬁnger friendly“content ﬁrst, navigation second” different form interaction content ﬁrst
DESIGN Tips Content Check Make it modular Always be optimizing Take advantage of technological features
BUILD Develop functional codes Responsive Web Design Use ﬂexible and ﬂuid layouts that adapt to almost any screen.
RESPONSIVE WEB DESIGN Core concepts A ﬂexible grid-based layout that uses relative sizing Media queries and Meta viewport Flexible images and media, through dynamic resizing or CSS
EVALULATE Review and reﬁne Prototype EARLY and OFTEN through the process. paper digital sketch wireframes comp
EVALULATE Validate mobile site W3C MobileOKChecker http://validator.w3.org/mobile/ mobiReady http://ready.mobi/launch.jsp?locale=en_EN Mobile Emulators
CONCLUSION An iterative user-centered design process can help create the best mobile experiences for the users. Resources Ethan Marcotte, Responsive Web Design, A Book Apart Luke Wroblewski, Mobile First, A Book Apart