...
Users can filter feed items to find what is currently of the most interest to them. Hubbub allows users to filter by service, content text, tags, or existence of hyperlinks. This interface was difficult to design for good learnability. When testing our paper and computer prototypes, the filter interface was the hardest for users to use. In particular, users were unsure how the different criteria composed combined (boolean "and" or "or"?) and some were confused about the function of the service icons or the text box.
The interface for the most part uses mostly standard widgets like checkboxes for external consistency. An alternative approach would be have been to implement it as a drop-down menu. However, but those small menus are susceptible to fat-finger problems, require more clicks, and are typically not used on phones so users are less familiar with them in that a mobile environment.
We made several changes to this the interface to address these problems. First, we updated the icons in the Services section. Previously, we only showed faded icons for each service that became highlighted when selected. Users were unsure whether these icons were clickable, so we added checkboxes next to them (that get checked at the same time the icon is highlighted); users can select a service by fat-fingering tapping on the general area bordering of the icon and checkbox. Unchecked checkboxes are an affordance showing that something is clickable.
Next, we updated the wording of the header informative text in the form. Previously, we had fairly minimalist text that simply named the category, like We originally had a minimal amount of header text that only described the filtering category, such as "Services", "Tags", and "Text". We updated the headers to be more verbose, which made the interface less minimalist but gave users more guidance and helped answer the "and" orvs "or" question.
The paper and computer prototype prototypes had a collapsible region called "More Options", which included the additional filtering options such as filtering by tags and the by "Has a Hyperlink" option and was . These options were hidden by default. The collapsible region used less space, but had flaws. Users users in paper prototype testing had a harder time finding options inside the collapsible region. The region also impaired efficiency by requiring one more click to access the items in there. Finally, one heuristic In addition, one heuristic evaluator reported that it was unclear whether the items inside the region were selected when it was collapsed. For these reasons, we decided to eliminate it and show all sections all the time and remove the collapsible behavior.
Our final change was changes were to the button controls. In our paper and computer prototypes, we envisioned the "Execute", "Save Filter", and "Reset" (renamed "Remove Filter as users thought "Reset" would clear the form, not remove the filter), buttons to be grouped together. Heuristic evaluation pointed out the fat-finger problem; showed that users would click one button while meaning to click another - this version has one button in each corner to avoid that. We also renamed "Remove Filter as users thought "Reset" would clear the form, not remove the filter.
For reference, here's a screenshot of the filter interface from the computer prototype. The new interface updates alignment of form fields to make scanning easier.
...