Reading - Sketching User Experiences: Paper Prototyping

Static vs. Dynamic
Static paper prototype: testers interact with static paper models.
Dynamic paper prototype: testers' choices affect the "next step" sketched with paper.

Why paper?

• Design flaws are caught early, and alternatives are quick to generate and tested.
• Get interactive faster, sooner, and cheaper.

Paper-based Technique
In a testing session, there are:
Facilitator - talks with users and walk them through the exercise
Computer - manipulates paper interface in response to users' actions
Videographer - videotapes the testing session

When is this used?

• Quickly explore a concept
• Informal testing or quick probes
• Usability testing

Why videotape the session?

• Future reference
• Communicate ideas to those not physically presented
• Capture user comments and subtle interactions

Wiklund's Study (1992):

• The aesthetic quality of prototype did not bias users for or against the prototype's perceived usability.

Note:

• Sketches are not prototypes.
• Just because something looks like a sketch doesn't mean that it is a sketch.

Design vs. Usability Engineering

• Design: Branching exploration and comparison
• Usability Engineering: Iterative incremental refinement

Note:

• The role of design is to find the best design.
• The role of usability engineering is to help that design the best.

Process Design vs. Product Design

• Innovation in process trumps innovation in product.
• Sketches, prototypes, models, simulations, and demos.

Reading - From User to Character

Intro

What is a Scenario?
A scenario has a protagonist, a setting, and a goal.

What is a Story?
A story has a protagonist, a setting, and a plot.

So, a scenario is a story with a setting, a goal/plot, and a protagonist.

Traditionally, there are two story types:
Plot Driven and Character Driven.
In a plot driven story, the plot drives the development of the story. The characters are merely participants of the story. However, in a character driven story, the character is the center of the story and the plot develops around the central character.

User Scenario - Character Driven Story

• Writer's Attitude Toward Model User

- Give insight into the user as a person not a tool.
- Focus on character development rather than action.
- Be aware of the motivation behind character's reaction.

• Definition of a Character

- "paradigm of traits"
- Drives story development. Not a product of the plot. Not a participant.

• Writing a Rounded Character

- Character is the central element --> see the user as a person.
- Describe in greater details:
multiple traits
physiology, psychology, sociology
inner needs and goals, motivation

Mini Project - Environment

Problem
Horribly long elevator waiting line in the building ( 2 W 13th St.) before class start times. The major cause of this problem is the inefficient use of the elevators (have each of them stops at almost every floor). This wastes time and causes long waiting line formed at the first floor.















Project Description
Purpose: Maximize the usage of limited resources.
Target Space: lobby at 2 W. 13th
Audience: people who have access to 2 W. 13th
Method: Design an environment that direct the users to designated elevators according to their destination.

Design Questions and Challenges
Best Practice - What's the best way to allocate elevators to floors?
Aesthetic - The design should not conflict with the original environment.
Flexibility - The design need to account for non-rush hour usage.

Precedents
1. Existing Elevator System Models









2. Innovative Traffic Control - Technology and Practice in Europe
http://international.fhwa.dot.gov/Pdfs/Innovtce.pdf


































3. NY Subway - 7 Express v.s. 7 Local












4. Portable-deflatable Led-Matrix
http://www.mediaarchitecture.org/















5. Restaurant Logo Projection















6. Philip Color Kinetics - NECA 2008




Design Plan

Elevator Assignment












On-floor lighting instructions and traffic direction layout












Operating Hours
8:40 am - 9:00am
11:40am - 12:00pm
2:40pm - 3:00pm
5:40pm - 6:00pm

User Scenario: Off-Peak Hours
































































User Scenario: Peak Hours

































































Strength & Weakness

Strength:
- Optimize Resources
- Blend in with original environment

Weakness
- Implementation Cost & Technical Possiblity
- Is the proposed elevator assignment the best practice?
- Human behavior - will people cooperate?

Reading - Seamful Design

I like the idea of distinguishing "seamless" from "seamful." Due to technological limitation, delays and uncertainties are inevitable, especially in sensor-rich systems. But one important argument is that the designers should take the positive design approach - "allows seams to become a resource for users, rather than a system failing."

It is not to say that designing a "seamful" system is always better than a "seamless" system. I think the most important thing is to understand the nature and characteristics of the system, and use the best resources to design out the negative aspects that my exists and presented to the users.

Reading - Skateboarding and the Performative Critique of Architecture

I have seen skateboarders performing some extremely difficult movements on the street. I always thought that they perform on the street to get people's attention. However, I was amused when the author of this article states that skateboarders interpret the city in a different way by choosing the "left over" urban space to do their sport. I am not sure if this is really to "appropriate public space" or it's just to practice at some corner that won't been seen by the others.

However, it is interesting to think about how the urban spaces are viewed by different groups of people. For example, the same city "looks" and "feels" different from the eyes of it's dwellers than from the travelers. Because of the difference in each individual's relation to the city, the spaces are interpreted differently.

When I was reading this article, the Parkour came into my mind. Unlike skateboarders who explore the terrain of the city with a board, parkour practitioners use their body to move among the architectures in a very styled way.

Mini Project - Object

Question
What is the social consequences of online interpersonal communications and social networking?

Problem
1. The communications through IM, blog, or social networking sites are not as immediate as traditional communication methods, such as telephone.
2. Not every one is online. Even the internet users are not necessarily doing social activities online.

Research
1. "Sense in Communication" by Dauglas Galbi
Sense of presence in communication: face-to-face > telephone > IM/text based > social networking sites
2. "Generational Differences in Online Activities" by Pew Research Center
Teens and Generation Y find entertainment and social networks online. Older generations use the internet as a tool for research, shopping, and online banking.

Project Concept
Create an object that functions offline, and should be sustainable as a social tool which will stand the test of time.

Project Description
Be-In-Touch is a customizable cell phone reminder, which reminds people to get in touch with their contacts by making phone calls. Users can specify how long they want to keep in touch with each contact by modifying the "be-in-touch" length (in days) in the edit contact mode.

Target
The target group of this project is Generation Y (age 18 - 32). The reasons for this is that Gen Y has the highest percentage of population doing social activities online. Therefore, this group of people has the greatest need of this application.

Precedents
1. Facebook Birthday Reminder - same concept of giving people an opportunity to get in touch with their friends/families by reminding them to do so.
2. Cell phone Event Calendar Reminder - same technology
3. Pictogram - use simple graphics to represent the idea --> important in designing user interface

User Scenario
1. specify the "be-in-touch" length (in days) in the contact list
2. cell phone alerts when when user do not contact that person in the specified days

Prototype

main screen



















in contact list



















in edit contact mode



















done adding the function



















the alert screen



















the reminder



















Click here to view full Presentation in PDF

Reading - Lumbar Thought

There is no doubt that how a person dresses reflect some part of his/her personality. When I go shopping, there are often times that I recall one of my friends when I see some type of dressing style. But I personally do not agree with being so aware about how other people will think of us every time we get dressed. For me, clothing should just come naturally. For me, I wear what I feel like, according to my mood, the day's weather, and the occasion I am going to. Two people could wear exactly the same piece of clothes, but they could have totally different personalities. Maybe there are some commonalities between these two people, but I don't think it is justified to group people by how they dress.

Reading - Why We Need Things

When I first started this article, I thought the author was going to talk about why people could not resist buying more things even when they don’t really need them. However, the focus and direction of the paper suddenly shifted to the relationship and the symbolic value between the objects and their owners. I found this shift was a little abrupt and was not smoothly transit into the main topics.

No matter what, I like the analysis of how objects relate to the three different human experiences: objects of power, objects and the continuity of the self, object and relationships. I found it most intriguing when the author talked about how a person is socially isolated when he/she claims there’s no object special to them.

Reflecting on the points of this article, I realized that all the objects I own in my room fall into two major categories: one I call “pure objects”, the other “meaningful objects.” Meaningful objects are the ones that have stories behind them, whether it reminds me of a person, a relationship, or part of my past. Objects that do not fall into my “meaningful” category are pure objects. For example, now I am sitting on a foldable chair in front of a white desk with a green cup on the side. The chair and the desk do not remind me of anything or anyone I know. They are necessities. They are pure objects. However, the green cup was a gift from my childhood best friend. It is a meaningful object to me. All the other cups I have in the kitchen are pure objects since they have no association to my experiences.

Domain Research

Mind Map


















Domain

• Sociology

Areas of Interest

• Communication
• Human Behavior
• Online Communities

Possible Research Questions

• How does instant messaging (ex: MSN, Gtalk) change interpersonal communication?
• What is the relationship between a person's virtual identity and his/her personality in the real world?
• Why people may have personality shift when they go online?
• What are the societal implications of online social network (ex: Facebook, Myspace)?
• What are the social impacts of online jargons?
  

Final Project

Impetus:
Four months of being a student in the city of New York, I have mixed feeling about living in this city. Although the diversity and energy of the city are exciting, it is way more crowded and dirtier than I have thought. Lately, I experienced the most depressed time that I have never experienced in my life, and fired complaints about this city and wished to leave it as soon as possible. I started to question whether my dislikes of New York is overwhelming my likes of New York. Thus, to express my personal feelings of the city, I would like to create a web site to show the battle between my dislikes and likes of New York. To make the site more impacting, I decide to open it to the public and allow visitors to input their comments.

---

Project:
Create a web site to gather positive and the negative comments and experiences of living in the city of New York. A simple game mechanism is utilized to encourage participation.

---

Detailed Description:
The main page of the website will present a big graphic display “I ♥ NY”. The heart-shape will be filled by two colors: one represents the positive comments; the other represents the negative. The two colors fill in the heart-shape according to the ratio between the positive and negative comments. In other word, if the positive comments are 60% of the total comments, the color representing positive will cover 60% of the heart-shape. The color representing negative will cover the remaining 40%.

The users contribute positive comments by clicking on the pump picture, from which pops up a form with functions of inputting text and uploading pictures. The interface will look familiar to the web users for it will emulate the posting interface on most of the blogs. To contribute negative comments, the user will click on the injector picture from the main page.

As the user inputs a positive comment, it will be submitted to a database dedicated to store positive comments. That comment will return to the screen as a bubble floating in the positive portion of the heart-shape, which will increase due to the ratio change of positive and negative comments at that time. The user can click on the bubble to view the comment shown in a popup window. Users can reply to each comment by clicking on the “reply” button, which will direct them to the archive page of that particular entry and add on it as what they used to do when blogging. The negative portion will have the same commenting process as the positive one. There will be a maximum of 50 bubbles floating in total to avoid overwhelming data visualization.

---

Interface Design:

main page















when click on "Archive" button
















when click on the pump -> pop up



















when click on the injector -> pop up

---

Precedents:

I. "We Feel Fine"
http://www.wefeelfine.org/index.html

Inspiration:
I am attracted by the particle movement and the playful display of the “I Feel Fine” project. The particles paint vivid pictures of the feeling phrases from various blogs. They inspire me to create the moving bubbles in the heart-shape of my “I ♥ NY” site. Such graphic display increases the interaction and attractiveness of the site to the users.

II. "14000 things to be happy about"
http://www.thingstobehappyabout.com/

Inspiration:
Inspired by this website, I will create a game-like forum with intuitive graphical illustrations to provide incentive for the users to participate in inputting comments.

Public Space Project - Phase IV

Goal:
Build conversations on a given topic

---

Focus Group:
Women - b/c throughout iterations, women had been more responsive

How:
Speech Bubbles with different female body image

---

Design:
-posters on carousel cube
-4 body types: Skinny, Chubby, Muscular, Morbidly Obese
-large speech bubbles
-writing tools provided










Why:
-carousel cube is more inviting
-stands out more
-installable at the pier

---

Execution:

---

Result:
-Successful
-Women responded
-Men responded more than expected

Public Space Project - Phase III

Goal:
Induce indirect interaction with lower barrier to entry

---

Focus Group:
Bypassers familiar with political figures

How:
Allow writing with political pictures, use white erase board, provide markers

Why:
Election was around the corner

---

Executions:

I. Conversation between Obama and McCain










Objective: get people fill in the bubbles to form dialog between the two candidates





































II. Photoshoped Palin



















Objective: See how people's reaction change with a different picture

---

Conclusions

• Successful
• indirect interaction achieved
• drew attentions
  
• Analysis
• Females are more responsive
• Content matters
• Palin's photoshoped photo speaks for itself -> hard to get new messages written
  
• Dry erase board limits interaction
  
• shorten the time people gather around the board
• some people hesitated before erasing others' message

Dandelion

Dandelion from wei-ju Chen on Vimeo.

Mood... and Feeling... with Music..

CrazyChristmas

StoryBoard from wei-ju Chen on Vimeo.


Storyboard for short animated film.

Public Space Project - Phase II

Goal:
Get people who normally don't interact to interact.

---

Idea:
Use dogs as the medium for conversation

Target:
Dog owners

Why:

• They usually not in hurry
• Dogs are sociable animals
• People use dogs as a conversation catalyst
• Considerable percentage of people on the pier are dog walkers

Method:
Doggie Cut Out

---

Three Iterations:

1. Doggie Cut Out + Advertising Board


--> Noticed, not Used

2. + Action Shots


--> Used, no Stranger Interaction

3. + Water & Snack


--> Treats were misunderstood

---

Analysis:

• Cut out didn't work as intended
• Catches attention, but not for a long time
• High barrier to entry
• Interface not inviting enough

---

Conclusion:

• Not successful
• Dog owners not the best target
• High barrier to entry
• Broaden target audience

Public Space Project - Phase I

Objective: Observe a public space for 24 hours. Document it. Identify the groups appear in that space and how they interact among one another.

Location: Pier 45, New York - Space in front of the restroom
















Time schedule of observation:
Oct 15 (Wed.): 2pm - 8pm
Oct 17 (Fri.): 10am - 4pm
Oct 18 (Sat.): 10am - 5pm
Oct 19 (Sun.): 10am - 4pm

It was very cold and windy on Saturday and Sunday... cold but sunny. I went there on Friday morning and on Sunday afternoon. Most of the people appear on Friday morning were mostly old people, elderly couples,college students, and the ones who's schedules are flexible so they would be able to go to the pier during office hours.

The main activities on the pier include walking, running, biking, dog walking. People go to the pier to get away from home, do some outdoor activities, relax. The weather will be the key factor that determines the flow of people appear in our chosen space.

Main Groups identified:
- The ones that hurry:
runners, cyclists
- The ones that take their time:
dog walkers, couples, elderlies, families
- The ones that chill:
people who hang around in that space (visitors, people who take break, people who wait for others...)

click HERE to view the presentation

Moonlight Dolphin

animated dolphin under moonlight + music of Yo-Yo Ma
took me a whole day...


Moonlight Dolphin from wei-ju Chen on Vimeo.

Sunday night on subway...

it was around 10 pm
i was on my way home, on 7 train
two stops to my station... and... suddenly....
all the other passengers were gone!
there were no people in the cart except me!!
i was happy! very very happy!
why was i happy about that?

have been in the city for 3 months
i was surrounded by pure air in a public space for the first time!
that's what made me happy!
NO PEOPLE!

why was i happy about no people?
umm...
i guess i'm already tired of being in the crowded New York city...
after 3 months living here... only 3 months... damn..

Interface Studio: Project I

a group project -- team of two -- with Justin Jordan -- parsons

---

Project:
Pick one reality from Einstein's Dream or Invisible Cities. Design an object that help the people in the story express their personality. Incorporate the form of (a) cube(s) in the object. Be aware of the needs of the people in the story.

---

Story:
In this world, people have no memory. Everyone fills out his/her Book of Life at the end of each day when memory is still in the head. The next day, people forget their past. The only way for them to know themselves is by consulting their Book of Life.

Ideas:

We thought about using different media to create self-portraits for the people in the story, including mirrors, kiosk, memory cubes, etc. Then we thought about what are the NEEDS of the people in the story.









How-Why Chart










Here is a list of needs we identified:
- portable (so people can record anytime, anywhere)
- easy access (to solve the problem of flipping through the book)
- intuitive (user friendly interface b/c people have short memory)
- large storage (to solve the problem of thickening book over time)

---

First Iteration:

A digital memory cube was our first choice, but it is not easy to carry. Then we got the idea of having the cube sitting virtually in a flat screen.

Here are the initial sketches of the design:


Here are the mock-ups in computer:

The design is a virtual cube with 6 sides. The users turn from side to side by sliding their fingers on the screen, just like what an iPhone user does. Except one side being the setting menu side, the rest 5 sides are all configurable by the users. This is to allow maximum flexibility.

---

Second Iteration:

The 6 side design was kinda complicated. As the designers, we knew how the thing worked as a virtual cube sitting in the screen. However, when we try to imagine using it as an end user who knows nothing about the design, the interface was a little confusing and we got disoriented after sliding from side to side both vertically and horizontally. In the second iteration, we tried to simplify the interface and put in more efforts on the mechanism design of the device as a whole.

After rethinking about the fact that the users have no memory and their need to have intuitive interface, we decided to set up the sides by default, not letting the users configure everything. In addition, to solve the problem of getting disoriented by having 6 virtual sides, we decided to have 2 sides fixed and the cube only rotates horizontally.

Here are the sketches of the improved design:

Computer mock-up of the 4 main interface:

details on the Notes side:


details on the Record side:
details on the Archive side: