...
(Some names blacked out for privacy)
This interface facilitates The goal of this interface is to facilitate the reading and managing of feed items. We picked a vertical feed format over one item per page or horizontal swiping for external consistency with other news feeds. We also chose this format because it allows users to skim many items quickly. Items are automatically marked read as the user scrolls down the feed page. The user can save items for later reading by hitting the item's save button. Hubbub pulls live data from four sources: Gmail, Twitter, Facebook, and Imgur.
This design remained relatively constant through prototyping, with two exceptions: removing the "Share" button, and color-coding services. The paper and computer prototypes included a "Share" button which would have shared the item in question on its social media website on each item for sharing on their respective social media websites (e.g. retweeting for Twitter items). When we implemented the computer prototype, we realized that controls were taking up too much space was at a premium (a constraint that was not immediately obvious when paper prototyping). Feedback to the computer prototype indicated that controls were taking up too much space relative to the actual information that users wanted to read. Also, the meaning of "Share" was ambiguous - what would it do for Gmail and Imgur? Soon the page. Also, the behavior of "Share" was ambiguous to users. Therefore, we removed it from this the final version of Hubbub. In addition, the paper prototype was colorless, and we originally planned for the interface to be mostly grayscale (except for the heading) for simplicity. When working on the computer prototypeHowever, we decided to use color to make it easier to tell the interfaces apart (noting that . Due to screen size, the labels of the computer prototype became relatively smaller than the text versus the paper prototype layout because of screen size, and thus needed more additional contrast). We selected colors to try to stay chose colors that were externally consistent with the information sources; e.g. Twitter is . For example, Twitter items are color-coded light blue, and Gmail is brick red, and Facebook is dark blueitems are red. In the computer prototype, we made Imgur yellow, but on closer inspection of their design and feedback in heuristic evaluation, we realized green was more externally consistent and used that instead.
Tagging/Saving
The goal of this essential task is for to give users to be able to read items later. To do this, they signal that the item should be kept a way to manage their items through categorization and saving. Users save items for later reading by hitting the save button, and optionally tag the item so it's items to make them easier to search for.
Hubbub provided provides an interface that allows for users to pick select tags from a list, and also create new tags to add to the list. Tags are persisted in the backend back-end using a database. One original idea we considered was We considered an alternative approach that involved dragging tags directly onto items in the feed items, but we realized that this approach did not meet our screen space constraints implied that tags would have to be on a separate page. We used checkboxes to allow aggregation; users can efficiently . Tags are selected via checkboxes so users can apply multiple tags to the same item at once.
We made one change from the paper prototype to the computer prototype - adding When implementing the computer prototype, we decided to add a wide rectangular area (with a gray background) around each checkbox, and registering register clicks inside the area as checking the box. This combats combatted the "fat-finger" problem, which was not obvious when during our paper prototyping but appeared when testing the computer prototype.user testing.
Between the computer prototype and the final version, we moved the button used to cancel tagging. In the paper and computer prototypes, we had a "Cancel" button at the bottom, next to the "OK" button. We decided to move it to the top and rename it to "Back" for two reasons: first, having two buttons next to each other was harmful for safety - users would fat-finger may accidentally click one button when they meant to click the other; and second, the filter interface had click the other; and second, we wanted the tagging interface to remain consistent with the rest of the application. The filter interface also has a "Back" button at the top-left corner serving a similar purpose, and updating the tag interface improved internal consistency.
In GR4, the "Save" button was a no-op, and items never disappeared. We had to provide a mechanism to phase out old items once live data became available, to avoid swamping our users with a massive feed. After feedback in the TA meeting, we updated 's functionality was not implemented. When we switched to providing live data in the feed, we needed a way to prevent old items from diluting the content on the feed page. After getting feedback from Sacha, we updated functionality of the "Save" button to complement the tagging interface, by keeping around items to read later. Together, they keep items in the feed so the user could read them later. Saving and tagging together comprise one of our essential tasks and provide better usability than the prototypes' version.
Filtering
(Text has been shrunk so the image is not too tall)
...