Labs/Design-Challenge/Uni-Fall09: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
 
(97 intermediate revisions by 11 users not shown)
Line 1: Line 1:
= Mozilla Labs Design Challenge: Uni Fall '09  =
= Mozilla Labs Design Challenge: Uni Fall '09  =


== Links and Precedents  ==
== Research ==
=== Links and Precedents  ===


*Useful Add-on | [https://addons.mozilla.org/en-US/firefox/addon/13316/ Link]  
*Useful Add-on | [https://addons.mozilla.org/en-US/firefox/addon/13316/ Link]  
Line 19: Line 20:
*[http://www.cs.umd.edu/class/spring2001/cmsc838b/Apps/presentations/Matthias_Mayer/index.html Visualizing and Analyzing Web Browser History Data (2001)]
*[http://www.cs.umd.edu/class/spring2001/cmsc838b/Apps/presentations/Matthias_Mayer/index.html Visualizing and Analyzing Web Browser History Data (2001)]
* Top 10 Ways Best Ways to Manage Firefox Tabs [http://www.friedbeef.com/top-10-ways-best-ways-to-manage-firefox-tabs/ Link]
* Top 10 Ways Best Ways to Manage Firefox Tabs [http://www.friedbeef.com/top-10-ways-best-ways-to-manage-firefox-tabs/ Link]
* Lost bookmarks [http://kb.mozillazine.org/Lost_bookmarks Link]


==Desires==
===Desires===
* Speed, get what I want fast
* Speed, get what I want fast
* Save current state
* Save current state
Line 38: Line 40:
* I want to visualize my usage patterns
* I want to visualize my usage patterns
   
   
==Obstacles==
===Obstacles===
* memory
* memory
* not right info
* not right info
Line 58: Line 60:
* No mechanism to do it
* No mechanism to do it


== User Stories  ==
=== User Stories  ===
[[Labs/Design-Challenge/Uni-Fall09/User Stories]]


"I often remember what a page looked like, something about its composition and color. I'm usually diligent with marking sites I'm interested in with Delicious, but I very rarely check them later on or even bother to mark them until I do a mass 'tab close'. Plus, tags don't help me in this situation. I wish I had something that could use my 'fuzzy' recollection of a page to find it again." [[User:Mikejedw|Mikejedw]]
=== Survey Questions  ===


<br>
''Based on the user stories and other initial research, what kinds of questions about browsing history could we formulate to find more perspective on the problems we've established? Fill in any number of questions below. They can be short answer, multiple choice, [http://en.wikipedia.com/wiki/Likert_scale Likert scale] (1 to 5 or 1 to 7, strongly disagree to strongly agree), true/false, or anything else you find appropriate.''


"Even though I often bookmark the websites that I&nbsp;feel interested in, I usually don't use the bookmark because I&nbsp; don't categorize it that much. I use the history from the location field by typing a few words, however in this case it is not easy to find specific page which I really want to visit again and I have to navigate from some of the page again. In this case we can't use forward button to re-generate (revive) the path that I have been through, which if possible, might be helpful for tracing and find the destination more easily." [[User:cre8ive|cre8ive]]
[http://www.surveymonkey.com/s.aspx?sm=gCTIyg0qVLLmWSas9hiY3w_3d_3d Take the survey!]


<br>
[[Labs/Design-Challenge/Uni-Fall09/Survey_Questions|Student-Created Survey Questions]]


"I use tabbed browsing because I often find multiple links I'm interested in on a page. I tend to jump around a lot when I'm surfing or looking for something. I'll then keep those tabs open, read them and then close them when I'm done. But then if I want to go back to that tab, I can never figure out what path I took to get there. I know there's the 'Recently Closed Tabs' in the Bookmark dropdown, but I find that it's not organized well and I can't find that 1 article that I was really looking for, so I have to open them all up again which is annoying, and then search through them again.  I wish there was a way to tag the article I was interested in, so my 'Recently Closed Tabs' section would remember that." [[User:aarondruck|aarondruck]]
=== Survey Responses ===
* [http://spreadsheets.google.com/pub?key=tcxkmIx3VHsGyOONOX1K_XQ&output=html Google Spreadsheet Page of Parsons ACC Lab results]
* [http://ixdstudio2009.ning.com/profiles/blogs/user-research-results-and Results from the University of Sydney class]


<br>
===Ideas===
 
"I prefer adding tabs to adding windows when opening pages. It's easier to navigate between the tabs because they are always locked at the top of browser window, and there are keyboard shortcut to tab through them. Windows tend to get lost and require more clicking/mousing around = more time. Even the keyboard shortcut for Windows is time consuming because you have to key through each one to read the title. However if I have too many tabs in one window I might start a new window, especially if I think I'll be opening lots of related tabs from a particular page.
 
One problem with tabs is when you right click on a link and 'open link in new tab' the link open in a new tab as though it's the start of a new browsing chain, you can't hit Back to see your path to that page. So if you close the original tab you can't get back to where you've been. It would be nice if you could 'open link in new tab' and the browsing history/path was transferred into that new tab." [[User:lbtran|lbtran]]
 
<br>
 
"I find myself with multiple windows open, each containing dozens of tabs related to a certain topic or links from articles I've read in single session. I never close my browser because I don't want to lose the tabs. I wish there was a way to save windows of tabs to come back to later, or a way to save windows of tabs under different categories." [[User:and.bradshaw|and.bradshaw]]
 
<br>
 
"I was trying to show a useful tutorial to someone but I forgot the link. It wasn't good enough for my bookmarks and I visit about 100 sites a day. It would have been nice to tag the tutorial in my history as a tutorial and give it a star ranking. I think tagging and star ranking can get rid of the mess that bookmark organizing is entirely. I also have the problem of never wanting to close a useful tab because I know I will lose it.  I sometimes put off shutting down my system just because I want that one site open and I don't want to lose it." [[User:drisc275|drisc275]]
 
==Ideas==
* spotlight for history
* spotlight for history
* use color
* use color
Line 117: Line 108:
* Quick history view for each tabs
* Quick history view for each tabs


== Other Resources ==
== Prototypes ==
=== Jetpack Experiments ===
*Halloween | [http://a.parsons.edu/~tranl/cclab/jetpack/halloween/halloween.html Link]
*Hassel | [http://a.parsons.edu/~druca992/mozilla/jetpack/hassel.html Link]
*New York Times - Times Wire headlines visualizer | [http://www.cre8ive.kr/blog/?p=1539 Link]
*JetTwitt - Instant Tweet in Firefox | [http://www.cre8ive.kr/blog/?p=1738 Link]
*FML | [http://a.parsons.edu/~brada373/fall2009/cclab/jetpack1/myfirstjetpack/myfirstjetpack.html Link]
*Current Date and Time | [http://a.parsons.edu/~geigd983/CCLab/JetPack/DateAndTime/ Line]
*Rock Paper Scissors decision maker [http://a.parsons.edu/~simpl191/Mozilla/rps_jetpack.html Link]
*DiggThis - shows the current top headline on Digg, updating every two minutes | [http://a.parsons.edu/~mosem551/share/diggthis.html]
 
=== Low-Fidelity Prototypes ===
* Colorwheel History | [http://a.parsons.edu/~druca992/blog/?p=121 Link]
 
* History Filter/Search Pop-up (PDF) |[http://a.parsons.edu/~tranl/cclab/paperPrototype_HistoryPopOut_cues2.pdf Link]
 
* Integrated History and Tagging (PDF) |[http://a.parsons.edu/~tranl/cclab/paperPrototype_integratedHistorySearch.pdf Link]
 
*Laura- Unique History (PDF) |[http://a.parsons.edu/~simpl191/Mozilla/History/Laura_Unique_History.pdf Link]
 
*Margaret - First Approach to Scroll Wheel + Tree Path Viewer [http://a.parsons.edu/~mosem551/share/history_miner.pdf]
 
*Danny - History Sidebar and filter setting [http://a.parsons.edu/~geigd983/blog/?p=192 Link]
 
=== High-Fidelity Prototypes ===
 
* version1_andrea |[http://a.parsons.edu/~brada373/fall2009/cclab/highRes/ Images]
* Lien/Margaret's Super Awesome Bar | [http://a.parsons.edu/~tranl/cclab/mozilla/ Images]
* Yoon - Path History (HD 1280x720 Quicktime MOV 85MB, Please 'Save Link As') | [http://www.cre8ive.kr/blog/wp-content/uploads/Mozilla_PathHistory_H264.mov Link]
* Yoon - Path History image 1 |  [http://www.cre8ive.kr/blog/wp-content/uploads/Mozilla_PathHistory1.jpg Images]
* Yoon - Path History image 2 |  [http://www.cre8ive.kr/blog/wp-content/uploads/Mozilla_PathHistory2.jpg Images]
* Yoon - Path History for each TAB 1 |  [http://www.cre8ive.kr/blog/wp-content/uploads/Mozilla_PathHistory_Tab1.jpg Images]
* Yoon - Path History for each TAB 2 |  [http://www.cre8ive.kr/blog/wp-content/uploads/Mozilla_PathHistory_Tab2.jpg Images]
* Yoon - Path History for each TAB 3 |  [http://www.cre8ive.kr/blog/wp-content/uploads/Mozilla_PathHistory_Tab3.jpg Images]
*Laura - Unique History (PDF) | [http://a.parsons.edu/~simpl191/Mozilla/History/Laura_Unique_History_HiRes.pdf Link]
* Margaret - Scroll Wheel + Tree Path Viewer [http://a.parsons.edu/~mosem551/share/history_miner.png]
* Chris, Ramsey, Aaron, Kurt - [http://www.00danger.com/mozilla/mozSimulate04.mov DogTag]
 
=== High-Fidelity Prototypes (Nov.09) ===
* Yoon - Path History |  [http://www.cre8ive.kr/blog/wp-content/uploads/PathHistory_DongYoonPark.pdf PDF Document]
* Andrea - ReVisionining History |  [http://a.parsons.edu/~brada373/fall2009/cclab/highRes_v2/BrowserHistory.ppt PPT], [http://a.parsons.edu/~brada373/fall2009/cclab/highRes_v2/objectmodeldiagram.pdf ObjectModelDiagram], [http://a.parsons.edu/~brada373/fall2009/cclab/highRes_v2/aarvarks2_v2.pdf Updated Image]
* Margaret/Lien - History Sphere (updated 11/16) | [http://a.parsons.edu/~tranl/cclab/mozilla/historySphereDocumentation.pdf PDF Document]
* Laura -Unique History- Timeline option | [http://a.parsons.edu/~simpl191/Mozilla/History/timelineHiRezIter2.pdf  Timeline Only], [http://a.parsons.edu/~simpl191/Mozilla/History/HiRezUniqueTimelineList.pdf Combined list and Timeline option]
 
=== Final Prototypes  ===
 
==== Parsons  ====
 
*[http://www.cre8ive.kr/blog/?p=1860 Path History by Yoon]
*[http://a.parsons.edu/~tranl/mozilla/ Browser History Documentation by Lien]
*DogTag, by Kurt Bieg, Chris Driscoll, Aaron Druck and Ramsey Nasser [http://a.parsons.edu/~druca992/mozilla/pdf/dogTag.pdf PDF] | [http://www.00danger.com/mozSimulate05.mov Video]
*[http://a.parsons.edu/~simpl191/Mozilla/History/UniqueTimeline.pdf Unique History by Laura]
*[http://a.parsons.edu/~brada373/fall2009/cclab/mozilla.html Visual History by Andrea Bradshaw]

Latest revision as of 08:25, 17 March 2011

Mozilla Labs Design Challenge: Uni Fall '09

Research

Links and Precedents

Desires

  • Speed, get what I want fast
  • Save current state
  • Prioritize
  • organized history
  • simple interface
  • share cool things
  • retrace my steps
  • fuzzy search (interpret dreams)
  • I want to see what the NYTimes website looked like last Wednesday morning
  • see my browsing trends (inc'l most visited)
  • Better integrated history in browser, FLUID
  • More specific, meaningful, and EASY bookmarking
  • I want to search my history by topic
  • I want to share my history
  • I want to mark parts of history that are important
  • I want to visualize my usage patterns

Obstacles

  • memory
  • not right info
  • i'm lost
  • the content on the site has changed
  • i'm confused
  • time
  • too much info
  • i'm lazy
  • Add to but rarely use links from Delicious
  • Lack of instant access to history, Currently have to access through menus & has New Window
  • Losing history page (gets lost among all windows)
  • Keyword search isn't broad enough
  • Browser crashing
  • Wifi browser authentication
  • I don't know how to
  • I'm concerned about privacy
  • Existing ones suck
  • No mechanism to do it

User Stories

Labs/Design-Challenge/Uni-Fall09/User Stories

Survey Questions

Based on the user stories and other initial research, what kinds of questions about browsing history could we formulate to find more perspective on the problems we've established? Fill in any number of questions below. They can be short answer, multiple choice, Likert scale (1 to 5 or 1 to 7, strongly disagree to strongly agree), true/false, or anything else you find appropriate.

Take the survey!

Student-Created Survey Questions

Survey Responses

Ideas

  • spotlight for history
  • use color
  • stars *
  • retool google maps --> history map
  • tagging system
  • customize/personalize page titles that appear in the awesome bar or history
  • Hover state for fluid way to see visual image then descriptive data (timestamp, page name, domain)
  • Timeline AND path based browsing of history
  • Keyboard Shortcut! (for instant access to history and going through pages)
  • measure scroll position vs. site time
  • Storing the keywords from the content text. (manually or automatically) right-click? select text? select, CTRL-C?
  • better search algorithm for history
  • themed windows for browsing & search
  • suggest sites you might be interested in
  • bookmarks + history = :)
  • Cache webpage locally
  • Look for a cache at that page on the web.
  • overlapping and/or anchored window. more quick popup?
  • Allow user to attach their own semantics to their history
  • Be able to target what you are searching (keywork, title, url)
  • Create an iTunes model for sharing histories
  • Share locally via something like Bonjour
  • Bookmarking the time
  • Recording start/stop function
  • Integrate with personal calendar events
  • custom ranking of bookmarks
  • Design ones built around more specific & useful info
  • Coverflow history browsing mode on Safari
  • Google Search History Browser | Link
  • Google Reader Link[1] (can record how long you are on the article and it means you are interested in that article)
  • Quick history view for each tabs

Prototypes

Jetpack Experiments

  • Halloween | Link
  • Hassel | Link
  • New York Times - Times Wire headlines visualizer | Link
  • JetTwitt - Instant Tweet in Firefox | Link
  • FML | Link
  • Current Date and Time | Line
  • Rock Paper Scissors decision maker Link
  • DiggThis - shows the current top headline on Digg, updating every two minutes | [2]

Low-Fidelity Prototypes

  • Colorwheel History | Link
  • History Filter/Search Pop-up (PDF) |Link
  • Integrated History and Tagging (PDF) |Link
  • Laura- Unique History (PDF) |Link
  • Margaret - First Approach to Scroll Wheel + Tree Path Viewer [3]
  • Danny - History Sidebar and filter setting Link

High-Fidelity Prototypes

  • version1_andrea |Images
  • Lien/Margaret's Super Awesome Bar | Images
  • Yoon - Path History (HD 1280x720 Quicktime MOV 85MB, Please 'Save Link As') | Link
  • Yoon - Path History image 1 | Images
  • Yoon - Path History image 2 | Images
  • Yoon - Path History for each TAB 1 | Images
  • Yoon - Path History for each TAB 2 | Images
  • Yoon - Path History for each TAB 3 | Images
  • Laura - Unique History (PDF) | Link
  • Margaret - Scroll Wheel + Tree Path Viewer [4]
  • Chris, Ramsey, Aaron, Kurt - DogTag

High-Fidelity Prototypes (Nov.09)

Final Prototypes

Parsons

Retrieved from "https://wiki.allizom.org/index.php?title=Labs/Design-Challenge/Uni-Fall09&oldid=291717"