You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Next »

GR3 - Paper Prototyping

Prototype photos

Photos

Description


Our introductory page. This is the first thing the user sees when the web page 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 offer.


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 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 been shared with you by your friends. Users can simply search for desired bookmarks by entering the name of the bookmark or a key word into the Search field, after which all of the bookmarks that fulfill 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 picture shows the new folder Classes created)


User 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.


When a user wants to create a new bookmark, he can click on Add Bookmark and the following page will be displayed. User can specify Name and the 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 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.

Briefing

Scenario Tasks

Observations: Before the Iteration

User

Creating and Managing an Account

Interacting with MyWeb

Sharing the Bookmarks

User #1

  • Easily found the way to sign-up
  • Had no trouble importing bookmarks during sign-up
  • Took a long time to figure out how to import more bookmarks once logged-in
  • Quickly and easily found how to add/delete folders
  • When adding a bookmark to a folder, was looking in the folders separation for a button instead of the separation where the bookmarks are displayed. 
  • Interacting and searching through to folders was fast and easy.
  • When deleting a folder, expected an alert/confirmation window.
  • Easily found how to share a bookmark.
  • Was clear about the information necessary for sharing.
  • Expected an alert/confirmation when hitting the "share" button.

User #2

  • When creating an account was not sure whether the "Name" box asks for the actual name or the username.
  • Is not sure how to import more bookmarks when already logged in.
  • When adding a new bookmark, thought of putting the link to the webpage in the "Name" box instead of the URL box. 
  • When moving a bookmark from one folder to the other by drag and drop, was not sure whether the bookmark gets removed from the original folder or just copied to the new one.
  • Could easily find how to share a bookmark
  • Was not sure if it was possible to share a folder.
  • Expected an alert/confirmation when hitting the "share" button.

User #3

  •  Tried to click on the website description steps from the intro page.
  • Was actually able to import more bookmarks when already logged in.
  •  Thought that the search box searches in the Web and not through the bookmarks. 
  • Expected some feedback that the URL worked when adding a new bookmark.
  • When trying to view all the folders, tried to select all the folders or do an empty search instead of selecting the "All" folder.
  • Took some time to locate the share button
  • Realized how share works once the button was located.
  • Was unclear about the function of the share button, i.e. does it share a bookmark or the folder the user is in?

Observations: After the Iteration

User

Creating and Managing an Account

Interacting with MyWeb

Sharing the Bookmarks

User #1

User #2

 

User #3

 

 

 

Prototype iteration

  • No labels