In a previous post, we described how we tested new navigation patterns for the next iteration of the ECUE Standards using guerilla usability testing methods. This post shares what we learned.
We were primarily looking at how the structure of an application is presented in the UI and how the user navigates through that structure. A well-designed application will be organized around user tasks, so that as a user performs some activity, everything they need for that activity is easily accessible. Each application has a different structure, based on its unique use cases, but the way the user navigates through that structure should be common across similar applications.
About the Test
We tested four different navigation paradigms. At this stage, we were just looking for high-level impressions highlighting pros and cons, to reveal a problem that we’d missed, and to see what users prefer.
In a more formal usability test, the prototype’s structure would be divided into high-level areas like “Operations” or “Storage”, each breaking down into tasks such as “Manage Service Levels” or “LUNs”. In our prototype however, we used a simple animal classification to focus the tester’s attention on the navigation paradigm, not the organization.
A horizontal bar across the top of the application window shows the top-level divisions. On click, a drop-down cascading menu provides further choices, as shown in the following pictures..
This design scored very high on familiarity. This design is used by emc.com and many web sites. It is simple and consistent. Users know what to expect. But there were also comments like “this is the old-timey way”, and “strictly for desktops.” Ideally, we are seeking a navigation paradigm that can be used both in the desktop application and its companion tablet version.
A narrow vertical bar down the left side of the application window shows the top-level divisions. Clicking an icon opens a flyout panel providing further choices.
Many testers liked this version of the navigation prototypes, but almost all commented on the inherent difficulty in interpreting the iconography. We discussed whether to replace the icons with a text label, or to provide both the icon and label, but both of those changes would mean widening the bar and diminish the efficient use of screen real estate. One tester commented that this “is the most touch-friendly design”. After the test was completed, we observed those same test participants looking at the many jewel icons on their mobile phone and having no difficulty distinguishing which app was which. We will need to ask our customers for their opinion on icon recognition.
A vertical bar down the left side of the application window shows the top-level divisions. On click, the accordion panel opens to provide further choices.
This design was acceptable but not widely loved. If an application has only two levels of hierarchy, this paradigm is fine but if you need to nest accordion levels, there are too many clicks. Nevertheless, this paradigm will translate well to a companion mobile or tablet application.
A vertical bar down the left side of the application window displays all nested levels of navigation at once. This is quite similar to the Accordion navigation described above, but with all levels expanded.
This design scored high on “discoverability”. Many users liked having all the functionality exposed and commented “It’s easy to find things. Everything is just one click away.” EMC applications are highly utilitarian. It’s all about the user getting his or her job done. For the most part, EMC applications are open for the duration of the user’s day, providing an ever-present window on their data center. Predictability and efficiency are important; novelty and fashion are not. However, the downside of this design is that it’s not scalable for the complexity of many EMC applications.
The usability test did confirm some of our suspicions:
- Put all navigation in one place (either across the top or on the left; don’t make me look in two places).
- Use the same paradigm to navigate. Don’t have one method for the first two levels and a different method for lower levels.
- Provide search to navigate directly to named objects.
We plan to modify and refine each of these prototypes and do another round of testing. What do you think of these wireframes? Are on the right track? Is there one that you particularly like or don’t like. Please comment and let us know!
And if you want to sign up to participate in future usability sessions, please do so here: https://emcinformation.com/146505/REG/00000000-0000-0000-0000-000000000000.ashx