Putting it all together

Loading...

En provenance du cours de University of California San Diego

Information Design

435 notes

University of California San Diego

Information Design

435 notes

Cours 6 sur 8 dans Specialization Interaction Design

A blank canvas is full of possibility. If you have an idea for a user experience, how do you turn it into a beautiful and effective user interface? This covers covers principles of visual design so that you can effectively organize and present information with your interfaces. You'll learn concrete strategies to create user interfaces, including key lessons in typography, information architecture, layout, color, and more. You’ll learn particular issues that arise in new device contexts, such as mobile and responsive interfaces. You will learn how to apply these design principles in a modern context of increasingly diverse form factors - from tablets, to walls, to watches.

À partir de la leçon

Flexible Layout

There’s more than seven billion people on the planet, and just about that many computing devices. Given that scale and diversity, interface design can’t be one-size-fits-all. In this module, we’ll dive into the rationale and strategies for designing interfaces more flexibly. We’ll talk about internationalization--i18n for you wonks and 1337 h4x0rs--and the interplay between script direction and interface layout. And we’ll discuss responsive design: having a ‘family’ interface strategy that grows, shrinks, and changes to accommodate a range of device form factors.

Make a Difference9:21

Putting it all together8:28

Rencontrer les enseignants

Scott Klemmer
Professor
Cognitive Science & Computer Science

We're getting close to the end of the specialization and so

in this video what I want to do is put it all together.

Here's an example from the website Zipcar

which on the whole has really great design.

But I wanted to focus on a couple of data driven interface errors that we see

in this site.

So what they've done, which I on the whole like,

is that the color palette is restricted, which gives it this very calm feel.

The rub is that in this site, orange is overloaded.

If you're going to have a color palette,

where colors are more than just decorative.

An individual color should serve one purpose alone.

For example, in many user interface widget libraries,

there might be a couple of shades of gray, and

then a couple of shades of a particular color, blue or something like that.

And often the gray stuff means non-interactive and

the blue stuff means interactive.

So which things on this screen can you click on?

I'll point out the orange elements here.

You've got the two triangles for

being able to select the location and a car type.

Up top there's a banner about new service that's available.

In the center right, we have a button for reserve, and

then in the time slider widget, there's a piece that is orange, the rest is gray and

there's some text that is describing, presumably, that orange piece.

And then over here we have a find cars button.

And if we want to be diligent,

there's a few bits of text scattered throughout the site that are also orange.

So what does orange mean?

Well, in many cases, orange is the stuff that you get to click on.

So find cars, that button, that's orange.

The drop down menu, that's orange.

The other drop down menu, also orange.

The calendar widgets, those are orange.

Okay, so orange means interactive, right?

Well, here's a link that could be orange, sure why not?

I'm not exactly sure why it's in the same category as the other orange things but

not too bad so far and the text over here similarly.

Yep, find cars by location that's orange that's good.

This element that you can't click on,

but that's okay, you've got these sliders here and they're pretty easy to see.

Now, one thing that you may not realize is there's a gray chunk here, and

an orange chunk here.

I've got an alert that says, your reservation overlaps another reservation.

Normally, when something grayed out, that means it's unavailable.

That's what I thought when I first saw this site.

Turns out, actually, that the grayed out is the part that's just fine.

And orange is used to represent not the part that's good to go, but

the part that is unavailable.

Not a reasonable and unreasonable choice for orange.

It just happens to be inconsistent with the usage of orange

elsewhere on this page.

If orange starts to mean things you may be interested in,

these are the exciting parts, these are the interactive parts, then this button

probably should be grey as opposed to orange when it's unavailable.

University websites are always a little bit of a cheap shot.

They have to do so many things with so few resources.

But they provide such good examples that it's fun to show them.

So this is a webpage that will let you look up the class list for

a particular class.

And the functionality that's exposed by this website is actually great.

You can do so in a variety of different ways.

There's two challenges to this web page.

The first one, is that there are several different ways of selecting and

they're all one on top of the other.

And so this gives us a page, where the first path is a couple of

screens worth here and the second path is a couple of screens worth here and I think

there might even be a third path and there's a go button after each of these.

It makes for panes that are extremely long and

because many of the same fields are showing up over and

over again, often can be confusing to know which one you're in.

This is a case where it might be better as opposed to putting these things

one on top of another serially.

You might be better off for example having three different tabs.

So you can have a tab for type a and A tab for type B and a tab for type C.

And that way, what a tab does, is it enforces that you can't

see parameters or set parameters that aren't relevant to your current task.

Because in the serial case, you might set a parameter here, and

think it applies to this button, when in fact it doesn't.

The tab strategy means that you can't set those parameters, they're not visible,

it's modal in that sense.

The second thing that I wanted to point out is we started with some good examples,

we've got our blue apron, and our eater, that do a great job of filling the space

well, leaving enough room to breath, and taking what on the back end is a lot of

data and presenting it a relaxed, streamlined way.

Here, there's a lot of white space, but it's not in very useful ways.

And what hasn't been done with this page,

is there's no sense of scale that's differentiating things.

So for example, imagine if we let Eater or

Blue Apron redesign this site, you would get a much bigger button for term.

And some of the other key salient variables would pop out and

become big, maybe bold, maybe colored.

And then you might have drop down menus for some of these other things.

I wanted to show this one second because it really conveys how the sense of scale

that's used so effectively in our good sites.

You might not notice its absence at first, or

how much power it's giving to success here.

But now that you look at these one right after the other you can see there's a big

difference.

Similarly, this is from the Clipper transit card site.

In this case, there are several parameters you need to set for

being able to get a new card.

There's two aspects that impede usability here.

The first one is the use of color, that we have a site here,

where no matter how wide your browser window is.

They've chosen to make a background that goes all the way across.

There are times when that can work but

in general I think this strategy is not so great.

If you have a guaranteed limit here this can be reasonable.

But these long bars draw a lot of visual attention,

even subconsciously away from the thing that you're actually trying to attend to.

We almost want to sublimate in this case these header categories and

let the content underneath those header categories come to the fore.

Now you'll see there's a,

are you sure you want to proceed section here, where the text is all in red.

Usually, when text is in red it means that something bad is happening but

in this case this is par for the course, it's the only way to get a card.

So there's neither something particularly careful that you need to pay attention to,

or something bad or unreasonable that's happening.

This is just the normal chain of events.

And usually, it's wise to reserve red text for times,

where there is something that's gone astray for an error, for a warning.

And lastly, in part because of these giant banners and

apart from lousy design, a lot of the buttons and

widgets are bumping up against other elements on the screen.

Think about some more successful designs we've seen and how they take a similar

kind of category label, aligned within the category strategy, but do so

in a way that doesn't doesn't bump in and jangle in that in that way.

So now that you've seen me talk through a number of different designs, and

things that I would do to be able to redesign them more clearly,

you're set to do the assignments for this course.

Where you'll get a chance to do this same kind of redesign activity.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

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.

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

Télécharger dans l'App Store

Disponible sur Google Play