37

If you ever booked event / cinema tickets online, then you have probably struggled to select the seats. The larger the auditorium, the smaller the seats.

I am creating a cinema ticket booking website. The seat selection on mobile devices is causing a big UX problem. To illustrate the problem, I have attached screenshots of a medium sized auditorium (auditorium can be 2x or even 3x larger). The larger the auditorium, the smaller the seats become.

I am looking for a potential solution to make the seat selection simpler.

Things I have considered:

  1. Add a message that recommends to tilt the device into landscape (second screenshot). This does not solve the problem, but it adds a lot more space that can be used to size-up the seats.
  2. Dividing the auditorium into multiple areas that user can tap-to zoom in and zoom out.

The problem with the #2 solution is that such division would complicate selection of seats that span across multiple divisions/ division boundaries.

vertical

horizontal

Improve this question
10
  • 12
    This is totally irrelevant to the question, but the phrase "either of the available seats" is only to be used when there are exactly two available seats. In general I'd advise you to replace "either" with "any". (This could kind of be a UX concern because a person looking at the map you've shown might assume that they don't understand how to read the map.)
    – David Z
    Commented Oct 30, 2017 at 17:49
  • The AMC theaters app handles this pretty well IMO, so you might check that out. They use a version of your #2.
    – JPhi1618
    Commented Oct 30, 2017 at 19:40
  • Don't have access to the AMC theatres (UK based). If you have an app, please contribute a screenshot.
    – Gajus
    Commented Oct 30, 2017 at 19:41
  • "This is totally irrelevant to the question" Thank you for reporting. Patched and scheduled for the next release.
    – Gajus
    Commented Oct 30, 2017 at 23:47
  • I have used implementations of some of the answers listed below and tbh none of them were particularly comfortable. What I would like as a user is screen that I can swipe sort of a page right and left and which shows predefined range of seats that fits my screen with large enough individual seat to touch. It might get less comfortable with larger number of rows though, so the question is can you fit all your rows on 1 screen while maintaining such pages.
    – Gnudiff
    Commented Oct 31, 2017 at 15:55

7 Answers 7

Reset to default
55

Do what the Android browser does when you are trying to touch things too small to reliably resolve to a single location - zoom to confirm. On the first touch, zoom the area around the touch so that the individual seats are clearly separable, on the second touch select the seat you want within the zoomed area.

Because this is part of the normal browsing experience it should be familiar to the user and is, in any case, easily understandable.

Note: this is different from your suggestion 2 because the region zoomed is strictly responsive to the user's touch rather than being divided into pre-defined regions.

Improve this answer
12
  • 1
    This is the best option imho. Default behavior that people are used to is the way to go.
    – John Hamilton
    Commented Oct 30, 2017 at 13:37
  • 6
    This is what I ended up with imgur.com/a/DRNoh. A draggable pointer. The main problem is selecting a specific seat(s). This solves that problem.
    – Gajus
    Commented Oct 30, 2017 at 14:15
  • 1
    Tap and drag. The size of the pointer does not increase with the number of seats in the auditorium. Therefore, selecting seats will always be a single fluid motion – tap and drag (pan).
    – Gajus
    Commented Oct 30, 2017 at 14:37
  • 8
    But when you're on a site with small text, there's context to make sure, as the user, you're clicking on what you meant to click on. With the seat map, all seats look the same, and when you're zoomed in it's hard to confirm that you're actually tapping the seat you want, even if it's not difficult to physically select a seat. So I'm not sure this is the best solution.
    – spacetyper
    Commented Oct 30, 2017 at 15:38
  • 6
    @Gajus I like your solution. You should really write it as an answer.
    – spacetyper
    Commented Oct 30, 2017 at 15:40
27

You can check book my show app they give the small window to show the overall seating and then the maximised view on the main screen which you can zoom in zoom out and select multiple seats by just one click.

enter image description here

Improve this answer
5
  • 2
    I don't particularly like the aesthetics of this option. Having a map to interact with the content sounds more of a workaround than solving the problem. In the particular screenshot you have shared, the map would overlay the top-left seats. Assuming there is a way to move the map itself and select those seats, I am wondering if this would result in reduced purchases of these seats. On the other hand, moving map above the seating plan would be a massive waste of horizontal space.
    – Gajus
    Commented Oct 30, 2017 at 12:44
  • 2
    @Gajus The map showing your location can disappear after a few seconds if the screen view hasnt moved.
    – Jack Fraser
    Commented Oct 30, 2017 at 13:34
  • @Gajus both views are actually interactive. That means you can navigate swiping through the map also and the main seats view also. Plus what book my show does, if you are not interacting then it fades out the short map so that you can look for the seats on the top left and once you scroll (not just put finger )on screen, it automatically appears. I found it very interactive and usable. You should definitely try this.
    – Sanshizm
    Commented Oct 30, 2017 at 18:20
  • Why would you do this over using the natural pinch zoom features of the device the user already knows and expects?
    – boatcoder
    Commented Nov 1, 2017 at 20:03
  • because there are high chances for the slips and mistakes. In case when the hall is big and I want to book seats for almost last row, in front of the screen(center to the hall), when I zoom in, I'll not be seeing the other seats and as there are no signifiers, I might end up booking seats that I don't want. Even to be on the safer side, I have to check the screen and the selected seats so that my attempt is successful. This is why you can have a small map which can calculate almost every scenario from the small area to bigger area.
    – Sanshizm
    Commented Nov 1, 2017 at 21:00
24

I have opted to use a pointer element (similar to the text range selection brackets in the iOS and Android) that allows to select a group of seats.

Visually, it looks like this:

Seat pointer

Pointer refers to the starting position of the seat selection, i.e. if user is buying 3 tickets, then the pointer will select 3 seats starting with the seat which the seat pointer is pointing to.

User can change the selection using tap-and-drag (pan) motion. In contrast to the other suggested solutions, this approach is a single-motion interaction.

The pointer size is fixed, i.e. as the size of the auditorium increases (and therefore the individual seat size decreases), the pointer size remains constant. This solves the primary problem – being able to select a specific seat represented by a small size element.

This does not entirely solve the problem of the mega large auditoriums (700+ seats). In case of the mega large auditoriums, the seats become so small that even such pointer navigation is too abrupt. However, such auditoriums are rare. In case of the mega large auditoriums, the application prints a message suggesting to tilt the device to a landscape position, which increases the size of the seat elements and the sensitivity of the pointer.

Improve this answer
12
  • 1
    What if you have to selct multiple seats?
    – Sanshizm
    Commented Oct 30, 2017 at 18:15
  • 1
    This is also addressed in the original answer. There is no such scenario. The largest possible venue (485 seats, in our region at least) fits reasonably well in a landscape view. 90% of the viewing look well in portrait. This solution is not ideal for the edge case scenarios, but then the edge case scenarios may require a separate solution.
    – Gajus
    Commented Oct 30, 2017 at 18:54
  • 1
    @Gajus Can the user select two non-adjacent seats?
    – spacetyper
    Commented Oct 30, 2017 at 19:57
  • 1
    I just want to raise that this is not accessible to vision impaired individuals. Given that it's an auditorium, that is definitely a concern. In case you have no other solution available at the moment, a good temporary addition would be a screen reader visible link giving those individuals another option (eg: Please call this number to place a booking)
    – Ben
    Commented Oct 31, 2017 at 4:32
  • 1
    @Gajus I wouldn't say it's extremely rare to want to book non-adjacent seats. What if I'm booking for a larger group? I might prefer to have a block of 3 in one row with a block of 4 a row behind. Or maybe the hall has filled enough that there isn't one block of seats in row available for my entire group. Maybe I don't want to risk booking part of my group only to have someone else book the only remaining seats before I can pay and start over again. This seams very limiting.
    – David K
    Commented Nov 1, 2017 at 20:00
1

When you pointing out a seat other seats are floating away. This way you still see how much seats are on left and right, when your finger is on screen. Also it don't require from you micromovements when you drag finger to point seat next to one you pointing now. enter image description here When you move your finger to next seat, the row you leave is collapsing, and the next row get enlarge. You can also magnify the seat, so it gone be visible from behind the finger.

Improve this answer
0

If the user holds down on a seat for longer than a single tap, show a zoomed in view of the surrounding seats, perhaps in a tooltip-type container, and as they move their finger/thumb around update their seat selection.

This will give the user the full view of the floor plan without obscuring anything, but they can get better accuracy by holding down their finger/thumb.

This functionality is similar to how iOS handles selecting text.

iOS zoom to select

Improve this answer
2
  • 13
    This makes sense with text, but if you happen to be trying to select a seat right in the middle all of which are identical you will see nothing but the same looking little shapes which is of not much help.
    – Balázs
    Commented Oct 30, 2017 at 14:21
  • 1
    That’s true, though I had thought perhaps seats would be numbered which would allow the user to know which seats they were looking at.
    – mitchdav
    Commented Oct 30, 2017 at 14:42
0

And now for something more engineer-like:

  1. Selection for row
  2. Selection for seat in that row

enter image description here

:)

Improve this answer
3
  • 1
    Users aren't engineers though, this requires some effort to know what seat you'll end up with.
    – Wendy Wojenka
    Commented Oct 31, 2017 at 12:40
  • 1
    @Wanda one could highlight the seats that are selected from the dropdown. It's a bit like playing battleship ;)
    – Wayne Werner
    Commented Oct 31, 2017 at 14:50
  • R3S12, Ridley Scott sinks. :D
    – Juha Untinen
    Commented Oct 31, 2017 at 15:04
0

The first thing that came to mind is to break up the seating into groups and get the user to narrow down their preference with a simple questionnaire. For example asking the user where they want to sit (left side, middle, right side) and then only showing that set of seats which would make it easy to tap on a particular seat or seats.

If it's not too burdensome, you could expand it further to ask questions like "left, middle, right", then "front, middle, back" to only show a small number of seats on the screen.

Last time we went to the cinema the lady at the ticket booth asked us where we'd like to sit and gave us these options. We said "eh, wherever" and she picked a suitable seat for us.

Yes you run into the issue where seats may run across a division (e.g. wanting seats on two rows that span across middle and back), but if your selection is additive (e.g. you tap to pick a seat, then tap "Back" and pick a difference section, and your selections appear at the bottom, in a "Items in your cart" sort of way), then users are clear about how to pick more seats.

Improve this answer

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