Module 06: Maps and Flows

Post on 23-Jan-2015

151 views 0 download

description

Module 06 in the one-week intensive for community college instructors, offered by MPICT.org.

Transcript of Module 06: Maps and Flows

Sorting, Maps, Flows

We’ve done user research. !

We collected observations and information. !

We may have found some insight (though we always welcome more). !

Now we start to organize it.

Sorting, Maps, Flows

Any engineers? Mapmakers? Did you come here from far away? !

Tell us how you got here. !

Tell us how programming logic works. !

How does one reach one’s goal?

Card Sorting

Card Sorting

— An organizing exercise (with cards, sure). !— To gain insight. Does not provide "answer" . The average of all results is not the "right" information architecture (technically, this is a folksonomy). !

Card Sorting

— Two types: open and closed !— Open: Piles/groups emerge as participants place cards down !— Closed: Grouped according to given categories

Card Sorting

How to explain a card sort !— "These are all topics that will appear on a site." !— "Please group things you’d expect to find together." !— "It’s okay to make subgroups if that seems like the right thing to do." !

Card Sorting

Let’s take a few minutes. What have we learned from our research that we could organize? What visitors need to know? Want to do?

Site Maps

Site Maps

A site map shows the overall structure and relationships between items on a website. !For large sites a site map may document patterns of organization, instead of accounting for every single page. !

Site Maps

A site map helps guide navigation design, site planning, content development, and migration. !Site maps tend to be good for hierarchical content structures and less effective for visualizing very large sites, facets, or tags.

Flows

Flows

A flow documents how a user moves through an application or website !

Including the different states or branches the user might access. !

Flows

Ideally, a process flow will show all the possible paths a user might take, including errors, to help ensure the system is designed for all possible paths. !Process flows can also be used to analyze existing applications to identify bottlenecks, cul–de–sacs, early exit points, and other potential problems. !(Note: You may see "$var flow" terminology.)

Flows

Card sorting: the dots !

Flows: the lines connecting the dots

Flows

It’s important to understand exactly how, step by step, users can go through the site and how to get users back on track if they’ve deviated. !This is true for both implementers and designers.

Flows

http://kevinmattice.com/processflows.html

Flows

http://www.lightpetal.com/ux-process-artefacts/

Flows

Flows

Do we have any known actions our users might want or need to take? Any critical information they’ll need to find? Let’s sketch out some flows.

Flows

Any insights? (Remember to take photos of your work!)

Next up:

Wireframes

ddt@twoangstroms.com

twitter web