13

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.

Improve this question
5
  • 17
    It's spelled "dining room", not "dinning" :p
    – Niet the Dark Absol
    Apr 19, 2017 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, 2017 at 14:19
  • 16
    Do you mean 3x2 (or 2x3)? You don't have 9 thumbnails there.
    – Broots Waymb
    Apr 19, 2017 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, 2017 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, 2017 at 18:35

4 Answers 4

Reset to default
24

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.

Improve this answer
3
  • 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, 2017 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, 2017 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, 2017 at 16:50
6

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

Improve this answer
6

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.

Improve this answer
3
  • 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, 2017 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, 2017 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, 2017 at 20:22
2

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;
    }
Improve this answer
2
  • 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, 2017 at 13:45
  • Coding questions belong on stackoverflow.com
    – dalearn
    Apr 19, 2017 at 19:13

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.