Wireframing and Tool-Based Prototyping

Loading...

From the course by University of Minnesota

Prototyping and Design

176 ratings

University of Minnesota

Prototyping and Design

176 ratings

Course 3 of 5 in the Specialization User Interface Design

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.

From the lesson

Interface Prototyping Techniques

An introduction to prototyping, including paper and tool-based prototyping.

Prototyping: What, Why, and How16:02

Low-Fidelity Prototyping4:24

Paper Prototype Example3:56

Wireframing and Tool-Based Prototyping7:03

Physical Low Fidelity Prototyping7:16

Tool Example #1 (Pop)5:06

Tool Example #2 (Balsamiq)4:54

Limits of Prototyping4:22

Paper Prototyping Assignment Video2:26

Meet the Instructors

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

Hello, and welcome back.

Today, we'll be talking about wireframing and tool-based prototyping.

Now I hope at this point you've had a chance to listen to Heidi's lecture on low

fidelity prototyping, so you understand why it might be important.

It helps you get your design right before you put a lot of

time into building the design in any sort of a digital format.

But in addition to paper prototyping,

there are also tools that can help you prototype.

So when somebody's prototyping with paper,

a person or a researcher has to act as the computer or

the wizard to actually switch out different parts of the paper prototype.

And essentially, be the interactive portion that the person uses.

However, tools can actually help you link parts of an image or

wireframe together with hotspots, so that nobody has to act as the computer.

So the person can actually click through and

they'll be taken to different parts of your sketch or wire frame automatically.

Now, there are a lot of different tools that can help you with this.

Everything from PowerPoint,

which lets you just set up some hotspots or links between slides.

Two tools that are meant specifically for this purpose.

There a lot of these tools in fact too many listen.

I'm sure new ones are coming out all the time and they relative benefits and

draw backs.

We're not going to go through all of these tools here, but

I just want to introduce you to tool based prototyping and

then maybe we'll do a few examples, of tool just to get you started.

So if you watched the paper prototyping video,

you might know how to create a paper prototype.

Let's say, I wanted to create a movie recommender system,

that's someone that a group does a lot.

And I wanted it to be able to recommend movies based on a location that

you're going to.

So that you can learn more about a particular location.

So this is what a paper prototype might look like.

So I've specified how you would search for something,

I specified that I would have tabs.

I specified that there would be movies with information about each movie below.

And this is just on a piece of paper,

and it's just a regular paper prototype that somebody may be

able to point to an area in order to transition between different screens.

Now here's what that same prototype would look like as a wireframe.

So this is a wireframe done in Balsamiq, so as you see,

it's still fairly underspecified.

So I don't have specific images to represent each movie,

I just kind of have an x for that.

And I just have something that says, movie info,

rather than actual movies and titles.

But different areas of the interface are specified, and

in a tool like Balsamiq I would be able to link.

Let say, the category tab or the recommended for

you tab to another interface.

Have a percentage rack with it and when they click on that hotspot,

iIt will automatically take them to that new wireframe.

I can also get even higher fidelity.

So here's the same idea in PowerPoint.

So this is not actually something that's functional, but

what I did is I took images, I created the tabs.

Then I took images off of the Internet and I assembled them in the way

that looks like the type of interface that I'm trying to achieve.

So here you can actually see the actual movies, and

it actually looks the way the real interface might look.

Now there's benefits and costs of doing it this way.

So the positives of doing tool-based prototyping is that you don't need

a wizard to actually transition between slides.

So this can help you get more accurate visibility metrics.

Because as somebody is actually clicking through you can see for example,

if they get confused.

You can tell more or less how long it will take them to do a specific task,

so you get kind of these more specific visibility metrics.

Now one of the positives is that you have to get more specific about the features

and the layout.

So in the first interface here, I was pretty sketchy.

I didn't really think about how many movies would be displayed, I didn't think

about what kind of information would be displayed about each movie.

I didn't even specify all the tabs yet, but

as I got to the really specific interface a lot of things are decided.

Things like the color of the toolbar, how many movies are displayed on each line,

what kind of information would I be displaying about each movie.

And that could be beneficial because it could help you get feedback on each of

those features.

Now on the other hand, there are some drawbacks.

So one of the things is it may give you feedback at the wrong level.

So again, if we look at this interface here, maybe talking to users,

they would say, wow, I really don't like the red toolbar.

The red toolbar doesn't look nice,

I don't think that is something that I want to see, I'd rather see blue.

And maybe you're looking for feedback at that level, but

chances are when you're showing a low fidelity prototype.

You're more interesting and finding out would people want to

use a service like this, what ways could it be useful to them?

What kind of features would they want in this new recommenders system and

beyond destination recommendations?

And if they're so focused on maybe the specific movies you recommended,

the specific information you're showing about each movie,

the color of the tool bar, things like that.

They may not actually give you feedback at the right level.

So there's kind of a cost of going too high fidelity too early.

The other thing, and this is a real story, is that if you're showing this to

a customer, they may actually think that the entire prototype is done.

So for example, if you were hired to make a movie recommender system like this.

And you delivered this PowerPoint prototype that can be seen on an iPad, and

they could actually click through.

And it might not have all the features yet, but

it actually let's them move through the interface.

The customer may actually think wow, this is great you are basically done with it.

Eventhough you might still have maybe years of work to do on the back end of

the system.

On actually getting fully functional front end of the system and

maybe developing these algorithms for recommendations.

But now customer thinks, it's done or it's 90% done and

they are not willing to commit anymore researches for the project, for example.

Because they are thinking well you had it done last week

why are you still working on this?

So that can definitely be a cost of providing an interface that's too

high fidelity.

And lastly, while this was also a positive,

it's a drawback that you have to get more specific about features and layout.

Because you may not have made those decisions yet, or maybe those decisions

aren't salient at your part of, the point in the design process.

So really, I'd suggest in taking a careful look at the kinds of feedback you want to

get from your users and whether a tool base for a typing approach is right for

your stage.

Now, if you stick around for future videos will actually give you a few

brief examples and demos of two particular tools to use.

One is the POP app that stands for

I think prototyping on paper app that lets you create a paper prototype that

somebody can navigate through their phone or iPad, I'm sorry or tablet.

And the other one will work through it's Balsamiq Mockup

which is another wire framing tool mostly used for

large scale things like web pages.

And we saw one example of it here, but

I'll actually show you how to work through one.

So I hope you stick around and watch those videos as well.

Thank you very much.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play