1
00:00:00,000 --> 00:00:08,830

2
00:00:08,830 --> 00:00:13,190
>> JORDAN JOZWIAK: So today we're going
to talk about sleek Android design.

3
00:00:13,190 --> 00:00:17,560
So before we get started, I just want to
qualify that a year ago I would say

4
00:00:17,560 --> 00:00:23,920
I had no experience with design, and I
cared about good design, but I didn't

5
00:00:23,920 --> 00:00:25,010
really know what that meant.

6
00:00:25,010 --> 00:00:28,580
And I would try, but I didn't always
know what to look for and what would

7
00:00:28,580 --> 00:00:29,740
make a good product.

8
00:00:29,740 --> 00:00:33,910
So now, I've learned a bit more, and
I just want to share some of those

9
00:00:33,910 --> 00:00:37,150
experiences with you, and especially
within the context of Android

10
00:00:37,150 --> 00:00:41,050
operating system where there are a lot
of issues with fragmentation, and some

11
00:00:41,050 --> 00:00:42,580
new design patterns that are emerging.

12
00:00:42,580 --> 00:00:47,110
And if you're interested in taking on an
Android app, this way you hopefully

13
00:00:47,110 --> 00:00:49,800
have some perspective on what
the user experience and user

14
00:00:49,800 --> 00:00:52,120
interface can look like.

15
00:00:52,120 --> 00:00:54,172
>> Also just moments ago, we
wished Joseph [? Ang ?]

16
00:00:54,172 --> 00:00:56,790
his happy 21st birthday.

17
00:00:56,790 --> 00:01:04,550
So for all of you that were here
today, just brief recap.

18
00:01:04,550 --> 00:01:07,890
So this is the really detailed
explanation of what we might go over

19
00:01:07,890 --> 00:01:12,000
today, a whole bunch of good and bad
examples of design, high level

20
00:01:12,000 --> 00:01:16,050
overview, questions of fragmentation in
Android, and then a whole bunch of

21
00:01:16,050 --> 00:01:18,630
different design patterns,
which we'll talk about.

22
00:01:18,630 --> 00:01:23,810
But to really break it down, in
general, I want to talk about

23
00:01:23,810 --> 00:01:28,390
experiencing design, simplifying the
user interface, and actually

24
00:01:28,390 --> 00:01:31,640
delighting the user and creating
something that's enjoyable.

25
00:01:31,640 --> 00:01:34,930
So we'll go through some general
design concepts, introduce

26
00:01:34,930 --> 00:01:38,870
Android-like specific concerns,
including fragmentation, a couple

27
00:01:38,870 --> 00:01:42,100
examples, some Android design patterns,
and then some closing tips

28
00:01:42,100 --> 00:01:46,600
for what to look for if you're
interested in improving the

29
00:01:46,600 --> 00:01:48,075
design of your apps.

30
00:01:48,075 --> 00:01:51,260

31
00:01:51,260 --> 00:01:54,390
>> So, fear.

32
00:01:54,390 --> 00:01:57,710
You might not always associate
technology with fear, but for some

33
00:01:57,710 --> 00:01:58,740
people it can be.

34
00:01:58,740 --> 00:02:04,520
I know that my grandmother actually
chooses not to use a computer, because

35
00:02:04,520 --> 00:02:06,910
it'd be overwhelming for her.

36
00:02:06,910 --> 00:02:14,900
But even on a much more daily basis,
there are a lot of us who when we're

37
00:02:14,900 --> 00:02:16,940
using an app, we don't always
know where to go next.

38
00:02:16,940 --> 00:02:21,050
You know what you want to do,
but you can't find that

39
00:02:21,050 --> 00:02:22,570
feature or that button.

40
00:02:22,570 --> 00:02:30,140
>> And we've all encountered bad design at
one point or another, and sometimes

41
00:02:30,140 --> 00:02:34,920
this frustration is kind of like
a fear of the unknown.

42
00:02:34,920 --> 00:02:41,320
And when we have this fear, in general--
like psychology has told us

43
00:02:41,320 --> 00:02:45,500
that we have depth-first processing
rather than breadth-first So if your

44
00:02:45,500 --> 00:02:48,940
user is already frustrated with a bad
user experience, they're just going to

45
00:02:48,940 --> 00:02:52,010
focus more and more on what they want
to do and how they can't do it based

46
00:02:52,010 --> 00:02:53,990
on what they're looking for.

47
00:02:53,990 --> 00:02:57,790
So we really want to focus on trying
to create a good experience for the

48
00:02:57,790 --> 00:03:03,110
user, because that'll make them more
able to interact in a positive manner.

49
00:03:03,110 --> 00:03:04,690
>> So on the other hand we have delight.

50
00:03:04,690 --> 00:03:14,315
And there is a psychology study-- and
some of these general design concepts

51
00:03:14,315 --> 00:03:17,560
that I'm talking about are
based on a talk from Dan

52
00:03:17,560 --> 00:03:20,190
Harmon's Ted Talk on design.

53
00:03:20,190 --> 00:03:25,260
And he talked about Alice Isen, who had
this two string experiment where

54
00:03:25,260 --> 00:03:29,370
people would come into a lab, and there
were two strings hanging, and

55
00:03:29,370 --> 00:03:34,110
there was no way that they could reach
both of the strings the same time.

56
00:03:34,110 --> 00:03:39,150
>> So for some of the participants who were
coming in, he said, this is an IQ

57
00:03:39,150 --> 00:03:43,790
test, and we're going to figure out
whether or not you can reach both of

58
00:03:43,790 --> 00:03:44,180
the strings.

59
00:03:44,180 --> 00:03:47,230
So a lot of them would grab one and try
to reach over to the other one,

60
00:03:47,230 --> 00:03:48,920
and they wouldn't be able to make it.

61
00:03:48,920 --> 00:03:54,960
And so a lot of people failed
this test, the IQ test.

62
00:03:54,960 --> 00:03:58,050
But when they came into the lab and
they were presented with a bowl of

63
00:03:58,050 --> 00:04:01,040
candy, just saying, hey, we have some
extra candy, do you want some?

64
00:04:01,040 --> 00:04:05,340
And then they proceeded with the exam
and it was just kind of a fun, happy,

65
00:04:05,340 --> 00:04:09,610
encounter, a lot more people were able
to, creatively, think on their feet

66
00:04:09,610 --> 00:04:12,260
and say, well maybe if I swing
this string, then I can

67
00:04:12,260 --> 00:04:13,510
catch the other one.

68
00:04:13,510 --> 00:04:16,620

69
00:04:16,620 --> 00:04:20,620
>> I guess the point here is that if you
have a positive experience, and your

70
00:04:20,620 --> 00:04:24,470
user is having fun, they're more
likely to be able to continue

71
00:04:24,470 --> 00:04:26,720
interacting in a positive manner.

72
00:04:26,720 --> 00:04:30,860
I have heard another version of this
where you can prime people with seeing

73
00:04:30,860 --> 00:04:35,100
some sort of string swinging before
they come to the lab or

74
00:04:35,100 --> 00:04:36,650
in some other context.

75
00:04:36,650 --> 00:04:40,810
And that's another thing to consider
on a less emotional level, that you

76
00:04:40,810 --> 00:04:47,260
could somehow trigger the user to have a
certain reaction or lead them down a

77
00:04:47,260 --> 00:04:50,580
path that you want them to follow.

78
00:04:50,580 --> 00:04:55,680
>> This isn't the best graphic for what I'm
getting at, but it's another idea

79
00:04:55,680 --> 00:05:05,560
that within design, you can have a
inherent, visceral, or low-level

80
00:05:05,560 --> 00:05:06,780
reaction to things.

81
00:05:06,780 --> 00:05:12,090
So Jurassic Park here, here's the
artwork for the movie poster.

82
00:05:12,090 --> 00:05:14,660
And there's some simple
things going on.

83
00:05:14,660 --> 00:05:20,210
Like the red and yellow, they're
cautious warning colors that could

84
00:05:20,210 --> 00:05:23,720
alert you to danger, and
strike a little fear.

85
00:05:23,720 --> 00:05:27,880
At the same time, the lettering
is kind of medieval,

86
00:05:27,880 --> 00:05:32,500
and it seems unrefined.

87
00:05:32,500 --> 00:05:40,350
So in these basic senses, we can
have low-level and primal

88
00:05:40,350 --> 00:05:42,630
reactions to design.

89
00:05:42,630 --> 00:05:45,060
>> There's also reflective design.

90
00:05:45,060 --> 00:05:46,340
This is the Chevy Volt.

91
00:05:46,340 --> 00:05:49,550
And it looks in many ways like a normal
car, I mean this is a nice

92
00:05:49,550 --> 00:05:50,060
graphic of it.

93
00:05:50,060 --> 00:05:53,650
It looks kind of cool, the red and the
blue lights are really sticking out,

94
00:05:53,650 --> 00:06:01,260
but for the most part there's nothing
too spectacular about this design.

95
00:06:01,260 --> 00:06:03,490
On the other hand, it
is an electric car.

96
00:06:03,490 --> 00:06:08,120
It'll drive the first 40 miles all on
electricity and then eventually start

97
00:06:08,120 --> 00:06:09,680
using its gas engine.

98
00:06:09,680 --> 00:06:12,940
And this is the kind of design where
maybe when you're using it you don't

99
00:06:12,940 --> 00:06:18,330
feel really excited about it, but when
you think about it on a higher level

100
00:06:18,330 --> 00:06:25,830
and what you might call the super ego,
you feel really positive about it, and

101
00:06:25,830 --> 00:06:28,010
it's a good experience.

102
00:06:28,010 --> 00:06:34,430
>> Again, these are slides mainly from Dan
Harmon's Ted Talk, and these last

103
00:06:34,430 --> 00:06:35,890
two are really compelling.

104
00:06:35,890 --> 00:06:41,770
This is an example of a teapot that
when you tilt it to the side,

105
00:06:41,770 --> 00:06:42,670
originally--

106
00:06:42,670 --> 00:06:46,880
this is when you put the tea in-- so if
we start on the right, we're going

107
00:06:46,880 --> 00:06:53,290
to put the tea in that top compartment
on the far right, and then it'll steep

108
00:06:53,290 --> 00:06:56,750
with the water along the
bottom part of it.

109
00:06:56,750 --> 00:07:02,230
And then after it's been steeping for a
while, we can angle it halfway, and

110
00:07:02,230 --> 00:07:05,030
it'll continue to steep a little bit,
because some of the tea leaves will

111
00:07:05,030 --> 00:07:09,050
still be touching the water, but it'll
definitely slow down the process.

112
00:07:09,050 --> 00:07:14,040
>> And then we're completely done, we tilt
it fully upright, and the water's

113
00:07:14,040 --> 00:07:18,140
in the bottom and the tea leaves are
in the top, and it's no longer

114
00:07:18,140 --> 00:07:20,860
steeping, it's ready to serve.

115
00:07:20,860 --> 00:07:27,880
And that's such a nice and simple
example of great design that is--

116
00:07:27,880 --> 00:07:32,390
in this case, we're just thinking
about using the teapot in more

117
00:07:32,390 --> 00:07:36,230
dimensions, actually rotating, and it's
on its side, and how we could use

118
00:07:36,230 --> 00:07:38,430
this to our advantage.

119
00:07:38,430 --> 00:07:42,710
It's really wonderful and fun.

120
00:07:42,710 --> 00:07:46,400
>> And the last part is, you can
tell a story in design.

121
00:07:46,400 --> 00:07:50,810
This chair you could definitely sit on,
but it's also particularly amusing

122
00:07:50,810 --> 00:07:51,810
just to look at.

123
00:07:51,810 --> 00:07:54,530
The ball isn't anchored to
anything, but you get--

124
00:07:54,530 --> 00:07:58,850
obviously you have this feeling of how
the chair is interacting and missing

125
00:07:58,850 --> 00:08:03,130
the last part of its leg, trying
to reach out and get it.

126
00:08:03,130 --> 00:08:06,570
And within your own apps it's--

127
00:08:06,570 --> 00:08:12,880
when we talk about creating user
experience and branding, it's about

128
00:08:12,880 --> 00:08:17,780
telling a story and giving off a general
vibe so the user knows to feel

129
00:08:17,780 --> 00:08:22,230
a certain way, and they feel good
about feeling that way.

130
00:08:22,230 --> 00:08:22,920
>> And surprise.

131
00:08:22,920 --> 00:08:29,950
So this is taken from part of Google's
I/O talk from this past summer.

132
00:08:29,950 --> 00:08:36,080
They were talking about how, along these
same lines, they want to enchant

133
00:08:36,080 --> 00:08:40,220
user and they, again, went into
the psychology of all this.

134
00:08:40,220 --> 00:08:47,830
And they said, every day we experience
around 20,000 moments of positive and

135
00:08:47,830 --> 00:08:53,510
negative emotions, and that in general,
it takes approximately three

136
00:08:53,510 --> 00:08:58,260
positive emotions to outweigh or
to balance out a negative one.

137
00:08:58,260 --> 00:09:01,180
>> And so within the context of
technology, here they're

138
00:09:01,180 --> 00:09:02,430
talking about how--

139
00:09:02,430 --> 00:09:05,410

140
00:09:05,410 --> 00:09:10,960
that they created Google Now, which is
their new search interface on Android.

141
00:09:10,960 --> 00:09:16,340
And this top part here that at the
moment has a mountain and says Google,

142
00:09:16,340 --> 00:09:19,480
will actually change depending on your
location and the time of day.

143
00:09:19,480 --> 00:09:26,215
So no matter where you are, this
mountain will eventually have a night

144
00:09:26,215 --> 00:09:28,310
theme when it's night time.

145
00:09:28,310 --> 00:09:33,160
>> And when I first flew back into Boston
from being home in Michigan, it

146
00:09:33,160 --> 00:09:35,250
changed to the Boston
skyline for a while.

147
00:09:35,250 --> 00:09:39,280
And again, the Boston skyline during the
day, at night, sometimes it was an

148
00:09:39,280 --> 00:09:43,220
actual picture, and sometimes it was
just some sort of graphic art.

149
00:09:43,220 --> 00:09:47,680
And it is surprising and delightful.

150
00:09:47,680 --> 00:09:49,560
They do the same sort of
thing with their--

151
00:09:49,560 --> 00:09:55,340
Google does-- with the way they write
the word Google on their home page and

152
00:09:55,340 --> 00:09:59,560
have some sort of game or other
artwork celebrating a

153
00:09:59,560 --> 00:10:00,810
certain day of the year.

154
00:10:00,810 --> 00:10:03,770

155
00:10:03,770 --> 00:10:08,550
>> OK, so moving now on to Android-specific
issues.

156
00:10:08,550 --> 00:10:12,730
There are a lot of hurdles you have to
deal with when designing for Android.

157
00:10:12,730 --> 00:10:19,020
The first thing that sometimes people
try to dismiss as not that much of a

158
00:10:19,020 --> 00:10:21,610
problem, but it's definitely something
you have to consider, is fragmentation

159
00:10:21,610 --> 00:10:22,760
in Android.

160
00:10:22,760 --> 00:10:24,820
Obviously, if you're designing
for iOS, you're designing

161
00:10:24,820 --> 00:10:27,290
for iPhones and iPads.

162
00:10:27,290 --> 00:10:31,840
And there's some variation now,
especially after all the years among

163
00:10:31,840 --> 00:10:33,860
the different devices and the different
resolutions, but for the

164
00:10:33,860 --> 00:10:35,610
most part, you know what to expect.

165
00:10:35,610 --> 00:10:40,410
And you can definitely get a few
different devices and test on those,

166
00:10:40,410 --> 00:10:43,030
and you know you're covering
most of the market.

167
00:10:43,030 --> 00:10:46,440
>> With Android, they're definitely
the most popular phones.

168
00:10:46,440 --> 00:10:51,540
This isn't a recent graphic, but it is
representing the distribution of all

169
00:10:51,540 --> 00:10:54,880
the different phones in Android.

170
00:10:54,880 --> 00:10:58,230
There are some main ones that you can
design for and hope that you're

171
00:10:58,230 --> 00:11:00,420
capturing most--

172
00:11:00,420 --> 00:11:03,680
not most, but a large portion of
your audience, and by that

173
00:11:03,680 --> 00:11:06,580
I mean maybe 20%.

174
00:11:06,580 --> 00:11:09,940
But you definitely have to consider
about all these different screen

175
00:11:09,940 --> 00:11:12,980
sizes, there are three inch Android
phones, and there are five inch

176
00:11:12,980 --> 00:11:13,970
Android phones.

177
00:11:13,970 --> 00:11:17,000
And there are a whole bunch of different
pixel densities, and there

178
00:11:17,000 --> 00:11:18,800
are a lot of different
versions Android.

179
00:11:18,800 --> 00:11:22,695
>> So we have to design things so that
they're well abstracted and that we

180
00:11:22,695 --> 00:11:24,140
have responsive design.

181
00:11:24,140 --> 00:11:27,930
You don't want to design something so
it's using the entire screen on a five

182
00:11:27,930 --> 00:11:31,000
inch display, and then when you scale
it down to a three inch display,

183
00:11:31,000 --> 00:11:35,060
suddenly all the text is cut off and
the boxes are strange sizes.

184
00:11:35,060 --> 00:11:39,680
So we definitely have to keep this in
mind and think about creating a design

185
00:11:39,680 --> 00:11:42,800
that can easily scale.

186
00:11:42,800 --> 00:11:45,680
>> So again, talking about
the different devices.

187
00:11:45,680 --> 00:11:49,460
Here are some of the different
screen sizes and densities.

188
00:11:49,460 --> 00:11:53,290
So at least the screen sizes here--

189
00:11:53,290 --> 00:11:56,170
that's the pie chart on the left--

190
00:11:56,170 --> 00:11:59,680
I guess there's not that much variation,
we say, generally, they're

191
00:11:59,680 --> 00:12:03,370
all normal screen size, whatever that
falls on to under Android's

192
00:12:03,370 --> 00:12:04,140
guidelines.

193
00:12:04,140 --> 00:12:08,220
But for the pixel densities, again, you
can see that there's a wide range

194
00:12:08,220 --> 00:12:13,110
from extra high-density pixels
to low-density pixel screens.

195
00:12:13,110 --> 00:12:16,150
>> And what this means is that the graphics
you use, you have to make

196
00:12:16,150 --> 00:12:20,780
sure you're thinking about how they're
going to scale, because they'll take

197
00:12:20,780 --> 00:12:24,130
up different amount of space if you
don't adjust them accordingly.

198
00:12:24,130 --> 00:12:26,970
On a more technical level, this means
that if you are developing for

199
00:12:26,970 --> 00:12:30,660
Android, you should definitely think
about using 9-patch images, which

200
00:12:30,660 --> 00:12:37,420
means that we want certain aspects of
this button or image to show and other

201
00:12:37,420 --> 00:12:41,540
parts will scale, just this one
color will scale it as large

202
00:12:41,540 --> 00:12:43,920
as we need to go.

203
00:12:43,920 --> 00:12:48,190
And in general, you want to make sure
you're designing with pixel

204
00:12:48,190 --> 00:12:50,580
independence in mind.

205
00:12:50,580 --> 00:12:53,640
>> And then again, in terms of the API
version, this actually has improved a

206
00:12:53,640 --> 00:12:57,190
lot over the course of the years, the
last year or two, especially.

207
00:12:57,190 --> 00:13:02,590
It used to be that a quarter of people
had the newest version of Android,

208
00:13:02,590 --> 00:13:06,710
which was some sort of Ice Cream
Sandwich or 4.0 iteration, and there

209
00:13:06,710 --> 00:13:11,960
were the majority of people with a year
old operating system that has a

210
00:13:11,960 --> 00:13:13,980
completely different user interface.

211
00:13:13,980 --> 00:13:24,530
Now, as you can see, about 75% have some
version of the 4.0 line, which

212
00:13:24,530 --> 00:13:28,750
basically means that they all have the
same user interface despite slight

213
00:13:28,750 --> 00:13:34,180
changes over the course of the
last year and a half or so.

214
00:13:34,180 --> 00:13:36,710
But there's still that quarter of people
who are using Gingerbread,

215
00:13:36,710 --> 00:13:43,260
which is Android 2.3, and we want to
design so that they aren't completely

216
00:13:43,260 --> 00:13:48,150
left behind, and especially since it's
not that hard for us to make some

217
00:13:48,150 --> 00:13:51,250
design modifications so that they can
have the same user experience everyone

218
00:13:51,250 --> 00:13:52,640
else can have.

219
00:13:52,640 --> 00:13:57,390
>> So it's good for us as app developers
and designers, and then also nice for

220
00:13:57,390 --> 00:14:01,380
the user because they get something
that's new, even if they

221
00:14:01,380 --> 00:14:03,750
have an older phone.

222
00:14:03,750 --> 00:14:10,370
So to go through an example here, this
is an example from Android's iterative

223
00:14:10,370 --> 00:14:12,350
design YouTube channel--

224
00:14:12,350 --> 00:14:15,600
or their [? intro ?] design
YouTube channel--

225
00:14:15,600 --> 00:14:19,920
and this was one of those talks
from a week over the summer.

226
00:14:19,920 --> 00:14:24,110
And we can breeze through these.

227
00:14:24,110 --> 00:14:29,130
Obviously, this starting point isn't
a great example of design.

228
00:14:29,130 --> 00:14:30,720
You can see that--

229
00:14:30,720 --> 00:14:32,260
if you're familiar with Android--

230
00:14:32,260 --> 00:14:37,230
it should have this action bar at the
top, some nice colors, and you can see

231
00:14:37,230 --> 00:14:44,180
the thumbnails are all different sizes,
the text is kind of oddly

232
00:14:44,180 --> 00:14:51,790
formatted, and it just doesn't
feel nice, it doesn't

233
00:14:51,790 --> 00:14:53,500
delight me or feel fun.

234
00:14:53,500 --> 00:14:56,420
>> So the first thing we can do is, again,
considering that this is an old

235
00:14:56,420 --> 00:14:59,570
version of Android, there's a really
easy way to bring it up to date with

236
00:14:59,570 --> 00:15:00,990
new design patterns.

237
00:15:00,990 --> 00:15:05,390
And that means we just include the
support library that Android releases

238
00:15:05,390 --> 00:15:06,520
for the action bar.

239
00:15:06,520 --> 00:15:10,610
So what this means is that if you're
starting an app, you just include this

240
00:15:10,610 --> 00:15:13,560
and you make all those necessary design

241
00:15:13,560 --> 00:15:15,260
considerations at the beginning.

242
00:15:15,260 --> 00:15:18,340
If you try to integrate this later on
you can still do it, and they make it

243
00:15:18,340 --> 00:15:21,450
pretty easy, but it'll just be a
little bit more of a hassle.

244
00:15:21,450 --> 00:15:27,000
So just go in thinking about how you're
going to support basically 100%

245
00:15:27,000 --> 00:15:31,910
of Android users rather than just
the 75% who have newer phones.

246
00:15:31,910 --> 00:15:36,310
>> So if we add this action bar at the
top, you can see we went from this

247
00:15:36,310 --> 00:15:42,995
grey line to a nice line that has
different action items and buttons we

248
00:15:42,995 --> 00:15:47,042
can press to do different things on the
page, and then a logo, call it XYZ

249
00:15:47,042 --> 00:15:52,700
Reader, and it already feels
a little more modern.

250
00:15:52,700 --> 00:16:01,330
We can continue this styling by making
it branded with a color scheme, so in

251
00:16:01,330 --> 00:16:02,600
this case we just made it orange.

252
00:16:02,600 --> 00:16:05,170
And already we're giving the
app a little more identity.

253
00:16:05,170 --> 00:16:10,560
It has its own character, and you feel
like you're not just using some

254
00:16:10,560 --> 00:16:16,820
generic template, but you're using an
app that has some sort of voice.

255
00:16:16,820 --> 00:16:21,390
>> So going from these two it's a little
more subtle difference, but spacing,

256
00:16:21,390 --> 00:16:28,230
white space, is a really simple thing
that I think is easy to overlook for

257
00:16:28,230 --> 00:16:30,780
people who are just getting
into design.

258
00:16:30,780 --> 00:16:33,630
White space, especially consistent white
space around the border, it can

259
00:16:33,630 --> 00:16:37,280
making things feel a lot
less claustrophobic.

260
00:16:37,280 --> 00:16:45,740
Just that padding around the side, it
makes things easier to read and

261
00:16:45,740 --> 00:16:50,750
everything fits together better,
especially if you have things aligned

262
00:16:50,750 --> 00:16:51,930
right along the left side.

263
00:16:51,930 --> 00:16:59,690
Then it's especially difficult to
sometimes even read those characters

264
00:16:59,690 --> 00:17:02,390
right along the line.

265
00:17:02,390 --> 00:17:04,579
>> And then we can also change the
thumbnails to make them more

266
00:17:04,579 --> 00:17:05,930
consistent in this case.

267
00:17:05,930 --> 00:17:11,700
List views are already kind of annoying
to flip through, and having

268
00:17:11,700 --> 00:17:14,430
pictures or thumbnails of a whole bunch
of different sizes can just make

269
00:17:14,430 --> 00:17:15,490
things worse.

270
00:17:15,490 --> 00:17:19,380
So the best thing we can do is just
make all the thumbnails the same.

271
00:17:19,380 --> 00:17:22,460
And in terms of the actual coding here,
again, this is really easy.

272
00:17:22,460 --> 00:17:29,670
You just add this extra attribute called
android:scaleType="centerCrop",

273
00:17:29,670 --> 00:17:32,820
and it means you give the image certain
dimensions, and it'll just a

274
00:17:32,820 --> 00:17:39,350
scale it so it fits the entire size,
the entire area, without

275
00:17:39,350 --> 00:17:42,950
distorting the image.

276
00:17:42,950 --> 00:17:43,800
>> And typography.

277
00:17:43,800 --> 00:17:49,500
So this is, especially if you're
familiar with iOS7, a huge change

278
00:17:49,500 --> 00:17:56,020
going on in, especially in the last
year or so with CS design.

279
00:17:56,020 --> 00:17:58,347
There's this movement toward
thin fonts and definitely a

280
00:17:58,347 --> 00:17:59,720
variation in fonts.

281
00:17:59,720 --> 00:18:04,030
And Android has this great font built
in, Roboto, and it has a whole bunch

282
00:18:04,030 --> 00:18:04,720
of different styles.

283
00:18:04,720 --> 00:18:12,730
Obviously, you have bold and italics,
but you also have thin and some sort

284
00:18:12,730 --> 00:18:14,750
of ultra thin text.

285
00:18:14,750 --> 00:18:20,340
And there are ways of creating a variety
of styles and give you some

286
00:18:20,340 --> 00:18:26,840
context to the different meanings
of the text without using some

287
00:18:26,840 --> 00:18:30,640
discontinuous fonts.

288
00:18:30,640 --> 00:18:38,210
>> So a good idea in general, is that you
can use thin fonts for large headers,

289
00:18:38,210 --> 00:18:40,990
and then maybe if you have a whole bunch
of text, you can use a condensed

290
00:18:40,990 --> 00:18:46,090
font, which just means that it's the
same size vertically, but a little

291
00:18:46,090 --> 00:18:48,550
shorter horizontally,
each character is.

292
00:18:48,550 --> 00:18:51,850
So you can fit more words in
a smaller amount of space.

293
00:18:51,850 --> 00:18:56,460
This is especially useful in this case,
for the list view, because if

294
00:18:56,460 --> 00:19:00,110
you just want a snippet, or preview,
of the text, in that case you're

295
00:19:00,110 --> 00:19:02,076
probably not reading the whole
thing, so your eyes aren't

296
00:19:02,076 --> 00:19:03,030
going to get tired.

297
00:19:03,030 --> 00:19:05,560
But you do you want as much
information in as

298
00:19:05,560 --> 00:19:08,480
little space as possible.

299
00:19:08,480 --> 00:19:15,180
>> And then again another design
consideration is, when we click on one

300
00:19:15,180 --> 00:19:19,410
of these items here in the list view and
we open this other page, we don't

301
00:19:19,410 --> 00:19:23,040
want to say, OK, I'm done reading
this, I'll go back and I'll

302
00:19:23,040 --> 00:19:24,390
click on a new thing.

303
00:19:24,390 --> 00:19:26,800
What if I just want to read all
the articles for the day?

304
00:19:26,800 --> 00:19:31,970
Then a much, much better design is to be
able to swipe between things in the

305
00:19:31,970 --> 00:19:34,240
same horizontal hierarchy.

306
00:19:34,240 --> 00:19:39,430
And this is probably not intuitive at
the very first, but once people start

307
00:19:39,430 --> 00:19:43,840
realizing this, it makes a lot of sense,
especially that you're swiping

308
00:19:43,840 --> 00:19:44,430
left and right.

309
00:19:44,430 --> 00:19:48,500
Because even if they're not thinking
about the structure of the app as a

310
00:19:48,500 --> 00:19:52,190
hierarchy, it does make sense logically,
if you start at a top level

311
00:19:52,190 --> 00:19:56,920
list view and then you navigate to a
detail page that has some sort of

312
00:19:56,920 --> 00:20:00,460
article, that you would
swipe between them.

313
00:20:00,460 --> 00:20:03,960
>> And so over the course of all these
different changes, you see how these

314
00:20:03,960 --> 00:20:08,450
were just aesthetic layout changes,
and yet now at the very end of it,

315
00:20:08,450 --> 00:20:10,260
this seems like an app
I might want to use.

316
00:20:10,260 --> 00:20:22,530
Especially starting from way back here
when it looked old and clunky and like

317
00:20:22,530 --> 00:20:24,280
no one really cared about it.

318
00:20:24,280 --> 00:20:32,640
And with not too many changes, just
starting with the action bar, then the

319
00:20:32,640 --> 00:20:38,000
color scheme and white space,
thumbnails, typography, and being able

320
00:20:38,000 --> 00:20:41,910
to swipe between the views, it's
suddenly a very immersive experience.

321
00:20:41,910 --> 00:20:44,850
And even for something
so simple as this.

322
00:20:44,850 --> 00:20:49,390
>> But there's still some other
considerations, and that's tablets.

323
00:20:49,390 --> 00:20:55,400
This would also be consideration on the
iOS, but there are even more form

324
00:20:55,400 --> 00:20:56,310
factors on Android.

325
00:20:56,310 --> 00:21:01,700
You have your ten inch tablets, and your
seven inch tablets, and some ones

326
00:21:01,700 --> 00:21:03,880
everywhere in between there.

327
00:21:03,880 --> 00:21:10,640
And in this case, you don't really want
to have the same kind of list

328
00:21:10,640 --> 00:21:16,240
view and article reading experience,
because there's so much more space,

329
00:21:16,240 --> 00:21:20,070
and we want to use it a
lot more efficiently.

330
00:21:20,070 --> 00:21:25,820
So the best thing to do for a tablet
interface is to have this master view

331
00:21:25,820 --> 00:21:29,920
or master detail set up, where you have
the list on one side, and then

332
00:21:29,920 --> 00:21:32,710
article on the other
part of the screen.

333
00:21:32,710 --> 00:21:38,070
>> And this is something, again, that it's
very important to consider when

334
00:21:38,070 --> 00:21:39,700
you're starting the app
from the beginning.

335
00:21:39,700 --> 00:21:45,010
Because otherwise, you're going to have
this whole structure implemented,

336
00:21:45,010 --> 00:21:47,720
and then you're going to want to throw
this in there, and it's going to be

337
00:21:47,720 --> 00:21:48,630
pretty difficult.

338
00:21:48,630 --> 00:21:53,470
So it's best to think about these things
when you're starting the app.

339
00:21:53,470 --> 00:21:57,290
And again, it's amazing what a
difference a little bit of white space

340
00:21:57,290 --> 00:22:00,020
can make, going from this to this.

341
00:22:00,020 --> 00:22:06,560
It's much nicer by adding some
extra padding on tablets.

342
00:22:06,560 --> 00:22:12,960
>> So that was step-by-step iterative
design on an example app.

343
00:22:12,960 --> 00:22:19,020
Now, I'm going to show you an app that
I've done and has changed a little

344
00:22:19,020 --> 00:22:24,560
bit, and then an app that I think is
much better than it, and those design

345
00:22:24,560 --> 00:22:25,230
considerations.

346
00:22:25,230 --> 00:22:30,110
So here's an app that I made, this
converter app, and this is basically

347
00:22:30,110 --> 00:22:35,660
what it looked like, not long ago,
but definitely like a year ago.

348
00:22:35,660 --> 00:22:40,060
>> And you can see that there aren't really
margins on the left and right

349
00:22:40,060 --> 00:22:48,910
side, there's no branding or theme to
it, at the top it's just the default,

350
00:22:48,910 --> 00:22:50,300
Android style.

351
00:22:50,300 --> 00:22:55,150
These tabs probably at the time,
made sense to me that they

352
00:22:55,150 --> 00:22:56,080
were going to make--

353
00:22:56,080 --> 00:22:58,640
everything was going to be simpler,
but if you're converting between

354
00:22:58,640 --> 00:23:02,400
different unit types, distance,
mass, volume, and then any

355
00:23:02,400 --> 00:23:06,890
that isn't an easy--

356
00:23:06,890 --> 00:23:07,750
it's not always intuitive.

357
00:23:07,750 --> 00:23:11,680
Especially because, what if I'm user
who wants to convert some sort of

358
00:23:11,680 --> 00:23:15,730
distance unit, and distance is
under both any and distance?

359
00:23:15,730 --> 00:23:17,700
Do I feel like, is one better
than the other?

360
00:23:17,700 --> 00:23:20,320
It's confusing and not great.

361
00:23:20,320 --> 00:23:27,330
>> So a simple improvement that I've made
since then, but could certainly

362
00:23:27,330 --> 00:23:31,250
improved more, is just to pull
a lot of that junk out.

363
00:23:31,250 --> 00:23:36,170
And this is in many ways, again,
very similar to the design of

364
00:23:36,170 --> 00:23:37,460
that previous slide.

365
00:23:37,460 --> 00:23:41,180
But here you just have one page, got rid
of all those different tabs, this

366
00:23:41,180 --> 00:23:44,460
is just where you have all
those different options.

367
00:23:44,460 --> 00:23:50,000
And the margins and the padding on
the side are a little better.

368
00:23:50,000 --> 00:23:51,240
And it's just, overall, cleaner.

369
00:23:51,240 --> 00:23:55,170
And then there is that blue branding
for the action bar at the top, and

370
00:23:55,170 --> 00:23:59,940
then a navigation drawer, which we'll
talk about a little bit, on the side.

371
00:23:59,940 --> 00:24:04,210
>> And you can see how this is just a
simple step forward, but at the same

372
00:24:04,210 --> 00:24:08,690
time, it doesn't address a lot of the
design considerations that we were

373
00:24:08,690 --> 00:24:09,460
talking about before.

374
00:24:09,460 --> 00:24:14,840
It feels like it's not surprising me,
it's not delighting me, and it's just

375
00:24:14,840 --> 00:24:18,590
doing what it needs to do in a way
that, at least in this case, is

376
00:24:18,590 --> 00:24:20,700
slightly less confusing.

377
00:24:20,700 --> 00:24:24,290
>> Now this is another converter app that
I found in the Android store that I

378
00:24:24,290 --> 00:24:28,200
think is really, really great.

379
00:24:28,200 --> 00:24:29,450
It's--

380
00:24:29,450 --> 00:24:31,820

381
00:24:31,820 --> 00:24:37,130
I don't remember its name-- but it has
that branding with the two different

382
00:24:37,130 --> 00:24:41,350
arrows, that blue arrow going up
and the other one going down.

383
00:24:41,350 --> 00:24:46,380
But the starting page, here, you have
what unit you want to convert from,

384
00:24:46,380 --> 00:24:48,790
and then there are these--

385
00:24:48,790 --> 00:24:51,000
it makes more sense when you use it,
at first it's a little confusing.

386
00:24:51,000 --> 00:24:55,860
>> But they're simple things like the from
unit, there's a search button

387
00:24:55,860 --> 00:24:58,260
right next to it, which is the same sort
of thing that was in my app, but

388
00:24:58,260 --> 00:25:02,760
in my app, it opened another dialogue
that you'd have to search from, and

389
00:25:02,760 --> 00:25:03,950
then you'd go back to the other place.

390
00:25:03,950 --> 00:25:09,260
This one it just replaces that spinner,
or the drop down menu, with a

391
00:25:09,260 --> 00:25:11,410
search box, and you just start
typing and then you select

392
00:25:11,410 --> 00:25:12,260
something right there.

393
00:25:12,260 --> 00:25:14,680
>> So you don't have to go anywhere
else, all the searching

394
00:25:14,680 --> 00:25:15,770
happens in the same place.

395
00:25:15,770 --> 00:25:18,360
And makes a lot more sense that way,
because even if for a moment you're

396
00:25:18,360 --> 00:25:21,210
redirected somewhere else, you
have to question, why?

397
00:25:21,210 --> 00:25:22,320
Why did I leave?

398
00:25:22,320 --> 00:25:23,680
And then where am I going back to?

399
00:25:23,680 --> 00:25:26,320
And this keeps everything
really organized.

400
00:25:26,320 --> 00:25:31,250
>> And then there are other features like
on that previous slide I showed you.

401
00:25:31,250 --> 00:25:35,890
Here, like different places for
converting between two different units

402
00:25:35,890 --> 00:25:41,090
and then converting between that
unit and any other possible

403
00:25:41,090 --> 00:25:42,600
unit in that category.

404
00:25:42,600 --> 00:25:46,990
Here, there's just this little arrow,
it's one of the three buttons on the

405
00:25:46,990 --> 00:25:48,280
right-hand side.

406
00:25:48,280 --> 00:25:51,000
It's an arrow that will choose whether
or not you want to convert between two

407
00:25:51,000 --> 00:25:51,920
units or everything.

408
00:25:51,920 --> 00:25:54,490
Again, it's using the space
much more efficiently.

409
00:25:54,490 --> 00:25:58,420
>> And it might take the user a little
while to learn what that arrow means,

410
00:25:58,420 --> 00:26:01,960
which perhaps isn't great, but as soon
as they do, they realize that they can

411
00:26:01,960 --> 00:26:03,170
do a lot right there.

412
00:26:03,170 --> 00:26:08,730
And they can easily switch between
different kinds of tasks.

413
00:26:08,730 --> 00:26:12,280
And the thing that I like most about
this, by far, is that if you click on

414
00:26:12,280 --> 00:26:15,640
that search button at the very top, it's
a global search for any sort of

415
00:26:15,640 --> 00:26:16,960
unit you want to search for.

416
00:26:16,960 --> 00:26:20,790
It opens the navigation drawer on the
left and you can just start searching

417
00:26:20,790 --> 00:26:24,980
in that text box, and it'll
start picking out any unit

418
00:26:24,980 --> 00:26:26,470
from any unit type.

419
00:26:26,470 --> 00:26:30,240
>> And it originally shows you all the
different unit types with nice

420
00:26:30,240 --> 00:26:35,210
graphics next to them, and then as
you search, it'll show you nice

421
00:26:35,210 --> 00:26:39,890
indentation for, like these are the area
units that you're searching for,

422
00:26:39,890 --> 00:26:42,610
and everything is still in a
hierarchy as you search.

423
00:26:42,610 --> 00:26:47,820
So it's very intuitive, and
very well organized.

424
00:26:47,820 --> 00:26:51,640
And you can always swipe between these
different views on the page.

425
00:26:51,640 --> 00:26:54,930
It also has a really great tablet
optimization, so it'd be worth

426
00:26:54,930 --> 00:26:56,290
checking out.

427
00:26:56,290 --> 00:27:00,960
>> Jumping back to branding and color
scheming, so this is some work I did

428
00:27:00,960 --> 00:27:05,850
over the summer with this company
called V1 Sports.

429
00:27:05,850 --> 00:27:11,450
And I didn't change much on this page,
actually the only thing I changed is

430
00:27:11,450 --> 00:27:12,450
the action bar.

431
00:27:12,450 --> 00:27:16,170
And this is their home screen, and they
were pretty adamant on keeping it

432
00:27:16,170 --> 00:27:22,360
the way it was, but originally all
the action bars were black.

433
00:27:22,360 --> 00:27:24,440
It was just the default
Android styling.

434
00:27:24,440 --> 00:27:29,690
>> And there was really, other than the
main picture on that home screen,

435
00:27:29,690 --> 00:27:31,450
there's no way to tell the apps apart.

436
00:27:31,450 --> 00:27:35,600
And that meant, if you got it in the
navigation or the hierarchy later in

437
00:27:35,600 --> 00:27:40,270
the app, especially as a developer who's
testing the different apps, I

438
00:27:40,270 --> 00:27:43,640
personally, got confused and forgot
which app I was using.

439
00:27:43,640 --> 00:27:48,170
But by just putting a little color in
the action bar, it's suddenly created

440
00:27:48,170 --> 00:27:52,580
some sort of branding and styling
for that app that was continuous

441
00:27:52,580 --> 00:27:55,970
throughout the user experience.

442
00:27:55,970 --> 00:27:59,080
>> So the action bar that I keep talking
about, here, it again, can have

443
00:27:59,080 --> 00:27:59,690
different colors.

444
00:27:59,690 --> 00:28:01,890
This one doesn't.

445
00:28:01,890 --> 00:28:04,780
But it has the home button,
and that's really nice.

446
00:28:04,780 --> 00:28:08,380
It's basically like in the top left of
any website, you can usually click

447
00:28:08,380 --> 00:28:10,000
that icon and go back home.

448
00:28:10,000 --> 00:28:13,420
The same sort of thing is true here, you
have the app icon, you can always

449
00:28:13,420 --> 00:28:14,290
click on that.

450
00:28:14,290 --> 00:28:17,310
And then you can have a whole bunch of
different action items in this over

451
00:28:17,310 --> 00:28:21,860
flow part of the action bar, which
are items two and three here.

452
00:28:21,860 --> 00:28:27,480
And action items are things that you'd
want to do based on the page, they're

453
00:28:27,480 --> 00:28:32,550
not going to take you anywhere else,
they're not navigation, but they will

454
00:28:32,550 --> 00:28:36,450
serve some sort of purpose for
maybe selecting things or

455
00:28:36,450 --> 00:28:40,110
searching and so forth.

456
00:28:40,110 --> 00:28:41,290
>> And then this other--

457
00:28:41,290 --> 00:28:45,560
OK so now we're talking about these
actual Android design considerations

458
00:28:45,560 --> 00:28:47,070
and the different patterns.

459
00:28:47,070 --> 00:28:53,340
The navigation drawer is a new one that
Android just released their own

460
00:28:53,340 --> 00:28:57,125
library for it over the summer, although
it's been used for probably a

461
00:28:57,125 --> 00:28:58,300
year or more now.

462
00:28:58,300 --> 00:29:02,480
But the idea is that you click that same
home button in the top left, but

463
00:29:02,480 --> 00:29:05,980
now you can see all places you could
go, or the places you're

464
00:29:05,980 --> 00:29:07,280
most likely to go.

465
00:29:07,280 --> 00:29:11,830
>> And suddenly, it's basically like on
Amazon or a lot of those websites

466
00:29:11,830 --> 00:29:14,980
where you have that sidebar that lets
you go anywhere at any point.

467
00:29:14,980 --> 00:29:17,960
It was really difficult with mobile
apps, because we didn't have

468
00:29:17,960 --> 00:29:19,010
the space for that.

469
00:29:19,010 --> 00:29:24,520
But now, if you use the space
differently where you're basically

470
00:29:24,520 --> 00:29:29,560
swiping in from the side,
you can get a lot more--

471
00:29:29,560 --> 00:29:33,280
it's easier to get the user where
they want to go, quicker.

472
00:29:33,280 --> 00:29:36,160
So they can just click on that, choose
where they want to go, and then go

473
00:29:36,160 --> 00:29:38,170
somewhere totally different
in the app.

474
00:29:38,170 --> 00:29:41,440
>> And here's some examples of that with
different apps, some screen

475
00:29:41,440 --> 00:29:42,990
shots that I took.

476
00:29:42,990 --> 00:29:48,150
With Amazon, well with Kindle, here you
can see you can search and then go

477
00:29:48,150 --> 00:29:50,900
to a whole bunch of different
places in the app.

478
00:29:50,900 --> 00:29:54,280
With the YouTube app, same sort of
thing, I see my profile and I can go

479
00:29:54,280 --> 00:29:58,170
to the channels I subscribe to,
or I can browse new things.

480
00:29:58,170 --> 00:30:02,040
It takes me to the places I'm probably
most likely to go as a YouTube user.

481
00:30:02,040 --> 00:30:04,300
>> And with Evernote, they have an
interesting take on this where you see

482
00:30:04,300 --> 00:30:10,560
you don't have to just have list items
here in the navigation drawer.

483
00:30:10,560 --> 00:30:14,550
It'll open, and I can choose to make a
new note of different types with a

484
00:30:14,550 --> 00:30:19,240
camera or recording something, and
it can give me a whole bunch of

485
00:30:19,240 --> 00:30:19,710
interaction.

486
00:30:19,710 --> 00:30:23,300
You can see there are thumbnails in
some of these and numbers with the

487
00:30:23,300 --> 00:30:26,540
list views letting you know how many
things are in each of these places.

488
00:30:26,540 --> 00:30:30,940
And it really is one of these things
where what we're doing with this kind

489
00:30:30,940 --> 00:30:34,510
of design pattern is we're realizing
where it is, and

490
00:30:34,510 --> 00:30:36,000
what the user expects.

491
00:30:36,000 --> 00:30:42,760
But it's also important to try to do
something new and branch out from

492
00:30:42,760 --> 00:30:47,420
doing list views for simple navigation
and maybe putting your own

493
00:30:47,420 --> 00:30:50,180
character into it.

494
00:30:50,180 --> 00:30:53,440
>> So one last Android thing is that,
again, we're talking about making sure

495
00:30:53,440 --> 00:30:59,330
we don't keep users in the dark, at
least the old users who have previous

496
00:30:59,330 --> 00:31:00,340
versions of Android.

497
00:31:00,340 --> 00:31:06,380
So if they're using Gingerbread, when
we added the action bar support

498
00:31:06,380 --> 00:31:09,920
library and the navigation drawer
support library, then they can get

499
00:31:09,920 --> 00:31:12,800
those features in the app, just
like every other user would.

500
00:31:12,800 --> 00:31:17,840
But if we also add this third party
library called a HoloEverywhere then

501
00:31:17,840 --> 00:31:23,250
it's a good way to, again, make sure
that the users have the same

502
00:31:23,250 --> 00:31:25,580
experience across all
versions of Android.

503
00:31:25,580 --> 00:31:30,230
This just means we're taking that modern
Android 4.0 and above user

504
00:31:30,230 --> 00:31:33,700
interface and we're applying it
across the board to all the

505
00:31:33,700 --> 00:31:34,970
apps that use this.

506
00:31:34,970 --> 00:31:38,300
>> And maybe this one isn't as much of a
concern, it'll certainly take a little

507
00:31:38,300 --> 00:31:41,280
more implementation, but it's something
to consider that if you

508
00:31:41,280 --> 00:31:45,510
really want you have to look the same
all the time, maybe consider this.

509
00:31:45,510 --> 00:31:52,670
Or you could always create your own
custom buttons and custom input fields

510
00:31:52,670 --> 00:31:53,480
and everything.

511
00:31:53,480 --> 00:31:55,735
And then, in that way, have
the same user experience.

512
00:31:55,735 --> 00:31:58,750

513
00:31:58,750 --> 00:32:02,770
>> So again, just talking about branding,
that this is something that Google

514
00:32:02,770 --> 00:32:04,820
does in terms of their--

515
00:32:04,820 --> 00:32:08,070
like here's their Google Play Store, and
just simple things like having a

516
00:32:08,070 --> 00:32:11,480
color associated with a certain app.

517
00:32:11,480 --> 00:32:15,280
And they've done a really good job
creating this kind of continuity.

518
00:32:15,280 --> 00:32:19,520
And I think, now, I've almost associated
music with the color yellow

519
00:32:19,520 --> 00:32:24,290
because of Google Play music,
or sorry, the color orange.

520
00:32:24,290 --> 00:32:29,305
But things as simple as colors can
give apps a lot of identity.

521
00:32:29,305 --> 00:32:31,990

522
00:32:31,990 --> 00:32:39,100
>> So tips for design in general, and
specifically, mobile app design.

523
00:32:39,100 --> 00:32:42,540
This actually isn't Android,
but it is a mobile app.

524
00:32:42,540 --> 00:32:44,930
And the idea here is just that--

525
00:32:44,930 --> 00:32:47,040
this is something I came
across online.

526
00:32:47,040 --> 00:32:52,850
And it's a really interesting take
on a login screen, not terribly

527
00:32:52,850 --> 00:33:02,100
different, and arguably maybe a little
too austere but it is different.

528
00:33:02,100 --> 00:33:08,810
>> So I guess the tip I have for thinking
about design, and when you're creating

529
00:33:08,810 --> 00:33:12,890
something as simple as a login page or
really any part of your app, is just

530
00:33:12,890 --> 00:33:15,920
go out and look at a whole bunch of
different apps out there, take screen

531
00:33:15,920 --> 00:33:19,880
shots of them, and create a whole folder
on your computer that you can

532
00:33:19,880 --> 00:33:23,340
just scroll through and look at all the
different versions of exactly what

533
00:33:23,340 --> 00:33:24,340
you're trying to do.

534
00:33:24,340 --> 00:33:27,960
See what has been done, see what you
like and don't like, and then think

535
00:33:27,960 --> 00:33:33,490
about how you can use the personality
if your own app and what you're

536
00:33:33,490 --> 00:33:35,290
making, and try to integrate those.

537
00:33:35,290 --> 00:33:39,900

538
00:33:39,900 --> 00:33:47,640
>> So then the goal is to see what is good
design and deconstruct it into

539
00:33:47,640 --> 00:33:49,180
components that we can talk about.

540
00:33:49,180 --> 00:33:53,870

541
00:33:53,870 --> 00:33:59,250
So in this example, or in login screens
in general, it's taking this

542
00:33:59,250 --> 00:34:06,840
new approach by giving the branding
of the app some more character.

543
00:34:06,840 --> 00:34:10,310
It's normally this kind of like smiley
blue face and then when you get the

544
00:34:10,310 --> 00:34:16,540
password wrong, it actually changes the
logo for the app, or that large

545
00:34:16,540 --> 00:34:21,909
picture, and it makes a
angry face that's red.

546
00:34:21,909 --> 00:34:25,210
>> And it's just simple stuff like that,
in this case, I suppose it could

547
00:34:25,210 --> 00:34:29,250
definitely have those two different
sides that it surprising and amusing.

548
00:34:29,250 --> 00:34:32,920
And in that way, you don't feel so bad
about getting the password wrong, or

549
00:34:32,920 --> 00:34:36,730
at least it's like, I'm almost glad I
got the password wrong because then I

550
00:34:36,730 --> 00:34:39,580
saw this fun easter egg.

551
00:34:39,580 --> 00:34:45,290
It is still a little red and maybe it
has a visceral reaction where I feel

552
00:34:45,290 --> 00:34:48,850
like the app's threatening me, but it's
definitely a different approach.

553
00:34:48,850 --> 00:34:52,040
And it's these kind of things
that are worth considering,

554
00:34:52,040 --> 00:34:53,469
thinking outside the box.

555
00:34:53,469 --> 00:34:55,570
>> Because on a login page, there are
a lot of things to consider.

556
00:34:55,570 --> 00:34:59,320
There's your username, password, but
then how are you going to put the

557
00:34:59,320 --> 00:35:03,900
forgot password on the page
in a way that it's not--

558
00:35:03,900 --> 00:35:06,800
it's the sort of thing that people use
sometimes, maybe a lot of people use

559
00:35:06,800 --> 00:35:09,580
all the time, and they're really going
to count on that button, but we don't

560
00:35:09,580 --> 00:35:14,230
want it to take up space and distract
from the flow that we want people to

561
00:35:14,230 --> 00:35:15,740
go through.

562
00:35:15,740 --> 00:35:17,865
And the same sort of thing
with signing in, and

563
00:35:17,865 --> 00:35:18,810
creating a new account.

564
00:35:18,810 --> 00:35:20,150
These are all things that you
have to consider when

565
00:35:20,150 --> 00:35:22,360
creating a page like this.

566
00:35:22,360 --> 00:35:26,200
>> And then how do you actually
get practice with this?

567
00:35:26,200 --> 00:35:29,860
And this is, again, just a couple
screenshots from what I did over the

568
00:35:29,860 --> 00:35:35,140
summer that at some point, on pen and
paper, I just wrote out what I thought

569
00:35:35,140 --> 00:35:37,810
a good design would be
that we could make.

570
00:35:37,810 --> 00:35:42,460
And then at some point, I created
a mock up on Android.

571
00:35:42,460 --> 00:35:45,930
>> These are just layouts, and these
are using the bare minimum

572
00:35:45,930 --> 00:35:46,530
of what I can do.

573
00:35:46,530 --> 00:35:49,925
There's very little logic in the back,
here, this isn't actually an

574
00:35:49,925 --> 00:35:54,570
implemented app, but I just wanted to
get a feel of what it could look like.

575
00:35:54,570 --> 00:36:00,550
And if you're doing your own app, I'd
really recommend separating those

576
00:36:00,550 --> 00:36:06,640
parts of it, the logic backend and the
visual frontend, and try a few

577
00:36:06,640 --> 00:36:10,670
different things and think about what
will work and what won't work and

578
00:36:10,670 --> 00:36:13,870
really how you want to user to feel,
and what you want them to do.

579
00:36:13,870 --> 00:36:17,990
Try to help them with that and
make it a good experience.

580
00:36:17,990 --> 00:36:21,300
>> OK, so that's basically it
for my take on design.

581
00:36:21,300 --> 00:36:27,160
Again, I'm new to this, and I guess
that's the path I followed.

582
00:36:27,160 --> 00:36:33,370
And I hope that for people who are
trying to, especially our developers

583
00:36:33,370 --> 00:36:36,580
that are trying to think about ways
that they can improve their own

584
00:36:36,580 --> 00:36:39,880
design, these are definitely
some good starting places.

585
00:36:39,880 --> 00:36:44,400
>> And now in general, if you want to start
with Android apps, follow this

586
00:36:44,400 --> 00:36:49,550
link, or just search for
Android get started.

587
00:36:49,550 --> 00:36:53,690
There's a lot of documentation online
and a lot of sample code.

588
00:36:53,690 --> 00:36:57,160
It's really, straightforward.

589
00:36:57,160 --> 00:37:01,100
And hopefully it'll be very enjoyable.

590
00:37:01,100 --> 00:37:03,850
So that's it for me.

591
00:37:03,850 --> 00:37:09,460
I hope that you can go forward and do
some Android coding, and while you're

592
00:37:09,460 --> 00:37:12,910
doing that developing, you can also
think about what makes good design and

593
00:37:12,910 --> 00:37:16,210
what makes good apps enjoyable
for the user.

594
00:37:16,210 --> 00:37:17,460
>> Thanks.

595
00:37:17,460 --> 00:37:19,424