WEBVTT 00:00:00.830 --> 00:00:02.740 Welcome to Microsoft Build 2017. 00:00:02.740 --> 00:00:06.560 We're here to talk about designing mobile applications. 00:00:06.560 --> 00:00:10.390 My name is David Ortinau, I'm a Senior Program Manager 00:00:10.390 --> 00:00:13.630 with the mobile dev tools team and Xamarin Forums. 00:00:14.940 --> 00:00:16.880 Just a little bit about me, I've been doing mobile and 00:00:16.880 --> 00:00:20.490 web development now going on 20 years using a variety of 00:00:20.490 --> 00:00:23.740 platforms, but my heart and my love is Xamarin. 00:00:23.740 --> 00:00:26.370 And what I love about it more than anything is what it allows 00:00:26.370 --> 00:00:28.360 me to do from a design standpoint, 00:00:28.360 --> 00:00:31.090 to be faithful to each platform, 00:00:31.090 --> 00:00:34.850 to make sure that I'm delivering the best experience possible. 00:00:34.850 --> 00:00:38.940 So, what I wanna say first of all to you, maybe you're coming 00:00:38.940 --> 00:00:41.880 from a web standpoint, maybe you're coming from a desktop 00:00:41.880 --> 00:00:44.790 development standpoint, or design standpoint, but 00:00:44.790 --> 00:00:47.650 what is really important is that we are all designers. 00:00:47.650 --> 00:00:52.010 We all have a role to play in the design of our applications. 00:00:52.010 --> 00:00:55.150 So, whether you are involved at the very beginning, building 00:00:55.150 --> 00:00:59.520 the UI, determining what the experience is going to be, or 00:00:59.520 --> 00:01:01.040 you're implementing that design, 00:01:01.040 --> 00:01:03.810 we're making design decisions all along the way. 00:01:03.810 --> 00:01:05.210 So if we understand and 00:01:05.210 --> 00:01:08.960 we can internalize the important aspects of design and 00:01:08.960 --> 00:01:11.841 what makes a really good design as opposed to a design that's 00:01:11.841 --> 00:01:16.350 gonna cause frustration and anguish, we will deliver better. 00:01:16.350 --> 00:01:19.610 So, let's talk about the first thing that 00:01:19.610 --> 00:01:23.230 I like to do is conducting user testing. 00:01:23.230 --> 00:01:25.990 So, perhaps, you have a lab or you 00:01:25.990 --> 00:01:29.400 think of this as something more than a research person does, but 00:01:29.400 --> 00:01:31.960 this is something that we can do even informally. 00:01:33.830 --> 00:01:36.620 So, here's my quick guide to providing 00:01:36.620 --> 00:01:39.450 real quick basic user testing. 00:01:39.450 --> 00:01:42.160 Provide as little context and direction as needed. 00:01:42.160 --> 00:01:44.990 Grab somebody at the coffee shop or 00:01:44.990 --> 00:01:48.260 wherever you know, buy him a cup of coffee and say, 00:01:48.260 --> 00:01:51.550 hey, I'm testing out a mobile app, will you help me out? 00:01:51.550 --> 00:01:54.210 Sit him down and give him just the basics. 00:01:54.210 --> 00:01:56.400 Don't give him too much information because if you do 00:01:56.400 --> 00:01:57.720 you'll end up priming them. 00:01:57.720 --> 00:01:59.816 You'll end up giving them too much information and 00:01:59.816 --> 00:02:02.210 they'll just regurgitate it back to you. 00:02:02.210 --> 00:02:05.640 And then, encourage them as they explore the app or 00:02:05.640 --> 00:02:08.240 they explore the activity that you've given them guidance for. 00:02:10.350 --> 00:02:12.860 Encourage them to verbalize what's going on through 00:02:12.860 --> 00:02:13.940 their head. 00:02:13.940 --> 00:02:17.090 Have them say, hey, I'm using the app and I'm looking for 00:02:17.090 --> 00:02:21.160 what to do and maybe I'm getting lost, or, that's pretty cool, 00:02:21.160 --> 00:02:23.120 and you'll start to get some really good feedback there. 00:02:24.480 --> 00:02:26.720 And then listen, watch and observe. 00:02:26.720 --> 00:02:28.070 Just sit back and 00:02:28.070 --> 00:02:30.770 let them go about doing what it is that they're doing. 00:02:30.770 --> 00:02:33.320 So, a really quick example from my personal experience. 00:02:33.320 --> 00:02:36.430 I was designing an app, it was something that was near and 00:02:36.430 --> 00:02:40.320 dear to my heart, and I thought that I had nailed the design. 00:02:40.320 --> 00:02:42.790 So, I met a friend at Starbucks and 00:02:42.790 --> 00:02:45.470 I put the app in front of her and I gave her the basics. 00:02:45.470 --> 00:02:47.360 Here's kind of what the app does. 00:02:47.360 --> 00:02:48.210 What do you think? 00:02:48.210 --> 00:02:49.430 And I gave her those steps. 00:02:49.430 --> 00:02:51.160 And she started going about it, and she got to 00:02:51.160 --> 00:02:54.100 one of the screens where she was adding a goal to the app. 00:02:54.100 --> 00:02:56.100 And she started exploring it and she says? 00:02:56.100 --> 00:02:58.880 Okay, I don't know where to go next. 00:02:58.880 --> 00:02:59.890 I'm kind of lost. 00:02:59.890 --> 00:03:01.380 So I had to give her a nudge. 00:03:01.380 --> 00:03:04.454 And so that told me that perhaps there was something I could do 00:03:04.454 --> 00:03:06.510 to improve that work flow. 00:03:06.510 --> 00:03:08.942 And then as she got to the next screen and the next screen, 00:03:08.942 --> 00:03:10.420 suddenly she was saying, wow. 00:03:10.420 --> 00:03:11.140 That's really cool. 00:03:11.140 --> 00:03:12.660 I hadn't thought of it that way. 00:03:12.660 --> 00:03:15.300 So I realized there was an opportunity to delight my user 00:03:15.300 --> 00:03:16.490 at that point. 00:03:16.490 --> 00:03:19.510 And it just created such a deeper understanding for 00:03:19.510 --> 00:03:23.600 me about what worked and what didn't work in the application. 00:03:23.600 --> 00:03:26.580 And I was able to go back, revamp the design and 00:03:26.580 --> 00:03:28.870 come up with something even better. 00:03:28.870 --> 00:03:31.770 So, as you can doesn't have to be a big deal 00:03:31.770 --> 00:03:34.490 conduct user testing can be totally informal, 00:03:34.490 --> 00:03:36.550 if you can go the formal route do it in the lab, 00:03:36.550 --> 00:03:38.950 have it recorded and all that, that's awesome as well. 00:03:40.600 --> 00:03:45.230 Principle number two, one thing per screen. 00:03:45.230 --> 00:03:48.870 So what this means is, for example, on the left hand side, 00:03:48.870 --> 00:03:50.420 we've got a sign in screen. 00:03:50.420 --> 00:03:52.460 It does really the one thing. 00:03:52.460 --> 00:03:55.690 So, there should be no confusion. 00:03:55.690 --> 00:03:56.970 When a user gets to this screen, 00:03:56.970 --> 00:03:58.370 it's clear what they're gonna do. 00:03:58.370 --> 00:04:00.160 And if the don't know what to do, 00:04:00.160 --> 00:04:04.210 they've got the register button, the sign up button below it. 00:04:04.210 --> 00:04:06.390 If they've forgotten the secondary actions are there but 00:04:06.390 --> 00:04:08.550 the primary action, the primary purpose for 00:04:08.550 --> 00:04:10.130 that screen completely clear. 00:04:11.550 --> 00:04:14.670 The sessions list and this is the Xamarin of all 2016 app that 00:04:14.670 --> 00:04:16.380 I'm using here for an example. 00:04:16.380 --> 00:04:19.230 And you can grab any app that you open up on your phone and 00:04:19.230 --> 00:04:22.110 ask yourself, what is the one thing that this screen is doing? 00:04:22.110 --> 00:04:24.100 Especially the apps that work really well for you. 00:04:25.840 --> 00:04:29.282 And then, so, the Session screen, the primary function of 00:04:29.282 --> 00:04:31.734 that Session screen is to provide a list of sessions. 00:04:31.734 --> 00:04:34.150 And of course, the primary action's gonna be searching, but 00:04:34.150 --> 00:04:35.630 we also have secondary action. 00:04:35.630 --> 00:04:40.160 So it's not that the screen can't do more than one thing but 00:04:40.160 --> 00:04:42.270 the one thing should be obvious. 00:04:42.270 --> 00:04:43.626 And then the session detail screen, 00:04:43.626 --> 00:04:45.590 the primary thing there is obviously telling you 00:04:45.590 --> 00:04:48.340 the details about the session, which it does. 00:04:48.340 --> 00:04:51.520 But the primary action at this point is to rate that session. 00:04:51.520 --> 00:04:52.840 And, of course, you're saying, 00:04:52.840 --> 00:04:53.890 well why would I rate the session, 00:04:53.890 --> 00:04:55.580 I haven't watched the session yet? 00:04:55.580 --> 00:04:58.180 But that's because the session already happened, so 00:04:58.180 --> 00:05:00.270 the only thing you can do is rate it. 00:05:00.270 --> 00:05:01.290 So let's talk navigation. 00:05:02.500 --> 00:05:03.700 So when it comes to navigation, 00:05:03.700 --> 00:05:08.040 each platform kinda has its own navigation scheme or patterns 00:05:08.040 --> 00:05:11.780 that are more coherent on that platform that are expected. 00:05:11.780 --> 00:05:15.390 So iOS, of course, has the tab bar at the bottom. 00:05:15.390 --> 00:05:19.010 UWP and the Android both kind of gravitate towards fly out or 00:05:19.010 --> 00:05:20.700 master detail menus. 00:05:20.700 --> 00:05:24.200 So, understanding and knowing what those navigation patterns 00:05:24.200 --> 00:05:28.718 are is helpful for us to know how do let users navigate. 00:05:28.718 --> 00:05:32.000 Now, remember that UWP and 00:05:32.000 --> 00:05:36.520 Android both have back buttons on their devices. 00:05:36.520 --> 00:05:40.990 So that means that having that notion on the device impacts 00:05:40.990 --> 00:05:45.540 what navigation you're gonna use on your UI. 00:05:45.540 --> 00:05:49.220 IOS on the other hand has the swipe to go back that 00:05:49.220 --> 00:05:51.820 they introduced, so that's something to be aware of also. 00:05:53.230 --> 00:05:55.270 Let's talk a moment about accessibility. 00:05:55.270 --> 00:05:57.940 So highly important especially at Microsoft, 00:05:57.940 --> 00:06:00.740 we certainly beat this drum, we believe this is important 00:06:00.740 --> 00:06:05.160 that users need to be able to see the text on the screen. 00:06:05.160 --> 00:06:08.340 If they have an impairment that requires having the voice over 00:06:08.340 --> 00:06:12.020 turned on that we have as developers turned on, 00:06:12.020 --> 00:06:13.180 the naming and 00:06:13.180 --> 00:06:16.964 the description so that we get those things read back to us. 00:06:16.964 --> 00:06:19.940 And then also making sure that your contrast is good. 00:06:19.940 --> 00:06:22.070 These are all simple things to test, and 00:06:22.070 --> 00:06:24.510 user testing goes a long way to telling you 00:06:24.510 --> 00:06:27.050 if you're doing well in those cases. 00:06:27.050 --> 00:06:29.060 So on the screen here you see I'll go back and 00:06:29.060 --> 00:06:32.520 forth a couple of times, but the text is small. 00:06:32.520 --> 00:06:36.770 And then when we have enabled units of measure that our device 00:06:36.770 --> 00:06:39.140 independent, or density independent, 00:06:39.140 --> 00:06:42.600 then as the user changes their accessibility settings, 00:06:42.600 --> 00:06:45.205 you'll get larger text as appropriate. 00:06:45.205 --> 00:06:47.865 Xamarin forms, by the way, gives this to you pretty much for 00:06:47.865 --> 00:06:53.095 free because it uses, rather than fixed dimensions and 00:06:53.095 --> 00:06:55.685 units of measure, it uses a unit of measure that is then 00:06:55.685 --> 00:06:57.875 translated down to each platform. 00:06:59.095 --> 00:07:00.255 Okay, designing for touch. 00:07:00.255 --> 00:07:03.765 Obviously, this is a mobile focused design talk. 00:07:03.765 --> 00:07:07.840 So, we wanna talk about what's important for touch. 00:07:07.840 --> 00:07:09.750 People hold their devices in different ways. 00:07:09.750 --> 00:07:11.732 A lot of research has been done on this. 00:07:11.732 --> 00:07:15.480 One-handed, 49% of people use it that way. 00:07:15.480 --> 00:07:17.740 Cradled, that would be with one hand here and 00:07:17.740 --> 00:07:19.360 then the other hand touching it. 00:07:19.360 --> 00:07:21.480 Or two-handed, especially in the case of a tablet. 00:07:21.480 --> 00:07:23.960 But, that may not be always at the bottom of the screen, 00:07:23.960 --> 00:07:25.820 it might be middle of the screen and 00:07:25.820 --> 00:07:30.380 that impacts where you can reach parts of that UI. 00:07:31.940 --> 00:07:36.230 So the green in this example refers to the yes area. 00:07:36.230 --> 00:07:39.760 This is where you can easily access and easily touch things 00:07:39.760 --> 00:07:43.060 on that screen, especially in this one-handed position. 00:07:43.060 --> 00:07:45.638 Then the next area is the It's okay. 00:07:45.638 --> 00:07:47.704 You can kind of touch it. 00:07:47.704 --> 00:07:50.426 You can get to it if you need to but it's really not a stretch. 00:07:50.426 --> 00:07:53.302 And then, of course, you've got that far corner up there that 00:07:53.302 --> 00:07:54.932 unless you have really big hands and 00:07:54.932 --> 00:07:57.828 a really small device is gonna be problematic for you to reach. 00:07:57.828 --> 00:08:01.518 And if you think about this of terms where the UI elements 00:08:01.518 --> 00:08:05.602 exist on the devices in the applications that you're using, 00:08:05.602 --> 00:08:09.213 you'll find that the things that are least accessed, 00:08:09.213 --> 00:08:12.118 that Hamburger menu option, for example, 00:08:12.118 --> 00:08:15.986 on a flyout UI, it is going to be not as easily accessible. 00:08:15.986 --> 00:08:18.539 But you can still get to it when you need to get to it. 00:08:18.539 --> 00:08:21.853 And then, of course, iOS at one point introduced that double tap 00:08:21.853 --> 00:08:24.926 or triple tap of the home button however you have it setup that 00:08:24.926 --> 00:08:27.800 brings the UI down so that you can see it. 00:08:27.800 --> 00:08:30.870 That was one way of achieving some help there. 00:08:30.870 --> 00:08:33.480 But Steven Hoober, I'll just mention, has done some research 00:08:33.480 --> 00:08:37.290 and there's a great book, Designing Mobile Interfaces that 00:08:37.290 --> 00:08:39.310 has some really good information about this sort of thing. 00:08:40.400 --> 00:08:42.590 And of course, if you're left-handed, just reverse that. 00:08:42.590 --> 00:08:43.370 And if you're two-handed, 00:08:43.370 --> 00:08:45.200 you can kind of thing of it that way. 00:08:45.200 --> 00:08:47.320 So when you're placing your UI elements, 00:08:47.320 --> 00:08:49.740 consider where you're putting things. 00:08:49.740 --> 00:08:53.291 The other thing to consider when it comes to touch is the size of 00:08:53.291 --> 00:08:54.191 your buttons. 00:08:54.191 --> 00:08:57.508 If you have really small text that's supposed to be touchable 00:08:57.508 --> 00:09:00.887 and takes action, or you have buttons and they're too small or 00:09:00.887 --> 00:09:02.992 they're too close to something else, 00:09:02.992 --> 00:09:06.217 it becomes very difficult for people to use those buttons. 00:09:06.217 --> 00:09:08.957 I mean, we've all experienced the frustration of trying to hit 00:09:08.957 --> 00:09:10.428 that button, and you missed it and 00:09:10.428 --> 00:09:13.117 you hit the thing next to it and now you're super frustrated and 00:09:13.117 --> 00:09:15.580 angry and you're yelling at the developer that made it. 00:09:15.580 --> 00:09:19.390 So a good rule thumb, 40 pixels and 00:09:19.390 --> 00:09:22.650 a 5 pixel margin between that element and something else. 00:09:22.650 --> 00:09:26.370 But as we know, devices nowadays have multiple densities 00:09:26.370 --> 00:09:29.440 which means that 40 pixels on one device is not 40 pixels on 00:09:29.440 --> 00:09:33.090 another device from a physical measuring sense, right? 00:09:33.090 --> 00:09:34.990 So what does pixels really mean anymore? 00:09:36.240 --> 00:09:39.810 So Apple, and Android, and Universal Windows Platform, 00:09:39.810 --> 00:09:42.470 Microsoft, everybody's come up with a different way to express 00:09:42.470 --> 00:09:46.260 units of measure that is independent of device and 00:09:46.260 --> 00:09:48.510 independent of density of screen. 00:09:48.510 --> 00:09:51.150 So Apple, they use what's called the Point. 00:09:51.150 --> 00:09:53.275 Android has Density Independent Pixels or 00:09:53.275 --> 00:09:56.550 what's commonly referred to as DP's or DP's. 00:09:56.550 --> 00:09:59.430 And then UWP uses Device-Independent Pixels. 00:09:59.430 --> 00:10:02.390 And again, this is something that Xamarin Forms does a nice 00:10:02.390 --> 00:10:04.163 job of abstracting a way for you, so 00:10:04.163 --> 00:10:07.004 that you can express your units of measure once and it gets 00:10:07.004 --> 00:10:09.930 translated to that platform so it scales appropriately. 00:10:09.930 --> 00:10:13.880 But when it comes to making assets for our devices and for 00:10:13.880 --> 00:10:17.030 our applications, notice this grid on the right here. 00:10:17.030 --> 00:10:19.280 That's a lot of things that need to be created. 00:10:19.280 --> 00:10:21.370 That represents all the different sizes for 00:10:21.370 --> 00:10:24.210 all the different densities or at least most of them that 00:10:24.210 --> 00:10:28.990 you need to create copies of each image to be ready for 00:10:28.990 --> 00:10:32.720 each of those platforms at those scales, at those resolutions. 00:10:32.720 --> 00:10:33.650 That's a problem, right? 00:10:33.650 --> 00:10:36.930 So pixels really, although we still make our images and 00:10:36.930 --> 00:10:41.080 our assets at a pixel size, it's not rendering at that size, and 00:10:41.080 --> 00:10:43.480 that's a lot of artwork to create. 00:10:43.480 --> 00:10:44.970 So how do we address this? 00:10:46.040 --> 00:10:48.050 We design with Vector Graphics. 00:10:48.050 --> 00:10:50.770 So this is a picture right here of the Sketch App which is one 00:10:50.770 --> 00:10:52.180 of my favorites on the Mac side. 00:10:52.180 --> 00:10:54.540 And there are other options on the Windows side. 00:10:54.540 --> 00:10:56.474 Sketch is not one that's available there. 00:10:56.474 --> 00:11:00.635 But at its core, it is a vector drawing application and this one 00:11:00.635 --> 00:11:04.335 in particular is geared towards mobile and web applications. 00:11:04.335 --> 00:11:07.695 So what that allows us to do is to create 00:11:07.695 --> 00:11:11.080 a high fidelity prototype as well as production ready art. 00:11:11.080 --> 00:11:14.180 And then when it comes time to produce those art pieces, 00:11:14.180 --> 00:11:16.890 all those images that we saw on that previous screen, at all 00:11:16.890 --> 00:11:20.790 those different sizes, we can do a vector export from Sketch. 00:11:20.790 --> 00:11:23.700 And again, other applications have other ways of doing this 00:11:23.700 --> 00:11:25.680 that is also powerful. 00:11:25.680 --> 00:11:28.900 And then, all at once, it gives us all the sizes we need. 00:11:29.980 --> 00:11:33.930 For more information about this, check out my Xamarin Evolve 00:11:33.930 --> 00:11:37.142 2016 session, just a little shameless plug here, 00:11:37.142 --> 00:11:40.720 on the Design to Development Workflow where I cover 00:11:40.720 --> 00:11:43.610 that tool as well as many other tools that we've been 00:11:43.610 --> 00:11:46.780 really successful with in building mobile applications. 00:11:47.860 --> 00:11:50.270 So, let's talk about designing for context. 00:11:50.270 --> 00:11:51.900 Now what do we mean by this? 00:11:51.900 --> 00:11:54.500 I mean, if you're in the desert on a hike, 00:11:54.500 --> 00:11:55.630 who wouldn't wanna be? 00:11:55.630 --> 00:11:58.540 If you're on the subway, a lot of us had to do that. 00:11:58.540 --> 00:12:01.200 Or if you're at home on the couch, those are different 00:12:01.200 --> 00:12:03.610 places in which we're using our mobile applications. 00:12:05.180 --> 00:12:06.810 So consider if you're out on a hike, 00:12:06.810 --> 00:12:09.500 what features might be important to you? 00:12:09.500 --> 00:12:11.840 Offline, clearly, is gonna be an issue. 00:12:11.840 --> 00:12:14.450 By the pyramids, I don't know, I haven't been there but 00:12:14.450 --> 00:12:16.400 there may not be a cell tower near by. 00:12:17.436 --> 00:12:20.100 So you're gonna wanna make sure that your application, 00:12:20.100 --> 00:12:22.600 if the user is expected to use that application 00:12:22.600 --> 00:12:25.518 in that environment, as good offline functionality. 00:12:25.518 --> 00:12:27.730 Nothing worse than opening up the app and 00:12:27.730 --> 00:12:31.233 having it say, sorry, you're offline no can do-ski. 00:12:31.233 --> 00:12:35.530 Offline, online sync, of course, if you are working offline, 00:12:35.530 --> 00:12:36.830 once you do come back online, 00:12:36.830 --> 00:12:38.190 you wanna make sure that you can sync. 00:12:39.220 --> 00:12:41.653 And then, location services, of course, 00:12:41.653 --> 00:12:45.007 mapping, maybe voice, all of these things are available to 00:12:45.007 --> 00:12:46.468 you in that environment. 00:12:46.468 --> 00:12:50.794 But, if you're on a subway, which subways' notoriously loud, 00:12:50.794 --> 00:12:53.960 you need to hold on to something, so certainly, 00:12:53.960 --> 00:12:55.914 one handed use is a priority. 00:12:55.914 --> 00:12:58.669 Privacy, you don't want somebody looking over your shoulder while 00:12:58.669 --> 00:13:01.280 they're using the application, or maybe it doesn't matter for 00:13:01.280 --> 00:13:02.100 your application. 00:13:02.100 --> 00:13:04.630 But if it does, that's something to consider. 00:13:04.630 --> 00:13:05.430 But it's noisy. 00:13:05.430 --> 00:13:09.300 If your application depends on voice recognition, that is not 00:13:09.300 --> 00:13:12.050 a good choice if it's going to be used on a subway. 00:13:12.050 --> 00:13:14.370 So you might wanna have a backup plan for that. 00:13:14.370 --> 00:13:16.280 And then of course WiFi versus cellular, 00:13:16.280 --> 00:13:18.700 are you being respectful of the user's data charges? 00:13:19.870 --> 00:13:22.340 And if you're like me and you're sitting at home on the couch and 00:13:22.340 --> 00:13:25.720 you're watching TV, does your app interface with things that 00:13:25.720 --> 00:13:27.230 are happening on the TV? 00:13:27.230 --> 00:13:29.030 Perhaps, it's a gaming application or 00:13:29.030 --> 00:13:32.640 a game and you wanna be able to do one thing on your phone and 00:13:32.640 --> 00:13:35.870 another thing on the TV and have them work together. 00:13:35.870 --> 00:13:36.930 Are you doing Bluetooth? 00:13:36.930 --> 00:13:37.680 Are you integrating? 00:13:37.680 --> 00:13:38.930 How are you integrating? 00:13:38.930 --> 00:13:42.010 These are all things to consider from a design standpoint 00:13:42.010 --> 00:13:44.590 to make your app really stand apart from the competition. 00:13:46.980 --> 00:13:49.373 The one thing that's very interesting that's come up 00:13:49.373 --> 00:13:51.765 recently in studies over the last several years is that 00:13:51.765 --> 00:13:53.336 people don't use just one device. 00:13:53.336 --> 00:13:56.416 And not only do they not use just one device, but 00:13:56.416 --> 00:14:00.729 they often will use that device and another device concurrently, 00:14:00.729 --> 00:14:03.127 or they will use them sequentially. 00:14:03.127 --> 00:14:04.869 It'll start an activity on one device and 00:14:04.869 --> 00:14:07.130 then they'll move to other devices. 00:14:07.130 --> 00:14:10.784 So, for the recent study and this is a Google study from 00:14:10.784 --> 00:14:13.485 a marketing research project they did, 00:14:13.485 --> 00:14:17.810 57% of people use multiple devices, 21% concurrently. 00:14:17.810 --> 00:14:20.790 But the key is, one of the emphasis is 00:14:20.790 --> 00:14:24.673 from that research found that it's still mobile first. 00:14:24.673 --> 00:14:27.995 And, some excellent examples of activities that people will do 00:14:27.995 --> 00:14:30.745 from one device to another device, shopping, 00:14:30.745 --> 00:14:33.315 video streaming, gaming. 00:14:33.315 --> 00:14:35.955 So if your application is gonna be used on multiple devices, 00:14:35.955 --> 00:14:39.470 consider how you're gonna handle that, online, offline sync. 00:14:39.470 --> 00:14:41.320 Azure has excellent services, and 00:14:41.320 --> 00:14:44.240 I've used the mobile services package from them to do that. 00:14:44.240 --> 00:14:47.100 Realm DB also now works with Azure to do online, 00:14:47.100 --> 00:14:49.130 offline sync, which is very cool. 00:14:49.130 --> 00:14:49.850 So those are some 00:14:49.850 --> 00:14:52.640 excellent things to look at from a development standpoint. 00:14:52.640 --> 00:14:54.960 But from a design standpoint, consider, 00:14:54.960 --> 00:14:58.070 what are you doing to support those types of activities, and 00:14:58.070 --> 00:15:00.200 are you being consistent not only with your design and 00:15:00.200 --> 00:15:02.320 your brand but your functionality across those? 00:15:04.760 --> 00:15:06.180 Okay, a word about affordance. 00:15:06.180 --> 00:15:07.960 Affordance is one of my favorite words and 00:15:07.960 --> 00:15:10.660 I don't think it's one that we talk about near enough. 00:15:10.660 --> 00:15:12.400 But it's the perceived signal or 00:15:12.400 --> 00:15:16.790 clue that an object may be used to perform a particular action. 00:15:16.790 --> 00:15:20.700 So, a door has a handle on it, or a push. 00:15:20.700 --> 00:15:23.280 And it will tell you how to use that door. 00:15:23.280 --> 00:15:26.010 Unless it's not done properly, and we've all seen this happen, 00:15:26.010 --> 00:15:29.330 you walk up to the door, and you go to push when you should pull, 00:15:29.330 --> 00:15:31.710 and you run your face into it, and it's super embarrassing. 00:15:31.710 --> 00:15:34.970 And we don't wanna have people doing that with our mobile apps. 00:15:34.970 --> 00:15:36.820 So we wanna properly use affordance. 00:15:36.820 --> 00:15:39.134 So here are several different types of affordance. 00:15:39.134 --> 00:15:42.840 We have explicit affordance, which is push me. 00:15:42.840 --> 00:15:46.230 And on iOS, you may have seen this in applications lately, 00:15:46.230 --> 00:15:49.265 they don't necessarily have a background to the button or 00:15:49.265 --> 00:15:51.730 even an outline of a button, it's just text. 00:15:51.730 --> 00:15:54.700 So, having an explicit call to action is important for that. 00:15:55.760 --> 00:15:59.830 Patterns, if you have a grouping of text that's at the top or 00:15:59.830 --> 00:16:02.640 at the bottom of a screen and it's broken up, 00:16:02.640 --> 00:16:04.050 it's clearly not a sentence. 00:16:04.050 --> 00:16:05.740 More than likely, it's a menu. 00:16:05.740 --> 00:16:08.040 And that's a common pattern, we see that in web design a lot. 00:16:09.080 --> 00:16:10.860 That people understand, and 00:16:10.860 --> 00:16:12.390 that pattern is something they can follow. 00:16:12.390 --> 00:16:13.510 It's a call to action. 00:16:14.510 --> 00:16:18.890 Metaphors, so these are icons that are commonly understood 00:16:18.890 --> 00:16:20.900 either through repetitive use, 00:16:20.900 --> 00:16:23.340 or we've given them that meaning. 00:16:23.340 --> 00:16:25.490 We've imbued that meaning upon them, or they're real world 00:16:25.490 --> 00:16:28.260 meanings that are brought into the digital space. 00:16:28.260 --> 00:16:30.700 We clearly understand that trash is gonna delete something, 00:16:30.700 --> 00:16:31.960 plus is gonna add something, etc. 00:16:31.960 --> 00:16:34.306 And then we've got log in. 00:16:34.306 --> 00:16:36.722 It's a negative affordance, and essentially what a negative 00:16:36.722 --> 00:16:39.272 affordance is saying is that you can't do anything with this. 00:16:39.272 --> 00:16:41.800 We have turned it off and until something else happens, 00:16:41.800 --> 00:16:44.100 it's not going to be enabled for action. 00:16:44.100 --> 00:16:47.070 So, we're all familiar, I think, most of us, with that. 00:16:49.450 --> 00:16:52.950 So with that, I wanna wrap up with this call of action. 00:16:52.950 --> 00:16:57.830 IOS, Android, UWP, they all have very distinct pillars of what 00:16:57.830 --> 00:17:01.970 makes their design stand out in their community. 00:17:01.970 --> 00:17:04.900 People that use an iOS device expect iOS 00:17:04.900 --> 00:17:06.730 applications to behave a certain way. 00:17:06.730 --> 00:17:08.940 The same can be said for Android, and 00:17:08.940 --> 00:17:12.370 the same can be said for UWP applications. 00:17:12.370 --> 00:17:16.860 So, follow up on these guides, research them, understand what 00:17:16.860 --> 00:17:19.395 is important on those platforms so that as you're designing your 00:17:19.395 --> 00:17:21.010 cross-platform mobile applications, 00:17:21.010 --> 00:17:22.450 hopefully with Xamarin, 00:17:22.450 --> 00:17:26.090 you will be able to have the best success possible. 00:17:26.090 --> 00:17:26.880 Thanks for joining me. 00:17:26.880 --> 00:17:28.690 I hope this was informative to you, and 00:17:28.690 --> 00:17:31.564 enjoy Microsoft Build 2017.