In an increasingly mobile-oriented world, it is important to test and validate design decisions and how they affect usage on mobile devices like smartphones. The PatternFly team gathered some user feedback at Red Hat Summit 2017 in Boston, MA to gain some insight into designing for these devices.
The team tested two different designs, and various elements within those designs including:
Using a dataset including US cities within the categories of their respective states (e.g. Detroit contained in the Michigan category), users were asked to locate individual cities, groups of cities, and navigate through the different categories using breadcrumbs.
Option 1, Table View
Option 1, Card View
Option 1, List View
Option 3, Table View
Option 3, Card View
Option 3, List View
*Note that there was an Option 2, but it was not tested
Searching via Filtering
Filtering in this version was difficult for some users. Most users understood the concept of filters and how to apply one, however difficulties were encountered when removing the filters and changing the filters.
Applying both City and State filters simultaneously was common, this resulted in no results being shown. Some users who experienced this error were confused by how to remove filters.
About half of the users searched via filtering, and the others chose to simply scroll through the full list of cities to find and select the target items. It may be inferred that scrolling on mobile devices is a learned behavior that users are comfortable using, as many smartphones and tablets encourage infinite scrolling.
When asked to locate and select all cities in the state of Illinois, most users could complete the task, but some had difficulty applying the filter, and finding how to select all the items.
When asked to locate all the cities beginning with the letter “W”, every user could complete this task, though one had some difficulty with the filters. This user ultimately cleared all filters to start fresh, and completed the task.
Looking at the filtering behavior, we can see that there needs to be some further evaluation of these elements. Clearing filters should be examined in future studies to ensure it is simple to understand. We must pay attention to filter design so that users always understand which are applied.
Option 1, showing an applied filter in Table View
Use of Breadcrumbs
Breadcrumbs were utilized by about half of the users when asked to navigate back to the top level of the interface. Some users simply did not understand how to do this, and could not complete the task. There we no discernible differences between Option 1 and Option 3 regarding Breadcrumb design. Based on this, Breadcrumbs should be investigated further – a more complete test of Breadcrumbs could reveal whether they are appropriate for a mobile design.
Option 1, Breadcrumbs variation, Table View
Option 3, Breadcrumbs variation, Table View
During the searching tasks, user were also asked to use the action buttons (Edit, Remove) after selecting the target items. Most users successfully located and used these action buttons. They seemed to understand these functions well. Some users commented that they would expect in-line actions on each item in the interface, meaning Edit and Remove would be shown as actions on each item, not just at the top in the toolbar. This would be something to investigate further, and you can see in the screenshot below that Table View had a placeholder for such actions.
Option 1, Table View, Action buttons expanded
Overall, there were some issues we discovered when these designs are used on a mobile platform. Things like filtering need some adjustment and further study to determine the best practice for implementation on mobile devices. Applying and clearing filters needs to be simple. Filter status needs to be apparent. Breadcrumbs need to be examined further to determine whether they make sense on a mobile interface. Selecting multiple items is an important feature that needs to be easy to find. Action buttons are important, we should investigate whether in-line actions are preferred over keeping them in the toolbar.
We also observed some interesting behaviors that are specific to mobile devices that should be investigated in future studies:
- On Android, the OS “Back Button” feature was utilized by a couple users to navigate back through the hierarchy instead of breadcrumbs. This was not anticipated, and should be considered for future designs.
- On both iOS and Android, using the touchscreen to zoom in was observed. After zooming in and pressing “Enter” to apply a filter, users expected the screen to zoom back out, but it did not.
Future studies can focus on these elements specifically in the mobile interface. Judging by the small sample we have from this Summit 2017 testing, we can see there are some challenges and different needs when designing for mobile devices.