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

no edit summary
No edit summary
 
(94 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]]
 
<br>
 
"The present firefox bookmark files are really hard to manage for normal users. If you search it on google, you will get an answer with a long location address (for the bookmark files) from your root path on the hard disk. What makes the matter worse, firefox 2.0 and firefox 3.0 use different formats to save the bookmarks. Firefox 2.0 uses a more static, page-like organization, while firefox 3.0 uses a database based organization that facilitates bookmark searching. But all these are too difficult for normal users to figure out. I remember that once my system crashed, and I had a firefox upgraded from 2.0 to 3.0 on the system. I trusted my experience and backed up the bookmark file under the 'favorites' folder. After I reinstalled my system, it turned out that I had only backed up the 2.0 version bookmark file that could no longer be used in firefox 3.0. And the real version 3.0 bookmark file was stored in a totally different place. What a frustrating experience!" [[User:Myu|Myu]]
 
<br>
"I am a heavy tabbed browser user. Sometimes I have up to 6 separate windows with different subjects organized by window. Often when browsing, it is a mix of regular sites that I visit like gmail or the new york times and new sites that I navigate to from links at the older sites.  In reviewing sites that I normally visit and unique sites, it's difficult for me to go through the history and find how I got to the unique sites because the history tree shows only general information about the frequently viewed sites, and no images that might give me a clue to how I got from one place to another. After enough browsing, I can't trace back to determine how I navigated to each site or when a tab became a new window."
[[User:lsimpson|lsimpson]]
 
==Ideas==
* spotlight for history
* spotlight for history
* use color
* use color
Line 125: 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]
2

edits