3

I'm using a list to display information. Each row needs to display two thumbnails, and a string.

I noticed with this implementation that the layout of icons seems to resemble two columns. which may be in conflict with the list organization. I am not a designer by training, but I suspect I could design this better so that the user doesn't get drawn to the vertical arrangement of icons, but instead correctly sees the information arranged in rows.

Is this a legitimate concern? What can I do to de-emphasize the columnar look of the icons? (Maybe changing the text, etc.?)

My design

  • 1
    Why do you need two thumbnails? What do they represent? Are they equal in importance? – Evil Closet Monkey Feb 24 '15 at 19:40
  • Maybe subtly shade each alternate row ? – PhillipW Feb 24 '15 at 19:42
  • which icons are you talking about? The ones on the top or the ones on the bottom? – Voxwoman Feb 24 '15 at 20:03
  • @EvilClosetMonkey Each item in this list has two images that are equally important. The purpose of the list is to navigate to information on these two icons. (The images here are just placeholders, but in practice all the images will be different) – Eric S. Feb 24 '15 at 20:07
  • @Voxwoman The ones on the left, in the list layout. (Clouds, trees, person, etc.) – Eric S. Feb 24 '15 at 20:08
5

Add text for clarity and images for quick recognition

UX is more about solving problems and making things easier for people and not about pretty icons. Images should enhance an already functional UI.

Although this may be way off base from what your application is trying to do this would be more intuitive to first time users...

enter image description here

  • I think that looks really good. I didn't think of splitting the images into one circle, and I like the slash separation. This solves the problem of the icons forming a grid. Thanks for your reply and the mockup. – Eric S. Feb 24 '15 at 21:07
  • This looks really good. But you messed up the FAB from original image. To me, it was according to material design guidelines and was more suitable. – VipulKumar Mar 19 '15 at 11:46
1

If you're talking about the hamburger icon and the "me", the way to break the table appearance of your screen is to swap everything around: Put the magenta camera icon on the left and the "Me" to the left of the hamburger (menu) icon which would be on the far right.

Edit after feedback about my misunderstanding of the question

You are asking what will make the horizontal rows stand out better visually than it is now.

If you have time, take a quick read about the Gestalt theory of perception. What you have going on now is that the similarity of the icons is overpowering everything else.

To overcome this, you could do one or more of the following:

  • make the icons more dissimilar (different shapes, fills, etc).
  • Move the icons closer to the information on the right side (the text and arrow) (the Gestalt theory of proximity)
  • Make the boundary lines for the rows more distinct (darker, thicker)
  • Fill alternate rows with a distinctive background
  • Thanks for your reply. I'm actually talking about the icons in the list view. – Eric S. Feb 24 '15 at 20:09
  • 1
    You might want to read about Google's Material Design, which is in use here. There are multiple standards and patterns that guide where things go, both for usability and consistency. Moving items around as suggested would violate both. – Evil Closet Monkey Feb 24 '15 at 20:10
  • You are correct Evil Closet Monkey. There are some aspects of this design that are specific to mobile apps. I think whoever made the placement of the button (it wasn't me), optimized it for a right handed user. – Eric S. Feb 24 '15 at 20:32
  • I updated my answer after finally understanding what you were asking about :) – Voxwoman Feb 24 '15 at 20:37
  • This looks very interesting - I was hoping there was something like this. Ill take a look tonight. – Eric S. Feb 24 '15 at 21:09

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.