Page History

Our introductory page. This is the first thing the user sees when the web application is opened. Three little boxes Step I, Step II and Step III explain in brief what this web app is about and what it offers. After the iterations we realized that the users have hard time locating the "sign-up" button at the top right of the screen so we moved it down and made it huge!

First time users can register by clicking on the Sign Up and entering the basic information about the user.themselves. We made the sign up form much bigger than it was in our original prototype to make sure that the registration of the users goes as smooth as possible. 

After registration, first time users can import their bookmarks from their current browser by selecting desired browsers any of the browsers they use by selecting any of the provided options and clicking on the Continue button.

The next time users visit the page, they can sign in by simply clicking on the Log In field and providing their email and password. We decided to not have the log-in button and window be as big as the registration button and window are since we already expect the registered users to know how to operate the web app.

Image Added

The main page consists of three main parts: the folders section(on the left), the bookmarks section(in the center) and the contacts section(on the right). The folders and and the contacts sections are labeled appropriately but the bookmarks section is not to allow more space to display the bookmarks. When the user first enters the website, there will be a default bookmark in the All folder which we believe will be enough information for the users to realized what the middle section is for.

Image Added

Users can add new folders to the folders section by pressing the "" button. We believe that the green color of the button and the "" sign convey enough information to help the users realize what it is for. Once the press it, a small dialog box appears asking for the name of the new folder. If create is pressed without entering a name, an alert appears asking to enter a name. Or they can just cancel the creation process by pressing cancel.
In our computer prototype we had 3 folders in each row(instead of 1) and that made the folders too small to click and restricted the space available for the folder's name. Even though that provided good visibility because you could generally see all of your folders without having to scroll, we realized that most users are not going to have more than 5-7 folders, so it made sense to make the folders bigger and arrange them in one column.

Image Added

Image Removed

In this design we tried to combine different features from different designs from GR2. Majority of the page is occupied by visual representations of the bookmarks. On the left of the page, current folders are displayed. Two default folders are All and Shared. Folder All contains all of the bookmarks, while Shared contains bookmarks that have been shared with the user. Users can simply search for desired bookmarks by entering the name of the bookmark or a keyword into the Search field, after which all of the bookmarks that fulfill the search criteria will be displayed bellow. 
Users can easily create new folders by clicking on the plus button (bottom left of the screen), which will create a folder icon in which they can enter the name. (The next picture shows the new folder Classes created) 
Image Removed

Users can delete folder/bookmark by clicking the X on the bookmark picture or X trash icon on the folder iconbottom left. If a user tries to delete a folder, a warning message is displayed that asks the user to confirm his/her decision. 
My Account button would lead user to a page where he can set personal information as well as change password and other preferences. This behavior was not in the focus of our prototype testing because we thought that it is quite standard across web. 
. We originally had an "x" button instead of a trash icon but we realized that the trash can is a better metaphor than the "x" button.  

The All folder that contains all the bookmarks of the user can not be deleted so if the user selects it and presses delete nothing happens. We considered displaying an alert informing the user that the All folder can not be deleted but given that alerts are annoying we thought that we should avoid them and let the user figure out that the "All" folder can not be deleted by just trying to delete it once or twice.

Image Added Image Removed

When the user wants to create a new bookmark, he can click on Add Bookmark and the following page will be displayed. The user can specify a Name and a URL of the bookmark, and finish off by clicking Create which will create that bookmark inside of the current currently highlighted folder. Users can change directory of add the bookmark in other folders to by simply dragging and dropping a bookmark into a desired folder. it on other folders.
There is also the option of importing bookmarks from the browser, which would lead the user to the dialog similar to the one at the beginning, when user also had an option to import bookmarks from different browsers.

Image Added

Image Added

Image Added Image Removed

When the user wants to share a bookmark, he can enter the email of the person he wants to share it with, and click Share. If the button Share is clicked on before email address is entered, a message is displayed telling user to enter the email address before deciding to share.

Image Removed

Image Removed

Image Removed