Replacing an Icon
Recording all the thought process involved.
For the past few days I was working on redesigning an android app. The Project is still in closed beta stage, so I can’t reveal more information about it. Recently I joined the team, and my first job was to improve the current app design and redesign every screen. In this post I am going to explain all the thought process involved in redesigning a particular screen. Enjoy Reading.
That particular screen was so simple. There is a listview, each list item has a Title, sub text and an Icon. Each list item represents a content, say a news agency, which can be followed/un-followed by clicking that icon. The current layout then was looking like this.
When I first looked at this screen I was feeling something is not right. I am not talking about visual design, but the UX behind it. When there is a mistake in portraying an icon, it becomes nightmare for users. (Sorry Apple fan boys..:-D) So I wanted to make sure there is no problem here.
So what is the problem here?
Each icon in the the list item has two purposes here.
- To display the follow/un-follow status of corresponding list item.
- Providing an affordance, to change the status. ie., you can toggle between follow or unfollow by tapping the icon.
What I thought was that these particular icons will take more cognitive load to understand status of each icon. At worst case scenario, they can even cause confusion here. How?
A green check icon represents that the particular list item is not followed. That item can be followed by tapping icon. So Green icon means negative status. And red cross icon represents the positive status. Thats my worry.
Is that really a problem? or I just made that up?
As mentioned earlier, the app is currently in a closed beta. But above mentioned issue has never came up in alpha stage or in the beta stage. and our testers too were not complaining. That does not mean that I am entirely wrong. (or may be I was wrong). So I started looking for answers. And at last I found my answer in youtube.
This snippet of screenshot was taken while a video was playing.
This snippet of screenshot was taken while a video was in paused state.
The pause and play icons performs similar to the icons used in our app. They display a status (Pause/Play). And they too afford an action (Toggle between Pause/Play). Just similar to icons in our app.
Note that, icons display what action can be performed — Pause icon is displayed when video is playing and provides click-to-pause affordance.
This was similar to our case. Green check icon provides click-to-follow affordance. Red cross icon provides click-to-unfollow affordance. Now we know why all the users, developers, product-owners were not confused.
But I know why I was confused with our app. It was the context. Yes, CONTEXT.
A Similar Case
If you are a smartphone user and a gamer you might have come across the game Clash of Clans.
You can see a big guy sleeping in that screenshot. He is called as Barbarian King aka BK. Now there are four options for that BK which is displayed at bottom (Info, Boost, Sleep, Upgrade). We will be concentrating on the third button “Sleep”. The BK can perform two modes — Sleep and Guard.
When I click on “Sleep” button what I expect is to let the BK sleep. But he starts to guard the territory. When I click on “Guard” button BK starts to sleep. Ridiculous right? The interaction is just way too wrong.
What is the problem here? Context. Yes, I already know that BK is guarding the territory so I don’t need the button to tell me the status. Instead it should say what action can it afford.
Though it confuses me every time still I am addicted to this game.:-D
So What was the problem in our app?
As I said earlier context was the problem. In video players, we don’t need an icon to know whether the video is playing or not. But in our app without that particular icon we can not identify whether that particulr list item is followed or not. So icon has to be clear in displayng the status of that corresponding list item. Also it should act as “signifier” and tell the user that there is an action it can afford.
The current icon choices by our developers does the latter. They show the actions they can afford. But they can not clearly display the status of the list item. It will take much cognitive load.
Still I got a question left. Why the developers and our focused user groups were not confused by this icons in this screen. I got an answer for that too. The mentioned screen will be displayed during the registration process. And after that user can access this screen via settings. At registration, all the list items will have the same status. So it was not confusing.
Yes, in all previous focused user group meetings users accessed that particular page only during the registration process. So they were not confused.
But I am sure that when the user visits the same page again via settings they will think quite a bit. I don’t have any data to prove it. Also still have not conducted any usability testing (Waiting for rest of the redesigning to be completed). But I believe that it was the right decision to replace those icons with better ones.
What is the solution?
So we decided to replace icons. What can best suit our requirements? The result was too simple. The action of the icon is to toggle between followed and unfollowed status. So we used controls similar to check boxes and easily toggle the state.
I have added mock-up which represents our current design. Now be a judge and tell me, which screen nails it? Which screen has the icons which is clear in both status and its affordance? Look at each screen individually.
If you are a designer or a developer just remember to take every little detail int account. Every aspect into consideration to provide the better user experience. Because,
Also as a final note, you can follow me on twitter here.
Strictly App Promotion
I have recently published this android app in playstore. It is targeting the Cricket sports fans by providing the live scores, schedules and updates about cricket matches. You can give a try here, CricNights — Android app