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 into MyWeb. 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 then decides to organize his bookmarks -- he categorizes them with either tags or folders. He will then look at all of the classes he is taking this term, and rename the 6.813 bookmark to “The best class at MIT.” He will then share the 6.813 bookmark with a friend who is thinking about adding the class. Nikola's friend shared a website for STS.001, a class Nikola is considering adding. He moves the STS.001 website to his own bookmarks. He then realizes that he does not want to add that class, so he removes the class website from MyWeb. Nikola will then open the 6.046 website through the 6.046 bookmark to work on his problem set. Realizing that he forgot concepts from 6.006, Nikola searches for his past classes and visit the 6.006 website to review that material.  Nikola then logs out.

Design 1

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

.

From this page, Nikola can either sign up(register for the service if he hasn’t used it before) or log in(if he is already a member of MyWeb). He can also get some basic information about the service and how he could interact with it. There is also a small video tutorial that he can view.

The first time Nikola lands on the page, he will click to sign up, which will open the soft pop-up
for him to register, like on the following image: Name is an optional field, but email and password, as well as confirm password are mandatory. Nikola can also choose to import bookmarks from his other browsers into MyWeb.

Clicking on the register button gets Nikola to the “main page”. My bookmarks, My friends and Other bookmarks are tabs. My bookmarks is the default landing tab. On the left, Nikola can see the bar that changes depending on the tab that is selected at that moment.

When the “My bookmarks” tab is selected, the bar shows folders. Each of the folders can have sub folders and its own settings. Folders can be collapsed and expanded by a click on the little arrow to the left of their name. There is one folder that contains all the bookmarks independent of their folder origins. Nikola can easily add a new folder by pressing the hyperlink “add new folder”. Right click on the folder name opens up a context menu in which Nikola can select "delete" in order to delete a folder.

The bookmarks layout is sorted in a way that displays the most visited bookmarks on the top. This feature is there ion order to gain efficiency for people who have been using the app for some time.

He can search his bookmarks by typing into the Search box which searches through the bookmarks in the current folder. Clicking on any of the bookmarks opens a new tab with the content of the page.

Pressing the “pencil” icon next to any of the elements opens the settings window. In the settings window, Nikola can reset the name of the folder/bookmark and make it belong to a different folder. He can also share his bookmarks by entering the email addresses of the people that can view the bookmark.

Pressing the “add new bookmarks” button on the “main page” pops up a window in which Nikola can add a URL, name and folder to which it will belong.

Nikola can navigate through different tabs in the “main page”. If he clicks on the tab “My Friends”, that tab is going to be highlighted and the bar on the left side as well as the content of the page is going to change. The bar on the left side contains a list of Nikola’s friends. The content of the page shows all of the bookmarks that are currently shared with Nikola. Clicking on a different friend changes the content of the page to only display the bookmarks that a selected person has shared with Nikola. If Nikola wants to save this shared linked into one of his private folders, he can drag and drop the bookmark to the My bookmarks tab. That bookmark will show up in the "All" folder, but the user can later specify its special directory, if needed.

Users can press a “pencil” button next to a friend whose information they want to edit. Friend information contains friend’s name (optional), email address (mandatory) and a phone number (optional).

Similarly, if Nikola switches to the tab “Other bookmarks”, the bar on the left is going to change. The bar on the left is going to contain categories such as "Most popular" and "Recommended." The content in the middle is going to depend on the category that is selected, but it is going to show the most popular bookmarks as the default landing.

Pressing Nikola Otasevic hyperlink leads Nikola to his account page, where he can change his personal info. If Nikola changes his password, he will get a pop up that makes him confirm the change or cancel it. This way, we are making errors less probable.

Usability Evaluation:

Learnability:

As soon as they land on the page, users can learn about the web application's mission. They can also learn what the application allows them to do. Log in and Sign up hyperlinks are positioned in a standard top right corner which provides consistency with the rest of the web applications. On the main page, people who are new to MyWeb will see the hyperlink “add new folder” by which they immediately learn how to add new folders. Clicking a button “add new bookmark” also teaches them something definite about the web application. Similarly, if they click on the “My Friends” tab, they can learn about how to add new friends by clicking the appropriate affordance.

On the other hand, users won't be aware that a lot of features, like sharing, are placed in the setting bar that's accessed via the pencil button. Once learned, however, it's easy, but it's not completely straight forward. We think that for this design, the video at the beginning introducing the user to all the features is a good idea to increase learnability. We decided to make this trade off in order to avoid crowding the webpage.

Visibility:

In contrast with traditional bookmarks, this interface gains a lot on visibility. Users can see the state of their bookmarks before they actually navigate to the corresponding website.

Some of our features are implemented using drag and drop, which is not visible. Similarly, the way to delete a folder (right click) is not visible.

  We achieve better bookmark visibility than regular bookmarks. We also make it easier to differentiate and recognize different bookmarks. However, the user is not able to really observe the details of the page, so they will have to navigate to it if they wanted to get an updated view.

Efficiency:

The Area of the bookmark is now larger, so it becomes much easier (by Fitts’ law) to navigate to the bookmark area. Also, since the bookmarks are sorted in the relevance order (most visited bookmarks on the top), it is very efficient for a proficient user to navigate to the website that they use very often.

The user is not able to manipulate tabs, so the user has to navigate through the list of folders and subfolders (that  could be large) every time he want to open its bookmarks. If he wants to work in multiple folders simultaneously, this becomes very inefficient if the list of folders is big.

Error:

Currently, this design does not support recovering from deleting a bookmark or folder, but we hope to change this in the future (either a confirmation pop-up or something). However, because bookmark area is larger, it is easier to hit the correct bookmark and therefore the error rate is reduced.

Another 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.

Design 2

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

Since this is his first time visiting, he will go to a field for New Users to create an account. He might also choose to find out more on what MyWeb is all about, in which case he will click on a button “About MyWeb”. This will take him to a page that tells him more about MyWeb and describes how to start using it step by step. This is an idea, that can be designed later as it doesn’t have a crucial effect to the rest of our design, but it would probably increase learnability by explaining how to use our interface step by step.
In our scenario, Nikola decides to open a new account. He clicks on “Create account” button which takes him to the next page:

We wanted to keep account creation very simple. Nikola will simply enter his email address, password and then retype the password just to make sure he didn’t type in something he didn’t want the first time around. This part looks pretty much like most of the existing websites and the way they create accounts.
Nikola also has an option to choose whether he wants to import all of his bookmarks from the current browser, and can choose to do so or not. (with radio buttons, yes or no)
He then confirms his choice and is led to this page, the main part of MyWeb interface:

This design doesn’t have real folders, only labels. First time a user (Nikola) enters the website, there are three default labels: Favorites, Suggestions, Others. Favorites as a default, could import his top-sites (most visited) and have them displayed. Suggestions will keep track of the websites his friends suggested for him (which at the beginning is empty). Others will be a default label for all the other websites. So if Nikola decided to import all of his current bookmarks, they would be classified with the label “others” until Nikola classifies them differently.

Each bookmark can have multiple labels. The label that is currently displayed has a different color than the rest. Nikola looks through his current bookmarks by going through different labels (clicking on them) and using arrow keys to flip through the bookmarks, where the one in focus is always the biggest, in the middle of the page. Information about the page are displayed under it :Name, URL and in the case of suggestions, date and friend who suggested it. Bookmarks are order by their importance (number of visits for example). There is a scroll bar at the bottom that shows the progress in the series of bookmarks.
To add label for his classes, Nikola can simply click on Add label Plus button, that will show small text editor where he can just type the name of the label. Label is added at the top with other labels, and menu of labels is scaled based on the number of them. Nikola adds Classes as his label, now wanting to add 6.046 page as one of his classes. He will do that by simply clicking on classes label, and then typing 6.046 page url into the text box at the bottom that says Add page. After he clicks to confirm, the page is displayed among his classes.

Nikola can change the name and label of the page that’s in focus, whether at the time he adds it to his bookmarks or later simply by choosing the label from the drop menu Label, or typing the name into the Name textbox.

Nikola can now search for his 6.006 bookmark simply by typing a key word into our Search textbox. After that, none of the labels will be highlighted and all the bookmarks containing that word will be displayed, pretty much the same way as so far. Nikola can decide to go to 6.006 website simply by clicking anywhere on the bookmark picture which will open a new tab with that page.
Nikola can decide to remove the bookmark by simply clicking on the X in the upper right corner of the bookmark. Hovering over the X should say “remove” and hovering over the thumbs up in the left corner should say “add to favorites”.

When Nikola decides to share his 6.006 bookmark, he simply types the email address of his friend into the Share textbox and the bookmark is sent so suggestion label of his friend account.

Usability Evaluation:

Learnability:

Because the interface is so simple, learnability should be pretty high. One thing unclear from just viewing the default labels and so on, is that user might not know what favorites or suggestions mean and represent. This could be solved by having a short introduction to the website when the user creates an account but we will leave it for further development later in the project. Everything else seem very simple, as long as user is aware of all of the possibilities. This will be particularly intuitive for safari users because our interface derived a lot from the safari view history option.

Visibility:

Visibility of the bookmark itself is very high because a big part of the browser window is used to display it. If we want to keep the labels spread out and visible, we need to limit number of labels. In this case, we are limiting the amount of labeling the user can do in order to preserve simplicity and visibility. Also, user doesn’t have the view of all bookmarks stored, so he needs to scroll through them in order to see them.

Error:

One thing that’s not currently recoverable is that if user deletes the label or the bookmark, which is not that hard, he deleted it forever and if he wants to recover it he has to go and add the bookmark again. Or even worse, he needs to go and label his bookmarks with the label again. It would be nice to have a pop-up to confirm that user wants to delete the thing or not.

Another 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.

Efficiency:

Even though the UI is pretty easy to use, it is not the most efficient solution. This design sacrificed a lot in order to achieve as high visibility as possible. If a user wanted to find a bookmark that was somewhere amongst the ones labeled as favorites, he would need to scroll down until he finds it, instead of just clicking on the layed-out bookmarks. That’s not efficient, and that disadvantage becomes even worse with growing number of bookmarks. On the other hand, if a user knows that he’s looking for the 6.006 website, he can just start typing 6.006 in the search field which will display all the corresponding pages. In this sense, we think search is very efficient plus it preserves visibility. This interface also doesn’t enable users to label multiple bookmarks at once, so labeling the big library could be a very tedious job. On the other hand, once bookmarks are sorted and labeled, using this design could be very easy and pleasurable. :D

Satisfaction:

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:

Note that the navigation is mostly done on the left column. There are “tabs” on the top. The rest of the page is devoted to displaying bookmarks, which he can scroll horizontally. To scroll, Nikola can either press the arrow buttons on the bottom or press the background and drag left and right. Now, Nikola clicks the the Import bookmarks button, and sees the following modal pop-up:

He can follow the on screen instructions to import bookmarks from multiple sources. Nikola will then organize his bookmarks using the tags features. To add a bookmark otherwise, Nikola can click the "add bookmark" button on the left. That will show a pop up like follows:

To add a tag to a bookmark, Nikola can hover his mouse over any particular bookmark, and 4 “options” appear on the image, shown below:

If he hovers over any of the 4 options, it shows in words what that options do. Nikola will need to hover over the “plus” sign to see that he can add tags by pressing that:

Then the following modal pop-up shows:

He will have to go through all of his bookmarks and categorize them using the labels/tags. Once he is done, he decides to share the 6.813 link with a friend. First, he creates a new tab (presses the “plus” sign near the tabs at the top), and then types in 6.033 in the search box. Doing that displays everything that contains 6.033 in a name or in a tag. Now, he shares the bookmark with a friend by clicking the "S", using the following pop-up:

The other options on the corners are delete (the X) and add to favorite (the star).

If Nikola clicks on favorites or any of the tags on the sides, it opens a new tab with all the bookmarks relevant to that category. Nikola decides to click on “Friends” to see everything his friends shared with him (which opens a new tab), and clicks on the STS.001 bookmark (which opens in a new browser tab). Finally, realizing that he has to review 6.006 material for 6.046, he searches for 6.006 in MyWeb and visits that bookmark.

Usability Evaluation:

Learnability:

We feel that this interface is generally pretty good in aspects of learnability. The interface on the left is somewhat similar to Gmail labels, which the user might have seen. Furthermore, the tabbed browsing also likely provides familiarity for many users. The bookmarks themselves provide affordances (being boxed) that indicate that it is clickable. Some bad aspects of learnability is that it might be difficult to discover how to add or remove labels to bookmarks.

Efficiency:

This interface has both good and bad parts of efficiency. The search, for example, makes finding bookmarks very efficient. Adding a bookmark is also pretty efficient, as is switching between tabs. Adding tags to bookmarks, however, can be inefficient as you have to add tags individually to each bookmark.

Visibility:

Most of the screen real estate is devoted to showing the bookmarks, and pretty large images of it, so in that respect, visibility is good. Also, the most important labels and tabs are visible. Some bad aspects of visibility is that you can only view the contents of one tab at a time.

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:

He 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:

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:

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 explains 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 off 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 for 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, we have decided not to go that route for no. 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. One bad aspect of efficiency is that you have to do three clicks to access a bookmark, and when doing that for your most common bookmarks, it could get very annoying.