It happened almost like overnight since Apple proudly introduce their iPhone and iPad, followed by a series of other fancy smart phones and mini computer-like devices. People are busy tracking apps instead of browser from the second they wake up in the morning to late night sex time. They are smart enough to realize what they really need is to get rid of all the user interfaces and get to know their best friends’ status, bank balances and next job oppotunites. Now since they can accomplish these tasks without a computer. Sooner or later there’ll be some other vitural devices or service to help them get rid of their smart phones, such as built-in-body-chips or visual augmented sun glasses.

People’s life are simplified. The world will be more visual and more real since we’ll not gonna deal with interfaces but down-to earth UI-free services.

Or is it what we really want? How about system design?

As a hot nerdy girl I both love and hate about system design – it’s  like a sophisticated and but usually over-dressed woman – although we really just want to see the naked body inside, the process to get there could be fancinating and addictive – it has some ritual values. If we don’t design it well, it will turn from a hotty blonde to your mother – who yells at you and makes you want to kill yourself.

So there I come and say, long live user experience, the browser may die some day, smart phone will die some day, but there’s always people issues that require us to solve – we UX designers will seek our ways to thrive and make better services. As long as there’s people, there’s user experience.

- Wei Zhou

I’ve recently seen an article from Tencent QQ official site: http://cdc.tencent.com/?p=2464

Video:

Background: Tecent QQ is the dominating instant messaging software in China. I personally believe it will be the dominating reasons for Facebook and Twitter to fail in China. This software has existed for over 20 years and it’s influence is encompassing. Chinese’ three generations are using it and it togethers with Baidu(A chinese Google), Taobao(a Chinese eBay) and Xiaonei/Kaixin(Chinese facebook) to form Chinese digital UX patterns. Recently Tencent officially announced their new prototype. It’s claim for practicing “natural interface design” reflects some Zen thoughts. It’s fresh and original interface is worth to see.

Development process(translated from their official site):

This prototype is Tencent QQ’s first NUI(Natural User Interface)product. In addition to the basic instant messaging feature, it also includes dynamic profile pictures, dynamic backgrounds, Multi-tab windows, 3D Interaction, Vector Interact and Desktop friends short-cut…

The original interface lights up the users: It triggers a lot more emotions. The interface is life-enhancing. It delivers an imaginary space beyond time and space dimensions. The expressions of interface is bold and colorful…It supports better mouse interaction and touchscreen interaction integration.

There’s two trends involved in the design process: Personified and materialized processes. Keywords are: Life force, time and space. This means the product design concerns day-to-day life stories. The interaction model should have a “breathing” effect.Design changes in different time settings, etc.,

Brain storming process:

Wireframes and prototyping:

Interesting pane emotion selector:

Visual Languages:

Profile Manager:

Friends management:

Dynamic backgrounds:

Pie panel enhances touchscreen interaction:

I will add QQ’s business models tomorrow. They did a great job on integrating online Ads into this product smoothly and seamlessly.

Here’s a deceptively simple question: why do people work? On the face of it, the answer seems relatively straightforward:

The 3 Core Levels of Material Need

Level 1: Resources
Working for immediate needs like food & shelter; living paycheck to paycheck.

Level 2: Security
Working to ensure safety; saving and investing for future needs.

Level 3: Freedom
Working to ensure self-sufficiency and independent choice of action.

These three levels of work are similar to the first few levels of Maslow’s Hierarchy of Needs or ERG Theory: work is a way we can meet our basic existential needs effectively and reliably.

That’s a perfectly reasonable explanation, but here’s where things get interesting: what happens when people have enough resources to do whatever they want? What does “Level 4” look like?

Level 4: Primary Motivation

Consider individuals like Warren Buffett, Steve Jobs, Dick Cheney, and Angeline Jolie. Each of these individuals has enough money to ensure that they never need to work again – they could quit tomorrow and live off of their savings in perpetuity. For some reason, however, they don’t – they keep working. Why?

After considering this question, I think that people who have reached the “Freedom” stage of work make a choice (either explicitly or implicitly) about what they’re ultimately working for. The choice ultimately revolves around what that person values most: power, status, pleasure, creation, or quality.

#1: The Autocrat

The Autocrat’s primary motivation is power and control. Common behaviors include continually seeking influence or control over the lives and actions of other people. Examples: businesspeople turned politicians like Henry Paulson (US Secretary of the Treasury), Dick Cheney (US Vice-President), and Michael Bloomburg (mayor of New York City).

#2: The Narcissist

The Narcissist’s primary motivation is attention, status, and fame. Common behaviors include continually seeking the attention and esteem of other people, and acting in ways that will ensure they receive more and more attention. Examples: actors / celebrities like Lindsay Lohann, Brittany Spears, and Madonna.

#3: The Hedonist

The Hedonist’s primary motivation is pleasure and enjoyment of material goods. Common behaviors include the continual acquisition of luxurious homes, fine food, and exotic travel. Examples: Larry Elison (CEO of Oracle), Mohammed bin Rashid Al Maktoum (Sheikh of Dubai), and Paul Allen (co-founder of Microsoft).

#4: The Architect

The Architect’s primary motivation is creating something new or reshaping the world. Common behaviors include the establishment of a vision of what the world “should” look like, then continually pursuing projects that they believe will bring the world closer to that ideal. Examples: Steve Jobs (CEO of Apple), Richard Dawkins (biologist and lecturer), Muhammad Yunus (father of micro-lending), and politicians like Ron Paul, Denis Kucinich, and Al Gore.

#5: The Craftsman

The Craftsman’s primary motivation is quality and enjoyment of the work. Common behaviors include the continual exercise and improvement of a set of specific skills or abilities and use of those skills as a means of self-expression. Examples: Warren Buffett (investor and CEO of Berkshire Hathaway), J.K. Rowling (author), and Stephen Spielberg (filmmaker).

Why is Primary Motivation Important?

Here’s my first hypothesis: once you identify your primary motivation, you’ll find it much easier to achieve your goals. These primary motivations appear to be relatively universal, and are based on very deep-seated psychological needs. Tapping into these sources of motivation directly allows people to accomplish their actual objectives more quickly, whatever they might be. Said another way, it’s easier to get what you really want if you identify what you really want.

My second hypothesis is that not all of these primary motivations lead to a lasting sense of personal satisfaction and fulfillment. If you’re an Autocrat, there will always be people you do not control. If you’re a Narcissist, there will always be people who look down on or ignore you. If you’re a Hedonist, the hedonic treadmill ensures that every pleasure eventually fades. If you’re an Architect, the world seems to have a tendency to stubbornly refuse to conform to your ideals.

When I look at the universe of “successful” people in the world, it appears that the Craftsman has the best shot at lasting personal satisfaction and fulfillment. You ultimately can’t control the world or other people, but you can control your dedication to perfecting your craft and expressing yourself through your work.

If we have a choice in determining our primary motivation, it seems that the Craftsman’s ethos has the most to offer: it may eventually lead to power, status, pleasure, and world-changing achievement, but it frees us from the perception that our self-worth depends on any of these things. That’s a remarkable combination.

Thoughts? Leave them in the comments.

One month ago my best friend’s fiancee broke up with her because an article on the 10th page on Google’s search engine under her name: A highly manipulated article accusing her irresponsible behavior in terms of relationships with her ex. And it turned into a deal breaker. My friend’s dream of marrying in a rich family is officially over. Now look at what fashionable girls do for dating : You meet someone in the bar, you Google his name, you ask your personal lawyer to count how much money he make..and then you choose if you go out a date with him. Google becomes our biggest obstacle of finding true love.

Yeah we don’t do this 5 years ago. Now we blame the internet gets to transparent to ban us making any mistakes. Today we are not who we really are, we are what google says who we are. Everything is openly connected and we’ve been trying so hard to make things open: making browsers more open, more social and more you, making everything connected, making open IDs. Suddenly we found out: The more we try to design for “you”, the less “you” can express yourself freely. Maybe it is time for the UX designers to make the user experience less open, more humane. And you know what’s ironic: it costs three years to make everything, but it might cost more than three decades to make the openness disappear.

When we talk about user experience, we always say we are engaging in making people’s life better. Nowadays we’re even trying to embed the most intricate and sophisticated human emotions into the consideration of design: like religious needs and sexual needs. However we designed a huge system that ignore the most basic one: The need to lie. Or they need the freedom to lie. If we are really aiming to design a YOU centric web, this question becomes unavoidable and probably be the hottest one in the next 10 years: How do we design a web that people can have real freedom within?

The web has changed, thus you have changed. But I know I love the world better before Columbia found the new land – when things were harder but full of unknown hope and inspiration.

Wei Zhou

First, designer are smart and constantly optimizing user experiences in their lives. Today designers are no longer artist, almost all of them are tech-savvy and bright. They like solving problems- so they are fully capably of fixing pipes for you; they are curious about everything in the world – your life will be fulfilled surprises. For designers, a string of URL gives them a whole new free toy to play with which immediately makes your life beautiful – they are not nagging like others because they are always playing or making stuff: you’ll have customized everything in your house and hand-made wine, chocolate, card and cake in your wedding anniversary.

Second. Designers are rich. They are born entrepreneurs, that means they are seeking every way of making money with innovative ideas. Don’t be surprised if you know a designer has 6 companies at the same time. Today design has never attracted as much attentions as it used to be – it encapsulates so many levels of skillets; as designers, they are much more powerful than they were: because they are designing business for other people.

Third, designers have freedom. Freelance designer is surely the best job in the world – not only because the nature of design requires the usage of both right and left brain so you won’t risk your other half having high suicide rate as a creative writers or artists, or retiring intelligence of football players. Designers surely look younger because the beauty and harmony they involve with everyday, and yes, as freelancers, they sleep a lot everyday, and if you like, they have the time to pick up kids.

Fourth, designers are happy people. Designers have the best friends. Their clients are passionate and hopeful people with fantastic dreams who believe beautiful design can make a difference in their life – never a change of dealing with desperate and angry clients as lawyers do everyday.

Fifty, designers are family guys and girls. They may like clubbing but never as much as they love their job or their life. They are never wasted as investment bankers do. Designers spend money appropriately because design is the art of balancing limited resource and quality. You’ll find your life quality increased significantly after you live with her/him, with less money, of course.

Yeah, marry a designer, you’ll never be wrong.

Yesterday at Hugh Dubberly‘s class, Chris, Paul, Phil, Kyle and I were studying some UX theories.

For some reason Chris began to complain how much he hated his Garmin GPS: It apparently gives him sort of connivence and freedom of exploring a city, but at the same time it makes him lose the ability of way-finding, as he said he wouldn’t be able to make anywhere without his GPS in Pittsburgh, where he already spent two years in his life. As he begins to be dependent upon a tool, his life choices are restricted to a certain level, and the original good feeling diminishes – Well, I have the same feeling about my iPhone before I abandoned it.

People talked about GPS like this all the time. However, it makes us think, what is the criteria of a good software?

I think a good software needs to “perform” two fundamental functions:

A. Functions as a tool to help people accomplish tasks in its most convenient and considerate way.

B. Empowers people to feel better of themselves. Let people have a better control of their life, meaning, a GPS has the responsibility to make people feel they are a good driver, not some stupid followers that obey a machine.

A good and successful software = A + B

Obviously they have a very good user experience designer, the website looks consistant, energetic and bold. Here’s a screenshot of their website:

I know, a beauty industry 2.0.

The most impressive thing is, I’m amazed by their advanced user experience ideo, they integrate the user experience and branding rightly, and creates a very user-friendly look and feel. It proves the moto:”User-centered design’s biggest failure is, users only adapts to what they have, and real cool experience emerges from talent design.”

Here’s a list of cute icons.

1.Fashion model. 2. Magzine model. 3. Car model.

1. Fashion photography. 2. Advertising photography. 3. Personal photography.

1. Makeup artist. 2. Hair stylist. 3. Nail artist.

1.Producer. 2. TV/Movie director. 3. TV/Movie supervisor.

1. 3D designer. 2. Visual effect designer. 3. Visual Designer.

1. Fashion designer. 2. Architect. 3. Interior designer.

1.Industrial designer. 2. Interaction designer. 3. Game designer.

1. Painter/Illustrator. 2. Writer. 3. Dancer.

1. Drama performer. 2. planner/Coordinator. 3. Caligrapher.

1. Visual artist. 2. Behavior artist. 3. Collector.

1. Sculptor. 2. Drama director. 3. Talk show artist/Acrobatics artist.

1. President. 2. VP. 3. CEO

1. Actor. 2. Scriptwriter. 3. Photographer/Camera people.

1. Agent. 2. Lawyer. 3. Nurse.

1. TV photographer. 2. MC. 3. Post production producer

1. Visual effect director. 2. Movie/TV producer. 3. Body Model

1. Music producer. 2. Singer. 3. Music player.

1. Landscape photographer. 2. Post-production artist. 3. Fashion stylist/consultant.

1. Graphic designer. 2. Interaction designer. 3. Illustrator.

1. Flight attendants. 2. Pilot. 3. Programmer.

1. Drum player. 2. DJ. 3. Scriptwriter/ Composer.

1. Recorder. 2. Music post-poduction producer. 3. Music related people

I love those icons and think they are very innovational. It’s a good branding + user experience stragtigy as well.

Bonus:

the moko man

MOKO: cannot find the user.

Design or Die – Innovation, UCD, Web and Life (Mozilla Labs Design Challenge: Spring 09) from Mozilla Labs – Concept Series on Vimeo.

I listed four themes for the future web, they are:

1. Data. Open, linked data and Metadata.

- Semantic web

- Human computation

2. Self. Self representation.

- Personalization

- Self extension

3. World. A connected world.

- Tangible interaction

- Contextual awareness

4. Life. A digitalized life.

- Virtual reality

- Service web

I also raised about the topics of:

1. What is design?

2. Designer’s multiple roles

3. Where indeed does innovation come from?

4. Custimazable user centered design process.

According to her theory, there’re three types of love, and all three types are independent from each other. They are:

1. Romantic love

2. Sex drive

3. Long-term attachment

She concluded that a human being can have the same feeling at the same time to his/her lover, or have the same feeling at the same time to different lovers.

I would love to extend her theory to Human-Computer interaction by categorizing my own digital products to these three groups.

1. Long-term attachment.

Example: my desktop computer(my wife). Trust, Reliability and security-guaranteed.

2. Romantic love partner

Example: My laptop(my lover), Promotes possession, motivation and intense energy on a platonic level.

3. Sexual partners.

Example: my other digital devices, Satisfy my curiosity and short-term excitement.

I’m sure a through exploration and understanding of Helen’s “love”theory will inspire digital product development strategy. The different ways people expect and treat their three types of lovers, are quite similar to the ways they treat their digital products. Furthermore, as the digital products(and their softwares )evolve, they will eventually own the ability of “memory-based prediction”, and most of these digital devices will become an extension of physical human body. We all know the ability to love, is one of the fundamental abilities that God assigned to human beings, we can assume, a simulation of the loving behavior of human being(attachment, sexual, romantic), will push the digital products development into a new era.

At the third stage, I experience ecstatic when I speak English. There’s a reason I use the word”ecstatic”, notice that’s not because I finally can express myself freely, but because when I speak English, there’s NO FEELING attached to me. I understand exactly every word’s meaning and I used them appropriately all the time, but I don’t have any previous experience associated to each word, when I speak “Screwed up”, I cannot picture this symbol and contextualize it into my environment. Consider language is an important channel for human beings to interact with their outer world, it functions as an interface. This interface has two-folds, productive and experiential, meaning, you use language both as a communication tool and a self-embodying game. And for me, in order to effectively use English as a communication tool I sacrifice my engagement of trans-experience. When people said “your English is fantastic”, I smiled and self-talked”You have no idea what fantastic means to me”. I feel ecstatic when I experience the separation of the two folds, how cool it is this, I’m literally function as a computer’s interface right now, because my interface(my language ability) is just independent of my sensory memory. And I name it as “the beauty of a second language”.

And I’m an interaction designer. Every human behavioral patterns means a lot to me. I learned that people are not always concern about usability. In an software interaction cycle, if we break down the process into individual patterns, there’re times people value experience more than productivity. They’d rather spend sometime on something that is meaningful to them, whether it is learning and reflecting a second language, fulfilling a religious duty, or spending time with an important person in your life. This allows them to turn the profane to scareness, turn tiny activity into a ritual, a performance, during the process they can either transcend themselves, or gain meaningful “ecstatic” in their memory.

We cannot misuse this concept in software design. For example, one of my friends said, in order to change his password in XiaoNei.com(a popular facebook-like Chinese website), he had to scan his ID, emailed it to validate. And we all know “password-changing” behavior is not an activity people want to turn into a ritual. However, people like to change their profile pictures on facebook, that’s one of the ways they express themselves and validate by others, they may don’t mind if we turn this “profile picture changing” a bit complicated because they enjoy the process. I think someday I’ll have a name of “the beauty of UI”, when the software’s UI behavior design, can satisfy every aspects of human needs, from functional, to ritual.

Life-enhancing software

The most attractive attributes of KITT is not his appearance – the look and feel of the car, the fancy interfaces, but his action and behavior encapsulated in his language and his semantic response, which is a very symbolic life-seeking and life enhancing pattern to human beings. That’s exactly the key feature I found in Ubiquity, and I’d love to categorize Ubiquity as a life-enhancing software.  And the concept of life-enhancing software will eventually replace our old term “artificially intelligence”. I also learned that Ubiquity’s user interface must be as minimal as possible, life-reducing forms and metaphers should be avoided, in fact the existence of interface will block the task flow and break human perception of ownership.

Human Behavior Pattern System

Ubiquity is a language-based system, and I think it should be pushed further to capture human behavior patterns. Design pattern was originally suggested by Christopher Alexander, who framed it as “Design pattern captured the essence of successful architectural solutions and can be used as a way to solve recurring problems”, the descriptive(and prescriptive) nature of patten languages  could help Ubiquity to be organized in a better way. Here’s an example of one pattern that I created, inspired by Aza Raskin‘s video:

Pattern NAME: Host a party

Pattern behavior process description: 1. Email to notice friends. 2. Give map and directions. 3. Give a restaurant review. 5. Summarize participants. 4. Shopping for party. 5. Reminding friends. 6. Meet at the party.

Pattern problem: The whole process is energy-consuming.

Pattern solution: 1. tell U(short to Ubiquity) party hosting behavior pattern. 2. U provides friends lists. 3. U gives maps, directions and restaurant review, and marked your and their calendar 4. U sends feedback to you about friends participation. 5. U creates a shopping list for you. 6. U reminds your friends before the party. 7. After the party, U collects your friends review(or photos)about this party on facebook, twitter and flicker. (notice this process involves with multiple accesses to different web softwares and apps)

Pattern context: Party hosting

Pattern variables: such as only perform tasks 1.2.3.6.

The benefits are obvious. By analyzing and creating a series of human behaviors patterns(since we couldn’t really create a pattern language for now), we could easily “ubiquitize” a real-world task to a virtual -world task. This transformation is meaningful both for mobile(physical context) and web(virtual context). I think this method may formalize Ubiquity’s syntax as well as empowering user personalization.

This pattern thinking was originally proposed by my adviser John Zimmerman, who is an awesome design thinker and practitioner.

Wei Zhou

Feb 17th, 2009.

Hi #:
I understand your concern as a non-design-professional and I’m sincerely happy for your passion. So here I’d love to talk a bit about the design process, hopefully this simple tutorial will help you land on the right track.

1. Design process step one: Exploration stage.
The topic of conceptual browsers is too broad to start with. So it’s important to reframe the problem before you move into the design phase, in interaction design process we usually generate a territory map, in this way we’ll understand the context and lands on a good direction.  We call this stage “exploratory stage“. A user-centered design research(usually involves interviews and field study) is usually conducted right at this stage and go through all stages, but for individual project, we don’t usually have budgets on the research, luckily we are all browser users, so we can ask ourselves the needs and wants.

The form of territory map can range from extremely casual, some doodling on whiteboard, to extremely formal, a diagram that shows all the relationships. Here’re two examples:

casual territory map

formal territory map

By the end of the stage, if you work in a team, you should have a shared definition of the problem, and a raw direction you’ll pursue later. You also holds some basic understanding of the user needs. For example, if you are going to design the tab system, after the first stage, you’ll be able to answer questions like”what do we need for a tab system and why”.

2. Design process step 2: Generative stage.

With all the data you collected in the first stage, you’ll begin to do the design. There’re many way to do it. I’ll only introduce three common methods for you to start with.

(1)Brainstorming and bodystorming. They are proven to be very effective ways to pitch. Gather a bunch of people and try to generate as many ideas as possible, that’s brainstorming. Give those people a senario to act, during the process be free to stop them and ask questions”what feature do you need right now”, called bodystorming. We gain great ideas from brainstorming, and build empathy on users through bodystorming.

(2)Personas and Senarios. Very simple, make up a user, such as “John is a 30-year-old male who works in accounting industry and a web power user”, and then make up a user story”John is trying to transfer some money from one bank to another but is noticed to visit and bank so he google-maps the place…” During the process of making those stoires, try to satisfy all the user needs to every details. Personas and Senarios are proven to be an effective way to refine designs.

personal example

senario example

(3)Models. Using models to generate ideas keeps you cool down and gives your inspirations.

This sounds very academic, but it’s really not as complicated as it looks like, this model implies, we cannot design blindly, we need to simplify the current situation to an existing model, and optimize this existing model to a better one, in order to imagine the future solution.

model example

- A pattern approach. Look at existing patterns and gain inspirations. You can also look at people’s daily behavior patterns and transform that into digital metaphors. For example, people use backpack to store files, and there’s an existing website “backpack” to do the same thing in virtual world.

By the end of this stage, you should be able to have a concrete focus and several images mock-ups of the key features.

mock-up UI

3. Design process step 2: Evaluative stage.

At this stage we evaluate mock-ups with users, get their feedbacks and refine the concepts. Wireframe may be used as a tool to structure the whole experience, however, because of the limited-time, we usually only show a partially working prototype which only covers the main features of the app. You can click here to view a demo video sketch(press the “click to view video button”).

I hope those tips will help.Please be free to email me if you have extra questions. I’m one of the tutors for the design challenge, and I’m very glad to talk with you about design.

Wei Zhou

weizhoudesign.com

“Dear CMU designers, Mozilla, the organization behind the Firefox web browser, has just announced the Mozilla Labs Design Challenge. We’re inviting design-focused students from around the world to develop new ideas & prototypes for the future of the Web. The Design Challenge will be held in two stages: In the first stage students submit mockups of their ideas; during the second phase we will run an exclusive three week tutoring & mentoring program during in which the students will turn their static mockups into dynamic prototypes. Final polished prototypes will be posted, and honors for “best in class” will be bestowed. We would like to invite students from your faculty to join us in the first Design Challenge. It would be great if you could point your students to the website, and invite them submit their ideas.

You’ll find more details about the Design Challenge on the Mozilla Labs blog at: http://labs.mozilla.com/2009/01/introducing-the-design-challenge/ Further information can be found in the following article published by WIRED magazine: http://blog.wired.com/business/2009/01/envisioning-the.html We are looking forward hopefully to working with you & your students.”

As one of the luckiest people who had the chance to participate in this project earlier, I’d love to share some extra thoughts if someone will do the job.

1. Rethink the future. My definition of future web browser evolves with time, and now it’s completely different than it was in the summer. When I designed my piece “Lifestream”, I thought about today rather than the future, mostly on how to improve the current situation, less reflection on the society we will live in tomorrow. However, tomorrow, our younger brothers and sisters will live a digital life which they took granted, HTML and web design will become high school required courses, software becomes an art form, computers exist everywhere and web is no longer looked like the form that of today. What is their definition of a browser? Is a browser a extension of brain, a tool to access, store and process information, or a self-presentation medium? or something completely out of imagination? With those questions in mind, use one sentence to summarize “what is a browser”, and come back to examine what we had today, we may gain cool insights.

2. User behaviors, always. I didn’t do much of that during the summer, so-called user-centered design research. But it’s a very powerful tool, I admitted. Not just examine what people do on the Internet, but observe what they do in their contextual daily life, what do they need in a specific situation, then construct patterns, transform ideas, to digital world. It turns out we use browser in a highly contextual way, it stores our daily memory in the browser’s history, and represent our virtual self in a form that might be different than our real self. For me, it is meaningful, because in the near future, personalized semantic content representation will be the key to any successful user experience design, and popular browser companies, such as Firefox, should take the responsibility.

3. Focus and Concrete, use a story. I’d suggest you, designers, focus on one thing rather than the whole experience. You may end up only design an experience for book collectors who use browser to search antique books, but that’s people’s everyday browsing life.

So much for today. Wei at weizhoudesign.com

Buy Wei. You may get 8% off with PalPal if eligible. – eBay…Wei Zhou, an interaction designer, currently pursuing her master degree in Carnegie Mellon…

I wonder how this could happen!

Also, here’s a recent poster for a social networking website development plan:The pattern of extended Self in interaction design research

And yap, a video sketch for service design class – if you are still familiar with Steve Won and Maria Emerson, two interns in Mozilla last and this summer, you’ll be surprised because ” they are going to have a baby!”… the video is done within 35 hours – of course, continuously 35 hours.

Sync video

Check it out! it’s really fun!I’ll update my portfolio in the winter.

Three ex-Mozilla interns, me, Maria, and Steve were assigned into the same team in Shelley Evenson’s service design class. It’s absolutely a coincidence, so we subconsciously keep low-key and not ware Mozilla T-shirts all three people together at the same time. So far we work very hard on making our design not suck. However we maybe embedded Mozilla’s soul into our process – a pure clean service system, with personalized service “plug-ins”. I’m really looking forward how the final prototype would be.

Yeah, we strive to be the best team in this class. GO TEAM!

But nothing can stop me doing fun stuff. These are screen shots for my recent project “Digital Self”. I programmed it in processing. Haha, I have to admit it, when comes to the UI stuff, processing sucks.

Well, the basic idea, as I said before, the web browser knows more than you know about yourself. As much as I analyze the data, I realized those “Google map search” means more than just one keyword, it encapsulates all my feelings and emotions at that time. I vividly remember the moment I searched “Mountain view taxi” when my car was broken and I was anxious about being late to airport. These stories, alone with the search keywords, suddenly jump out of my mind, like I pressed the Replay button of a movie player. If we see in the near future, a software can be expressed in an art form, and the fundamental question would be  “How do we enhance meaningful human experience “. The browsing history, literally becomes a backup memory library.

I didn’t do a good job because of time constraints.  This application reads your local moz_places.sql file, and sorts the browsing data either by category or time. You can enter an estimation of how much time you spend online for sth, and the application will tell you how to monitor yourself better.

This is the animated beginning. Each dot represents one single site entry.(by site, not by url).

Yeah, that’s my own data. Haha. You can see I actually spend a lot of time studying and working!

Well, if you are interested in this visualization application, please email me your moz_place.sqlite file.

So what’s a Digital Self and why start from a web browsing history analysis?

People may scared if they realized that their browser knows themselves more than they do. The browser traced down every single activity you do on the Internet, that somehow reflects you as a whole slightly different than you are in the real world.

For example, here are some variables that may reflects your “Internet” personality.

Your most frequent visiting sites.

- If I ask you to list some favorite sites, the answer you give me might be different than the answer given by your browser. You may not realize why you actually spend 30 hours on Facebook monthly, that conflicts with your goal – study harder.

How long do you stay at a site

- Spending 10 hours shopping on Amazon and 10 seconds to check things on Amazon reflects different personalities. If we did a long-term research, you may find you are easily obsessed with one thing, or you may like to change your focus frequently. That’s a very interesting Internet personality.

Your browsing time

- This directly reflects your schedule, how busy you are.

Sites category you visited over time

- When you are relax and happy, you will visit a lot of sites you like, otherwise, if you are hitting a deadline, you will only visit sites related to your work. However the sites people visit reflects how they release their pressure, such as watching a cartoon after a long time work.

Your search result

- Reflects your curiosity

What do you tag or bookmark a page

- This may reflect your Internet self in a social context.

What much do you comment or upload things on Internet(In versus Out)?

- If you only get, never give, does that mean you have a selfish personality on the Internet?

…

It will be interesitng to build a framework for Internet Self Study, but I think that’s phychologists’ job.

If everybody is using Gmail, Google Calendar and Google Doc, we begin to lose our control over our choices of web applications, just as we have to use Windows OS. So welcome to a software modernism age. Welcome Google’s fast-food web apps. Keep Google Bauhaus design doctrine in mind: “Our Web Apps are so simple, secure and fast, that’s all you need for your Internet.”

Is simple, secure and fast all we want? If design is about the value,not the truth, where can we target our values in this fast-food software culture? When can a piece of software become a form of art, bringing people altimate enjoyment?When can a web Apps functions beyond a tool, behave like a digital being or digital asistant that help us in an interesting and considerate way? Can softare have personalities, catering to their master(user)’s ever-changing needs and interests? Google basically ignores all of those possibilities and proves itself proudly: A group of engineers, make softwares, work hard to make every engineer happy, and change every Internet user to a engineer.

• 7:00 AM: iPhone Alarm wakes me up
• 7:01 AM: Check facebook, twitter, mySpace, Blog, School email, Gmail, company email, open MC chats, log into msn and AIM, Gmail, skype(wifi), IRC(wifi).Quickly check TODO.
• 7:05 AM: Fully wake up. Hold iPhone and run to the bathroom. Listen to Stitcher‘s new radios. Cook breakfast, check iPhone for nutrition info.
• 7:30 AM: Bring my iPhone(and my iPhone charger!), walk to the bus stop, read Newsstand RSS feeds, check Stanza, Jamed, NetNewsWire, and Shovel, digg news and comment on other people’s blogs.
• 8:00 AM: On the bus stop, search iWant for local bus schedule.
• 8:30 AM: Class begin. Use Note&Sketch to take notes, use FileMagnet to view course outline.
• 8:35 AM: Bored. Check iGotchi and feed my pet.
• 9:00 AM: Teacher forgot my name. Use Shout it, display “Wei Zhou” and wave to him.
• 9:30 AM: Use Camera to take a picture of my teacher, publish through ShoZu, send it to facebook, flickr, MySpace, WordPress and Picasa.
• 10:30 AM: Class ends, update my Diary. Play Tris, Tap Tap.
• 11:30 AM: Run for another class, focus on teaching, Camera bad students sleep in class.
• 12:00 AM. Break. Use VoiceNotes to record student’s requirements.
• 1:30 PM: Starving. Check Urbanspoon for food.Drive up there using maps.Turn on Pathtracker because I’m directionally challenged. Using where to find Starbucks.
• 2:30 PM: Graffitio notify me another CMU friend in Starbucks is using iPhone as well.Exchange cellphone number with him.Textmessage another friend to join us. Send him our location using Over Here. Share Loopt with them.
• 3:00 PM:Another class. Bored. Use Lifecast to record class discussion.
• 5:50 PM: End class. Repeat 1:30 PM.
• 6:30 PM: Another class. Explore new Apps on App Store.
• 8:30 PM: School ends. Walk back home. Study english using Blanks. Update TODO. Repeat 7:01 AM.
• 9:30 PM: Homework time, use SnatchTest as a mouse for my Macpro.Use controller for my iTV and iPod player.
• 10:30 PM: Play Ambient to get to sleep.

P.S.: Repeat 7:01 AM many times during the day.

What else do I need?

• Support remote printing.
• Every time I jump from one App to another App, the previous one stops working, I have to reopen it afterwards. That really stops my work-flow. I wish it works like Tabs in a browser(Or even better). In summery, the navigation is bad.
• Constantly pressing the main home button is annoying. Especially when I lay on the bed, holding the iPhone with one hand, I don’t want to move another hand. Can I just do everything use one hand?
• I wish I could track my iPhone using history.
• Searching is painful. iPhone should have an universal Google search button on the device.
• Typing is painful. I need a auto-type App.
• How can I copy and paste info from one App to another???!!!
• I need a Firefox browser App

How to design a Multi-touch interaction framework from ground up? IPhone just scratched the surface of a smart phone design – for me iPhone is a device that combines a bunch of unrelated separate gadgets together. It’s getting there, but hardly to be considered as “Smart”. Multi-touch gesture standards will be set up within next 5 years. What we need is no longer a “smart phone“, but a smart browser that embedded in a mobile device, In this way we would be able to use a series of small Apps in a meaningful combination, adjusting to people’s ever-changing task flow and context, without interrupting people’s thinking model over time(also see Ubiquity). That makes a digital device really become part of our body, like our hands and feet.

Yes. Building a variety of cool Apps is important, but not as important as arranging them in a useful way(Outsourcing part of human thinking to machines?). That applies to Small screen browser design, as well as browser for OS. Human beings are task-oriented, not tool-oriented.  Guess that’s the difference between a human and a computer.

As a designer we usually need to answer three questions:”What”, “Why”, and “How”. Here I delve into what and why, not much how. I found Aza’s blog particularly interesting -  Ambient information. Because it also talked about how. We need more “Hows”.

By the end of yesterday, proud as I am, tried 500 add-ons and extensions for firefox, as well as successfully developed a hobby of working for Mozilla. Work is just more fun than fun. The Summit gave me insights of how an open-source community could attract so much passionate developers – but I hope in the future, designer contributors could be largely involved to improve the user experience of future web.

I’m doing two things this week.

1. Design the first version of the Firefox phone. 2. Trying to write a brief overview of all Firefox add-ons and extensions, and find design implications based on it.

This media player UI design costs me Friday whole day. I designed 12 versions and choose those two. It’s hard to choose between concept 1 and concept 2, because I liked them both. User testing result shows people tends to like concept 1.Which one do you like better?

Welcome to lifestream!The goal is to find a cool way to organize history and bookmarking for the next-generation browser.Obviously those mock-ups are not good enough, that’s why I put it up here and I welcome all kinds of criticism.If you have any valuable suggestions, leave me a comment, I’ll visualize the idea for you, and I’ll improve my current prototype for you, I’m glad to support you to design your own fantastic web browser. Welcome to Mozilla’s Design 2.0 world.

DESIGN

Video: Click here to see the full resolution demo video

Lifestream - redesign browser history

History: it shows your  location, weather and calendars(events), users could conduct a very visual search base on that.

SCENARIOS

Storyboard 1

Feature 1: bookmarks: Auto categorizing, sharing

Shot1: Alice works as a programmer in Google. She likes musics and movies. Today she finds an interesting music website: http://www.songbird.com.

Shot 2-5: She drags the website to the top of the browser, the bookmarks menu drops down, browser automatically categorizes this website to MUSIC, names it as Songbird, records the time as 3PM, June 28, in Mountain View Google Cafe 40, sunny, and tags it as P2P music downloading website, records she was chatting with her mom on skype and listening to Whitney Huston’s album at that time. Alice clicks SHARE, and record a short video to her friend Joy. A message is send to Joy’s friend bookmarks.

Storyboard 2

Feature 2: Context awareness: integrate a website’s data(for this case is calendar).

Shot 6 – 8: Joy is a toy designer in New York. She opens the web browser today and search:calendar. Her default Google calendar jumps out. She drags the website onto the browser background, then her browser is in sych with her calendar data now.

Feature 3: A cool way to find a web page

Shot 9 – 11: Joy is trying to find an important document her boss sent to her on IRC, but she lost the link .She switches the bookmark view to HISTORY view. She types “yesterday, office, around 2PM, Boss sent to me” in the awesome bar. The web browser finds the link for her.

Feature 4: Enhance learning – Find related websites and recommended websites.

Shot 12 – 14: Joy types “facebook related” in the awesome bar, suddenly all the related web pages zooms in(Those web pages are based on her browsing history, her friends browser history and her settings-she is a big music fan and she’d like to explore more music websites). A cluster of websites jump out, in this 3D space, Joy see big thumbnails like Myspace.com, twitter.com and youtube.com, etc., she also sees the other tiny thumbnails of music websites and toy-design websites which the browser recommend her to read.

Feature 5: Infinite scrolling

Joy is a curious person. She chooses all the networking website and clicks”Open all in one tab”, then all the websites are shown within one page, she presses her figure on the touch screen monitor and enter all the sites and scrolls down -  she checks all the sites in 5 mins.

Feature 6: Bookmark a timeline

Joy bookmarks the set of time she visited all the networking websites, next time she could just search “8 PM favorites sites ” to do the same surfing.

INSPIRATION

Thanks for the inspiration of Alex Faaborg, Mike Beltzner, Jenny Boriss, and Aza Raskin. They are my coolest co-workers! Thanks for Jesse Ruderman‘s editing! I’m also highly inspired by Stumble and Clipmarks.  Jesse James Garret said my video reminds him of Sony PSP interface. You could trace back to my previous project 3D conceptual UI and understand why my UI design sometimes looks not like UI at all.

DESIGN THINKING

1. The best UI is NO UI.

When I worked in Microsoft, my boss Dave Vronay said this sentence to me many times, he used that as an example that why so many people hate Microsoft products. He said if the UI component is dominant on the screen, it’s gonna distract people’s attention all the time and reduce their working efficiency.

Usability is not the only concern about the concept of “Zero UI“. We are not familiar with buttons and drop-down lists menus when we are still a baby. We tend to grap things, drop things, pick up things in a more natural way (Terry Winograd suggests that we interact with the world around us in three main ways: manipulation, locomotion, and conversation). When we focus on finishing a task, we never notice the way(interface) we approach the task. We are living on a ZERO-UI world, so Mark Weiser brings about the idea of ubiquitous computing.

Zero UI is not “sleek graphics + silver borders + minimum interactive transitions”. We need to work very hard to make the UI system “invisible”, or invisible enough. That requires a solid understanding of a “Digital Life“.That requires sensitivity and reflection, and most importantly, we need great imagination.

In the last past 50 years, computer invades our world truly like a monster. Sadly we built a bad habit – we got used to a monster-UI style. We are like a guy in jail hanging out only with guys, over 50 years, gradually lose the taste of real beauty.

ZERO-UI

• Users never notice the UI when they are working on a task
• Through the UI, they only see themselves, not the designer who design it.
• They feel happy using it
• They never think of how to use it, they just do
• When they stop working, either just a glance, or a long-time gazing to the UI, they could be emotionally touched by the designer’s passion and love to her work.
• They forget they are working in a computer, and think about nature when they are using it.

2. Using 3D in a 2D’s way.

The challenge of navigating through a 3D space is that people get lost too often. People who loves 3D are CG people – Don’t know why simply press the alt key and use the mouse navigating brings so much satisfaction to me) .Unfortunately normal users don’t. So far by reviewing a lot of 3D UI work, I found the big problems is: None of them are really making the 3D space”useful”. They are so many 3D for showing off purpose, 3D for thinking out of the box, 3D for getting people’s attention. So the question is: How do we benefit from the form(3D) to make the content(2D) more intuitive?

Combining 3D and 2D

• Never move X, Y, Z at the same time.
• Avoid forcing users to navigate through 3D space, if the purpose is to show off.
• When users begin to get lost in 3D space, immediately switch back to 2D navigation.

3. No buttons.Only use buttons if you have to use it.

4. Touch. Stimulating 5 senses in a subtle way.

5. Devotion. Good design should make designers happy, too.

TODO

Special thanks to all the friends caring about Mozilla, I hope you could leave your real name for me to credit!

1. History can be sorted by time spent over a website

2. Tracking the amount of time you spend on certain web sites may help people realize they have a surfing addiction.

3. Content could be tagged and the relationship between tags could be represented in the form of a graph

4. Images could be searched by predominate color or range, or combination of colors

5. It can also describe what the bits of information look like, similar to files, they might have an icon associated with it. The environment can take all of this information and interpret it into objects in its world.

6.build layers on top of the familiar html web page.

7.enso comment

8.Name the timeline “life stream”.

9.search words pan out of the web page

10. non-linear timeline

11.build mental model for different reason of bookmarking

12.sub-categories

13.ambient light

Firefox 3 is undoubtedly a very good browser for now, but in order to keep the top of the game in a long run, it is very necessary to explore the new possibilities for next generation’s of web browser.

We noticed there’re some hot trendy topics in interaction community, we assume those thoughts could be applied into a Firefox x.0. But we cannot just follow, we need our unique vision. It is valuable to think about branding and marketing strategies as well as user experience.

Personalization

Now as the web culture becomes both social and personal,Firefox survives today partially because it provides extensive add-ons and easy customization tools catering to individual needs. However ordinary users only understand the basic functions of the browser, not used to download plug-ins or customize their Web browser, which allows them only passive get, not actively browse the Web and fully enjoy the fun of absorbing information.

Possible solution 1
Improve Firefox add-on site, using with a more humane manner to give users a certain package of their favorite plug-ins, say, for 20-24-year-old single women white-collar users, recommended a particular combination of firefox plug-ins, etc., including visual history viewer, bookmarks sharing, embedded calendar, and to recommend a bookmark list, including the facebook, NYT art, Fashion, Salon, and so on for their lift-stage. Another example for a 30-year-old java male programmer, recommend a package contains firefox Firebug, simplified interface, power user keyboard UI extension, and a bookmark list: slashdot, careerbuilder, so on and so forth.
Possible solution 2
Make firefox smart enough to learn the user’s daily behavior, building a user profile so that Firefox could gradually do personalization by itself.(Pop up a recommendation to install a extension when Firefox thinks you need it).

Context awareness

Response to the user smartly in different circumstances, identify the user’s needs and provide appropriate help accordingly. Note this “context” indicates not only real life,but also the “Internet life”. Internet users build a digital self alone with their browsing activity, understanding this digital-self is equally important to their real self.As browser goes to mobile, browser calls for the feature to know what people need, for instance, provide coffee sites when users are in starbucks, pops up bank sites when users feel like they need to check their bank info immediately without typing in the URL.

Human computation

One of the best traditions of Firefox browser is a awesome community support, indeed there are many enthusiastic users find bug or improve the code. But most of them focus on the technology improvements, not many design improvements. To survive in web 2.0 , follow a user-centered design approach is very necessary to a browser design. This is not to say we should carry out a large number of user research and to make the decision quantitatively, but the use of a more relaxed and enjoyable way, enabling users to participate in the process of design, actively involve into firefox browser’s development, concern Their own user experience, and be able to help each other, provide a large number of excellent idea to be adopted by the Firefox. During the process it generates a huge market and branding benefit, further more the countless human resources in helping to improve our Firefox, view the Internet in our own “firefoxy” way.

Intuitive UI and touchscreen

The appropriate concise and beautiful interface makes people feel it is more functional. Intuitive UI usually fits people’s navigating habit, cause less trouble and save more time, while giving people the enjoyment of interactive experience.A subtle animation could bring a lot of satisfaction, even it actually waste some time.

Here’s a mock up for a website history visualization. when the mouse rolls over, triggers a book-flipping preview animation, then you could click to get a pull-down menu.

History & Future: Imagining the web browser of 2015 [faaborg, wei]

• size: 100-200 people
• equipment: projector & screens
• style: free thinking, open brainstorming, inspirational
• timing: early in the day, anytime during the week

What are people doing with web browsers [wei]

• size: 50-100 people
• equipment: projector & screens
• style: presentation & discussion
• timing: end of dayish

Yes, I have been here for almost one month, and I found I am deeply in love with Mozilla and firefox – it sounds a little bit exaggerated, especially when the words came from people like me who is easily getting tired of a new environment – I left China to seek the freedom, I left Yale because I don’t like lofty artistic approaches, I left Microsoft because I hate their bureaucracy and their ravage on the users,  and I choose Mozilla and wish I could stay. Of course, it might because I have a awesome mentor here who writes awesome inspirational blogs, or because I have a awesome boss who gives me 100% freedom allowing me to do awesome things I want to do, or because I have awesome co-workers who are lovely in a awesome geeky way..bla bla bla, I think the ultimate reason is, I am attracted by Mozilla(firefox)’s culture. Designers should accomplish their goals by making the users happy(Not only make yourself happy Yalee dudes), and here in Mozilla, every tiny things I do, I am on my way of making millons of users happy – It makes me so exciting whenever i think about it.

Interestingly I like Mozilla somehow because it lacks of something(Someone said if you love something because its flaw, then it means you really love it). It doesn’t have a perfect system of integrating marketing, developing, design and research together(We don’t do user-centered design much, designers are not even working tightly with branding strategy specialist and architecture engineers, etc), which makes the whole thing beautiful in a eastern way-everything is relatively free-formed, fits Richard Buchanan’s plastic cross rules of interactivity. You see a lot of potential – and there’s a huge community back you up. When you see it, all the theory you learn from school flies away: Oh yes, a free product could be this successful without a rigid mechanism behind it. And look at the name – Firefox, it reminds me the fairy tales of blue bird in my childhood, it gives an impression of speed, power, intelligent and sorrowful rebellion for some reason, which encourages you to believe that a software could be this emotional and romantic…never mind.

Due to the lacking of time, I’ll stop my compliment here otherwise it becomes an excessively nonsense. One thing I’ll say is I never know what a web browser will be look like in 2015(I only know that year is important tome because I’ll turn in 30). I also feel sorry that 32.5% of people in my survey said they are quite happy with the current web browser and don’t wanna any change, and 78.5% of people said they don’t wanna web browsers to be smart, emotional and considerate, and 31.5% of people even wish we could design the web browser as stupid as possible -  I have to claim sadly I’ll basically ignore all your feelings in my further research. One big problem of current software design is we are lacking of female imaginations(and 50% of users are females).

Yes, what are people doing with web browsers? What can we do in the web browser in the future? We could run operating systems in a web browser, we could subtract the information on the websites and visualize them in the browser, we could be emotional attached to the web browser because we use it so often and it becomes the only interface in our personal computer… If any of you have read the book of Narnia, the web browser is like the world with all the lakes, where each lake represents a unique world, new or old. And the world with all the lakes are the world beyond all the worlds.

Design must be culturally different. For example, QQ,Baidu, Xunlei, Kugoo, Emule and PPstream are the most popular websites in China.  Those product’s interface looks fairly bad: noisy, ugly, messy information crammed in an awkward way – but Chinese people buy it. EBay, Google and Amazon fail because their websites look so deserted in Chinese people’s eye. I think Firefox should try to win Chinese people’s heart because they click the advertising more often than American people do – that explains why China are so poor because Chinese waste too much time on inquiring unneeded information such as which star fail to marry which star, or which product is 1 cent cheaper. Good news for Mozilla.

So much for today.

Indeed.Organizing bookmarks is one of the worst things I’d like to do by myself – I do need a artificial intelligent existence to do this for me – it is a tedious, boring and disgusting user experience for our human beings.

For firefox 3, the awesome bar is an extrodinary feature reducing people’s laber and enhancing usibility and fun. However, people frequently claim they need to liberate themselves by having a more easier-to-use bookmarks system. As both designers and users, we are responsible to discover how, why and what people need for a perfect bookmarking system. A challenge is how to combine HISTORY, BOOKMARKS and Other things together based on TASK instead of by FEATURE.

I want to say something about why people need a “Read it Later” button. In most cases when people are trying to bookmark a page, they have several reasons: A. I like this website I’d bookmark it whatever. B. I’d like to read it later. C. This website contains something really important to me(a receipt, a printable page or a personal info).D. I’d like to share this website with my friends. E. This website contains a tool that I use quite often. F. Other reasons.

In the survey I did last week, people hate bookmark for some reasons: A. Too many bookmarks. B. Forget the reason initially bookmark it. C. Searching is much faster than bookmarks. D. Hate the feeling being forced to be organized.

If we compare the clothes shopping experience to bookmarking websites – we find there’re so many commen things. Before people go to check out, they need to put their liking clothes into the basket, they need to try it on in the fitting room, they need time to make choices, balance the budget they have and the price of the clothes – similarly, when people need to bookmark a website, they may also want to put they desired websites in to a temperary “CART”, read it later and organize it, balance the quantity of current bookmarks and the searching speed if they try to find a bookmark. Then they go for check out(Bookmark it in a desired way).

We didn’t give people oppotunities to select, organize and digest in the process of shopping bookmarks. People in the real world tend to bookmark every website whatever and whenever they need – they forget the reason why they bookmark it and feel very bad about themselves – interesitng people don’t quite blame the software monster-like developers but themselves.

Yes, adding a “CART” feature before people check out their bookmarks. It is a very smart decision. Maybe a “CART” is not even enough, people also need a trash can to find the stuff they throw away. But I’ll do more design research today to find what people really need by performing a task. I do believe, Task-oriented design process is a new way of solving real-world software design problems, especially for simple software like browsers, by summerising and reorganizing the task-flow people tend to do when visit a website, the browser will behave much more personalized and considerate, in another word, more user-friendly.