rmcad-interaction-design

[rmcad-interaction-design]

for Tu 3/19

See email entitled "For this afternoon/ Tuesday". Ping with any questions.

[rmcad-interaction-design]

for Tu 3/12

Look presentable for our client meeting. You should have a Google Calendar invitation with the details of our meeting. Please arrive promptly.

See the Google Doc for Tuesday's agenda.

Come prepared.

Turn in your printed process books.

[rmcad-interaction-design]

for Tu 3/5

Read

Style Tiles as a Web Design Process Tool

Our New Responsive Design Deliverable: The Style Prototype

For Tuesday, create

3–4 polished comps, excluding homescreen

3 homescreen comps: desktop, tablet, mobile (see responsive design here and here)

UI style guide with various functional elements (see links above)

[rmcad-interaction-design]

for Th 2/28

Read

Style Tiles as a Web Design Process Tool

Our New Responsive Design Deliverable: The Style Prototype

Begin refining your mockups based on feedback you received in class. For Tuesday, create

3–4 polished comps, excluding homescreen

3 homescreen comps: desktop, tablet, mobile

UI style guide with various functional elements

Bring printouts of your project 2 deliverables to date so we can discuss your process books.

[rmcad-interaction-design]

for Tu 2/26

Read about detailed design and the aesthetics of interaction:

Seductive Interaction Design* pp. 10b–24, 33 (Anderson)

Designing for the Digital Age pp. 551–556a, 571–579a (Goodwin)

*See Dropbox. Create detailed look+feel mockups** of your redesigned interface: 1. Make any necessary changes to your wireframes. 2. Choose two experience attributes (core values) from the list we brainstormed:

streamlined

approachable

trustworthy

effective

3. For each chosen experience attribute, design the look+feel for 2–3 screens of your interface: a screen containing a form, one containing a date+time picker, and—if you are feeling ambitious—the home screen.

Use your wireframes as the basis for your UI.

You should create two sets of mockups: the same 2 or 3 screens with 2 different look+feels.

Focus on one experience attribute at a time. Do not combine them.

** See PatternTap for awesome detailed UI design examples.

[rmcad-interaction-design]

for Th 2/21

Write a synopsis of the usability testing you conducted today:

two paragraphs on your process—what worked and what didn't

two to three paragraphs on the feedback you received—positive, neutral, and negative

A bulleted list (in full sentences) of changes you will make based on the feedback you received.

Read 'Developing Design Principles' (Wroblewski).

Review chapter 18 of Designing for the Digital Age. (Goodwin)

[rmcad-interaction-design]

for Tu 2/19

Refine your wireframes. The level of fidelity—both for content and how you render it—should be testable.

Complete your annotations. See here for a good example.

Create a paper prototype. Refer to the excerpt from Prototyping chapter 6 (Dropbox).

Read about usability testing at the end of chapter 23 in Designing for the Digital Age. A List Apart also has a good explanation on the value and process of usability testing here.

Write your testing plan and place it in a document:

1. Introduce yourself and the service.

2. Use the beginning of the scenario you wrote to bring your test participant into the service headspace and to introduce the user goal.

3. Guide your test participant through each step in the service process without giving them the answer.

4. Keep the testing process primarily focused on the taskflow you are testing. Solicit other feedback at the end.

[rmcad-interaction-design]

for Th 2/14

Review Designing for the Digital Age chapter 15. Familiiarize yourself 

Print, review, and critique-with-a-pen your peer's wireframes, using the following guidelines:

Does the overall page flow support the overall taskflow?

Does each page layout support the current user task?

Does the page hierarchy (type, value, scale), support the current user task?

Are both the current step and next step obvious?

Where are there gaps (if any) in the wireframes as UI storyboard?

We will take time for you to review your peer feedback during class Tuesday.

[rmcad-interaction-design]

for Tu 2/12

Email me your work so far.

Read Communicating Design chapter 6, 'Wireframes' (Brown).

Wireframe your redesign of the DMV 'Renew Driver's License' experience, supporting your scenario and taskflow. Include annotations and any digital interactions at the DMV branch.

Then read Designing for the Digital Age chapter 18. (Goodwin)

Export your wireframes as PDF

Print 3–5 key screens.

Here are some helpful resources:

examples here and here of the level of fidelity you’re aiming for

printable wireframe sketching templates!

[rmcad-interaction-design]

for Th 2/7

Review Designing for the Digital Age pp. 456-460 (Goodwin)

Read 'Designing Screens Using Cores and Paths' (Boxes and Arrows)

Consider:

What is the core of the DMV redesign?

What are the inward paths?

What are the outward paths?

Translate your user scenario into a sketched UI storyboard.*

Refer to Designing for the Digital Age pp. 456-460 (Goodwin)

Use broad pen tips and a few colors.

Each panel should be no larger than a post-it note.

Annotate functional UI elements. (Use arrows and label them. See book example.)

Each panel should represent the UI state that corresponds to one step in the process.

That step (from your user scenario) is the caption for the panel.

Enumerate either the panels or caption.

*The scenario you wrote in pairs. The UI storyboard you are each sketching individually.

[rmcad-interaction-design]

for Tu (2/5)

Read Designing for the Digital Age chapters 14 & 16 (Goodwin):

You may skim the Project Management sections (pp 385b-389 and 473b-476a)

Pay special attention to sections that discuss principles, process, roles, and challenges.

Complete the redesign of the key path (taskflow) for Renewing a Driver's License ('future now' not 'future next').

Create a vector version of the one we generated in class Thursday.

Sketch out the branch portion of the key path with (at minimum) 1. the taskflow mapped out and 2. requirements codes (from the Google doc) annotated where they apply in the taskflow.

Each requirement code should be annotated at least once in the whole key path.

Bring these to class and pin them up by 3:10 Tuesday.

Also bring your sketching implements (to every class). 

[rmcad-interaction-design]

for Th 1/31

Read

The Design of Design Studio

Bridging the Gap with Requirements Definition

Collaboratively create a single Requirements Document:

Compile each of your requirements in a Google doc.

Condense redundant requirements into single bullet points.

Use specific language to describe user needs in context (when + where) by using concrete nouns (what) and vivid verbs (how) .

Don't worry about design. Be sure to spellcheck and proofread!

Print by 3:10 Thursday.

[rmcad-interaction-design]

for Tu 1/29

Read

Thoughts on Interaction Design chapter 2: 'Managing Complexity' (Jon Kolko)

Better together; the practice of successful creative collaboration (Cooper Journal)

Introduction to Design Studio Methodology (UX Mag)

^^ Get it. Grok it.

Refine your taskflows. (Refer to Communicating Design ch. 6 in Dropbox.)

Complete your heuristic evaluation of the DMV website and Lakewood branch. 

Include an overview: What can the user do here? Does the interface support user goals?

Include strengths, weaknesses, opportunities (See whiteboard photo in Dropbox for what we discussed in class.)

Include your as-is taskflows

Include any explanatory or descriptive sketches

Should be more than one page.

Print and export as PDF.

Bring your docs and sketching implements to class Tuesday. We are going to do some rapid ideation, visualization and feedback. Get ready!

[rmcad-interaction-design]

for Th 1/24

Read

A Guide to Heuristic Website Reviews (Smashing Mag)

What You Really Get from a Heuristic Evaluation (UX Mag)

Review 10 Usability Heuristics (Nielsen Norman Group)

Conduct and document your heuristic evaluation of the Denver DMV website. Be sure to include

a high-level overview: What can a user do on the website? To what extent does the website support each goal?

high-level taskflows for each goal: register a vehicle (or renew registration), get/renew driver's license, submit a change of address, get/transfer vehicle title, find information about DMV services and operation

a high-level evaluation of the website for each of Nielsen's 10 Usability Heuristics

Print your heuristic evaluation document.

Be ready to go to the DMV on Thursday at the start of class.

[rmcad-interaction-design]

for Tu 1/22

Create your SPIME poster. Pay attention to visual hierarchy.

Be sure to include

SPIME name

SPIME tagline

pitch (75–100 words: what is it, whom is it for, why is it valuable)

your storyboard!

your interaction model! (taskflow with relevant data attached to each task)

your object/ interface schematic!

boilerplate: your name, class name, instructor, semester/ date

Print your poster before the start of class Tuesday.

[rmcad-interaction-design]

for 1/17

Create your SPIME schematic.

This is a representation of the physical embodiment of your SPIME.

Use annotations where necessary.

Refine your storyboard and interaction model based on feedback you received in class.

Storyboard should depict a use case, in narrative form, of your SPIME from the perspective of the user.

Interaction model should represent the taskflow underlying the use case depicted in your storyboard. Attached to each discrete task in your taskflow, show the data necessary for carrying out of each task.

Lay out and print a draft poster (can be printed on the plotter) with the following criteria:

title

subtitle/ tagline

a descriptive pitch: what it does, who it's for, why it's useful (75–100 words)

your storyboard

your interaction model

[rmcad-interaction-design]

for 1/15

Acquire

the required text

the required materials (See the course syllabus.)

Read "States of Design 04: Critical Design" by Antonelli (see Dropbox)

What is critical design?

What is its purpose?

How are SPIMEs a form of critical design?

What other examples of critical design have you seen?

Refine your storyboards based on feedback you received in class. Storyboards should

tell the story of your target user/ persona using your SPIME in your chosen context.

occur in a specific place over a certain period of time.

show what data comprises your SPIME and the interactive relationship between the  your user, the SPIME, and the data. (Is the data about the user, about the surrounding environment, or both?)

Create

an interaction model representing the taskflow that occurs in your storyboard as well as any related tasks you think are pertinent. Each task should correspond to a user-system interaction. (See second image below.)

a simple 11 x 17" layout for your storyboard and interaction model.

Print the 11 x 17" document and be ready to share and critique at the start of class Tuesday.