SlideShare uma empresa Scribd logo
1 de 9
Baixar para ler offline
MOBILE DESIGN



           MOBILE DESIGN
           iPhone ap
           desig
                    p designer Jen Gordon desc
                ning for the smaller screen in
                                                  ribes the creative process be
                                               this specialist visual mastercl
                                                                              ass
                                                                                 hind


                                                                                                                 seems like a no-brainer. Wh
                                                                                                                                                 ether applied to designing



                                               O
                                                                                years, the web design                                                                          s,
                                                         VER THE LAST few                                                                        mobile operating system
                                                                                              e become           sites, GUIs, apps, or indeed                  s on screen size
                                                                                         s hav                                                  and demand
                                                         and mobile design world                                 there are new constraints
                                                                                       than ever before.                                            embraced.
                                                         more closely entwined                                    and    interfacing that must be                       for mobile
                                                                                                have been                              trate the creative workflow
                                               The cumbersom    e and clunky days of WAP                              In order to illus
                                                                            tha  t device technology has                                          don of iPhone app agency
                                               consigned to history now                                           design we’ve asked Jen Gor                                 some
                                                                              ine experiences on the                                            example-packed look at
                                               begun to offer genuine onl                                 ly      Clever Twist to give us an                                     bile
                                                                            App   le’s iPhone has probab                                           way we’ll look at why mo
                                               move. Love it or loathe it,                    ent around a         of the key facets. Along the                    s associated
                                                                                and excitem                                                       ht the nuance
                                                done most to spark interest                                        design matters and highlig
                                                                                rnet service and certainly               h producing native and web
                                                                                                                                                         -based mobile
                                                ma  ss consumer mobile inte                      captured          wit
                                                defined the ma  rket for mobile apps. It has                       applications –    from concept to design.
                                                                                                          our
                                                                              mode of interaction with                  There’s also time to get a
                                                                                                                                                    word with market
                                                our imagination for a new                       of smartphones                                                        successful
                                                handsets, and  spawned a new ‘4G’ series                            experts and des    igners to get their take on
                                                                                  e to push boundaries.                                           a brief look at the areas so
                                                 or superphones that con
                                                                            tinu                                    mobile projects and even                                    such
                                                                            ’s latest BlackBerry and the                                          dern mobile experience,
                                                 Throw the Palm Pre, RIM                                   have     synonymous with the mo
                                                                               On  e into the mix and you
                                                 brand new Google Nexus                                   te the    as icon design.
                                                                             bile phones set to domina                                               ter time to make the leap
                                                 a formidable army of mo                                                  There’s never been a bet                                ta
                                                                                                                                                  it guarantees your conten
                                                 scene for years to come.                     igners? Why            into mobile design and if                    ’t afford to ignore
                                                     So what does this mean for
                                                                                     web des                                                      definitely can
                                                                                                             and     brighter future then you
                                                                                   audiences are widening
                                                  sho uld we care? Well, if web                             n it      it any longer!
                                                                               a new area of demand the
                                                  we can apply our skills to




               th ow ur/c or
        Aboutdon,e anethreative director                                                                              Nexus One                                    iPhone
                                                          ry
         n Gor
         Je
                          shop Clever Twist,
         of mobile design girls lyrics to
                            r                   Black Ber
         enjoys teaching he d blogging
                           s, an
          Dolly Parton song at www.
          about mobile  design
          mobilelove.org.




        Palm Pre




          34 | Web Designer




034-041_WD_167.indd 1                                                                                                                                                           22/1/10 16:42:27
In years past, design for mobile has not been a hot topic in the design commu
            only a few years old, the DOS screen aesthetic abounds. However, since the nity. In smartphones
                                                                                                                                                                               MOBILE DESIGN
            smartphones, interest in the mobile GUI (graphical user interface) has madelaunch of touch-screen
            Designers are looking for ways to break into this exciting new field of designa radical turnaround.
            article is to define why design for mobile matters, and highlight the nuance . The purpose of this
            and web-based mobile applications.                                           s of designing native


            Designing for Web vs. Mobile
           Unless you’ve been living under a rock, you’ve probably heard
                                                                                        • Direct manipulation of content. On touch-screen
                                                                                      devices, users have the ability to manipulate objects in a
                                                                                      much more tangible manner than on a desktop application.
           that designing for mobile is different than designing websites             There is no intermediate device like a mouse, only direct
           or desktop applications. And the differences are multiplying               touch with the fingers that allows users to interact.
           rapidly as more devices with additional functionality hit the                • Feedback based on time and location
           market. So why does design for mobile matter? Let’s take a
           look at the differences between web vs. mobile to get a better
           understanding of how users interact with each platform.                    Design Considerations
                                                                                      There are many unique design considerations when designing
                                                                                                                                                             The US A Toda
                                                                                                                                                             example of a hy
                                                                                                                                                                              y app is a gr eat
                                                                                                                                                                             brid app
                                                                                      for mobile, and those considerations start with knowing the
           Desktop                                                                    hardware and operating system you’re working with. You don’t

                                                                                                                                                               Web vs. Native Apps
           For the purposes of this article ‘desktop’ refers to laptop/               have to purchase lots of mobile devices, instead visit the app
           desktop-based websites, web apps and applications. We don’t               store for the respective operating system (eg iTunes App Store,
           think of this hardware as interactive in the same way as mobile.          Android Market found on Android handsets). From there take a              What’s the difference between web-based,
           We’re not going to pick up and tilt our monitors. In fact the tactile     look at apps that have a solid design aesthetic. If a developer has       hybrid and native apps, and why does it
           interactions are typically limited to:                                    spent time on the GUI, it’s likely they also spent time on usability      matter to designers? First let’s address the
                                                                                                                                                              “what”. Web-based mobile applications are
                                                                                     and flow. The idea in mobile is not to convert but to create. Take
                                                                                                                                                              built using your standard HTML, CSS, and
              • Mouse clicks                                                         lessons from mobile apps that have done an elegant job of
                                                                                                                                                              JavaScript while native apps use the software
              • Keyboard                                                             porting their desktop web presence to mobile.                            development kit and native programming
              • External tablet and pen                                                                                                                       language for that operating system. Hybrid apps
              • Microphone input                                                                                                                              are a mixture of the two, for example an iPhone
              • Speaker audio output                                                 Design for the Mobile Context                                            app such as USA Today pulls in dynamic web
                                                                                      The dictionary defines context as “the parts of a discourse that        content while utilising C+ to code the shell that
                                                                                     surround a word or passage and can throw light on its meaning”.          pulls in that data.
          Mobile                                                                     In more practical terms, context enhances our experience or                   Who cares, you might ask. Why does it
                                                                                                                                                               matter? Like it or not, developing for mobile
          Mobile is a completely different animal. It’s people-centric. After        understanding of people, places, things and situations. Providing
                                                                                                                                                               requires some technical knowledge of the
          all, think of what we call it – a handset. It fits in our hand, our        context takes apps from good to great.                                    platform you’re developing for in order to create
          pocket, next to our wallet. It’s a phone, it’s social, it’s personal. It      For example, two of the most unique features of mobile                the graphics to the proper spec. Additionally it
          has a ton of interaction points:                                           devices is the ability to detect time and location. Planning for         helps to know the capabilities of web vs. native
                                                                                     ways to take advantage of this data is essential. Let’s say you          to understand what functionality you can design
             • On-screen touch keypad                                                want to build a coffee finder app that lists all coffee shops            for and which you cannot. When considering
             • Gestures                                                              within a ten mile radius of your location. Sounds like a useful          hybrid apps know you can combine the
             • Mic input that can result in an immediate action                      application, but how can you make it better? The device already          functionality of both.

             • Sound feedback upon interaction                                                                                                                   Web-based apps allow usage of most
                                                                                     knows the exact time when the user is searching, why not
                                                                                                                                                              functions that would typically work in desktop
                                                                                     display only the coffee shops that are open?
                                                                                                                                                              browsers. However, they are not able to
                                                                                                                                                             respond to hardware inputs the same way a
                                                                                                                                                             native app can. For example, they do not allow
                                                                                                   Create an Elegant Solution on                             usage of the accelerometer (which detects

                                                                                                   a Small Screen                                            shaking and positioning of the phone), audio
                                                                                                                                                             input via mic, robust audio feedback options,
                                                                                                    Mobile device screens are smaller than desktop           camera/video integration, or the native
                                                                                                    monitors, but what does that really mean? Size           animation capabilities.
                                                                                                    things down? Squeeze them in? The temptation                  Native apps allow all of the above items but
                                                                                                    may be to make things simply ‘fit’ into a smaller        cannot connect to web-based content. The app
                                                                                                    screen, when just the opposite is true.                  is static until it’s updated and re-submitted to
                                                                                                        Even when you’re trying to communicate               the App Store. Many apps are going the hybrid
                                                                                                                                                             route to allow dynamic content to flow into a
                                                                                                     many things to the user, less is more. Your
                                                                                                                                                             native shell.
                                                                                                     primary goal from a design standpoint is to
                                                                                                     create a simple, elegant solution that’s easy


                                                                                                                                                            “ Like it or not,
                                                                                                     to use.


                                                                                                     Localisation
                                                                                                     Mobile apps are unique with regard to                  developing for
                                                                                                                                                            mobile requires
                                                                                                     worldwide proliferation. Many app developers
                                                                                                     are targeting global markets for their apps and


                                                                                                                                                            some technical
                                                                                                     guess what? This impacts design. For example,
                                                                                                     your app includes in-app purchasing for
                                                                                             global app stores. Your checkout button looks great
       Above : An extreme example of
         an app that HAD to simplif y
                                                                                             when you mock up “Buy now” in English, but how
                                                                                              big does that button need to be when the phrase is            knowledge of the
                                                                                                                                                            platform you’re
                                                                                              translated to “покупка теперь” ?
          Right : The New York Times
      iPhone app with simplif ied format
                                                                                               Designing for Mobile Interaction
                                                                                                Unlike design for desktop websites and/or                   developing for”
                                                                                                applications, the variety of ways you can interact

                                                                                                                                                                                         Web Designer | 35




034-041_WD_167.indd 2                                                                                                                                                                                       22/1/10 16:43:05
MOBILE DESIGN
                                                                                                                                                                                                                                device
                                                                                                                                                                                     with and get feedback from a mobile
                                                                                                                                                                                                                                 terpart.
                                                                                                                                                                                      radically differs from its desktop coun
                                                                                                                                                                                       Mobile apps   aren’t just pretty pictures, you’re
                                                                                                                                                                                                                   ning for mobile is a
                                                                                                                                                                        developing a piece of software. Desig
                                                                                                                                                                        combination of interactio    n, product/industrial and graphic
                                                                                                                                                                                                                      ile touch-screen device
                                                                                                                                                                        design. Think about all the things a mob
                                                                                                                                                                        can react to: touch, shak  ing, tilting, vibrating, audio input and
                                                                                                                                                                                                                    With these elements,
                                                                                                                                                                        feedback, location and time tracking.
                                                                                                                                                                        design takes on an entir   ely new dimension. It’s your job as a
                                                                                                                                                                                                                         concepting how an
                                                                                                                                                                         designer to consider these features when
                                                                                                                                                                         app will work.



                                                                                                                             you speak. Tons of fun…
                                                                                                                                                                                                    ity
                                                                                                                                                                         Designing for Scalabilhave a user base are destined to
                                                                          Mouth Off moves illustrated mouth s to the words                                                      products, apps that
                                                                                                                                                                         Like most
                                                                                                                                                                                                                time. Feature requests are
                                                                                                                                                                         change in some way or another over
                                                                                                                                                                         made, bugs reported and content      needs to be added, among
                                                                                                                                                                                                                    plans for the app and
                                                                                                                                                                         other things. Thinking about long-term
                                                                                                                                                                         anticipating features that will be requested down the road can
                                                                                                                                                                                                                  app later. This applies to
                                                                                                                                                                         save you a lot of time re-designing the
       Mobile technology                                                                                                                                                  both utilities and games. A good   example is the casual game
                                                                                                                                                                          Mouth Off. When the app initially launc
                                                                                                                                                                                                                   hed, they only had one
                                                                                                                                                                          set of mouths to choose from, the   Signature Mouths. As the
                                   tor
       We speak to Andy Betts, edi                                                                                                                                                                                accommodate for those
                                 ,                                                                                                                                        app added more mouths, they had to
       of Smartphone Essentials
                                                                                                                                                                          additions in the layout.
       for his view on how the new
       generation of devices is
       impacting on the way we
                                 view
                                                                                                                                                                          Designing to Help Users HelpisThemselvan       es
        mobile interaction                                                                                                                                                                                           ide
                                                                                                                                                                                 application design, the goal to prov
                                                                                                                                                                          In mobile
                                                                                                                                                                                                                      predicts the next step and
        The advent of the iPhone
                                       turned                                                                                                                             application that thinks for the user. It
                                                                                                                                                                                                                      to get there. Providing a
        conventional wisdom abou
                                         t mobile                                                                                                                         provides simple and implicit controls
        devices on its head. Before
                                         2007 each                                                                                                                         ‘help’ screen or ‘how to   use this app’ screen should set off an
                                                                                                                                                                                                                      tecture, flow and control
        generation of mobiles simp
                                          ly had to be                                                                                                                     alarm in your brain that the app archi
         smaller yet more powerful
                                         than the last,               Postage makes it easy to send                                                                        labelling needs rework.     To illustrate the idea of being implicit
                                                                                                                                                   s you what to do
         but Apple’s approach brou
                                          ght the user
                                                                      cute picture cards to friends                 Subtle in-line call-out tell                            and intuitive let’s take a look at the Posta
                                                                                                                                                                                                                          ge app. It is a prime
                                                                                                                                                                                                                                                lot
         experience to the fore, and
                                          put the screen
                                                                                                                                                                            example of an app that     could be easily bogged down with a
                   focal point of the hardware
                                                   .
                                                                                                                                                                                                                           but instead has a fluid,
          as the
                                                 menus                                                                                                                      of controls, text and navigation blunders,
               It was revolutionary. Endless
                                            replaced                                                                                                                        organised, intuitive flow.
          and nested submenus were
                                           built around
          by a more human interface
                                              entirely
           a series of gestures that were
                                              pinching:
           intuitive. Touching, swiping,
                                            ld use when
           the same gestures you wou
                                            ucts sat on
            working with physical prod
                                                      ely
            your   desk, and producing an entir
                                           the software
            holistic experience where
                                               in unison.
            and hardware were working
                                              e works in a
            Every function on the phon
                                              a part of the OS,
             uniform way, whether it be
             interacting with     the web or using one of
             the apps for the platform.
                                                       era
                   The change ushered in a new
              of smar    tphones, where devices like
                                            rphone’ the
              Google’s self-styled ‘supe
                                             spired Palm
              Nexus One, the iPhone-in
                                                  e replaced
              Pre and RIM’s BlackBerry rang
                                                     leaders in
               tradi  tional names like Nokia as
               mobile inno     vation.                                  And then it fad es out                               You go into many levels of functionality
                                                   s likely to
                     Google’s Android OS look
                                                marketplace
                dominate the smartphone
                                                presents some
                in the years to come, but it
                                                                rs,
                not-insignfica   nt challenges to develope
                                                    s One is
                 however. Although the Nexu
                                               smartphone
                 Google’s vision of what a
                                                        Motorola,
                 shou   ld be, other big names like
                  Sony Ericsson    and Samsung also have
                                                     folio,
                  Android devices in their port
                                                platform is
                  and fragmentation of the
                                                 can currently
                  becoming a concern. You
                                                  running five
                   buy Android smartphones
                                                    with at least
                   different versions of the OS
                   four different screen reso
                                                lutions, meaning                                                                                                                                             The controls transition nicely and the GUI is rich!
                                                  design and
                    that compatibility in both
                                                      d cannot
                    functionality across the boar
                                                  way from the
                    be guaranteed. It’s a long
                     uniformity of the iPhone.
                                                                                                                                                                           The custom tab bar along the bottom provides
                                                                                                                                                                           image manipulation
           36 | Web Designer                                             The nav bar clearly implies what’s next




034-041_WD_167.indd 3                                                                                                                                                                                                                                     22/1/10 16:43:49
Types of Apps                                                                                                                                                MOBILE DESIGN
           There are many categories of apps in the App Store, which can be broken down
           types of apps. Know where your app falls, and it’ll help you establish proper     into four main
                                                                                         design boundaries.
                                                                                                                                                                         Ratio calculates your
                                                                                                                                                                         ingredient ratios for you
         Serious tools
            • Keep it clean
            • Establish a clear grid for alignment and layout
            • Avoid redundant controls
            • Get things out of the way of productivity
            • Use ‘implied’ graphics
            • Visually prioritise info using typography and colour


                                  Southwest Airline s uses icons, colour and a
                                   clear layout to help its customers take care
                                                                    of busine ss
                                                                                                                                            Colour, implied graphic s
                                                                                                                                help visualise the numbers quickly

         Serious Entertainment
         Have the same characteristics of Fun Games, but with added
         depth in virtual realities and role-playing.

           • Graphically rich, commonly have storylines to follow                                                        Fun Tools
           • Single screen, maybe one level deep at most
           • Efficiency focused, large buttons, legible from 5ft away                                                     • Moderately graphically rich
                                                                                                                          • Show path to productivity and flatten the hierarchy
                                                                                                                          • No more than two-to-three levels deep


                                                                                                                                                                                   Outside is a
                                                                                      Skies Of Glory recreates the
                                                                                                                                                                                   graphically
                                                                                      experience of being a WWII pilot
                                                                                                                                                                                   rich app with a
                                                                                                                                                                                   practical function.
                                                                                                                                                                                   Forecasting the
                                                                                                                                                                                   weather!
                                                                                      Kroll is a
                                                                                      storyline-based,
                                                                                      multiplay er game




                                                      Charadium is an interac tive,
     Fun Games                                         multiplayer game of mobile                                                                                                 Convertbot makes
                                                                                                                                                                                  conversions fun
                                                                          charad es
        • Intensely graphical
       • Fall outside of the standard operating system user
       interface
       • Move away from a hierarchical navigation
       • Get into playing game immediately
       • Multi-touch gestures
       • LOUD visual feedback
       • “Success” pop up or audio feedback “Yaay!”
       • Tell users when they do something right or wrong




                           Soft Freak Fiesta includ es uber-rich
                          graphic s and global multiplayer gaming
                                                                                                                                                                                Web Designer | 37




034-041_WD_167.indd 4                                                                                                                                                                                22/1/10 16:44:17
MOBILE DESIGN
                                                                                                                                                                                                                               e cases this can make
                                                                                                                                                        this you need to leave             strong static imagery. In som
                                                                                          for mobile devices,         fingers/thumbs. To add to                                                                                       that require
                                                        I absolutely adore designing                                                                                              ce       for long   er downloads, but on sites
                                                                                                                      ample room betw        een buttons to allow the devi                                                                  wait. If a
                                                        as it’s one of the few oppo
                                                                                      rtunities that you get                                                                               visual punch,    I believe it to be worth the
                                                                                                                       to pick up the user’s choi     ce accurately and make                                                                           lly
                                                                                       lution and don’t have                                                                                site is trying to sell som   ething that relies on visua
                                                         to work within a fixed reso                                                                    to be easily pressed. This
                                                                                               rent resolutions.       the buttons large enough                                                                               e or movie, then the site
                                                         to worr y about the issues of diffe                                                                      annoying hurdle,          rich media, like a videogam
                                                                                                             g         could   initially be interpreted as an                                                                the best of its ability.
                                                         This essentially allows you to create somethin                                                                      it allows      needs to showcase that to
                                                                                                                        but I personal   ly see it as fun challenge, and                                                                        design is
                                                          truly unique and bespoke
                                                                                        to the targeted device,                                                                      ,           The future   of mobile interface and web
                                                                                                                        you to create some reall      y sexy, made-to-measure                                                                             d
                                                                                            ing short of a dream                                                                             pretty exciting, as ever     since the iPhone introduce
                                                          and for a designer, this is noth
                                                                                                                        interfaces and designs.                                                                                 leading to an ever
                                                         come true.                                                                                             sing, it’s rare that         multi-touch technology, it’s
                                                                                         of iPhone games,                    Regarding mobile web brow                                                                       rience, and this is only
                                                             I’ve worked on a number                                                                                        dedicated        evolving interactive expe
                                                                                                                         companies are      willing to devote funds to                                                                           with
                                                         creating the core interface
                                                                                       and HUD elements,                                                                               r      going to grow    as time goes on. Couple this
                                                                                                                         mobile sites (other than      large companies with large
                                                                                        s you have to take into                                                                                                                 technology, allowing
                                                          and there are so many thing                                                                    case that I use some basic           the ever increasing leaps in
                                                                                                   a fat finger          budgets), so it’s often the                                                                            e processor-intensive
                                                          account.  Navigating an interface with                                                              ing to keep mobile              us to experience faster, mor
                                                                                                         have             rules in my design when need                                                                              some mobile
                                                          is worlds apar t from a delicate mouse. You                                                                     nce on heavy        expe   riences; we truly are in for

                              lly Illustrated
                                                                                                                          browsing in    mind. I try to minimise relia
                                                                                      user’s hands are going                                                                                                      s! I for one cannot wait!
                                                          to think about where the                                                                                                             interactive treat

                 l Heald,teFu.com
                                                                                                                           JavaScript and Flash     and aim to make impact with
                                                                                       button is to their key
          Michaellyillustra d
                                                           to sit and how close each


          www.fu

                                                                                                                                                                                               le and usable controls.
                                                                                                                                                         content provides a way to design simp

         The Design Process
            If you are a designer, the good
                                                       Market Research
                                                       Depending on the type of app you’re
                                                       a good idea to
                                                                                               working on, it’s always
                                                                      do some market research around the
                                                                                                               type of
                                                                                                                                                         Mobile app site maps differ from webs
                                                                                                                                                         apps should not prese
                                                                                                                                                                                               ite site maps as mobile
                                                                                                                                                                              nt the user with multiple ways to get
                                                                                                                                                         one place. One door to one room, that’s
                                                                                                                                                                                                                      to
                                                                                                                                                                                                  it. Mobile users don’t
                                                                                           a lot from those who have
                   news about mobile apps is           app to be designed. You can learn
                                                                                               competition is doing and                                  have time to make a wrong move then
                                                                                                                                                                                                 go ‘back’ and try to find
             design is everything. Whether             gone before you. Find out what your                                                                the proper path.
                                                       think about how you can not only    make it better, but deliver a
                  you’re building a utility or a                                                antly surprised!
                                                       surprising twist. Users love to be pleas
             game, appearance has a great
          impact on usability. Cluttered or                                                                                                                                   Paper Pro will ping
                                                                                                                                                          Wireframing and case scenariostotydefine the content
             disorganised apps are difficult           Target Audienceaudience is very important in defining a                                                  cted from the
                                                                                                                                                          Data colle
                                                                                                                                                                                                   on the screens defined in
                                                                                                                                                          and controls that need to be present
           to understand, and hard to use.                    your target
                                                        Knowing                                                                                                         . From there you have to design a prelim
                                                                                                                                                                                                                    inary layout
                                                                                                                                                          the site map
                This isn’t to say that a ‘serious       design style, typography and layout.
                                                                                                Does your app appeal to                                                                     design elements. Define a grid,
                                                                                                                                                          that accounts for each of these
         tool’ should be embellished with               accountants or 18-25-year   -old gamers? Having this information                                                                           and design from the top
                                                                                                    onas’ is essential to                                 establish importance of information
               an overdone GUI. A great app             and diving even deeper to develop ‘pers                                                           down. Ergonomically speaking,      users hold touch-screen mobile
                  design balances appearance            understanding what     the demographic wants to see, and the                                                                                 thumb position is typically
                                                                                                                                                           devices in a way that the fingertip and
                                  with function.        context in which they’ll use the app.                                                              pointed towards the top of   the screen. This brings their eye
                                                                                                       d college student in
                 In term s of function there are           For example, Mike Todd is an 18-year-ol                                                         towards the top and tells you as a desig
                                                                                                                                                                                                      ner “hey, put the most
                                                                                                 about Mike. He is in college,
             areas of app development that               New York City. This tells us a lot more                                                           important and general categ    ories of info towards the top!”
                                                         around other students    his age, most with similar schedules.                                                                                can move on and off
               are not the ‘designer’s job’ per                                                    r interaction. Would we                                     Consider the variety of ways content
                                                         Mike may want a game with two-playe                                                               screen. For example, mobile    sheets are a great way to hide
               se, but have a great impact on            have thought of two-   player interaction if we only knew Mike
                                                                                                                           ’s
                                                                                                                                                                                                       y to use them.
                                                                                                                                                            actionable controls until the user is read
              the design conceptually and in             age? Depending on the app, maybe or
                                                                                                   maybe not. Regardless,                                                                 wants to be bogged down with
                                                                                                                                                               Minimise user input. Who
                the development of a creative            drawing out personas brings richness
                                                                                                  to your brainstorming                                                                                with a Picker Table so
                                                                                                                                                            entering a bunch of text? Provide users
             direction. If you are working on            and  helps draw out functionality that’s impo
                                                                                                          rtant to your target
                                                                                                                                                            they can select a choice from   a menu instead.
                an app, and these jobs are not            audience, and important    to the design.
                                                                                                                                                                In mobile design, paper prototyping
                                                                                                                                                                                                        will save you lots of time.
             being filled, find someone who                                                                                                                 Much like any design or illust ration process, having iterations
                   has these skills or give it a try                                                                                                         of your design allows you to explore
                                                                                                                                                                                                    a wider variety of design
          yourself. Skipping these steps can              Use Case nas areariosed, the characters need to be placed
                                                                   Scen                                                                                      options to a deeper degree.   And with paper prototyping there’s
                lead you down a costly path of            Once perso       defin
                                                                                                    . Where are the users that
                                                          in relevant, true-to-life circumstances
           revisions when it’s found the app                                                 by car
                                                          use the app? Are they on foot,
               is missing functionality or has a
                                        poor flow.        or travelling by train?
                                                              43-year-old Bill is driving to a
                                                           meeting in London and wants to
                                                           stop for a cup of coffee. Should the
                                                           app require that Bill tap the screen
                                                           several times before finding his
                                                           coffee shop? Thinking through
                                                           the variety of circumstances users
                                                            find themselves in, and dialling
                                                            in on scenarios where certain
                                                            functionality repeats, is the key
                                                            to defining what screens you will
                                                             be designing.


                                                            Site mapfor mobile are critical
                                                            Site maps
                                                            to design. To design a flow that’s
                                                            intuitive, understanding the
                                                            relationship of content to other


                                                                                                         lace Your
                                                                           The pap er prot otype for Rep
                                                                                             Face cat egory scr een
          38 | Web Designer




034-041_WD_167.indd 5                                                                                                                                                                                                                                     22/1/10 16:45:05
less ‘risk’, less attachment to a scrap of paper than a Photoshop
           file. For example, working on Post-it notes is useful in being able
           to re-order, add or delete screens until the flow is right.
                                                                                                                                                                        MOBILE DESIGN
           Focus on the App’s Primary Task
           The most enjoyable apps establish and maintain focus on one
           primary task. To do this you must determine what that primary
           task is by creating a product definition statement, a concise
           explanation of your app’s main purpose and its intended
           audience. Pick the few features most frequently used by the
           majority of your users, most appropriate for the mobile context.
           A quick way to do this is to fill in these blanks for the application
           you’re working on:

           (Your differentiator) (your solution) for (your audience)

           Here’s an example for iPhone’s ‘Photos’ app: Easy-to-use digital
           photo sharing for casual iPhone users.
              The primary focus of Sound Hound is to find song lyrics. The
          first screen you see minimises user input by requiring only one
          tap for a song to be identified. The action is fast and the result is
          immediate. From there the user has the option of drilling down                                            life easy
          into more detailed information about the song.                           Thanks Sound Hound for mak ing
             What’s the number one thing you want to do when you open
          a recipe app? Epicurious clearly understood its target audience
          and the primary task it wanted to complete.
                                                                                                                                All I want is to find a recipe and Epicurious gets that

          Design Tools & Image Specs
                                                                                                                                        “The most enjoyable
          Designers who are new to mobile often ask “How are apps
          created? What kind of software tools are necessary?” You’ll be
          happy with the answer. Tools of the trade for mobile designers
          are the same as your typical web/web application design tools
          (Photoshop, Illustrator). The general rule is to export all graphics                                                          apps establish and
                                                                                                                                        maintain focus on
         for native applications in web-optimised transparent PNG-24
         format. If you’re creating graphics for a web-based application,
         you can export web-optimised .gif or .jpg or PNG-24 images.
         For free downloadable templates visit: http://templates.
         mobilelove.org.                                                                                                                one primary task ”
            Similar to web design, the software program of choice is
         Photoshop, as you can easily slice out graphics and get pixel-
         precise and still manipulate images as vector graphics with


                                                                                                                                               iPhone specs
         shape layers.




                                                                                                                                                                                  And the final design




                                                                                                                                                                                   Web Designer | 39




034-041_WD_167.indd 6                                                                                                                                                                                22/1/10 16:45:46
MOBILE DESIGN
                               DESIGN                   Plan for backgroundn in Flash design, the need for planning Typographygraphy in mobile’srecently is the conversatmoot
                                                                 Animatio is                                        To say that typo             yesteryear has been a
                                                                                                                                                                         ion
                                                        Unless your                                                                    point is an understatement. Only
                                                                                              n is not omnipresent. With
         When designing for mobile the                  for animation in traditional web desig                                         even possible, with more phones allow
                                                                                                                                                                                  ing wider varieties of
                                                                                        not mimicking the fluid touch                                                                              cations.
               small screen should not be               mobile apps, however, if you’re
                                                                                             taking advantage of the                   typefaces throu   gh the native OS and web-based appli
                                                        interface with animations you’re not                                                                                   hy for mobile apps:
          a barrier to creativity or letting                                               to the interface.                           Below are best practices in typograp
                                                                                                                                                                                        graphy on the web,
                                                        design aesthetic animations bring                                                  Choose your serifs wisely. Similar to typo
           your imagination run wild. No                                                                                                                                      s of copy is recommended
                matter what the subject of                                                                                             using sans-serif fonts for large block
                                                                                                                                        for readability purposes.
             the app, your goal should be
             to deliver a high-fidelity user
                                                        Design around Device res. Totperform actions on a
                                                                                   Inpu                                                    The Guardian is an example of how serife
                                                                                                                                                                                        d fonts are necessary
                                                                                                                                                                                                   adequate
                                                                touch-screen gestu
                                                        Design for                                                                      to maintain bran  d identity. This app is proof that with
         interface. Even applications that              touch-screen device, users use their finge
                                                                                                     rs to swipe, drag,
                                                                                                                                        leading, proper kerning and font size,
                                                                                                                                                                                  serifed fonts can be an
            fall into a ‘utility’ category can          pinch, tap and flick on-screen elements.                                         elegant solution.
                  have fresh, tactile design.                                                          res into your design                                                         background colour it
                                                            Planning for and integrating these gestu                                        Contrast of the text in relation to the
                                                                                                    advantage of the                                        ssary to ensure both visibility and read
                                                                                                                                                                                                    ability.
                                                        provide a rich user experience that takes                                        layers over is nece
                                                                                                   es. Keep in mind that
                                                         unique attributes of touch-screen devic
                                                                                                            with the device so
                                                         users  are using gestures a lot in apps that ship                   n.
                                                         be sure to use them appr   opriately so they don’t defy conventio
                                                                                                 user to pinch/zoom to scroll
                                                         For example, you wouldn’t require a
                                                         a list view.


                                                             Core techniques
                                                          Contrast ring colour palettes, consider the variety of lighting
                                                          When explo
                                                                                                 used. Under bright
                                                          conditions where mobile devices are
                                                          fluorescent lighting or on a sunn y day, lack of contrast in text
                                                                                                   to discern. Even under
                                                          or graphical elements may be difficult
                                                          normal lighting conditions, prop  er contrast is helpful for those
                                                                                                   from lighting and screen
                                                          who may have vision problems. Aside
                                                           considerations, using contrast in your layout serves to draw the
                                St rongly
                                                                                                       ack.
                                contra sting colours       user’s eye, and encourage action or feedb
                                make it easy to                                                                                                                                                 The Guardian’s serifed fonts are
                                 tell the time
                                                           Layout ts are a common tool used in print, web and mobile                                                                            an important part of its brand…
                                                            Grid layou
                                                                                                         rtant to establish a
                                                            design. For utilities in particular it’s impo
                                                            clean grid layout durin   g your prototyping phase to establish
                                                                                                          room between click-
                                                            proper hierarchy, balance and breathing
                                    Clear and concise       able elements.
                                    layout make s
                                     life easier for
                                      everyone              Sound                                      graphical in nature,
                                                            Sounds tell a story. Although sound isn’t
                                                                                                                  overall
                                                            it does interact with graphics and add depth to the
                                                            experience. Using sound as a   design element can reduce visual
                                                                                                   example using the ‘whoosh’
                                                            noise by taking the place of text. For
                                                             noise when an email is sent, rather than having a text alert. Keep
                                                                                                      of an application, it must
                                                             in mind for sound to increase the value
                                                             be relevant, balanced and pleas  ing, not an annoyance.                                                   the
                                                                                                                                                 … and they surviv ed
                                                                                                                                                 trans ition to mobile




         USABILITYnication
             Commu
                                                                                                         AVOIDING OOPSIES
                                                                                                         Give the user
                                                                                                                                         A way to undo/redo.
                                                                                                                       plenty of time to cancel
                                                                                                                                                 an operation
                                                                                                                                                                         let them know. “Hey buddy this is going
                                                                                                                                                                         minute.” Simple as that and they’ll love
                                                                                                                                                                                                                   to take a
                                                                                                                                                                                                                  you for it.


         Effective                  h visual cues in the deskt
                                                                 op world that                           before it begins, and make sure you alert the user
                                                                                                                                      ly destructive action!
                                                                                                                                                                         GRPHICS Showing an animated graphic

         Many of us are familiar wit
                                                                                                                                                                        to indicate things like download status
                                                                                                         before they take a potential
                                                                   going on. With
                                                                                                                                                                                                               , progress
                                     effectively exactly what’s                                               gn easy and elegant way
                                                                                                                                        s for users to stop             bars and wait times are examples of
         communicate quickly and
                                                                                                         Desi                                                                                                appropriate

                                     nities arise to keep use rs informed and                            operations  that are under way.                                feedback animations.

         mobile the same opportu                                cOS is an irritating
            ppy! For example, the  spinning pinwheel in Ma                                                                                             n within         SOUND
         ha                                                         didn’t see that                       FEEDBACK          When users take an actio                                   When designing audible feedback
                                       ion was hung up and you                                                                         to see immediate visual
         sign, but what if an applicat le that frustration level and you have
                                                                                                                                                                        keep it only to necessary elements and
                                                                                                          an app, their expectation is                                                                            make sure the
                                                                                                                                                               then
                                                                                                                                    your design. First visual,
                                     doub                                                                                                                              sounds do not conflict with existing
          spinning pinwheel? Now
                                                                                                          change. Plan for these in
                                                                               even a                                                                                                                        sounds in the
                                                 lete the app before taking
                                                                                                                                                         back may
                                                                                                                             le audio or animated feed                 mobile operating system. For examp
                   d mobile users that will de
                                                                                                          consider how subt                                                                                   le, you wouldn’t
          fast-pace                                                   r to give users:
                                        m. Key things to remembe
                                                                                                                                                                       want to use the ‘incoming mail’ sound
                                                                                                           be appropriate.                                                                                      for the taps in
          minute to report the proble                                                                                                                                  your app or users will think they’re gettin
                                                                                                                                                                                                                   g an email
                                                                                                           REQUEST PROCESSING
                                                                                                                                               If a user taps and      every time they tap!
                                                                                                                                       e to load what they  want,
                                                                                                           you know it will take a whil
          40 | Web Designer



034-041_WD_167.indd 7                                                                                                                                                                                                           22/1/10 16:46:23
Mobile GUI Design - Web Designer Magazine Article
Mobile GUI Design - Web Designer Magazine Article

Mais conteúdo relacionado

Mais procurados

Customer Experience Lifecycle
Customer Experience LifecycleCustomer Experience Lifecycle
Customer Experience LifecycleAmaury de Buchet
 
Location Context Awareness
Location Context AwarenessLocation Context Awareness
Location Context AwarenessPiyush Gupta
 
DIGITAL MEDIA CONVERGENCE: Opportunity & Challenges For Incumbents
DIGITAL MEDIA CONVERGENCE: Opportunity & Challenges For Incumbents DIGITAL MEDIA CONVERGENCE: Opportunity & Challenges For Incumbents
DIGITAL MEDIA CONVERGENCE: Opportunity & Challenges For Incumbents ugkaz
 
"Mobile value-chain" by Sundeep Gupta
"Mobile value-chain" by Sundeep Gupta"Mobile value-chain" by Sundeep Gupta
"Mobile value-chain" by Sundeep GuptaAbhilash Ravishankar
 
Mobile Virtual Assistant : iConcier, Siri, and tomorrow...
Mobile Virtual Assistant : iConcier, Siri, and tomorrow...Mobile Virtual Assistant : iConcier, Siri, and tomorrow...
Mobile Virtual Assistant : iConcier, Siri, and tomorrow...Mobile Monday Brussels
 
City Strata: Locative Experience Design and Large-
City Strata: Locative Experience Design and Large-City Strata: Locative Experience Design and Large-
City Strata: Locative Experience Design and Large-Charlotte Crofts
 
Saiful hidayar santri indigo telkom republika pondok pesantren keresek garut ...
Saiful hidayar santri indigo telkom republika pondok pesantren keresek garut ...Saiful hidayar santri indigo telkom republika pondok pesantren keresek garut ...
Saiful hidayar santri indigo telkom republika pondok pesantren keresek garut ...Saiful Hidayat
 
MDI - Mandevian Knights
MDI - Mandevian KnightsMDI - Mandevian Knights
MDI - Mandevian Knightslehartawde
 
Future of mobile in local Government
Future of mobile in local GovernmentFuture of mobile in local Government
Future of mobile in local GovernmentRob Manson
 
Holocene intro1
Holocene intro1Holocene intro1
Holocene intro1David Brin
 
XDC Overview Mar 10
XDC Overview Mar 10XDC Overview Mar 10
XDC Overview Mar 10Exicon
 
ISB Hyd - Team Beirut - Film Fiesta
ISB Hyd - Team Beirut - Film FiestaISB Hyd - Team Beirut - Film Fiesta
ISB Hyd - Team Beirut - Film Fiestalehartawde
 
How location based services change everything
How location  based services change everythingHow location  based services change everything
How location based services change everythingHoward Smith
 
Saiful hidayat surfing in the digital broadband era thru being creative th...
Saiful hidayat    surfing in the digital broadband era thru being creative th...Saiful hidayat    surfing in the digital broadband era thru being creative th...
Saiful hidayat surfing in the digital broadband era thru being creative th...Saiful Hidayat
 
Layar Augmented Reality Platform - information for brands and publishers
Layar Augmented Reality Platform - information for brands and publishersLayar Augmented Reality Platform - information for brands and publishers
Layar Augmented Reality Platform - information for brands and publishersLayar
 
Augmented Reality - Everything You Need To Know
Augmented Reality - Everything You Need To KnowAugmented Reality - Everything You Need To Know
Augmented Reality - Everything You Need To KnowSkive
 
BPM for Mobile, Mobile for BPM
BPM for Mobile, Mobile for BPMBPM for Mobile, Mobile for BPM
BPM for Mobile, Mobile for BPMBP3 Global, Inc.
 
Mobile Behaviors & Design
Mobile Behaviors & DesignMobile Behaviors & Design
Mobile Behaviors & DesignMobileAnthem
 

Mais procurados (20)

Customer Experience Lifecycle
Customer Experience LifecycleCustomer Experience Lifecycle
Customer Experience Lifecycle
 
Location Context Awareness
Location Context AwarenessLocation Context Awareness
Location Context Awareness
 
DIGITAL MEDIA CONVERGENCE: Opportunity & Challenges For Incumbents
DIGITAL MEDIA CONVERGENCE: Opportunity & Challenges For Incumbents DIGITAL MEDIA CONVERGENCE: Opportunity & Challenges For Incumbents
DIGITAL MEDIA CONVERGENCE: Opportunity & Challenges For Incumbents
 
"Mobile value-chain" by Sundeep Gupta
"Mobile value-chain" by Sundeep Gupta"Mobile value-chain" by Sundeep Gupta
"Mobile value-chain" by Sundeep Gupta
 
Mobile Virtual Assistant : iConcier, Siri, and tomorrow...
Mobile Virtual Assistant : iConcier, Siri, and tomorrow...Mobile Virtual Assistant : iConcier, Siri, and tomorrow...
Mobile Virtual Assistant : iConcier, Siri, and tomorrow...
 
City Strata: Locative Experience Design and Large-
City Strata: Locative Experience Design and Large-City Strata: Locative Experience Design and Large-
City Strata: Locative Experience Design and Large-
 
Saiful hidayar santri indigo telkom republika pondok pesantren keresek garut ...
Saiful hidayar santri indigo telkom republika pondok pesantren keresek garut ...Saiful hidayar santri indigo telkom republika pondok pesantren keresek garut ...
Saiful hidayar santri indigo telkom republika pondok pesantren keresek garut ...
 
MDI - Mandevian Knights
MDI - Mandevian KnightsMDI - Mandevian Knights
MDI - Mandevian Knights
 
Future of mobile in local Government
Future of mobile in local GovernmentFuture of mobile in local Government
Future of mobile in local Government
 
Holocene intro1
Holocene intro1Holocene intro1
Holocene intro1
 
Mobile Capture Solution for Banking
Mobile Capture Solution for BankingMobile Capture Solution for Banking
Mobile Capture Solution for Banking
 
XDC Overview Mar 10
XDC Overview Mar 10XDC Overview Mar 10
XDC Overview Mar 10
 
ISB Hyd - Team Beirut - Film Fiesta
ISB Hyd - Team Beirut - Film FiestaISB Hyd - Team Beirut - Film Fiesta
ISB Hyd - Team Beirut - Film Fiesta
 
How location based services change everything
How location  based services change everythingHow location  based services change everything
How location based services change everything
 
Saiful hidayat surfing in the digital broadband era thru being creative th...
Saiful hidayat    surfing in the digital broadband era thru being creative th...Saiful hidayat    surfing in the digital broadband era thru being creative th...
Saiful hidayat surfing in the digital broadband era thru being creative th...
 
Layar Augmented Reality Platform - information for brands and publishers
Layar Augmented Reality Platform - information for brands and publishersLayar Augmented Reality Platform - information for brands and publishers
Layar Augmented Reality Platform - information for brands and publishers
 
Augmented Reality - Everything You Need To Know
Augmented Reality - Everything You Need To KnowAugmented Reality - Everything You Need To Know
Augmented Reality - Everything You Need To Know
 
Portfolio 2012
Portfolio 2012Portfolio 2012
Portfolio 2012
 
BPM for Mobile, Mobile for BPM
BPM for Mobile, Mobile for BPMBPM for Mobile, Mobile for BPM
BPM for Mobile, Mobile for BPM
 
Mobile Behaviors & Design
Mobile Behaviors & DesignMobile Behaviors & Design
Mobile Behaviors & Design
 

Destaque

Droidcon 2010: Android and iPhone - a known Antagonism ? Professor Dr. Kai Ra...
Droidcon 2010: Android and iPhone - a known Antagonism ? Professor Dr. Kai Ra...Droidcon 2010: Android and iPhone - a known Antagonism ? Professor Dr. Kai Ra...
Droidcon 2010: Android and iPhone - a known Antagonism ? Professor Dr. Kai Ra...Droidcon Berlin
 
Android industrial mobility
Android industrial mobility Android industrial mobility
Android industrial mobility Droidcon Berlin
 
Android programming -_pushing_the_limits
Android programming -_pushing_the_limitsAndroid programming -_pushing_the_limits
Android programming -_pushing_the_limitsDroidcon Berlin
 
Droidcon de 2014 google cast
Droidcon de 2014   google castDroidcon de 2014   google cast
Droidcon de 2014 google castDroidcon Berlin
 

Destaque (7)

Droidcon 2010: Android and iPhone - a known Antagonism ? Professor Dr. Kai Ra...
Droidcon 2010: Android and iPhone - a known Antagonism ? Professor Dr. Kai Ra...Droidcon 2010: Android and iPhone - a known Antagonism ? Professor Dr. Kai Ra...
Droidcon 2010: Android and iPhone - a known Antagonism ? Professor Dr. Kai Ra...
 
Details matter in ux
Details matter in uxDetails matter in ux
Details matter in ux
 
Android industrial mobility
Android industrial mobility Android industrial mobility
Android industrial mobility
 
crashing in style
crashing in stylecrashing in style
crashing in style
 
Android programming -_pushing_the_limits
Android programming -_pushing_the_limitsAndroid programming -_pushing_the_limits
Android programming -_pushing_the_limits
 
Droidcon de 2014 google cast
Droidcon de 2014   google castDroidcon de 2014   google cast
Droidcon de 2014 google cast
 
Raspberry Pi
Raspberry PiRaspberry Pi
Raspberry Pi
 

Semelhante a Mobile GUI Design - Web Designer Magazine Article

Do you Need an App Strategy? (jan 2010)
Do you Need an App Strategy?  (jan 2010)Do you Need an App Strategy?  (jan 2010)
Do you Need an App Strategy? (jan 2010)William J. Brown
 
LocalSocial Overview Q409v3
LocalSocial Overview Q409v3LocalSocial Overview Q409v3
LocalSocial Overview Q409v3Sean O'Sullivan
 
Hottest Web Trends 2.014
Hottest Web Trends 2.014Hottest Web Trends 2.014
Hottest Web Trends 2.014PresentationGFX
 
PC Today
PC TodayPC Today
PC TodayBianor
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introductionJelle Desramaults
 
MOD Awards Mobile Red Carpet - Integration Kit
MOD Awards Mobile Red Carpet - Integration KitMOD Awards Mobile Red Carpet - Integration Kit
MOD Awards Mobile Red Carpet - Integration KitCirqle Media, LLC
 
Dribbble inkod 2013
Dribbble inkod 2013Dribbble inkod 2013
Dribbble inkod 2013Ilan Dray
 
Mobile and Responsive Design
Mobile and Responsive DesignMobile and Responsive Design
Mobile and Responsive Designcreed
 
4 steps to creating a mobile development strategy - White Paper - Appcelerator
4 steps to creating a mobile development strategy - White Paper - Appcelerator4 steps to creating a mobile development strategy - White Paper - Appcelerator
4 steps to creating a mobile development strategy - White Paper - AppceleratorRomain Fonnier
 
Full Digital Innovation Partners
Full Digital Innovation PartnersFull Digital Innovation Partners
Full Digital Innovation PartnersDoug Robinson
 
Confoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suckConfoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suckFrédéric Harper
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)Brian Fling
 
Codemotion2013depasquale
Codemotion2013depasqualeCodemotion2013depasquale
Codemotion2013depasqualeVera Kovaleva
 
Motion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageMotion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageAntonio De Pasquale
 
Are You Mobile Friendly or a Mobile Frenemy?
Are You Mobile Friendly or a Mobile Frenemy?Are You Mobile Friendly or a Mobile Frenemy?
Are You Mobile Friendly or a Mobile Frenemy?vizCards
 

Semelhante a Mobile GUI Design - Web Designer Magazine Article (20)

Do you Need an App Strategy? (jan 2010)
Do you Need an App Strategy?  (jan 2010)Do you Need an App Strategy?  (jan 2010)
Do you Need an App Strategy? (jan 2010)
 
Grayson
GraysonGrayson
Grayson
 
LocalSocial Overview Q409v3
LocalSocial Overview Q409v3LocalSocial Overview Q409v3
LocalSocial Overview Q409v3
 
6 stage 3_tech
6 stage 3_tech6 stage 3_tech
6 stage 3_tech
 
Hottest Web Trends 2.014
Hottest Web Trends 2.014Hottest Web Trends 2.014
Hottest Web Trends 2.014
 
PC Today
PC TodayPC Today
PC Today
 
PC Today
PC TodayPC Today
PC Today
 
NOX July 2011
NOX July 2011NOX July 2011
NOX July 2011
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
 
Mobile Application Development
Mobile Application DevelopmentMobile Application Development
Mobile Application Development
 
MOD Awards Mobile Red Carpet - Integration Kit
MOD Awards Mobile Red Carpet - Integration KitMOD Awards Mobile Red Carpet - Integration Kit
MOD Awards Mobile Red Carpet - Integration Kit
 
Dribbble inkod 2013
Dribbble inkod 2013Dribbble inkod 2013
Dribbble inkod 2013
 
Mobile and Responsive Design
Mobile and Responsive DesignMobile and Responsive Design
Mobile and Responsive Design
 
4 steps to creating a mobile development strategy - White Paper - Appcelerator
4 steps to creating a mobile development strategy - White Paper - Appcelerator4 steps to creating a mobile development strategy - White Paper - Appcelerator
4 steps to creating a mobile development strategy - White Paper - Appcelerator
 
Full Digital Innovation Partners
Full Digital Innovation PartnersFull Digital Innovation Partners
Full Digital Innovation Partners
 
Confoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suckConfoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suck
 
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
 
Codemotion2013depasquale
Codemotion2013depasqualeCodemotion2013depasquale
Codemotion2013depasquale
 
Motion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageMotion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital age
 
Are You Mobile Friendly or a Mobile Frenemy?
Are You Mobile Friendly or a Mobile Frenemy?Are You Mobile Friendly or a Mobile Frenemy?
Are You Mobile Friendly or a Mobile Frenemy?
 

Último

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 

Último (19)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 

Mobile GUI Design - Web Designer Magazine Article

  • 1. MOBILE DESIGN MOBILE DESIGN iPhone ap desig p designer Jen Gordon desc ning for the smaller screen in ribes the creative process be this specialist visual mastercl ass hind seems like a no-brainer. Wh ether applied to designing O years, the web design s, VER THE LAST few mobile operating system e become sites, GUIs, apps, or indeed s on screen size s hav and demand and mobile design world there are new constraints than ever before. embraced. more closely entwined and interfacing that must be for mobile have been trate the creative workflow The cumbersom e and clunky days of WAP In order to illus tha t device technology has don of iPhone app agency consigned to history now design we’ve asked Jen Gor some ine experiences on the example-packed look at begun to offer genuine onl ly Clever Twist to give us an bile App le’s iPhone has probab way we’ll look at why mo move. Love it or loathe it, ent around a of the key facets. Along the s associated and excitem ht the nuance done most to spark interest design matters and highlig rnet service and certainly h producing native and web -based mobile ma ss consumer mobile inte captured wit defined the ma rket for mobile apps. It has applications – from concept to design. our mode of interaction with There’s also time to get a word with market our imagination for a new of smartphones successful handsets, and spawned a new ‘4G’ series experts and des igners to get their take on e to push boundaries. a brief look at the areas so or superphones that con tinu mobile projects and even such ’s latest BlackBerry and the dern mobile experience, Throw the Palm Pre, RIM have synonymous with the mo On e into the mix and you brand new Google Nexus te the as icon design. bile phones set to domina ter time to make the leap a formidable army of mo There’s never been a bet ta it guarantees your conten scene for years to come. igners? Why into mobile design and if ’t afford to ignore So what does this mean for web des definitely can and brighter future then you audiences are widening sho uld we care? Well, if web n it it any longer! a new area of demand the we can apply our skills to th ow ur/c or Aboutdon,e anethreative director Nexus One iPhone ry n Gor Je shop Clever Twist, of mobile design girls lyrics to r Black Ber enjoys teaching he d blogging s, an Dolly Parton song at www. about mobile design mobilelove.org. Palm Pre 34 | Web Designer 034-041_WD_167.indd 1 22/1/10 16:42:27
  • 2. In years past, design for mobile has not been a hot topic in the design commu only a few years old, the DOS screen aesthetic abounds. However, since the nity. In smartphones MOBILE DESIGN smartphones, interest in the mobile GUI (graphical user interface) has madelaunch of touch-screen Designers are looking for ways to break into this exciting new field of designa radical turnaround. article is to define why design for mobile matters, and highlight the nuance . The purpose of this and web-based mobile applications. s of designing native Designing for Web vs. Mobile Unless you’ve been living under a rock, you’ve probably heard • Direct manipulation of content. On touch-screen devices, users have the ability to manipulate objects in a much more tangible manner than on a desktop application. that designing for mobile is different than designing websites There is no intermediate device like a mouse, only direct or desktop applications. And the differences are multiplying touch with the fingers that allows users to interact. rapidly as more devices with additional functionality hit the • Feedback based on time and location market. So why does design for mobile matter? Let’s take a look at the differences between web vs. mobile to get a better understanding of how users interact with each platform. Design Considerations There are many unique design considerations when designing The US A Toda example of a hy y app is a gr eat brid app for mobile, and those considerations start with knowing the Desktop hardware and operating system you’re working with. You don’t Web vs. Native Apps For the purposes of this article ‘desktop’ refers to laptop/ have to purchase lots of mobile devices, instead visit the app desktop-based websites, web apps and applications. We don’t store for the respective operating system (eg iTunes App Store, think of this hardware as interactive in the same way as mobile. Android Market found on Android handsets). From there take a What’s the difference between web-based, We’re not going to pick up and tilt our monitors. In fact the tactile look at apps that have a solid design aesthetic. If a developer has hybrid and native apps, and why does it interactions are typically limited to: spent time on the GUI, it’s likely they also spent time on usability matter to designers? First let’s address the “what”. Web-based mobile applications are and flow. The idea in mobile is not to convert but to create. Take built using your standard HTML, CSS, and • Mouse clicks lessons from mobile apps that have done an elegant job of JavaScript while native apps use the software • Keyboard porting their desktop web presence to mobile. development kit and native programming • External tablet and pen language for that operating system. Hybrid apps • Microphone input are a mixture of the two, for example an iPhone • Speaker audio output Design for the Mobile Context app such as USA Today pulls in dynamic web The dictionary defines context as “the parts of a discourse that content while utilising C+ to code the shell that surround a word or passage and can throw light on its meaning”. pulls in that data. Mobile In more practical terms, context enhances our experience or Who cares, you might ask. Why does it matter? Like it or not, developing for mobile Mobile is a completely different animal. It’s people-centric. After understanding of people, places, things and situations. Providing requires some technical knowledge of the all, think of what we call it – a handset. It fits in our hand, our context takes apps from good to great. platform you’re developing for in order to create pocket, next to our wallet. It’s a phone, it’s social, it’s personal. It For example, two of the most unique features of mobile the graphics to the proper spec. Additionally it has a ton of interaction points: devices is the ability to detect time and location. Planning for helps to know the capabilities of web vs. native ways to take advantage of this data is essential. Let’s say you to understand what functionality you can design • On-screen touch keypad want to build a coffee finder app that lists all coffee shops for and which you cannot. When considering • Gestures within a ten mile radius of your location. Sounds like a useful hybrid apps know you can combine the • Mic input that can result in an immediate action application, but how can you make it better? The device already functionality of both. • Sound feedback upon interaction Web-based apps allow usage of most knows the exact time when the user is searching, why not functions that would typically work in desktop display only the coffee shops that are open? browsers. However, they are not able to respond to hardware inputs the same way a native app can. For example, they do not allow Create an Elegant Solution on usage of the accelerometer (which detects a Small Screen shaking and positioning of the phone), audio input via mic, robust audio feedback options, Mobile device screens are smaller than desktop camera/video integration, or the native monitors, but what does that really mean? Size animation capabilities. things down? Squeeze them in? The temptation Native apps allow all of the above items but may be to make things simply ‘fit’ into a smaller cannot connect to web-based content. The app screen, when just the opposite is true. is static until it’s updated and re-submitted to Even when you’re trying to communicate the App Store. Many apps are going the hybrid route to allow dynamic content to flow into a many things to the user, less is more. Your native shell. primary goal from a design standpoint is to create a simple, elegant solution that’s easy “ Like it or not, to use. Localisation Mobile apps are unique with regard to developing for mobile requires worldwide proliferation. Many app developers are targeting global markets for their apps and some technical guess what? This impacts design. For example, your app includes in-app purchasing for global app stores. Your checkout button looks great Above : An extreme example of an app that HAD to simplif y when you mock up “Buy now” in English, but how big does that button need to be when the phrase is knowledge of the platform you’re translated to “покупка теперь” ? Right : The New York Times iPhone app with simplif ied format Designing for Mobile Interaction Unlike design for desktop websites and/or developing for” applications, the variety of ways you can interact Web Designer | 35 034-041_WD_167.indd 2 22/1/10 16:43:05
  • 3. MOBILE DESIGN device with and get feedback from a mobile terpart. radically differs from its desktop coun Mobile apps aren’t just pretty pictures, you’re ning for mobile is a developing a piece of software. Desig combination of interactio n, product/industrial and graphic ile touch-screen device design. Think about all the things a mob can react to: touch, shak ing, tilting, vibrating, audio input and With these elements, feedback, location and time tracking. design takes on an entir ely new dimension. It’s your job as a concepting how an designer to consider these features when app will work. you speak. Tons of fun… ity Designing for Scalabilhave a user base are destined to Mouth Off moves illustrated mouth s to the words products, apps that Like most time. Feature requests are change in some way or another over made, bugs reported and content needs to be added, among plans for the app and other things. Thinking about long-term anticipating features that will be requested down the road can app later. This applies to save you a lot of time re-designing the Mobile technology both utilities and games. A good example is the casual game Mouth Off. When the app initially launc hed, they only had one set of mouths to choose from, the Signature Mouths. As the tor We speak to Andy Betts, edi accommodate for those , app added more mouths, they had to of Smartphone Essentials additions in the layout. for his view on how the new generation of devices is impacting on the way we view Designing to Help Users HelpisThemselvan es mobile interaction ide application design, the goal to prov In mobile predicts the next step and The advent of the iPhone turned application that thinks for the user. It to get there. Providing a conventional wisdom abou t mobile provides simple and implicit controls devices on its head. Before 2007 each ‘help’ screen or ‘how to use this app’ screen should set off an tecture, flow and control generation of mobiles simp ly had to be alarm in your brain that the app archi smaller yet more powerful than the last, Postage makes it easy to send labelling needs rework. To illustrate the idea of being implicit s you what to do but Apple’s approach brou ght the user cute picture cards to friends Subtle in-line call-out tell and intuitive let’s take a look at the Posta ge app. It is a prime lot experience to the fore, and put the screen example of an app that could be easily bogged down with a focal point of the hardware . but instead has a fluid, as the menus of controls, text and navigation blunders, It was revolutionary. Endless replaced organised, intuitive flow. and nested submenus were built around by a more human interface entirely a series of gestures that were pinching: intuitive. Touching, swiping, ld use when the same gestures you wou ucts sat on working with physical prod ely your desk, and producing an entir the software holistic experience where in unison. and hardware were working e works in a Every function on the phon a part of the OS, uniform way, whether it be interacting with the web or using one of the apps for the platform. era The change ushered in a new of smar tphones, where devices like rphone’ the Google’s self-styled ‘supe spired Palm Nexus One, the iPhone-in e replaced Pre and RIM’s BlackBerry rang leaders in tradi tional names like Nokia as mobile inno vation. And then it fad es out You go into many levels of functionality s likely to Google’s Android OS look marketplace dominate the smartphone presents some in the years to come, but it rs, not-insignfica nt challenges to develope s One is however. Although the Nexu smartphone Google’s vision of what a Motorola, shou ld be, other big names like Sony Ericsson and Samsung also have folio, Android devices in their port platform is and fragmentation of the can currently becoming a concern. You running five buy Android smartphones with at least different versions of the OS four different screen reso lutions, meaning The controls transition nicely and the GUI is rich! design and that compatibility in both d cannot functionality across the boar way from the be guaranteed. It’s a long uniformity of the iPhone. The custom tab bar along the bottom provides image manipulation 36 | Web Designer The nav bar clearly implies what’s next 034-041_WD_167.indd 3 22/1/10 16:43:49
  • 4. Types of Apps MOBILE DESIGN There are many categories of apps in the App Store, which can be broken down types of apps. Know where your app falls, and it’ll help you establish proper into four main design boundaries. Ratio calculates your ingredient ratios for you Serious tools • Keep it clean • Establish a clear grid for alignment and layout • Avoid redundant controls • Get things out of the way of productivity • Use ‘implied’ graphics • Visually prioritise info using typography and colour Southwest Airline s uses icons, colour and a clear layout to help its customers take care of busine ss Colour, implied graphic s help visualise the numbers quickly Serious Entertainment Have the same characteristics of Fun Games, but with added depth in virtual realities and role-playing. • Graphically rich, commonly have storylines to follow Fun Tools • Single screen, maybe one level deep at most • Efficiency focused, large buttons, legible from 5ft away • Moderately graphically rich • Show path to productivity and flatten the hierarchy • No more than two-to-three levels deep Outside is a Skies Of Glory recreates the graphically experience of being a WWII pilot rich app with a practical function. Forecasting the weather! Kroll is a storyline-based, multiplay er game Charadium is an interac tive, Fun Games multiplayer game of mobile Convertbot makes conversions fun charad es • Intensely graphical • Fall outside of the standard operating system user interface • Move away from a hierarchical navigation • Get into playing game immediately • Multi-touch gestures • LOUD visual feedback • “Success” pop up or audio feedback “Yaay!” • Tell users when they do something right or wrong Soft Freak Fiesta includ es uber-rich graphic s and global multiplayer gaming Web Designer | 37 034-041_WD_167.indd 4 22/1/10 16:44:17
  • 5. MOBILE DESIGN e cases this can make this you need to leave strong static imagery. In som for mobile devices, fingers/thumbs. To add to that require I absolutely adore designing ce for long er downloads, but on sites ample room betw een buttons to allow the devi wait. If a as it’s one of the few oppo rtunities that you get visual punch, I believe it to be worth the to pick up the user’s choi ce accurately and make lly lution and don’t have site is trying to sell som ething that relies on visua to work within a fixed reso to be easily pressed. This rent resolutions. the buttons large enough e or movie, then the site to worr y about the issues of diffe annoying hurdle, rich media, like a videogam g could initially be interpreted as an the best of its ability. This essentially allows you to create somethin it allows needs to showcase that to but I personal ly see it as fun challenge, and design is truly unique and bespoke to the targeted device, , The future of mobile interface and web you to create some reall y sexy, made-to-measure d ing short of a dream pretty exciting, as ever since the iPhone introduce and for a designer, this is noth interfaces and designs. leading to an ever come true. sing, it’s rare that multi-touch technology, it’s of iPhone games, Regarding mobile web brow rience, and this is only I’ve worked on a number dedicated evolving interactive expe companies are willing to devote funds to with creating the core interface and HUD elements, r going to grow as time goes on. Couple this mobile sites (other than large companies with large s you have to take into technology, allowing and there are so many thing case that I use some basic the ever increasing leaps in a fat finger budgets), so it’s often the e processor-intensive account. Navigating an interface with ing to keep mobile us to experience faster, mor have rules in my design when need some mobile is worlds apar t from a delicate mouse. You nce on heavy expe riences; we truly are in for lly Illustrated browsing in mind. I try to minimise relia user’s hands are going s! I for one cannot wait! to think about where the interactive treat l Heald,teFu.com JavaScript and Flash and aim to make impact with button is to their key Michaellyillustra d to sit and how close each www.fu le and usable controls. content provides a way to design simp The Design Process If you are a designer, the good Market Research Depending on the type of app you’re a good idea to working on, it’s always do some market research around the type of Mobile app site maps differ from webs apps should not prese ite site maps as mobile nt the user with multiple ways to get one place. One door to one room, that’s to it. Mobile users don’t a lot from those who have news about mobile apps is app to be designed. You can learn competition is doing and have time to make a wrong move then go ‘back’ and try to find design is everything. Whether gone before you. Find out what your the proper path. think about how you can not only make it better, but deliver a you’re building a utility or a antly surprised! surprising twist. Users love to be pleas game, appearance has a great impact on usability. Cluttered or Paper Pro will ping Wireframing and case scenariostotydefine the content disorganised apps are difficult Target Audienceaudience is very important in defining a cted from the Data colle on the screens defined in and controls that need to be present to understand, and hard to use. your target Knowing . From there you have to design a prelim inary layout the site map This isn’t to say that a ‘serious design style, typography and layout. Does your app appeal to design elements. Define a grid, that accounts for each of these tool’ should be embellished with accountants or 18-25-year -old gamers? Having this information and design from the top onas’ is essential to establish importance of information an overdone GUI. A great app and diving even deeper to develop ‘pers down. Ergonomically speaking, users hold touch-screen mobile design balances appearance understanding what the demographic wants to see, and the thumb position is typically devices in a way that the fingertip and with function. context in which they’ll use the app. pointed towards the top of the screen. This brings their eye d college student in In term s of function there are For example, Mike Todd is an 18-year-ol towards the top and tells you as a desig ner “hey, put the most about Mike. He is in college, areas of app development that New York City. This tells us a lot more important and general categ ories of info towards the top!” around other students his age, most with similar schedules. can move on and off are not the ‘designer’s job’ per r interaction. Would we Consider the variety of ways content Mike may want a game with two-playe screen. For example, mobile sheets are a great way to hide se, but have a great impact on have thought of two- player interaction if we only knew Mike ’s y to use them. actionable controls until the user is read the design conceptually and in age? Depending on the app, maybe or maybe not. Regardless, wants to be bogged down with Minimise user input. Who the development of a creative drawing out personas brings richness to your brainstorming with a Picker Table so entering a bunch of text? Provide users direction. If you are working on and helps draw out functionality that’s impo rtant to your target they can select a choice from a menu instead. an app, and these jobs are not audience, and important to the design. In mobile design, paper prototyping will save you lots of time. being filled, find someone who Much like any design or illust ration process, having iterations has these skills or give it a try of your design allows you to explore a wider variety of design yourself. Skipping these steps can Use Case nas areariosed, the characters need to be placed Scen options to a deeper degree. And with paper prototyping there’s lead you down a costly path of Once perso defin . Where are the users that in relevant, true-to-life circumstances revisions when it’s found the app by car use the app? Are they on foot, is missing functionality or has a poor flow. or travelling by train? 43-year-old Bill is driving to a meeting in London and wants to stop for a cup of coffee. Should the app require that Bill tap the screen several times before finding his coffee shop? Thinking through the variety of circumstances users find themselves in, and dialling in on scenarios where certain functionality repeats, is the key to defining what screens you will be designing. Site mapfor mobile are critical Site maps to design. To design a flow that’s intuitive, understanding the relationship of content to other lace Your The pap er prot otype for Rep Face cat egory scr een 38 | Web Designer 034-041_WD_167.indd 5 22/1/10 16:45:05
  • 6. less ‘risk’, less attachment to a scrap of paper than a Photoshop file. For example, working on Post-it notes is useful in being able to re-order, add or delete screens until the flow is right. MOBILE DESIGN Focus on the App’s Primary Task The most enjoyable apps establish and maintain focus on one primary task. To do this you must determine what that primary task is by creating a product definition statement, a concise explanation of your app’s main purpose and its intended audience. Pick the few features most frequently used by the majority of your users, most appropriate for the mobile context. A quick way to do this is to fill in these blanks for the application you’re working on: (Your differentiator) (your solution) for (your audience) Here’s an example for iPhone’s ‘Photos’ app: Easy-to-use digital photo sharing for casual iPhone users. The primary focus of Sound Hound is to find song lyrics. The first screen you see minimises user input by requiring only one tap for a song to be identified. The action is fast and the result is immediate. From there the user has the option of drilling down life easy into more detailed information about the song. Thanks Sound Hound for mak ing What’s the number one thing you want to do when you open a recipe app? Epicurious clearly understood its target audience and the primary task it wanted to complete. All I want is to find a recipe and Epicurious gets that Design Tools & Image Specs “The most enjoyable Designers who are new to mobile often ask “How are apps created? What kind of software tools are necessary?” You’ll be happy with the answer. Tools of the trade for mobile designers are the same as your typical web/web application design tools (Photoshop, Illustrator). The general rule is to export all graphics apps establish and maintain focus on for native applications in web-optimised transparent PNG-24 format. If you’re creating graphics for a web-based application, you can export web-optimised .gif or .jpg or PNG-24 images. For free downloadable templates visit: http://templates. mobilelove.org. one primary task ” Similar to web design, the software program of choice is Photoshop, as you can easily slice out graphics and get pixel- precise and still manipulate images as vector graphics with iPhone specs shape layers. And the final design Web Designer | 39 034-041_WD_167.indd 6 22/1/10 16:45:46
  • 7. MOBILE DESIGN DESIGN Plan for backgroundn in Flash design, the need for planning Typographygraphy in mobile’srecently is the conversatmoot Animatio is To say that typo yesteryear has been a ion Unless your point is an understatement. Only n is not omnipresent. With When designing for mobile the for animation in traditional web desig even possible, with more phones allow ing wider varieties of not mimicking the fluid touch cations. small screen should not be mobile apps, however, if you’re taking advantage of the typefaces throu gh the native OS and web-based appli interface with animations you’re not hy for mobile apps: a barrier to creativity or letting to the interface. Below are best practices in typograp graphy on the web, design aesthetic animations bring Choose your serifs wisely. Similar to typo your imagination run wild. No s of copy is recommended matter what the subject of using sans-serif fonts for large block for readability purposes. the app, your goal should be to deliver a high-fidelity user Design around Device res. Totperform actions on a Inpu The Guardian is an example of how serife d fonts are necessary adequate touch-screen gestu Design for to maintain bran d identity. This app is proof that with interface. Even applications that touch-screen device, users use their finge rs to swipe, drag, leading, proper kerning and font size, serifed fonts can be an fall into a ‘utility’ category can pinch, tap and flick on-screen elements. elegant solution. have fresh, tactile design. res into your design background colour it Planning for and integrating these gestu Contrast of the text in relation to the advantage of the ssary to ensure both visibility and read ability. provide a rich user experience that takes layers over is nece es. Keep in mind that unique attributes of touch-screen devic with the device so users are using gestures a lot in apps that ship n. be sure to use them appr opriately so they don’t defy conventio user to pinch/zoom to scroll For example, you wouldn’t require a a list view. Core techniques Contrast ring colour palettes, consider the variety of lighting When explo used. Under bright conditions where mobile devices are fluorescent lighting or on a sunn y day, lack of contrast in text to discern. Even under or graphical elements may be difficult normal lighting conditions, prop er contrast is helpful for those from lighting and screen who may have vision problems. Aside considerations, using contrast in your layout serves to draw the St rongly ack. contra sting colours user’s eye, and encourage action or feedb make it easy to The Guardian’s serifed fonts are tell the time Layout ts are a common tool used in print, web and mobile an important part of its brand… Grid layou rtant to establish a design. For utilities in particular it’s impo clean grid layout durin g your prototyping phase to establish room between click- proper hierarchy, balance and breathing Clear and concise able elements. layout make s life easier for everyone Sound graphical in nature, Sounds tell a story. Although sound isn’t overall it does interact with graphics and add depth to the experience. Using sound as a design element can reduce visual example using the ‘whoosh’ noise by taking the place of text. For noise when an email is sent, rather than having a text alert. Keep of an application, it must in mind for sound to increase the value be relevant, balanced and pleas ing, not an annoyance. the … and they surviv ed trans ition to mobile USABILITYnication Commu AVOIDING OOPSIES Give the user A way to undo/redo. plenty of time to cancel an operation let them know. “Hey buddy this is going minute.” Simple as that and they’ll love to take a you for it. Effective h visual cues in the deskt op world that before it begins, and make sure you alert the user ly destructive action! GRPHICS Showing an animated graphic Many of us are familiar wit to indicate things like download status before they take a potential going on. With , progress effectively exactly what’s gn easy and elegant way s for users to stop bars and wait times are examples of communicate quickly and Desi appropriate nities arise to keep use rs informed and operations that are under way. feedback animations. mobile the same opportu cOS is an irritating ppy! For example, the spinning pinwheel in Ma n within SOUND ha didn’t see that FEEDBACK When users take an actio When designing audible feedback ion was hung up and you to see immediate visual sign, but what if an applicat le that frustration level and you have keep it only to necessary elements and an app, their expectation is make sure the then your design. First visual, doub sounds do not conflict with existing spinning pinwheel? Now change. Plan for these in even a sounds in the lete the app before taking back may le audio or animated feed mobile operating system. For examp d mobile users that will de consider how subt le, you wouldn’t fast-pace r to give users: m. Key things to remembe want to use the ‘incoming mail’ sound be appropriate. for the taps in minute to report the proble your app or users will think they’re gettin g an email REQUEST PROCESSING If a user taps and every time they tap! e to load what they want, you know it will take a whil 40 | Web Designer 034-041_WD_167.indd 7 22/1/10 16:46:23