9

We are designing an app that displays movie showtimes.

A link to book a specific time is a box with a time. A designer is suggesting to add a rollover effect that replaces screening time with a ticket.

Does this additional information make it easier for a user to comprehend the result of clicking the button?

Rollover effect using an icon.

  • 2
    This type of icon to represent tickets is fairly common in the USA. For instance, it's used in the Fandango logo: statf.com/r98.0/redesign/static/img/fandango-logo.svg . However, in context, if the flow of your application is clear, I believe users will already understand that they are selecting a showtime to purchase tickets by the time they reach that button. Most movie ticketing websites and apps work in largely the same way, and the layout you're using, each theater name and location followed by a list of showtimes, is the common standard. – recognizer Sep 17 '15 at 16:03
  • 10
    I strongly dislike it when things Im about to click change at the last second for any reason. It makes me feel like you are trying to pull a fast one on me, because 90% of the time I realize it has changed too late and I have no idea what I clicked. – David says Reinstate Monica Sep 17 '15 at 16:54
  • 12
    Please, DON'T HIDE CONTENT!!! If it wasn't important, you wouldn't show it. Since it is important, why do you hide it? – Ismael Miguel Sep 17 '15 at 18:40
  • @Gajus i'm assuming my comment was removed by an admin (confused about why). seems you are satisified with the answer you accepted so I sharen't elaborate on my initial comment of no. – Dave Haigh Sep 21 '15 at 15:07
  • once the user becomes familiar with the app, they'll love it; but i doubt it's 100% clear as to what the icon means. the icons that represent actions that users have learned are a small set. most icons represent a state or status that the user can latently surmise. – Jedi Commymullah Sep 23 '15 at 4:46
38

No.

I had no clue what the icon meant. Maybe it's location dependent, but here in Belgium movie tickets don't look like that.

Without a broader context it's hard to judge, but it seems you're trying to solve the wrong problem. If you need the hover state to convey some important information, i.e., what action this button will perform, you've already failed. It should be clear from the first impression that it's a button to buy tickets.

| improve this answer | |
  • 6
    It's should be clear from the first impression well said – Ejaz Sep 18 '15 at 7:45
  • 1
    And another no, cause when you see the page from a mobile device without a cursor, the icon won't be visible, why not put a label above with: 'select a time sloth' – Yakke Sep 18 '15 at 10:50
  • @Yakke Not just "mobile devices", lots of modern laptops and desktop PCs have touchscreens too. Every time we say "mobile device without a cursor" some developer will assume there will always be a mouse cursor whenever the screen is "desktop size" (while murdering a kitten). Also, some mobile devices can do mouseover - e.g. Galaxy Note by pointing the pen at the screen. Touchscreen !== smaller screens – user56reinstatemonica8 Sep 18 '15 at 12:09
17

A few reasons why this is a bad idea.

Cannot Copy

User cannot copy the text of the button. This breaks the expected functionality of the browser – being able to select and copy text.

New Information

When user is going for the button, he already has an expectation of what it is going to do. Making the contents of the button change upon hover, introduces new information that user needs to process before proceeding.

Diverging Experience

User experience must be as consistent as possible between different devices and platforms. This effect is not possible in mobile. This effect introduces an unnecessary difference between mobile and desktop experience.

| improve this answer | |
  • @dave-haigh I hope you have something to add to this. I am fighting a battle here against UI designers. – Gajus Sep 17 '15 at 13:58
  • 6
    For your first point: the common and hence expected functionality of browsers is already that you aren't able to copy text of buttons. You are able to copy text of links. There's a difference between buttons and links. For your third point: disagree, it's more important to match the expectations of users on a specific device and platform. If desktop users are used to a certain effect (and I'm not saying they are), give desktop users that effect. If mobile users aren't used to a certain effect, don't give mobile users that effect. But for your second point, agreed. – hvd Sep 17 '15 at 15:50
  • @hvd It is a link. Not a button. I have misused the term. – Gajus Sep 17 '15 at 15:54
  • 1
    @hvd you should be able to copy text from a browser - if not that is a bug – user151019 Sep 17 '15 at 23:41
  • 2
    There are lots and lots and lots and lots and lots of websites that I can't copy text from. Users do not expect to copy text from things like that. If we make it possible, that's awesome, but definitely beyond the status quo. – Alan Shutko Sep 18 '15 at 4:11
1

The ticket icon is not common. It's important to have a label with your icon.

My solution:

  1. Add hover and focus on your time button.
  2. When user focus a time button, show a button with ticket icon and explanatory label (e.g., "Book a ticket") at the bottom of you panel.

If the user does not focus the time button, don't show a button to proceed with the reservation.

| improve this answer | |
  • 1
    I have to downvote this. It does not answer the question. It is an alternative UI solution. – Gajus Sep 17 '15 at 12:58
  • 1
    I'm not right with you. Your issue is just not good.. no comment.. – Leaf Sep 17 '15 at 13:07
1

Yes and no

Yes because...

...you're breaking a pattern, which draws attention to the element. Right now, you have a list of numbers which in context tell the user those numbers are times (out of context they could mean anything). However, I don't see them as buttons, just a list of times with no associated actions whatsoever. In this case, breaking the pattern will help you understand the user this element has behaviors. Also, this small element communicates a message in a really limited space.

No because...

The icon is not universally recognizable, therefore is not clear what the affordance for that element is. It's clear that there are associated behaviors, but they're not translating properly (this being said, I'm nitpicking based on other answers. Quite honestly, IN THAT CONTEXT, that icon easily translates as a movie ticket, can't even imagine another interpretation. And I'm not in US or UK!)

However...

Besides asking here, did you test it? Because it doesn't matter what me, you or anyone else here thinks, the only thing that matters is how it works for your users, nothing else.

As an alternative, if you want to go really hard on principles, this issue could be solved with a more appropriate icon which includes the word "buy" inside. This way you'll provide the expected affordance and there will be no room for interpretations. Or simply add the word buy on hover, although there might be someone complaining it's not clear what is the user going to buy. So again: test, test, test

| improve this answer | |
1

Well, if it's a button to buy tickets, then why not

enter image description here

| improve this answer | |
0

It's difficult to provide a full analysis based on just this information, but I simply took the questions shown here and tried to analyze what you've provided.

- Will the user try to achieve the right effect?

Yes. In this case, the shape of the button, the change of color and the cursor (affordance, convention) will indicate that this is clickable. Also, that the user is searching for a ticket at a specific time is a compelling reason for a user to click a button for a certain time.

- Will the user notice that the correct action is available?

Yes, for the same reasons as above.

- Will the user associate the correct action with the effect to be achieved?

It's not clear that the icon adds any additional information in this case, as much as just changing the color. It's not clear why there is suddenly a ticket icon. However, there isn't enough information to conclude that the user might stop continuing.

- If the correct action is performed, will the user see that progress is being made toward solution of the task?

Not enough information to conclude. Depends on what happens next.

| improve this answer | |
0

It isn't what movie tickets look like in the UK except in very old-fashioned cinemas. I recognise it as the "ticket" icon but only because of the context. If it wasn't a cinema site I wouldn't have known what it was trying to represent. That's ok, right, because it is a cinema site.

My main concern is that this is very like a form where some designer has put all the input labels in as placeholders. Once you're there, you can't see what it is you were trying to get. So you end up moving your mouse back in and out in order to make sure you didn't make a mistake.

And it's a rollover. What happens on touch devices? If phone and tablet users have to figure it out, why are desktop users treated differently?

| improve this answer | |

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.