Scenario
Chapter 1: Reading
Bob is a software engineer working at a well-established software company. His social network includes his friends from college, family and co-workers. He is really into the "latest and greatest" technology products, and has been reading everything on the web about the upcoming iPad release. He currently has an iphone, which he uses primarily when he's not at work or front of his home computer. He uses Google+ to stay in touch with friends and co-workers, and Facebook to stay in touch with his family and extended social network. He checks his email in Gmail at least once every couple of hours. He surfs Reddit, imgur and hackernews on his down-time at work. In addition, he's been following political news feeds to keep himself updated on the 2012 US presidential election. Currently he's at home, and he wants to check up on a bit of news and relax after a hard day's debugging. He's decided to give this new application Hubbub a try. He's just finished setting up Gmail, Facebook, Google+, hackernews, reddit, NYTimes and imgur in Hubbub. Now, he wants to start reading his news:
- Bob skims items in the list Hubbub provides, reading items that sound interesting to him
- He finds a long political article that might be good, but is too lazy to read it now and marks it as an item he wants to read later
- He finds a hilarious meme-related picture on imgur, and shares it on Facebook and marks it with a new "cool" category
Chapter 2: Filtering
While reading the items on his feed, Bob is bothered by a problem that has been annoying him for a while now. Now that he has started using Hubbub, he thinks he can fix it.
Bob really enjoys programming, and one of his hobbies is to work on side projects which he uploads to the Web using sites like Google Code and Github. He shares this interest with many of his colleagues. A common action among this group is to post your latest project on Google+ for comments and shares, and Bob keeps up with these postings so his friends will spread the word about his projects in return. Unfortunately, some of the people in this group also post content that Bob is not interested in. For instance, his coworker Bill also uses his Google+ account to publish a stream-of-consciousness narrative of the misadventures he has with his 3-month-old child (Bob is currently happily single). Even worse, these posts are +1'ed en masse by other parents, bringing them up higher in the Google+ news feed than the posts about Bill's side projects. Telling Google+ to show less of Bill isn't a good solution because it also suppresses the side project posts. Bob uses Hubbub's filtering feature on his colleagues to prioritize posts about side projects over those about less essential life details. He does this through the following steps:
- Notes a pattern in the posts that need to be filtered (here, the projects posts have links to websites, while the life details posts don't. Also, they usually mention Google Code or Github)
- Inputs the filter into the system, and Hubbub immediately applies it to the listed items so Bob can preview the results.
- Realizing that "contains a link", while better than no filter, still lets some noninteresting posts through, Bob updates the filter to allow only posts linking to the source code hosting websites that his friends use.
- Reads the newly filtered content, and concludes that it is a valid filter that expresses what he wants.
- Saves the filter.
- In the future, Bob applies the filter whenever he wants to look through the latest side projects that his friends have made.
Chapter 3: Saving Information
The next day at work, Bob browses through his information feeds through Hubbub while his code is compiling, trying to kill time while not looking for anything in particular. Then, he finds an article describing a new, shiny library to solve a problem in his favorite programming language. Bob has been using this programming language for one of his side projects, and this library might come in handy!He's at work, maintaining a codebase in his least favorite programming language which has just produced two screens-full of compiler errors, so he wants to archive it and refer to it later when he goes home and works on his side project. Bob takes the following actions:
- Saves the awesome library item in the feed.
- Categorizes the article with other materials relevant to side projects
- Later, when at home, views his "read later" items and retrieves the saved article.
Designs
Design # 1
Read Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
Bob would read through his news items using this interface. He would use 2 fingers to scroll up/down looking at the news items. He could tap on the "tag it" button to mark items with predefined or Bob-defined tags. He would use the "share it" button to share the items in the feeds he made available in Hubbub (like Facebook or Google+). The entries are "cut off" if they are too long, so Bob would have to tap them to expand or shrink them accordingly for reading. If he wants to defer reading certain items, he can use the "later" button. |
This interface is very similar to ones people already use to view information (Twitter, Facebook, reddit, etc.). In addition, this format is very common for phones, so Bob will have little trouble learning how to go through his news items. However, with this interface there is no way to remove or "hide" items from his feed (a feature found in many applications). |
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. Also, it is not clear if Bob has to click on entries to change focus between entries (will every button on the screen be accessible through one tap on the phone? Or will Bob have to tap on an entry first before he can use the buttons?). |
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 (though this is not clear in the drawing). |
Filter Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
To use this filtering interface for our above scenario, Bob would have to mark all of the programming-related posts from Google+ manually and in advance with a tag (like "cool code" or something). If Hubbub could infer this pattern, the design would match our scenario. |
This interface is very easy to use. There are only items and check boxes, so Bob can easily try out some of them to see what they do if he's not sure. |
This is extremely inefficient, because it only filters on things you've already tagged, aside from what sources to include. Thus Bob has to tag everything he wants to see before he can properly filter for them. |
If Bob accidentally filters on the wrong thing, he will have to start this process all over again. |
Save Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
This is an example of a menu that would appear after hitting a save button on the page. Here, Bob's previously created/used "save" tags are listed in the first drop-down menu. Since bob has categorized code-related items before, he will already have a "code-related" tag of some kind in the list. This would just be a special tag that makes sure items don't get deleted. For example, if we add options for the user to delete items that have been around for a long time (month or something), items with the save tags would be ignored. |
It's pretty clear what is being saved. But Bob may not realize how to create a new save tag with this design. He would have to explore the drop-down menus to see what they do. |
This is pretty efficient for saving a single item. Bob could save an item in 1 tap on his phone using the default menu values. As the list of save tags grows, we can allow scrolling/arranging options for the save tags to speed up the search for the correct tag. |
The item Bob is trying to save is displayed to make sure he's saving the right thing. |
Design # 2
Read Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
With this interface, 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. |
|
|
|
Filter Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
|
|
|
|
Save Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
|
|
|
|
Design # 3
Read Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
|
|
|
|
Filter Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
|
|
|
|
Save Items
Sketch |
Storyboard |
Learnability |
Efficiency |
Safety |
---|---|---|---|---|
|
|
|
|
|