Testing Your UX Theory Before UX Design

By on 10th June 2016

The UX Theory

Context is important in UX, especially when asking a person to perform an action. However, if you can communicate an idea without context, you’re probably on the right path. We in the UX team at Elastic Grid decided to test this theory when facing one of our user experience challenges.

Having a user base which is spread globally, our application is localized both in terms of translated copy, time zone preferences and the content available to a given user based on their access level and location. Designing an interface that can handle copy formatting changes fluidly on top of the fact that we strive for cross-device responsiveness is no easy feat.

A solution we came up with was to start moving toward icon based calls to action as much as possible. For example, using a cross icon (X) instead of “Delete”. The idea negates having to then deal with translations affecting our UI in scenarios where space is at a premium. You can gain a sense of how difficult it can be to prepare for changes in word length even for a basic example like this:

(X) Remove – English/Default
(X) Cancellare – Italian
(X) Löschen – German
(X) Effacer – French
(X) 删除 – Chinese

So what if we just went with showing (X) and including a hover tool tip on the desktop with translated copy rather than displaying both.

Taking this further and with a mobile-first mindset, why not all actions? The (X) example is quite straightforward, however concepts such as: Register, Unsubscribe, Upload, Send, Continue, etc. might need some validation before making changes to the interface.

The UX Test

This is where the context-less research came in. Thanks to Usability Hub we quickly set up some very basic tests to see how people (from different cultures) would interpret certain icon actions.

Here is a table showing of our intentions for the icon’s use and how most people responded to the question, “What action would you associate with this icon?” (bold text indicates most given response). The answer was free text to avoid any leading.

Icon Testing Results Table

The UX Result

The results show that without any context (for example, someone looking at a list of contacts and seeing an icon of a trash can next to each) we were pretty much on the money in terms of our icon decision making. The worst offender was the sign-up icon, however, it was also the one we decided to test first with some real users (deciding that context would help align users from “edit” to “register” based on the fact they are filling in a registration form).

It passed our user testing “where would you click to complete the form?” and have since made the change on our production form, moving from a text based Call-To-Action “Register” to using an icon button. We haven’t noticed any negative effects to our sign-up process (see crazy egg heat map below) and we will continue a roll out of these icon orientated UI actions throughout our application.

Sign Up Form Crazy Egg Result

I don’t believe we’ve broken new ground here, however we were able to set up a quick testing scenario to validate our choice in icons before even applying it to interface designs and also testing it with various applicable audiences. The funny thing is, now I’m wondering if there would be any confusion to users if we removed the icon labels altogether from form submission actions, say if it was just a green button… but that’s a test for another day.

 

Share on LinkedInTweet about this on TwitterShare on Google+Share on FacebookShare on RedditEmail this to someone

Lead UX designer and Design Team Lead at Elastic Grid, responsible for the user experience of the platform and the products visual brand. Lorenzo has extensive experience designing simple digital solutions for large, complex commercial projects, including e-Commerce, marketing campaigns and content management platforms.

Processing...
Thank you! Your subscription has been confirmed. You'll hear from us soon.
Elastic Grid Newsletter
Keep up with Channel Marketing trends and news about Elastic Grid.
ErrorHere