This is what the user sees after going to the website.

Here we have a sign up section in the middle and a login section up top

Its kept simple because we do not expect the user to be on this page often, and for new users, its a simple sign up and go

Overview of Iteration One

Adding Collaborators

Collaborator View

All Notes Pane

Bulletin Board

Main Pane Tabs

These tabs let the user switch between different views while exploring a specific task or bucket.

Extras Pane (Settings and Logout for now)

We realized that a settings window was missing in the first iteration, so this was added. The ads on the side are just a placeholder for now (we wanted to see what people's reaction to ads in the application would be... and they didn't seem to mind!).

Bulletin Board Tab

All Notes Tab

All Notes Tab (zoomed in)

Collaborators Tab

There are a few things that did not change at all between the two iterations of our paper prototype, as they were received well in the first iteration:

New Bucket Button

Adding a new Bucket is as easy as clicking a button in the task view

(Reference to iteration 1 and 2 for location on page)

Removing Collaborator

  

Removing a collaborator results in an alert to make sure the action was not an error

Task View

The lists of buckets and tasks, always visibile on the left-hand side of the screen.

BucketList is a shared task-management application, allowing users to easily create group to-do lists.

Once you have an account, you can create "buckets" - categories to put your tasks in. You can then add tasks to your existing buckets. This application is different than most task-management applications you've probably used in the past, because you can also share buckets with your friends. So, for example, you might create a GR3 bucket, which you will share with the rest of your group. You can then assign each person in the group individual tasks, like "write briefing" or "finish paper prototypes", and monitor your progress, as a group, towards completing the project. Finally, you can write an share notes about each task, to make sure you're all on the same page.

Hopefully, this will all be clear as you use the paper prototype. Do you have any questions before we start?

You're a student in 6.813, and your group decided to switch the focus of your project, so you have to redo GR1. You were also just assigned GR2. And in your busy schedule, you somehow also just got a UROP.

Task 1 - Add note to GR1, reminding your group to update the wiki.

Task 2 - Remove Bayo's note from the bulletin, then place your new note in the center.

Task 3  - You've completed GR1! Now add a task called GR2 to your 6.813 bucket, and add the appropriate collaborators.

Task 4 - Add a UROP bucket.

The following describe our observations, based on the user testing we did. The observations have been grouped by category, describing problems found with the interface. For each category, the aspect of usability it hinders is noted, and the issue is given a score from 1-5 with respect to complexity (1 meaning easy to fix, 5 meaning difficult problem to address) and UI severity (1 meaning somewhat insignificant, 5 meaning very problematic). 

Issue: learnability

Complexity: 1

UI Severity: 5

In the first iteration of our design, a lot of tasks were designed to be accomplished with drag-and-drop interaction, such as rearranging notes on the board, or moving notes from the "all notes" section to the board. The problem was, this interaction was not immediately obvious to users. One user couldn't figure out how to move a note to the bulletin board because there was no clearly labeled button to do so. Another user continued repeating "I'm looking for a button to..." for almost all tasks, both during tasks that had buttons on screen (which she found) and during tasks without buttons (she eventually gave up, and figured out other ways to do it). A third user commented, after the test, that while drag-and-drop is often convenient, clearly labeled buttons would help users learn how to do tasks more quickly. After adding a couple of clearly labeled buttons, this problem was eliminated. 

Issue: Visibility 

Complexity: 1

UI Severity: 1

Because the screen remains pretty similar when in task view or bucket view, one user commented that it wasn't clear she was viewing a task (she thought it might be an entire bucket). Most users, however, did not have a problem with this. To fix this, we will add a symbol (picture of a bucket) to indicate when the user is viewing a bucket. We will also list the tasks in the bucket in a more predominate location.

Issue: Visibility, Learnability

Complexity: 1

UI Severity: 4

A couple of users were confused by the icons we used. We had images to represent whether or not a note was currently on the bulletin board and whether a user could edit the note. Users were confused as to what the "sticky" icon meant, many assuming it meant the opposite of what it was intended to indicate. In addition, clicking on these images was supposed to either place the note on the board or change into edit mode, which was not clear to the users and many users never even attempted this.

Issue: Efficiency, Learnability, Visibility

Complexity: 3

UI Severity: 2

One user was annoyed that she could not type on the sticky notes, only in the "all notes" section at the bottom. This makes the interface less learnable for her, as her initial thought was to type on the note (even though it wasn't a typing curser). In addition, if the user is looking at the bulletin board, it is much easier and more efficient to begin typing on the note, instead of navigating to the bottom to add the note. To fix this, we will allow for users to type on the stickies or in the "all notes" section (this was introduced in the second iteration), but we do have to be careful about visibility of 'typing' mode versus 'viewing' or 'moving' mode of the stickies.

Issue: Efficiency, Learnability, Visibility

Complexity: 4

UI Severity: 4

Many users commented that the bulletin board and the list of all notes was redundant, as the same information was displayed on the screen, at the same time, in two different places. This also wastes screen space, because the bulletin board must be smaller to fit the "all notes" section at the bottom. Getting rid of the bulletin board to remove this redundancy was considered, but many users had specifically mentioned that they like the bulletin board during testing.

Issue: Errors

Complexity: 2

UI Severity: 4

Although this was not related to our given tasks, one user commented that there was no "settings" page in our design. This means that if a user wants to change information given during sign-up, there is no way to correct it. In addition, there is no way to set specific settings to customize an account (although, at this point, we do not have this option anyways). In the second iteration, a settings page was added.

Issue: Visibility, Errors

Complexity: 2

UI Severity: 1

One user commented that it would be nice to have some personalization, such as a profile picture for each user. This can also reduce errors and add to the visibility of the system, as when adding collaborators it is easier to see which user is being added. A profile picture was added during the second iteration, however one user in the second iteration tried to click on the person's name, thinking that it would take them to a page with more information about that person.

Issue: Efficiency, Learnability 

Complexity: 4

UI Severity: 2

In the second iteration, two users commented that posting stickies was difficult because the two views (bulletin board and all notes) were not visible at the same time. This meant that the task asking people to post a sticky to the board and then rearrange the board required users to switch between views, and if they were doing this multiple times it would present an efficiency error.  In addition, there is no feedback when a note is posted (because you are not currently viewing the bulletin board), so it is difficult to know if you've accomplished a task correctly. One user became confused, and ended up exiting the task before checking the bulletin board and seeing she had actually accomplished the task successfully. Because this problem was introduced in the second iteration, we didn't get to address a solution yet.

Issue: Efficiency 

Complexity: 2

UI Severity: 1

During the second iteration, one user was in the collaborator page of the bucket view and attempted to assign someone to a task by dragging them onto the task in the sidebar. As soon as she realized that didn't work, she switched to the appropriate task view and was able to add the collaborator just fine. However, this would make the system more efficient, as people can be assigned to tasks from the bucket view without opening each individual task, so we will implement it in the future (again, we didn't test this function because it was brought up in the second iteration).

A couple of key features were changed for the second iteration of our paper prototype, based on the observations from above.

The main change in the second iteration was putting the bulletin board, all notes, and collaborators in different tabs. Instead of having all this information on the screen at all times, users could switch between these views. That got rid of some of the repetition in the first iteration (having notes appear on the screen twice). It also saves screen space, as the bulletin board can now be made a lot bigger. However, it introduced a couple of efficiency problems.

Buttons were added in the second iteration (such as "add note", "add task", etc) to make it easier to accomplish tasks we noticed people having trouble with in the first iteration.

Icons in the second iteration were more thought out, making it easier to figure out what they actually meant. For example, "sticky" and "edit".

A settings page was added in the second iteration. For now, the only things a user can change are their password and profile picture.

  • No labels

1 Comment

  1. Tsung-Hsiang Chang

    • Nice paper prototypes. Good job!
    • It would be better if you can highlight the photos of the critical tasks in so many pictures. For example, I actually couldn't find the photo of "adding a task" easily..