WEBVTT

00:00:00.000 --> 00:00:39.900
Let's look at the mobile UX design checklist.
This is a checklist that you want to internalize and keep in your head as you're designing.
First of all is – are you making sure that your controls are *consistent*, to the operating system
and to the application that you're developing?
The second one is *proximity* – that closeness of items mean that those items are in relationship.
So, the grouping, for example, like that means that these items are the same and the pattern there  

00:00:39.900 --> 00:01:00.516
is the 'OK / Cancel', for example.
The third one is *visual hierarchy*. So, visual hierarchy is a concept from graphic design that says
put the most important thing at the top and bring it down to the bottom.
Generally, visual hierarchy is a reminder to put the important tasks up front on your screens,

00:01:00.516 --> 00:01:33.616
and so the user doesn't have to navigate, doesn't have to play and look for them.
And the fourth thing on the mobile UX design  checklist is *contrast*.
Contrast and emphasis – that's a graphic design issue. If you're using very light colors,
if you're using light gray. I mean, go outside and test your design in the sun.
Go out, go into a dark place and test your design – see what it looks like.
Turn your brightness down. I've interviewed users who actually
use their mobile phones with the brightness turned to the minimum – I could barely see the phone.

00:01:33.616 --> 00:02:02.809
And I said to this user, "Can you turn your brightness up?" because I was actually videotaping and trying  
to get the phone in. He said, "No, I normally keep it down there just to save battery."
So, what does your design look like on a low lighting, you know, where the user has deliberately turned the lighting down?
That's another thing to test and make sure that  it works for the eye but works for the lighting situation.
And then, the fifth one on the checklist  is *intuitive icons*.
To me, if icons are not intuitive, then there's a problem with them – they're not usable.

00:02:02.809 --> 00:02:33.903
So, when we say 'intuitive', it means no understanding – a user should look at an icon and know what it does.
Otherwise, the icon maybe shouldn't be there; it shouldn't be used. That's my general rule of icon usability.
And that applies to desktop as well.
And then, finally, on our checklist – not to be missed – is *making the main task apparent*.
That is huge and crucial – that's our task-oriented design approach.
If you take one thing away from this checklist, it's that sixth element there

00:02:33.903 --> 00:03:03.673
as one of your most important ones.
So, let's go through some examples of these, then – *the consistency of controls*.
So, you see here in this example, you have all the options side by side there.
The in-call screen is a good one
in the sense that you have this action, it's occurring – you know –  it's a live call,

00:03:03.673 --> 00:03:31.555
so how do you present and display the information?
And these guys have decided to go with consistency – all the controls and the icons are the same size
and the same positioning. That does make it easier to see.
But it's not necessarily the right answer from a layout perspective.
You could exaggerate one of those items, for  example.
Conference calls doesn't have the same priority as mute does for me.

00:03:31.555 --> 00:04:02.082
To me, I'm muting more than I'm conferencing, for example.
So, we can see some 'at a glance' data and call to actions as well
in this example.
So, the second one on the checklist is  *proximity of controls*.
You'll see proximity being used here. This is an iPad app – it's an EMR system,
Electronic Medical Record. And the proximity we're seeing here is that

00:04:02.082 --> 00:04:32.569
the grouping of that clinical information as buttons is all together, the vitals at the top
and the patient history down at the bottom. You also have use of the left channel.
Notice the left channel. Those buttons are huge because they're used when
the patient is being interviewed, so the physician or the nurse needs to tap those
very quickly and enter that data as part of the intake so they can get on with the exam.

00:04:32.569 --> 00:05:02.480
Here are some different examples of visual hierarchy at use. You have the Yelp app on the left.
And notice the the reviews, really important, at the top, right, so you can see the name of the
– I think it's a pub, and the reviews, and then more information further down the page.
The second app is from Open Table. Again, content first, so the name of the location
and then the call to action is actually further down the page,

00:05:02.480 --> 00:05:31.325
from the perspective of being able to easily tap those in that tappable area.
And, of course, on the third example we've got the task up front
and the main important things – prices and performance being one of the key tasks.
It's like right there. Some other features further down is they've decided to go with a strict visual hierarchy:
the important stuff at the top and then further down.
So, our fourth item on the checklist is *using  colors for emphasis*.

00:05:31.325 --> 00:06:00.240
So, remember we talked about making navigation *pop*.
So, you see some examples here of – the Fandango app is where
you can see you're looking at the 'in theaters', and the other one here, the other app,
you can see that you're on 'what's popular'. Even though the contrast is a little light there,
the color is still highlighted nicely in the icon at the bottom on all three of these apps,
so that at a glance you can tell where you are, what you're looking at,

00:06:00.240 --> 00:06:34.491
and be able to pivot from there.
So, our fifth one is *intuitive icons*. Some  examples here: GasBuddy is one of my favorite  
ones because it's task-oriented and the icon is actually used as the starting point.
So, 'find gas stations near me', which is almost what you would say to Siri on an iPhone as well.
So, that's a nice clever interlink between the app and the command,
the way you think about it linguistically, but notice it's like very clear: the icons are not overdone.

00:06:34.491 --> 00:07:00.396
All these examples have really nice clean icons.
The second screen is when you go into GasBuddy – that's a list of results.
And then the gas stations that appear  again with a nice visual intuitive icon there.
And then, finally, *make the task apparent*. And so, making the task apparent is
– the challenge there is that you don't want navigation, so you want to keep the user focused

00:07:00.396 --> 00:07:25.975
on the *content*, you want to keep them focused on the *flow* of their experience.
And this is a case where a pie menu can be very helpful or those
contextual menus to know what the task is.
A pie menu, by the way, is a left-click item, so it's not a right-click – it's a left, a left tap, if you will.
And it brings up your options, your task options on a wheel and allows the user to navigate.