UX & UI lessons

Rather than explaining the difference between UX and UI (like this article), I thought I would give a couple real-life examples of some UX and UI changes that we made to Bootmark based on user feedback.

Example 1 : Newsfeed Filter UX

 

 
 
 

 

 

The image on the left comes from wayyyyy back...it is part of the first batch of basic wireframes that I did for the app. Notice the 4 icons at the top of the screen: a camera, some intersecting circles, music notes and a comment bubble. Our idea was to allow users to decide which types of content were shown on their newsfeed. So, if you only wanted article links to show you could tap the intersecting circles icon and voila! the other types of content (photos, videos, text posts) would be hidden from your newsfeed.

Swing and a Miss

Pretty cool right? Nope. As our beta testers used the app they consistently commented on the confusion caused by these filter icons. What had been so clear in our minds was a UX nightmare for our testers. Not only that, but almost all our testers said that they did not find the filters to be a useful feature.

Good UI Does Not Fix Bad UX

Initially I refused to accept the feedback from our testers. I thought that with some more clear iconography and use of colour that I could redeem this feature into something usable. We tested the icons above on the right and received the same results...people simply did not find the feature to be helpful or necessary. I learned a very important lesson : things can look great and have proper visual hierarchy while still being useless and confusing. I also learned that no matter how great I think a feature may be the product is not for ME. It is for everyone else who uses the app, and their opinions are the ones that matter. 

Example 2 : Voting Icons

 

 
 
 
 

 

 

It seems like everyone uses arrows for up-vote / down-vote icons. We wanted to try something different, so we went with the the circular icons that you see on the left above. The semicircle denotes which way you are voting, ie. in the example above the post has been up-voted.

We were quite happy with ourselves, having substantially altered the look of the traditional vote icon. However, after user testing we quickly realized that there was a reason why most vote icons are the same: they are clear and easy to understand. Our users had difficulty determining which icon did what...they thought that the down-vote icon (to the right of the vote count) looked like a smiley face, meaning that it was a positive thing. Conversely, they questioned if the up-vote icon was a frown and therefore a negative thing.

Try, Try, Again

We ended up changing the icons to something more familiar (seen above on the right). This time I didn't fight it; the users had spoken and changes needed to be made immediately. In this case the UX was clear...everyone knew that these buttons were for up-voting and down-voting posts...but the UI was unclear. One small icon change made all the difference.

In Conclusion

Remember kids: 
1) Good UI does not fix bad UX
2) Good UX can be ruined by bad UI
3) You are designing for your users, NOT for you

Stay safe and have fun!

-Mike

 

Mike Buss