So the final mobile constraint is the small screen. This might seem like
the obvious mobile constraint and it basically means that we can't fit as
much on a really small smartphone
screen, but there's two really awesome techniques
that we can use that will help us optimize for our small UI.
>> Yeah, they're called combination and reflow. And
we're going to talk to an Android designer developer
called Mick Butchard, he's on the Android team,
about how to make this work in your applications.
>> So Andriod is not
a one-size-fits-all OS. It comes in many different sizes
and shapes. From small phones to large tablet's, TVs and
beyond. The great news is that Android has been built
from the ground up to embrace this variety and give
you tools in order to deal with it. So, from
the very beginnings, Android has allowed you to scale your
user interface up and down between different devices. The problem
is that scaling approaches will only get you so far.
so, I'm going to take you through some of
the common pitfalls we see with this relying on
scaling approaches, and then I'm going to go through some
alternative ways of dealing with this. So the first
problem we see commonly is one of having excessive
line lengths. So in this application, the text and
images are running the full width of the device's
screen. On a smaller, phone-size device, this might be fine.
But as you get beyond a certain
size this becomes uncomfortable. When you, especially when
you're looking at line lengths of text, you want to be aiming for between 45 and
75 characters of text in order to maintain
a comfortable reading experience. The user can easily
scan across it. And in this application we
can see that this is clearly exceeding that.
The next problem we commonly see is one
of unbalanced content. So, in this example, we
can see there's a lot of content clustered up in the top left of the screen,
and then leaving huge amounts of white space
across the rest of the screen. This leads
to a very kind of unbalanced feeling, which
makes your application feel completely unoptimized for this
device. And the last problem we commonly see is more
of a missed opportunity almost, of not making the best use
of the real estate available to you. So in this
example we might have an application which shows many photos. As
we can, see they're these tiny little thumbnails all grouped
over to one side. It really is a shame not to
make use of these beautiful big screens, when, all this
extra real estate, when it is available to you. So you
want to be avoiding this. So these are
some of the common pitfalls we see in relying
on scaling approaches, and the answer to dealing with
these problems really is to adopt a responsive mobile
design to respond to the device's characteristics. So here
are three techniques you can use in order to
do this. So the first technique is simply one
of combination. This is if you have extra room,
combining things from different screens onto a single screen in
order to make up, to fill up the space. So
in this example, we've got a typical master detail view
which on a phone would be on two separate screens. So
clicking through from a list item for example might show
subsequent details. On a larger device with sufficient width, we
might show both of these things at once. This will
avoid the problem of having those excessive line lengths and make
better use of the screen real estate. The second
technique is one that we call macro reflow. So this
is taking the major building blocks of your application and
reflowing them or rearranging them on the screen in order
to make better use of the space. So in
this example, we simply move something like a large header
image and body text instead of being vertically stacked above
each other to be horizontally stacked next to each other.
So also gives the image more space to kind of to show off on the,
the larger amounts of screen real estate, as
well as avoiding those excessive line lengths when
it's in a landscape device. So this is
not only useful for different sized devices, you
can also use this kind of trick when
changing on the same device between different orientations.
And the last technique I want to go
through is something we call micro reflow. So
this technique really focuses on the individual blocks
within your design and it delegates responsibility to those
individual blocks to optimize themselves given a certain
amount of space. So, a couple of examples
of doing that. On the left here, we
have a list type application which, given sufficient space,
might lead to those excessive line lengths or very unbalanced
views. So instead of that, each individual list item knows that,
given a certain amount of space, how to draw itself. So
once it gets over a certain size, a certain amount of
width available to the device it'll change its representation. Instead of
being a list item, it might change to say, a grid,
grid representation. So this will allow you to have a, you
know, fill the space better. The second example, is if you
can't, if there's simply no way to introduce
more content you can introduce a margin point
instead. So in this form-type application on the
right when we go for beyond the phone,
past a certain size, when there just isn't
anymore content we can show on screen, we
simply introduce a margin point so it doesn't
end up being excessively long or excessively unbalanced.
>> So Nick just talked to us about some really awesome
UI techniques for small screens. But the small screen affects a lot more
than just the UI. It actually really affects the UX of your M. Yeah,
simply taking a web or desktop app and shrinking it down so that
it fits into a sm, small screen is probably not the way to go.
>> Yeah, you really need to think mobile first and optimize
your flow for the smartphone. So how do we do this? Wireframing.
>> Wireframing.