• Created by Unknown User (psaylor@mit.edu), last modified by Unknown User (bxie@mit.edu) on Mar 10, 2013 23:50

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 58 Next »

Scenario

Jane, a desk worker of 2 years at McCormick, is watching Twilight during her shift when Jillian, a resident, approaches her at desk to pick up a package. After unsuccessfully trying to find the package, Jane opens the Logbook on CollabDesk and writes an entry including a description of what has transpired.

When the next desk worker, Ben, arrives, he reads the new log entries on CollabDesk. He remembers seeing a package in an odd place behind desk, so he goes back and looks for it. After finding the missing package, he quickly finds the entry, responds to it, and marks it resolved.

Design Sketches

Patricia Saylor

LogFeed
The main feature of this design is the news-feed like ranked listings of all log messages. The pane displaying these logs is "infinitely scrollable", loading more entries when you scroll all the way to the bottom. This keeps the scrollbar reasonably sized until you want to see more logs, and also allows you to see more logs without having to change views. The logs displayed can be narrowed by keyword or filtered by pre-defined categories like "resolved" or "unresolved" using the search bar on the left, and the display at right will be updated with only the matching entries. To create a new entry, just start typing in the text box at the bottom of the screen. This is always accessible and will fill in most information besides the actual message, like date/time/name, by default. One of the best things about this design is that it is simple--there aren't any pages to navigate through, there's just one main view, and everything you need is visible and ready to use all the time.

Logbook Metaphor
The prominent feature of this design is the metaphor to an actual logbook that you could keep in a binder. You have one log entry per page, and you read the logs by stepping through them with either arrow keys or the navigational buttons on the bottom. Tabs on the side delineate all the log entries for a given week for faster navigation. This allows the user to focus on one entry at a time without being overloaded or distracted with all the other log entries. It sacrifices some efficiency to maintain the metaphor, which would presumably make it easier for a worker to adjust to a similar system and help them focus.

Non-Computer Interface
This design is for a voice recorder logbook. It has a small screen on it that displays the date and time, along with other useful information depending on the mode. To leave a new log message, the desk worker clicks down the record on the side and begins talking into the mic. The voice recorder automatically translates the speech to text and displays the text on the screen as it is translated. When finished, unclick the record button and you are returned to the main message view. Here you see the date and time stamps of previous log entries, along with a short snippet from the beginning of the entry. When the device is full, remove the cap and plug it into the USB port of your computer to charge the device and download and clear all the old log entries. Though it is slower to scroll through and find previous logs, the central benefit of this design is that a desk worker doesn't have to be stationary to use it. If they are moving around behind desk or doing their rounds in the dorm, they can use this as they go instead of waiting to get back to desk to leave messages.

Divya Bajekal

Message Posting
This design has been created to make the most common tasks for desk workers be as efficient as possible. In the left-hand panel, the title and first few words of each message are displayed. As shown in the diagram, these are organized by date. However, this design will also support functionality to allow this list of messages to be sorted by other parameters such as priority or message sender. As a user scrolls through each of these messages, the complete message will show up in the top right panel. Although not shown in these drawings, each message will also show a number of parameters such as its priority, status (resolved or unresolved), author, date, etc. Finally, in the bottom right panel, new messages can be created. Since this is one of the most common tasks for desk workers, this panel has been given enough space on the main page, so that users can simply click in this panel and start typing to create a new message. Once they click the "Enter" button, their new message will be added to the list of messages on the left.


Tiny Screen Interface
This design focuses on presenting as much information as possible without clutter in a tiny screen interface. The main window only shows the previews of all the messages. Users can scroll down to see older messages. When they select a particular message, a new screen will open that shows that message completely. All of the parameters, such as priority, status, author, date, etc. will be shown above the message. Finally, from the main screen users can click the "Create new message" button to open a screen that is simply a text box to write a new message. By splitting up the main tasks into different windows, this design aims to keep a tiny interface simple and clean.


Design for Elderly Users
This design has been created with the potential needs of elderly users in mind. The interface is very simple with large buttons and few choices in case users are not completely familiar or comfortable with technology. It features an audio button that when clicked will read out various options to users. If the device is in audio mode, it will also allow users to listen to messages rather than having to read them. Thus the design provides an alternative for elderly users who may not be able to read words on the screen well. Similarly, the "record" button in the "create new message" window allows users to leave a voice message instead of having to type a message. Such a design would potentially have to feature speech-to-text and text-to-speech technology to convert messages back and forth to a user's preferred interaction style.

Jonathan Lui

This design is designed to provide users with the most information. The left side of the screen has a list of unassigned tasks and the right side of the screen is a list of users and their tasks. At the bottom left of the screen a user can enter a new task. when you click on a user, a new screen appears that shows tasks that are expiring today, upcoming tasks, and any notes that were previously written.

This design is one for the elderly. The bottom left of the screen displays directions for adding tasks, marking tasks complete, etc. The top right corner allows for new entries for tasks. At any moment all tasks are displayed either in the unassigned column or in the View Old column.

This design is very simple and has not been done. The left side simply shows tasks that are unfinished. The right side of the screen shows completed tasks. Whenever a user clicks the checkbox on an uncompleted task, it moves to the completed column.

Benji Xie

"Filing Metaphor": This design has categorization based on which users sent the message.

"Hey Kids!": This adorable design also categorizes according to which users sent the message, but has little click-able sprites with pictures on the heads

"Old School": This computer-free design has a segmented whiteboard where different people post in different parts of the whiteboard. No notes are thrown away by student workers; instead, completed tasks are signed and dated by the worker that completed the task and removed it from the whiteboard and placed in a bin where they are reviewed and discarded by the desk captain.
It is worth noting that the whiteboard is never used (a magnetic board would serve the same purpose) so information cannot just "disappear" without a trace.

Storyboard Designs

Storyboard 1 - Task Oriented

Tasking is not a specific part of our scenario, but when we brainstormed ideas we felt that it was a creative way to meet our user class' needs. When Jane signs in she is welcomed by a screen that displays all of the incomplete tasks that have been assigned to her. On the right portion of the screen is a list of other desk workers and the tasks that they’ve been assigned. The purpose of the task oriented design is to overcome the bystander effect. Our main goal is information sharing. It is a desk worker's responsibility to read the logbook during each shift but desk workers often forget to complete this task. Assigning a task to a person helps overcome this effect by giving a desk worker a sense of responsibility over a task.

When a Jane fails to find a resident’s package she can navigate to the bottom of the screen to add a new “Event”. She simply fills in the Title, Date, Assigned To, and Description. By default the assigned to is filled in with “ALL”. The "ALL" button will put the event into the general "ALL" tab. The "ALL" tab contains a history of the events. If Jane wants to assign the task to a specific desk worker she can simply type in the name and options will be pulled from the database.

Bob arrives at his shift and logs in to CollabDesk. He recalls seeing a package in an odd location during one of his earlier shifts so he goes to the backroom to search for it. He finds the package and selects the “ALL” tab on the left pane to see if a desk worker previously reported the event. He sees the event as the first item under the “ALL” view clicks it. A box pops up with a detailed description of the event and he clicks the “Check box” to mark it as resolved. If he had a question about any part of the event/task he could go back to his main screen and click on the mail icon next to the worker's name who assigned the task and ask him/her a question.

Safety:

In this design notice that there is no way to edit an existing event. If a user submits the wrong data the user must manually delete the entry and rewrite a new one. There are also several small ‘x’ marks on each event. If a user accidentally clicks one of the “x” boxes there is no way to recover the lost event. Notice that on each event/task the check mark and the "x" are very close to each other, which presents an issue to the user. The user could accidentally check the "x" when he/she meant to click the "check mark". Likewise, the user could accidentally click the "checkmark" when he/she actually meant to click the "x".

Efficiency:

This design allows users to easily assign and manipulate tasks between users. For example, to assign a task to a user, one simply has to drag the event under that user’s name. To unassign the task, one simply drags the event from the user’s list of tasks back into the main “ALL” group. However, if someone desires to delete all tasks or resolve all tasks a user must manually delete or resolve each and every task. In the "title" section, as the user types a dropdown menu of the commonly used categories of desk worker tasks will appear. For example, if a user types "Mis", then "Missing" will be suggested to the user and the user can simply press tab to complete the title. This workers for several other desk worker tasks such as Missing Package, Missing Key, and Missing Vacuum Cleaner. 

Learnability:

Several of the icons are consistent with other programs. For example, the envelope logo for sending e-mails is externally consistent with other programs. The “x” icon is a very well known icon for closing or deleting items. The “Add Event” box is also very self-explanatory. However, the dragging of tasks is non-intuitive until a user plays with the system for a long time. A user can drag a task from the main pane into the section under a user's name. This is a method that a user can use to assign the task to a specific portion. The user interface also supports "ctrl+f" which makes it easier for users to learn. "ctrl+f" is a standard functionality for browsers and several applications.

Storyboard 2 - Folder Metaphor

UPDATED (reflecting suggestions from Jeremy, Studio)

The message can now be either a "Task" or a "Note." Tasks can be resolved; notes cannot be. The categories (tabs) reflect this. Also, a picture (supposed to be an unchecked box, note, and checked box) in the upper left hand corner of each message provides affordances towards what it is (unresolved message, note, resolved message).

Comments

  • Want to avoid cluttered
  • Want to make sure when creating message, it is clear you are selecting task OR note
Original Storyboard

Log In: Upon login, Jane sees her desktop screen. The tabbed browsing allows for Jane to review all OPEN messages, ALL messages, or RESOLVED messages, as well as HIGH PRIORITY messages if they exist (an icon would appear to signify that). She can search messages or create new messages. She can see all the functionality without scrolling or going to another page.

Write New Entries: After Jane cannot find Jillian’s package, Jane clicks CREATE NEW MESSAGE and an in-window dialogue box appears. Jane wills out the subject, decides this is not a “High Priority” message, and writes the message and clicks CREATE to add the note, which is now visible on the ALL and OPEN tabs.

Read Old Entries: Ben signs in the next day and notices the note from Jane. Later in the shift he discovers the missing package, gives himself a high-five, and sends Jillian an email saying that he found the package. Ben clicks the MARK COMPLETE button to signify that the task has been completed and the message is now resolved.

Search/Scrollling Through Old Entries: A search bar always exists in the same location (top right corner) and the tabs allow for users to go between different categories of messages

Learnability

There is an emphasis on external consistencies and metaphors to promote learnability. The “filing” metaphor is familiar and has the external consistency of tabs (web browsers). The universal search bar is familiar and well-labeled with a “search” button and a magnifying glass for an added affordance to the functionality of the search bar. There is only one window so users cannot get lost with navigation, and all functionality is always shown.

Efficiency

Becoming an expert may not improve usability with this design, as the goal of this design is to have a very easily learned interface so student workers do not need a training course. Hot keys and perhaps simple customizability (changing tab order) could improve efficiency. Categorization and search with autocomplete will help efficiency.

Safety

Errors related to message posting/editing should be recoverable. Messages are “resolved,” never deleted. Marking a message as “resolved” can be undone by clicking on the checkbox (may need to improve affordance). There are no buttons placed next to each other to deter description slips (REPLY is a button, whereas “Mark Complete” is a checkbox). Autcomplete for searches and tagging should decrease errors.

Storyboard 3 - Streamlined Preview

After Jane logs in, this is the main view. She quickly sees all of the log messages she hasn’t read yet in the “Unread” section at the top of the left pane. As she scrolls through messages with the up/down arrows, the selected message appears in the viewing area on the top right; once she reads a message, she marks it as read by pressing “Enter”, and it pops down to the bottom section that contains all of the log messages.


To write a new entry about the lost package, she just goes to the bottom right corner and starts typing. The date, time, and her name are filled in automatically, and a low default priority (indicated by the stars) is set for the message. She presses “Submit” and her log entry now appears in the left pane for all desk workers to see.

When Ben logs in, he reads his unread log messages and remembers he has seen an oddly placed package somewhere behind desk. He finishes reading all the new logs before looking for the package.


After finding the misplaced package, Ben uses the search bar to quickly find the log about the missing package. He then clicks “Reply”, and the “Create New Message” box is renamed “Reply to ‘Missing Package’”. He types up a response in the text box and presses Submit. His response now appears under the original entry.

Updates

To make this design more specific to desk workers' information and needs, we have added the below features.

  • Stronger classification of messages: 1) a message can either be an 'issue' (meaning that it is something that needs to be resolved) or a 'note' (meaning there is nothing to be resolved); 2) a message may fall into any of the following categories: lost/found (lost phone), desk supplies (ran out of red paper), repairs (elevator broken), requests (many residents requesting fans during spring), miscellaneous. 
  • Integrated resident database. When creating a new message, you can include a link to a resident's information by using the '@' symbol preceding their name. This will also enable autocomplete on that name. For example, if Susan brought something to desk, the desk worker could type "@Sus" and it would suggest "Susan Sample"; using this suggestion turns her name into a link that, when clicked, will open a dialog window with more dorm-specific information about Susan, like her class year, her room number, and her telephone number.
  • Autocomplete for message headings that will also fill in an appropriate skeleton for the message. For example, selecting "Missing Phone" will fill this in as the title and will fill in a skeleton message like "___ lost her phone on _____ and reported it today. It was last seen ____. Phone description: ____". 
  • Priority on a low/medium/high scale indicated by a colored flag and corresponding text (to replace the priority stars).
Safety

To determine which messages the desk worker has read, instead of just basing it on whether they scrolled over it, we will instead mark it as read when the user presses "Enter" while the focus is on that log title in the left pane. This way, if a user accidentally over-scrolls, they don't lose track of the skipped messages. We anticipated potential issues if desk worker makes a typo in the log entry, or if she accidentally created an extra log entry. To handle this, we allow users to edit and delete only their own messages, so as to prevent malicious editing of other people's messages.

Efficiency

Create New Message is always available and is very streamlined because it is one of the most frequently used features. You don’t have to click to open a new page, you can just start typing right away in the text box. As well, a lot of the little details like the date, time, and author are filled in automatically but can be modified if necessary. The left pane has a lot of information scent with the titles and short excerpts of each message displayed, but one downside is that you can only see one full message at a time. This can help not overwhelm the user with too much information at a time. A potential slow step is having to press enter to mark a message as read, particularly if the user is behind on reading the logs; however, we estimated that since each user works desk at least once a week, they should have at most around 10-15 messages to read, and the time to read a message will probably overshadow the time to press enter.  The autocomplete features will also improve efficiency when writing similar messages or writing about the same person.

Learnability

The design is reminiscent of an email client where you have your list of emails on the left and you can view only one of them at a time. However, it differs by having a designated Create New Message, but this is easily learnable because it's always available and always in the same spot. Icons are grounded in familiar paradigms, like a pencil for edit and a trashbin for delete, and other buttons and areas are clearly labelled. One thing we think might be less obvious is the affordance for changing the time and star ranking when creating a new message. The resident-tagging feature using an '@' sign might be harder to learn at first, so we will have to add some visibility to this feature; once a user sees it though, it should be easy to learn and remember because it is very similar to the facebook-tagging scheme that desk workers are used to.

  • No labels