...
Since this animation was hardcoded to fit perfectly inside of a specific div size, it was hard for us to implement horizontal scaling of our main div with the window size. So we made a decision to keep the width of our website constant,and just center it as the width of the window changes. The pro of this decision was that it was easier to implement and that it would fit to any size of the window (at least the ones that are currently popular window sizes among the users). The cons were that on the HD screens with huge resolution, our main part of the page looked small. Even though this is how a lot of webpages are implemented nowadays, bookmark visibility is very important for our app. We went with this decision however, hoping that users on hd screens will be able to apply cmd + if they decide that they want a bigger app :).
We chose to implement warning messages and error messages through “soft” pop-ups where the function for opening the popups was very general. Because most of the warnings and messages could be classified into several categories where inside the category only a message is changed, we made the function for opening the pop-up messages very modular and general such that it can be used across the platform, for different purpose, only by changing the argument.
Because we implemented a function that draws the bookmarks from the array of bookmark objects, we were able to achieve high modularity in changing the content of the bookmark view. Bookmark view changes every time someone presses a key in the search box, clicks on a folder, or clicks on one of the shaded bookmarks, or presses the arrow keys in order to scroll. In all of these cases, our approach was to detect the bookmarks that should currently be drawn and then use the function to draw them.
The implementation of folders was done through the dictionary where keys were folder name and values were arrays of bookmarks corresponding to a particular folder name. This implementation limited us in a way that we needed to enforce that folders have different names; however, we believed that this is a reasonable enforcement and one that we could easily change if needed by implementing unique folder ids.
The implementation of scrolling through clicks was done by simply attaching a listener to every image that is added as a bookmark and then detecting its position in relation to the current front bookmark and then rotating all the images in the appropriate direction appropriate number of steps.
The implementation of the drag-and-drop feature for copying bookmarks between folders was particularly challenging. The trouble was that browser associates default actions with the mousedown and mouseup events. We spent some time understanding how to prevent browser default events, but at the same time have the events propagated to our listeners.
Evaluation:
Briefing
"You heard about a new website for managing bookmarks from your friends and you decide to check it out. You land on a page that you are seeing right now. We will give you a few tasks that aim to test this user interface. Please think aloud and feel free to explore the interface."
...
- Add Jovana to your contacts.
- Share 6.813 stellar page bookmark with your contact Jovana.
- What do you need to know for this task?
- How would you obtain it?
- Delete Jovana from your contacts.
Observations
Inexperienced user was our third test person. Our vision when we started this project was that it should also be useful to people who are non tech savvy – people who essentially use 2 to 3 websites repeatedly. Because of this we thought that it would be appropriate to test that kind of person. This was one of our member friend’s mother, who uses a computer primarily for email, but “would like to learn how to use more websites”.
We explained this user what the bookmarks are because she was not familiar with the concept. Then we walked here through the standard set of tasks
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
- Even though we changed the place of our import bookmark option, user couldn't find it for a long time. He was basically clicking randomly on buttons, so I told him to leave the action for later
- He asked how could he log out, because it's not obvious. Well, he can't because we forgot to include log out button at the top. If we had more time, this is one thing we would certainly improve!!
| - He had no trouble adding/deleting folders
- However, when adding bookmarks he would first add them to the folder All and then drag and drop them into folder classes. Good thing about this: he easily figured out how to drag and drop. Bad thing: he though that since all the bookmarks ar ein the All folders, that's the place for them to be, while in Classes folder, since there was nothing shown or written, he just didn't know what to do. Easy fix for this would be to write in the empty space of an empty folder: "This folder is currently empty. Add more bookmarks to it!" or something along those lines.
- When dragging and dropping a bookmark, he didn't get any feedback about whether the bookmark was transfered or not. What made him more confused, is the fact that when he dragged and dropped, he would stay in the same folder he was at, and the bookmark would still be there, so it seemed as though, even though he drags and drops, nothing really changed. He needed to click to that other folder to realize that the bookmark showed up there too. He said that was unexpected and that that way we treated out folders more like labels, which wasn't clear in our name at all. Fix would be to when transferring a bookmark, it is deleted from the current folder so the user would have some feedback from it!
- Searching was quite easy to figure out, but he had some confusions: he though it's searching inside of the folder he's in right now, even though our search searches all the bookmarks.
- He loved the bookmark animation but said it wasn't completely straightforward that you can move them around with arrows, especially if you've never used safari before where the similar concept shows up.
- Once he opened "Add bookmarks" he realized where import bookmarks was hiding all along! :)
| - He had trouble figuring out how to share a bookmark. He was trying to drag and drop it to the contacts section, and then to the name of the person he wanted to share with. Seemed to him that i should be similar to folder implementation. Also he commented that "Share" didn't really look like button, which made him less probable to click on it.
- He liked the feedback he got from sharing a bookmark, but he wasn't completely sure what was shared? The front bookmark? Or some other bookmark?
- He would like to be able to share the folder
|
User #2 | - The sign-up process and initial bookmark importing was smooth.
- Took some time to figure out where the import more bookmarks option was but eventually figured it out
| - Adding the folders was easy, though he first tried to add a folder without a name and was happy to see an alert informing that he can't so that.
- When deleting a folder, he tried to drag the folder to the delete button because it looks like a trash can just like in operating systems and the way delete works there is by drag and drop. After seeing that that doesn't work, he did the right thing which was to select the folder and press the delete button.
- Tried several times to delete the All folder and for a few minutes was not sure what it represented and why he couldn't delete it.
- Was unclear about where the "add bookmark" button adds the bookmark to.
- Easily figured out how to drag and drop bookmarks when trying to add a bookmark from All to a new folder. Was surprised that dragging and dropping a bookmark from one folder to the other wouldn't actually move it but rather would copy it. Although he said he could live with that, it would have been more intuitive to actually move the bookmark instead of copying.
- Asked about why the bookmarks are not more spread out so that it would be possible to see more than 3 bookmarks at once.
- Easily found the search-box but expected search to happen in the selected folder. However, after about 10 seconds of confusion realized that it actually was searching in All.
| - Easily added and deleted contacts.
- Easily realized that it was possible to share a bookmark with multiple contacts.
- Expected that share button to look like a button, although had no trouble finding it.
- Liked the feedback from sharing but mentioned that having more info in the feedback, such us what was shared, would be helpful.
|
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.
| - found the sign up button easily* wanted to know whether she would have to do this every time she turns on her computer* When the window with the option to import bookmarks opened up, she was not sure what the names of the browsers were and thought that she was supposed to check all the checkboxes. This demonstrated a potential issue that could probably be solved by having “skip” button in addition to continue and cancel.
| - had trouble finding the option to add folders, but when hinted to the “plus” button in the lower left, she explained that she expected that she would find a sign with “add folders” text on it
- Consequently, adding bookmark was an easy task for her because she found the corresponding textual button easily.
- When prompted to move a bookmark from one folder to another, the user was not able to figure out the task by herself, but she was very amused when we showed her how to do it
- Remove folder was an easy task for the user because she understood that the icon has to be the trash icon next to “add folder” option that she learned about before
- When we asked to find bookmarks that contain certain name, she struggled a little bit, but eventually realized, by the method of elimination, as she explained, that she was supposed to type into the search box.When she did that, she became much more comfortable with the application and started exploring and was very amused with the way bookmarks move around.
| - When asked to add contacts, she recognized that option must be similar to add folders, so she performed the task correctly.
- struggled a little bit with sharing the bookmark because she tried to drag it to the contact similarly to how she dragged it to the folder. Eventually, with some help, she understood what should be done
- deletion of contact was tried without prior selection, but she understood the warning message and then performed the task correctly.
- 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?
|
Usability problems and solutions
...