Scenario
Background
Ben Bitdiddle is a junior in college, studying mechanical engineering. He lives a fast paced life serving as editor of his school newspaper, The Herald in addition to taking six classes and searching for summer internships. He’s an active user of multiple social networking sites and is very tech-savvy. He travels a lot, between visiting friends at other colleges, going to job interviews, and visiting home.
...
- Interview UA President: Alice and Cy
- Interview Provost: Alice, Ben, and Louis
- Take Photographs: Cy
- Write article: Alice, Cy, and Louis
- Edit article: Ben
Scenario
Ben (username bdiddle) decides to use BucketList to organize this article.
...
Unfortunately for Ben and his team, Louis is kind of a flake. The day after the interview with the Provost, Louis emails Ben and says he’s too busy to work on writing the final article with Alice and Cy. So, Ben then has to remove Louis from the “Write Article” task. To do this he navigates from the home screen to the “Herald Dining Article” bucket view, and then to the editing screen that allows him to add or delete users from a task. He select’s Louis’s username (reason), and completes the operation by clicking on the “Delete” button. Louis is no longer assigned to that task.
Wireframes
Design 1
Landing Page:
This design has a very simple landing page. Users who are new to BucketList can watch a short demo video, showing them the key features of BucketList and how the site works. This video is mainly to convince them to create an account, but also serves to teach them how to use BucketList once they do (since the UI is so simple, this task is relatively easy).
There is a "login" button at the top for old users to simply provide their username and password, and a large "create an account" button for new users.
Main Page:
When a user logs in, this is the main screen that they see. To navigate, they simply click on tasks / buckets in the left column, which change the view on the right side of the screen.Whatever task / bucket is being viewed on the right will appear in bold in the list on the left. Viewing a bucket or a task looks similar to the user; it simply displays the user's who are currently assigned to that task / bucket, and all notes regarding the task / bucket, and a button to add users to the task / bucket. To view / hide the tasks within a bucket from the list on the left, the user can click the triangle beside the name of the bucket.
...
It is very easy to recover from errors in this design. Users can always edit notes they wrote, in case they made a mistake or something changed. In addition, they can easily add / remove collaborators from any task / bucket.
Overall:
Overall, this design stresses the simplicity and efficiency of the user experience. There is only one page to navigate, and there are clear buttons for all major tasks. It is easy for users to see everything they need to do, and quick to accomplish tasks, both for new and experienced users. The main focus of this design is the bulletin board metaphor, which makes the note-taking / sharing functionality the key functionality of BucketList.
Design 2
Landing Page
The landing page will contain a simple login in on the top section and a signin in the center.
There will be a small description of what BucketList is somewhere on the page. The main focus of the clean and uncluttered design of this page is to ensure that the user spends the least amount of time on the page and gets to organize their life as quick as possible.
Main UI
After a user logs in, this is the page where they will be spending most of their time. So it must look as clean as possible.
The Main page is divided into three frames. The top frame is just a view of where the user is. It contains the name of the site and logo and all the fancy items related to branding. It also contains todays date to give the user a reference point of the day
The Left panel contains all the information that are most relevant to the user. It provides a quick view of what is on the users list and what must be done. It allows the user to easily add, remove, cross off and modify their tasks and buckets. The specific detail of who is involved in the tasks are not included in this view because I feel like that is more of something in the secondary information category
The right pane is where the user can get more information about their tasks and buckets.
If the focus is on a bucket, the user will be able to see all the other users who are currently subscribed into the bucket. The bucket creator will be able to add users to the bucket and remove users from the buckets. Bucket subscribers will be able to request to join buckets, remove their selves from buckets and cross of completed tasks in the buckets. The Bucket creator will also be able to change the bucket title name.
If the focus is on a task, the user will be able to see all the specific users associated with that task and specific notes about the tasks per user. Meaning each user will have a section to put their thoughts about the task they are going to complete. In this view, each of the subscribers will also be able to change the task title.
Analysis of Design 2
Learnability:
The overall idea of this design was to keep things as simple as possible. On the left, the user is given a chance to add buckets and tasks into buckets. And when a bucket is clicked on or a tasked is clicked on, The main window on the right will show certain information about the bucket or tasks. The information will include notes about the tasks, and the collaborators involved in each bucket and specifically the tasks.
Visibility:
The Top – Contains information about the website, user information and settings. Also contains the date for a reference point for the user to know when it is.
Left Pane – Contains a hierarchal format of tasks and buckets. It shows the titles of each and if it’s a group task or individual tasks. The user is also allowed to search for specific tasks/buckets in case the list gets too long. The user is also allowed to add, remove, and check off tasks quickly. This contains the important information that will be useful to the user for quick access
Right Pane – Contains more detailed information about the Buckets and Tasks. In the Case of the Bucket – IT will contain the bucket title and those involved in the bucket. It also will allow the user to send bucket subscription requests to other users and allow the bucket creator to unsubscribe users.
Efficiency:
The idea of keeping things simple lead to the dynamic once page idea. To the user it will flow better if it seems the pages aren’t changing. Every click will keep the users information in focus allowing the user to easily add, remove, and modify tasks and buckets.
Errors:
Again, with everything on one dynamic page and easily accessible, the user should be able to recover from errors a lot faster.
Overall:
All in all, we would like to keep the main UI of our group task organizing web app as simple and straight to the point as possible. It will always keep what is important in view to the user at all times.
Design 3
Analysis of Design 3
Learnability:
This design is very easy to learn. Since there are not a lot of features, there aren't many areas which can introduce confusion to the user. In addition, each page is very simple, as each page has a very specific function (add a task, add a bucket, etc).
Visibility:
Once concern with this design is the lack of visibility. For example, when editing a task, the user cannot see what other tasks need to be completed. In some situations, this might not matter, but other times it might be nice to see reminders of what else is going on while editing / adding tasks. This design tracks modes well, and always displays the logged-in user's name, and shows who else is collaborating on tasks.
Efficiency:
Adding tasks is relatively easy, however it requires navigating away from the main page. This introduces some efficiency concerns, as there is a lot of time spent navigating through pages before simple tasks can be accomplished. However, since each action requires very little sub-steps, the overall efficiency of the system is still ok.
Errors:
It is possible to easily remove / add users, or edit bucket / task details, therefore any error is easily correctable. In addition, since there are lots of intermediate steps when adding information (navigating to new pages and clicking 'ok'), errors will likely be more rare in this design.
Overall:
This design is easy to use and individual pages are very simple, but the overall it is more complicated than the other two designs. Having multiple pages to navigate through makes the layout of the individual pages less complex, but the website as a whole becomes more complicated to navigate through / learn, and there are more sub-steps to complete for each action the user takes.