Timeline for the Workshop
As close as we can tell to what we really did!
Goals of the Workshop (5 minutes)
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)
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.
General Constraints (for EACH problem, show during the explanation of the
GUI design step)
To provide a forum for designers to think about pure design issues
To expand ones design models by looking at other designers work
To lay the groundwork for possible future enhancements to HTML and other
core web technologies.
Do you have Goals?!!!!
General Consensus on Constraints
Open floor to discussion - consider issues like these when working on your
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?)
Quick Review of Today's Agenda (Planned)
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.
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.
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!
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
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
The Task Analysis --
Do the Big Picture - How does this fit into the whole system
Create a current flow - How the process is done now, possibly using a traditional
GUI or by hand (can skip, otherwise use Yellow Cards)
Create an ideal (Blue Sky) flow -- What would the best possible way of
doing this task given no constraints (Blue Cards)
Realistic flow - what is can be implemented given the target system (White
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
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.
What makes you need this part of the system?
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.
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: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
Must Have (H)
Nice to Have (M)
Not Necessary (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
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
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
Hard to Do (H)
Medium Difficulty (M)
Easy to Do (L)
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,
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
5:00 - 5:30 - Wrap-up Session.
During the wrap-up session we will address a few issues;
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.
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