user prototyping @ rmcad @rmcad-user-prototyping-blog - Tumblr Blog

for 4/12 – final!

Code, code, code!

The goal for 11/27 is to have a clickable HTML5 prototype (built with Foundation) that enables you to conduct usability testing for at least one taskflow.

Create a bit.ly link to your prototype and email it to me.

Complete your process book.

1. You should already have

pitch

taskflow

photos of your paper prototype

testing plan

documentation from testing (including an action photo)

testing findings and reflections

2. Now add

side-by-side layout of your mock-ups, HTML5 prototype, and a screenshot of your code (starting with <body>)

table of contents, page numbers, design elements

3. In class you will

add an overall all reflection on the course—what you learned, what you enjoyed, what was challenging, how this will influence your process going forward.

add finishing touches

export to PDF and submit to me

#wk14 #usability testing #process book #Final presentation

for wk11 (3/22)

Get your grid (box) layouts to 85% to 90% solidified.

Begin adding content: text, images, etc.

See these resources:

W3schools on HTML5 and CSS

Foundation docs

Codecademy*

Ping with any questions.

*Create an account so you can choose HTML not Javascript.

#wk11 #html

for wk10 (3/15)

Flex your HTML5 markup muscles with Foundation and TextWrangler.

Aim to create just the grid for 3 screens you are prototyping.

Don't worry about content just yet.

Be nice to your grey matter; don't try to code it all in once. Work on your markup in chunks.

Remember, when your code breaks, make sure:

your file structure is in tact and that the document you're editing isn't misplaced.

the URL in the browser points to the HTML5 document you're actually editing.

the head and 'foot' of the document you are editing have the necessary CSS and Javascript snippets. See your example.html file.

your markup is well formed. Validate your markup here.

If you're still stuck, email me your code, a screenshot from the browser, and a brief description of how you want it to look and what's not working.

#wk10 #Foundation framework #html5 #markup

for wk08 (3/1)

Read Boxes and Arrows on PDF prototypes.

Review Prototyping chapter 7 – “Powerpoint and Keynote". (Zaki Warfel)

Write a reflective overview of your prototyping process thus far

For each testing participant, summarize feedback you received: What worked? What needs improvement? What recommendations did you receive? (50–100 words/ participant)

What revisions will you make? What revisions won't you make, and why? (100–150w)

Summarize your overall process so far: (150–200 words) concept development & validation, paper prototyping, and usability testing process.

Based on the above, refine the pitch for your app/ interface: What is it? Whom is it for? What does it do/ help the user do? Why should I/ the user care?

Compile a process document*; export as PDF. Include the following:

boilerplate** & page numbers

table of contents

your pitch (#3 above)

your taskflow

your scanned sketches

any digital artifacts you created (Illustrator, Photoshop, Fireworks, etc.)

your reflective overview (#1 above)

your testing script

your testing summary (#2 above)

any other documentation (photos, video stills)

*Don't worry about a full design.

**Boilerplate includes document title (e.g. 'Mid-project process book' or '[app name] process'), your name, course name, instructor name, school and semester/ date.

#wk08 #processbook #midterm #reflective response

for wk07 (2/22)

Review Prototyping ch. 12 (Zaki Warfel)

Finish refining your wireframes based on feedback you received last class.

Annotate your wireframes. You want to be clear about how each functional element of your interface behaves.

Incorporate interactive elements into your paper prototype using vellum, post-its, index cards, slits made with an X-acto, etc. See section entitled 'Progressive Paper Prototyping' in chapter 6 of Prototyping. (Zaki Warfel)

Create a usability testing plan*

Who is your audience? How are you going to capture user responses?—video? audio? photos? Be sure to take notes!

Introduce yourself to your (potential) participant and ask for his/her time.

You may want to ask the tester to share an experience related to the goal of your interface.

Introduce the interface (homescreen) and its purpose.

Bring your participant into the interface’s ‘headspace’ by painting a picture, a scenario.

Verbally walk them through each step/ screen. Make sure that you word your questions in such a way that it asks the test participant to figure out the action that will take them to the next step/ screen in your given taskflow.

Ask the participant to “think aloud” as they follow your prompts and answer your questions.

A few example prompts:

What option would enable you to do X?

What would you select to view Y?

Where would you find Z?

*Refer to chapter 12 sections “Design Test Scenarios” and “Test Your Prototype”.

#wk07 #paper prototyping #usability testing #annotated wireframes

for wk06 (2/15)

Read Prototyping (Zaki Warfel):

ch. 3: You can skim, but grok the 5 purposes for prototyping.

ch. 4: Pay special attention to principles 5 through 8.

ch. 6: Start with the section entitled 'Progressive Paper Prototyping'.

Create tidy, polished wireframes:

Looking at your taskflow, decide on a single user path you would like to prototype and test.

Create one wireframe for each screen necessary to complete this single path in your taskflow. That is, you do not need to create screens for every possible user path, just the one you are going to test.

Screen size should be to-scale for mobile interfaces, or very close to scale for desktop web interfaces.

If you sketch your wires so long as they are tidy, readable, and legible.

If you render your wires digitally, use greyscale and at most one color.

Scan or print your wires.

Use tracing paper to annotate your wireframes:

Describe user actions.

Describe system response to user actions.

#wireframes #wk06 #annotations

for wk05 (2/8)

Read

Designing Screens Using Cores and Paths* (Boxes and Arrows)

Communicating Design, ch. 7 “Wireframes”** (Dan Brown)

*Boxes and Arrows uses the term 'core' much in the same way that 37signals uses the term 'epicenter', so you've already completed step 1 of this process. Also, here's a handy worksheet.

**See PDF in Dropbox folder 'for_wk04'.

Sketch UI screens (wireframes) translated from the steps of your taskflow (specific use case)

In your process, be sure to

refer to the readings (above) first.

determine whether you are designing for desktop or mobile web and sketch your UI screens in proportion to this choice.

think about how to chunk your content in a way that supports your user's taskflow.

think about large containers for your content (screen), then medium-sized containers (screen sections), then smaller content chunks. (Treat your content like Russian nesting dolls.)

focus on layout and visual hierarchy, not so much on language, and not at all on visual design.

Here are some helpful resources:

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

printable wireframe sketching templates!

#wk05 #sketching #Wireframes

for wk04 (2/1)

Talk to potential users of your interface:

Why do they (or would they) engage in the process? What is the value of the process to them?

How do they carry out the process? What activities and tasks do they perform?

Document your findings.

Articulate your interface's epicenter:

Ground your epicenter in the user input outlined above.

Describe 2–3 core features that support user goals and activities.

Be clear and concise (max 150 words to articulate your epicenter).

Revise and refine your your taskflows:

Derive your taskflows from your user input and core features (above).

Determine: Does each feature need a separate taskflow?

Use verbs to describe tasks.

Use a visual language to describe nuances of your taskflows. (Refer to Communicating Design chapter 6: Flow Charts.)

Place your user research findings, epicenter description, and taskflows in a tidy document. Content must be legible and readable.

Export as PDF and print. Be prepared for crit on Friday morning.

#taskflows #epicenter design #qualitative research #wk04

for wk03 (1/25)

Read*

chapter 1 of About Face 3

chapter 6 of Communicating Design

"Omit the Unimportant" (Rams), if you have not already done so

*See Dropbox for PDFs.

Sketch a taskflow representing the steps, decisions, and any filters involved in the process you are prototyping.

Use a pen or sharpie. Do not use digital tools.

Refer to Communicating Design chapter 6 for explanation on flowcharts, the industry-standard way of representing taskflows.

Represent a flow of actions, not an organization of information.

Prepare to share and critique your taskflows in class.

#taskflows

for wk02 (1/18)

Acquire

the required text

the required materials—See the course syllabus.

Read chapters

1 of About Face 3—See Dropbox for PDF.

1 of Prototyping by Todd Zaki-Warfel

"Omit the Unimportant" by Dieter Rams

Prepare

a pitch for the process you want to prototype—who it is for, why it is valuable to them, how it is useful (typed, max 50 words)

research on whether a similar interface exists, and if so, how yours will be different and/ or better

a hand-written sequence of steps outlining the process your want to translate into an interface

We will discuss your ideas at the beginning of next class.

for wk14—last week! (12/4)

Create a bit.ly link to your prototype and email it to me.

Complete your process book.

1. You should already have

pitch

taskflow

photos of your paper prototype

testing plan

documentation from testing

findings and reflections

2. Now add:

side-by-side layout of your mock-ups, HTML5 prototype, and a screenshot of your code (starting with <body>)

an overall all reflection on the course—what you learned, what you enjoyed, what was challenging, how this will influence your process going forward.

#documentation

for wk11 (11/13)

Code, code, code!

The goal for 11/27 is to have a clickable HTML5 prototype (built with Foundation) that enables you to conduct usability testing for at least one taskflow.

#code #html5

for wk11 (11/6)

Continue reviewing the Foundation documentation.

Create 3 HTML wireframes of your interface with Foundation.*

If you need help troubleshooting code**:

Compress your whole folder into a ZIP file.

Take a screen shot of what you're seeing in your browser.

Email me—attaching 1 & 2—and describing what's not working and how you'd like it to work.

*Sketching is your friend!

**Feel free to find me in 223 Wednesday and Thursday.

#html #markup

for wk10 (10/30)

Download

TextWrangler (It's free!)

Foundation HTML5 framework

Review

W3schools on HTML5

Foundation documentation on the Grid

Muck around.

Get familiar with using TextWrangler. Save your file early on as .html!

Start figuring out your app's homepage grid.

How can the Foundation grid help you make a wireframe?

#html5 #markup #introduction

for wk09 (10/16)

Finish digitally rendering your prototype.

Create state changes on 3 different screens (pages) in Fireworks.

For Fireworks tutorials, see:

Prototyping, ch. 9

Lynda.com (You all have free access.)

Smashing Magazine

WebDesign Tuts

#prototyping #fireworks #state changes

for wk08 (10/16)

Revise your wireframes based on the feedback you received last week.

Create**

your prototype in digital format (Illustrator/ Photoshop/ InDesign), if you haven't already done so).

a click-through prototype for your taskflow (with either Keynote or Acrobat).

Read Prototyping ch. 9 (Zaki Warfel), "Fireworks".

**If you missed class,

review Prototyping ch. 7 – "Creating Interactive Prototypes with Powerpoint" [and Keynote] & Boxes and Arrows on PDF prototypes.

create 2 click-through prototypes with the "inClass_wk07" PNGs in Dropbox. Email your keynote file and your PDF to me.

#prototyping #revisions #click-through

for wk07 (10/9)

Write

a reflective overview (300–500 words) on your prototyping, concept validation, and usability testing process

a summary of feedback you received for each user: What worked? What needs improvement? What recommendations did you receive? What is your response to this feedback? What changes are you going to make?

a brief pitch for your app/ interface: What is it? Whom is it for? What does it do/ help the user do? Why should I/ the user care?

Compile a PDF with the following:

your pitch (#3 above)

your taskflow

your scanned sketches

any digital artifacts you created (Illustrator, Photoshop, Fireworks, etc.)

your reflective overview (#1 above)

your testing script

your testing summary (#2 above)

any other documentation (photos, video stills)

#documentation #reflection #usability testing #process

Trending Blogs

Recently Viewed Blogs

user prototyping @ rmcad