DESIGN
Here is a screen shot of the Marauder's Map main page.
Marauder's Map is a way for users to see where their friends are and what they are up to.
...
this method is simple, clear, and to the point.
IMPLEMENTATION
All major functionalities are organized within one page. For implementation and collaboration convenience, we divided the page into several modules. The modules were first developed separately, and then integrated into one layout. The main frame resizes the modules to fit into the size of the browser window.
...
If we are to improve the implementation, I would cache a copy of the user info/friendship data locally. The listeners should modify this local data and use it to refresh the views. The local data will be synced with the server in the background.
EVALUATION
Method
We conducted our testing using the same briefing and tasks from GR3 Paper Prototyping. Throughout GR4 and GR5 the intended purpose of our application and it's features did not change, so we decided that the same briefing and tasks would still be suitable and sufficient to test our finished implementation.
...
1. Cosmetic (graphic design): Two users pointed out that the add/delete group button looks too similar to the Google maps navigation buttons.
Buttons for adding and deleting a group attached along the sidebar
This issue did not affect their ability to figure out what the buttons were for, so it was deemed cosmetic. To alleviate this issue, we could have affordances for those buttons other than a ' + ' and ' - '. For example, the button for adding a group could read ' + Group ' instead of just ' + '.
2. Minor (visibility): One user initially thought the status text field was for searching.
| Wiki Markup |
|---|
{html}
The status text field says "your status message" when it's blank, but once a status message is submitted, there are no other hints what that text field is for. To alleviate this issue, there is enough room on the left-hand side of the status bar to include the label "Status: "
{html} |
| Wiki Markup |
|---|
{html} <IMG !imagetext="status.png|border=1! {quote} {quote} Room for a "Status" label on the left {html}" mce_src="../../../../../../../../../download/attachments/75642726/status.png?version=1&modificationDate=1305152541000" mce_style="border: 1px solid black" src="/confluence/download/attachments/75642726/status.png?version=1&modificationDate=1305152541000" style="border: 1px solid black"></IMG> {html} |
Room for a "Status" label on the left
3. Major (learnability): All three users had issues discovering how to create a group.
Two of the users took significantly longer to complete the task "Create a group called Study Buddies" than any other task, and one user opted to be told how to do it. All three users commented that they thought the ' + ' and ' - ' signs meant that the buttons were meant for zoom functionality on the map. One user also commented that it did not help that the buttons were separated from the group tabs, as opposed to just being right below the last tab.
This issue was acknowledged in pilot testing and originally deemed a cosmetic graphic design issue. However, the fact that our test users had significantly more trouble with the task, plus one user having to ask how to complete the task, we now consider this issue a major learnability issue. The solution to this issue remains the same as previously described in our pilot testing results.
User Testing Results
User testing was conducted on three students who have never taken either course and have never been educated in user interface design through any other sources. These students were recruited simply by asking friends if they would like to participate in our user testing and letting them know what the time commitment would be and what would be expected of them before they agreed. The results of our user testing proved to be much more interesting than our pilot testing. Some of the issues our users had were unexpected, and it was surprising that each had the same exact intuitions. Our user testing brought to light the following issues.
1. Minor (learnability): When logging in, none of our three users clicked on the mood icons to login.
Our users all simply typed in the given username and password and hit enter. Our application allows this and will default the user's mood to "Adventurous" if they do not pick one. Upon being told how the login was intended to work, one user replied that she would have never thought that those icons had a purpose other than decoration. When mousing over the icons, the mouse changes from an arrow to a hand, indicating that these icons ca be clicked on and have a purpose, however this is only beneficial if the user never even thinks to mouseover the icons.
It is possible here to see the mood icons as decoration, as opposed to functioning buttons
A possible solution could be to leave things as is, because if the user does not select a mood upon login, they can change their mood afterwards in the status bar. Another option would be to disable the fact that clicking "Enter" will log a user in, and instead require that a mood icon be clicked on. In this case, if the user does hit "Enter" to try and login, the mood icons could be highlighted to show the user they must choose one to login.
2. Minor (learnability): When tasked with hiding from a friend, all three users initially clicked in the hiding from area, two of them specifically attempting to click within the placeholder.
When asked why that was their first intuition, two users stated that the placeholder made it look as if they could type in a name. However, when clicking in the "Hiding from" area in the bottom bar, all three users went to click on the "Hide from user" eye next to the designated friend, successfully completing the task without too much hassle.
The dashed placeholder has the potential to be confused with a text area
Initially the purpose of the dashed placeholder was to be a target for dragging and dropping a friend's profile picture into a dashed square that read "Drag Photo" in order or hide from or chat with a friend. Now that we are no longer using drag and drop for this purpose, the placeholder does not hold as much significance and can be removed so that users do not confuse it with a text area.
3.
| Wiki Markup |
|---|
{html}
{html} |
Two of the users took significantly longer to complete the task "Create a group called Study Buddies" than any other task, and one user opted to be told how to do it. All three users commented that they thought the ' + ' and ' - ' signs meant that the buttons were meant for zoom functionality on the map. One user also commented that it did not help that the buttons were separated from the group tabs, as opposed to just being right below the last tab. This issue was acknowledged in pilot testing and originally deemed a cosmetic graphic design issue. However, the fact that our test users had significantly more trouble with the task, plus one user having to ask how to complete the task, we now consider this issue a major learnability issue. The solution to this issue remains the same as previously described in our pilot testing results.
REFLECTION
GroupsGroups
...
In this project it became apparent that simplicity was the best method. In the beginning, the group tried to jump into fancy drag and drop methods, but these effects ended up making the design more confusing. It was only after countless hours of frustration that the group admitted that drag and drop was not necessary or even useful for the project. In the future, it would be good to keep the importance of design decisions during implementation. Questions such as “how necessary is this feature to the core tasks of the design” and “how does this design decision add to or complicate the user interface?” should be asked.
Simplicity also played a part in designing the project’s main features. The group had to strip the project down to its core features to figure out what to prototype and focus on. Since the project had a simple scope, this part of the process was easier to do well. When designing interfaces in the future, it will be important to remember that it is better to do a simple project very well, than a complicated project poorly.