SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
Steven Hoober




    designing
                      Float Mobile Learning Symposium

                      11 June 2011




    mobile
    interfaces
      mobile design




g


obile
Designing


          Mobile
          Interfaces                          www.4ourth.com/wiki

                              Steven Hoober
                            & Eric Berkman


                                                                       2



    I am here basically because I have been spending the last 9
    months working a second full time job collecting around 60
    patterns for mobiles.



g
    When it comes out, it’ll be great. Buy one. Look for the book
    with the colorful parrot on the cover. It’ll be hard to miss.

    Actually, it’s a lovebird. No, I don’t know why. And it’s been




obile
    years since authors got to choose their animal.

    Also, every bit of the patterns, and some other helpful informa-
    tion including over 70 links to platform-specific UI standards,
    templates and stencils are out there. Add to it if you want.


    I want to define, briefly, what a pattern means to me.
Patterns are universal




                                                                              3



    These are just some of the devices I actually own.

    Here’s many of them if you want to rifle through.

    A common question, right after “why a lovebird,” is what phone I

g   carry.

    Doesn’t matter. Right now, a Droid 2 Global. But in the last 3 years




obile
    I have carried -- full time, porting my number and everything -- 7 dif-
    ferent devices with 4 different OSs. Part-time, a lot more than that.

    I have TEN browsers on my handset now. I have a contract to do
    some browser design.

    You need to keep your hand in the market, and not just stick to your
    favorite device. Because design is not about one device, or brows-
    er, and even if /your design/ is, you are missing out on other good
    ideas.
Patterns are generalized




                                          Vi                     Vi
                                             deo                    deo
                                                   se                   se
                                             N       r                     r
                                              et vic                N
                                                                     et vic
                                                  fli es                fl    e
                                             H
                                               ul
                                                     x     ...      H ix s...
                                                  u                  ul
                                                     Pl                 u
                                             Am u                   Am Plu
                                                 a s                   a s
                                             Yo zon                 Yo zon
                                                uT                    uT
                                                   u                     u
                                             Sl be                  Sl be
                                               ac                     ac
                                                   ke                    ke
                                                      rM                    rM
                                                         ed                    ed
                                                            ia                    ia




                                                                                       4



    Patterns are very non-specifc. Even talking about specific
    examples sometimes bothers me; just like when showing off
    your design everyone gets hung up in details.



g   I use illustrations. The top is the complete set of illlustrations
    to describe the Scroll pattern. The bottom is the same for
    Remote Gestures.




obile
    Only when needed did I make an illustration including a real
    web page. And even that is drawn, to only focus on the dis-
    ussion points at hand.

    On the bottom, notice nothing is assumed; arrows indicate
    (generally) axes of movement, etc.
Patterns are organized                                                                                  Directional Entry

                                    Input Method Indicator                                                   OK
                                           3G
                                                       3:52PM

                                                Sign on to continue
                                           To prevent unauthorized
                                           access to your account,
                                           access has been locked.

                                           Password             123
                                            TF43

                                                      Continue

                                                         Exit
                                                                               3G
                                                                                        3:52PM




                                                                                                      abc
                                                                                                                  3G
                                                                                                                             3:52PM    123
                                                                               Going to be a little late
                                                                               picking you up. Go get                  Sign on to continue
                                                                               some coffee and I’ll text          To prevent unauthorized
                                                                                                                  access to your account,
                                                                               when getting clo                   access has been locked.

                                                                                                                  Password
                                                                                                                   TF43
                                                3G
                                                          3:52PM
                                                 Just passed
                                                 through Asheville,                                                         Continue
                                                 you still on?
                                                                                                                              Exit
                                                     Start selection
                                                       Stuck in meetings,
                                                       where are you
                                                     Paste
                                                       stopping tonight?

                                                     Copy all
                                                                       abc

                                                Going to be a little late
                                                                                                              Focus & Cursors
                                                    Cut all
                                                picking you up. Go get
                                                some coffee and I’ll text
                                                when getting clo




                                                                             Clear Entry




                                                                                                                                             5



    Part of the analysis of the patterns is grouping, and not just
    by immediate relations, but by higher level categories, and
    related tasks in other categories.



g   Building a taxonomy of patterns helps understand them (it
    certainly helped me) and is designed to help you find them
    and use them correctly.




obile
    They also cross-link a lot.
Patterns are explained




                                                                    6



    I’ve seen a number of new “pattern libraries” that simply
    take screenshots and post them by category.

    These are fine, as galleries of design. But they are not pat-


g   tern libraries.

    You need to know what the pattern is, and why it is, so you
    can do the right thing, explore the edges, and avoid the




obile
    wrong things.

    There are nice simple pictures, bullets to follow, but also a
    LOT of other words. All of which matter.
Patterns are best practices

    Not necessarily
    common practice.                       Contacts    21-25 of 125




    Noce necessarily
                                              Jane Adams
                                              816 210 0123 (M)
                                              Jamie Adamly

    popular, trendy.                          913 111 0234 (H)
                                              Paula Adamowlsky
                                              785 985 0345 (M)
                                              Mike Adamson
                                              314 987 0456 (O)
                                              Mike Adler
                                              210 618 0567




                                                                      7



    Patterns are not just collections of popular themes in the
    world of design, or what I have taken to calling “common
    practice.”



g   Fashion and interior design work differently, but UX is ev-
    idence-based. Just because it’s popular doesn’t make it
    right, and if there is clear evidence (from research, gener-
    ally) that this is wrong, I say so.




obile
    Many patterns are improperly implemented in the majory of
    devices. Now, I didn’t buck the trend completely; this exam-
    ple is simply that you need to hide pointlessly repeating ava-
    tar stand-ins. But that’s an easy fix.
Patterns are misunderstood

    •   Reactionary
    •   Single view
    •   First solutions
    •   Rote solutions
    •   Too high level
    Obviously, this is not a key attribute of patterns that we want to
    have. But it’s true. Patterns are misunderstood, and therefore
    mis-used.
    • Design solutions are Reactionary and solve for point problems,
      instead of considering the entire system.                          8
    • Even when larger solutions are found, they are Single view or
      only for one screen, one device or one platform.
    • The first satisfactory solution is accepted, and rapidly be-
      comes entrenched. There should always be incentives to find
      the best possible solution.
    • There is likewise no incentive to find unique, interesting or dif-
      ferentiable solutions. The Rote solution, or the published pat-


g
      tern, is used without modification (another reason I don’t like to
      give examples).
    • Patterns that do consider solutions generally sometimes lead to
      excessively High-level design, with no reasoning (or an incom-
      prehensible one). VizDs and developers won’t understand what




obile
      part is important so will modify it and miss the point.

    I tend to call all of this the “heuristic solution.” It’s not /bad/ per
    se, in fact it checks all the boxes, but it’s not inspired, and is nev-
    er truly satisfactory.

    It might even pass CSAT measures, and show improvement. But
    it levels off and you never get up to that really top-tier, no matter
    what you do.
Steven Hoober




    avoiding
                                            Float Mobile Learning Symposium

                                            11 June 2011




    the heuristic
    solution
           mobile design


    Speaking of CSAT, this is not your fault. It’s very, very institu-
    tionalized.

    Just a few weeks ago I was in a presentation by [a top


g
    CSAT vendor]. The company had bought the extended anal-
    ysis, and had 120 pages of suggestions on how to fix the
    site. Which addressed each failure point as an individual
    problem, with an individual solution, and a best case from




obile
    one industry leader or another.

    Then an executive got up and said that this gives us direc-
    tion and (and I wrote this down) “now there’s no need to
    think, explore and do user research to figure out which of
    these options is right.“

    And since it’s exective direction, that’s what’s happening.
Steven Hoober




    avoiding
                                            Float Mobile Learning Symposium

                                            11 June 2011




    the heuristic
    solution
           mobile design


    I originally had 20 slides of this stuff. but I realized I was go-
    ing too negative. If anyone disagrees with the premise, raise
    your hand, but I am otherwise just going to move on, to the
    solutions.


g


obile
Be a conscious designer

    Know why you draw
    •   Define
    •   Codify
    •   Compare
    •   Choose
    •   Combine
    •   Expand

                                                                    11



    The key, to me, is that yoy be aware of why you are design-
    ing.

    Patterns and heuristics (as well as formal uses of these


g   methods, like heuristic evaluations) have value not just in
    the immediate use of them (e.g. does it pass the heuristic or
    not?) but in making the designer aware of the components,
    and the reasons they exist.




obile
    Patterns are communicated in a consistent manner, allowing
    you to understand them, pick the right one form several op-
    tions, combine related ones, and add your own.

    This is also important later. When you need to revise, or
    when you are building the product.
Design methodologies to success

    •   Understand the problem
    •   Leverage your team
    •   No idea is worthy
    •   Your competitors are not wizards
    •   Embrace your constraints
    •   Collaborate
    •   Seek outside input

                                                                    12



    Design is not art.

    I have an art degree, so I know this.



g   Design has goals, that pay the bills when they succeed. You
    need to work with others to find these.

    Design is not just drawing the right line, or box, or button,




obile
    but building an ecosystem to support that design, so you
    know what the right line, or box or button is.

    I wrote a whole book-length treatise on some of my favorite
    design practices. Dozens of people use it now.

    And over the years I have changed my mind enough, it’s out
    of date. These are the key objectives I work to now.
Understand the problem

    Put the markers down.
    First time, every time,
    ask the customer, their
    workers, the users.

    Create objectives, and
    stick to them.

                                                                                13



    Before even starting to design anything, ask questions.

    Perform user interviews, ask the business what they want, and gather
    any other information about current and expected usage you can.



g   Develop measurable objectives, stick to them during design, and be
    sure to measure after it launches. Without feedback, you cannot learn.

    Try not to draw. This is hard to do, for me at least, but sketching con-




obile
    cepts early will tend to lock you into that thinking. You might be on the
    wrong track. Keep away from this, and seek to understand the prob-
    lem space first.

    If you are wondering, this is a project I did for Hallmark, where one of
    the first things we did was have them to the office for two full days of
    interviews and data gathering, kicked off with a visit to a store, to really
    understand their current processes.
Leverage your team

    Studio methods to
    foster competition,
    creation of new ideas.

    Manage them, to add
    challenge to each step.


                                                                   14



    Studio Methods

    The best ideas come from individuals, or small teams, work-
    ing independently. To get the most good, unique ideas, task


g   those individuals or small teams to develop quick, indepen-
    dent designs and regularly share and regroup, iterating to a
    final solution.




obile
No idea is worthy

    Don’t do a little dance
    for your great idea. I
    promise it has flaws.

    Consider components
    individually, and look
    for flaws.

                                                                   15



    ...So, everyone comes back with ideas and you review
    them.

    Then you evaluate not complete designs, but each compo-


g   nent. How does it fit into the overall concept... etc.

    Assign components that are similar to other designs, so they
    are combined in interesting ways, and people get outside




obile
    their comfort zones.

    When working with design concepts, whether evaluating
    competitor sites, or with the design teams above -- remem-
    ber to approach the design from a modular point of view,
    and evaluate the suitability of each element to the overall
    goals, and process. Do not just accept (or reject) whole de-
    signs.
No idea is worthy




                                                                    16



    Even with one idea, whether just trying to determine if the
    idea is good yourself, doing an eval or whatever, do not fall
    in love with the idea so much that you:
    1) Look at it as a whole


g   2) Miss the flaws.

    Deconstruct it, to understand what it is, what it is made of
    (patterns, components!) and then how it might NOT work.




obile
    This is a challenge again, but who said it would be easy.
There are no design wizards

    Inspiration is fine.
    Copying is pointless.

    Follow your process to
    find the right answer
    for your business, and
    the current world.

                                                                            17



    Your competitors and forefathers do not have the magic formula.

    Some just have better cultures of design. / Some just lucked into it.

    When required to look at the competition, or the great previous-

g   generation ideas, recognize that business models, customers, and
    goals are not the same over here, or these days.




obile
    Inspiration is fine, but use good process to find the right answer.

    How many of you carry a Walkman phone? Of course, none. But
    for /years/ after the iPod came out, every pundit was sure Sony
    would come and crush the market.

    Didn’t happen, because Sony (apparently) builds good products,
    not good ecosystems. It seems no one turned their tape player era
    devices into digital era music.
Embrace your constraints

    Brainstorming doesn’t
    work.

    Working within your
    constraints adds focus
    to any design session
    and fosters ideas.

                                                                     18



    Brainstorming is for suckers: Doesn’t work. Boosters will
    say it does, and the counter studies aren’t doing it right. To
    which I say: no one does it right, such that I never want to
    call it “brainstorming.”


g   • There are bad ideas
    • There are ideas that you shouldn’t even consider, as they
      are out of scope.




obile
    Instead, I like to set preconditions and say Embrace your
    Constraints.

    Whether in concepting exercises, workshops or as individu-
    al designers, only work within the domain, set preconditions
    and remind everyone that the goals and objectives define the
    desired end state.
Embrace your constraints




                                                                 19



    ...
    A common complaint about patterns is that they are too con-
    straining, and stifle creativity.

g   I never see this happen, except by those same designers
    who voice those complaints, when they take some great




obile
    idea they see, and implement it without changes.

    I am all for borrowing good ideas, and being inspired. But
    using another pattern without knowledge is dumb.

    Embrace your constraints
Collaborate

    Don’t just work
    together, collaborate.

    Use everyone’s skill,
    and knowledge, to
    find the best solution.


                                                                                      20



    Collaborate

    I have a 10,000 character essay on this, which you can find on my blog.
    So this is necessarily a summary. If collaboration eludes you, or like I was,
    you get blamed for being not collaborative, check it out.


g   Design teams will, ideally, have a variety of individual skillsets, or at least
    multiple individuals, each with their own background and opinions. Use
    the individual skills of the team members to find solutions and explore




obile
    concepts.

    Some other key attributes of good collaboration have been outlined
    above. Be a conscious designer, so you can discuss your ideas, or de-
    fend them. And not because you like it; defend only what you know to be
    true from experience.

    Collaboration can be very informal. When you get into it, you will start
    asking advice for even simple behaviors and problems. This sort of activ-
    ity is why some people like open plan offices. Just turn around and ask
    the team.
Seek outside input

    Systems, process and
    business-intelligence
    knowledge is held by
    specialists you won’t
    see.

    Unless you go looking.

                                                                      21



    Beyond collaboration, get input from people outside the de-
    sign team. This is expecially good in big places that have been
    around for decades, or centuries.



g
    Not everyone has all knowledge of the arbitrarily complex sys-
    tems we work on all too much, so cross-functional collabora-
    tion can have great value in confirming concepts, getting input
    on the viability of concepts, and discovering tangential solu-




obile
    tions already considered or in progress somewhere else.

    This is not just useful for the gathering of information, which
    you should do up front, but to confirm your design works.

    Often, those same people can add more value after they see
    what you mean. “Oh, you are using that information. Have you
    talked to these guys about their project in the stores?” etc.
And now your design is perfect
                                        Bitstream ThunderHawk 3.0                                     Detailed Design Document                              Novemb



                                       A Home > ii URL Entry

    What could possibly                A2c URL entry
                                           (widget)
                                                                                                                                                  A2f URL
                                                                                                                                                      overs
                                                                                                                                                      entry
                                                                                                                                                      (widg

    go wrong?
                                                                       goog|
                                                                        google.com/news
                                                                        google.com/docs
                                       Input                            google.com/search?q=Xpe...
                                       The URL field has                google.com/ig/setp?m_3_u...
                                       focus, and can be                7 Search for “goo”
                                       freely typed within.
                                                                                                                       Autocomplete
                                       If this mode is                                                                 Any free-entry field
                                       achieved by editing an                                                          (not just on this frame)   Summary
                                       existing URL, the field                                                         will offer autocomplete    The site name, TLD
                                       will be pre-populated                                                           values in a modified       and feed icon whe
                                       with the existing                                                               select list below the      needed, are display
                                       values.                                                                         input field.               again to clarify whi
                                                                                                                                                  URL is being show
                                                                                                                       Only a few items
                                                                                                                       should be shown, to
                                       Default                                                                         avoid scrolling.
                                       This screen (with no
                                       information populated)                                                          The last item should
                                       is the default entry                                                            always offer the ability
                                       point for any user                                11:14P        Cancel          to perform an internet
                                       typing a new URL, any                                                           search (with the last
                                       time one has not been                                                           service used on the        Modal
                                       visited yet.                                                                    home page) for the         This widget is mod
                                                                                                                       value currently            No other part of th
                                                                                                                       entered. The 7             page can be




    Well, execution.
                                                                                                                       accesskey can be           accessed while thi
                                                                                                                       used to perform this,      item is opened.
                                                                       Select            11:14P        Cancel          without scrolling to the
                                                                                                                       item.

                                                                                                                       When scrolled down
                                                                                                                       to an autocomplete
                                                                                                                       function, the “Select”
                                                                                                                       option/softkey will both
                                                                       Go                11:14P        Cancel          select the item and
                                                                                                                       move to the next field
                                                                                                                       of the URL.




                                        ©2008 Little Springs Design » Proprietary & Confidential




                                                                                                                                                   22



    So, now you have a great design settled on, and bought
    into, and not just by the business owner, but by everyone in
    the whole place, hopefully.



g   And now the gulf of execution. No, not Don Norman’s gap
    between stimulus and understanding, but the difference be-
    tween what you give design and what comes out of the de-
    velopment team.




obile
    And if I haven’t said it already, apologies to anyone who de-
    velops their own code, already has a terrific relationship with
    their developers, or believes your process solves all.

    I’ve been there and say: Some day it won’t.
And now your design is perfect
                                        Bitstream ThunderHawk 3.0                                     Detailed Design Document                              Novemb



                                       A Home > ii URL Entry
                                       A2c URL entry                                                                                              A2f URL
                                           (widget)                                                                                                   overs
                                                                                                                                                      entry
                                                                       goog|                                                                          (widg
                                                                        google.com/news
                                                                        google.com/docs
                                       Input                            google.com/search?q=Xpe...
                                       The URL field has                google.com/ig/setp?m_3_u...
                                       focus, and can be                7 Search for “goo”
                                       freely typed within.
                                                                                                                       Autocomplete
                                       If this mode is                                                                 Any free-entry field
                                       achieved by editing an                                                          (not just on this frame)   Summary
                                       existing URL, the field                                                         will offer autocomplete    The site name, TLD
                                       will be pre-populated                                                           values in a modified       and feed icon whe
                                       with the existing                                                               select list below the      needed, are display
                                       values.                                                                         input field.               again to clarify whi
                                                                                                                                                  URL is being show
                                                                                                                       Only a few items
                                                                                                                       should be shown, to
                                       Default                                                                         avoid scrolling.
                                       This screen (with no
                                       information populated)                                                          The last item should
                                       is the default entry                                                            always offer the ability
                                       point for any user                                11:14P        Cancel          to perform an internet
                                       typing a new URL, any                                                           search (with the last
                                       time one has not been                                                           service used on the        Modal
                                       visited yet.                                                                    home page) for the         This widget is mod
                                                                                                                       value currently            No other part of th
                                                                                                                       entered. The 7             page can be
                                                                                                                       accesskey can be           accessed while thi
                                                                                                                       used to perform this,      item is opened.
                                                                       Select            11:14P        Cancel          without scrolling to the
                                                                                                                       item.

                                                                                                                       When scrolled down
                                                                                                                       to an autocomplete
                                                                                                                       function, the “Select”
                                                                                                                       option/softkey will both
                                                                       Go                11:14P        Cancel          select the item and
                                                                                                                       move to the next field
                                                                                                                       of the URL.




                                        ©2008 Little Springs Design » Proprietary & Confidential




                                                                                                                                                   23



    In this example, I had a perfectly good relationship with the
    implementation team (and still work with them years later)
    and the first release simply didn’t follow specification. Like
    this, where the history is a dropdown, but as implemented it


g   went full-screen.




obile
user
    centered
    execution


    What we need to solve this are principles of what we can
    call “user-centric execution.”

    This is not yet a process, or series of fixed procedures, or a


g   manifesto or anythinf. It is possible it may never be.

    But like the principles, heuristics and patterns of design, the
    idea should be followed and there are best practices.




obile
    First, to principles:
Your design isn’t done

    UX teams can help:
    • Don’t walk away.
    • Set goals for everyone.
    • Make object-oriented designs.
    • Practice polymorphism.




                                      25




g


obile
Don’t walk away

    It’s your project, so
    stick with it.
    • Answer questions.
    • Check on progress.
    • Solve problems.
    You are part of the
    implementation team.

                                                                                26



    Never walk away
    Always stick with the project through development, at least making
    yourself available for questions, rework, changes and testing.

    Ideally, become integrated into the team, and attend daily meetings,


g   test planning, and so on.

    Plan on this from the start so your schedule and budget accounts for
    it.




obile
    You may not /actually/ be part of the implementation team, but try to
    become one. Or at least act like it. Go to meetings, etc.

    At the very least, put your name a contact information on the spec. It’ll
    work. You’ll get calls from random developers in Bangalore at 2 am,
    and be able to give them good information to make sure the project
    keeps going.

    After you get more sleep, you’ll be happy this happened.
Set goals for everyone

    Turn priciples into
    metrics. Then measure
    them.

    Push for these to
    be the project level
    measure of success.

                                                                       27



    Assure goals are for everyone

    The business and user goals you should have developed at
    the beginning of the project must be translated into actual,


g   measurable metrics.

    Make sure that the whole organization has these goals as
    their top drivers, instead of cost savings, efficiency of devel-




obile
    opers, or other internal measures.

    While “we’re building for the end user” may not resonate,
    remind everyone they work for the larger company, not just
    their department. You may also have to push to include the
    analytical tools to make sure they get built, not forgotten.
DMC eReader User Experience

                                           Sitemap – Modular Reuse of Comp
                                           This	is	a	map	of	the	total	expected	pages,	states	or	
                                           key	functions.	Process	is	not	depicted.	Many	subsid-
                                           iary	states	are	not	depicted.	See	the	legend	for	ele-
                                           ments	within	each	page.


    Make object-oriented designs
                                           This	is	a	map	of	the	total	expected	pages,	states	or	
                                           key	functions.	Process	is	not	depicted.	Many	subsid-
                                           iary	states	are	not	depicted.	See	the	legend	for	ele-
                                           ments	within	each	page.

                                                              K1	Groups                                                    J2	Friends	
                                                              •	 My	Groups             •	 Multi-select	version	            •	 My	Friends
                                                      •	      •	 Friend’s	Groups          for	use	when	chang-         •	   •	 My	Friend’s	Friends
                                                      •	                                                              •	




    Patterns are objects.
                                                  •   •	      •	 Friend	List	Groups       ing	context	mode	       •   •	     •	 Same
                                                  •   •	      •	 Related	Groups                                   •   •	
                                                  •   •	                                  (m620	request)          •   •	     •	 Different
                                                  •   •	                                                          •   •	   •	 Group	Members

                                                              K1	Groups                                                    J2	Friends	
                                                              •	 My	Groups             •	 Multi-select	version	            •	 My	Friends
                                                      •	      •	 Friend’s	Groups          for	use	when	chang-         •	   •	 My	Friend’s	Friends
                                                  •   •	      •	 Friend	List	Groups                               •   •	
                                                      •	                                  ing	context	mode	           •	     •	 Same
                                                  •
                                                  •
                                                  •
                                                      •	
                                                      •	
                                                      •	      K2	Group	Details
                                                              •	 Related	Groups           (m620	request)
                                                                                                                  •
                                                                                                                  •
                                                                                                                  •
                                                                                                                      •	
                                                                                                                      •	
                                                                                                                      •	
                                                                                                                           J3	Friend	Detai
                                                                                                                             •	 Different
                                                                                                                           •	 Group	Members
                                                              See A1                                                       See A1



    Objects are re-usable                                     K2	Group	Details
                                                              See A1
                                                                                                                           J3	Friend	Detai
                                                                                                                           See A1


    components, whether
    in design or code.                     Legend	of	Modular	Widgets
                                           m101	Notification	Listing              •	
                                                                                  •	             m220	Group	Preview	Pod
                                                                                  •	
                                                                                  •	
                                                                                  •	
                                                                                  •	             m201	Group	Listing                  •	
                                                                                                                                     •	
                                                                                                                                     •	
                                                                                                                                     •	
                                           m102	Notification	List	Long
                                           Legend	of	Modular	Widgets                                                                 •	
                                                                                  •	
                                                                                                 m320	Friend	Preview	Pod
                                           m103	Read	Notification
                                           m101	Notification	Listing              •	             m220	Group	Preview	Pod
                                                                                  •	
                                                                                  •	             m301	Friend	Listing                 •	
                                                                                                                                     •	
                                                                                                                                     •	
                                                                                  •	                                                 •	
                                                                                  •	
                                                                                  •	             m201	Group	Listing                  •	
                                                                                                                                     •	
                                           m	105	Create	Annotation                                                                   •	
                                                                                                                                     •	
                                           m102	Notification	List	Long                           m410	Profile	Details
                                                                                                                                     •	
                                                                                  •	
                                           m110	Notification	Strip                               m320	Friend	Preview	Pod
                                           m103	Read	Notification                                m501	Content	Listing               •	
                                                                                                                                    •	
                                                                                                 m301	Friend	Listing                •	
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                                                                    •	
                                           m120	Annotations	Bar                   •
                                                                                  •	
                                                                                  •
                                                                                  •
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                  •                                                 •	
                                                                                  •
                                           m	105	Create	Annotation                •              m502	Content	Large                 •	
                                           m610	Search,	Filter,	Sort                             m410	Profile	Details
                                                                                                 m520	Content	Preview	Pod
                                           m110	Notification	Strip
                                           m620	Context	Mode
                                           m120	Annotations	Bar
                                                                                  •
                                                                                  •
                                                                                  •
                                                                                  •
                                                                                  •
                                                                                  •
                                                                                                 m501	Content	Listing
                                                                                                 m590	Reader                        28
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                                                                    •	
                                                                                  •
                                           m660	Tags	&	Keywords                   •
                                                                                  •              m502	Content	Large                 •	
                                           m610	Search,	Filter,	Sort
                                           m901	Masthead/Nav                                     Custom	items
                                           m620	Context	Mode                                     m520	Content	Preview	Pod
                                           m902	Minimized	Nav                     •
                                                                                  •
                                                                                  •
                                                                                  •
                                                                                                 m590	Reader
                                           m660	Tags	&	Keywords

    Use object-oriented principles when discussing and delivering
                                           m901	Masthead/Nav
                                           m902	Minimized	Nav
                                                                                                 Custom	items




    --                                                                                                                           DMC_Sitem




                                                                                                                                 DMC_Sitem
    The efficiencies and enforcement of consistency that compo-


g
    nentized, object-oriented practice emphasizes in design are
    just as valuable to software developers and development pro-
    cess.




obile
    Sometimes this is just called “modular re-use,” or other things,
    as “object oriented” is a larger set of principles (it all originated
    in development) and might confuse development. But I like the
    sound of it.

    The core concept is the same: Instead of designing every de-
    tail for every state, and building by state or building hundreds
    of items to bolt together, a few dozen modules are built and re-
    used over and over in common templates.
Practice polymorphism
    Vocel Pill Phone v.2                                            Detailed Interaction Design Document                    May 13, 2008                         Version 0501308



B Receiving & Viewing Alerts > vii Completion & Refills
B14 Done taking medications for now

    Variations of objects
Progress indicator
Whether multi-step or not,
a completion message is
                                   B14a As loaded                                                                          Select for refill
                                                                                                                           Preselected if indicated.
                                                                                                                           Suppressed if unavailable.
                                                                                                                                                            B14b Med ordering details

                                                                                                                                                                      Zolotran                         E



    are still the same
shown here.                                          Done!
                                                                                                                                                                  Dr. Revels
                                      All medications taken                                                                Med information                           816-766-9801                          {Call Number}
Refill status                                                                                                              The doctor and pharmacy
Change to “Refill                     --------------------------------                                                     name and number are                       1 refill left
needed!” if pharmacy                                                                                                       displayed.                             CVS Pharmacy Johns...
                                      Next medication alert:

    object.
pushes notice, or user                                                                                                                                               913-661-0500                          {Call Number}
has selected any in
previous screens.
                                         12:00pm           Details                  B15
                                                                                                                           Ordering informtion                       $10.00 (copay) qty. 60
                                      --------------------------------                                                     Refills remaining, the price           Medication details                       E2
                                                                                                                           and the quantity of a refill
Pre-check...                          Order refills                                                                        (if known) are displayed.
...any items noted by the
user on previous screens.
                                          Zolotran                           E
Pharmacy alerts                             Details                                 B14b                                                                    B14c Details – Order ready or pending


    Tell everyone, so
If they think user is out, a          -----------------------------------------
graphic appears.
                                      Amotab ZE                                             Softkey (Options menu):                                                 Amotab ZE
                                                                                             Home                A1        “No,” not “zero”                      Dr. Revels
Pending or ready                          Details                                   B14c     My Medications      C4/C1     If the number of refills is
                                                                                                                           zero, print it as “no”                   816-766-9801                           {Call Number}
If already ordered, do not                                                                   My Pharmacies       A18/A19



    variations are built as
allow selection, replace            Options                               Exit               My Pill Boxes       C9/C7                                              no refills left
with info icon.                                                                              Pill Book           E1
                                                                                             Settings            D1        Status                                                                          {Change state}
                                      -----------------------------------------              Exit                {Exit}    If not available, reads
                                                                                                                                                                 Order ready        Picked up
                                                                                                                                                                                                           {close frame}
Non-orderable items                                                                                                                                              CVS Pharmacy Johns...
Items without a pharmacy              • Frizilap                                                                           “Order processing” and




    you designed them.
relationship are displayed,                                                                                                the “picked up” button is               913-661-0500                            {Call Number}
but do not have a                         Details                                   B14b
                                                                                            Audio:
                                                                                                                           suppressed.
                                                                                                                                                                   $10.00 (copay) qty. 60
checkbox to order online.                                                                            Onload:                                                     Medication details                        E2
                                                                                                     Success
Button conditional
                                               Place orders
The order button is                                                                                  “All medications
“grayed out” and cannot                                                                              have been
be selected until at least                                                                           taken.”
                                                                                                                           Opening                                  Closing
one item is checked.                                                                                                       Scroll up so all info in the opened      Scrolling out of the area will close
                                                                                                     If indicated:         layer is on the screen. If overflow      the drawer. The just-closed item
                                                                                                     “See screen to        is required, fit the top of the          title should stay in place, and all
                                                                                                     order your            opened info the top of the screen.       other items move up to collapse.
                                                                                                     refills.”



    ©2008 Little Springs Design » Proprietary & Confidential                                                                                                                                                        18
                                                                                                                                                                                                                      29



    Learn big words.

    Even if you don’t annoy others with them, there are some
    great concepts out there.


g   This is a subset of the previous one, but is harder for some
    organizations and designers to grasp, so has been broken
    out.




obile
    If there are several variations of an on-screen module you
    design, make sure you express them as variations of each
    other so these are clear. This is a polymorphic item.

    Of course, if there is only one variant (omnimorphism) then
    that should be explicitly stated as well. Always keep in mind
    efficiency and re-use.
Design principles are project principles

    • Develop good
      objectives
    • Design holistically
    • Get everyone to buy
      into it
    • Own your design


                                                                    30



    What makes this work for me is that it’s all the same thing.
    I’ll admit I came to them from different approaches, but I’ve
    come to be aware that good principles of design are the
    same as the principles behind communicating design to im-


g   plementation teams.

    • Develop good design objectives for the project or product;
      no one elese’s will do.




obile
    • Design holistically; systems, not pages, not widgets, not
      buttons.
    • Stick to the principles and get everyone to buy into it.
    • Own your design, all the way through, so you want to im-
      prove it when the next release comes out.
Steven Hoober

                                         shoobe01@gmail.com

                                         816 210 0455

                                         @shoobe01

                                         shoobe01 on:

                                         www.donttouchme.com
                                         www.4ourth.com




           mobile design



    Some of this, a bunch of design tools, and all the patterns
    are upon this website at “fourth mobile” (with a number 4).

    That does include the full content of the book, so you don’t


g   have to wait to start getting all that information.

    It’s a wiki, so please add your own comments. It’s locked
    down, due to evil commie spam bots, but ask me and I’ll get




obile
    you credentials for it.

    I can take questions on other stuff. Like, if you are wonder-
    ing about a pattern, I can pop open the website, and we can
    talk about any of them.

Mais conteúdo relacionado

Mais de Steven Hoober

Mobile Usability and User Experience
Mobile Usability and User ExperienceMobile Usability and User Experience
Mobile Usability and User ExperienceSteven Hoober
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile DesignSteven Hoober
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile DesignSteven Hoober
 
UX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademyUX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademySteven Hoober
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsSteven Hoober
 
Flatly Authentic Digital Design
Flatly Authentic Digital DesignFlatly Authentic Digital Design
Flatly Authentic Digital DesignSteven Hoober
 
Phones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsPhones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsSteven Hoober
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsSteven Hoober
 
Fingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionFingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionSteven Hoober
 
Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Steven Hoober
 
API First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsAPI First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsSteven Hoober
 
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Steven Hoober
 
How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)Steven Hoober
 
Tools for Mobile UX Design
Tools for Mobile UX DesignTools for Mobile UX Design
Tools for Mobile UX DesignSteven Hoober
 
Getting Good UX Into Mobile
Getting Good UX Into MobileGetting Good UX Into Mobile
Getting Good UX Into MobileSteven Hoober
 
Entrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringEntrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringSteven Hoober
 
Design for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleDesign for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleSteven Hoober
 
Mobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemMobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemSteven Hoober
 
How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)Steven Hoober
 
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensThe Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensSteven Hoober
 

Mais de Steven Hoober (20)

Mobile Usability and User Experience
Mobile Usability and User ExperienceMobile Usability and User Experience
Mobile Usability and User Experience
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design
 
UX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademyUX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks Academy
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just Apps
 
Flatly Authentic Digital Design
Flatly Authentic Digital DesignFlatly Authentic Digital Design
Flatly Authentic Digital Design
 
Phones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsPhones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & Ecosystems
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just Apps
 
Fingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionFingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute version
 
Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...
 
API First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsAPI First: Creating ecosystems instead of products
API First: Creating ecosystems instead of products
 
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
 
How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)
 
Tools for Mobile UX Design
Tools for Mobile UX DesignTools for Mobile UX Design
Tools for Mobile UX Design
 
Getting Good UX Into Mobile
Getting Good UX Into MobileGetting Good UX Into Mobile
Getting Good UX Into Mobile
 
Entrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringEntrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestring
 
Design for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleDesign for Fingers, Thumbs & People
Design for Fingers, Thumbs & People
 
Mobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemMobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning Ecosystem
 
How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)
 
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensThe Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
 

Último

Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 

Último (20)

Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 

Avoiding the Heuristic Solution: Creating Inspiring Mobile Design with UX Principles

  • 1. Steven Hoober designing Float Mobile Learning Symposium 11 June 2011 mobile interfaces mobile design g obile
  • 2. Designing Mobile Interfaces www.4ourth.com/wiki Steven Hoober & Eric Berkman 2 I am here basically because I have been spending the last 9 months working a second full time job collecting around 60 patterns for mobiles. g When it comes out, it’ll be great. Buy one. Look for the book with the colorful parrot on the cover. It’ll be hard to miss. Actually, it’s a lovebird. No, I don’t know why. And it’s been obile years since authors got to choose their animal. Also, every bit of the patterns, and some other helpful informa- tion including over 70 links to platform-specific UI standards, templates and stencils are out there. Add to it if you want. I want to define, briefly, what a pattern means to me.
  • 3. Patterns are universal 3 These are just some of the devices I actually own. Here’s many of them if you want to rifle through. A common question, right after “why a lovebird,” is what phone I g carry. Doesn’t matter. Right now, a Droid 2 Global. But in the last 3 years obile I have carried -- full time, porting my number and everything -- 7 dif- ferent devices with 4 different OSs. Part-time, a lot more than that. I have TEN browsers on my handset now. I have a contract to do some browser design. You need to keep your hand in the market, and not just stick to your favorite device. Because design is not about one device, or brows- er, and even if /your design/ is, you are missing out on other good ideas.
  • 4. Patterns are generalized Vi Vi deo deo se se N r r et vic N et vic fli es fl e H ul x ... H ix s... u ul Pl u Am u Am Plu a s a s Yo zon Yo zon uT uT u u Sl be Sl be ac ac ke ke rM rM ed ed ia ia 4 Patterns are very non-specifc. Even talking about specific examples sometimes bothers me; just like when showing off your design everyone gets hung up in details. g I use illustrations. The top is the complete set of illlustrations to describe the Scroll pattern. The bottom is the same for Remote Gestures. obile Only when needed did I make an illustration including a real web page. And even that is drawn, to only focus on the dis- ussion points at hand. On the bottom, notice nothing is assumed; arrows indicate (generally) axes of movement, etc.
  • 5. Patterns are organized Directional Entry Input Method Indicator OK 3G 3:52PM Sign on to continue To prevent unauthorized access to your account, access has been locked. Password 123 TF43 Continue Exit 3G 3:52PM abc 3G 3:52PM 123 Going to be a little late picking you up. Go get Sign on to continue some coffee and I’ll text To prevent unauthorized access to your account, when getting clo access has been locked. Password TF43 3G 3:52PM Just passed through Asheville, Continue you still on? Exit Start selection Stuck in meetings, where are you Paste stopping tonight? Copy all abc Going to be a little late Focus & Cursors Cut all picking you up. Go get some coffee and I’ll text when getting clo Clear Entry 5 Part of the analysis of the patterns is grouping, and not just by immediate relations, but by higher level categories, and related tasks in other categories. g Building a taxonomy of patterns helps understand them (it certainly helped me) and is designed to help you find them and use them correctly. obile They also cross-link a lot.
  • 6. Patterns are explained 6 I’ve seen a number of new “pattern libraries” that simply take screenshots and post them by category. These are fine, as galleries of design. But they are not pat- g tern libraries. You need to know what the pattern is, and why it is, so you can do the right thing, explore the edges, and avoid the obile wrong things. There are nice simple pictures, bullets to follow, but also a LOT of other words. All of which matter.
  • 7. Patterns are best practices Not necessarily common practice. Contacts 21-25 of 125 Noce necessarily Jane Adams 816 210 0123 (M) Jamie Adamly popular, trendy. 913 111 0234 (H) Paula Adamowlsky 785 985 0345 (M) Mike Adamson 314 987 0456 (O) Mike Adler 210 618 0567 7 Patterns are not just collections of popular themes in the world of design, or what I have taken to calling “common practice.” g Fashion and interior design work differently, but UX is ev- idence-based. Just because it’s popular doesn’t make it right, and if there is clear evidence (from research, gener- ally) that this is wrong, I say so. obile Many patterns are improperly implemented in the majory of devices. Now, I didn’t buck the trend completely; this exam- ple is simply that you need to hide pointlessly repeating ava- tar stand-ins. But that’s an easy fix.
  • 8. Patterns are misunderstood • Reactionary • Single view • First solutions • Rote solutions • Too high level Obviously, this is not a key attribute of patterns that we want to have. But it’s true. Patterns are misunderstood, and therefore mis-used. • Design solutions are Reactionary and solve for point problems, instead of considering the entire system. 8 • Even when larger solutions are found, they are Single view or only for one screen, one device or one platform. • The first satisfactory solution is accepted, and rapidly be- comes entrenched. There should always be incentives to find the best possible solution. • There is likewise no incentive to find unique, interesting or dif- ferentiable solutions. The Rote solution, or the published pat- g tern, is used without modification (another reason I don’t like to give examples). • Patterns that do consider solutions generally sometimes lead to excessively High-level design, with no reasoning (or an incom- prehensible one). VizDs and developers won’t understand what obile part is important so will modify it and miss the point. I tend to call all of this the “heuristic solution.” It’s not /bad/ per se, in fact it checks all the boxes, but it’s not inspired, and is nev- er truly satisfactory. It might even pass CSAT measures, and show improvement. But it levels off and you never get up to that really top-tier, no matter what you do.
  • 9. Steven Hoober avoiding Float Mobile Learning Symposium 11 June 2011 the heuristic solution mobile design Speaking of CSAT, this is not your fault. It’s very, very institu- tionalized. Just a few weeks ago I was in a presentation by [a top g CSAT vendor]. The company had bought the extended anal- ysis, and had 120 pages of suggestions on how to fix the site. Which addressed each failure point as an individual problem, with an individual solution, and a best case from obile one industry leader or another. Then an executive got up and said that this gives us direc- tion and (and I wrote this down) “now there’s no need to think, explore and do user research to figure out which of these options is right.“ And since it’s exective direction, that’s what’s happening.
  • 10. Steven Hoober avoiding Float Mobile Learning Symposium 11 June 2011 the heuristic solution mobile design I originally had 20 slides of this stuff. but I realized I was go- ing too negative. If anyone disagrees with the premise, raise your hand, but I am otherwise just going to move on, to the solutions. g obile
  • 11. Be a conscious designer Know why you draw • Define • Codify • Compare • Choose • Combine • Expand 11 The key, to me, is that yoy be aware of why you are design- ing. Patterns and heuristics (as well as formal uses of these g methods, like heuristic evaluations) have value not just in the immediate use of them (e.g. does it pass the heuristic or not?) but in making the designer aware of the components, and the reasons they exist. obile Patterns are communicated in a consistent manner, allowing you to understand them, pick the right one form several op- tions, combine related ones, and add your own. This is also important later. When you need to revise, or when you are building the product.
  • 12. Design methodologies to success • Understand the problem • Leverage your team • No idea is worthy • Your competitors are not wizards • Embrace your constraints • Collaborate • Seek outside input 12 Design is not art. I have an art degree, so I know this. g Design has goals, that pay the bills when they succeed. You need to work with others to find these. Design is not just drawing the right line, or box, or button, obile but building an ecosystem to support that design, so you know what the right line, or box or button is. I wrote a whole book-length treatise on some of my favorite design practices. Dozens of people use it now. And over the years I have changed my mind enough, it’s out of date. These are the key objectives I work to now.
  • 13. Understand the problem Put the markers down. First time, every time, ask the customer, their workers, the users. Create objectives, and stick to them. 13 Before even starting to design anything, ask questions. Perform user interviews, ask the business what they want, and gather any other information about current and expected usage you can. g Develop measurable objectives, stick to them during design, and be sure to measure after it launches. Without feedback, you cannot learn. Try not to draw. This is hard to do, for me at least, but sketching con- obile cepts early will tend to lock you into that thinking. You might be on the wrong track. Keep away from this, and seek to understand the prob- lem space first. If you are wondering, this is a project I did for Hallmark, where one of the first things we did was have them to the office for two full days of interviews and data gathering, kicked off with a visit to a store, to really understand their current processes.
  • 14. Leverage your team Studio methods to foster competition, creation of new ideas. Manage them, to add challenge to each step. 14 Studio Methods The best ideas come from individuals, or small teams, work- ing independently. To get the most good, unique ideas, task g those individuals or small teams to develop quick, indepen- dent designs and regularly share and regroup, iterating to a final solution. obile
  • 15. No idea is worthy Don’t do a little dance for your great idea. I promise it has flaws. Consider components individually, and look for flaws. 15 ...So, everyone comes back with ideas and you review them. Then you evaluate not complete designs, but each compo- g nent. How does it fit into the overall concept... etc. Assign components that are similar to other designs, so they are combined in interesting ways, and people get outside obile their comfort zones. When working with design concepts, whether evaluating competitor sites, or with the design teams above -- remem- ber to approach the design from a modular point of view, and evaluate the suitability of each element to the overall goals, and process. Do not just accept (or reject) whole de- signs.
  • 16. No idea is worthy 16 Even with one idea, whether just trying to determine if the idea is good yourself, doing an eval or whatever, do not fall in love with the idea so much that you: 1) Look at it as a whole g 2) Miss the flaws. Deconstruct it, to understand what it is, what it is made of (patterns, components!) and then how it might NOT work. obile This is a challenge again, but who said it would be easy.
  • 17. There are no design wizards Inspiration is fine. Copying is pointless. Follow your process to find the right answer for your business, and the current world. 17 Your competitors and forefathers do not have the magic formula. Some just have better cultures of design. / Some just lucked into it. When required to look at the competition, or the great previous- g generation ideas, recognize that business models, customers, and goals are not the same over here, or these days. obile Inspiration is fine, but use good process to find the right answer. How many of you carry a Walkman phone? Of course, none. But for /years/ after the iPod came out, every pundit was sure Sony would come and crush the market. Didn’t happen, because Sony (apparently) builds good products, not good ecosystems. It seems no one turned their tape player era devices into digital era music.
  • 18. Embrace your constraints Brainstorming doesn’t work. Working within your constraints adds focus to any design session and fosters ideas. 18 Brainstorming is for suckers: Doesn’t work. Boosters will say it does, and the counter studies aren’t doing it right. To which I say: no one does it right, such that I never want to call it “brainstorming.” g • There are bad ideas • There are ideas that you shouldn’t even consider, as they are out of scope. obile Instead, I like to set preconditions and say Embrace your Constraints. Whether in concepting exercises, workshops or as individu- al designers, only work within the domain, set preconditions and remind everyone that the goals and objectives define the desired end state.
  • 19. Embrace your constraints 19 ... A common complaint about patterns is that they are too con- straining, and stifle creativity. g I never see this happen, except by those same designers who voice those complaints, when they take some great obile idea they see, and implement it without changes. I am all for borrowing good ideas, and being inspired. But using another pattern without knowledge is dumb. Embrace your constraints
  • 20. Collaborate Don’t just work together, collaborate. Use everyone’s skill, and knowledge, to find the best solution. 20 Collaborate I have a 10,000 character essay on this, which you can find on my blog. So this is necessarily a summary. If collaboration eludes you, or like I was, you get blamed for being not collaborative, check it out. g Design teams will, ideally, have a variety of individual skillsets, or at least multiple individuals, each with their own background and opinions. Use the individual skills of the team members to find solutions and explore obile concepts. Some other key attributes of good collaboration have been outlined above. Be a conscious designer, so you can discuss your ideas, or de- fend them. And not because you like it; defend only what you know to be true from experience. Collaboration can be very informal. When you get into it, you will start asking advice for even simple behaviors and problems. This sort of activ- ity is why some people like open plan offices. Just turn around and ask the team.
  • 21. Seek outside input Systems, process and business-intelligence knowledge is held by specialists you won’t see. Unless you go looking. 21 Beyond collaboration, get input from people outside the de- sign team. This is expecially good in big places that have been around for decades, or centuries. g Not everyone has all knowledge of the arbitrarily complex sys- tems we work on all too much, so cross-functional collabora- tion can have great value in confirming concepts, getting input on the viability of concepts, and discovering tangential solu- obile tions already considered or in progress somewhere else. This is not just useful for the gathering of information, which you should do up front, but to confirm your design works. Often, those same people can add more value after they see what you mean. “Oh, you are using that information. Have you talked to these guys about their project in the stores?” etc.
  • 22. And now your design is perfect Bitstream ThunderHawk 3.0 Detailed Design Document Novemb A Home > ii URL Entry What could possibly A2c URL entry (widget) A2f URL overs entry (widg go wrong? goog| google.com/news google.com/docs Input google.com/search?q=Xpe... The URL field has google.com/ig/setp?m_3_u... focus, and can be 7 Search for “goo” freely typed within. Autocomplete If this mode is Any free-entry field achieved by editing an (not just on this frame) Summary existing URL, the field will offer autocomplete The site name, TLD will be pre-populated values in a modified and feed icon whe with the existing select list below the needed, are display values. input field. again to clarify whi URL is being show Only a few items should be shown, to Default avoid scrolling. This screen (with no information populated) The last item should is the default entry always offer the ability point for any user 11:14P Cancel to perform an internet typing a new URL, any search (with the last time one has not been service used on the Modal visited yet. home page) for the This widget is mod value currently No other part of th entered. The 7 page can be Well, execution. accesskey can be accessed while thi used to perform this, item is opened. Select 11:14P Cancel without scrolling to the item. When scrolled down to an autocomplete function, the “Select” option/softkey will both Go 11:14P Cancel select the item and move to the next field of the URL. ©2008 Little Springs Design » Proprietary & Confidential 22 So, now you have a great design settled on, and bought into, and not just by the business owner, but by everyone in the whole place, hopefully. g And now the gulf of execution. No, not Don Norman’s gap between stimulus and understanding, but the difference be- tween what you give design and what comes out of the de- velopment team. obile And if I haven’t said it already, apologies to anyone who de- velops their own code, already has a terrific relationship with their developers, or believes your process solves all. I’ve been there and say: Some day it won’t.
  • 23. And now your design is perfect Bitstream ThunderHawk 3.0 Detailed Design Document Novemb A Home > ii URL Entry A2c URL entry A2f URL (widget) overs entry goog| (widg google.com/news google.com/docs Input google.com/search?q=Xpe... The URL field has google.com/ig/setp?m_3_u... focus, and can be 7 Search for “goo” freely typed within. Autocomplete If this mode is Any free-entry field achieved by editing an (not just on this frame) Summary existing URL, the field will offer autocomplete The site name, TLD will be pre-populated values in a modified and feed icon whe with the existing select list below the needed, are display values. input field. again to clarify whi URL is being show Only a few items should be shown, to Default avoid scrolling. This screen (with no information populated) The last item should is the default entry always offer the ability point for any user 11:14P Cancel to perform an internet typing a new URL, any search (with the last time one has not been service used on the Modal visited yet. home page) for the This widget is mod value currently No other part of th entered. The 7 page can be accesskey can be accessed while thi used to perform this, item is opened. Select 11:14P Cancel without scrolling to the item. When scrolled down to an autocomplete function, the “Select” option/softkey will both Go 11:14P Cancel select the item and move to the next field of the URL. ©2008 Little Springs Design » Proprietary & Confidential 23 In this example, I had a perfectly good relationship with the implementation team (and still work with them years later) and the first release simply didn’t follow specification. Like this, where the history is a dropdown, but as implemented it g went full-screen. obile
  • 24. user centered execution What we need to solve this are principles of what we can call “user-centric execution.” This is not yet a process, or series of fixed procedures, or a g manifesto or anythinf. It is possible it may never be. But like the principles, heuristics and patterns of design, the idea should be followed and there are best practices. obile First, to principles:
  • 25. Your design isn’t done UX teams can help: • Don’t walk away. • Set goals for everyone. • Make object-oriented designs. • Practice polymorphism. 25 g obile
  • 26. Don’t walk away It’s your project, so stick with it. • Answer questions. • Check on progress. • Solve problems. You are part of the implementation team. 26 Never walk away Always stick with the project through development, at least making yourself available for questions, rework, changes and testing. Ideally, become integrated into the team, and attend daily meetings, g test planning, and so on. Plan on this from the start so your schedule and budget accounts for it. obile You may not /actually/ be part of the implementation team, but try to become one. Or at least act like it. Go to meetings, etc. At the very least, put your name a contact information on the spec. It’ll work. You’ll get calls from random developers in Bangalore at 2 am, and be able to give them good information to make sure the project keeps going. After you get more sleep, you’ll be happy this happened.
  • 27. Set goals for everyone Turn priciples into metrics. Then measure them. Push for these to be the project level measure of success. 27 Assure goals are for everyone The business and user goals you should have developed at the beginning of the project must be translated into actual, g measurable metrics. Make sure that the whole organization has these goals as their top drivers, instead of cost savings, efficiency of devel- obile opers, or other internal measures. While “we’re building for the end user” may not resonate, remind everyone they work for the larger company, not just their department. You may also have to push to include the analytical tools to make sure they get built, not forgotten.
  • 28. DMC eReader User Experience Sitemap – Modular Reuse of Comp This is a map of the total expected pages, states or key functions. Process is not depicted. Many subsid- iary states are not depicted. See the legend for ele- ments within each page. Make object-oriented designs This is a map of the total expected pages, states or key functions. Process is not depicted. Many subsid- iary states are not depicted. See the legend for ele- ments within each page. K1 Groups J2 Friends • My Groups • Multi-select version • My Friends • • Friend’s Groups for use when chang- • • My Friend’s Friends • • Patterns are objects. • • • Friend List Groups ing context mode • • • Same • • • Related Groups • • • • (m620 request) • • • Different • • • • • Group Members K1 Groups J2 Friends • My Groups • Multi-select version • My Friends • • Friend’s Groups for use when chang- • • My Friend’s Friends • • • Friend List Groups • • • ing context mode • • Same • • • • • • K2 Group Details • Related Groups (m620 request) • • • • • • J3 Friend Detai • Different • Group Members See A1 See A1 Objects are re-usable K2 Group Details See A1 J3 Friend Detai See A1 components, whether in design or code. Legend of Modular Widgets m101 Notification Listing • • m220 Group Preview Pod • • • • m201 Group Listing • • • • m102 Notification List Long Legend of Modular Widgets • • m320 Friend Preview Pod m103 Read Notification m101 Notification Listing • m220 Group Preview Pod • • m301 Friend Listing • • • • • • • m201 Group Listing • • m 105 Create Annotation • • m102 Notification List Long m410 Profile Details • • m110 Notification Strip m320 Friend Preview Pod m103 Read Notification m501 Content Listing • • m301 Friend Listing • • • • m120 Annotations Bar • • • • • • • • • • • m 105 Create Annotation • m502 Content Large • m610 Search, Filter, Sort m410 Profile Details m520 Content Preview Pod m110 Notification Strip m620 Context Mode m120 Annotations Bar • • • • • • m501 Content Listing m590 Reader 28 • • • • • • • m660 Tags & Keywords • • m502 Content Large • m610 Search, Filter, Sort m901 Masthead/Nav Custom items m620 Context Mode m520 Content Preview Pod m902 Minimized Nav • • • • m590 Reader m660 Tags & Keywords Use object-oriented principles when discussing and delivering m901 Masthead/Nav m902 Minimized Nav Custom items -- DMC_Sitem DMC_Sitem The efficiencies and enforcement of consistency that compo- g nentized, object-oriented practice emphasizes in design are just as valuable to software developers and development pro- cess. obile Sometimes this is just called “modular re-use,” or other things, as “object oriented” is a larger set of principles (it all originated in development) and might confuse development. But I like the sound of it. The core concept is the same: Instead of designing every de- tail for every state, and building by state or building hundreds of items to bolt together, a few dozen modules are built and re- used over and over in common templates.
  • 29. Practice polymorphism Vocel Pill Phone v.2 Detailed Interaction Design Document May 13, 2008 Version 0501308 B Receiving & Viewing Alerts > vii Completion & Refills B14 Done taking medications for now Variations of objects Progress indicator Whether multi-step or not, a completion message is B14a As loaded Select for refill Preselected if indicated. Suppressed if unavailable. B14b Med ordering details Zolotran E are still the same shown here. Done! Dr. Revels All medications taken Med information 816-766-9801 {Call Number} Refill status The doctor and pharmacy Change to “Refill -------------------------------- name and number are 1 refill left needed!” if pharmacy displayed. CVS Pharmacy Johns... Next medication alert: object. pushes notice, or user 913-661-0500 {Call Number} has selected any in previous screens. 12:00pm Details B15 Ordering informtion $10.00 (copay) qty. 60 -------------------------------- Refills remaining, the price Medication details E2 and the quantity of a refill Pre-check... Order refills (if known) are displayed. ...any items noted by the user on previous screens. Zolotran E Pharmacy alerts Details B14b B14c Details – Order ready or pending Tell everyone, so If they think user is out, a ----------------------------------------- graphic appears. Amotab ZE Softkey (Options menu): Amotab ZE Home A1 “No,” not “zero” Dr. Revels Pending or ready Details B14c My Medications C4/C1 If the number of refills is zero, print it as “no” 816-766-9801 {Call Number} If already ordered, do not My Pharmacies A18/A19 variations are built as allow selection, replace Options Exit My Pill Boxes C9/C7 no refills left with info icon. Pill Book E1 Settings D1 Status {Change state} ----------------------------------------- Exit {Exit} If not available, reads Order ready Picked up {close frame} Non-orderable items CVS Pharmacy Johns... Items without a pharmacy • Frizilap “Order processing” and you designed them. relationship are displayed, the “picked up” button is 913-661-0500 {Call Number} but do not have a Details B14b Audio: suppressed. $10.00 (copay) qty. 60 checkbox to order online. Onload: Medication details E2 Success Button conditional Place orders The order button is “All medications “grayed out” and cannot have been be selected until at least taken.” Opening Closing one item is checked. Scroll up so all info in the opened Scrolling out of the area will close If indicated: layer is on the screen. If overflow the drawer. The just-closed item “See screen to is required, fit the top of the title should stay in place, and all order your opened info the top of the screen. other items move up to collapse. refills.” ©2008 Little Springs Design » Proprietary & Confidential 18 29 Learn big words. Even if you don’t annoy others with them, there are some great concepts out there. g This is a subset of the previous one, but is harder for some organizations and designers to grasp, so has been broken out. obile If there are several variations of an on-screen module you design, make sure you express them as variations of each other so these are clear. This is a polymorphic item. Of course, if there is only one variant (omnimorphism) then that should be explicitly stated as well. Always keep in mind efficiency and re-use.
  • 30. Design principles are project principles • Develop good objectives • Design holistically • Get everyone to buy into it • Own your design 30 What makes this work for me is that it’s all the same thing. I’ll admit I came to them from different approaches, but I’ve come to be aware that good principles of design are the same as the principles behind communicating design to im- g plementation teams. • Develop good design objectives for the project or product; no one elese’s will do. obile • Design holistically; systems, not pages, not widgets, not buttons. • Stick to the principles and get everyone to buy into it. • Own your design, all the way through, so you want to im- prove it when the next release comes out.
  • 31. Steven Hoober shoobe01@gmail.com 816 210 0455 @shoobe01 shoobe01 on: www.donttouchme.com www.4ourth.com mobile design Some of this, a bunch of design tools, and all the patterns are upon this website at “fourth mobile” (with a number 4). That does include the full content of the book, so you don’t g have to wait to start getting all that information. It’s a wiki, so please add your own comments. It’s locked down, due to evil commie spam bots, but ask me and I’ll get obile you credentials for it. I can take questions on other stuff. Like, if you are wonder- ing about a pattern, I can pop open the website, and we can talk about any of them.