Another reason to hate live search
I searched “wei zhou” in live search, pretty much just for curiosity, then this result pops out first:
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.
Check it out! it’s really fun!I’ll update my portfolio in the winter.
Service design & three Mozilla interns get together
This story can only happen in Carnegie Mellon University. I always love CMU over Yale, because CMU promotes team work, I can work with people from different backgrounds here, where designers, psychologists, MBA students, HCI researchers and computer scientists get together, and we work with real clients all the time. I’m a way happier than I was in Yale.
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!
Digital Self
I haven’t updated my blog for a while. The FLU is really killing me. I just got to know there’re different kinds of FLUs, and I am the lucky person who is got attacked by more than one.
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.
Internet Self
I’m recently obsessed with human identity, perception and self-expression. In Stacie’s course ‘ Information and interaction’, I proposed to do a 6 weeks project naming “Digital Self”. The goal is quite simple: Explore the difference between your real self in the society and your digital self on the Internet. The method is even simpler: by analyzing people’s daily browsing activities. I plan to build this piece by Processing(as usual), the final delivery will be an “artistic” interactive piece – I’m suffering with CMU’s rigorous design research, usibility tesing and seminar reading education, it’s time to have some fun.
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.
Bauhous and Google products
Actually I like Google products over a lot of others. But there’s something out there makes me not a big fan of it. Eventually I cannot endure it anymore and decide to write something. I think Google, being considered as one of the leading software companies in the world, has the responsibility to make their product user experience not suck, not only in terms of usability, but of aesthetics.
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.
Scratching the surface
I have been using iPhone for three weeks now. Here’s a normal iPhone user daily schedule.
- 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”.
Debriefing and Proposal
My internship ends at Aug 23th, meaning officially I only have 15 days to contribute to Firefox. I will continue working as a contributor for Mozilla at school, so anybody needs a UI designer, a flash AS coder, a web designer or a CG artist and dev, ping me “Wei”on IRC or email me at weizhou@andrew.cmu.edu.I’m more than glad to help.
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?
Lifestream – Redesign history and bookmarking – Wei Zhou
MISSION
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
Browser 2015 topics – from wiki
Introduction
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.
Plan
I am going to prepare two presentations on the Summit. One is about next generation’s web browser, the other one is about user research on web browsers. I copied the wiki text here and today I need to come up a plan.
History & Future: Imagining the web browser of 2015 [faaborg, ]
- 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 []
- 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.
