Versions Compared

Old Version 44

changes.mady.by.user Unknown User (psaylor@mit.edu)

Saved on

compared with

New Version Current

changes.mady.by.user Unknown User (psaylor@mit.edu)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Corrected links that should have been relative instead of absolute.

Design

Basic Overview

Title

Prototype

Final Implementation

Comments/Description

Login

N/A

We had not implemented a login screen for the prototype. The login screen allows individual desk workers to have unique usernames and passwords. The backend stores the unread vs. read messages for individual desk workers.

Home

We significantly redesigned our home page between iterations. Based on user feedback, we decided not to persistently display the create message pane. In the final implementation, there is a create message button that opens up the create pane. Users also mentioned that it was confusing to understand which message was shown in the read message pane when this page is first displayed. In the final implementation, the read pane initially displays an instruction to begin clicking on messages in the browse pane. We also redesigned the heading bar to make our product name CollabDesk stand out better.

Browse Pane

Significant design changes were also made to the browse pane. Rather than displaying unread messages at the top, we created a different tab for them. This was based on user feedback that it was unclear where unread messages moved to once they were read. We also added color to the date heading bars to make this pane easier to navigate. A third change was to add icons to messages in the browse pane. This helped maintain internal consistency with icons that were displayed in the read pane and increased information scent in the message previews.

Read Pane

Since we removed the create message pane from the home page, we had more space to display the read pane. Based on user suggestions, we separated the message and each reply into separate wells. We also moved the date and time the message was created to the right side to reduce clutter on the left. Another change involved the color scheme. We chose to use blues and greens in the buttons and tags since those are the main colors of our website. Then we used red and orange in the icons to help them stand out.

Create Pane

The main change to the create pane was how it is accessed. Instead of being displayed on the home page, users click the "Create Message" button to open this view. We changed the "note vs. issue" option to radio buttons instead of a single button based on user feedback that the original idea of toggling between note and issue was not intuitive. We also changed the placeholder text for tags to be more clear while indicating how tags are delimited. 
When we realized that the Create Message section in the prototype was a source of usability safety issues and layout issues since it cut off the reading pane, we discussed multiple possible solutions. One was to use a vertical layout instead of a horizontal layout, which would alleviate the crowding of the reading pane. Another was to keep the horizontal layout, but make the Create Message pane be collapsible and then pull up on top of the reading pane, which again would alleviate crowding. However, we felt the best way to address the safety concerns while simplifying the layout was to put the Create Message view into a modal.

Key Features

Title

Prototype

Final Implementation

Comments/Description

Replies

Originally, clicking on reply changed the create message pane into a reply pane that looked similar. This was supposed to be a way to maintain consistency because messages/replies would always be created in the same place on the screen, but the transition from New Message to Reply was not as noticeable to users as we had thought, leading to safety concerns about the visibility of system state. We received feedback in class that in-line replies would help with these concerns. Thus clicking on the reply button creates a new well underneath the existing message and replies with a simplified version of the Create Message form.

Templates

We added more template choices. We also filled out the content that each template choice populates the fields (title, text, tags) with.

Unread Messages

One challenge we faced was how to display unread messages once they had been clicked. Users were confused about where these messages moved to. In the final implementation, there is a different tab for unread messages. When a user clicks and views one of these messages, it becomes grayed out and faded in the unread messages tab to show that it has been read. However, it is still displayed, so that the user is not confused about where it went. Once the user moves back to the "all messages" tab, the recently read messages are removed from the "unread messages" tab. Thus the next time that the user clicks on the "unread messages" tab, they will no longer see the messages they read the previous time.

Searching by Tags

N/A

From user feedback, we realized that our tags looked clickable but did not actually have that functionality. In the final implementation, clicking on a tag allows users to search in the browse pane by that tag.

Implementation

CollabDesk is a web application implemented in HTML, CSS, and Javascript that utilizes both JQuery and Twitter Bootstrap. The backend was built using Parse, which saves and retrieves data asynchronously. All of the icons are from FontAwesome, which provided both a consistent look for all icons with the ability to customize their size and color.

...

Most of these implementation issues in the browse pane were the result of trying to overhaul that pane between GR5 Implementation and user testing, which in retrospect was probably inadvisable given the short time frame. Though we fixed the bugs most of the bugs from GR5, we did not have time to fix all the new bugs that emerged.

Evaluation

Users Tested

We selected our users from three dorms at MIT: Bexley, McCormick, and Burton Conner. All three users were regular desk workers and familiar with the everyday tasks of their job. We feel that these users are representative of our target population because our application is designed to simplify the lives of desk workers at MIT. We did not provide a demo for our users but provided them with the briefing and tasks described below.

Briefing

CollabDesk is an application that simplifies the lives of desk workers at MIT. It is a website where desk workers can efficiently share information with each other by reading and writing messages for all desk workers to see. Our system extracts away from the hassle of paper logbooks and messy e-mails. Each desk worker can log in to CollabDesk with a unique username and password. Once a desk worker is logged in, the desk worker has the ability to read, create, and reply to messages as well as search existing messages.

...

Usability problems found:

...

Image Added

Browse Pane
  1. Number of Unread Messages does not update when reading them from "All Messages" Tab (Visibility)
    1. The number of unread messages (on the top of the "Unread Messages" Tab) does not properly update when reading unread messages are read from the "All Messages" tab, though it does update when read from the "Unread Messages" tab. This is a bug.
    2. Recommended Action: Update the counter every time an unread message is read, regardless of which tab it is read from.
  2. Messages are not displayed in proper order (Consistency)
    1. Messages are supposed to be grouped by dates and sorted with the most recent date first, but some days are out of order. This is a bug.
    2. Recommended Action: Ensure messages are being stored in appropriate order in the back-end and that they are pulled in the same order
  3. No auto-complete for search (Learnability, Efficiency)
    1. There are no recommended search results or way to access what was previously searched
    2. Recommended Action: Implement Auto-Complete, Save previously saved searches and recommend them based on relevance and frequency
  4. Search Bar has no visible shortcut to clear it (Efficiency, Visibility)
    1. Although pressing the "escape" key will clear the search bar and clear the search results, the affordances of this shortcut are lacking
    2. Recommended Action: Have a visible shortcut ("x" button) or add affordance/help for the escape key shortcut (possibly with hover text)
  5. "Unread Messages" Tab lacks visibility
    1. Multiple users did not see the "Unread Messages" Tab, suggesting that the tabbed interface was not visible enough
    2. Recommended Action: Improve visibility of tabs by outlining tabs with more defined lines around it and/or make unread tab open upon log in
Read Pane
  1. Can't add tags to message by replying (functionality)
    1. There is a bug where the tags users create in the reply are not being added to the message where the reply is attached to until refreshed
    2. Recommended Action: Fix bug (the back end is being updated, but it needs to trigger a proper update of the view)
  2. Functionality of Advanced Settings not clear (Help and Documentation)
    1. The purpose of advanced features such as "Alert Desk Captain" and "Notes vs Issue" is not clear and there is no help users can access to figure out its use
    2. Recommended Action: Since all desk workers are trained in the systems used at desk, we intended these features to be taught to them. However, even if this were the case, we could alleviate the problem by adding a help/about section to CollabDesk, or having available help dialog specific to Advanced Settings. 
  3. Reply does not appear right away, there is a delay (Visibility, Feedback)
    1. Read Pane view does not update immediately after adding reply. This happens because it creates and saves a new Reply object before displaying it, which incurs variable delays since it has to access the Parse servers. Sometimes the delay is longer than a few hundred milliseconds, so the user does not see feedback of adding reply immediately and does not know whether it was successful or not.
    2. Recommended Action: Instead of waiting for the object to successfully be saved on Parse's servers before displaying it, we could display it right after it is created (though this assumes that the save will be successful). Another option is to add a spinner where the reply would be shown before it is ready to be displayed, and then replace that with the actual reply when it is ready.
Create Message/Reply
  1. "Create New Message" dialog box does not scale (Put User In Control)
    1. Dialog that pops up to create a new message cannot be scaled, so part of the box may not be visible to users with certain screen sizes
    2. Recommended Action: Shrink default size of "Create New Message" and make it such that the box size is changeable.
  2. No recommendations when creating new tags (Learnability, Efficiency)
    1. There is no efficient way to access a list of relevant previously created tags
    2. Recommended Action: Though templates fill in at least one tag by default, we could suggest additional tags based on what frequently gets added to certain templates, and/or have auto-complete when user types in tag

Reflection

We learned about the iterative, user-centered design process which was a concept foreign to all of us before taking 6.813. It was great to have the opportunity to put the concepts about need finding, prototyping, user testing, etc. into practice through GR1 - GR6. In the early stages of the project we tried hard not to think about or discuss implementation since a user interface is useless if it does not have users who find the interface usable and useful. If we did not learn the concepts of prototyping and user testing then our interface would have lacked several essential features that would make our project undesirable for desk workers to use, such as providing desk workers with customized templates.

...