April 23, 2014

Platform Usability Testing

As you know, we’re in the process of creating new themes that will incorporate Responsive Design, allowing websites on the state platform to render properly on any device, from desktops to mobile phones.

In developing some of the look and feel for the mobile view, we had some decisions to make. For instance:

  • We opted to hide the menu so content would take a front seat in the user experience, instead having it cascade down by clicking an icon.
  • We didn’t have enough room for a full search box, so again, we opted for a search icon.
  • The menu has triangles indicating that submenus are hidden underneath the main menu items.
  • Some tables will not fit horizontally on screen; we hoped users know to use their finger to slide across the page.

Instead of setting these decisions in stone based on our experience, we decided to test these features on actual users. A few weeks ago, we set up a table in the Capitol during the session, equipped with everything from an iPhone to Samsung Galaxy running several different operating systems. We then asked users to perform the above tasks:

  • Find “About Us” under the menu. (Would they know to click the button that says “Menu”?)
  • Search for a term on the website. (Would they know to click on the magnifying glass?)
  • Find a submenu under one of the main menus.
  • Find a piece of data in a table that was hidden off the right-hand part of the screen.

The results were humbling.

Users were successful in finding the menu and search functions, but had no idea to click the triangle to cascade down to a second level. They also didn’t realize that some tables had more data; some clicked on links within the table; others went to search for it in the search box.

That doesn’t mean we failed, though; the input was extremely helpful. We’ve gone back to the drawing board on the last two functional items:

  • We’ve made the triangles look more like buttons, which we hope will encourage people to touch them. We also moved them to the right to make them look less like bullets.
  • For the table, we added a border on the outside; not seeing a border on the right side will give users the impression that something else is over there.

How do we know these modifications will work? We don’t. That’s why we plan to do another round of usability testing to see if users are more successful in navigating the mobile version of the site. That’s the approach: Tweak, test, lather, rinse, repeat.

Putting the user first doesn’t require a lot of extra work, and it may surprise you what you find. But in the end, you get a website that users are comfortable with. And that’s really our goal, isn’t it?

Related to: