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

Improve this question
7
  • 1
    Why do you need two thumbnails? What do they represent? Are they equal in importance?
    – Nicholas Pappas
    Feb 24, 2015 at 19:40
  • Maybe subtly shade each alternate row ?
    – PhillipW
    Feb 24, 2015 at 19:42
  • which icons are you talking about? The ones on the top or the ones on the bottom?
    – Voxwoman
    Feb 24, 2015 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, 2015 at 20:07
  • @Voxwoman The ones on the left, in the list layout. (Clouds, trees, person, etc.)
    – Eric S.
    Feb 24, 2015 at 20:08

2 Answers 2

Reset to default
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

Improve this answer
2
  • 1
    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, 2015 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, 2015 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
Improve this answer
5
  • Thanks for your reply. I'm actually talking about the icons in the list view.
    – Eric S.
    Feb 24, 2015 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.
    – Nicholas Pappas
    Feb 24, 2015 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, 2015 at 20:32
  • I updated my answer after finally understanding what you were asking about :)
    – Voxwoman
    Feb 24, 2015 at 20:37
  • This looks very interesting - I was hoping there was something like this. Ill take a look tonight.
    – Eric S.
    Feb 24, 2015 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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