...
Implementation:
The biggest thing that bothered us while doing the implementation was the fact that we weren't able to implement back-end on the level our application would require in the real world. We looked around, we read a lot, but it turns out that it's pretty hard, if possible, to take screen shots of the pages in real time. This made us think about using IFrame instead of screen shots. This would also enable user to interact with the page directly without a need to open it in a new tab. We haven't done this since a lot of work with pictures has already been done, and we realized it was ok for the scope of this class not to have updated screenshots of the desired pages, but it is something we might consider in the future if we decide to work on this project some more.
One of the big challenges of our application was to make it different from the existing one on the market. This involved an idea of visualizing our bookmarks better than it has been done in the past. We had an idea of representing them in a similar way Safari represents its history pages. The pages are easy to see, and the animation and visual effects are very pleasurable and easy to use. However, we couldn't actually find this code anywhere so we can reuse it in our app. We decided to make it from scratch. We used webkit transition property to make it look like animation=move slowly, disappear gradually, etc. This caused our app not to work properly in firefox. It just didn't want to do animation even though we used transform kit specific to mozzila. When the arrow keys were pressed, bookmarks changed their position and size, making them look like they are rotating left and right with the arrows keys presses. When they go out of scope of the screen, they become invisible.
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 :).
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."
...
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 | - 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?
|
...