COAP:COAP-2170/week4: Difference between revisions

Revision as of 09:44, 4 April 2011

In week four we will focus on prototyping

(1) Introduction

A participatory design cycle

Short overview of Design and usability methods and techniques, e.g. where do usability testing, card sorting and prototyping fit in ?

Needs analysis and early design with focus group, personas and scenarios
- Conceptual Design in 2 Minutes (Nokia)
- Slides: Using Personas in User Experience Design, 2009, Charlotte Schwendeman and Kate Walton.

(2) Main activity: Early prototyping with wireframes

Creating Wireframes: Examples, Advice and Tips (10 minutes, YouTube). Also demonstrates the MockingBird online tool.

Justinmind propaganda video (3min, Vimeo). Demonstrates hi-fi protos.

Paper prototyping with post-its. We shall design a few webster pages and then move on to personal projects on Wednesday.

Administration:

Prototyping with wire framing software. We shall use Pencil project, "installed" on N:\Pencil. You need to install export templates (see below).

People with their own PC:
- Install Pencil Project on your Personal Computer (Win/Linux only). Use the standalone version. The Firefox extension won't work with FF 4.
- In addition, you will have to download an export style sheet from here. Remember where you saved the *.zip file.
- To install a template, open Pencil, then use menu Tools -> Manage Export Template ... and select the zip file you downloaded. The templates will be installed in your Windows profile.
- Mac users can go for trial versions of JustinMind or Balsamiq or use an online tool (see web wireframe for lists of software).

Due: Wednesday week 5 before class

Create a somewhat clickable wireframe for a web site project of your choice. If you wish, you can continue working for Webster, i.e. suggest an architecture for a new web site.
The wireframe must include at least the home page and two other pages.
Optional (if you aim for a high grade): Write a short report that outlines the purpose and the requirements of the web site. You may use the wireframe tool for this report, e.g. create for an example an "about the design page" that would include this kind of information.

Either upload file(s) or provide a URL that is accessible to me.
You can use any sort of web wireframe tool you like (including online tools), but I must be able to look at the result without having to install software. Most of these tools can export to HTML\

@@ Line 51: / Line 51: @@
 '''Due:''' Wednesday week 5 before class
-* Create a clickable wireframe for a web site project of your choice. If you wish, you can continue working for Webster, i.e. suggest an architecture for a new web site.
+; Task
+* Create a somewhat clickable wireframe for a web site project of your choice. If you wish, you can continue working for Webster, i.e. suggest an architecture for a new web site.
 * The wireframe must include at least the home page and two other pages.
-* Optional (if you aim for a high grade): Write a short report that outlines the purpose and the requirements of the web site. You may use the wireframe tool for this report, e.g. create for an example an "about page"
+* Optional (if you aim for a high grade): Write a short report that outlines the purpose and the requirements of the web site. You may use the wireframe tool for this report, e.g. create for an example an "about the design page" that would include this kind of information.
+; Submission and tools
+* Either upload file(s) or provide a URL that is accessible to me.
+* You can use any sort of [[web wireframe]] tool you like (including online tools), but I must be able to look at the result without having to install software. Most of these tools can export to HTML\