...
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.
...
First time Nikola visits the page myweb.com, he sees this:
(image)
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:
(image)
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:(image)
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.(image)
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.
...