How intuitive are Twitter’s redesigned icons?
An icon is an important part of user experience — they have a purpose of being there. Sure, icons are there to save space on the screen. But more importantly, they’re there to aid users. When done correctly, icons guide users intuitively through a workflow without relying on too much copy.
A couple of weeks back, Twitter revamped its interface across desktop, iOS, Android, TweetDesk & TwitterLite. The revamp isn’t a radical departure from its prior look-and-feel or user experience but the update involves a series of smaller tweaks to things like typography used, the shape of icons, and more. The primary objective of modifying few icons was to make it more intuitive.
With this usability test, I intend to understand how intuitive these new Twitter icons are.
About Twitter, as a company
Twitter is a platform wherein users share their thoughts, news, information and jokes in 140 characters of text or less. Twitter makes global communication cheap and measurable. When you need to know what’s going on — in your town or across the globe — get the best of what’s happening now on Twitter.
Objective of the test
Identify the pain points in the redesigned icon of Twitter especially the reply icon (the most noticeable icon change) . Understanding how usable the icon is.
How crucial is icons for UX?
@BruceTognazzini once said, “a word is worth a thousand pictures.”
Icons play a vital role in web and mobile design. Even though they are quite small and might seem redundant, they play many different roles. Icons can be a great way to bring essential content to the point. They are a great attention grabber and they help your website visitors to find and scan content.
- Icons can put content in a nutshell
- Icons can draw attention
- Icons can increase readability
User Research
User persona
Prior to conducting usability tests, I developed a user persona to better understand the target users of Twitter’s mobile app. This process helped me get into the mindset of the users, thinking in terms of their contexts, needs, and goals
So meet John!
Tools used
- I used Sketch app for minor editing in the screenshots and for the images.
- CanvasFlip for creating the prototype and setting up the task based usability testing.
- Typeform for the survey.
Task Scenario
Scenario : Your friend tweeted about a live concert she went to. You loved it and you’re quite excited to find out more about it. So you want to reply to the same tweet and start a conversation. What would you do now?
Task : Interact with interface and reply to a tweet sent out by your friend.
Usability Analysis
Prototype
Before getting started with the analysis, you might want to try out the prototypes I tested on.
Try out the prototype HERE.
While testing how comfortable and usable icons are, there are 4 quality criteria to be tested -
- Findability
- Recognition
- Information scent
- Attractiveness
Here’s how I evaluated each of these criteria.
1. Findability :
Can people find the icon on the page?
To gauge findability, icons must be shown in their native habitat — in the context of the full interface. Here’s how I evaluated the findability of icons on the Twitter app -
- Time to locate the reply icon
A total of 18 users used the new Twitter prototype. By watching the user video of each one of them I estimated the average time users are taking to locate the reply icon.
On an average, users took 5.7 secs to find the reply icon on the new Twitter design. Which is fairly good.
2. How often is the first click on the right icon (reply).
Out of 18 users, 9 users clicked on the reply icon instantly, in the first go. This is 50% of the users, and not a very impressive number.
I used CanvasFlip to evaluate both of these quantitative data.
2. Recognition :
Do people understand what the icon represents?
Testing for recognition is not easy with quantitative data, therefore I opted for a survey.
I showed the icon in the absence of text labels and asked my users what they understood from the icon. I performed this test with different set of users in the same segment, else the quantitative test would be influenced by this survey or vice versa.
Here’s what users understood from the reply icon on Twitter —
On the Typeform survey, users had to type in what they understand from the icon. Most users thought it is “Comment” and second highest being “Reply”. Well, to be honest, even if users interpret it as comment, the purpose is solved.
3. Information scent :
Can users correctly guess what will happen once they interact with the icon?
What matters in the end is not only whether users can recognise what real object the icon resembles, but also if they can infer what functionality that icon may stand for. In fact, as long as people understand what function a symbol represents, it doesn’t matter if they don’t know what the object is — we needn’t worry about finding an old floppy disc to present to youths as long as they continue to understand that the strange square symbol means Save.
To gauge this I conducted an A/B test with 2 versions of the icons — New Twitter vs the old twitter icon. I measured the probing behaviour of users. (Probing behaviour — users click on the icon and go back to the original page very quickly.)
I evaluated the probing behaviour of users by the user flows. Any user who returns back to the original screen (Home feed) in less than 5 secs is counted as a negative.
In this way, there were 5 out of 18 users who clicked on some other icon and returned back to the home feed page in less than 5 secs.
4. Attractiveness
Is the icon aesthetically pleasing?
Not just for the reply icon, but Twitter has gone softer and rounder with the entire icon set. I believe the icons are modern and simplistic in look but it’s important to understand what other users feel about it.
To evaluate this, I had a second question in the survey —” Score the icon set on a scale of 1–5 based on its attractiveness”. Here’s how most users rated the icons —
As expected majority of the users have an average rating towards the new set of icons on Twitter.
Conclusion of the usability test —
We do have a mixed bag of opinion on the new set of icons on Twitter and all over the internet. But a combined study of quantitative and qualitative data on the prototype proves that the fresh set of icons are more usable and appealing to the users.
Over to you,
What do you think about the fresh icons and typography of Twitter? We’d love to know your thoughts. Use the comments section below.
P.S. — If you liked the user experience data used in this experiment, give CanvasFlip a shot and try the same on your app!
