designing for mobile: ux for designers and developers

Click here to load reader

Download Designing for Mobile: UX for designers and developers

Post on 14-Apr-2017




6 download

Embed Size (px)


  • mobile web design and developmenthell is other browsers(with apologies to Jean Paul Sartre)Hat tip to Brian Fling whose work is the basis for much of this presentation

    Mobile Design and Developmentprepared by Kelley Walker, Sr UI Developer, Trader Media*

  • *

  • *

    Total and complete gratitude, heartfelt thanks, big props to: Jayde Ann Ly to whom I bow and say: I am not worthy! I am not worthy! Also, props to Erica Byrd for her generosity with her time and feedback. Also: Damir Tresno, Sam Christy, Jon Kranz, Sarat Nagabhirava, Phillip Billups, Dan Allen, and everyone in TOLops for putting up with my Snoopy happy dancing upon first seeing our mobile site.

  • *

  • *what are we here for?find out what the fuss is about?how can we take advantage of mobile web opportunities?how to create mobile user experiences?to learn how to code for mobile web apps?make sense of a new medium?

  • *what is the mobile web?According to Brian Fling, its a collection of web sites designed for viewing with mobile devices Accessed via the Web, just like desktops and laptopsBy the end of this 2010, the worlds population may regularly access the mobile web

  • *everybodys doing it"Mobile is the fastest and cheapest way to reach the largest number of people. There are billions of peoplewho still don't have access to the Internet. And we think mobile presents the biggest opportunity to get them on the Internet.

    Chris Sacca, head of special initiatives at Google

  • *mobile issmall viewportflaky connectivityhighly variable contextlimited text input limited interactivityUI takes up the entire viewportdifficult to multitaskeasy to get lost

  • *mobile is different from other mediapersonalizedalways on always carriedbuilt in payment channel point of thoughta mass medium that encompasses previous mass media: print, music, film, voice, television, internet

  • *contextual webdesign and development for the mobile web is about the context within which the user experiences the mobile web.

  • *contextthe setting for an event, idea, enunciation, or action.

    matters to understanding events, ideas, words, and action.

    the way someone interacts with the web: where she is, who shes with, what shes trying to do, etc.

  • *designing and developing for contextdevelop and design for many contextscreate solutions based on user goalsaccount for constraints of the technologyconsider physical context as well as culture, ideational, motivational context

  • *

  • *we already know about triangulationuser experience design

    alignment of user goals with business objectivesensuring user goals inform feature specs and the interaction experiencemost important part of product development

  • *what is mobile design?creation of user experiences for the mobile context doesnt start with photoshopstart with paper prototypes/wireframes and reproduce context

  • *

  • *

  • *the question: go mobile or notnot every site makes sense for mobileknow what youre buying and what youre spendingask hard questions: does the content belong on a mobile site? will people use it?

  • *so, youre going mobilePhoto credit: Crystl @ Flickr

  • *mobile design: poka yoke

  • *poka yokelimit user error also known among sysadmins as PEBKAC errorspoka yoke (usually pronounced Pokey Yokey) is a Japanese principle for fail-safing or mistake-proofing a productexamples?

  • *

    ThinkGeek.coms Gift for Sys Admins

    For more info, see BOFHs at:Simon Travaglias BOFH Archives (1990 2001)

  • *design for best possible experiencetent pole design is about reaching the widest audience by offering something for everyonerisks of tent pole design too highinstead: design for the best possible experience

  • *information architectureeither/or choicestradeoffs: no right or wrong answer; depends on contextpare navigation to five categoriesminimize levels of navigationup to 10 links (accesskeys)reorder the site by priority of category for the mobile context

  • *elements of mobile designcontextmessagelook and feellayoutcolortypegraphics

  • *contextwho are your users: what do you know about them?what can you predict about behavior based on their needs and goals?context of use: whats happening around or near the user?when are they using mobile devices? at home? at work? with lots of time? with little? where are your users: public/private; home/work; stationary/mobile; solitary/with friends, day/night?why are they using mobile? Whats the value to them? Productivity, entertainment, information?how do they use the device? portrait/landscape; holding/carrying/pocket?

  • *messagewhat is the overall mental message you want for the customer?created through both text and imagery textual and visual design (Michael Cummings: users conscious of text first, then the visual design)if you look at the design from distance, how do you feel, react, respond?does the design inspire action/passion, boredom/interest, confusion/clarity?

  • *

    Use flings slides from 155 to illustrate different meanings, feelings, emotions, etc generated by different designs. Maybe take screenshots.

  • *look and feelwhat kind of appearance: clean, vibrant, energetic, laidback, cool, western, modern, clam, rustic, earthy, sleekas mobile designers, were still learning how to convey look and feel through mobile

  • *layouthow do you want user to visually process the page: top bottom? left right?Fling: the structural and visual components of layout often get merged together creating confusion and making design difficult to produceuse barebones wireframes to separate layout from visual design so as not to confuse the two

  • *Source: Brian Fling, Mobile Web Design and Development

  • *colorcolor helps convey look and feel, brand, and can enhance or hinder usability, as well as enjoyment and engagementhowever, color is the most difficult most difficult aspect of mobile web developmentlimited color depth can create banding or unwanted posterization of images

  • *

    source: Brian Fling, Mobile Web Design and Development. Photo credit: David Rahardja

  • *typographytype is rendered in subpixelsa subpixel is a division of each pixel into a RB or G unit at a microscopic levelthis allows for greater level of anti-aliasing for each font glyph or characterfont support is better than it used to be, but still have limited number of mobile mobile-safe fonts

  • *graphicsaid or establish visual experiencesupplement the look; should be used sparinglyimages displayed inline with the texticonographyphotosbranding images

  • *screen sizesmobile phones come in all shapes and sizeshell is other browsers even though all these choices are great for consumers (maybe)difficult to create the best possible experience since there are so many devicesuser can control portrait or landscape

  • *

  • *Flings 3Cs of mobile design & devCOSTCONTENTCONTEXT

  • *costif you dont design and code your siteresponsibly:

    the user could pay to view bloated code and bad designslow page loads and impatient users who hit the back button.

  • *contentconsiderations such as navigation, image size, page weight, and javascriptsimilarly, the bones of the content - the XHTML markup and CSS - need to be parsimonious, well-formed

  • *contextwhat does your web site add to the users mobility. how does the site add value to their physical context? what is the context within which people use your site?

    bus? train? subway? boat? airport? motorcycle trip? RV trip? apartment hunting? house hunting. job search? school? vacationing? traveling?

  • *users: now, now, nowmobile users:in the now:

    repetitive nowbored nowurgent now

    which one are you?

  • *repetitive nowthese users do the same thing over and overdesign: keep clickness lowdev: use accesskeys and tabindex

    q: how can our sites meet the context and needs of these uers? can we? should we?

  • *bored nowthese users have a few minutes to sparepotentially lucrative audience: time to kill, money to spend or willing to spend because they are boreddesign: enhance site stickiness

    q: how can our sites meet the context and needs of these users? can we? should we?

  • *urgent nowproblem or crisisdirections, where to eat, clean restroom, flight times, traffic conditions, weatherdesign: keep clickness low; findable, easy to readdev: use accesskeys and tabindex

    q: how can our sites meet the context and needs of these uers? can we? should we?

  • *Photo credit:

  • *Photo credit: W3C

  • *Photo credit: from an article about Illinois bill to ban cell phone use while walking.

  • *Photo credit: from Hot Hardware, an article about a survey that found mobile use while driving isnt unsafe:

  • *Photo credit: Christian Crumlish

  • *

  • *from Pangaea to Balkanization"The Pangaea of the Web is gone." - Leland Rechis, UX Designer, Google

    there is no one mobile standard must optimize for a variety of devices, browsers, languages, carriers, countries, cultures, and contexts of mobile use

  • *complexity of mobile websh