I noticed that the Messenger app in iOS and Android orders the emoji differently: column-wise vs row-wise, respectively.

I tried searching their guidelines but could not find any reference to the preferred ordering.

Is this something usual ? Should I follow this design in my own app (column-wise on iOS version) ? What factors drive this decision ?

Possibly more opinion-based: what would be some advantages of using one over the other ?

enter image description here


Research on eye-movement on a screen tells us that people scan the screen in a Z-like pattern (top-left->top-right, top-right->to bottom-left and then bottom-left->bottom-right)

This is a rule of thumb when it comes to placing items on the screen. According to that rule, horizontal grouping makes more sense as it follows the user's eye.

Here are some good articles about human eye tracking:

  • Thank you ! I think I've read about the z-like scan pattern, but can't find the research. Do you happen to have a link ? I think this answers the most important part of the question: which one should I use? Sep 4 '17 at 19:07
  • Added reference links Sep 5 '17 at 4:32

I agree with Shreyas' answer: horizontal grouping is more natural in general. It's the way many parts of the world read.

However, the iOS emoji UI likely takes a column approach because it scrolls horizontally. Otherwise, the organization would be completely broken.

enter image description here

  • Thank you ! This is a very good observation that I couldn't figure myself ! It does make sense Sep 4 '17 at 19:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.