More Videos

  • Intentional Design

    Great app experiences leap off the screen. They are dynamic, immersive, personal, and, above all else, the result of a strong and clear intent. Learn key techniques for being intentional with your design by choosing appropriate metaphors, making extreme choices, and making every interaction feel more authentic and natural.

    Resources

  • So hello everyone.My name is Doug LeMoine.My background is in interactiondesign.And here at Apple I'm on a teamof people who works withdevelopers like you.As a designer I focus on userinterfaces and the ideas todeliver great user experiencesto the people who use your apps.

    Today I'm here to talk aboutintent.

    I think there's a thread runningthrough great apps and reallygreat products.And it has to do with aconscious focus on people, onhumans, and what they want andwhat they really need.

    So I'm going to talk aboutfocusing on the person you wantto serve.And I'm going to focus on beingintentional.The intent that I'm interestedin talking about today is lessabout a specific design visionor a specific outcome and moreon a mindset.How to keep a sharp focus onthose people that you're tryingto reach and create apps thatfeel simple.And when an app feels simpleusers perceive it as natural, anextension of what they know.It feels like it arises fromtheir experience and it flowsnaturally from what they expect.

    So I know simple and natural aresort of designer cliches, we saythis stuff all the time.Like, what do we mean?I think these terms areshorthand for discussingqualities of apps that createfeelings of comfort andconfidence.

    When people feel comfortable andconfident, when we understandhow a thing works, we can movethrough it seamlessly withoutneeded to learn or figure itout.So intent is the kind of thingis hard to define but you knowit when you see it.

    So I'm going to show you someexamples of apps that I found inthe last year that reallydeliver real value to people andreally connect with them.

    And I'm going to talk about fiveelements of intentional designthat we can learn from theseapps and that you can apply toyour work.

    So let's dive in.

    So before mobile devices camearound when you traveled abroadyou'd carry a paper map.

    And the advantage of the papermap is that when you wouldapproach a local they wouldinstantly recognize what kind ofhelp you needed.

    So mobile maps have made peoplemore independent, right?We probably approach fewerlocals when we're travelingabroad.

    But in the same way that a papermap invites an interaction,there's an app called iTranslateConverse that makes it easy toapproach a local with youriPhone in your hand to ask aquestion or get directions.Some of you may have seen thison Monday night at the AppleDesign Awards.I'm going to go through a demoto really bring out what I thinkis really intentional about thisapp.

    So first of all there's verylittle UI.The screen is essentially onebig button.I tap and hold and starttalking. So I'll show you that in asecond.And to be clear the goal ofiTranslate Converse is to makeconversation easy.The developers have intendedthis app to be used together.So two people together, one ofwhom most likely has never usedthis app before, probably nevereven seen it.So I launched this app reallyfor real in in the Naples trainstation when I was trying to geton an express train to Rome andthe platforms were reallyconfusing.So I pulled out my phone, Ilaunched the app, and I walkedup to a conductor.So I said is this the expresstrain to Rome?The app translated it intoItalian and the conductor heard.

    Then I could flip the phonearound and again, what I findinteresting in this situationthat other person has probablynever seen this app before.And they speak in a languagethat I didn't speak but the appis smart enough to know thatit's ether going to English orItalian to listen for.

    So the conductor spoke into themicrophone.

    Platform Nine.And the app translates it forme. So in reality he spoke English.

    But he did want to see how theapp worked and I showed him andhe was impressed.I think the real beauty of thisis that you can make aconnection with a person, right?You can get on the right trainlike I did, but you also make ahuman connection in the process.So the developer's intent hereis to enable communicationbetween two people in real time.Just touch the screen and talk.So the first element ofintentional design is what I'mgoing to call radicalsimplification.

    So how did they do this?Well, I think they consideredthe context really well, thecontext that this will be usedin.

    They took into account where andwhen people would pull out theirphone and launch their app.You're probably in a foreigncountry, like this guy you'rejetlagged, lost, tired, yourhair is uncombed, your jacket isrumpled.

    I'm not even sure if that's amap that he's carrying at thismoment, it kind of looks like abook.

    So they remove the UI and allowpeople to focus on what theyneed, which is to findsomething, to ask a question, toget their bearings.

    And it's amazing how much anexperience can change whenactions are removed from the UI.So I want to show you anotherexample.

    This is an app called Vanido.It helps you learn how to sing.

    So if you're the kind of personwho wants to learn how to singwith literally no one hearingyour or judging you, this app isamazing.

    This is the UI.

    It's so simple.The app tracks the pitch of myvoice while I'm singing and it'scontinually giving me feedback.Am I hitting my notes or not?So let me show you.I'm actually not going to do alive demo.But I am going to sing alongbecause I've been practicing andI want you to see how it works.

    You can leave feedback in mysession.So what I love about Vanido isthat it has stripped away whatmusic education looks like,right? There's no charts or notes.It's colorful, it's animated,and it's fun.

    And you should have heard mesing before I started using thisapp.It really works.And there's only one interactiveelement on the screen whenyou're singing and it's way upat the top left.

    So you can hold your phone likea microphone and really belt itout without worrying aboutaccidentally exiting yourlesson.

    So this is radical simplification and that's what Imean, that's the firstmanifestation of intent andintentional design.

    Being radical means takingrisks, right?Removing a bunch of stuff fromthe UI could be jarring if youdon't do it right.But I think there's a way toreduce your risk.So next I want to talk aboutpeople and about orienting yourdesign around what people reallywant.So what do they want?I think this is worth exploringbecause it's almost neverobvious.

    The first needs that you seewhen you start kind of lookingat people and the users that youmight want to serve aresuperficial and you need to digpast those.They might be the first onesthat you think about addressingor they might be the ones thatpulled you into the problem inthe first place, but you need tokeep digging because thosesuperficial needs often maskdeeper needs, right, you couldsolve them but not really solvethe persons' problem.So you have to keep digging.The second element ofintentional design that I wantto get into here is called deepunderstanding.So knowing the person that youwant to reach and the actuallyproblem that they have.

    The deeper you dig the morelikely you are to see where thereal opportunity to meet theirneeds is.And the app that really showsthis off, in my opinion, iscalled Streaks Workout.

    So it's a workout app but I wantto go behind the scenes a littlebit.

    On the surface it looks likemany workout apps.It guides your workouts.This is the primary screen andit looks pretty simple.You pick a workout duration andyou go.But personally, I'll confessthat I don't love working outand I've tried many workout appsthat I just don't stick with andI want to thank any developersthat are here who have developedworkout apps that I've triedbecause I respect your effortand I'm really trying to get fitso thank you for that.But what I struggle with isstaying motivated.It's easy to get bored or burntout and this isn't an unknownproblem, right?Many people feel this sense ofinertia when facing somethingchallenging like a workout.

    So inertia, just to be clear, isa disinclination to move.And that's what I feel.I feel a sense of disinclinationwhen I think about working out.

    So I want to walk you throughhow Streaks Workout helps usershandle this.So when you first launch the appyou select movements that youwant to do, these exercisemovements on a screen like this.And there's dozens of thesethings. You can scroll down and pick asmany as you want.

    After that when you want tostart a workout there's just onetap. You just pick a duration and yougo.And the app does the rest.It auto selects from yourmovements and it picks asequence and then you're in theworkout.

    You guys psyched up?So let's fast forward a bit.Now I'm doing ten seconds ofcrunches.Crunches ten seconds.

    I'm actually not going to dothe crunches.But as you can see I can't seewhat's next, right?The question mark means it'srandom. It's a surprise.

    Burpees ten seconds.Yeah, I'm not going to dothose either.

    Specifically, what I think workswell is that the app confrontsthe inertia that people mightfeel by introducing a sense ofrandomness and removing work.

    So the developers recognize thateach step in the process ofdoing a workout requires achoice, requires someone tothink about what they want andthese decisions are not thingsthat everyone wants to make.

    So you only choose movementsonce.After that the app does it foryou.And you never choose thesequence or the reps so half ofthe work, half of the potentialinertia is gone.

    You could say that Streaksworkout -- it takes the work out--Of workouts!Really bad.

    They've taken half of the workout anyway.

    So this launch sequence revealsthe movements that you'll do andit helps each workout feel new.

    Of course there are probablymany of you in the audience thatperceive that this app actuallylacks essential features.Choosing reps is amazing.Picking a sequence isn't work.

    If this is you I have greatnews. There are lots of apps thatallow you to do those things.But I'm curious about whatinspired this.Whenever I see something uniquelike this I wonder what's behindit because it's unique and it'simplemented really well.So I asked the developers ofStreaks Workout.

    And it's such a common story tohear about how an app originatedwith an idea that came out ofprison.

    So specifically, their ideaoriginated with how inmates inprison keep workouts new andinteresting.So I want to walk you throughhow that works.So in prison you take a normaldeck of cards and at thebeginning of each workout youwould assign a movement to eachsuit. So today diamonds are crunches.

    The numbers on the cardsrepresent the number of reps permovement.So at the beginning of theworkout you'd put the deck facedown and you'd start drawing andeach card would deliver amovement and a rep count.OK, everyone eight crunches.

    So the original app concept wasa literal recreation of this.This is an early comp and theyalso prototyped shuffling andflipping cards to try to kind ofreplicate the origin of thisprison workout.But they quickly moved past theliteral approach.

    They didn't stick to the literaldeck of cards because it carriedtoo many constraints.Four suits would limit thenumber of movements that youcould do in each workout andpeople would somehow need toremember that diamondsrepresented crunches in thatparticular workout and that'swork, right?So instead they focused on thevalue that they wanted to bring.

    They wanted to help people makea habit of working out.

    So they acknowledged that peoplefelt inertia when they weregoing to launch a workout appand they removed as much aspossible that might trigger thatand they stayed true to theoriginal intent of the prisonworkout, which is that spirit ofrandomness and surprise.And that's what I mean by deepunderstanding.Knowing the person that you wantto reach and the actual problemthat they might have.So the superficial approach tothis workout would have beenjust a typical workout app,right? Of course people want to gethealthy.But what people really want, orwhat I really want anyway is toget past the boredom and thatinertia and they've addressedthat for me.

    So knowing users is nothing new.I'm guessing a lot of you herehave personas and marketsegments and you do surveys andother kinds of user researchfocus groups.Maybe you create experience mapsand customer journeys and userstories.All of those can be usefulmodels.

    But they have to feel authentic,right? They actually have to feel likepeople.

    That can make focus easier andit can help teams kind of cometogether around a vision.As long as you share a commonunderstanding and you feel areal empathy for the person thatyou're designing for.Those can work.

    But too often those artifacts ofneeds and goals and skills, theyjust feel artificial.

    They may not connect witheveryone.They feel complicated or distantor corny.So for a moment I want to talkabout how much easier it is tomake some something when youreally care about the personyou're making it for.

    So I first heard about thisstory that I'm going to tell youin a book. It's by a guy named Alan Cooper,he's a software developer fromthe early days, and his claim tofame is that he created aprototype that became VisualBasic.And this is an actual pixelresolution of Visual Basic 1.0on a 4K display.It's pretty amazing.

    So Alan built this with a smallteam and as he did it he beganto recognize a problem inmaintaining a focus on whatpeople really want.And he tells this great story ina book about another inventionand that story is a parable ofhow powerful knowing people canbe, knowing the person thatyou're designing for.So apologies if I got your hopesup about Visual Basic.I'm actually not going to talkabout that.I want to focus on this storyand kind of extend it a littlebit.

    So the invention that he talksabout is the RollaboardSuitcase.So this is the patent form forthe Rollaboard.

    So nowadays the suitcase mightseem pretty unremarkable.

    For most of us this is just asuitcase, big deal.

    But it actually hasn't beenaround for that long.The patent was filed in 1989.People have been travelingforever though.So why did it take so long todesign something so obvious?The inventor was a guy namedRobert Plath.I'm guessing not a householdname, but more on that in aminute.

    So what was innovative aboutthis? Well, I think the innovationsare subtle.It wasn't the wheels.Many patents had been filed forwheeled suitcases before.This is from the '70s.So the wheels are underneath andit's also got some kind of leashthing.

    Suitcase manufactures had beentrying to put wheels onsuitcases as far back as the'40s and this actually has somekind of other leash thing, somegrabber thing that you can seeright there.So clearly people have beentrying to figure out a way tonot carry heavy things.

    So if you worked in the luggageindustry in 1989, you probablythought you'd already innovated.

    You weren't worried about thisnew patent I'm guessing.But we all know what happened,right? The new design became the defacto design of suitcases.And the improvements inretrospect are totally obvious.There's a handle at the top sothe whole suitcase it orientedto be upright.It's easy to grab and pull andpivot.That is the evolution of theleash.

    Second the wheels, right?The wheels are placed on theedge so they're only fullyengaged when the suitcase istilted.And finally the size, it's smallenough to lift and place in anoverhead bin.So nothing particularlyrevolutionary but the inventorRobert Plath made each decisionto serve a really specificperson, a person who traveledfor a living.Robert Plath was a pilot forNorthwest Airlines.He intimately knew the pain oflugging and lifting heavythings. He did it every day.

    And he deeply understood whatpeople like him wanted, to movewith ease while lookingprofessional, and he madesomething perfectly suited forthat.

    So what I find reallyinteresting is that at thetimes, 1989, there were onlyabout 100,000 travelprofessionals as the Census Datacalled them, but pilots, flightattendants, people in the travelindustry.That 100,000 might seem like alot, but when you compare thatnumber to the overall market ofpeople who traveled a coupletimes a year, just like morethan 100 million at the time,and that's just Census Data fromthe U.S., his target user,quote-unquote, was a reallyspecific person that representedonly 0.1% of 1% of the market.

    So what I'm saying is thattypical methods of marketidentification probably wouldnot have led Robert Plath tofocus so narrowly.

    He focused on an extreme usecase, a person who traveled allthe time.So I'm using extremeintentionally to emphasize thathe focused on what we might callan edge case.The market size was really smalland his solution was kind ofwhacky.It looked really different.It implied a new kind of defaultway of interacting with yourluggage.

    So he focused on the needs ofpeople he intimately knew andthat extreme focus allowed thereal needs of a lot of people tocome to the surface.So his focus gave him thefreedom to arrive at an extremesolution.

    So the third element of intentis extreme focus.So what might seem like an edgecase could be what frees you toreorient or refocus your design.Make it more coherent.Make it simpler.And therefore actually reachmore people.

    So let's relate extreme to ourwork. Is there a way to relate extremeto the work that we do?I think there is and I thinkbeing extreme can be reallyworthwhile but you have to nailit.

    So you might not immediatelyassociate the words extreme andweather app.But Carrot Weather is a reallycompelling illustration of beingextreme.

    So on the surface it's a weatherapp.So let's check the weather forecast.

    I wonder how many licks ittakes to get to the center of ahuman skull.

    So right, they're not typicalforecasts.The voice of Carrot, which isthe robotic voice that youheard, has personality andattitude and a little bit of anedge. You probably think this sunshinemeans that things are startingto look up for you.They're not.

    So you might ask is that even aforecast ? So sometimes when I read thesethings I just feel like it'sbeing mean to me.It's definitely got an attitudebut the key information is superreadable and the screen isreally nicely organized.

    The color scheme changesaccording to the time of day andit's really playful.And it's got those illustrationsalong the bottom that aresometimes bizarre and oftenreally funny.

    So the forecast is only one ofquite a few unique elements inthe app.So I ask the developer whosename is Brian Mueller, to helpme understand where this camefrom and he told me somethinginteresting.He said that when we writes inthe voice of Carrot, he'schanneling the personalities ofpeople really close to him --his wife, his sister, and hismom.And these forecasts are a formof conversation with them.So the lesson is that the peoplethat Brian is trying to reach,the people that he's speaking towith these forecasts areactually really specific.And I think that's what makeshis apps stand out.The edginess helps him connectwith people.And it's not surprising to methat he's had so much success inthe app store.

    The personal touch is whatallows his app to deeply connectwith the rest of us.Obviously personality isn't thesole province of weather apps.All apps can deliver somethinglike this.All apps can feel handcraftedand special.And that's the fourth element ofintent that I want to talkabout. Intentionally designed apps feelpersonal.They create a personalconnection.

    So the point isn't to spice upyour copy, right?The point is that spicy copy inthe right context feelsmemorable.

    And it must be said that thepersonality of Carrot isprobably not for everyone.

    And I talked with Brian hecommented on this.

    So you can probably imagine theemail and Tweets that he getsfrom people who are surprised orupset or offended by theforecast after they download theapp. Like, you know, how dare heinsult meteorologists like this?So he offers an olive branch --To these disgruntled souls.They can adjust the personalityfrom the default, which as yousaw was Homicidal.You could go the left for lessedge and to the right for more.But the bottom line just to beclear is that edgy text would beless funny or perhaps not funnyat all if the app didn't work,right? It's a good weather app withsimple navigation and a playfulUI.

    The extreme personality thoughis what gives life and sprit toit. So when I get a Carrotnotification it's similar to thefeeling that I have when I goout to a local restaurant or barwhere everyone knows my name,right? It's enjoyable, it's personal,and it's comfortable.

    So we've got four things thatcharacterize intent and thebehavior of intentionallydesigned apps.And I want to flip things aroundfor a moment and talk about whathappens when you're notintentional.In other words, where does badUI come from?So I think the best friends andthe worst enemies to designingintentionally are all of thesystems and patterns that we'veinternalized as we've gainedexperience in the work that wedo.

    This experience allows us tomake decisions quickly and to bereally efficient in that work.

    But these familiar patterns getin the way of our ability toreckon with new problems.Sometimes we won't evenrecognize that the problems arenew and this is true of anyonewho has tried to make anythingnew ever, right?Suitcases once had a form.They were rectangular and thelong side was down.

    That form was adjusted but thefundamental elements were alwaystaken as a given.The wheels were tacked on butthe overall form stayed thesame.

    For decades smart peopleconsidered this form and stoppedthere.It took someone with a verysharp focus on an extremeaudience to break out of thispattern, right, and turn theform on it's head .

    Thank you.So we apply patternsautomatically.Our brains make connectionsquickly and that has benefits,right? It helps us work efficiently.It helps us be consistent, butit also prevents us fromnoticing the obvious andchallenging it, askingfundamental questions, why doesthis thing need to be this way?So as a UI designer it's reallytempting always to draw onfamiliar UI elements to solvenew problems.I'm sure you're familiar withthe house icon.It made sense in a desktopbrowser.A browser is a frame for theInternet universe.A browser home button will liftyou out of whatever corner ofthe dark web that you foundyourself in and allows you toget out of there.

    So that notion of home wasextended to iPhone and thebehavior is similar.

    It's a shortcut, it's an easybutton, home is a startingplace, and unlike in real life,home is a place that you canalways return to with a simplegesture.

    You can go home whenever youwant.

    So home is also a familiarnotion in the finder.Here the spirit is more like --you followed the river to it'sheadwaters.

    On the Mac, home represents acontainer.Everything is in here.You don't need to look anywhereelse.you have reached the source.

    Home in these contexts offersreliability, safety, an abilityto return as you navigateoutward.And it's clear obvious utilityelsewhere on the platform mightseem like a reasonable choice asa tab bar icon, right?Except there's a crucialdifference in using the notionof home in a tab bar.

    To be blunt, an app isn't aframe containing god knows what.

    A typical app offers specificthings, specific contents,specific tools, specificactions.And a tab bar is a quickexpression of the overallutility of your app.It's a high-level map of yourapp. So let's use an example that'sclose to home -- the tab bar ofWWDC app.

    So we all can get a quickunderstanding of the scope ofinformation that's available inthe app simply by scanning thetab bar.

    We can guess at what contentmight be in each tab.So tab bar icons and tab barlabels should be as direct aspossible.

    And this directness will thenlimit what each tab can containand that's great.

    Directness createspredictability.So the app may not doeverything, right, no app doeseverything.

    But people won't have to huntaround to figure out what itdoes and doesn't do.

    So when I talk about home I'mtalking about a metaphor,homeland, a home base.

    So let's just dig in to why homedoesn't work.First it's overly broad and itfeels generic.

    And I think it's a copout.You're avoiding a decision bynaming a tab Home.The perceived comforts of homeas an icon in a label aregetting in the way of beingdirect, of clearly and directlycommunicating the scope ofwhat's in your app.If your app is a meditation appand offers content related tomeditating and building ameditation practice, imagine theimpression that it would leaveon people if not only the tabbar was more direct, but thedirectness of the tab barenforced a simplicity and anorder on the content that youdisplay.And that content was predictableand directly organized.

    So indirect labels feelconventional and they feel safebut they mask utility.Like a storage locker you'reputting your valuable stuffbehind a door that's anonymousand inscrutable.And this is what I mean byunintentional design.

    No one intends to be indirect.

    Being intentional will lead tocleaner and clearercommunication.And this brings me to my finalelement of intent.Direct communication.Intentionally design things.Clearly communicate to thepeople who use them.And the way to achieve this isto draw on what people learn onthe platform and in the world.So I want to show you a coupleof last quick examples of appsthat rely on a familiar form tomake interactions feel useful.

    So the core concept of an appcalled Tinycards is to bringflashcards on to a mobileadvice. You can use them to memorizepretty much anything --languages, flowers, leaves,almost anything.So the interaction within theapp is super direct.People expect cards to havedimension, so that periodicpulse is inviting you tointeract with the card.

    You flip the card over bytapping it.So these cards have two sides.

    They've respected the metaphorof the card.

    People appreciate that.So the entire experience ofTinycards is based on quicklyflicking through these cards asyou commit things to memory.Like for instance the flags ofCanadian provinces.Does anyone know this one?Ontario. Let's try it.

    Oh my gosh.

    You've done that quiz before,right?So the UI of Tinycards is soclear you don't even think aboutit.Working with cards feelscompletely natural and you canjust focus on your goal, whichis learning stuff.

    So what Tinycards demonstratesto me is that if you implement ametaphor well, people willinstantly become immersed.They'll forget that they're eveninteracting with a UI.

    And once they're immersed, youeven have the opportunity toextend the metaphor, to reallysurprise and even delightpeople.

    So I want to show you a game.It's called Gorogoa and itextends the metaphor of the cardin a way that I feel likecreates a truly uniqueexperience.

    So Gorogoa is a puzzle game.You move cards around a grid andyou advance in the game and inthe story by getting them intothe right positions.But you could see that thesecards do things that no actualcards can do.They can be torn off and asyou'll see in a moment they canactually stitch themselvestogether into a scene.

    Yeah, this is an incrediblegame.And it's a great example of howyou can extend the metaphorfarther than you might think andcreate something truly amazing.This moment right here whereyou've got this card metaphorthat suddenly kind ofdisappears, that's purelydelightful and it's really Ithink a great testament to howwell he's implemented themetaphor of cards.

    Bending and extending metaphorsdoesn't work if the resultdoesn't extend the utility, orvalue, or delight of your app.That's why the home tab on thetab bar doesn't work, right?It doesn't extend the utility ofthe app or create any additionalvalue.

    So the last app I want to showyou is an example that combinesmetaphors from the real anddigital world in a really simpleway. It's called Rosarium.Yeah.

    I think the developers are here.It's a rosary that you wear onyour wrist and I believe that isLatin and the font is reallycommunicating to me that it'sLatin anyway.So the beads are represented bycircles. Each time you turn the digitalcrown you get a slight haptictab.So when I met the developersthey told me that they wereinspired by the similaritybetween the feel of rotating thedigital crown and the feel of anactual rosary bead.So the app has translated thisreal world object, just a strandof beads, into the virtual worldin a way that feels reallynatural.

    So I'm no suggesting that it's areplacement for rosary beads orany prayer beads because thephysical beads can have deep,you know, personal meaning.But I love how they'vethoughtfully carried that realworld experience into a digitalform in a way that's soradically simple and clear.

    And I think it reallyillustrates each of the pointsthat I made earlier -- thesimplicity and the understandingof people, the extreme kind offocus on a problem and thedirect communication of asolution.And this is intent in action.This is being intentional indesign. It's a matter of turning off theautomatic part of your brain, ofslowing down, and challengingthe obvious.

    It requires a level of intentionthat will enable your decisionsto become more conscious and foryou to become aware of thepatterns and the familiar thingsthat might get in the way andblock you and focus on people,right? The people that you want toserve, the person who inspiresyou, the family member whoallows you to be the bestversion of yourself, thecoworkers with whom you share areal need for something better,and you can take thatinspiration and use it todiscover newer and better waysto connect with people and tocreate something really great.

    So you can check out more aboutmy session here.Thank you very much.And please, please stick aroundfor the next talk.The next talk is designing fluidinterfaces.It's a great talk.Easily one of the top sevendesign talks at this year'sWWDC.So thank you.

    [ Applause ]