Loading...

Mobile UI Design

A look at several important and challenging design contexts and how interfaces can address those contexts.

Prototyping and Design

Université du Minnesota

Cours 3 de 5 dans Conception d'interfaces utilisateur Spécialisation

In this course you will learn how to design and prototype user interfaces to address the users and tasks identified in user research. Through a series of lectures and exercises, you will learn and practice paper- and other low-fidelity prototyping techniques; you will learn and apply principles from graphic design, including design patterns; you will learn to write a design rationale; and you will learn how to design for specific populations and situations, including principles and practices of accessible design.

Visualiser le programme de cours

Enseigné par

Loren Terveen
Professor
Haiyi Zhu
Assistant Professor
Lana Yarosh
Assistant Professor
Dr. Brent Hecht
Assistant Professor
Joseph A Konstan
Distinguished McKnight Professor and Distinguished University Teaching Professor

Transcription

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.

À propos de Coursera

Cours, Spécialisations et Diplômes en ligne enseignés par des enseignants du plus haut niveau provenant des meilleurs universités et établissements d'enseignement du monde.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play