marco paglia: hi, everybody. and welcome to this workshop. my name is marco, and i'man android designer. or even better, my name ismarco, and i'm proud to be an android designer. [applause] marco paglia: we havea good crowd. i mean, let's face it,android design is just becoming amazing.
when i look at the applicationsthat we have in our market, they arejust becoming astounding day by day. i'm so happy about wherewe're going. i really feel that theintroduction of the android style guide was a massivestep forward in the right direction. google cares aboutdesign as well. i mean, today you could havehad all sessions just about
design, if you wanted to. raise your hands. how many people havebeen to design talk during this google i/o? that's what i'm talking about. design and android are just afantastic synergy together. and with the right development,we can build the most amazing platform ever. i'm not alone runningthis workshop.
i have a lot of design teamhere with me to help out. and let them introducefor themselves. richard fulcher: hi. i'm rich fulcher. you may remember me from45 minutes ago. i'm an interaction designer onthe android design team. jeremy lyon: hi. i'm jeremy lyon. i'm also an interactiondesigner on the
android design team. rachel garb: hi. i'm rachel garb, also aninteraction designer on the android team. jens nagle: i'm jens nagle,interaction designer, android design team. audience: [laughter] audience: thanks, rich. peter ingham: hello.
i'm peter ingham, a visualdesigner on the audience: woo. [laughter] marco paglia: woo. guenther beyer: my name'sguenther beyer. i'm a designer at gigbeat. michael novak: i'm mike novak,the developer of gigbeat. eric burke: my nameis eric burke. i'm with square.
and i'm not a designer. marco paglia: so whyare we here today? why are we runningthis workshop? as many of you, i just likereading blogs and finding out things about android and allthe discussions that people are having about the patternsand the android style guide and everything. and there's a particular topicthat i was really caught by and really dragged my attentioninto, which is,
today, we see a lot of newapplications coming up. we have tons of applicationscoming up every day. we have very popularapplications that are coming to android. and people discuss about whetherthey are using the right patterns, whether theyshould use the right pattern, if they are not usingthe right pattern, and things like that. there's a particular questionthat comes up once in a while.
and it really made me thinkabout it, which is, if every application is using the styleguide, it doesn't mean we're going to have all applicationslook the same. well, the answer is,obviously, not. quite the opposite, actually. i really believe that androidis the ecosystem out there that offers the maximumflexibility to really make your brand to shine and bedifferent from all the other applications in the market.
so there's something veryimportant that we need to understand. being consistent and adaptingthe right pattern to your application, it doesn't meanthat your application has to be looking the samelike others. you have many, manyways to make your application to look special. i mean, who would like to havean ecosystem just to be very boring and looking the same?
think about human beings. we're all different. if you look around, there's noone that looks like you. we also dress up differently to distinguish from one another. when we're outside google i/o.and i think this is the way that i'd like our ecosystems tobe, to have very different application. at the same time, human beingshave very consistent patterns,
even if you don't speak thelanguage of someone else. i'm sure people here comefrom all over the world. i come from italy. and we may not knowthe same language. but if i smile, or if i getangry, or if i raise up my voice, people do understandwhat i mean. and so we want our applicationto have that standard, consistent way of behaving to beconsistent across android. so how do we do it?
well, the style guide is a greatexample of how you need to make certain thingsvery consistent. because when they're notconsistent, we just break the user maintained model. learning an ecosystem, learningan operating system is difficult. you start playing with it, youstart swiping around, you start learning some gestures. and when not all theapplications use them
consistently, then youjust don't know how to operate any more. so you want to know wheremy settings are. you want to know that, if i seedifferent views next to each other, i can swipethrough it. you want to know where theaction bar is with all the main actions. but at the same time, youwant to make it special. and there are ways to do it.
you can play with graphics. you can play with gradients. it's not true that allapplications on android has to be flat. like we like the style, so weadopt it that way in the core applications. but, by any means, if your brandis soft and wants to have gradients and littletreatment in the action bars and across the ui,that's welcome.
we want an ecosystem tobe very different. the way your little elementsanimate from one another, if i tap on a list view, how does itzoom into a full view, this is all up to you. and i think the more,the merrier. the more diversity we can findin our ecosystem, the more people are going to find littlespecial things to make their application evenmore interesting. and i love to see itwhen it happens.
so this is why we're here. we want to deliver thissimple message. designing for android allows youto have applications that feels unique, thatfeels beautiful. and at the same time,they're very consistent and easy to use. so to do that, this time weorganize the workshop. in fact, this is notreally a talk. i don't even have slides.
but we have people comingup on stage later. we have five developers that aregoing to be showing their applications and going to betalking to us about the challenges that they face. and then we're going to haveopen discussions around what we suggest, whatthey could do. no dogma, though, just thinkingabout possibilities and really have an interestingand nice friendly talk about the challenges that thepatterns offer.
before we get to that, though,i'm really, really excited to have two guest speakershere on stage with us. they introduced themselvesbefore. they are representative of twoof my favorite applications. we have square andwe have gigbeat. so we're going to heartheir story. most recently, they have createdtheir applications following, most recently,android style guide pattern. so we're going to hear what theydid and why they did it.
and i think the resultis excellent. they really are applicationsthat feel so different from one another, although they'revery consistent in the way you use them. and i love that. so without further ado, let meintroduce our first guest speaker, eric burke. eric burke: ok. so like i said, i amnot a designer.
i am a software engineer. i've been with square for about2 and 1/2 years now. and what a lot of you mightnot know is, when i joined square, there were only twoof us creating the android it was bob lee and myself. and we made the first version ofthe square app on android. and we're very proud of the factthat, on the day that our first iphone app was releasedpublicly, we also released our android app--
same day. that was two years ago. eric burke: so i think morecompanies should do the same. we just released an upgradeto pay with square a couple of weeks ago. again, same day,both platforms. earlier this week, we releasedan upgrade to our square card reader product. we just re-skinned itto use the ice cream
sandwich and holo look. so we're very proud of thework we're doing here. so without further ado, let'stake a little history lesson and look at where pay withsquare originated. this was our card caseapplication. this is what our app usedto look like on android. this was well before androiddesign guidelines were out. this is what we call askeuomorphic design. so skeuomorphic means you'retrying to make an application
look like a real world object. now in this case, obviously,it looks like this gorgeous leather wallet. and it has cards in there. and it looks likesomething real. it's pretty. people really loved the look. but from a design perspective,it has a lot of interaction problems.
so first of all, let's lookat technically on android. this is really hardto pull off. i worked a lot of hours tryingto get this thing to look right on android. and i think, technically,it just slowed us down. also, as more and more screensizes come out, stretching a bitmap like this ends upproducing fuzzy graphics, and that's not cool. from a usability perspective,you can only hold, really,
four cards. the top card, that's yourmerchant card, that actually has a hologram in the corner. and i think apple copied us. when they move their phone, theyhave a little hologram on their little, shiny,silver thing. we did that in our app also. but for the merchants, youcan only hold four cards. so that's a problemscalability-wise.
also, to actually make a paymentwith this product, you had to first drag a cardout of the pocket and then press a button. so it's multiple tapsjust to perform the most basic operation. to see nearby merchants,you had to tap the explore places button. again, it's multiple taps toget to anywhere in the app. well, the good thingis, it's pretty.
the problems are, it requiresmultiple taps to do anything. it's technically verychallenging. it slows us down. and as phones get bigger,it looks more fuzzy. so we threw it all away. we completely redid it. and this is what pay withsquare looks like today. these are actually some ofthe secondary screens. so on the left, you seethe twitter view.
and as you can see, ithas an action bar. it has a view pager. you can do the whole horizontalswipe gesture. on the right, i'll getmore into the detail on that in a minute. it's definitely anandroid app now. no one is going to look atthis and say that's a skeuomorphic design orthat's an iphone app. it looks totally like android.
what i'm not showing here is,when we first started prototyping this, we wentwith a dark theme. so it was a lot ofblack on black. and it looked kind of dreary. it looked, maybe, the app feellike you're in a nightclub. so we ended up goingwith a light theme. and i think it's totallyappropriate for a dark theme in a music player app,which you're going to see in a minute.
but for a payments application,the light theme worked better. we're also using darkaction bars. in the original iteration ofthis, the action bar color would change, dependingon what merchant you were looking at. each merchant had a theme anda graphic, so it became more of a showcase forthe merchants. but i think we came to theconclusion that it looked a
little gaudy to be changingthe color constantly. and again, that was really nastyto implement, because you can't change the theme ofan activity after you've launched it, withoutsome heroic hacks. so we went back to a morestreamlined, basic approach with the light theme andthe dark action bar. so i really like whereit landed. let's walk through the productand see what it actually does. so obviously, we allwant bacon, right?
audience: right. eric burke: yeah. a round of applause for bacon. so this is all aboutmaking payments. so when you pull out the appand launch it, this is your home screen. this is the directory view. at the top, you see,what we call, the curated merchants view.
these are some of ourfeatured merchants. it's a gallery that slidesfrom left to right. it's full-bleed image. it has the little overlayin the middle. but it just is a gorgeousrepresentation of the best merchants in the system. below that, we havea list view that shows nearby merchants. and you can fit a lot moreinformation into this design.
you can fit in informationabout specials. you can fit in functionalityto open a tab. you can fit in the distance. so contrast this with theoriginal card case design where it was this gorgeous pieceof leather with cards. but none of that wasever actionable. you had to go through multipletaps to actually do anything. so a key part of this design isto reduce friction and make the payment experienceeffortless.
so by reducing the number oftaps, fitting more information into the main screen, the wholeuser interface becomes a lot more usable. so when you want yourbacon, you tap the button to open a tab. and then you walk up tothe bacon bacon truck. you place your order. and then you say,put it on eric. and they will see my photoon their register,
along with my name. and they can tap a buttonto charge me. and then i can put my phoneaway, and i'm done. and i have my delicious bacon. and i've made a payment. so internally at square, we talka lot about the notion of humanizing payments. we'd rather the paymentexperience be about an exchange between two people,rather than an exchange
between you and thetechnology. so we really want to reduce thenumber of taps and make the app as effortlessas possible. so we can take thisone step farther. we can actually enable a featurecalled auto tab. so this app is deceptively-- it looks like a reallysimple app. there are only a few screens inthe app, but it's actually, technically, really difficultto code something like this.
so with auto tabs, you canput your phone away. and then, as you're walkingaround, when you get within a certain radius of your favoritemerchant, it'll automatically open a tab. so if i like coffee, i can setup an auto tab for sightglass coffee, which is just a fewblocks away from here. i highly recommend it. also san francisco bakingcompany is another great merchant that's afew blocks away.
so i think these smallbusinesses would be thrilled if 700 or 800 people installedthe app and just did a cash mob and walked in and orderedthese amazing cookies or this amazing coffee. so that's my product plug. but with auto tabs,it's the ultimate. you never have to touchyour phone. so the technologyjust disappears. so we put a lot of emphasis onpixel pushing, and making
everything the rightcolors, and getting the alignment perfect. but in reality, our goal is tomake the interface vanish completely. and that's the goal of pay withsquare, is just to make it go away. so we did bring cardsback in the latest iteration of the app. so the first screen shot,i showed you a
skeuomorphic design. we got rid of the cards. and what we found was that theuser interface was a little bit boring. and it was just a bunch ofimages with list views. so we brought back, inthe latest iteration, the notion of cards. and i really love theway these look. they're not shaped likea credit card.
they're actually shaped like asquare with rounded corners. we do that a lot in our website and our applications, because our company's calledsquare and that's what our logo looks like. and i made a little squarerobot here for my shirt. so cards are great because it'ssomething tangible that humans can relate to. it's something thatyou can touch. you can share cards.
you'll see the same card on theweb site, in your android phone, on the iphone. you can email cards. this is a showcase for themerchants, so the merchant's photos show up on here. the merchants can putmenus on here. eventually, we're going tohave more information, directions to the merchant. you can have punch cards,specials, discounts,
first-visit rewards. all that stuff showsup on the card. so a card is a concrete,tangible thing in your ui that users can explore andplay around with. and it's a delightful way todo the user interface. but even with the cards,it's not designed to be skeuomorphic. it's not designed to straytoo far from an android-inspired feel.
so i really like whatwe did here. for images, getting alittle geeky here. the server providesthe images to us. since there's so many differentscreen sizes, we actually have a library. it's internal. i can't really share itwith you right now. but we actually ask our server,give me the image at this exact pixel widthand height.
and then we also ask the serverto do layering and compositing. so the server can add the littlesquare and the borders and rounded cornersand all that. and then, that way, it returnsthe exact right image for the android device. in the list view there, yousee, again, we're using squares with rounded corners. i know the android look is more
towards full-bleed images. and we did try that in someearly iterations. we just never could get it tolook quite right for our taste, so we went withthe rounded corners. i think that's ok. no one's really screamed at usfor not doing full-bleed images in lists. i think you have somelatitude there. launcher shortcuts, we do thisin our android client.
we don't do this, obviously,in our iphone client, because you can't. this is really cool, though. you can just tapthe icon in the upper-right interaction bar. and you can add a shortcut toyour favorite merchant. it puts it on your desktop. so there i have a baconbacon link. so now, whenever i'm near thetruck, i can just tap that
icon and open a tab at thebacon bacon truck. we take advantage of androidnotifications pretty heavily. so whenever you have a tab open,a notification is open. so you can take a phone callwhile you're waiting in line, or browse the web, whatever. you can always comeback to your tab. and something i'm not showinghere is, once your tab is closed, you can leave a tip. so you can order your coffee,drink it, walk away.
and then, 10 minutes later, youcan pull out your phone and say, oh, that was reallygreat coffee, i want to leave a tip. and you can do it rightthere from your phone. merchants love to get tips. so when i saw the keynote thefirst day, the very first thing i saw, when i saw thenotification enhancements, is we should put tippingin there. so i'm really excited aboutjelly bean and being able to
take advantage of that evenfurther than what we do now. so for sharing, youcan share cards. we use android's normalsharing mechanism. we don't try to embed a twitterlog-in into our app and a facebook log-in andall those stupid things that other apps do. this actually ends up being morepowerful, because you can share with things younever even imagined. because i have the barcode scanner app
installed on my phone-- i was actually givinga demo of the app to my boss, jack dorsey. and he looked at it. and when i shared something,he said, what is that? why does it say bar code? i was like, i have no idea. i've never seen that. let's try it out.
so i tapped the button, and itgenerates this bar code. and then he pulls out hisphone, and he scans it. and sure enough, i just shareda card with a bar code. and we never wrote a singleline of code to do that. so that was pretty amazing. and then, just to wrap it up,if you go to your account settings, this looks more likea stock holo look and feel. this is a visual cue thatyou're kind of in the underbelly of the app messingwith your account settings.
so our philosophy at squareis we want our app to look exactly the same on everysingle android phone. so we back-ported asmuch as possible. we actually hired jakewharton, who wrote actionbarsherlock. and it's a great library. eric burke: yes. thank you, jake. and we're actually committedto keeping that open source
and continuing to innovateon that. and we've got somemore open source libraries coming up soon. we use a compatibility library,fragments, loaders, all that stuff. so no matter what android phoneyou're on, it's going to look exactly the same andprovide a consistent user experience. so that is pay with square.
thank you. marco paglia: let's have alittle chat here about what we saw, what we like. probably everything. i think the application we justsaw is just so awesome. and the message thati take out of it is rounded squares are fine. there's nothing badabout them. it's really about yourapplications.
it's how you feel about it. and you saw this applicationis pretty special. it has cards. it has a lot of differentmetaphors that you haven't seen much before jelly bean onandroid, but still feels very, very consistent withour ecosystem. there's one thing that iparticularly loved about it, which is the use ofthe big pictures. this is something that i cannever enforce enough.
pictures can never be too big. it's a sort of mantra of mine. and if you have them,just use them. and thinking about anapplication that is so human, so human that you don't evenhave to look at it when you pay, just providing the simplething, the simple, attractive, big picture of the bar, is justsomething that really, really makes your applicationshine. is there any question foreric from the audience?
we have microphones there. so when you feel like you wantto participate and say something, feel freeto run up. and we'll try toget questions. we want this to be moreof open discussions. we're not going to haveq&a at the end. eric burke: my presentationwas perfect. marco paglia: all right. eric burke: i think it'd begreat to have some questions.
so while you're walking up here,i'll share an anecdote. when we first went away from thewallet metaphor and went to the new design, we actuallyhad a whole bunch of complaints on google play. people were furious at us fortaking away the wallet. they thought we made it lookuglier and more boring. so anyway, i think thosepeople are all wrong. eric burke: i think it does goto show that you can't always listen to everybodywho complains.
no matter what you do, whenyou change your design, someone's going to complain. so anyway, yeah, question. audience: nice design. did you take in account, bydoing the cards, any form of sharing of paymentsinto account? eric burke: sharing-- so right now, when youshare, you just share a link to the merchant.
so we're not doing sharing, likepeer-to-peer payments or anything like that. right now, it's strictlysharing the card. like i went to sightglass. i love their coffee, so i'mgoing to tweet about it. so there's an iconto share it. yeah, in the lower-right, ican tap that and then it brings up the share actionprovider menu. so yeah.
audience: ok, thank you. marco paglia: yeah. and particularly this screen,i think, is very interesting how the square guys, theyhave embedded all actions in this card. it just feels so natural to haveactions embedded directly in the view, rather than inthe action bar right here. having an action bar, obviously,doesn't mean that all the actions haveto be there.
it really depends on the view. eric burke: we struggled alot with that, actually. early iterations put morein the action bar. but then it would gointo overflow. and we just found that peopledidn't discover things, if they're not right there,visible on the screen. so that's been something we'veiterated on a lot. yeah. question?
audience: hey, how's it going? so i'm curious if you ended upfactoring in some customer usability studies, or any worklike that, into your ui design as you were evolving it. eric burke: no. eric burke: i wish we woulddo more of that. one thing we do, we do havea customer insights group. and their whole job is tomeet with merchants. and they do a lot ofobservations of the payment
and they talk to people. but we're not really doingformal usability studies yet. and i'm hoping i can helpmake that happen. i think it's somethingwe should do more of. but right now, no. audience: all right. cool. thanks. eric burke: yep.
marco paglia: we'll taketwo more questions, and then we go ahead. audience: maybe a littlebit technical question. i want to ask when do youfetch for images? are there any kind ofpre-fetching on the backgrounds maybe? eric burke: so the question is,when do we fetch images? so that's a tough engineeringproblem that we're putting a lot of emphasis on for the nextrelease, probably, is to
do a lot more caching. we don't do a tremendous amountof pre-fetching, but we do cache images onthe file system. so hopefully, when you comeback, you see the same images. and we're investing a lot ofresources to make that even better in future versions. that's actually beena very tough problem to solve, though. audience: view one lookedvery similar on
the iphone and android. and then you switched to havingdifferent looks and feels on both platforms. was that a tough branddecision to make? the philosophy at square in theearly days was that both apps had to look identical. and i was never thrilledwith that. but we really have two primarymobile applications. we have the payer applicationand the seller application.
so in the seller application,i am accepting a payment from you. but at some point, i handmy phone over to you. and then you sign your signatureon the screen. so in the seller app, it'sactually more important to have consistency acrossplatforms. because if i'm buying somethingand i walk up to you and i'm signing my name andgiving you my credit card, i want that applicationto be trustworthy.
so i need it to lookconsistent. from the payer experience,though, this is my phone and i never give it to anybody else. and i'm in androidall day long. so in the payer experience, wehave flexibility to be more creative on the differentplatforms and we can diverge a little bit. it was funny. one of the engineers made thecomment when we were first
going through this, he waslike, you know, what's actually happening is our iphoneclient is becoming more like an android application. because they went with a lot ofthe full-bleed images also, and it made the iphone clientlook more like android. but yeah, because of theaudience, we feel like we can make each app look a littlebit more different on the different platforms. yep.
marco paglia: ok. and on this greatquestion, let's give a round of applause. eric burke: thank you. let me introduce you to thenext guest speakers. they are the creators ofgigbeat, michael novak and guenther beyer. guenther beyer: hello. michael novak: do youhave the slides?
marco paglia: sorry. michael novak: we rockgoogle docs. so as marco said, we're gigbeat,which is a concert application for android. it helps you find when yourfavorite artists are going to be in your city. you'll actually need to be-- guenther beyer: go ahead? michael novak: no,it's all you.
yes. so it lets you find out. so it's great to go to shows,but i found myself missing shows all the time, just notfinding out about it until somebody says, you missed anamazing show last night. i don't know why youweren't there. it's like, thanks,for inviting me. so i decided to solve thatproblem by creating the application that would let mefollow my artists and know
when they're going to actuallybe in my city well before even tickets usually sometimesgo on sale. and it lets us really getexcited about shows. so yeah, that's gigbeat. guenther beyer: we want to showa couple of patterns that we introduced to gigbeat,because it has about six months of evolution behind it. and i think the first onemight be branding. branding is always tough,because on one side, you have
to create somethingthat stands out. on the other hand, you have tocreate something that feels just right in the ecosystem. so these two things are fightingagainst each other a and we tried a lot of things,from captain america to audio-like icons, everykind of shape. but finally, we just settled onthe initials gb, because we really like the name. and we felt that thisjust is enough.
at the top one, we can see thefirst icon that we ever created that had some kindof a final touch to it. and then you see how theicon evolved over time. and right now, it's pretty much100% like an ice cream sandwich, jelly bean icon. so it's a similar thingwith color. android is about simplicity,or beauty and simplicity, more or less. and you don't want to have alot of colors fighting for
attention, fighting againsteach other. so we just went with basic blacktones, gray tones and obviously, a couple of whitetones for the phones. and we are highlighting reallyspecial parts about the application with this pink,which is obviously our branding color. for example, in that list, youcan see a couple of gigs that are, more or less, interestingfor you from the bands that you love.
and they also had one particularpink line. that is a gig that is showingup really close to where you are right now. so you probably have more of aninterest than all the other gigs to you. so i wanted to talk a littlebit about topography, but i think mike has a bettershirt for that part. michael novak: yeah. i kind of like topography.
so yeah, with gigbeat, in ourearly versions, we were really all over the place. we had lots of different kindof designs, different elements, different buttons. and it was kind ofwacky, i think. and we started with theeurofurence font up front. we used this, really,mostly in headers. so you can see the top artistis the only artist that actually has that font.
and we didn't wantto overuse it. but we also wanted to get alittle bit of depth into the application, so we thoughtthat might work. but then we realized we werehaving some spacing issues. we realized that letters weresometimes showing up on top of each other. rendering wasn't working,really, that great for us, so we decided to tryanother font. and also the same thing, really,just a really annoying
problem of rendering. it really messed with our userexperience, we thought, because it's important tosee that information. and if that information isobscured in any way, it's no longer relevant for you. before roboto was available,we decided to use the droid sans as much as possible and,really, just play around with the different weightsthat were available to give some depth.
and then, when robotocame out, we were so excited about it. i'm actually wearinga roboto shirt. we were really excitedabout it. and we decided to justswitch to using it as much as possible. you can see we use somedifferent weights. the headline font for the listitem is actually a little bit larger than some ofthe other ones.
you'll see on some other slideswe've got some other really creative wayswe use it. a dashboard. dashboard's a really interestingpattern. you've seen it used throughoutandroid for a little while now. and we tried to figure out howto use it and be unique. we wanted to really emphasizeour brand as much as possible. and the pink is really thecenter of it, which is--
i'm color blind, sothat actually does look pink to me, though. and the icons arereally unique. we made sure that we spent lotsof time going over each individual icon to make surethey really represented each section in the bestway possible. we don't want to drive you toan artist list when you care more about locations, or whenyou care about artists, seeing what's all around you rightwhen you open up the
so we felt, with the amount ofcontent that we had for the application, the dashboardwould work really, really well. and it also is unique. we actually, for mobile worldcongress, had pins made up of all our dashboard icons, whichwas really neat because you can actually associate the brandwith the part of the app that, for the most, you'd seeas just pretty basic. but then, going to the tablet,we realized, well, you can't
just put four big buttonsonto a 10-inch screen. that doesn't really work. so we decided to add asmuch fresh content as we possibly could. and that's where we decided touse the larger images to really bring some color to it,but also bring some relevant information. guenther beyer: do we want toadd that the tablet version isn't working perfectly yet?
michael novak: it'skind of work-- yeah, it's awesome. guenther beyer: it's ok. michael novak: itlooks pretty. i mean, we didn't actually getto the dashboard in the initial version. the version you see on the leftis a really old version of the application that hasthree tabs with a little pointer at the bottom.
we were kind of allover the place. there's some texturesin there. and you have to do a lotof clicking too. there's some buttons there thatjust don't really feel like they're part of the ui. especially, what happens whenthat list scrolls up? all those buttons go away. so we really wantedto simplify it. and so that's how weended up coming
to our current dashboard. we're like, let's really focuson what are the most important pieces of our application andgive users the option to dive into each one of thoseas they wish. viewpager, it's awesome. so viewpager works really wellfor us on the phone. when you click on the artistsicon from the dashboard, you get presented withthe list view. you get to see all your artistsup front, which is
every artist that you followinside the application. you swipe to the right,you can see last.fm recommendations, if you'rea last.fm user. and when you swipe to theleft, you actually see what's near you. so it basically just cuts outall of the artists that are not going to be in your city. and you basically could see yourentire artist collection, just by swiping up and down,left and right, throughout the
entire list. it feels really great. and when we went to the tablet,it didn't exactly work the same way, because then youdidn't want just really big lists all over the place. so we decided to use biggerimages again and do a grid view with-- what you can't really see on thephone is a filtered list. so you could actuallyfilter through.
we actually list out theservices, so you could just see what you have from rdo, whatyou have from last.fm. it gives you someoptions there. location, locationwas really fun. that took us a while, too. this is also something we justdidn't get right, which-- it's actually ok to not getthings right the first time. you really learn a lot fromthe whole process. so it was definitely a learningprocess for us.
we have some buttons. like you can click a button toget information that's near you, which, for us, felt reallyawkward, because we can actually get access to thegps and just start loading data for you. so why should we have to waitfor you to click the button? and then also the samething for a search. it was just tuckedright next to it. and you had to searchfor a city.
and this list view wouldactually be empty, if you didn't have any content alreadysearched for in the application, which isalso very useful. so we tried to do someimprovements here. we added a search bar, for somereason, in the screen at the top of the list. and then we just decided itwould be really awesome if you could favorite some ofthese locations. if you're not somebody thattravels very often, you're
going to go back to the samelocation over and over again. so we figured it would be greatto have those right on the first screen of the locationsection to really get some easy access. but it's really empty, if youdon't have any favorites. you still have to do somethingto get content. so what we decided to do, afterlots of debate, was how do we get nearby informationand favorite information together on a screen so thatthey could provide as much
useful information withoutmuch interaction? so we decided, let's pinthe favorites up to the top of the screen. and you'll always haveeasy access to those. those are definitely veryimportant to you. but if you've never used theapp before or maybe you haven't favorited anything yet,you can still get nearby information as well. or you could be traveling.
like we're in san francisco. so most of my favoritesare in new york. but if i open up the locationscreen, i can start to see venues from san franciscobecause it's near by me. and we were able to do thatall with a segment list. we were able to createdifferent sections. and we thought that that wasthe awesome solution out of all the other ones we werethrowing around. guenther beyer: speaking ofempty screens, you will have
to deal with empty screenseventually. there are a lot of apps that areloading content from the web and, at times, you justdon't have a web connection. so how do you deal withempty screens? this was the first iterationof gigbeat's empty screens. and to be honest, they arereally, really boring and not really informative. and we have a lot of those. and actually we decided that,if you can't really inform--
because that is obviously whatyou want to do in such an application-- at least entertain toa certain extent. you want to have your usersstay within the app and at least enjoy the empty screens,even though they aren't really that beautiful. and so we created a couple ofreally small illustrations and tried to improve the copy andjust tried to give a certain feeling across it, a little bitof fun in between, while
information is loading or whilethey have to access some kind of a log-in or anythinglike that. so we think these turned outpretty nicely in the overall context of the application. michael novak: the other reallyawesome thing we added was we added some actionsat the bottom. so when you're on the emptyscreen of last.fm and you haven't either logged-inor you don't have any recommendations, it willactually say, hey, you can
log-in to last.fm. and this screen will populatewith some artists. so we really tried to takeadvantage of as much of the screen as possible to make iteasy for the user to actually get benefit from that screen. guenther beyer: that'syours, right? michael novak: right. notifications. so gigbeat, obviously, does alot of work for you when you
don't use the application. but one of the interestingthings that we were playing with, especially when we weredoing bigger releases, was how do we let the user knowthere's new content? you might not actually updatethe application the first time you-- you might not use theapplication the first time you update it. so it could be days or weeksbefore you actually venture into it.
in most cases, you'llventure into it because you have a need. you're trying to getto certain content. so we didn't want to just popup a dialogue or pop up a screen that says,hey, what's new? by the way, thanks forusing the app. we wanted to really be asunobtrusive as possible. so you can go tothe next slide. so what we were doing was we'dactually pop up a notification
for major releases. i want to emphasize majorreleases, because bug fix updates, like getting anotification every time you open the app would be kindof annoying, i think. so we wanted to make sure thatwe were definitely doing this just for major-- we've got new features thatwe definitely think you're going to love. so when you first open theapplication, instead of
actually getting in your way andshowing you that welcome screen first, we actually justleave the app the way it is and pop the notification up. so that way, once you're donelooking for whatever it is you came into the app to look for,you can actually, at your leisure, check out what we'vegot that's new in our guenther beyer: we might addthat you have to create about four sizes and three differentstyles for every notification icon that you are creating.
so be prepared. michael novak: this is actuallymy favorite feature that we added in our latestrelease that's on the market today. we do playback notifications. so concerts is music, but you'renot always at concerts. you're listening to musicon the go, commuting. so it's awesome to find outabout the artist that you're actually listening to whenyou're listening to it.
so what we do here is we popup a silent notification during playback, if that artistis actually going to be in your city. and we do it silently becausethe worst thing in the world would be to pop up anotification about some secondary data for the artistand cause a little beep in the middle of the song. that would just frustrate me. so we wanted to make sure thatwe provided the information so
that the user would be notifiedthat the artist is coming to their city. but we didn't want to interruptthe actual process that they're doing, which islistening to the music. so yeah, we were definitelybeing polite, silent notifications. and you get the informationwithout being bothered. event details. so event detailsis interesting.
you've got the venue. they've got the date,the time, tickets. it's pretty basic information,for the most part. and in our first coupleof iterations, it was really boring. we just did a lot of text. there wasn't really muchbreakup in the ui. there wasn't much color. i mean, there was really alot of the basic colors.
so we decided let'sstick an avatar in there for the headliner. and let's throw some icons intothe list to really break up the flow of all the text. but it still didn'tseem right. it felt like it was justa lot of empty-- the space didn't work for me. i didn't like this versionvery much. but what you see iswe actually--
go to the next slide--- what you actually seeis bigger pictures. i love this screen. this is one of my favorites. i think i stared at this screenfor 20 minutes when we actually got it running. it was amazing. and so we did a nicelarge photo for the headliner of the event.
and then we added in thesupporting artists as well. so you'll actually get twophotos there, if there's only three artists playing. and then, if there's any morethan three artists, we'll use that other space to allowyou to click through to see the full list. but the event date is actuallyreally awesome, because this is where we were able to usevarious weights of roboto to really drive the emphasis onthe date, where we do the
actual day in a large, thinnerfont, and then the rest of the date in a smaller,bolder font. which was a nice break up fromthe other text that comes below the photos. we were able to put the venueinformation, check-in capabilities, andgetting tickets. and then, on the tablet screen,we had some room to throw some more photos in,some more information. and we actually had the listright on the side, so you
could just go through each ofthe different events and see the information rightnext to it. guenther beyer: if you'rethinking about this application, i think thisis about events. this is about live music. and live music isexciting, right? these screens were notreally that exciting. they're pretty boring. but i think we figuredit out pretty
nicely with these screens. because these photos, theyactually are exciting. you actually want to seethese guys live, right? ok, the next one's theartist details. and i think you will love thisone as well, because the old version of gigbeat, it just hada list of-- well, it had the artist name andthen a list of its gigs that were upcoming. and we wanted to add a littlebit more to these screens.
so i sketched up this prettyrough thing here. and i showed it to mike. and he really liked it. but he hated it at the sametime, i guess, because-- fun fact-- marco here is the creator ofthat beautifulpeople's people's app from android 4.0. and we wanted to do somethingsimilar with that carousel slider.
and they can swipe fromleft to right and from top to bottom. as it turned out, thatcode was just working for android 4.0. and gigbeat is supporting2.1 and upwards. so that poor guy over there hadto rewrite that whole code to make it work onall the systems. michael novak: it took a coupleof weeks, but it was well worth it.
it's one of my other favoritescreens in the application. and we were really able to-- the list looks great. you've got nice, big photos. we were able to break up-- the other part of the problemwas we couldn't figure out how to get other artist information,like a bio, in with the tour dates. the previous screen showed theavatar, the artist's name and
a star, and then thelist of events. so it's like we didn't want youto have to click to get to a profile and then click to getback to the events, so we were really trying to figure outthe best way to do that. and this was just perfect. when i saw the contactsapplication and then the sketches, it was theperfect solution. you're able to swipeback and forth. there's no pause at a screengoing backward or forward.
it really worked perfectly,i think. guenther beyer: you wantto add something for the icon set? michael novak: yes. so we actually have an iconset available as well at androidicons.com. so every application that we'vebeen working on, all the icons that we put into them,we're actually just putting into this set.
it's how we met, actually, wasguenther put out an icon set that i took advantage of forsome open source applications. because as a developer,i don't really design icons very well. i know which icons i like incertain places, but i can't design them. so it's a really great resourcefor developers. i recommend everybodycheck it out. marco paglia: that's it?
marco paglia: so i have aquestion for the crowd. who does think that the squareapplication and the gigbeat application look the same? no one. michael novak: nobody. marco paglia: as you see, youhave so many ways to make your application unique. it's just beautiful. i'd like to ask a questionto our guests
here, just as a start. then we can get tothe audience and to our group here. let me get them a microphone. how do you come upwith that color? michael novak: well,i'm color blind. so i'm going to throw thatone right to you. guenther beyer: pleaseask again. i didn't catch that.
marco paglia: how did youcome up with that color? guenther beyer: that color? i'm not quite sure, man. it just looks good, right? does it? about choosing color, there'sjust some kind of gut feeling. there's not a lot about it. as i said, you don't want tohave a lot of color fighting for attention and fighting[inaudible].
well, for example, the googlelogo has four colors, which is a little bit too much. guenther beyer: but well, inthe end, you really want to keep down the amount of colorsand just select some for highlights. and we just thoughtthat one for highlights would be enough. and i think a pinkish,reddish thing is a pretty good highlight.
michael novak: it tooka little while for me to get used it. when i first saw it,i was like, whoa. wow, that's different. and then, once i started usingit, and i was like, wow, this is amazing, because it addedjust enough color to really stand out. and in certain places, like inthe carousel slider, it's the thick header, and it'sthe thin line
underneath the pictures. it really adds a lot to it. marco paglia: ok, we have along line of questions. let's try to get to them. audience: two very short ones. why dashboard pattern, insteadof action bar lists? michael novak: so we actuallydeveloped this application when, i think, it was froyo orgingerbread was available. so the action bar pattern, we'restill really developing,
which is why i think theinitial version really emphasizes on dashboard. we decided not to change thatbecause we felt that those four icons really stood to ourbrand and the message we're trying to send withour application. and we really were able to havefun with those icons. and we only had four, so we feltlike it worked for us, in particular. guenther beyer: can i add thatthere is a lot of hate going
on about the dashboard rightnow, because a lot of people think that a dashboard,in general, is bad. but a dashboard makes a lot ofsense, if you have a couple of distinct pieces of informationthat are-- but there is not one single onethat is more important. so i think a dashboard makes alot of sense, especially in that context. audience: ok, yeah. i just think, with the list, itallows you to put featured
content right up front assoon as you get into the but everybody has reasons. the other thing was usingnotifications when the application's updated. do you find thatspammy at all? or why not just a banner whenthey open the application after an update or something? michael novak: so we didn'tactually think of a banner. but in terms of spammy,our major updates
don't come very often. we're not like every time weupdate and say, hey, we changed that text so thatit's spelled correctly. or that crash that you noticed,we fixed that. it's like that stuff's in themarket listing, so we decided let's not use the notificationsfor that. but when we have a lot of bigfeatures, like a redesign, we added some bio information,that's stuff that, i think, is pretty important.
and it comes once every coupleof months, really, i think. audience: ok, good. michael novak: sure. audience: do you use gpsor course location? michael novak: so we actuallyuse course. we don't really need finelocation, because most of the information from the api sideof things is metro areas. so we don't need thatmuch from the gps. audience: so i installedthat app to follow
along with you guys. and it looked pretty good. i was curious on if you guysplan on integrating google music with it in thefuture, though. michael novak: that's awesome. audience: because i saw thatstuff in drop box and a couple of other methods for it. that's like the email that i'vegotten the most ever, i think, was, where's googlemusic support?
and as soon as there's anofficial way for us to get to the artists list-- becauseright now, the content provider on the devicedoesn't return your google music artists-- once that's actually availablefor us, we want to dive in and do it. but we don't really want to tryand hack it, because then, if it breaks or if there'ssomething else going on, we really don't want to breakthe user experience.
we feel like that mightbe more frustrating. so we decided to stayaway from it. audience: awesome. look forward to it. michael novak: thanks. audience: in terms of userexperience and design, how do you deal with alltheir platforms? do you think it's better tostyle everything to have the same user experience acrossother devices as well?
or do you leverage whatever theplatform is offering you? for instance, take the exampleof dialogs or edit text or check boxes, do you havethe same style for all? or how do you deal with that? michael novak: for gigbeat, westyle the dialogues, but we use wherever the platformbase is. so for holo, we use the holodialogue as a base. and for gingerbread and lower,we use the regular theme as a dialogue base.
and we do change the color. but we didn't port back a lotof the drawable assets like the progress bar or the progressindicator, we just used whatever is onthe platform for that particular device. eric burke: i actuallywanted to mention something about that. one thing you're going to findis, once you start customizing one thing, you are all-in.
just as an example, some of themotorola phones that are using motorola's skin, we foundthat we had tweaked the button color, but we didn'ttweak the text color. so we ended up withwhite on white. so once you start messing withcustomizations in the theme, you pretty much have tocustomize everything. otherwise, you're going to getsome nasty surprises when you go to some of thecarrier skins. audience: so your colorscheme is great.
you guys used pink and shadesof gray to really make your app look distinctive. but you also have a verypicture-heavy app with the artist pics and everythinglike that. and they come in withtheir own colors. and since these are musicalartists, they're likely to be loud, possibly obnoxious colors,which could conflict with the ones that you have,with your pink and grays. so have you guys putany thought into
that sort of issue? and is there anythingyou can do to try to reduce that loud contrast? guenther beyer: well, yeah. that is because we turned downabout every color, except for these really, really importanthighlights. because then these colors don't interfere with each other. and if you're having a lot ofpictures, then you might not
need any color at all, right? so but if there is still one ortwo really important marks within the ui, then you mighthighlight them, except that color that you haveused throughout all the other screens. and that is pink, in our case. michael novak: yeah, it'sdefinitely an accent color. so really, it's meantto emphasize certain parts of the ui.
and it's really carefully used,i think, throughout the application for that reason. audience: thank you. audience: this is a question forboth gigbeat and square. i noticed that your applicationsupports a variety of android versions and alsoa wide variety of screen resolutions. would you like to share withus your experiences in supporting multiple versions ofandroids and also different
hardware specs? it was certainly a challenge atthe beginning, because we were trying to figureout what all these differences really were. but what it came down to isthere's a lot of resources available to abstract awaysome of those different nuances, like when thingsget deprecated. for example, some of thenotification stuff was deprecated in howyou create it.
the action bar is certainlysomething that's introduced in honeycomb, and is not availableon gingerbread. so we really tried to abstractaway as much of the resources as possible, so we could plugthem in where they made sense. different static classes tolazy-load apis that are available on newer devicesversus older. it's the same thing with layoutresources for different screen sizes. we took advantage of valuesfiles and the dimensions file
to actually keep all of ourdimensions there, so that our layouts weren't repetitive. and that allowed us to scalepretty easily, without a lot of work and testing and reallyhaving to worry about if we changed the right file or notand made the size correct. audience: hi, guys. i was wondering if you had anyplans to open source the contacts implementationthat you had written. michael novak: actually, yeah.
that was a slide. and then i got really busy. so yeah, it-- guenther beyer: i forgot that. sorry. michael novak: yeah, we areactually planning to open up the modifications that we madeto get that to run back to 2.1, hopefully, in thenext couple of weeks. audience: where cani look for that?
michael novak: probably-- guenther beyer: i think youmight want to follow one of our google+ streams, becausewe have so many. but we are cross-sharingas much as possible. guenther beyer: whichwill eventually-- michael novak: definitely, oneof the ones that's on the screen now, or one ofour personal ones. we'll be spamming that. audience: thanks, a lot.
marco paglia: ok,last question. audience: i really love what youguys did with the tablet landing screen. you have the dashboard-- michael novak: thank you. audience: --features andthe content there. so my question is also forthe android design team. does the dashboard still workon tablets, considering you only have just icons?
michael novak: as far as gigbeatgoes, i think it worked out quite nicely. it allowed us to use bigpictures and take up the majority of the screen forcontent, but still have those dashboard items. instead of a grid, just listit on the right-hand side. so i think, if the method fitsfor the application and it works for the implementationthat you have, you can get pretty creative with the waysto actually make it work.
richard fulcher: yeah. i think that's theright answer. in the tablet, instead of havingthis dedicated screen that serves that navigationfunction, you can just divide the real estate up and have apanel that is the emotional or logical peer to it,but presents it in a different way. it doesn't have to bethe four up pattern. you can actually dolots of different
things in that space. michael novak: one of thetakeaways that we had with developing gigbeat was there'sa lot of creativity. you can do a lot of interestingthings. and we follow the patterns just about as much as possible. i think i'm probably annoyingat sometimes when i'm like, oh, that's not exactly right. we should do it this way.
or my implementation isn'texactly pretty enough. so there's a lot of goingback and forth. but as you can see, we reallyemphasize trying to find as much creativity without makingthe application foreign for the users of the device. guenther beyer: yeah. maybe that's why we showed acouple of these sketches in the early prototypes. and the application evolved overtime because there was
not really one pattern fora good user experience. but you have to tryout a couple of those as much as possible. do some sketching. do some real prototyping. do some wireframings. and then, eventually, you willfind a good solution. audience: thanks. marco paglia: ok, let's give around of applause to gigbeat.
this is where things becomeinteresting now. we're going to havethis workshop. and we never tried it before, soyou'll have to bear with us a little bit. but this is what we'regoing to do. we'll have five developers thatare going to be coming up on stage one at a time. they're going to have one minuteto just run us through their application, just to havea little bit of context.
marco paglia: and for that,we brought the gong. [rings gong] marco paglia: put outfor the gong. thank you, gong. and yeah, let's try to keepthe atmosphere informal. we really want to haveinteresting discussions with these applications. and hopefully, we're goingto get some nice questions as well.
so let's start withthe first one. the first one is going tobe droid of the day. and i'm going to get hereon stage mike wolfson. please, give a roundof applause. marco paglia: let meget my slides on. mike wolfson: so good morning,good afternoon, i guess. my name is mike wolfson. my app is droid of the day. the concept is designedto be simple.
and the app is designedto be simple. basically, it is a app of theday app that every day you get a notification of a app that ishand-picked either by me or with help from my community. you can choose tocheck it out. or you can exit out. this is the home screen. if you choose to checkout an app, you will just launch the app.
and we'll, obviously, go intothis in more detail. i don't make any money on theapp, which is probably a business model familiar to alot of people in this room. it's just somethingi do for fun. i did want to mention one of thereasons that i do this is to highlight great developersand to filter good apps up that might not be visiblein the market. so if you're in the room and youwould like me to feature your app, just sendme an email to
droidoftheday@gmail.com. put hash tag i/o 12, orsomething in there, so i know where you came from. but i'm always looking forgreat apps to feature. and i think that'sunder a minute. richard fulcher:that was good. thank you, very much. mike wolfson: thank you. marco paglia: so which screendo you want to start from?
richard fulcher: let's justdo the first screen. so this is kind ofthe high wire act portion of the program. so we're just going to walkthrough some of the screens of the app. we're going to talk about thingswe like and things that we think, maybe, could beimproved a little bit from the design standpoint. i've got the mic here.
but we've got a micin the back row for the other designers. and we're just going to makethis a little wild west, loosey-goosey. so i wanted to start by justtalking about a few of the things i really like aboutthis application. and first and foremost-- maybe, marco, if you couldadvance one slide-- this app has a real voice.
the droid of the day commentthat comes in when you go and look at a particular applicationis very editorial, very genuine, very human. and that's something that'sactually pretty important in an app like this. it's not just a pieceof market speak. i know you're hoping, maybe,you could get out of san francisco without getting thishippy-dippy emotional crap. but it's actually really handyto go to an app that's
actually expressing an opinionthat isn't just some of the market speak that you mayhave experienced in the last couple of days. so i really like that. i really like how the appis very tightly focused. it's not today's app in sixdifferent categories. it doesn't ask a lotfrom the user. the user doesn't need toremember to check it. he will get a notificationreminder when
a new app is available. they don't feel obligedto come every day, if they don't have to. there's a history view thatthey can dig back through. they can choose to consume it ona weekly basis instead, if they prefer. and it's got ways forthem to interact. they can rate the content. they can make suggestions,as we saw before.
so i think all of thoseare really great things in the app. so good job. great. mike wolfson: thanks. mike wolfson: but. richard fulcher: but. richard fulcher: no, no no. so let's go back one slide.
let's go back tothe dashboard. i know we talked aboutthe dashboard in gigbeat's context as well. and i think this might be anopportunity where we can even play that focus aspecta little bit more strongly for the app. i think you've got twooperations here, which are really important, the today'sapp, which you naturally want to drive users to very directly,and the history is
really important too. but i think a lot of theother ones could possibly be put into-- if you were to adapt the actionbar pattern, they can go into the overflow menu. and maybe you could just bypassthe need to even have this dashboard, and just driveright to the droid of the day. rachel, i know in your talk thismorning you were talking about what's the heroscreen of your app.
this seems like a goodexample of that. that droid app page shouldbe the hero. and it should be the firstthing you get to. so on the next screen,we've got-- this screen is the type ofscreen that i always find challenging, because justthe amount of content. and the content has value. it's not noise content. you're really just trying todeliver all the things the
user could want to know aboutthis application into one piece of canvas. and i think you get a lotof things really right. the most important content isat the top of the screen. and generally, the lessimportant stuff goes down. and i really especially likehow you're using the collapse-expand for themarket description. that's a block of text that youdon't really have a good sense how long that'sgoing to be.
so using that control therefixes it in place. a user can dig into it, but itdoesn't disrupt getting at the other important stuff that'slower on the screen. one thing-- if you can go to thenext slide, marco-- that same control windsup getting used for the screen shots. can you put your deviceon the bed again? you get to see just alittle bit of a peek
of the screen shots. and you can actually interactwith that peek. if they're multiple, youcould scroll or swipe through that region. and then you can expand it upto open up and walk through the screen shots that way. i think, for the screen shots,it's probably best to just expand them all the time. you know they're going to takeup some height, but it's a
fixed amount of height, unlikethe market example where, i think, it makes perfect senseto use that expand control. so i would consider, maybe,just moving away from that control and just showing them atfull height the whole time. the other thing that's reallykind of interesting to think about on this screen areall of the actions. and again, this isa challenge. so you've got the ability torate, to download, to share it with others.
i think you probably want topick one of those actions to be the primary actionon the screen. and it's probably thedownload button. to your credit, you give thatto a user in a couple of different ways. they can tap on the app iconat the top to install it. or they can hit the downloadbutton, which is above the fold, so it's visibleon the device. but i think you could probablymake it even
a little bit stronger. i'm going to just do somewireframing here. let's see. so one thing you can thinkabout would be-- i always draw an action barbefore i draw anything else. i'm just hardwired to do thatat this point my life. you might be able to take thatdownload button and move it up more tightly withthe app icon. instead of having those twofunctions that do the same
thing, if you just make thiswhole top area a target. if this is the name ofthe app, we've got the big icon there. maybe we have the downloadbutton-- marco, this is actually verysimilar to a lot of the stuff that you're doing inthe play store. marco paglia: mm-hm. richard fulcher: you could evenhave the price be part of that download button.
and you present it there. just to make that top part ofthe screen, here's the app, here's how to get it. if you don't even need to readanything more about it, or if the notification toldyou enough, hop in. get it. and you're on your way. mike wolfson: is there anyway to represent-- for the icon, i have thatas a clickable point.
is there any visualrepresentation of some way that i can inform theuser that that is, in fact, clickable? it's just an image. they don't necessarily know. that's something we strugglewith a little bit, too. for something like when we doquick contacts, we decorate it a little bit in one of thecorners, just to hint that this is something that isn'tjust a graphic element.
the other thing you cando is you could just-- the way that you wrapthat space. and maybe it's less aboutturning the image specifically into a target, and more aboutthis whole area is a target and the action associatedwith it. mike wolfson: yeah, that's whatcomes to mind is i just make that whole areaclickable as a-- mike wolfson: that view. richard fulcher: cool.
a couple of other things, juston this screen, really quick. now that i've taken download andmoved it away from share, we need to think aboutwhat to do with that. a pattern you could considerwould be to use the share pack, which is something thatgoes in the action bar and is a two-target action. it's got the generic share icon,which brings up the list of all the different other appsthat you can call out to do this share.
and that's the currentbehavior. and it also brings in justa shortcut to the most recently used. so if the user just alwaysshares via twitter or facebook or google+-- richard fulcher: --thenyou're in great shape. i think the only other thing iwant to talk about on that screen is at the very bottomof the screen. so maybe if you go to the nextslide, marco, there is--
oops, sorry. previous. yeah, down at the very tail ofthat screen, there are the rate buttons. and i think that's a reallygreat feature. and i like that you're trying touse color to differentiate between the positive andthe negative actions. peter, do you have any thoughtson the visual side of how he could treat those likeand dislike buttons?
peter ingham: oh, yeah. part of this app, what i reallylike, is that you have multiple themes. and it's always hard tobe a visual designer. and the way you have to do itis it's easy to include everything and havemultiple themes. but what you really need to doit on is figure out your brand, and then just gowith that one theme. so you have colorfulgradients.
you have brushed metal and theseluster, shiny icons. and i'm wondering if you couldactually take what you did in the dashboard with those icons,those metal icons, and explore that theme and made thatthe focus of everything. and that today's app wouldbecome a chrome icon, too. and then, maybe, your action barcould be chromed out, too. you create this illusionof life that it doesn't necessarily mean that everythingbecomes a bookshelf or anything like you mimicthe real world.
but it actually means that youcreate these elements and you establish these relationshipswhere they could actually live in the same world together. and then people aren't-- a constant analogy i always haveis that like i just saw prometheus, the sci-fi movie. and when i see aliens, i'mtotally freaked out. but then, an hour later, i'mlike, oh, this is just a really cruel, weird world thatthese monsters live in.
and i'm not freakedout any more. so once you start establishingthese relationships with icons and the elements and, as a user,when you enter it and you realize that these thingscan actually have a relationship, it'sa nice feeling. you don't feel like you'reshocked every single time you turn a page or enter a newstate of the page. mike wolfson: so to justrecapture that, what you suggest is i capture in those,like, dislike buttons, some
sort of iconography that matchesthe rest of the icons, to create that common languagethrough the app. peter ingham: right. richard fulcher: great. thanks, peter. peter ingham: yeah. male speaker: if i could, iwanted to crash the party and mention one other thing. like these guys, i reallylike the app.
and i'm actually reallyexcited to see all the changes, all these suggestionscome in. if you could go to the nextslide, marco, the detail view. there's one thing here that ithink is worth talking about. this is one of my personal,pet crusades. i always talk about this, whichis the sometimes less is actually more. and i have two different typesof wars that i like to wage. and one is a war against textjunk, the unnecessary
typographic elements that areintended to clarify things, but where, actually, space andcontrast and color actually make a better impact. and also label junk, where,again, context can provide much of the same function. so one of the things i'd suggestyou might think about is, when you look at all thosesection headings, they're very effective as section headings,because you've used the color contrast, so they don't allneed to have that colon
following them. again, when you have things likethe cost of the app or the size or the rating, youmight not even need to have labels on many of those things,because the data itself can carry that context. you represent the ratingas stars, maybe. and then, again, it becomesvery obvious what it is. so take a look throughout allyour apps and think about which elements are reallyjust gilding the lily.
you'll find that taking them outallows you to really focus more on the content. mike wolfson: that'sa really good idea. that will allow me to recapturesome of that space, also, that is so valuable. that's a really greatfeedback. male speaker: sorry to crash,but that was just one of my pet things. richard fulcher: ok, i'm goingto let you finish.
marco paglia: and with that,i'm honored to-- [gong sounds] marco paglia: thank you. thank you, mike. richard fulcher: yeah,thank you, mike. the second application we'regoing to see today is papyrus. and i'm happy to welcome upon stage, andrew hughes. andrew hughes: my voiceisn't that loud. so this is papyrus.
it is a natural handwritingnote-taking application. i designed it initiallyfor 10-inch tablets. and we're slowly trying to workthe interface down to smaller devices. so this is running ona thinkpad tablet. how many people know what activepen technology is? a few people. ok. so natural handwriting is--
basically, this app allows youto write just like you would write on paper, but with allof the advantages of modern technology, like in tablets. so with an active pen-- thank you-- that comes with thisdevice, it's different than a capacitive stylus thatworks on just any tablet. it's a lot more accurate. and it has a lot moredata throughput. it can detect when it's nearthe device, pressure
sensitive, it hasside buttons. others have more side buttons. so for example, if i open anote here, i can write. and it works reallywell with me. so if i have it bigger, youcan see the pressure sensitivity there. so it allows for a much morenatural handwriting. so basically, the applicationhas notebooks on the left and notes on the right.
and that's about it. [gong soungs] marco paglia: all right,thank you, andrew. so when you wrote to us, youwere asking us about the general navigation. it feels like having to havethis navigation with a split-screen, it's kind of challenging on smaller devices. and i thought it was a veryinteresting point.
in fact, actually, also i wasexcited when you applied for this workshop, because i douse this application. and the beauty of thisapplication is that it's all about gestures. you have two fingers. you move your canvaswith two fingers. you pinch the zoom. you control with your pen. you can erase withyour finger.
and then i felt, maybe, a wayto get this kind of screen, the split-screen, to work ondifferent devices, on smaller screens could be to maybe havingit slide like a lot of applications do today. but then, at the same time,i wonder whether there are other options. like maybe you don't needthe split-screen at all. why don't we makethe navigation to be purely gestural.
so that, when i getmy application, i see all my notebooks. and then i tap on them. and they open up in allthe pages that i have. and perhaps i can pinch toget back to my notebooks. and everything just becomessuper gestural. so that's something that i thinkwe need to consider. not every application must havea split-screen or this standard navigation.
i think we can really innovatein the way we get into different views. i guess the pattern that wealready have, which is similar to what i'm talking about,this gallery, where the navigation is purelyhierarchical, you don't have any split-screen. tell me what you thinkabout that. andrew hughes: yeah,i want to utilize gestures as much as possible.
so with a pen right now-- i know you were talking aboutthe general layout of the app-- but in the note taking,you can use gestures to undo. so if i draw something and iflick left to undo and then flick right as redo, flick upto get to the color palette. so things like that allowfor quick navigation. you can also access those thingsjust by clicking from the action bar. but definitely adding moregestures to be able to
navigate around the restof the app as well. i was talking to roman nurik. and he suggested, instead ofhaving buttons to switch between pages like that, to usea bezel swipe to switch between pages in the note, whichi think is a great idea. marco paglia: that's great,because i swear i haven't talked to roman. but that was part of mynext suggestions. andrew hughes: [laughs]
marco paglia: i swear. maybe we just thinkthe same way. there was another point youwere bringing in you application, which is allof these elements on the action bar. and obviously, whenyou get to smaller screens, they get stacked. so i should have a screen shotsomewhere about that. and then you tend to coverthe bottom action
bar with your hand. and things don'tget so usable. so maybe even here, just likeroman was suggesting, an option can be do we really needall those actions on the action bar? again, how we canbring gestures. how can we innovatewith gestures? i think the reason why weselected the papyrus application here is reallybecause innovating with
gestures is one of the thingsthat android, i believe, is doing the best. we have swiping gestures. we have edge gestures. we have a lot of things thatwe're introducing. and i think papyrus can reallyhelp to push the agenda here. so one thing is what romanwas mentioning. so maybe add gestures to swipefrom one page to another, just like chrome introduced,the chrome browser.
and then, when i see the undobuttons, i'm thinking, i wish there was a universalway to do undo. we just haven't found it yet. but i'm sure that, with yourcontribution, with your ideas, with more applications findingout the right gesture for those patterns, we're goingto crack it at some point. and at that point, wewon't need buttons any more for undo. i really see how papyrus, atsome point, will be just,
literally, a piece of paper thatyou can navigate with. so i don't know if other peoplehave some feelings around the action barand these buttons. the crowd has been silentin the last few minutes. if you guys want to askquestions to andrew, just feel free to stand up and come on. andrew hughes: so on theprevious slide, we've had a lot of users complainabout having the buttons on the bottom.
i put them there becausei didn't really know what else to do. they wouldn't fit in the top,so i put them on the bottom. but when you're writing,especially, it's kind of harder with a galaxy note,because it's not that big of a device. but when you're writing,your hand hits those. and the other problem is thephysical capacitive buttons that are alreadyon the device.
people who are left-handedhit the back button. people who are right-handedhit the menu button. and there's not really a goodway to get around that. marco paglia: well, it'skind of what we discussed here, right. if you can avoid having,exposed, the two arrows to go from one page to another,that's going to reduce your elements. of course, you probably stillwant to give that navigation
in a more findable way. maybe you can have it inthe overflow menu. but i think there are ways foryou to probably end up having maybe half of these actions. rich fulcher: we also have-- you might be able to take acue from what some of the media apps do. where, once you're in a hangout,once you're watching a video, we actually dismissthe action bar.
now for you, it might justbe a different queue that you would use. maybe it's when stylusis down. just take the bars away, andmaybe wait for that lift off. then they can come back on. because you're never going toneed to activate any of them while you're actually in thesketching mode to output. so maybe a trick like thatmight be valuable, too. marco paglia: and there's onemore thing that i wanted to
talk to you about, which is thisother problem that you were facing, the color picker. and the problem is, when youget to a small screen, this color picker doesn't seemto work anymore. now there are ways to do it. for instance, in the bookapplication, what we do, in smaller screen we do put a tab,a swipeable tab, to go from one arrow to another. so you could see thathappening here.
but even there, i think you canpush the agenda and really try something new. the color pickers, they weredesigned for mice and for different kinds ofinteraction. so i don't know the rightinteraction is. after i saw that, i startedthinking about it. and i'm not sure if i can drawon this directly, i can try. so it works beautifully. so maybe, you havethis icon here.
and when you tap it, instead ofgetting to a grid like this one, maybe you just havethe main colors. like, if it were flowersand you have all the tones around them. and then, maybe when you holdpress on them, perhaps you could zoom in a square, and thenmoving your finger left and right will change thatratio and intensity. the point really is, sometimesit's not really about putting the right action bar, or puttingin the right tabs.
it's really about rethinkingthe problem. and when we do it, i thinkwe really could-- when we can crack the problemwith different solutions, i think we really contributeto the system to evolve and to be better. so my recommendation would be,can we find a beautiful way to have a color picker, which isalso gestural, uses the capacity of a touch screen,and so forth? one question and i think wehave to play the gong.
audience: because you weretalking about the undo gesture earlier. on a lot of your computers,you're starting to switch to having purely gesture-basedtrackpads. and often, two fingers swipingto the left would be going back, or vice versa,to the right. and so maybe you could dosomething like that. and maybe even for changingpages, you could do, like, three fingers.
so i don't know if that helps. andrew hughes: yeah, currentlyin papyrus, we use two fingers to scroll and pinch to zoom. because you can use a singlefinger to erase. and that's because you candetect the difference between the pen and the finger. but definitely some gesturelike that-- like i said, you can use the penside button, currently, in our application, to undo andredo by performing gestures
that won't work on non-activepen devices. marco paglia: it is a veryinteresting problem to investigate, and i wishyou the best. so-- andrew hughes: thank you. marco paglia: --round ofapplause for papyrus. marco paglia: we didn'thave to play the gong. so the next application comingon stage is equalizer. and i'm happy to welcome, onstage, michael moussa.
michael moussa: hi, i'm michaelmoussa, and this is alex rocha. we are the founders ofsmart android apps. and the equalizer app is aglobal equalizer app that works with any third-partymusic player. so i'm just going to getinto it and show you a typical use case. first of all, you would open upyour favorite music player, whatever it may be.
in my case, google play music. and you'd play your song. and from there, you canthen open up our app. we have a convenient shortcutand a notification bar. but google play music also hasthis nice, open intent-- well, android intent, it'sin api framework. we go sound effects. and from there, i can changewith one of the standard presets, or go to the equalizertab, either by
touching or swiping, andthen changing them by hand, just like that. and that's pretty much the gistof how to use the app. there are other, more advancedfeatures as well. so from there, i think wecan go to the slides. jens nagle: so, yeah, guys. first of all-- and we talked alittle bit before the session today started-- i was really happy that you guysapplied for this session,
because i got to know your app,and i already use it. and one feature that i findespecially cool is, they actually use id3 tags in themp3s to automatically switch between presets. and that actually works quitewell, especially if you're in the car and you don't want tofiddle around with your phone. so i really like itand i use it. one thing i wanted totalk about is-- and that might affect otherapplications, as well, as far
as i see it in the market-- is actually the tutorial. so everybody can see, this isactually the extent of the first use tutorial. it's like one, two, three, four,five, six, seven, eight, eight screens. what prompted you to have thattutorial at the beginning? michael moussa: alex did it,so he can talk about it. alex rocha: way toblame me, huh?
to be honest, we were having alot of issues with support. one of the things was, a lot ofour users actually thought that our application was a musicapp, a music player. and that's not really true. what our app is there for is to complement the music player. again, you use any music playeryou want, whether it be the standard music player app,doubletwist, whatever the case may be.
then you open our app, and thenthat's when you start applying some of the presets,equalizer effects, virtualizer, bass booster,you name it. we were getting tons and tonsof emails on, hey guys-- well, emails and one stars. so we actually said, we'regoing to come up with a guided tour. it's going to be, hopefully,enough so that users can actually learn how to use ourapp properly, reduce the
number of support emails we weregetting, and hopefully get those ratingsup and going. that was, primarily, thereason why we did it. jens nagle: and i can see howthat is sort of a difficult balance to strike. so especially, you have a littlebit of a more techy app, in that it's not thesort of traditional app. it's sort of a helper app forother music applications. so there's probablya little bit more
explanation necessary there. but as i said, it's a difficultbalance to strike. if you get too lengthy, though,i think you run the real risk that you're reallynot achieving what you're setting out to do here. because users are often notvery patient people. i would venture to say that,after the second or the third screen, you would probablyhave the yada, yada, yada, yada.
and then, on thefinal screen-- they just skip over content. more general, and notnecessarily geared towards your app, because i think youcan possibly benefit from th tutorial, but i see many appson market where, sometimes i ask myself, do they reallyneed a tutorial. either the ui is already soself-explanatory that maybe the tutorial is not needed. and that is what i wouldprobably give as advice in
general, is try to make itwork without a tutorial. try to test it with users. do they really need a tutorialor does your ui cover it? does the ui speak foritself, basically. the other good outcome of such atest is that, if you do find out that they have problems,you find out which problems they are. and that is probably somethingthat you could zero in on. cherry pick the problems.
what are really the problemsthat you need to address, or the information that you need togive to users, in order to get over to the initial hump tounderstand what your app is about and how it interplayswith other apps? michael moussa: whatare your thoughts on, like, toast hints? i've seen certain apps, incertain areas, put toast hint. maybe the first time, or afterthey detect that you're doing something which they may feelwrong a couple times, like the
swipe app, for instance. they use a lot of toast hints. jens nagle: personally, nota big fan of toast. what do you guys think, marco? marco paglia: you're puttingme on the spot. i think, like for everything,any information that we can avoid to provide and it's justimplicit in what you're doing, the better. i can see toast being overused,just when the ui's
not confident that it's goingto do a good job. and it feels the same withtutorials, as well. you do them because you don'tknow if, really, people are going to get it. it's kind of philosophical, butobviously the less you use toast, the less you usetutorial, the more, probably, you're going to be putting a lotof emphasis in the ui, in the application, and making allthe things clear through hierarchies, and throughuse cases and so forth.
so it is a tough call. rachel garb: yeah, and anotherthing is that, remember that these first time tutorials intoast and stuff, they're actually interruptions, right. it's not something thatthe user asked for. and chances are, becauseof that, they might not even pay attention. and so they might see it asan annoyance, quickly dismiss it, move on.
and so the goal that you've setout, you had really good intentions, but it didn'tget accomplished. one thing is that we areworking on help best practices, or patternsfor that. and you know that in the actionoverflow, help is something that we recommend beput there, at the bottom. and as that becomes more andmore common, i think users will look for that, actively,when they need help. michael moussa: thatmakes sense.
we actually do haveit over there. if you click on the overflowmenu, you have a little help in there. we just figured, first thingthey'll do, they'll probably run into that issue that i wassaying, where they don't properly know how to operatethe application. and because of that, then wedecided alright, well let's pop it, and then let's alsoallow them the option to, anytime they want, they can goback through it, through the
overflow menu, and hit help. but i do agree with you guys. although it did reduce, a littlebit, the amount of support that we would get, orsupport emails, rather, we've also gotten a couple emailsabout users saying, hey listen, seems like it's alittle too many pages. and we did have some instances,i don't know if you remember, where there's a littlecheck box in there we have and it says don'tshow again.
check on it, hit continue, nexttime they load the app, the help screen won't show up. a lot of people actually didn'tsee the check box, even though it's right there. they would hit continue, andthen next time they would open the app, the splash beamwould show up. so there's definitelysome pros and cons. jens nagle: and that was one ofthe other pieces of advice that i wanted to give.
do give people an option to bailout on the first screen. don't force them to go througheight pages, but say, ok, i feel like i got thishandled, so i'm going to skip the tutorial. especially when you have itcovered in the overflow menu later on, so you can goback and revisit it. michael moussa: maybe we don'tshow it on default, and they have to access it throughthe overflow menu. maybe that's a good way.
marco paglia: and something thati wanted to say, is that you guys would be surprised. we do so many user testingaround the out of the box experience with anandroid device. and you know we have thosescreens that shows up once, and they tell how to addsomething for the home screen, so even though you are excited,you just got a new device, you probably aremore likely to be reading these things.
still, people don't do it. people just want to get rightinto the experience. michael moussa: i don'tdo it, either. jens nagle: i thinkwe have some questions from the audience. audience: hey guys. i actually just wanted toshare an experience. i'm thinking back to when i wasa kid, and the first time i came across an equalizer,the bass and the treble
buttons on a stereo. it's completely magical, whereall of a sudden, you bump the bass and the wholehouse shakes. everything's effectedimmediately. you didn't have to explainanything to me, i just had to turn the knob. later on in life, when i saw agraphic equalizer, you have colors, you have, like, six,seven, eight colors and knobs that you could turn upand down immediately.
you don't have to tell me whatit does, all i have to do is turn a couple down, and youcan hear it immediately. and that's the great thing abouta graphic equalizer. the way i see your app, i thinkthere's probably two different types of users. one is going to be youraudiophile, the person who wants to get in there, andreally tweak, and make their performance optimal. another person is just going tobe entertained purely with
playing with the manipulationof sound. i think, maybe, that'ssomething you guys can consider. audience: it seems to me, ifusers are asking for a music player, you should justput a basic music player in there by default. alex rocha: that makes sense. audience: you're going to havebeginners and intermediate audiophiles, and thenaudiophiles
will find their tools. and then, this way,there is no-- by default, they useyour music player. and you've done so much work,already, on this. i'm sure it wouldn't betrouble to, basic-- michael moussa: stay tuned. check out our website. something's coming. audience: hello.
first of all, congratulationsfor the app. i find it super useful, soi'll get it, definitely. i kind of agree with theblue shirt girl. rachel garb: thanks. audience: these kind ofinterruptions for the user are kind of annoying, especiallythe first time you get the app. so on toast, of course,are really ugly. one solution that we are usingfor our app, for wunderlist--
you can download it, allof us, all of you. it's a really smart solution. what we do is, we kind of makehints live when you open the app for the first time. so we show the main screen,and we kind of add some graphics around, in the corners,where more difficult places for users are. so it's kind of, you'renot blocking the user. you have all the functionalitythere.
and you show them, you can planthe user a tick box, just not to show them again. alex rocha: i think i've seenwhat you're saying. and there's a couple instanceswhere developers will come up with an overlay pop-upthat shows up. and then they'll say, all right,click here, and then this will do this and that. all they gotta do is clickoutside, anywhere on the screen, and then thepop-up dismisses.
so that might be abetter option. audience: and you'renot, like, killing. you're not interrupting. marco paglia: so i think we'reout of time, but let's talk a little bit more afterthe show. marco paglia: so we havetwo more apps to go. the next one is goingto be latify. and i welcome on stage,davy de waele. davy de waele: hello, welcome.
i'm davy. marco was kind enough to giveme his phone, because mine obviously has a wi-fi cellradio problem here. so the application, latify, isbasically a way to control how your location and locationhistory is processed by your phone. it's basically a google latitudeclient that allows you to have fine-grainedlocation updates being managed from the application.
it also allows you to uploadyour location to other google services like fusion tables,stuff like that. it allows you to share yourlocation, location history. so everything relatedto location and location history, basically. rachel garb: so davy, i am blownaway by the amount of features you have in the app. i mean, this thing, as you saidin the description in the google play store, thisis a feature-rich app.
and sometimes, with feature richapps, we have challenges in terms of how to promote allthat it can do without overwhelming the user. so i guess the question i havefor you is, of all the things that this can do, what isthe most important. davy de waele: yeah, so like isaid, it's basically kind of a geeky, techie application. so it's kind of a derived froma google latitude api sample that i did, and it kind ofgrew to this feature-rich
so i think the important aspectof this application is that it allows you to reallyfine grain the way that your location updates are pushed togoogle latitude, and fusion tables, and stuff like that. so you can really definethe interval. do you want to use gps, wi-fi? what do you want to do if youdon't have an internet connection? should it sync that afterwards,should it sync it
automatically, stufflike that. so it's the way thatyour location is pushed to google, basically. rachel garb: ok. with that, i thought we couldtake a look, together, at your action bar that you have now. it's a definite improvement fromthe previous version, i think, in terms oficonography. you're using somestandard ones.
marco paglia: actually, forclarity, what you see here is the current applicationavailable on market to the left, and this one is theapplication that he's currently building. rachel garb: yeah so right away,i can tell, ahh, i can share, i can refresh. there are some familiarthings here. and then there are few i wasn'tso sure about, but they fit in visually.
i think peter can speak to it. there are two things that iwanted to talk about with the action bar. one is, is there a waythat we could have fewer, do you think? in terms of importance, are allthese equally important, are there things that-- davy de waele: you mean theaction items on the bottom? rachel garb: yeah that'sright, those icons.
davy de waele: yeah-- marco paglia: they'reall important! davy de waele: it's alwaysdifficult to, kind of, remove stuff, but i'm sure that-- for me, they're kind ofequally important. rachel garb: well, i'llgive a suggestion. one thing is that users areaccustomed, and i think they'll be more accustomed, inthe future, to going to the overflow menu for help.
and the one thing that i thinkyou don't want to do-- when you put help front andcenter like that, it kind of sends a-- what do you call it-- subliminalmessage, this thing is difficult to use. so that's one youcould easily-- and then you're down tofive, yeah, four. peter ang: yeah, and touchingon rachel's point, a lot of times in visual design, there'sjust a lot of stuff.
and you really want to directa user's view and focus towards one place, whichwould be the map and your main actions. and then you could draw thoseicons even flatter and flatter, but you can draw themflatter than how they are right now, right. and so a lot of the time, visualdesign is about picking and choosing the importantthings, and removing and sticking other things, andstashing them away.
rachel garb: while you're uphere, peter, i did want to ask you about a particular icon. so the pin, right? so there's a pin icon here,there's a pin in the middle of the map, and there's also a pinin the latify launcher. peter ang: so i think gigbeatdid a really good job with how they expressed their brand,was, they had a subtle cue of pink. and they had the same shape,that kind of permeated through
the whole app, right. and then, you couldalso do the same. like, the pin is thehero in this app. and then if you really created,whether it be a pin, or that google shape, placething, and then you have that consistent everywhere, it'sreally recognizable. and you could really showcasethat as the hero of your davy de waele: i'll check withthe designer that i'm probably going to have to hire.
rachel garb: and speaking ofpin, can you describe for us what this does? this particular-- davy de waele: yeah, sobasically what this pin does, is that, as it says in thehorrible toast, it allows you to set your location manually,without using the wi-fi or gps. so it basically allows you totap around the map and allows you to set a locationmanually.
rachel garb: so what happens,let's say that i didn't have that manual on, and i were totouch somewhere on the map. what would it do? davy de waele: then itwould just be the standard map behavior. rachel garb: panel, what do youthink about trying to make the manual setting of locationmore direct manipulation, where you don't haveto touch something. davy de waele: like a longpress, or something?
or-- rachel garb: i'm not sure whatthe right answer is, but just, when i think of, if this issomething that people are going to do a lot, justbe able to touch. and then maybe blow up. marco paglia: yeah, itreally feels like-- i see all the actions herein the action bar at the bottom, right. and then, when i tap on thescreen, nothing happens.
and it really feels like youshould be able to take some of these primary actions and putthem on the pin itself. it kind of surprises that if itap on the pain, i don't get an interaction. so that's, i think, the messagewe want to build. let's put the actionswhere they matter. let's just don't be lazy and belike, ok, there's an action bar for that. we'll put everything in there.
let's try to think about wherethey can be in the view. because the more we embed them,the more we map them where they matter, the morepeople will find them. question from the audience. audience: about the iconson the bottom-- i'm a developer, too, and iunderstand all the features that we implement are superimportant to us. but we always roll analytics in,and see what our users are actually using.
and we can use that data to rankthe different features that we have there and maybe notinclude them all, back to your point. so sort them by priority, andmaybe get rid of some of the ones that aren't usedterribly often. davy de waele: that's definitelya good point, yeah. jeremy lyon: one thing is, becareful about when you use analytics in that way, though. of course, your design is goingto bias people towards
selecting certain buttons. so there is definitely room foranalytics, but i think it also requires a lot of thinkingahead and trying it out yourself. rachel garb: switching topics,can we go to the screen where you have the profiles? i don't think you wereable to describe it. well actually, why don'twe just stay on here. let's stay here.
while we're here right now,another question. this goes back to iconography. i've noticed that when-- each of these has an icon, andwhen you navigate there, your app icon changes. and i wondered about that,because i'm accustomed to seeing the app icon persistentthrough an app. and when i first saw the globes,i thought, oh, that's the browser.
what are your thoughts about nothaving icons at all, for the other choices there? davy de waele: i think thefact that there are now different icons shown,is because each activity has its own icon. and the action bar was kind ofusing the spinner control, which kind of loads up all theactivities here, and this behavior kind of cameout of the box. but it can be made differently,of course.
rachel garb: yeah, i wonder ifit would take away all that much if there wereno icons at all. davy de waele: also in this,over in this spinner control. i kind of got this from thegoogle maps application, which kind of did it in that way. rachel garb: ahh, i see. davy de waele: it's exactlythe same pattern. well, that's something that wemight question on the maps product, too.
davy de waele: you have theplaces also different icons. richard fulcher: yeah, the olderversion of the g+ app was similarly guilty of that. davy de waele: i'm followingyour pattern, but you're not playing with that. richard fulcher: blessyour heart. davy de waele: but i wasthinking about placing this with the kind of slide-inthing from google+ now? richard fulcher: yeah, so ithink that pattern would be a
really good match forthis context, right? because they tend to beexclusive modes that you would be in within the application. and just kind of bringing inthat panel instead of the drop-down, especially if youwant to cosmetically add the icons to add differentiationbetween the different ones. you wouldn't necessarily evenhave to carry those individual icons forward from that point,but to just kind of make identification easier is areasonable way to go, i think.
davy de waele: it also allowsyou to put more stuff in it, like notification stuff. richard fulcher: yeah, i mean,for this app i could imagine you could have a packet whichwas explaining the current state of what you werebroadcasting. like in addition to, here is thestuff i can navigate to, here's the current state of whati'm transmitting as far as my location goesto latitude. marco paglia: there's somethinghere, though, i
think should be important toreference which is preferences and health are notreally much-- normally you use this patternwhen you have different applications withinan application. it's a lot of features. but the preference is inhelp for the settings. they normally go underan overflow. this is how people aretrained to find it. and especially because if theygo under an overflow, they can
find it in different screens,and not just in the main screen where you have it. there's just a little detail. rachel garb: do we have time forone more question, or were you about to gong? richard fulcher: no, no, no. go ahead. one more. why don't we take one morequestion from the audience?
audience: so looking at thepin, when you press it, there's no real sort of contextchange for the user. i was wondering whether youshould do something similar to in the list screens, where theheader then sort of changes, and it goes a sort of darkerblue in ics, whether something like that would kind of helpthe user know what mode they're in. davy de waele: you mean like ifyou press on a pin and you change like the action bar?
audience: well if you pressin the pin on the action bar now, yeah. if there's no indicationthat you're--? davy de waele: yeah. that can also be, yeah. rachel garb: yeah, in differenticon states. do we have time for one moretopic within latify? profiles page. when i saw this, what jumped outto me immediately, and i
also work on it a lot,is settings and the settings pattern. these look like settings tome, although you've called them profiles. do you think a lot of peoplewill use them often and change them often, or will theyset it and forget it? they will? davy de waele: yeah, this iskind of the part which is primarily used, because peoplelike put it in driving mode
because they want to updatetheir location every 30 seconds and get a really nicetrail of their trip. rachel garb: and thenwhen they're done, they turn it off. davy de waele: when they'reat home, they put it in 10 minutes, 30 minutes, to see thatok, i was at home for 8 hours, or i was at workfor 10 hours. rachel garb: but will theycome here a lot to change these choices, or will they--
davy de waele: usuallyit's done like once. they basically set it up, andthen there's either a widget to quickly change profile, orthere is integration with applications like task orlookout to automatically switch them based oncertain conditions. rachel garb: so i would suggestthat if it's true that these are not changed a lot,these preferences, that you merge them with settings, thatyou merge them with your preferences and havea setting section
in your action overflow. because that's reserved forthings that aren't used a lot, and that will also help in termsof reducing the number of choices on yourmain screen. now, in terms of design of theprofiles, definitely take a look at the settings patternin the design guide. we've got patterns that existfor all of these so that you don't have to use big buttons. in terms of these questionmarks, it's interesting that
help's come up a few timesnow in the session, which i think is great. so you have help choices forevery single setting, and there are-- let's see, there'sseven of them. and they're big and they'reblue, and i'm wondering, what if they weren't there? could there be another way thatyou could provide help? davy de waele: she's tough!
richard fulcher: the girlin blue is subtle. davy de waele: i tried to putall this text into this screen, but it's not possible. i don't know. rachel garb: again, like thepoint i made earlier, when you have a question mark that'sgiven a lot of prominence, it says to somebody, it kindof sends that subliminal message-- this is scary. and now you haveseven of them.
davy de waele: it is kind ofscary, because there are a lot of settings. and i think it's specific tothis type of application, because i really want togive the user this fine-grained control. and with that fine-grainedcontrol comes a little bit of additional information thatthey might need, i think. rachel garb: so my suggestionwould be, explore how these labels could be as informativeas possible without getting
very wordy. i know that can betough to do. and maybe your dialogues,as well. richard fulcher: and you don'thave to feel constrained, necessarily, to equalheight list items. you could have a three- orfour-line block of text under each item if it would really behelpful to explain in this context, and just takethe touch away. so to provide the samecontent, but just
make it more immediate. rachel garb: or if you thinkthat all of this explanation might be useful to see alltogether at once, like these choices relate to another,consider having one help choice for the entire screen inthe action or [inaudible]. one more question and then-- marco paglia: one more question,then we get to-- audience: another way that wecould do the help on that is simply provide, on the label,a link to the same help, so
that if you tapped on locationpolling interval, on that text, it would bring upthat information. and that way you could remove acontrol entirely, and you've still got affordance forthe full information. and then, if you also added asubtext in there, you could provide a little bit of help,and then if somebody touched it you could providethe whole help. marco paglia: yeah,i was thinking about something similar.
it's a very good insight. and i think it talks about,again, this message we're trying to deliver, which is, tryto have the actions where they matter, ratherthan creating them outside the view. and with that, thank youvery much, davy. rachel garb: yeah,thanks, davy. marco paglia: so this is thelast application, and i invite you all to stay.
because it's going tobe a lot of fun. as soon as we got thisapplication as a volunteer, we were like, oh, yeah, weneed to do it, because it's so much fun. and we played with it. so i'm really happy to haveoren onstage with us presenting face blender. oren bengigi: ok. hi, everyone.
my name is oren bengigi. i've been developing forabout two years ago. my previous experience wasdoing image processing. and face blender is an app thatwas set to solve a very important problem of takingtwo different faces and blending them into one face. so if you want to see how youand your girlfriend's children will look like, youcan use this app. this is the ui.
you can go to the blend faceui, and from here, you can open up the camera. maybe we do a live demo. anyone want to-- just a second. so we got one face. i'll take another one. can you see that? so you just press a button.
you don't have to do anything. and this is the result. oren bengigi: and you havetabs, you can see the original faces. and sometimes the facedetections go wrong, so you can-- oren bengigi: out of time. jeremy lyon: so, when marcoasked me to work on face blender, i thought i pretty muchwon the lottery out of
all of the people who were here,because everybody else had to work. i got to make goofy pictures. it's awesome. so if you can go tothe slides, marco. i pretty much walked aroundannoying all of my coworkers by forcing them to look intothe camera and take pictures with me. so this is me and my wife, andthankfully our children don't
actually look like this. so we're safe there. and this is me and our co-workerjeff, who has gone. go on to the next one, please. me and richard nho. he's somewhere around here. you may have seen himearlier today. go to the next one. now this one is actuallyme and sergey, i think.
no, this is me and rachel,actually, taken earlier today. one more? here's me and sergey, with theglasses on and everything. i'm hoping this willget me promoted. i don't know if i'm going tohave that luck or not. so obviously this appis all about fun. and if you take a look at thescreen that we're looking at right now, there's some veryinteresting subtle cues that tell you that this appis all about fun.
first of all, you've got thiscool, bright, blend background. you've got that kind ofhand-lettered font, making it feel like, hey, come play. we're not going to do anythingimportant here. we're going to have fun. and you've got the coollittle icon going in the corner there. so everything about the styleof this screen, i think,
really says, let's have fun. but then you lookat the content. and i don't know about you guys,but file manipulation is pretty low on my listof fun things to do. i look at this screen-- i look at load and delete andabout, and i can understand how those are important actions,things that people might want to be able to do,but they aren't fun. they take a little bitaway from where i
really want to go. where i really want to go withthis app is to that first button there, thatblend faces. i want to just jumpright in and start taking some pictures. so we'll talk in a second aboutmaybe some ways we could do that, but let's go onto the next screen. so you hit that blendfaces button, and this is what you see.
again, we've got a niceconsistent feel, a consistent style. it still keeps that sortof playful feel to it. but there's a lot ofthings that you can do on this screen. if i look at it, there's-- just for the one key action thati'm most interested in, which is getting a pictureloaded up to start the blending process, i'vegot six buttons.
i've got the big, niceaffordance of the picture frame, which is where my fingerjust is magnetically attracted to touch. and then i have the camerabutton, and i have a facebook button. these are all different waysof loading up a picture. and i have each one of thosefor both pictures. i've got six different buttonsthat i have to look at when i'm looking at this screen.
which can be a littleintimidating, perhaps. and also, i just have to think alot harder than i want to to work with a fun application. so i think i think one of thethings that you should think about doing with thisapplication is really trying to get right into takingthat first picture. jumping right into the bigpicture frame, before you show any of your file manipulationstuff. jump right into here.
show a big picture, maybe showa button that helps you to understand a secondary action. i mean, one of the themes, ithink, that at least we've been saying for most of the appsthat we've looked at so far today is thatless is more-- that the more you can pull outof your ui, the more you can make decisions about what's themost important aspect, the better off i think you'regoing to be. so i would look at those sixactions that you've got there.
maybe eliminate them down tothree by starting with just one picture, and movingthe user along to the second picture. oren bengigi: oh,like a result? you go from screen to screen? jeremy lyon: yeah. yeah, that's one option. you want to draw alittle bit, rich? rich is going to save you allfrom seeing my completely
illegible scribbling. and another option can thinkabout here is, are all three of those ways of getting animage equally important? you probably have a betteridea how users use this but i would argue that using thecamera to take a picture, that's what i wantto do probably about 80% of the time. and then picking something fromthe gallery, that's kind of fun too, because that'show i got to get
sergey's picture in there. and facebook, i can see how thatcould be useful, though of course i'm a google+ user,so i don't know what this facebook thing is. but-- richard fulcher: so muchsmarter than me. did we switch over? it's almost as though youread my mind, rich. yeah, this is one optionthat we could do.
what rich is drawing here is,we've got a big image in the center you could usefor your camera. tap on that big image in thecenter and switch to the camera view thatyou had before. and you have a smaller imageso you can see the other options that you mighthave available. or sorry, what the other pictureis, if you've already taken a picture, or isnot, or will soon be when you get there.
and then you could have twodifferent actions for the facebook and for the camera. i might even go further andsay, pick your secondary action, link it up to that bigpicture, and put your tertiary action in the overflowmenu somewhere. which you don't currently have,but we'll get there. what do you think? i mean, i don't know if anybodyhas other opinions about this.
oren bengigi: what aboutthe swap button to swap between the faces? richard fulcher: i thinkyou can just make it a direct touch. so it's like, this is theface i'm editing now. it's larger, so it hasprominence, so i'm going to shoot picture, pick fromgallery, or maybe i can just kind of tap directly. if i tap, you can just kind oftoggle the position of those.
there's kind of the one activeone, and maybe after i take a picture, we automaticallytoggle it. so it's like, you could evensay face a, face 1, take a picture, they switchpositions. the animation cuesyou a little bit to the state change. maybe it rotates to be face 2. and then the blend button isyour nice big target down at the bottom.
i mean, you could alsodo this as-- i kind of like the swap here,because then you don't have to have different screens. but you could imagine, the usercould also go through a progression of screens wherescreen 1 is face 1. and then that glidesover to face 2. and then maybe they don't evenhit the blend button. they just swipe over to seethe blended version. so something likethat could work.
oren bengigi: yes. jeremy lyon: so that'sscreen notes. let's go onto the screen thatyou see once you actually have finished entering in both. so what you're lookingat here is-- over there, i shouldsay-- is-- jeremy lyon: you wouldn'tsee all three of these at the same time. these are three different tapsdisplayed in this view.
and the thing i think is mostinteresting to note about this, especially after we'velooked at the last two screens, is that in the lasttwo screens, we've got this nice, colorful background, we'vegot the hand-lettering-- boom. here we're into something thatfeels very frameworky. we've got this gray action bar,we've got the blue tabs, we've got the whitebackground. it almost feels like i'm in adifferent app, and it loses a
lot of the fun, theplayfulness of the previous screens. and you might think, workingon android design, i might cheer for the action bar andthe standard framework elements here, but i think,actually, this is a case where sticking with the integrity ofyour application, the visual integrity of your application,would be the way to go, to have that nice, seamlessthrow. so i'm a little bit curiousabout why you chose to go this
direction with the screen. oren bengigi: well, the idea wasto have the ability to see all the differentfaces you took, including the blended one. and sometimes face detectiongoes wrong, so you can go and edit blend. and you can just manually adjustthe detected face, and do it to the otherface, like this. and once you hit apply, itreblends the faces, and you
get a better result. or worse, i don't know. richard fulcher: i think i'vebecome a v for vendetta mask. a ugnaught. jeremy lyon: well, there mightbe some ways to get those same kinds of actions available toyou, even using your own custom background. but one of the things you cando with action bar-- action bar doesn't need to use theframework gray background.
you can actually use atransparent background. so you can keep your ownbackground image there, the one that you've had earlier,and draw that there. likewise, you can change thefont for your app title there. you could use the same font thatyou were using earlier so you keep that consistency. and i might look at somethinginstead of tabs, which are effective ways of jumpingbetween these three screens. but going back to what rich wasdrawing, you might think
about doing this sort of moredirect manipulation. i don't know if part of what youwere trying to do here was make this image as big aspossible in this view, but you might be able to sacrifice alittle bit of space around the edges to kind of hint at the aand the b on either side, or perhaps it's a linearprogression-- i don't know what the rightapproach is here-- where you can directlymanipulate, just swapping between the two startingpictures
and the blended picture. and if you chose to use theaction bar throughout your application, even in the earlierscreens that we saw, and maintain that playfulnesswith the transparency and the font changes on the title, youcould put in there your overflow menu. and that gives you a place toput things like load and delete and the actions thatperhaps you don't want to give the same kind of prominence towhen you're really trying to
get someone just to have fun andstart taking pictures, but you need to have availableto the user there. oren bengigi: yeah, i agree. the interface here is tooserious, i think, for-- jeremy lyon: this screen, yes. marco paglia: do you want toshow the skype application? jeremy lyon: sure. what? marco paglia: the skypeapplication as an example.
marco paglia: i think this iswhat jeremy is talking about. there are applicationsalready that have a transparent action bar. so really, you can keep yourapplication feeling full screen, and you still have thataffordance that's really important to have consistent,which is the overflow menu. so there are a lot of ways toplay with your application, not to make it feel like, oh,this is an action bar, and this is this elementfrom the framework.
you can play with it and makeit feel like a full screen experience, and this isa perfect example. jeremy lyon: were thereany questions or comments from the audience? audience: i just wanted to thinkthat, potentially, the first page in the app, he couldcompletely get rid of it, and just bring up the secondpage, have the action bar with the load, delete,and about, and basically go right there.
that's my first idea. jeremy lyon: i think that'sa great idea. that's also what iwas suggesting. audience: so a comment aboutthe image selection screen. i think your suggestion is agreat improvement, but i'm still not 100% sold on it. i was wondering if maybe-- you made a comment about youreyes drawn towards the images and you just wantto touch them.
maybe there's just two buttonswith the placeholder images. when you touch one, there's asecondary level of choice. and i don't know if-- i'm guilty of not havingreviewed the new android design guidelines, so is thereany affordance that would be appropriate to accomplishthat? jeremy lyon: i'm not surethere's anything that would be a common secondaryaction level. you certainly could tap intoit and have a change in the
action bar supports that sortof behavior, so your action bar could add iconsif you want to. i had thought about that, too,when i was looking at this app, and i chose not torecommend that primarily because i think that, in orderto make that work well, you kind of need to be a littlebit interruptive. i tap into this big, beautifulpicture frame, and then i get asked how i want to getthe picture in there. and i think you could probablymake a good primary choice and
allow the other ones to kind offade into the background, so that if someone's lookingfor an alternate choice, they'll see it, but if they'renot, they don't have to kind of mentally parse it. that's my theory. richard fulcher: yeah,i mean, one other-- we'll do more questions, butone other thing to keep in mind is, there are lots ofcapabilities in android that might not seem like naturalmatches for an app like this,
but really could be great. and i think beam, or the nfc,could be one of them. imagine you've got twousers that each have this app installed. they just take their ownpictures and then touch to blend, effectively, wouldbe what you'd be doing at that point. because then both users kindof get that surprise at the same time, and it justkind of shortens it.
audience: well, i had actuallytwo suggestions. so the first was, this is fun. people have had itfor a while. they might have accumulatedsome images that they've saved. so rather than come up directlyinto face blender, come up with some thumbnailsin a gallery, and have the face blender button right there,significant, prominent. and be able to show some ofyour most recent or pick
favorites as yourstart screen. so instead of an empty screenthat you need to fill with faces to blend, you've got somefunny ones that you've already made. the second suggestionwas the tabs. tabs are kind of-- i love tabs, really, i do, andthree tabs are what i love. i have a tab widget app. it doesn't work thatwell, though.
you could put like an a on theleft and a b on the right, and have the blended face in themiddle-- swipe to see face b, swipe to see face a. and maybehave some options to shrink them and have allthree of them. especially in a tablet view,you could have all three. but my suggestion would be toput the blended face in the middle, and not on the end. that's what occurred to me. jeremy lyon: to your firstcomment, oren actually has
developed-- there is a sort ofa gallery viewing widget. i just didn't show it in thisui, because i thought these things were the mostimportant. last question. audience: i wanted to askabout the blend button. because the natural place forme to put it would be the action bar-- like, one of the actions in theaction bar just blends. and then i, myself, found aproblem in one of my apps that
people don't like it there,so i put two buttons. and this an alternative. so i wanted to know what areyour thoughts on this? what are your thoughts on twobuttons or the button on the action bar, for themain action in the form, like blend. jeremy lyon: i would usuallyput your main action in the form. if you have something wherethere's stuff going on in the
main part of the screen, likewe have in face blender, and then an action that acts on allthat stuff that you just did, it makes a lot of senseto embed that in the view instead of putting it upin the action bar. if you have-- i'm thinking of the peopleapplication, for example-- this is something where you'redoing a lot of different things when you're editinga contact. we have the done button up inthe action bar, that because
it applies to the entirety ofthe screen, and not only just the screen that you're viewingright now, but pieces that you may have been looking at,scrolled up, scrolled down. it's less of an immediateresponse to the content that's immediately above it. instead it's more of a, at thistime, i am now finished. so it kind of depends onhow you're using it. but what i'm getting a littlebit from your description is, i would probably putthat primary action
in the content itself. marco paglia: thisis the time. jeremy lyon: wait, wait, wait! i've got one more picture. go to the next one? just to end with a little-- this is me and brad pitt. i was hoping he would improveme, but i don't think it improved either of us,unfortunately.
thanks a lot. oren bengigi: thank you. marco paglia: so thankyou very much. most of you have been here fortwo hours, so pretty much thank you for myself, from ourguests, and from our team.
0 comments:
Post a Comment