Miller's Home Page
(Site Map & Search too!)		 Workshop Materials Design Talk Video Gallery
References Personal Page Photo Galleries
[ Index ]  [ SIGCHI ]  [ 6th WWW ]  [ Fed Web '97 ]
[ 6th WWW ]  [ Position Paper ]  [ Instructions ]  [ Photo Galleries ]  [ Report ]

Workshop Directions (and Timeline)

9:00 am - 9:10 - Getting Started
Get settled, add participants names to the "wall" to help form groups. Each person will list their name and up to four "talents" that could be applicable in web design.

9:10 - 9:30 - Level Setting

We will be taking static pictures and some video of the process throughout the day to help document the sessions.
Don't be shy.
Make your opinions known!


9:30 - 9:45 - First Design Challenge (Multiple Item Selection)
A United Nations Simulation web site allows for the user to simulate negotiating with politicians from all over the world. There is a list of all 177 countries in the world from which the user can choose to bring together a discussion group to negotiate tariffs on rice and wheat. A difficult interface challenge is how do we provide the user with the ability to select 6 countries from the entire list.

A multiple pop down selection is inappropriate because the user is never quite sure of which modifier key to use and the list is a formidable list to scroll through. A multiple selection box is inappropriate because of the same reasons and, in addition, the user's previously selected choices become occluded as the user scrolls down the list.

If this was a typical software project, we would just provide a scrolling selection list and allow the user to drag selected choices into a "to negotiate with" box. Although this solution might be done using JavaScript, is it indeed the best solution? Most importantly, is this solution cross-platform and will it work on most browsers? BE CREATIVE! Don't constrain yourself, come up with new ways of solving the problem, even if it would be a lousy design, just throw it out there, it may get you to a good solution.

Applicability - Large lists, shopping carts, multiple selections, creating a menu of items, ordering many small items.

9:45 - 10:15 - Task Analysis
Within your group you will break down the task into a set of steps. The implementation does matter here, so if you have multiple methods for implementing a possible solution, do the task analysis for them all. Put each task flow on a large white note card. List each function.
Note: Normally one would have time to do the following as part of a "robust" task analysis
  1. Do the Big Picture - How does this fit into the whole system
  2. Create a current flow - How the process is done now, possibly using a traditional GUI or by hand (can skip, otherwise use Yellow Cards)
  3. Create an ideal (Blue Sky) flow -- What would the best possible way of doing this task given no constraints (Blue Cards)
  4. Realistic flow - what is can be implemented given the target system (White cards)

The Task Analysis --

Trigger
What makes you need this part of the system?
Process
What activities need to be done to complete this action. Simple steps and flow to show what an user would have to do to complete this action.
Results
How do we know were done? What is the outcome of using this system?

We are looking for simple task flows for simple processes. In a large system, when you have many pieces, you would look at the current flow, consider the results of a business process engineering analysis, possibly eliminate certain steps and use technology to smooth out the process. For our purposes, we are looking at a specific task and are not concerning ourselves the large processes. Hence, we can skip the "writing" of the current flow, and possibly just "state" the Blue Sky solution in a sentence or two, or a simple task flow. Then quickly move onto a realistic flow. Different groups will have different "Blue Sky" solutions.

10:15 - 10:30 - Define Challenges & Requirements
Every solution has its problems. Take a pink Post-it and write down a problem with the design. Try to find the faults in your own work. Use one Post-it for every problem and attach the Post-it to the white note card. A problem might be "It will be really slow to call the server 5 times to do this", or "You cannot select a country more than once". This is where you would define your functional requirements. These can be considered constraints for the developers, since a design requirement should be followed by a developer. We are combining requirements and challenges in the same step to help speed up our process. Challenges can stem from requirements and visa versa.

10:30 - 10:40 - Break

10:40 - 10:50 - Known Solutions
Using blue Post-its to figure out possible solutions for each pink Post-it, even if the solution requires changing the implementation or change the flow of the task analysis.

10:50 - 11:00 - Define Impossibles and Desirables

Once you have functional requirements, have the developers (red stickers) and designers (green stickers) place stickers on each of the functional requirements. Then you can compare the need with the difficultly in implementing. The best is to have a designer's "Must Have" with a developers "Easy to Implement."

Designers
  • Must Have (H)
  • Nice to Have (M)
  • Not Necessary (L)
Developers
  • Hard to Do (H)
  • Medium Difficulty (M)
  • Easy to Do (L)

11:00 - 11:40 - Design!
During the design phase we will use a Post-it note prototyping process to come up with a scenario which best represents your task analysis. Use the "Browser Window" pages as a backdrop, the long thin Post-it notes to make up frames or scroll bars, and the other Post-it notes to design buttons, tables and other widgets. Don't write directly on the "Browser Window" page as that makes it difficult to edit. Use the Post-it notes which allow you to make changes quickly. Use the long thin post to "point" from a button to the next page creating a layout of "Browser Window" pages to reflect the changes.
Continue to iterate on your design with your "user." If you abandon one prototype for another, don't destroy it but set it aside for the next phase of workshop.

11:40 - 12:00 - Document Advantages and Disadvantages
Using a single large white note card, divide it lengthwise into two columns - for advantages and disadvantages. Write down remaining issues, problems, benefits, etc. . .that you see with the design on small Post-it and place them into one of the two columns.
When you are done, try to arrange them in order of importance. If you want to use a "method" for this, let each person (in private) take 100 points and divide their points up among the advantages. Then total the points for each item and place the point totals on the cards to arrange them. Then do the same thing for the disadvantages. This should promote some healthy discussions.

12:00 - 12:30 - Presentations and Votes
Each group will be given a few minutes to take the rest of the participants through the task by showing the prototype, and walking us through it. The "user" should present their findings and tell the group about the top 3 advantages and disadvantage for this method over any other designs that were considered and discarded.
Once all groups have presented, the designs will be placed on the walls so that all can go back and review them later. Participants from other groups are encouraged to post "light blue" stickies on other peoples prototype to express their comments, positions, problems, or advantages that were not expressed in the prototypes.

12:30 - Task Complete!
Post solutions on the wall, allowing users to add comments and suggestions as they wish during the day.

12:30-2:00 - Lunch Break
People can view the morning's work during lunch, make more suggestions, change their votes, etc.

2:00 - 5:15 - Design Challenge #2

5:15 - 5:30 - Wrap-up Session.
During the wrap-up session we will address a few issues;

Main Menu


Comments: Happily Received!
Page: https://www.richardhmiller.com/workshops/w6_workshop_instructions.html
Updated: 01.30.1998