Medien Wiki - User contributions [en]

IFD:Designing For Action/Bastian, Martin

2011-03-18T14:06:00Z

Ericreiss:

== This article is a stub...==
For more details check out: [[IFD:Designing For Action/Nutzerforschung/BastianMarv|This page]].

==Description==
Our goal is to create a bookmarks system that doesn't require the user to think about how he needs to organize his bookmarks. We want a straigt forward solution where the user only needs one klick to bookmark a page and everything else will be done by the browser.
Trying to find a certain page the user will be presented with a "tag-cloud" like overview of his bookmarks. He will also be able to specify the output of the cloud via text-based search input.

==Research==
Full interviews and Research evaluation [[IFD:Designing For Action/Nutzerforschung/BastianMarv|here]]

===users goals===
* keep interesting, rare, hard to find pages at the tip of their fingers
* organize a simple structure to do so, without supplying any additional information
* refind pages easily without having to big of a thinking-process

===users main issues===
* users rather leave tabs open to "refind" pages because the bookmark system as of today requires a lot of user-based thought and action

''Was stoert dich beim heutigen Bookmarks-Konzept?''
''bookmarken ist zu aufwändig erst noch sortieren und speichern - eigentlich will man ja nur ein tab weniger haben.''

* bookmarks are too static, folder based (hierachical) sorting doesn't represent the way we think nowadays

''Was stoert dich beim heutigen Bookmarks-Konzept?''
''Einmal alles. bookmarks sind als statische ordner gespeichert nicht als datenbank einträge die von ordnern losgelöst sind. das bookmark sollte autonom behandelt werden und eher nacht tags oder meta angaben sortiert werden.''

* because the user is lazy most of the bookmarks are thrown into one folder, thus the whole idea of bookmarking becomes obsolete

* user will more likly use text based search (history, google) to refind information, but the bookmarks system doesn't support this

===our Goals===
* bookmark websites with a single click - minimize workload of the user
* automatic tagging and clustering of bookmarks through text recognition - create a userfriendly overview of bookmarked pages
* supply a dynamic text based search engine - refind pages in a familiar way
* have a very minimal and sleek design - not distracting the user

===our non-goals===
* user specified tags
* static sorting of bookmarks
* fancy graphics or even animations in the interface

==Sketch==
[[File:bastian-martin-konzept.jpg]]

==Concept==

===Which problem did you identify?===
Users...
===Why are current systems unable to solve this problem?===
They are unable to solve this problem because they...{your text here...}
===What research findings led you to your first concept?===
In my reseach I...{your text here...}
===In 140 characters, what is the essence of your project/solution?===
{your text here...}
(If you really need more space, describe how you would present your concept to your mother while you ride an elevator to the top of the Fernsehturm in Berlin. although this is the tallest free-standing building in Europe, it also has Europe’s fastest elevator. You’ve got 40 seconds to make your case)

==Implementation==
===How did you ensure that a beginner can use your solution?===
{your text here...}
===What makes your solution more useful or efficient than current products?===
{your text here...}

'''(Essential: Sketches and/or Video to illustrate the interaction)'''

==User tests==
===How did you test your design?===
{your text here...}
===What new problems did you identify?===
{your text here...}
===What did you change following your user tests?===
{your text here...}

==Mentor Comments==

===James Kalbach===

* Good summary of your research. It really helps to see into what you did upfront. The interviews seem a little short, though. Also, you might have done better to have given people a real life scenario and observed them as they interacted with a website they wanted to recall later.
* I like the fact that you have alternative sketches. A little more detail would have helped to get a better sense of your idea. It still seems quite high level at the moment.
* Are tag clouds an efficient way to re-find information? They seem more like a trend that's now outdated than something really useful. I'd consider other ways to organize your tags, perhaps in addition to the cloud.
* Have a look at Zemanta--a tool for automatic tagging.
* Also check out Facetag (http://www.facetag.org/), a way to browse tags by different facets.
* In the business world, the ability to communicate your design ideas is as important as having them. Managers and stakeholders may have different priorities with a given project or initiative, and you will have to persuade them to see your point of view. Unfortunately, you didn't complete the template for your project so we can't see how well you put your thoughts in writing.

Overall, you've done good research and have come to meaningful conclusions at the beginning. It's a shame you didn't follow through with more detailed designs and a complete description of your project.

===Cennydd Bowles===

Your understanding of the problem and the principles behind your design are good. Given the cognitive burden bookmarks currently place on users, it makes a lot of sense to push this complexity to the browser instead and give users as little work to do as possible. However, generally there isn't enough detail here, particularly around information architecture. How will the browser generate the tags? Are there certain words it would have to eliminate?

Your sketches look reasonable although again it would be useful to have more detail around the interactions. How does the search work? Is there a type-ahead to help guide people toward tags the system holds (since they didn't choose the tags themselves). What happens for international users who spell words differently (eg UK "colour" vs US "color")? Also, think of unintended behaviour. Is it likely that users would look for ways to get around the fact they can't add their own tags?

===Eric Reiss===

You've really nailed half of the problem behind bookmarking: organizing the information. The other half is that bookmarks go out of date - although that is beside the point with respect to this project. You've also understood that even with the best tool, compliance is an issue - most people are too lazy to fill in the metadata needed to organize and re-find the information they've saved.

Cennydd pegged some of the major problems with tagging. In fact, over the past couple of years, most experts agree that tagging just doesn't work very well in a multi-contributor environment. On a personal blog, where the writer always uses the same words and spell the same way, tagging can be moderately successful. But elsewhere it is often problematical. See Gene Smith's book on tagging for a very good review of the possibilities and problems.

The details of your proposal are confusing at best. I can see where you're going from the sketches, but not the details. As Mies van der Rohe said, "God is in the details". I need to get a little religion here :)

This questionnaire is still not fully populated, which is a shame. Perhaps I would have had fewer questions if it had been completed as we mentors had intended...

IFD:Designing For Action/Vera, Mischa, Max

2011-03-18T12:28:59Z

Ericreiss:

''very cool demo. Please write a brief description and paste the interview results too.'' --[[User:JanD|JanD]] 14:37, 3 December 2010 (CET)

=Vera=

http://i.creativecommons.org/l/by-sa/3.0/88x31.png

==Concept==

===Which problem did you identify?===

The Addon should be a help for Researching. We want to give the user the possibility for further usage of citations, links and other important things in a virtual clipboard. There are many student, which use external programms like text editor, word, citavi, to save any informations. But this is a very complicated way to save informations.

===Why are current systems unable to solve this problem?===
There is a program named Zotero, which try to solve problem. But I think this is not program for beginners. The folder system is not the easiest and zotero has less methaphors. It's cover too much space of the window.

===What research findings led you to your first concept?===
I asked 5 Students about their handling with internet while investigating. They are students from history, sport, theology, computer science and german language. For all students the internet is an important place. The reasons for this are laziness and the big information flow on the internet. Most time they use google, google books and wikipedia for researching. The Students save
the collected information with extern programms, but also saving whole HTML pages or print them are common kinds of saving informations. They all have an
unbelievable fear of the loss of information.
For the Students, it is important that they can see the working area all time. Another important thing is, that they want tidyness, because this saves time. They want to use keywords which help to faster find previously saved informations. The addon should automatically identify the original author and the actual date while saving a citation. The possibility of making additional notes should be provided by the addon, because uses want to write down some possible thoughts which may occure during research.
How students will interact the GUI? The most common kind of interaction is the shortcut. Also the rightclick with the mouse is a very important.
Drag and drop isn't very common, but sometime they use it (mostly in cases when no other kind of interaction is provided by the application).
4 in 5 student don't care about sharing the investigation results or other thing related to that. One student use googledocs to share.

===In 140 characters, what is the essence of your project/solution?===

* should be a help for students
* save everything usefull
* no look to the metadata - save automatically
* further work - export to odt, doc or pdf

==Implementation==
===How did you ensure that a beginner can use your solution?===

I use many methaphors and many standards. The user can choose between add with drag & drop, contextmenu or shortcut and he can delete with a click or del. He can add topics with a simple click on plus and delete with a click or drag & drop on the recycle bin. The user can feel secure, because he has a undo button and a redo button

===What makes your solution more useful or efficient than current products?===

In my product I used Methaphors and that make it easier to use it. I think the register card System is easier to use than the difficult folder structur in zotero.

'''(Essential: Sketches and/or Video to illustrate the interaction)'''

http://www.youtube.com/watch?v=q06OaWyCJ9Y

==User tests==
===How did you test your design?===
I have testes my concept with 4 diffenrent stundents. Two tested a paperprototype, to see if they notice the buttons. The other two were tested with a quick-and-dirty programmed html-css-javascript-Prototype to test Drag & Drop and the contextmenu per rightclick. One of the student has no own computer but she has surly understand drag & drop and the contextmenu. The other testperson also understood the used techniques. Except drag & drop, the paperprototype was well-understood.

===What new problems did you identify?===
There are a few things, which I have to change in my concept, namely hide buttons behind the registercard and set the active registercard as highlighted. Otherwise I'm realy satisfied with the testing results. After the test I asked the tester "What can I do for the programm, so that you are more satisfied?" One answer was: "It would be more helpfull for me, when I can sync my collected Informations with other computers."The last answer is a really good idea we have to think about.

===What did you change following your user tests?===

If you follow the link, you can see the improved concept

http://www.youtube.com/watch?v=KDah-O3g2Wg

==Mischa Max==

===Which problem did you identify?===
Bookmarks only save a reference to a webpage. For the user most of the time a only a certain information on the Page is interesting.

===Users===
The Users we focused on are students, searching for relevant content on the net, they want to use in academic context.

===Why are current systems unable to solve this problem?===
There are some systems having an similar idea, but most of them do not integrate into the users work flow well.

===What research findings led you to your first concept?===

In our research we found out that users first collect a much information before selecting the relevant one, in a later step. To enable users to save information fast and later review it with an good overview. An other finding was that many users save the hole webpage as they fear that it will not be available later, so we decided that this should at least be an option to the user.

===In 140 characters, what is the essence of your project/solution?===
Saving relevant bits of information (url and metadata) with context and comments.

===Implementation===
Visulization of Concept here [http://webuser.uni-weimar.de/~cono0627/edu/dfa/stopmotion.mp4 stopmotion.mp4]

===How did you ensure that a beginner can use your solution?===

We used the metaphor of the Index card to make it more usable.

===What makes your solution more useful or efficient than current products?===

The Design!

===How did you test your design?===
We did a paper prototype.

===What new problems did you identify?===
Users don't feel comfortable with a Design that uses one "Index Card" per bit of information.
===What did you change following your user tests?===
The design was changed so that there is one "Index Card" per page.

==Mentor Comments==

===James Kalbach===

'''Concept'''
* You have a focused project and goal with this UI, but you've not expressed it clearly or succinctly in your problem statement. The ability to communicate intent is as important as having good ideas about a UI. Try re-wording it into a sentence or two to include who, what, where, when, and why.
* Are there any related solution other than Zotero? I'll bet there are. See the Scrapbook add-on for Firefox, for starters. You also have some similarities with MS OneNote.
* Thank you for the detailed review of the research. I'd still like to see some high-level conclusions pulled in a list. What are the top 3-5 things you learned from the research?

'''Implementation'''
* I like your use of metaphors. This could go a long way to making your idea understandable and useful.
* One problem with such add-ons is that people may not have the left panel open. Did you discover that users might not open your tool if it's closed by default?
* Thank you for your video. It really helps to explain your project and ideas.

'''User tests'''
* Good summary of the user tests. It seems you've reacted to your findings appropriately.

Overall, this is a focused project that really feels like it's intended for a specific target group. The use of metaphors is great (but that could also backfire--you have to be careful when you over-use metaphors). The video is excellent and shows you put a lot of time and thought into this.

Great job.

===Cennydd Bowles===

I like the focus of what you're tackling - it's a tighter problem than just 'bookmarking', and this often means you can be more confident about your solution. I can attest that managing citations and references is still very much an unsolved problem!

Your research mentions lots of user requirements. It would be useful to explain how you learned these - did participants simply ask for these explicitly, or did you draw these requirements out by prompting them and interpreting their answers?

The prototypes show a number of different ways to use the system; drag and drop, contextual menu etc. This allows flexibility but (counter-intuitively) can actually make systems harder to use if the user isn't sure which route they should use for which operation. Which methods do you think users will rely on the most? Which methods would they use the least? Are those methods still valuable if most people avoid them?

A bit more information on your paper prototyping would be useful, but it looks like you've responded well to your testing, and your solution shows some promise.

===Eric Reiss===

I'm delighted to see your prototype in action; the demo I saw in Weimar only hinted at what you folks were doing. Well done - I really enjoyed the video.

My concern is still with the scalability of this "spiral notebook" metaphor. Although the individual pages can be limitlessly long, the problem is the actual NUMBER of pages. In truth, although the metaphor is nice, you are basically creating an hierarchical filing system - folders and pages. The key to your project, as I see it, is your ability to tag and file individual content elements rather than pages. You've come a long way, but I'm not convinced that this would solve my personal bookmarking problems (hundreds of bookmarks in 70+ folders). However, if I were to decide to collect content related to a specific client/project on which I was working, this solution might work; one notebook per project, much the way the drawing program Penultimate works on the iPad.

But all in all, Vera, congratulations to you and your team on a VERY solid project!

IFD:Designing For Action/Sophie, Jule, Tristan, Laura, Alex

2011-03-18T11:52:40Z

Ericreiss:

We thank our Mentors for their very helpful comments and based on their suggestions tried our best to correct and improve our site ^-^ 
11-03-17

==Concept==

*Which problem did you identify?
Based on our research on the use of bookmarks, we decided to revise the concept of how users organize and structure them. In interviews with other students who are quite experienced in browsing and friends and family members who only casually move through the internet, we came to the conclusion, based on our results, that most users only utilize the very basic functions provided by the bookmark system as it is today. They set a bookmark and then forget about it or have to search through all the accumulated bookmarks. Only a few people manage their bookmarks in folders. Websites that are not visited regularly often don't even deserve a bookmark and some users even prefer to search the internet again for a specific link, rather than to search through all of their bookmarks. We tried to find a way, to make the organizing and re-finding of bookmarks easier for the user. 
*Why are current systems unable to solve this problem?
The current bookmark system of the Mozilla Browser is unable to handle this problem because it is to elaborate for most users. Even if it is easy to structure something with the folder hierarchy, it just takes too much effort. Not to forget how easily and quickly a bookmark can slip through the cracks, never to be seen again in a 10+ folder structure. Creation of a new folder and the editing of a bookmark itself take time. Users want the creation process and general managing of the bookmark system to be fast and simple, without much editing or maintenance on their side. 
*What research findings led you to your first concept?
Through our research we found out that our test-persons use their bookmarks only for sites they visit regularly and then the bookmarks would most likely be placed in the toolbar, where their position and icon helps to rapidly recognize and open the desired page. That shows us that the positioning and appearance- even as an icon- of a bookmark means more to users than a name or some Meta information they have to laboriously edit and supply. 
*In 140 characters, what is the essence of your project/solution?
Our goal is to make organizing bookmarks easier and more effective by introducing a visual, desktop-like display, using drag & drop for grouping/positioning.

http://i.creativecommons.org/l/by-sa/3.0/88x31.png

==Implementation==

*How did you ensure that a beginner can use your solution?
We want to use a visual, desktop-like display that users are already familiar with. Everyone that works with a computer knows how to organize and move folders and other things on their desktop around. The creation of a bookmark doesn’t really change that much, the user merely saves the bookmark to the Bookmark Wall and can, if he wants to, choose a folder to save it in. To position it on the Wall he can simply drag it around or drop it into a folder. Through the use of a zoom-function inside of the folders we try to give the user more space so they don’t need to limit themselves to just 100 bookmarks or so. If the space capacity of a folder is maxed out but the user still wants to add more bookmarks, the previews will become smaller and more list-like to accommodate the new bookmarks.
 
*What makes your solution more useful or efficient than current products?
Our solution is more efficient and useful for users because our concept works mainly with visual representations of bookmarks which users are able to identify and recognize effortlessly and swiftly. They can find bookmarks more efficiently through their position and appearance than just through a name, edited or not. We try to motivate and encourage even the users, who don't fanatically organize and maintain their stuff because it is to slow and arduous a task, to use the bookmark system. It is easier for them to organize their bookmarks using their own system and structure with a more visual and graphical representation of the whole bookmark system.

==User Research==
[[Media:Designforaction lauraj research.pdf|Interviews]]

====Results====
*there is a clear separation of frequently used pages and the “treasure trove”: the habits of the user decide if they are stored in files with a command structure or not
*frequently used pages are seldom expanded and liable to a static hierarchy, therefore they have a fixed position and an easily recognizable icon
*the bookmarks in the treasure trove are sometimes renamed to fit the user, but mostly not bothered with
*users which are very familiar with the existing bookmarks system are unsure of and even fear the changes the system could undergo, because their usual system of recognition and memorization of bookmarks could become unsuitable
*bookmarks are mostly only edited if they’re used frequently, otherwise it’s not worth the bother
*easy synchronization between different devices should be possible as some users tend to use their bookmarks on more than one device: the new visual implementation should be able to be viewed with different resolutions
*the user wants to categorize and file their bookmarks fast and without much effort
*it’s important that they don’t have to dedicate much time to create a bookmark and everything stays cleanly arranged
*if there are no Bookmarks, instead of entering known URLs into the address-bar, they are typed into the search-engine-bar and let google make a clickable link out of it
*characteristic recognitions of webpages (related to the possibility of using screenshots) are coloring, position of the navigation, logo and funtionality
*bookmarks don't replace the search-engine, i.e. known and arranged sites are still googled first

====Goals====
*making the bookmark system more attractive by means of a visual wall-like display => Tab Candy, respectively Panorama on Firefox4 seems to (will) be a good advancement, maybe the idea of an extra bookmark searching field should be integrated, BUT see non-goals!
*users that are familiar with the existing system should still be able to use the modified version without the loss of their structure or a loss of quality
*the user should be able to visit frequently used webpages without detours and less important pages should be found more easily
*users should be able to quickly retrieve their bookmarks (with the use of logical search criteria)
*the file system should be retained so the user doesn’t have to adjust to a too new system
*more significant design in the browser (extra searching field)
*additional information like in the browser history (time, last visit, ...)

====Non-Goals====
*a completely new bookmarks system that nobody understands and everyone has to learn anew
*developing a Tab-Candy clone as bookmarks are NOT tabs
*making the graphic interface too unmanageable or cluttered
*removing the individual decisions for categorization or structuring

==Sketches==
<gallery>
file: Sjtla skizze1.jpg|Adding bookmarks
file: Sjtla skizze2.jpg‎|Moving/Opening bookmarks
file: Sjtla skizze5.jpg|Example for grouping bookmarks in folders
file: Sjtla skizze6.jpg|Folder expansion via zoom (optional "fit-to-screen" zoom on double click)
file: Skizze_template1.jpg|Selection of searching in bookmarks instead the net
file: Skizze_template2.jpg|Selected 'bookmarks' (Lesezeichen)
file: Skizze_template3.jpg|Auto-complete example
</gallery>

==User tests==
*How did you test your design?
We tested our design using paper prototypes, as it is a fast, simple and reliable method of testing. One can instantly note where a test user struggles or has no problem at all and changing a mistake in the prototype is a matter of mere minutes. We sat three everyday tasks for our users: (a) to create bookmark for the page they were on, (b) to find their way to the Bookmark Wall and to arrange the existing bookmarks as they saw fit and (c) to create a new folder on the Wall and fill it with bookmarks. We tested our prototypes on 5 persons, each with a time limit of 10 minutes but in every case the tested users only needed 5-7 minutes. Our test-persons were media art and media system students. 
*What new problems did you identify?
Overall, the tested users coped very well with the tasks and had no problems with the creation of new bookmarks or new folders on the Bookmark Wall. They intuitively used the bookmark symbol in the toolbar/adressbar to set the bookmark and created new folders by right-clicking on the Wall and choosing the “New Folder” option in the following menu. The most problems occurred in the second task: arranging the bookmarks. Every tested user had trouble to identify the bar that popped up on a mouse-over as the haptic surface on the bookmark. Instead of gripping the bar to drag and drop a bookmark around the Wall, the users always clicked directly on the bookmark, therefore opening it in a new tab. It also emerged the issue of how to mark multiple bookmarks at once and drag them into a folder or around. 
*What did you change following your user tests?
We changed the drag & drop process slightly and instead of using a bar as haptic surface to drag the bookmarks around with, they can now be dragged with a click, like folders on a desktop. To mark multiple bookmarks at once the user can now use the same method as on a desktop as well. Additionally, expanding folders and therefore having more space available is controlled through zooming into the folder.
==Alternative Concept==
*In 140 characters, what is the essence of your project/solution?
Our goal is to make organizing bookmarks more easy and effective by using a visual, desktop-like display, using colored/textured areas that are build in a grid structure. 
http://i.creativecommons.org/l/by-sa/3.0/88x31.png
==Implementation==
*How did you ensure that a beginner can use your solution?
Again, we want to use a desktop-like surface that users are familiar with. Unlike our first concept, you save your bookmarks to an area you built before and can’t drag your bookmarks around the whole surface, only in the chosen area. To set a bookmark the user just drags their tab into the little marked area on the bottom of their site, which can also be hidden. This marked area is also the access point for the user to zoom directly into the bookmark area. To prevent a never ending search for specific bookmarks in the system, we use the browser search bar and modify it so that you can search your bookmarks and not only search engines. Additionally, there is an icon bar to the side, where the most used bookmarks are set with only an icon. To avoid an overwhelmingly cluttered display, area names and the number of subareas are only displayed shortly while hovering the mouse over an area. The zoom is controlled with "+" and "-" which is familiar and easily comprehensible for the user.
==Sketches==
<gallery>
file: Designforaction lauraj alternative setbm.jpg
file: Snapshot1.jpg
file: Snapshot2.jpg|New area
</gallery>
==User tests==
*How did you test your design?
We like change, so we used an Illustrator prototype this tme.
 
*What new problems did you identify?
As with our first concept, we gave the test users everyday tasks: a) to create and name a new area and b) to save the current page as a bookmark in that area and to open that bookmark. There were some problems with the first task but not with the second. Instead of using the right-click right away to create a new area, they tried to find a button or draw a frame for it, as right-clicking in a browser was already occupied with other things in their mind. Some of the test users also found the aero-like effect bothersome and distracting because it covers, even if only for a short time, a whole area. We tested our prototypes on 5 persons, each with a time limit of 10 minutes but in every case the tested users only needed 5-7 minutes. Our test-persons were media art and media system students.

==Mentor Comments==

===James Kalbach===

'''Concept'''
* Your problem statement includes many aspects: using advanced features, organizing bookmarks in folders, and re-finding bookmarks. I’d prefer a clearer focus and statement around the issue you’re really trying to address.
* Some specific examples or comparison to existing systems would help here. You just mention “the current bookmark system.” Which system? What do they have in common? Do any existing systems have strengths perhaps?
* What type of research did you conduct initially and with whom? You say “most users,” which suggests some kind of quantification and generalization across a larger population. Unless you did a broader survey, you shouldn’t make such generalizations in this way. It seems you make more of an assumption, which is fine—but you should also express that way: “we assume many users typically have the problem of…”
* The first sentence of your project essence is good, but the rest of it goes over the 140 character limit.

'''Implementation'''
* Drag and drop is fine, but have you considered accessibility issues? A visually impaired user might not be able to use your system.
* Is there a limit to how many items a typical user can view and move around visually? For instance, I have hundreds of bookmarks.
* The search through bookmarks is a very good idea and something browsers should already offer.
* The zoom feature seems quite nice, but do you offer an alternative view of bookmarks? Sometimes a plain list works better than a spatial arrangement, and users may be seeking that.
* What alternative directions did you explore before arriving at this solution?

'''User tests'''
* Please describe more about the tests you conducted: with whom? How many people? How long was each session? What were your key findings?

Overall, it's clear you put a lot of thought into this. You've reacted to user feedback appropriately in your revisions. The immediacy of the visual approach to organizing bookmarks is a good thing and something to explore, but it also brings with it potential problems, such as accessibility or users' preference for an alternative ways to organize them.

Nice work.

===Cennydd Bowles===

I think there are some good concepts here and the changes you've made are well-considered responses to your findings. You identify a couple of major points in your research, namely that current approaches are too complex and managing folders is painstaking. The problem with this astute analysis is now you have to be sure your solution demonstrably solves those problems! I'm not sure it does yet, although with more iteration I'm sure you'd find further efficiencies.

Drag and drop is definitely a familiar and direct interaction, but Jim is right to point out that there are some accessibility concerns, related to both visual and motor skills. Would your solution work well with different input devices? e.g. a trackpad or even a keyboard, as opposed to a mouse?

Visual/spatial metaphors sometimes don't scale well. Your zoom control is obviously an attempt to counter this problem, but do you think there would come a point (eg zoom level, total number of bookmarks or folders) at which the system would have to change more significantly to work at large numbers? For instance, how might you help users to lay out large numbers of bookmarks in order to sift through them?

Your testing methods seem very sensible, and I absolutely applaud your choice of two different prototyping methods. I think your decision to drop the 'grab bar' was sensible, although I can absolutely understand why you added it. I think it's one of those cases where convention (the OS and desktop, in this case) has to rule over a "more correct" solution.

===Eric Reiss===

In practical terms, I think Cennydd and Jim have summarized the issues related to this project very well. That said, I don't think you folks have received enough praise for having done more detailed research at all. I think you DID uncover the key problems and made great strides to improve the process, even though your interview methodology and other background information regarding your research is lacking.

Although I agree with Jim when he says that you take for granted that the reader of your proposal understands various terms and techniques, I generally understood what you meant (although a venture capitalist would probably not). And Cennydd is right in pointing out the scalability issues, which I think may be the most serious drawback; I'd like to see if this system can scale to 500+ bookmarks.

But despite these shortcomings, let me be honest, this was one of the projects I liked best. Well done!

IFD:Designing For Action/Webtop

2011-03-18T11:42:21Z

Ericreiss:

==Concept==

===Which problem did you identify?===

The interface concept behind not only browsers is way too old and got no improve to handle the wide range of contenttypes and generally the massive increase in data. To mention, the visualisation and organisation of data is one of the biggest tasks for this century.
So what are the problems?
* There werent many websites in the early age of the web -> Massive increase
* You had a starting site and then you clicked your way through the web through links. The was no index. You couldn't go to site, you never heard of/no link existed -> Now there are searchable indexes of nearly all webpages that exist on the web

'''The thing with bookmarks. '''

Links tend to be outdated just in the moment you bookmarked them. Sites go offline, url are changing, content changes. Months later, the information itself is no longer relevent - outdated or maybe the information is already manifested in you brain and no longer needed externally.
Its faster to "google", than to search your own bookmarks.
"Ah, new computer, my bookmarks are gone.. ."

'''The integration of multimedia. '''

Bad for the user: Every website has its on videoplayer, photo-script (lightbox), audioplayer.. . "What happens when i click the link..? Oh no..".
For the webdesigner: You want to put music on the page. But how? You could link to a mp3-file. But every browser does a different strange thing. Maybe you have to download the file. Maybe there is a new white window with an internal player in the center, maybe there is a blank page whith a custom player (plugin) in the center of the page.
Also: Just because of the lame multimedia integration, there are less downloadable files and more adobe flash. Congratulation!

'''Widgets/WebApps (however its called in ten years)'''

There is no good concept to integrate widgets or webapps in the browser.

'''So what is the browser?'''

The browser isnt just another program. Its an abstraction layer for the www and so we need an interface to do all the things that are possible within the www. Now that all work and fun happens in the browser, the browser does all things, the os-interface does, we need an interface that is same as powerful as the desktop/explorer.

===Why are current systems unable to solve this problem?===

Webbrowsers are just outdated. Use any browser, open twenty tabs. You see. The problem is, how people think about browsers.

===What research findings led you to your first concept?===

After surfing the web for some years, i recognized that over the years, the internet and so the browser became more important - more than any other program, more than the desktop. The problem was and is: The actual concept isn't doing the job.

===In 140 characters, what is the essence of your project/solution?===

An interface that is same as powerful as the desktop/explorer.

==Implementation==

The user knows what a desktop is. The one who doesn't know - there could be a short introduction video. Its wrong that good interface is usably without knowing anything about it. Look at apple - they explain the use of their products via direct (commerial) and indirect (presentations, blogs, geeks/early adopters) marketing.

===What makes your solution more useful or efficient than current products?===

later

'''(Essential: Sketches and/or Video to illustrate the interaction)'''

==User tests==

No usertesting at this time due to there is nothing material nor virtual to test. Its just a concept.

==Mentor Comments==

===James Kalbach===

'''Concept'''
* The opening to your problem statement is good, but try to stay on track more. You start mixing topics right away--from browser limitations to information overload.
* Try to avoid saying "of course" as if every one has the same opinion or is following your thoughts. Also don't make assumptions about users without backing up your statements. ("Very very few people really need offline webapps...")
* There are other systems that have been looking at the problem you indicate. I'd like to hear about what you've come across, even if they incomplete or experimental solutions. Google Chrome, for instance, let's users sync bookmarks between browsers (which addresses at least part of the problem).
* It doesn't sound like you did any research. Even if you don't have time for that, you can at least do something structured, like a heuristic evaluation. Right now it just sounds like your own unproven opinion, which isn't convincing.
* The essence of your project is incomplete and too high level. It's important to be able to communicate your idea clearly and succinctly.

Overall, you've identified some real problems (and challenges) with the current state of bookmarks. There's an opportunity to make things better. I'd like to hear more details about your idea and designs, but unfortunately they are not available on this wiki as I'm writing this (date: 7 March 2011).

===Eric Reiss===

I liked the statement of the problem. Jim has already pointed out some basic flaws in the presentation (e.g. the use of "of course"). But my greatest problem was that I couldn't really figure out your solution based on the deliverables presented here. The needlessly noisy video would have done better with a verbal description of what was happening on-screen instead of the irrelevant music.

A short statement that described how your application has solved the basic problems of bookmarking (that links/media go out of date or cannot be bookmarked at all) would have helped a lot. Although your ideas may be great, you have simply not succeeded in proving to me that you have done something truly remarkable.

==Goals & Non-Goals==
* Goals
** make use of todays technology (higher resolutions and color depth, more memory, faster prozessors, gpu-processing) and interface elements such as drag 'n drop, (multi)touch
** forget everything about tabs, bookmarks and history
** one interface for everything - seamless browsing
* Non-Goals
** do minor enhancements to the old interface
** build on top of outdated ideas

==Based on an older idea==

PDF

[[File:Webtop-jan Schepanski.pdf]]

Animation

<videoflash>kysvUDQWZYg</videoflash>

==Visualisation==

[[File:Colored sketch.png|miniatur|500px]]

[[File:Prototyp.png|miniatur|500px|older concept]]

(older concept)

==Animation==

Sometime.

==Idea: All in One==

'''Toolwindows (6)'''

* Toolwindows make no sense. No one needs extra windows so they should be inside the browser.
* Toolwindows could be some kind of app. So lets redefine the following:

Window=window.open('','name','toolbar=no,location=no,status=no,menubar=no,
scrollbars=no,resizable=no,width=500,height=200')

this could mean: create an "app" which is 500x200 in pixels. This box can be moved around, snapped, dragged, dropped. It doesn't depend on anything. Its just there and does something. Maybe an online radio, a chat, an calculator. There could be an extra app-bar or somewhat.

'''File linking (6,7)'''

What happens when you click a link to media file in your browser? Yeah, it opens the file in a new tab or in the same tab.
Why not open the image, video or music file in a new overlay that is always on top, movable and includes the typical controls?

'''Volume control (2)'''

Every tab should have a slider to control the volume. It also need some visual feedback, to signalize that the tab generates sound.

'''sleepy tabs'''

Tabs should go to sleep if not need to reduce cpu-power. There should be a button to prevent this behavior.
See the FireFox Addon [https://addons.mozilla.org/de/firefox/addon/67651/ Tab Bar].

MORE TO COME

==Links==

APPS (don't ignore apps - they need a fine place to breathe on your browser!)

* [http://www.golem.de/1012/79960.html Googles Web App Store gestartet]
* [http://www.golem.de/1007/76791.html Firefox 4 Beta 2 - Mit App Tabs und schnellerem Scrollen]
* [http://www.golem.de/showhigh2.php?file=/1012/79929.html Mozillas Open Web App Ecosystem macht Fortschritte]

ZUI (Zooming User Interfaces)

* [http://en.wikipedia.org/wiki/Zooming_user_interface Zooming user interface on Wikipedia]
* [http://www.microsoft.com/silverlight/pivotviewer/ Microsoft Pivot]
* [http://www.cs.umd.edu/hcil/piccolo/applications/autobahn/collapsed.gif Old ZUI browser based on Java]
Zoomy Websites
* [http://tandem.gasi.ch/ Image Viewer build with Flash]
* [http://zoomism.com/ Zoomable website navigation] Worth a look
* [http://htwins.net/scale/index.html The Scale of the Universe]
* [http://www.gapminder.org/world/ Gapminder World]

Firefox Design Challenge results and other not that bad ideas

* [http://weizhou.wordpress.com/2008/07/07/prototype/ Lifestream – Redesign history and bookmarking – Wei Zhou]
* [http://www.azarask.in/blog/post/designing-tab-candy/ Firefox Panorama/Tab Candy]
* [http://miyoung007.blogspot.com/2009/09/mozilla-labs-design-challenge-weave-web.html Mozilla Labs Design Challenge: Weave Web UI "Tabs and History visualizations" - Miyoung's Idea]
* [http://www.flickr.com/photos/xa/3971374652/sizes/o/ The interconnection between sites, bookmarks, passwords..]
* [http://anilchaudhry.files.wordpress.com/2009/09/weave_design1.png Editing bookmarks]
* [http://tabviz.org/ TabViz] Worth a look
* [http://www.youtube.com/watch?v=-eocalPpuUs&feature=related Tab Wall vs Nodes]

OHTER

* [http://en.wikipedia.org/wiki/Radial_tree Radial Tree - Concept sorting and displaying informations in a radial form]

Articles
* [http://www.sigchi.org/chi96/proceedings/videos/Fertig/etf.htm Lifestreams: An Alternative to the Desktop Metaphor]
* [http://drum.lib.umd.edu/bitstream/1903/388/2/CS-TR-3022.pdf Dynamic Queries for Visual Information Seeking]

==The Browser History==
[[File:History.png]]

Little sketch to visualize the problem of presenting the todays non-linear browsing history.

==Research==
[[IFD:Designing For Action/Nutzerforschung/JanInterviews|User Interviews]].

==Some Images==
[[File:Fences.JPG]]

(Screenshot of Fences [http://www.stardock.com/products/fences/index.asp more Informations on stardock.com])
[[Sophie, Jule, Tristan, Laura]]

[[File:Safari.png]]

(Screenshot of the webbrowser Safari, [http://www.apple.com/de/safari/ more Informations on Apple.com])
[[Carlo, Johannes, Sven]]

IFD:Designing For Action/Carlo, Johannes, Sven

2011-03-18T11:28:30Z

Ericreiss:

This project is presented by '''[[User:Carlo Enke|Carlo Enke]] ● Johannes Lerdon ● [[User:Sven|Sven Sommerlatte]]'''.

==Concept==

[[File:plain_bookmarks.png|right]]

===Which problem did you identify?===

Users...
* predominantly using the bookmark-toolbar
* arrange their bookmarks on-the-fly
* propose a relevance ranking
* want a clearly design

Only a few of them use folders and those who do not use bookmarks, close the browser and “Save and Exit”.

===Why are current systems unable to solve this problem?===

They are unable to solve this problem because they are not as practicable and efficient as they should/could be. Most systems solving special cases but no one is combining current systems to get a real useful 'built-in toolbar'. Another big fail is the design of the current ones - it's not really intuitive and much too interlaced.

===What research findings led you to your first concept?===

In our reseach we figured out that most users don't use 'advanced' bookmarking (e.g. tags) to increase their workflow. In fact of this, we can say it's quite bad arranged/implemented. So we wanted to merge our ideas of a new toolbar with newly-arranged advance functions.

===In 140 characters, what is the essence of your project/solution?===

The main focus was to ease the arrangement of bookmarks and an auto-complete-like search through saved bookmarks. In addition to the auto-completion there will be the possibility to rank each page by their relevance to the user.

A bookmark consists of a screenshot of the page, its title, URL, favicon, current date and the relevance to the user - rated by the user. The clou is, most data will automatically be added. Last visit, visits and frequency of use will be updated over time.

==Implementation==

===How did you ensure that a beginner can use your solution?===

The most important thing of our plannings was that we wanted not to implemet any new standards, because these can easily become confusing. Therefore we tried to assume and combine all known systems and automate advanced functions as much as possible.

===What makes your solution more useful or efficient than current products?===

Our product will not reinvent bookmarking, but combine existing products and optimize them in combination to obtain an easy-to-use toolbar.

'''(Essential: Sketches and/or Video to illustrate the interaction)'''

[http://www.lerdon.com/downloads/plain_bookmarks_prototype_3.mov 01/02/2011] The live search function has been implemented within the address input field.

[http://www.lerdon.com/downloads/plain_bookmarks_prototype_2.mov 19/01/2011] Short demonstration video of how the bookmarks live search is working.

[http://www.lerdon.com/downloads/plain_bookmarks_prototype.mov 15/12/2010] A video showing the first version of a partly functioning prototype built using HTML, CSS, Javascript (JQuery), PHP and MySQL.

<videoflash type=youtube>f_zAZgPOanI</videoflash>

[[File:Jl_prototype_3_mockup.png‎]]

[[File:Sketch-Johannes.png|400px]]

==User tests==

===How did you test your design?===

The function of our design has been tested extensively in our class and in tests with our circle of acquaintances.

===What new problems did you identify?===

While testing the prototype some of the testers claimed that it would be much easier to have only one textfield. Furthermore the prototype does not have a history function so a switch would be necessary. So the user could choose which database should be searched on keydown.

===What did you change following your user tests?===

We've merged the live search with the address bar as shown in the third demonstration video.

==Mentor Comments==

===James Kalbach===

'''Concept'''
* In larger projects teams and within organizations, the ability to communicate design clearly and succinctly is very important. The problem definition for this project is unclear and includes many different aspects: bookmark toolbar, relevance, clear design, using folders. I’d like to hear a more focused statement about the issue you’re addressing.
* What type of “research” did you conduct, with how many people, and with whom?
* The essence of your project statement is more than 140 characters. It should just include who, what, where, why, when and how. Perhaps something like: “Our solution intends to help average web users better organize, arrange and re-find bookmarks they’ve created in a local browser.”

'''Implementation'''
* The explanation of the solution is well done. The video in particular is very good and goes a long way in illustrating the intent of your project.
* I would have liked to have heard more about existing solutions for bookmarking and a comparison of their capabilities and shortcomings against your idea.
* The sorting features are good on the folders.
* What happens if there is a very long list of bookmarks in a given folder? Does the menu extend beyond the page fold at the bottom of the browser? What are the limits to the number of bookmarks that can put in a folder?
* Did you consider filtering bookmarks in addition to just sorting them?
* What alternative directions did you explore before arriving at this solution?

'''User tests'''
* Please describe more about the tests you conducted, including an indication of the method, users, and findings.

Overall, this is a well-thought-out project that really shows you paid attention to the detail of interaction design and the overall experience.

Excellent work.

===Cennydd Bowles===

I'm impressed. It's a solution that shows clear, detailed thought.

I too think you could be more precise with your definition of the problem, since it jumps around a little and lacks the precision we see in your prototypes. A little more detail about the research you've conducted would help make a stronger case for your work.

I think you're wise to adopt the approach that existing convention matters and that there is value in recombining and improving existing solutions. Due to the mass audience for this sort of system, there's definitely a MAYA principle thing going on here (see cennydd.co.uk/2008/maya-principle/) and it would be easy to detract from the system's usability and UX by going too far in the quest for perfection.

Your prototypes are impressive and well executed, and I'd say you're very close to a real breakthrough - although I must confess that the third version doesn't convince me, mostly since the user's attention is required in two locations simultaneously; the URL and the search function. Is there yet a simpler solution that recombines the visual focus in an elegant way?

===Eric Reiss===

To continue the discussion we started when I visited you in Weimar, the problem you set out to solve is unclear. The description of the problem actually describes the current usage pattern, but doesn't identify the problem. Hence, the ultimate success of your project is unclear as I am still uncertain as to what your goals were - the essence of innovation: solving a problem.

In general, the more time you spend discussing and defining the problem, the easier it is to create a solution and critique it internally within the design team. I just don't feel you spent enough time on this. Instead, I suspect you took the assignment and immediately started sketching stuff.

I do like that you build on existing best-practices. I am unsure (like Jim) as to how your proposed solution will scale (a problem, I might add, that you share with several of the other project groups).

The prototype is indeed impressive. Nicely done. It gives a much clearer picture of what you want to achieve - for me, it seems to help the user recall WHICH site they bookmarked and WHY they did so. And although you didn't state this clearly, it IS a problem and your attempt to solve it is excellent. Well done, gentlemen!