Wayfinding

Loading...

Del curso dictado por California Institute of the Arts

Web Design: Wireframes to Prototypes

calificaciones

California Institute of the Arts

Web Design: Wireframes to Prototypes

calificaciones

Curso 4 de 4 en SpecializationUI / UX Design

This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes. Along the way we will also discuss: - Responsive web design and mobile web challenges - Mobile-first approach - Web typography - The relationship between design and programming and whether it is important to know how to code - The different web technologies that make the web work, such as HTML, CSS, JavaScript, server-side coding, and databases. This course is the continuation of the course Web Design: Strategy and Information Architecture, in which students completed the first half of a large scale project—developing a comprehensive plan for a complex website. If you are intending to complete the assignments in this course to earn a certificate you must complete the Strategy and Information Architecture course first so you have the materials and data needed to begin creating wireframes and mockups in this course.

De la lección

Not Getting Caught up in the Details: Wireframes

This week is all about wireframes. After mapping out our strategy and scope in the previous course, Web Design: Strategy and Information Architecture, this is the first time in the process that we will address the screen. Now things are going to get much more concrete as we’re starting to actually lay out elements for the user interface. This week you will learn why working on wireframes first—before designing high-fidelity mockups—is a helpful intermediate step. I’ll also talk about responsive design, navigation systems, wayfinding, common design patterns, and strategies for homepage design. And, we’ll discuss which tools are most appropriate for creating wireframes. Because creating those will be your assignment at the end of the week.

Introduction and Primary navigation4:29

Secondary and utility navigation5:20

Related content, inline links, indexes, and search4:30

Conoce a los instructores

Roman Jaster
Visiting Faculty, Program in Graphic Design
School of Art

One of the more fundamental psychological fears that

most humans share is the fear of being lost.

Getting lost on a freeway,

or inside an airport,

or inside the woods is not the idea of fun for most people.

We probably all have a story of getting lost as

children and the terror that inflicted on us,

not to mention on our parents.

When we are designing websites,

we should make sure that people don't get lost in them because if

they do get lost or even if they are just a little confused of where they are,

it will trigger a pretty potent negative reaction,

and the usability of our site suffers.

So, what are some tools and techniques for us

web designers to answer the user's question, "Where am I?"

and prevent them from feeling lost?

In this video, I will talk about the following: site identification, page titles,

"You are Here" indicators,

breadcrumbs, links back to the homepage, and consistency.

As an example, we'll use one of the wireframes from the last video.

It's a fairly simple page about the employees of a company.

It's a secondary page located in the About section.

Now, by site identification,

I mean that the user should be able to tell at all times simply what site they are on,

and one of the best ways to communicate this is to have

the site's logo or the site's title in the header on every page.

The convention is to have it in the upper left corner,

and I would recommend that location as a starting point for your design investigations.

We'll use the three example websites we looked at in the last video again.

Here, you can see that there aren't any surprises.

The logos of the organizations are placed safe and securely in the upper left corner.

Sometimes, no surprises is a good thing.

It grounds the user's experience when they know where they are at all times.

Another important wayfinding element is the page title.

Let the user know what page they're on.

Here, in this wireframe,

we can see the page title, "Our Team",

is presented clearly, enlarged type towards the top of the page.

The MAK Center website does a good job of prominently displaying the title of a page,

as you can see here on the Visit page.

The Marciano Art Foundation and Pasadena Conservatory websites

often use a different mechanism to let the user know what page they're on.

More on that in a seconds; but here,

on an upcoming events page,

the title of the page stands out clearly.

This blog post here also displays the title very prominently.

When you're looking at a map in a shopping center, let's say,

one of the most useful things is to know your current location in relation to this map.

You're looking for the "You are here" symbol.

Websites can really benefit from such indicators as well.

In your navigation, you should highlight the link of

this section that the visitor is currently on.

In this wireframe, you can see that we are currently in

the About section since that link in the primary navigation is highlighted.

Furthermore, you also see that we are on the Our Team page in

the secondary menu since that link is also differently formatted from the rest.

Let me quickly emphasize an important points.

You might argue that a user will have click the About link just a few moments before,

so how could they already have forgotten what section they are in?

Well, let's assume two other scenarios.

One, they did a Google search and landed on

the About page as the first page they ever visited on your site.

It's helpful for them to see right away where they landed.

Scenario number two; they went to your site,

clicked on About and were distracted by an incoming email or chat,

then after half an hour,

they got back to their browser and have naturally forgotten where they were.

Again, nice to help them out by highlighting the place they're at.

Here are ways that our example sites deal with

this: by having a background color behind the active link,

or by lowering the opacity of all links except for the active link,

or by having the active link move down slightly to make it different from the rest.

I can only imagine that the word breadcrumbs was

inspired by the original Grimm's Fairy Tale of Hansel and Gretel.

In the story, when the siblings were left alone in the woods,

they tried to find their way home by looking for

the breadcrumbs they had strewn along their path earlier.

That didn't work out so well for them,

damn those birds who ate the bread,

but breadcrumbs for websites are a super helpful tool for your users.

They indicate the path that the user has

traveled along the information architecture of your site,

or if a user landed on this page some other way,

breadcrumbs communicate how this page fits in with the content hierarchy.

In this example, the breadcrumb situates the Our Team page as part of the About section,

which in turn can be accessed from the homepage,

and a user can click on any of the links in the trail to get back to a prior page.

So far, we've only looked at sites that had a secondary level,

maybe a tertiary level,

but you can probably imagine content structures that go a lot deeper.

The deeper your content structure,

the more helpful breadcrumbs become.

It's a good idea to give your users an easy way to get back to the homepage.

Now, it's a convention that the logo of the site will link back Home,

and on many sites,

that's the only link back to the homepage.

If you want to be more explicit about how to get back to the homepage,

you could add that as a link to the primary navigation.

But as I said, most sites get away without doing this,

plus if you have breadcrumbs,

you already have another way pointing back home.

Finally, one overarching strategy of helping your users to orient themselves is

to be consistent: Have your logo on every page of your site in the same location,

have your page title look consistent,

use a consistent way of indicating which link is currently active,

don't move or unexpectedly change your primary navigation from page to page.

Have breadcrumbs on every page and allow users to

link back Home by clicking your logo on every page.

I'll leave you with a little fun excursion to a website that showcases

the exact opposite of all the things we just discussed: the Situs events bridal.

It's kind of a piece of art actually.

A crazy wonderland of late 90s inspired web design,

but no clear navigational hierarchy or no hierarchy whatsoever.

A user can all but feel lost here.

Now, I'm not saying that this isn't intriguing or interesting,

it does bring a smile to my face but more in a "This is so bad,

it's really good" sort of way.

As a piece of user experience,

let's say, you're actually trying to buy a wedding gown,

it's an utter failure and can make us appreciate a well-designed usable websites.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play