>> JORDAN JOZWIAK: So today we're going to talk about sleek Android design.
So before we get started, I just want to qualify that a year ago I would say
I had no experience with design, and I cared about good design, but I didn't
really know what that meant.
And I would try, but I didn't always know what to look for and what would
make a good product.
So now, I've learned a bit more, and I just want to share some of those
experiences with you, and especially within the context of Android
operating system where there are a lot of issues with fragmentation, and some
new design patterns that are emerging.
And if you're interested in taking on an Android app, this way you hopefully
have some perspective on what the user experience and user
interface can look like.
>> Also just moments ago, we wished Joseph [? Ang ?]
his happy 21st birthday.
So for all of you that were here today, just brief recap.
So this is the really detailed explanation of what we might go over
today, a whole bunch of good and bad examples of design, high level
overview, questions of fragmentation in Android, and then a whole bunch of
different design patterns, which we'll talk about.
But to really break it down, in general, I want to talk about
experiencing design, simplifying the user interface, and actually
delighting the user and creating something that's enjoyable.
So we'll go through some general design concepts, introduce
Android-like specific concerns, including fragmentation, a couple
examples, some Android design patterns, and then some closing tips
for what to look for if you're interested in improving the
design of your apps.
>> So, fear.
You might not always associate technology with fear, but for some
people it can be.
I know that my grandmother actually chooses not to use a computer, because
it'd be overwhelming for her.
But even on a much more daily basis, there are a lot of us who when we're
using an app, we don't always know where to go next.
You know what you want to do, but you can't find that
feature or that button.
>> And we've all encountered bad design at one point or another, and sometimes
this frustration is kind of like a fear of the unknown.
And when we have this fear, in general-- like psychology has told us
that we have depth-first processing rather than breadth-first So if your
user is already frustrated with a bad user experience, they're just going to
focus more and more on what they want to do and how they can't do it based
on what they're looking for.
So we really want to focus on trying to create a good experience for the
user, because that'll make them more able to interact in a positive manner.
>> So on the other hand we have delight.
And there is a psychology study-- and some of these general design concepts
that I'm talking about are based on a talk from Dan
Harmon's Ted Talk on design.
And he talked about Alice Isen, who had this two string experiment where
people would come into a lab, and there were two strings hanging, and
there was no way that they could reach both of the strings the same time.
>> So for some of the participants who were coming in, he said, this is an IQ
test, and we're going to figure out whether or not you can reach both of
the strings.
So a lot of them would grab one and try to reach over to the other one,
and they wouldn't be able to make it.
And so a lot of people failed this test, the IQ test.
But when they came into the lab and they were presented with a bowl of
candy, just saying, hey, we have some extra candy, do you want some?
And then they proceeded with the exam and it was just kind of a fun, happy,
encounter, a lot more people were able to, creatively, think on their feet
and say, well maybe if I swing this string, then I can
catch the other one.
>> I guess the point here is that if you have a positive experience, and your
user is having fun, they're more likely to be able to continue
interacting in a positive manner.
I have heard another version of this where you can prime people with seeing
some sort of string swinging before they come to the lab or
in some other context.
And that's another thing to consider on a less emotional level, that you
could somehow trigger the user to have a certain reaction or lead them down a
path that you want them to follow.
>> This isn't the best graphic for what I'm getting at, but it's another idea
that within design, you can have a inherent, visceral, or low-level
reaction to things.
So Jurassic Park here, here's the artwork for the movie poster.
And there's some simple things going on.
Like the red and yellow, they're cautious warning colors that could
alert you to danger, and strike a little fear.
At the same time, the lettering is kind of medieval,
and it seems unrefined.
So in these basic senses, we can have low-level and primal
reactions to design.
>> There's also reflective design.
This is the Chevy Volt.
And it looks in many ways like a normal car, I mean this is a nice
graphic of it.
It looks kind of cool, the red and the blue lights are really sticking out,
but for the most part there's nothing too spectacular about this design.
On the other hand, it is an electric car.
It'll drive the first 40 miles all on electricity and then eventually start
using its gas engine.
And this is the kind of design where maybe when you're using it you don't
feel really excited about it, but when you think about it on a higher level
and what you might call the super ego, you feel really positive about it, and
it's a good experience.
>> Again, these are slides mainly from Dan Harmon's Ted Talk, and these last
two are really compelling.
This is an example of a teapot that when you tilt it to the side,
originally--
this is when you put the tea in-- so if we start on the right, we're going
to put the tea in that top compartment on the far right, and then it'll steep
with the water along the bottom part of it.
And then after it's been steeping for a while, we can angle it halfway, and
it'll continue to steep a little bit, because some of the tea leaves will
still be touching the water, but it'll definitely slow down the process.
>> And then we're completely done, we tilt it fully upright, and the water's
in the bottom and the tea leaves are in the top, and it's no longer
steeping, it's ready to serve.
And that's such a nice and simple example of great design that is--
in this case, we're just thinking about using the teapot in more
dimensions, actually rotating, and it's on its side, and how we could use
this to our advantage.
It's really wonderful and fun.
>> And the last part is, you can tell a story in design.
This chair you could definitely sit on, but it's also particularly amusing
just to look at.
The ball isn't anchored to anything, but you get--
obviously you have this feeling of how the chair is interacting and missing
the last part of its leg, trying to reach out and get it.
And within your own apps it's--
when we talk about creating user experience and branding, it's about
telling a story and giving off a general vibe so the user knows to feel
a certain way, and they feel good about feeling that way.
>> And surprise.
So this is taken from part of Google's I/O talk from this past summer.
They were talking about how, along these same lines, they want to enchant
user and they, again, went into the psychology of all this.
And they said, every day we experience around 20,000 moments of positive and
negative emotions, and that in general, it takes approximately three
positive emotions to outweigh or to balance out a negative one.
>> And so within the context of technology, here they're
talking about how--
that they created Google Now, which is their new search interface on Android.
And this top part here that at the moment has a mountain and says Google,
will actually change depending on your location and the time of day.
So no matter where you are, this mountain will eventually have a night
theme when it's night time.
>> And when I first flew back into Boston from being home in Michigan, it
changed to the Boston skyline for a while.
And again, the Boston skyline during the day, at night, sometimes it was an
actual picture, and sometimes it was just some sort of graphic art.
And it is surprising and delightful.
They do the same sort of thing with their--
Google does-- with the way they write the word Google on their home page and
have some sort of game or other artwork celebrating a
certain day of the year.
>> OK, so moving now on to Android-specific issues.
There are a lot of hurdles you have to deal with when designing for Android.
The first thing that sometimes people try to dismiss as not that much of a
problem, but it's definitely something you have to consider, is fragmentation
in Android.
Obviously, if you're designing for iOS, you're designing
for iPhones and iPads.
And there's some variation now, especially after all the years among
the different devices and the different resolutions, but for the
most part, you know what to expect.
And you can definitely get a few different devices and test on those,
and you know you're covering most of the market.
>> With Android, they're definitely the most popular phones.
This isn't a recent graphic, but it is representing the distribution of all
the different phones in Android.
There are some main ones that you can design for and hope that you're
capturing most--
not most, but a large portion of your audience, and by that
I mean maybe 20%.
But you definitely have to consider about all these different screen
sizes, there are three inch Android phones, and there are five inch
Android phones.
And there are a whole bunch of different pixel densities, and there
are a lot of different versions Android.
>> So we have to design things so that they're well abstracted and that we
have responsive design.
You don't want to design something so it's using the entire screen on a five
inch display, and then when you scale it down to a three inch display,
suddenly all the text is cut off and the boxes are strange sizes.
So we definitely have to keep this in mind and think about creating a design
that can easily scale.
>> So again, talking about the different devices.
Here are some of the different screen sizes and densities.
So at least the screen sizes here--
that's the pie chart on the left--
I guess there's not that much variation, we say, generally, they're
all normal screen size, whatever that falls on to under Android's
guidelines.
But for the pixel densities, again, you can see that there's a wide range
from extra high-density pixels to low-density pixel screens.
>> And what this means is that the graphics you use, you have to make
sure you're thinking about how they're going to scale, because they'll take
up different amount of space if you don't adjust them accordingly.
On a more technical level, this means that if you are developing for
Android, you should definitely think about using 9-patch images, which
means that we want certain aspects of this button or image to show and other
parts will scale, just this one color will scale it as large
as we need to go.
And in general, you want to make sure you're designing with pixel
independence in mind.
>> And then again, in terms of the API version, this actually has improved a
lot over the course of the years, the last year or two, especially.
It used to be that a quarter of people had the newest version of Android,
which was some sort of Ice Cream Sandwich or 4.0 iteration, and there
were the majority of people with a year old operating system that has a
completely different user interface.
Now, as you can see, about 75% have some version of the 4.0 line, which
basically means that they all have the same user interface despite slight
changes over the course of the last year and a half or so.
But there's still that quarter of people who are using Gingerbread,
which is Android 2.3, and we want to design so that they aren't completely
left behind, and especially since it's not that hard for us to make some
design modifications so that they can have the same user experience everyone
else can have.
>> So it's good for us as app developers and designers, and then also nice for
the user because they get something that's new, even if they
have an older phone.
So to go through an example here, this is an example from Android's iterative
design YouTube channel--
or their [? intro ?] design YouTube channel--
and this was one of those talks from a week over the summer.
And we can breeze through these.
Obviously, this starting point isn't a great example of design.
You can see that--
if you're familiar with Android--
it should have this action bar at the top, some nice colors, and you can see
the thumbnails are all different sizes, the text is kind of oddly
formatted, and it just doesn't feel nice, it doesn't
delight me or feel fun.
>> So the first thing we can do is, again, considering that this is an old
version of Android, there's a really easy way to bring it up to date with
new design patterns.
And that means we just include the support library that Android releases
for the action bar.
So what this means is that if you're starting an app, you just include this
and you make all those necessary design
considerations at the beginning.
If you try to integrate this later on you can still do it, and they make it
pretty easy, but it'll just be a little bit more of a hassle.
So just go in thinking about how you're going to support basically 100%
of Android users rather than just the 75% who have newer phones.
>> So if we add this action bar at the top, you can see we went from this
grey line to a nice line that has different action items and buttons we
can press to do different things on the page, and then a logo, call it XYZ
Reader, and it already feels a little more modern.
We can continue this styling by making it branded with a color scheme, so in
this case we just made it orange.
And already we're giving the app a little more identity.
It has its own character, and you feel like you're not just using some
generic template, but you're using an app that has some sort of voice.
>> So going from these two it's a little more subtle difference, but spacing,
white space, is a really simple thing that I think is easy to overlook for
people who are just getting into design.
White space, especially consistent white space around the border, it can
making things feel a lot less claustrophobic.
Just that padding around the side, it makes things easier to read and
everything fits together better, especially if you have things aligned
right along the left side.
Then it's especially difficult to sometimes even read those characters
right along the line.
>> And then we can also change the thumbnails to make them more
consistent in this case.
List views are already kind of annoying to flip through, and having
pictures or thumbnails of a whole bunch of different sizes can just make
things worse.
So the best thing we can do is just make all the thumbnails the same.
And in terms of the actual coding here, again, this is really easy.
You just add this extra attribute called android:scaleType="centerCrop",
and it means you give the image certain dimensions, and it'll just a
scale it so it fits the entire size, the entire area, without
distorting the image.
>> And typography.
So this is, especially if you're familiar with iOS7, a huge change
going on in, especially in the last year or so with CS design.
There's this movement toward thin fonts and definitely a
variation in fonts.
And Android has this great font built in, Roboto, and it has a whole bunch
of different styles.
Obviously, you have bold and italics, but you also have thin and some sort
of ultra thin text.
And there are ways of creating a variety of styles and give you some
context to the different meanings of the text without using some
discontinuous fonts.
>> So a good idea in general, is that you can use thin fonts for large headers,
and then maybe if you have a whole bunch of text, you can use a condensed
font, which just means that it's the same size vertically, but a little
shorter horizontally, each character is.
So you can fit more words in a smaller amount of space.
This is especially useful in this case, for the list view, because if
you just want a snippet, or preview, of the text, in that case you're
probably not reading the whole thing, so your eyes aren't
going to get tired.
But you do you want as much information in as
little space as possible.
>> And then again another design consideration is, when we click on one
of these items here in the list view and we open this other page, we don't
want to say, OK, I'm done reading this, I'll go back and I'll
click on a new thing.
What if I just want to read all the articles for the day?
Then a much, much better design is to be able to swipe between things in the
same horizontal hierarchy.
And this is probably not intuitive at the very first, but once people start
realizing this, it makes a lot of sense, especially that you're swiping
left and right.
Because even if they're not thinking about the structure of the app as a
hierarchy, it does make sense logically, if you start at a top level
list view and then you navigate to a detail page that has some sort of
article, that you would swipe between them.
>> And so over the course of all these different changes, you see how these
were just aesthetic layout changes, and yet now at the very end of it,
this seems like an app I might want to use.
Especially starting from way back here when it looked old and clunky and like
no one really cared about it.
And with not too many changes, just starting with the action bar, then the
color scheme and white space, thumbnails, typography, and being able
to swipe between the views, it's suddenly a very immersive experience.
And even for something so simple as this.
>> But there's still some other considerations, and that's tablets.
This would also be consideration on the iOS, but there are even more form
factors on Android.
You have your ten inch tablets, and your seven inch tablets, and some ones
everywhere in between there.
And in this case, you don't really want to have the same kind of list
view and article reading experience, because there's so much more space,
and we want to use it a lot more efficiently.
So the best thing to do for a tablet interface is to have this master view
or master detail set up, where you have the list on one side, and then
article on the other part of the screen.
>> And this is something, again, that it's very important to consider when
you're starting the app from the beginning.
Because otherwise, you're going to have this whole structure implemented,
and then you're going to want to throw this in there, and it's going to be
pretty difficult.
So it's best to think about these things when you're starting the app.
And again, it's amazing what a difference a little bit of white space
can make, going from this to this.
It's much nicer by adding some extra padding on tablets.
>> So that was step-by-step iterative design on an example app.
Now, I'm going to show you an app that I've done and has changed a little
bit, and then an app that I think is much better than it, and those design
considerations.
So here's an app that I made, this converter app, and this is basically
what it looked like, not long ago, but definitely like a year ago.
>> And you can see that there aren't really margins on the left and right
side, there's no branding or theme to it, at the top it's just the default,
Android style.
These tabs probably at the time, made sense to me that they
were going to make--
everything was going to be simpler, but if you're converting between
different unit types, distance, mass, volume, and then any
that isn't an easy--
it's not always intuitive.
Especially because, what if I'm user who wants to convert some sort of
distance unit, and distance is under both any and distance?
Do I feel like, is one better than the other?
It's confusing and not great.
>> So a simple improvement that I've made since then, but could certainly
improved more, is just to pull a lot of that junk out.
And this is in many ways, again, very similar to the design of
that previous slide.
But here you just have one page, got rid of all those different tabs, this
is just where you have all those different options.
And the margins and the padding on the side are a little better.
And it's just, overall, cleaner.
And then there is that blue branding for the action bar at the top, and
then a navigation drawer, which we'll talk about a little bit, on the side.
>> And you can see how this is just a simple step forward, but at the same
time, it doesn't address a lot of the design considerations that we were
talking about before.
It feels like it's not surprising me, it's not delighting me, and it's just
doing what it needs to do in a way that, at least in this case, is
slightly less confusing.
>> Now this is another converter app that I found in the Android store that I
think is really, really great.
It's--
I don't remember its name-- but it has that branding with the two different
arrows, that blue arrow going up and the other one going down.
But the starting page, here, you have what unit you want to convert from,
and then there are these--
it makes more sense when you use it, at first it's a little confusing.
>> But they're simple things like the from unit, there's a search button
right next to it, which is the same sort of thing that was in my app, but
in my app, it opened another dialogue that you'd have to search from, and
then you'd go back to the other place.
This one it just replaces that spinner, or the drop down menu, with a
search box, and you just start typing and then you select
something right there.
>> So you don't have to go anywhere else, all the searching
happens in the same place.
And makes a lot more sense that way, because even if for a moment you're
redirected somewhere else, you have to question, why?
Why did I leave?
And then where am I going back to?
And this keeps everything really organized.
>> And then there are other features like on that previous slide I showed you.
Here, like different places for converting between two different units
and then converting between that unit and any other possible
unit in that category.
Here, there's just this little arrow, it's one of the three buttons on the
right-hand side.
It's an arrow that will choose whether or not you want to convert between two
units or everything.
Again, it's using the space much more efficiently.
>> And it might take the user a little while to learn what that arrow means,
which perhaps isn't great, but as soon as they do, they realize that they can
do a lot right there.
And they can easily switch between different kinds of tasks.
And the thing that I like most about this, by far, is that if you click on
that search button at the very top, it's a global search for any sort of
unit you want to search for.
It opens the navigation drawer on the left and you can just start searching
in that text box, and it'll start picking out any unit
from any unit type.
>> And it originally shows you all the different unit types with nice
graphics next to them, and then as you search, it'll show you nice
indentation for, like these are the area units that you're searching for,
and everything is still in a hierarchy as you search.
So it's very intuitive, and very well organized.
And you can always swipe between these different views on the page.
It also has a really great tablet optimization, so it'd be worth
checking out.
>> Jumping back to branding and color scheming, so this is some work I did
over the summer with this company called V1 Sports.
And I didn't change much on this page, actually the only thing I changed is
the action bar.
And this is their home screen, and they were pretty adamant on keeping it
the way it was, but originally all the action bars were black.
It was just the default Android styling.
>> And there was really, other than the main picture on that home screen,
there's no way to tell the apps apart.
And that meant, if you got it in the navigation or the hierarchy later in
the app, especially as a developer who's testing the different apps, I
personally, got confused and forgot which app I was using.
But by just putting a little color in the action bar, it's suddenly created
some sort of branding and styling for that app that was continuous
throughout the user experience.
>> So the action bar that I keep talking about, here, it again, can have
different colors.
This one doesn't.
But it has the home button, and that's really nice.
It's basically like in the top left of any website, you can usually click
that icon and go back home.
The same sort of thing is true here, you have the app icon, you can always
click on that.
And then you can have a whole bunch of different action items in this over
flow part of the action bar, which are items two and three here.
And action items are things that you'd want to do based on the page, they're
not going to take you anywhere else, they're not navigation, but they will
serve some sort of purpose for maybe selecting things or
searching and so forth.
>> And then this other--
OK so now we're talking about these actual Android design considerations
and the different patterns.
The navigation drawer is a new one that Android just released their own
library for it over the summer, although it's been used for probably a
year or more now.
But the idea is that you click that same home button in the top left, but
now you can see all places you could go, or the places you're
most likely to go.
>> And suddenly, it's basically like on Amazon or a lot of those websites
where you have that sidebar that lets you go anywhere at any point.
It was really difficult with mobile apps, because we didn't have
the space for that.
But now, if you use the space differently where you're basically
swiping in from the side, you can get a lot more--
it's easier to get the user where they want to go, quicker.
So they can just click on that, choose where they want to go, and then go
somewhere totally different in the app.
>> And here's some examples of that with different apps, some screen
shots that I took.
With Amazon, well with Kindle, here you can see you can search and then go
to a whole bunch of different places in the app.
With the YouTube app, same sort of thing, I see my profile and I can go
to the channels I subscribe to, or I can browse new things.
It takes me to the places I'm probably most likely to go as a YouTube user.
>> And with Evernote, they have an interesting take on this where you see
you don't have to just have list items here in the navigation drawer.
It'll open, and I can choose to make a new note of different types with a
camera or recording something, and it can give me a whole bunch of
interaction.
You can see there are thumbnails in some of these and numbers with the
list views letting you know how many things are in each of these places.
And it really is one of these things where what we're doing with this kind
of design pattern is we're realizing where it is, and
what the user expects.
But it's also important to try to do something new and branch out from
doing list views for simple navigation and maybe putting your own
character into it.
>> So one last Android thing is that, again, we're talking about making sure
we don't keep users in the dark, at least the old users who have previous
versions of Android.
So if they're using Gingerbread, when we added the action bar support
library and the navigation drawer support library, then they can get
those features in the app, just like every other user would.
But if we also add this third party library called a HoloEverywhere then
it's a good way to, again, make sure that the users have the same
experience across all versions of Android.
This just means we're taking that modern Android 4.0 and above user
interface and we're applying it across the board to all the
apps that use this.
>> And maybe this one isn't as much of a concern, it'll certainly take a little
more implementation, but it's something to consider that if you
really want you have to look the same all the time, maybe consider this.
Or you could always create your own custom buttons and custom input fields
and everything.
And then, in that way, have the same user experience.
>> So again, just talking about branding, that this is something that Google
does in terms of their--
like here's their Google Play Store, and just simple things like having a
color associated with a certain app.
And they've done a really good job creating this kind of continuity.
And I think, now, I've almost associated music with the color yellow
because of Google Play music, or sorry, the color orange.
But things as simple as colors can give apps a lot of identity.
>> So tips for design in general, and specifically, mobile app design.
This actually isn't Android, but it is a mobile app.
And the idea here is just that--
this is something I came across online.
And it's a really interesting take on a login screen, not terribly
different, and arguably maybe a little too austere but it is different.
>> So I guess the tip I have for thinking about design, and when you're creating
something as simple as a login page or really any part of your app, is just
go out and look at a whole bunch of different apps out there, take screen
shots of them, and create a whole folder on your computer that you can
just scroll through and look at all the different versions of exactly what
you're trying to do.
See what has been done, see what you like and don't like, and then think
about how you can use the personality if your own app and what you're
making, and try to integrate those.
>> So then the goal is to see what is good design and deconstruct it into
components that we can talk about.
So in this example, or in login screens in general, it's taking this
new approach by giving the branding of the app some more character.
It's normally this kind of like smiley blue face and then when you get the
password wrong, it actually changes the logo for the app, or that large
picture, and it makes a angry face that's red.
>> And it's just simple stuff like that, in this case, I suppose it could
definitely have those two different sides that it surprising and amusing.
And in that way, you don't feel so bad about getting the password wrong, or
at least it's like, I'm almost glad I got the password wrong because then I
saw this fun easter egg.
It is still a little red and maybe it has a visceral reaction where I feel
like the app's threatening me, but it's definitely a different approach.
And it's these kind of things that are worth considering,
thinking outside the box.
>> Because on a login page, there are a lot of things to consider.
There's your username, password, but then how are you going to put the
forgot password on the page in a way that it's not--
it's the sort of thing that people use sometimes, maybe a lot of people use
all the time, and they're really going to count on that button, but we don't
want it to take up space and distract from the flow that we want people to
go through.
And the same sort of thing with signing in, and
creating a new account.
These are all things that you have to consider when
creating a page like this.
>> And then how do you actually get practice with this?
And this is, again, just a couple screenshots from what I did over the
summer that at some point, on pen and paper, I just wrote out what I thought
a good design would be that we could make.
And then at some point, I created a mock up on Android.
>> These are just layouts, and these are using the bare minimum
of what I can do.
There's very little logic in the back, here, this isn't actually an
implemented app, but I just wanted to get a feel of what it could look like.
And if you're doing your own app, I'd really recommend separating those
parts of it, the logic backend and the visual frontend, and try a few
different things and think about what will work and what won't work and
really how you want to user to feel, and what you want them to do.
Try to help them with that and make it a good experience.
>> OK, so that's basically it for my take on design.
Again, I'm new to this, and I guess that's the path I followed.
And I hope that for people who are trying to, especially our developers
that are trying to think about ways that they can improve their own
design, these are definitely some good starting places.
>> And now in general, if you want to start with Android apps, follow this
link, or just search for Android get started.
There's a lot of documentation online and a lot of sample code.
It's really, straightforward.
And hopefully it'll be very enjoyable.
So that's it for me.
I hope that you can go forward and do some Android coding, and while you're
doing that developing, you can also think about what makes good design and
what makes good apps enjoyable for the user.
>> Thanks.