...
Nikola has many bookmarks, doesn't remember where he puts them, and has many devices.
Nikola He would like to find a better way to manage, sync, and access his bookmarks.
Nikola 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.
...
Design 1
Nikola lands to myweb.mit.comedu and can see the following page
...
Friend information contains friend’s name (optional), email address (mandatory) and a phone number (optional).Analysis
Usability 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.
- user won't be aware that a lot of features, like sharing, are placed in the setting bar that's accessed via pencil button. Once learn, it's easy, but it's not completely straight forward. We think that for this design, video at the beginning introducing the user to all the features will be a good idea and increase learnability.
...
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.
- visibility of drag and drop
- delete folder??
- better bookmark visibility than previous websites who implemented similar idea, which makes it easier to differentiate and recognize different bookmarks. However, 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:
...
Area of the bookmark is now larger, so it becomes much easier (by Fitts’ law) to navigate to the bookmark area.
- static tabs, 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:
...
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.
...
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
...
analysis:
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