Welcome back everybody, in this video I'm going to talk about mobile user interface design. And let's start with a little context, what do I have in mind when I talk about mobile user interfaces? Well the focus really is smartphones, smartphones are ubiquitous, they're the most popular way to access the internet. So that's going to be my focus. And before I go into any details about designing for smartphones or mobile devices in general, I want to remind you that everything that you know about user interface design still applies. So everything we've talked about in this course and in earlier courses is still relevant to designing good mobile user interfaces. So the iterative user interface design process, where you go from doing user research, understanding user needs to design, to evaluation, and continually cycling through until you're satisfied still makes sense. Applying appropriate design principles and patterns to come up with good designs still make sense, even though some of the pattern may differ from mobile devices, it's still relevant. Low-Fidelity Prototyping still is relevant and Evaluation Methods, which we will be teaching in a later course still make sense for designing good mobile user interfaces. Now I said that the context really that I have in mind when I think about designing for mobile devices is smartphones but that's a little too simplistic. Today, people combine using multiple devices, tablets, smartphones, laptops, desktop computers, and It makes perfect sense that about any application that somebody has designed that they want to reach a user population with, they design it to work on multiple devices. So I think for things like Amazon. This is what it looks like for me when I login to my Amazon account on my desktop computer, and this is what it looks like on my smartphone. Now, later on I'll talk about some of the similarities and differences between these things, but the bottom line is about any application that you use, whether it's a cellphone networking application like Facebook or Twitter, or an e-commerce site like Amazon, or a news site like the BBC or The New York Times or whatever, you are going to see versions of this on multiple devices. They want to reach their user population on whatever device they may be using at that time. Now, the important thing to keep in mind when you're designing applications in this context is that we should utilize the capabilities of each device, and respect the constraints of each device. And as we think about that, we realize, well, on my computer I have a keyboard, I have a larger screen, I have a mouse as a pointing device, and on my smartphone, I have a smaller screen, I use touch as my primary input medium, I might also use speech a bit more, in that context. So I've gotta design appropriately given that. Well, but how do I do that? How do I create apps that exploit the resources and respect the constraints of a range of devices, and yet deliver, hopefully the same functionality, the same content? Well, there are a number of approaches to this problem, and I'm going to mention three and then talk a little bit more about one of these approaches. So the first approach is native apps. You develop a separate app, or separate application, for each platform that somebody might use to access your app. So you develop one for Android, you develop one for iOS, you develop one that runs on Windows PCs, you develop one that runs on Macs, or you develop one that is optimized for accessing through the web on large devices. So you have to develop a separate app for each platform. Another approach is to develop something that gets delivered over the web, it's a web app, and as we'll talk about the state of the art way for doing this is responsive design. And after we talk about those two options, I want to talk a little bit about hybrid apps which gives combines some of the strong points of both native apps and web apps. So let's talk a little bit about native apps. As I said these are platform specific apps. So if you're developing for Android for example, a native app will be built in Java. Now, there are a bunch of advantages to having a native app for each platform that you want to deliver to. You can have the native user experience. Your app will look like An IOS app if you're running on an IOS device, it will look like an Android app if you were running on an Android device. You will have access to all the device capabilities, the camera, the GPS, the contacts list. Performance in terms of speed is typically better, and it will be available through App Store. So if you think the best way to reach people is through the Google Play Store or the Apple App Store, your app will be there. Now the obvious problem is that if you are developing a different app for each platform, the development and maintenance costs are higher and it takes longer time. Now web apps are accessed through web browser, whether it be the web browser running on a desktop computer, or web browser running on a smartphone or a tablet. And so you develop your app using the normal tools and frameworks that you would use, HTML, CSS, JavaScript often. So, what are the advantages of this approach? Portability obviously. You're developing one thing that puts across multiple platforms, and this of course leads to lower development and maintenance cost. You're developing one thing instead of multiple different software bases. You're application is discoverable through web search. So if people want to find you, they can go to Google or go to Bing or whatever, do they search and they'll find you that way. Now some of the draw backs are, if you development a web app that runs in a browser, it cannot or may not follow all the platform standards. So it may not look exactly like an iOS or an Android app, it may not have access to all the device capabilities, for example you may not be able to access the contacts list or the camera in some cases. And typically these web apps run slower than a native app would because they're not optimized to the particular platform in question. Now the third approach that I mentioned is Hybrid apps. So this is a web apps, so they basically developed a web app just as you would, and then it gets packaged with a native wrapper, a native container. And there's a couple approaches, Phonegap/Cordova, and Appcelerator Titanium that are typically used to package up your web app into a native container, so native to IOS, native to Android. And so, in some ways the development is similar to web apps, but you have to do more developing and maintenance. You have to do for each platform, you have to produce this container, this package, so it can run in that platform. And the plus is then is this then can exist in the app store, and you have the access to all the device capabilities. Now, I'm going to talk a little bit more about web apps, and in particular, I'm going to talk about an approach called Responsive Design. And the reason I want to focus more on web apps is ,this is a common approach today. It gives you a lot of software development and maintenance advantages, and in many cases, the performance is completely acceptable, and the user experience is too. So I want to talk a bit more about this. Now, the basic idea of a responsive web app is that it flexibly adapts to the screen width. And there's sort of three main characteristics of this approach. The idea of fluid grid, the grid which is the layout of the components in your application, it can change based on how much screen width you have. Flexible images that is images that I can say how big they need that can be scaled according to the amount of screen size you have. And then media queries, which is a way NCSS to say find out how much screen space you have, and if you have a certain amount of screen space, lay things out or do things this way. Apply this set of rules to laying things out. So, responsive design is the technical aspect of how you can create interfaces that runs across multiple devices, but how do you make good user interfaces using this approach? And I want to remind you that our goal here is to utilize the capabilities and respect the constrains of each device, and continue to use good user interface design methods and principles. Now, a typical approach that's recommended if you're going to develop a good user interface that runs across multiple devices in this responsive design approach, is to take a Mobile-First approach. The idea is you first figure out how to design a good user experience on a mobile device, smartphone form factor basically, and then you progressively think about adding more, taking advantage of the larger screen, and greater capabilities of a desktop interface. The idea is that mobile devices have the most limitations, typically screen sizes and perhaps bandwidth and therefore, you want to make sure you design within these parameters first, and by doing so, it helps you prioritize content. You can ask yourself, what is the most important content, and I got to make sure that I fit that in well. And then as I have more and more space, I can add in the secondary and tertiary content. So that is the idea of this Mobile-First approach. And it's probably worth mentioning that we don't want Mobile-First to devolve into mobile only. We want to make sure that as we move up to a larger form factor, a larger screen size we take advantage of that. And so I'm going to show you a few examples next that will give ideas of what you might change as screen size increases, how you might respond to that, and thus exploit the capabilities and respect the constraints of the screen size that you're dealing with at any given time. One other thing before I do that, I should emphasize, you do want to make sure that you do use a research those that you understand that the task that people are typically going to perform or that they really want to perform at a mobile device, or at a desktop interface, are the same. Maybe they're different, and if so you should take that into account as well. Okay, let's see a couple examples. So I want to start out by showing you the BBC web app, and this is how it looks on my smartphone, and I want to show you a couple of things, or point out a couple of things. So you can see across the top area, there's the BBC logo, and we see a few navigation items. News, Sports, More and then we see a search icon and a place where I can type in a search query. We see one large image, and then we see a few headlines below that, so it's a single column format. Now next, I want to show you side by side with this, here is what it looks like on my desktop web browser when I had my screen width really narrow. And you can see it's essentially the same. I have the BBC logo, I have an icon, I have a couple navigation areas, News, Sports, More, and I have a Search item. I have a single column layout, and it looks very similar. Now let's see what happens as on my desktop I make the my browser window wider. Well I still have a single column layout for the content, a picture at the top and then some text items below it, but if you look back up at the navigation area, now I have a few more navigation items. In addition to news, sports, I have weather, shop, earth. So, the design is now adding in some more navigation items. And then finally, when I made my desktop browser even wider, there's quite a few changes. So, I've added in one more item across the top navigation bar, Travel, and now, the search area, you'll notice it actually is larger and it says, Search. So I've got more information as a user of the desktop interface about my navigation and search options. So, they have exploited the capabilities of that larger display. And, in the content area, now the layout is different. Instead of having a single column, I have three columns at the top, and then multiple columns below, and now I'm also not using simply text headlines in the lower area, the news area, instead there are images and headlines beneath them. So they've changed the layout quite a bit to exploit the properties of this device. I'm going to go through a couple more examples. So here's Walgreens, this is a pharmacy chain in the United States. And, this is what it looks like on my mobile device, a single column content layout with a large image at the top. And then at the top navigation bar, I have the hamburger menu on the left, and it says in very small font menu, and the Walgreens logo, and a little shopping cart. Now if I show you the desktop interface when I've made the width of the browser small, it looks pretty much identical. Okay, the lay out has changed slightly, but I still have the hamburger menu, I still have the Walgreens logo, I still have a shopping cart, but the search actually has been changed a bit, but I still am doing the same thing with a content, one column. Now if I widen my desktop browser looks very different, the navigation area has been expanded a lot, the search area has been expanded a lot, there is a place for me to log into my account, and now I have in the content area, I actually have several columns instead of a single column. So again, they flexibly adapted the screen size. So let me show you one more example, I want to show you a Google Drive example. This again is on my smartphone, the things I want to point out is I have, in the content area I have a few recent things, I have usability lab visit sign up, I have mobile design, actually this PowerPoint, this PowerPoint slide deck. And then I have one other item I can see partly, and then I have a number of items moving down in a single column below, and then across the top I have a hamburger menu, I have a search icon, and I have some other icons that give me access to more options. Now, let's look at what it looks like on my desktop interface, looks quite different. Now, I have a more detailed content area taking up most of the screen, so in addition to the names of items, I have some information about them. And I have navigation items over to the left, and then I have a much larger search area at the top. So it says Search Drive, so it's much clearer what I can do. So, you can see that they've taken advantage of this larger screen width, in order to give me more functionality. But of course those pieces of functionality accessing my recent items accessing, Google photos should they still be available in the mobile app? Well the answer is, yes they are. But they were not the most high-priority items, so they had to be hidden and made accessible through a different way. So if we go back to my mobile app, you'll notice there is the hamburger menu, and if I expand that, coming in from the left side I see access to my drive, things that are shared with me, Google Photos, recent starred, etc. And in fact, these are the items that were visible at top level in the desktop interface. So, the responsive designer approach said, at the mobile level these are not the top priority items, so I cannot make them visible, but I will make them accessible through this hamburger menu that if users know how to use, they can get access to them. So that is our video on Mobile User Interface Design. I went over the fact that you want to use the same principles and methods that you used for creating any good user interface, and then talked in some detail about an approach to creating web apps that give a good user experience on a range of user devices, and went through examples of how we apply this technique, responsive design across a range of examples. And that's it until next time.
