Timeline for the Workshop

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

• Who we Are (2 minutes)
Richard Miller
Keith Rettig
• Introduction & Our Position (5 minutes)

What the workshop really is doing.

We are not here to give you the answers, guess what? - we don't have them. We are here to facilitate the process and learn with you. Today is about learning from each other and EVERYTHING we do today is from a team perspective. The entire workshop is the team, please remember that for latter.

We are very excited about all of the participants and the quality of their experiences , we feel the sum of our intelligence is greater than the parts and that alone will contribute to a very interesting day. We would like to say that everyone's contributions as design statements were fantastic.  Although we could not fit every idea into today's class, we do think that what you learn today can help you solve some of your design problems you are having back at the home office

The opportunities to spend time with other designers and "think" are limited in most organizations, and hence we want to provide a forum to spend a little time thinking about some "simple" design problems.

No one is safe! We want and require everyone to participate.

We will use pieces of Bellcore's "Bridge" process. We are not doing the "real" process, but taking small pieces of the full UCD process to gather the task analysis and will use Post-it note prototyping to convey design solutions. Some of you will be familar with some of the steps we follow in class, in fact we think some of you are more familar with task analysis or systems analysis than us, and certainly some of you are more experienced developers. That is great, we want you to contribute to the team.

• Goals of the Workshop (5 minutes)
1. To provide a forum for designers to think about pure design issues
2. To expand ones design models by looking at other designers work
3. To lay the groundwork for possible future enhancements to HTML and other core web technologies.
4. Do you have Goals?!!!!
• General Constraints (for EACH problem, show during the explanation of the GUI design step)
• Open floor to discussion - consider issues like these when working on your designs.
• Use current 3.2 HTML Netscape/IE extensions, with use of JavaScript. Allow Java?
• Expect ??? pixels x ??? pixels. (Let's fill this in)
• 256 color SVGA
• 28.8 or direct connect? (Probably consider both users)
• Macintosh & Windows Support (UNIX? LINUX?)
• General Consensus on Constraints
• Creative Exercise
• We want peope to be creative and think out of the box. How do two people share an Orange?
• How many lines do you take to connect the dots.
• Quick Review of Today's Agenda (Planned)
• 9:00 - 9:30 - Introduction
• 9:30 - 10:30 - Design Challenge #1
• 10:30 - 1045 - Break
• 10:45 -12:00 - Finish Design Challenge #1
• 12:30 - 2:00 - Lunch (come back at 1:40 if you have any new design issues)
• 2:00 - 3:30 - Design Challenge #2
• 3:30 - 3:45 - Break
• 3:45 - 5:00 - Finish Design Challenge #2
• 5:00 - 5:00pm - Wrap-up
• We can go late!
Roles
Every individual brings a specific set of talents to the workshop. Small workgroups will be formed to work on the design problems. The groups were formed to spread out various talents to give each group diversity. Groups will contain from 4 to 5 people. In doing so, folks will take on the role of lead designer, one of lead developer, and one as an user. Additional individuals in the group can assume the role of a marketer, additional designer, graphic artist, developer, or user. Groups and roles may change between design problems.

 

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

---

9:30 - 9:35 - First Design Challenge (Multiple Item Selection)

This problem concerns creating a simulation of a United Nations tariff negotiation session. The scenario involves creating a web site for bringing politicians from all over the world together to negotiate tariffs on rice and wheat. The user had to first setup a  roundtable discussion to bring together the six countries that they feel would have the biggest impact on tariffs. The end-user is at liberty to choose any counties they wish, you as designers do not care what six countries are selected. The purpose of the interface is to select six countries from the larger list of the 182 countries in the world.

The challenge is to provide end-users the ability to select six countries from the entire set with the following usability requirements; the user should always know 1) what countries are selected, 2) which countries remain available, 3) how many countries remain to be selected, and 4) that a country can only be selected once.  Once the user is happy with their selections, they can then commit to starting the rest of the simulation. Your task is to build the part of the interface only up to that point in the game.

 

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:35 - 10:00 - 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 with 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:00 - 10:15 - 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 vice versa.

10:15 - 10:30 - 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:30 - 10:45 - Break

10:45 - 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:45 - 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:45 - 12:00 User Testing

Share one user with the next group, and with as little fanfair as possible, let the user walk through the application and use verbal protocal to solicit input. One group member should scribe all the user comments and NOT interject anything into the session, while another member of the group handles all interactions with the user. Write down their problems that you and other members see with the usage of the prototype and then additionally write down any specific advantages or disadvantages they see on a large white note card (divided into two columns). Reference these issues by putting (user) after the item. Later we will add your own thoughts to this card.

12:00 - 12:15 - Document Advantages and Disadvantages and make any revisions you see necessary

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. Make any changes you like based on all of these items.

12:15 - 12:30 - Presentations

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 people's prototypes 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:30 - Design Challenge #2

2:00 - 2:10 - Second Design Challenge (Interactive Nested Lists)

Your team has been assigned the task of creating a library web-site for a video game design company based in Atlanta, GA. The library consists of a huge media repository (over 1 million objects in various formats, such as audio clips, mpeg video, clip art, animations, director storyboards, etc…).

The president of the company has asked you to assist in the organization of the repository by creating a browsing interface via the web for the company's creatives. Another group will provide a search interface in a few months based on some new intelligent query software, but your site needs to be up quickly and you can’t wait for them. You will see many items that have been classified into categories and multiple levels of subcategories. Also consider that ‘leaves’ can appear at the same level as ‘branches.'

The challenge is to create an interface that gives these creatives in the company an easy-to-use browsing model so that they can find what they need, not get lost in the midst of the huge collection, provide mechanisms to keep track of interesting pieces of content, and to create a group of items to “check out” of the library.

There are some things you should know about the company.
1) The president is Israeli and plans on opening other design centers all over the world in the next few years
2) For tracking purposes (so that certain elements don’t get reused too often, and for charging back projects) the elements a creative checks out need to be tracked by the system.
3) Some of the creatives work remotely and are free to use whatever browser they want and use many different types of computers.
4) The boss hates getting lost on a web-site, he sometimes gets lost on the way to work, but knows he is ok when he sees the ‘Big Chicken’. So besides pleasing the end user you need to please the boss.
 

2:10 - 2:45 - Task Analysis

2:45 - 3:00 - Define Challenges & Requirements

3:00 - 3:15 - Known Solutions

3:15 - 3:30 - Define Impossibles and Desirables

3:30 - 3:45 - Break

3:45 - 4:30 - Design!

4:30 - 4:45 - Document Advantages and Disadvantages

4:45 - 5:00 - Group Presentations

• Spend some time to review the designs and add additional comments
• Did we accomplish our goals?
• What should we do next time?
• Do we feel we have stepped back in the evolution of design when designing on the web?
• What do we do easily with traditional GUIs, that HTML and the web are not suited?