I'm creating a thumbnail selection menu for VR. They are arranged as 3x2:

enter image description here

How should I organize them when where are less than 6 thumbnails? (e.g. 2 or 5?)

Note: the user can see the previous/next batch of thumbnails by clicking the arrows on each side.

  • 17
    It's spelled "dining room", not "dinning" :p – Niet the Dark Absol Apr 19 '17 at 13:01
  • 6
    can you also have more than 6 thumbnails? if not, why so you say a 3X3 thumbnails arrangement? – Nzall Apr 19 '17 at 14:19
  • 16
    Do you mean 3x2 (or 2x3)? You don't have 9 thumbnails there. – Broots Waymb Apr 19 '17 at 15:43
  • 5
    I think your solution to the grid will be less critical than blurring or overlaying that distracting background! – plainclothes Apr 19 '17 at 16:51
  • 2
    Get rid of the background, blur it or have much less opacity on it, I would blur it if the client wants to keep it. @plainclothes is right. Try persuading the client that people will have a hard time with a background like this if he/she/they insist. – lowtechsun Apr 19 '17 at 18:35
up vote 24 down vote accepted

I would use the following layout:

For uneven amount of pictures (5, for example), I would display like this Odd amount of pictures

For situations when only 4 pictures exist, I would display like this enter image description here

For situations when only 2 pictures exist, I would display like this enter image description here

The reason to choose this layout is based on the fact that the images are centered in relationship with other visual elements like the side arrows and the button you have below the images, so all the content comes from the center point of the grid.

All images would have the same size in terms of columns so there is no misunderstanding by the user to think that if some images are larger than others, they might be important/more relevant.

  • 21
    I'm intrigued: why four in a "T" rather than a rectangle? The key is definitely left-right symmetry, though. A five like a six with one missing is ugly. – nigel222 Apr 19 '17 at 14:09
  • 7
    @nigel222: If items might sometimes be added to the end of a list, having a list change from AB/CD to ABC/DE [moving C from one line to the next] might be more confusing than having ABC/D become ABC/DE [moving D leftward on the same line]. Aesthetically, though, I think that for case of N congruent to 1 mod 3, with N at least 4,, having the last two lines show two pictures each would be cleaner than 3+1. – supercat Apr 19 '17 at 16:03
  • 1
    One thing to consider with varying your grid placement is that the interaction target moves too. It may seem like a small thing, but it can create that tiny disconnect that becomes an irritation over time. – plainclothes Apr 19 '17 at 16:50

Think of them as a bootstrap responsive grid that changed dynamically depending on the amount of the rooms that you might have. For example, in the case that you have only 2 rooms, then the boxes will become bigger and cover a larger place on the screen.

In the case that you have 5 rooms, there are not a lot of things to do. In the image, I use 2 different ways of placing it. The 1st more consistent to your grid and the 2nd more balanced to the screen. You will need to decide consistency vs balance. For the user experience, it won't matter so much because I think that the grid is very clear.

Demonstration

If you want symmetry something like:

2:

[__][__]

3:

[__][__]
  [__]

4:

[__][__]
[__][__]

5:

[__][__][__]
  [__][__]

6:

[__][__][__]
[__][__][__]

Even though we know 3 images fit side by side we want to keep consistency in alignment rules, so there's no surprise for the user.

  • 2
    Just wondering. Why didn't you put the 3 boxes next to eachother? Because doing so would eliminate the asymmetry. – Memet Olsen Apr 20 '17 at 7:28
  • So 2, 3 and 4 have the same number of images in top row instead of 2 3 2 and this also avoids confusion when they see the 5 arrangement. – SparK Apr 20 '17 at 17:15
  • In case the grid was 3x3 then I would arrange 6 like [3,2,1] so 7 could be [3,2,2], 8 [3,3,2] and we can call this the grape arrangement haha – SparK Nov 9 '17 at 20:22

Just create your grid using flexbox, letting the width of the grid child items determine their own widths, and then center the items horizontally.

            <div class="flexbox">
      <div class="flex-child">…</div>
      <div class="flex-child">…</div>
      <div class="flex-child">…</div>
    </div>

    .flexbox {
      display: flex;
      flex: 0 1 auto;
      flex-flow: row wrap;
      justify-content: center;
    }
  • 15
    Correct me if I'm wrong but this isn't a coding question, it's about how one should position the elements from the UX perspective – Memet Olsen Apr 19 '17 at 13:45
  • Coding questions belong on stackoverflow.com – dalearn Apr 19 '17 at 19:13

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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