GR2

Scenario        

Nikola has many bookmarks, doesn't remember where he puts them, and has many devices.
Nikola would like to find a better way to manage, sync, and access his bookmarks.
Nikola 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.

At home, Nikola is afraid that someone at the coffee s

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.com 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 the way he could interact with it. There is also a small video tutorial that he can click on.

First time Nikola lands on the page, he will click on the 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”. He can search by typing into the Search box which searches through the bookmarks in the current folder. Click 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 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 bar on the left side as well as the content of the page is going to change. Bar on the left side contains a list of Nikola’s friends. The content of the page shows all the bookmarks that are currently shared with Nikola. Click on a different friend changes the content of the page to display only the bookmarks that a selected person has shared with Nikola. Each bookmark has button that can copy the bookmark from the shared ones to “My bookmarks”. Click on the button pops up a small window where a user can select the name and the folder to which he wants to copy the bookmark. Each bookmark also has a delete button in the top right corner. 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).

Analysis:

Learnability: As soon as they land on page, users can learn about the web application 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 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 “My Friends” tab, they can learn about how to add new friends by clicking the appropriate affordance.
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.
Efficiency: Area of the bookmark is now larger, so it becomes much easier (by Fitts’ law) to navigate to the bookmark area.
Error: Because bookmark area is larger, it is easier to hit the correct bookmark and therefore error rate is reduced.
Satisfaction:

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 safari view history option.
Visibility: Visibility of the bookmark itself is very high because big part of the browser window is used to display it. But if we want to keep the labels spread out and visible, we need to limit number of labels. So in this case, we are limiting the amount of labeling 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.
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 for example, he would need to scroll down until he find it, instead of just clicking on layed-out bookmarks, icons or similar. 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 6.006 website, he can just start typing 6.006 in the search field which will display all the corresponding pages. In this sense, I think search is very efficient plus it preserves visibility. This interface also doesn’t enable user 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