Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Photos

Description


Our introductory page. This is the first thing the user sees when the web page application is opened. Three little boxes Step I, Step II and Step III explain in brief what this web app is about and what does it offeroffers.


First time users can register by clicking on the Sign Up and entering the basic information about the user.


After registration, first time users can import their bookmarks from their current browser by selecting desired browsers and clicking on 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.


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 has have been shared with you by your friendsthe user. Users can simply search for desired bookmarks by entering the name of the bookmark or a key word 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. (Next The next picture shows the new folder Classes created)


User Users can delete folder/bookmark by clicking the X on the bookmark picture or X on the folder icon. 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.


When a the user wants to create a new bookmark, he can click on Add Bookmark and the following page will be displayed. User The user can specify a Name and the a URL of the bookmark, and finish off by clicking Create which will create that bookmark inside of the current folder. Users can change directory of the bookmark by simply dragging and dropping a bookmark into a desired folder.
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.


When a 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.

...

  • Tell us what you think you are seeing now (given immediately after sign up/log in)
  • Create a new folder and name it “Classes”
  • Add a bookmark for 6.813 stellar page to folder Classes.
  • Create a new folder, name it “MIT” and move your bookmark for 6.813 from folder Classes to folder MIT.**
    • Would you expect the bookmark to be present in both folders or only in MIT?
  • Remove folder Classes
  • Change the name of the 6.813 stellar page bookmark to “UI”
  • Find all the bookmarks that contain word “stellar” in their name**
    • What do you expect that search does?
    • Where does it search?
  • View all the bookmarks you have
  • View all the bookmarks shared with you / what do you think that folder “Shared” contains?

...

  • Share 6.813 stellar page bookmark with your friend Jovana.**
    • What do you need to know for this task?
    **
    • How would you obtain it?

Observations: Before the Iteration

...

User

Creating and Managing an Account

Interacting with MyWeb

Sharing the Bookmarks

User #4

  • Easily able to sign-up and get to work.
  • Expected an “import bookmarks from other browsers” option in the “create a new bookmark” window. (this user actually gave us the idea to put the import option inside the window for adding bookmarks (as seen in the images of the prototype))
  • Unclear about when a bookmark is selected.  Expects the selected bookmark/folder to have highlights around it.
  • Would like to see a drop-down list titled “IN” that would at any point display the folder the viewed bookmark is and give an easy way to change to another folder.
  • Happy with the sharing tools.

User #5

  • Took some time to find the importing options once the account was created.
  • Couldn’t understand how to change the name of the bookmark. Instead of just clicking on the name which would allow him to type in a new name, the user thought he should double-click or right click in order to change it.
  • Didn’t know how to move bookmark from one folder to another, so he tried to delete the bookmark, and then create it again in the new folder.
  • Wanted to have a list of contacts to share the bookmarks with instead of having to go lookup the e-mail address.

User #6

  •  Tries to click on the textboxes titled 1,2,3 explaining the steps need to start using the site.
  • Found bookmarking a webpage tedious because the user had to open the website in another window, copy the URL come back to our app and paste it.
  • Wasn’t sure whether the “x” at the top of the bookmark window meant close or delete.
  • Unclear about whether drag and drop takes you to another folder or keeps you in the current one.
  • Wanted an UNDO option.
  • Wasn’t sure who he is supposed to share his bookmarks with. With himself, friends or what? 

...