GR2

...

Scenario        

Nikola has many bookmarks, doesn't remember where he puts them, and has many devices. He would like to find a better way to manage, sync, and access his bookmarks. He goes to MyWeb, and really likes the concept, so he creates an account. For identification purposes, he is required to enter in his e-mail and password.
Now, Nikola needs to enter his bookmark collection. Because he already has a vast collection of bookmarks, he decides to use the “import,” option, and imports his bookmarks from the web browser that he is currently using. Nikola will now need to organize his bookmarks within MyWeb.
Nikola logs out because he realizes he is in a coffee shop and does not want everyone to see his bookmarks. He will resume using MyWeb at home.

...

hop saw him enter in his password, so Nikola logs back into MyWeb and changes his password. Nikola then decides to organize his bookmarks. He will then look at all of the classes he is taking this term, and rename the 6.813 bookmark to “The best class in MIT.” He will then share the 6.813 bookmark with a friend who is thinking about adding the class. Nikola will then add a bookmark that his friend shares for STS.001, a class Nikola is considering adding. Nikola will then open the 6.046 website through the 6.046 bookmark. Realizing that he forgot concepts from 6.006, Nikola will open the past classes folder and visit the 6.006 website to review that material. 

Design 1

Nikola lands to myweb.mit.edu and can see the following page

...

Because bookmark area is larger, it is easier to hit the correct bookmark and therefore error rate is reduced.

Design 2

First time Nikola visits the page myweb.com, he sees this:

...

Satisfaction could be decreased by existing efficiency problems, and limitations when it comes to number of labels we want to have, but the visual aspect of this design is really great. As is using Safari history which is where this design originally came from. :D

Design 3

When Nikola arrives to MyWeb, he will see something similar to the first two designs. Because Nikola is a new user, he will need to register an account on MyWeb to procceed. He will need to click the register button on the page, and he will register and log in just like on the other examples. Once he is logged in, he can see the general layout, which is the following:

...

Error Correction:
The most important part of error correction in this design is the tabbed browsing. If you are unsure of what you are looking for, you can open a new tab, search for what you want, and if you don’t find it, you can go back to the tab you were looking at. Another aspect is feedback during search that gives suggestions as you type. One bad part about error correction is that it is relatively easy to click on a bookmark, so once you click, it opens a new tab/window in your browser, making you have to close that to return to what you were working on. Furthermore, it is easy to open an extra tab for a different label/different shared person.

Design 4

When Nikola first visits the web page, he sees the following: Image AddedHe realizes what the web page is for, inputs his e-mail and password into the appropriate boxes, the first URL he would like to bookmark, and presses “Let’s Go” to enter the website.In case that Nikola is already registered for the site, he would press log-in located on the upper right corner of the screen, and two small input boxes would appear allowing him to enter his username and password and once he presses the log-in button again, that would log him into his user area(assuming that the authentication was successful, otherwise following a standard procedure it would ask to reenter the information or register)Once inside the user area, he sees the following:(image)Nikola notices that the page is separated into three major parts. The leftmost part is entitled folders, where his bookmarks are organized into folders. Once he clicks on one of the folders, the middle one of the three separations gets activated where he can see the screenshots of the bookmarked webpages in the selected folder, and once he clicks on one of the bookmarks, in the rightmost (and the biggest) separation he sees the web page corresponding to the bookmark in a frame. He can use that frame display to quickly glance at what’s happening in that web page at the moment and if necessary open it in a new tab. As he starts out there are only two folders, the general folder corresponding to all the unsorted bookmarks and the suggestions folder which is originally empty but gets filled up with bookmarks shared with him by others. To add a new bookmark to a folder he would have to select a folder in the folder separation by clicking on it, and then press the “add” button at the bottom of the folder separation. When he adds a bookmark,a new bookmark with blank URL and blank  name would appear at the top of all the bookmarks in that folder. We will see in a minute how he can edit the bookmark to set its name and URL. To add a new folder he would just press the add button in the folder separation and a new folder would appear with a default name “new_folder(n)” and he can change the name of the folder by just double clicking on its name(just like in any OS). To Remove a folder he would just select the folder he wants to remove and press the remove button at the bottom of the Folder separation. Nikola can also import the bookmarks from all his current browsers to MyWeb using the “Import” button on the upper right corner of the window. When the import button is pressed all of the currently existing bookmarks get imported to the “general” folder, and then from there Nikola can distribute those bookmarks into other folders by drag and drop. Once a blank bookmark is created in a folder and displayed in the Bookmarks separation, he can click on it to set it up. As a bookmark is selected, it appears in the website view separation, where at the buttom of the frame where the website would be displayed he sees 4 buttons: “Open as a Tab”, “Name”, “URL”, “Delete”. The first one opens the page as a tab, instead of displaying it in a frame, the second one is an editable box which can be used to set a recognizable name for the bookmark, the third on is used to set the URL of the bookmark, and finally the last one is used to delete the bookmark. Nikola also has the option of searching both through the folders and through the bookmarks of a specific folder. That’s done using the two search boxes at the very bottom of both Folders and Bookmarks separations. As Nikola gets used to the web page, he adds most of his favorite bookmarks to MyWeb, and his interface starts looking like the following image once populated with many folders and bookmarks:(image)Finally, Nikola has the option to share bookmarks with other MyWeb users by simply selecting the bookmark that he wants to share from the Bookmarks separation, and then pressing the share button at the bottom of that separation. When he selects the bookmark and presses “Share”, a small pop-up window appears as displayed in the image bellow that lets him enter the e-mail of the user of MyWeb that he would like to share that bookmark with. As others share bookmarks with Nikola, those bookmarks get automatically placed in the “Suggestions” folder, and a small number appears on that folder showing how many new suggested bookmarks he has. Note: When Nikola makes an error, such as trying to delete a folder or a bookmark without selecting anything, a pop-up window appears saying “please select a file/folder to delete”. Similarly, and other illegal operations are handled with pop-up messages.

Usability Evaluation:

Learnability: The interface is very easy to follow, since it’s very simple. The starting page quickly points to the new user how to get going with the page with large input boxes for registration. Once in the user area, the hierarchy of folders,their content and the display page is very logical since it goes from left to right, from most general to least general. The interface is also quite easy to memorize since most things happen on a single page(with addition of a few pop-ups).

Visibility: The visibility of the folders and their content is limited by the size of the two separations “Folders” and “Bookmarks”, but that was a trade of between efficiency and visibility, because the interface could have been designed to display the folders on the whole page which would allow it to show many more folders at one time than with the separations. However, when opening one of the folders it would lead you to another page with the bookmarks in it, and to view the bookmarks the user would have to go yet to another page and then have to come back by pressing a back button to get to where he started. However, having this separation allows the user to see several things at the same time, so it’s both good and bad vor visibility.

Error: There are some big problems with errors. For example, the user might accidentally delete a bookmark when he was actually trying to change its URL since the URL and Delete button are right next to each other. In addition it’s very easy to forget to select a folder before trying to add a bookmark to it, and that would result in adding a new folder instead of adding a bookmark to a folder as intended. Also since the add and remove buttons are placed right next to each other, the user might end up removing a folder when they actually intended to add a bookmark to it. The simplest way to deal with this kind of errors would be to display “are you sure?” messages but since those are quite annoying for the users and would take away quite a lot from user satisfaction, so we have decided not to go that route for now, however, if during user testing the listed errors prove to be serious issues we might end up deploying a lot of error prevention.

Efficiency: The efficiency is the strongest part of the UI since everything is happening in a single page, such as instantaneous search through both the bookmarks and all of the folders, selecting different folders and viewing their content, moving bookmarks from one folder to another, and even viewing some of the actual content of the bookmarks without having to load a new page of MyWeb.