WEBVTT 00:00:05.305 --> 00:00:09.098 Let's look at the mobile UX design checklist. 00:00:09.098 --> 00:00:13.625 This is a checklist that you want to internalize and keep in your head as you're designing. 00:00:13.625 --> 00:00:18.624 First of all is – are you making sure that your controls are *consistent*, to the operating system 00:00:18.624 --> 00:00:21.983 and to the application that you're developing? 00:00:21.983 --> 00:00:28.829 The second one is *proximity* – that closeness of items mean that those items are in relationship. 00:00:34.920 --> 00:00:39.900 So, the grouping, for example, like that means that these items are the same and the pattern there   00:00:39.900 --> 00:00:42.486 is the 'OK / Cancel', for example. 00:00:42.486 --> 00:00:48.202 The third one is *visual hierarchy*. So, visual hierarchy is a concept from graphic design that says 00:00:48.202 --> 00:00:53.664 put the most important thing at the top and bring it down to the bottom. 00:00:53.664 --> 00:01:00.516 Generally, visual hierarchy is a reminder to put the important tasks up front on your screens, 00:01:00.516 --> 00:01:04.391 and so the user doesn't have to navigate, doesn't have to play and look for them. 00:01:04.391 --> 00:01:08.706 And the fourth thing on the mobile UX design  checklist is *contrast*. 00:01:08.706 --> 00:01:14.443 Contrast and emphasis – that's a graphic design issue. If you're using very light colors, 00:01:14.443 --> 00:01:19.293 if you're using light gray. I mean, go outside and test your design in the sun. 00:01:19.293 --> 00:01:23.475 Go out, go into a dark place and test your design – see what it looks like. 00:01:23.475 --> 00:01:28.355 Turn your brightness down. I've interviewed users who actually 00:01:28.355 --> 00:01:33.616 use their mobile phones with the brightness turned to the minimum – I could barely see the phone. 00:01:33.616 --> 00:01:38.400 And I said to this user, "Can you turn your brightness up?" because I was actually videotaping and trying   00:01:38.400 --> 00:01:42.587 to get the phone in. He said, "No, I normally keep it down there just to save battery." 00:01:42.587 --> 00:01:49.182 So, what does your design look like on a low lighting, you know, where the user has deliberately turned the lighting down? 00:01:49.182 --> 00:01:54.726 That's another thing to test and make sure that  it works for the eye but works for the lighting situation. 00:01:54.726 --> 00:01:58.394 And then, the fifth one on the checklist  is *intuitive icons*. 00:01:58.394 --> 00:02:02.809 To me, if icons are not intuitive, then there's a problem with them – they're not usable. 00:02:02.809 --> 00:02:08.354 So, when we say 'intuitive', it means no understanding – a user should look at an icon and know what it does. 00:02:08.354 --> 00:02:14.070 Otherwise, the icon maybe shouldn't be there; it shouldn't be used. That's my general rule of icon usability. 00:02:14.070 --> 00:02:17.153 And that applies to desktop as well. 00:02:17.153 --> 00:02:23.709 And then, finally, on our checklist – not to be missed – is *making the main task apparent*. 00:02:23.709 --> 00:02:28.461 That is huge and crucial – that's our task-oriented design approach. 00:02:28.461 --> 00:02:33.903 If you take one thing away from this checklist, it's that sixth element there 00:02:33.903 --> 00:02:37.945 as one of your most important ones. 00:02:38.040 --> 00:02:43.567 So, let's go through some examples of these, then – *the consistency of controls*. 00:02:43.567 --> 00:02:50.115 So, you see here in this example, you have all the options side by side there. 00:02:50.115 --> 00:02:56.289 The in-call screen is a good one 00:02:56.289 --> 00:03:03.673 in the sense that you have this action, it's occurring – you know – it's a live call, 00:03:03.673 --> 00:03:07.246 so how do you present and display the information? 00:03:07.246 --> 00:03:14.015 And these guys have decided to go with consistency – all the controls and the icons are the same size 00:03:14.015 --> 00:03:19.158 and the same positioning. That does make it easier to see. 00:03:19.187 --> 00:03:23.472 But it's not necessarily the right answer from a layout perspective. 00:03:23.472 --> 00:03:27.426 You could exaggerate one of those items, for  example. 00:03:27.426 --> 00:03:31.555 Conference calls doesn't have the same priority as mute does for me. 00:03:31.555 --> 00:03:35.801 To me, I'm muting more than I'm conferencing, for example. 00:03:36.420 --> 00:03:41.742 So, we can see some 'at a glance' data and call to actions as well 00:03:41.742 --> 00:03:44.778 in this example. 00:03:46.920 --> 00:03:51.231 So, the second one on the checklist is  *proximity of controls*. 00:03:51.231 --> 00:03:56.502 You'll see proximity being used here. This is an iPad app – it's an EMR system, 00:03:56.502 --> 00:04:02.082 Electronic Medical Record. And the proximity we're seeing here is that 00:04:02.082 --> 00:04:07.436 the grouping of that clinical information as buttons is all together, the vitals at the top 00:04:07.436 --> 00:04:11.603 and the patient history down at the bottom. You also have use of the left channel. 00:04:11.603 --> 00:04:16.882 Notice the left channel. Those buttons are huge because they're used when 00:04:16.882 --> 00:04:24.488 the patient is being interviewed, so the physician or the nurse needs to tap those 00:04:24.488 --> 00:04:32.569 very quickly and enter that data as part of the intake so they can get on with the exam. 00:04:32.569 --> 00:04:38.663 Here are some different examples of visual hierarchy at use. You have the Yelp app on the left. 00:04:38.663 --> 00:04:44.116 And notice the the reviews, really important, at the top, right, so you can see the name of the 00:04:44.116 --> 00:04:51.331 – I think it's a pub, and the reviews, and then more information further down the page. 00:04:51.388 --> 00:04:58.192 The second app is from Open Table. Again, content first, so the name of the location 00:04:58.192 --> 00:05:02.480 and then the call to action is actually further down the page, 00:05:02.480 --> 00:05:09.029 from the perspective of being able to easily tap those in that tappable area. 00:05:09.029 --> 00:05:13.553 And, of course, on the third example we've got the task up front 00:05:13.553 --> 00:05:18.129 and the main important things – prices and performance being one of the key tasks. 00:05:18.129 --> 00:05:23.861 It's like right there. Some other features further down is they've decided to go with a strict visual hierarchy: 00:05:23.861 --> 00:05:27.060 the important stuff at the top and then further down. 00:05:27.060 --> 00:05:31.325 So, our fourth item on the checklist is *using  colors for emphasis*. 00:05:31.325 --> 00:05:34.731 So, remember we talked about making navigation *pop*. 00:05:34.731 --> 00:05:39.232 So, you see some examples here of – the Fandango app is where 00:05:39.232 --> 00:05:44.593 you can see you're looking at the 'in theaters', and the other one here, the other app, 00:05:44.593 --> 00:05:50.366 you can see that you're on 'what's popular'. Even though the contrast is a little light there, 00:05:50.366 --> 00:05:56.192 the color is still highlighted nicely in the icon at the bottom on all three of these apps, 00:05:56.192 --> 00:06:00.240 so that at a glance you can tell where you are, what you're looking at, 00:06:00.240 --> 00:06:03.060 and be able to pivot from there. 00:06:03.060 --> 00:06:09.240 So, our fifth one is *intuitive icons*. Some  examples here: GasBuddy is one of my favorite   00:06:09.240 --> 00:06:15.171 ones because it's task-oriented and the icon is actually used as the starting point. 00:06:15.171 --> 00:06:21.260 So, 'find gas stations near me', which is almost what you would say to Siri on an iPhone as well. 00:06:21.260 --> 00:06:27.952 So, that's a nice clever interlink between the app and the command, 00:06:27.952 --> 00:06:34.491 the way you think about it linguistically, but notice it's like very clear: the icons are not overdone. 00:06:34.491 --> 00:06:38.363 All these examples have really nice clean icons. 00:06:38.363 --> 00:06:42.233 The second screen is when you go into GasBuddy – that's a list of results. 00:06:42.233 --> 00:06:48.993 And then the gas stations that appear  again with a nice visual intuitive icon there. 00:06:50.520 --> 00:06:55.296 And then, finally, *make the task apparent*. And so, making the task apparent is 00:06:55.296 --> 00:07:00.396 – the challenge there is that you don't want navigation, so you want to keep the user focused 00:07:00.396 --> 00:07:05.351 on the *content*, you want to keep them focused on the *flow* of their experience. 00:07:05.351 --> 00:07:09.029 And this is a case where a pie menu can be very helpful or those 00:07:09.029 --> 00:07:12.653 contextual menus to know what the task is. 00:07:12.653 --> 00:07:18.515 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. 00:07:18.515 --> 00:07:25.975 And it brings up your options, your task options on a wheel and allows the user to navigate.