Page History

Bob would read through his news items by scrolling up and down. The first few lines of each item are visible.

The political article would be long enough to be cut off, but he could read all of it inline by expanding the article with the disclosure triangle.

Since articles are automatically marked as read as he scrolls through them, When Bob is interrupted, he would hit the 'later' to indicate that the item should show up again the next time.

Bob would begin filtering by pressing a filter button at the bottom of the screen (not pictured).

This interface is very similar to the interfaces for reading Twitter updates and Facebook's stream. The list format (common on phones) affords scrolling through the items, and the buttons use text to be fairly self-describing. Bob should have little difficulty figuring this UI out.

It is very efficient for reading items. Bob can quickly scroll through and skim the first line of each entry as he looks for things to read. However, If he wants to mark multiple items at once (such as read or read later), it will not be easy or quick to do here because he has to do them all individually. Having the buttons always visible may mean more scrolling is necessary, which could slow Bob down.

Bob can easily expand/shrink entries. With this interface, items are currently not deletable, which avoids Bob accidentally removing something he wants to keep. If Bob doesn't like a tag he put on an entry, he can edit or remove it using the "tag" button again.

with tag list open:

This interface displays a single item at a time, filling the screen. Bob is brought immediately to the first item in his feed. He goes from one item to another using the next and previous buttons.

He saves and shares items using the "save" and "share" buttons. He can mark things using the "tag" button, which would open a new (maybe popup) menu. An example of the tag menu is given in a second drawing. We would either add a separate button for read later items, or add "read later" a tag in the tag menu, or add "read later" a tag in the tag menu. In the case of our scenario, suppose Bob hits a "later" button to have his political article show up later.

Bob may confuse the intent of the read later tag with other tags if we include it in the tag menu. Thus we will probably have to add another button. The issue with this is that there are already 8 buttons at the bottom of the screen. This may make learning how to use the interface more difficult for new users, even if the buttons seem straight-forward in use. Next and Previous are familiar affordances from websites that Bob can use to learn how to navigate through his items.

But here it is much harder to see the full effects filtering will have on the entries to read, since we only look at entries one at a time. This will hinder Bob's ability to learn how filtering works (even though this is the reading interface!)

When 
going through each item one at a time will be very slow for Bob. If he is uninterested in the first 10 items, he will have to click the "Next" button 10 times before he sees something interesting, which is very inefficient. We will want to add a birds-eye view interface so Bob can quickly go through items as well.

If Bob realizes he accidentally skipped an entry he was looking for, he will have to hit the "Prev" several times to get back to the correct entry. However updating tags will be easy. There is no "undo" button for any of the interfaces.

After hitting the filter button from the reading menu, Bob comes to this interface. To filter out his Google+ updates, he simply adds a "not on: Google+" to filter them out. Similar to searching in the  Finder application on a Mac, Bob can build a filter by creating "key-value" pairs for various attributes of the content (keyword, source, date, etc.). To add a pair, Bob hits the "Add Filter" button, with creates a list of attributes Bob can specify. In the sketch, the first item in the list asks what source the content came from, the second when it was posted. To remove pairs, Bob can hit the "minus" button next to the appropriate pair.

To execute the filter, Bob hits the "search" button. The results appear in the reading interface so Bob can see the results.

This filtering option is fairly complex. If Bob is unfamiliar with say Google Advanced Search options or Finder's search options, Bob will be very lost using this interface. However, if he is familiar with them, those affordances will make searching in Hubbub straightforward for Bob. The initial text however does give some indication of what kind of information Bob should input. For example, "on:service" shows Bob that he should input an information source. Putting in an actual source like Twitter would make this clearer for Bob.

Bob could repeatedly use the filter to see what happens when he provides different kinds of input, but this will take a long time.

This interface does not provide options to save filters, remember the last set of filter options, or update the filter. Thus Bob will have to input the parameters for his filters from scratch every time. This is tedious and aside from specifying maybe only 1-3 of the options, Bob may avoid using this interface entirely and filter manually instead.

We may want to add buttons for Bob to specify filters when convenient, such as making the time we receive an entry or the source of the entry buttons. Thus Bob can filter quickly on common filters, and save the complicated interface for more in-depth filtering.

Bob can easily remove a specific pair by using the "minus" button of that pair. However, if Bob simply wants to update the pair, he will have to remove the pair entirely and read it. And as described in efficiency, if Bob messes up his search, he will have to do it all over again from scratch with this interface.

To save an entry (in this case the programming article), Bob has to navigate to that entry and hit the "save" button. A (maybe popup) menu appears with checkboxes specifying what save tags to use on the entry. Bob finalizes by hitting the "ok" button at the bottom of the menu.

Because this isn't traditional save, the word save may confuse Bob. We are using tags to specify an entry is "saved", but we don't move it to a separate location like a folder.

However, we observed through our interviews from GR1 that it won't matter to most users whether their content is physically moved to a folder or just specified through a tag. The save tags are specified and filtered the same way as other tags in Hubbub, which may be a good and bad thing. On one hand, Bob doesn't have to learn drastically different steps to save or tag an entry. However, Bob's mental model may group save tags and regular tags together as being the same thing (where they are not, because entries marked with save tags will not be deleted unless explicitly deleted by Bob. This is generally how save mechanisms behave for other applications as well).

Because the interface is very simple, Bob will be able to save individual entries very quickly. Specifying new save tags will also be fast. After hitting the "new tag" button, a new check box and text box will appear where the "new tag" button was. Bob will simply just describe the name of the tag in the text box and tap the check box next to it (or something similar to this).

However, this interface only supports saving for one entry at a time, which may slow Bob down if he knows he wants to save several things within the same time period. We will have to see if this tasks becomes necessary to our user population.

Ideally if Bob saves an item, Hubbub will remember this and turn the "save" button into an "update/unsave" button so Bob can remove the save tag or change/add save tags. The menu would be the same, but unchecking boxes would unsave the entry. The issue with this is it is unclear what should happen if Bob is initially trying to save but doesn't check one of the boxes. What if he inputs text for a new tag but doesn't check the correct box? There is potential here for Bob to produce input Hubbub would handle in a non-intuitive way. We will have to choose whether to err on the side of save or not save, and default to particular tags accordingly.