Lifestream – Redesign history and bookmarking – Wei Zhou

Posted on July 7, 2008

97


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

Posted in: Uncategorized