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?
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.
A few reasons why this is a bad idea.
User cannot copy the text of the button. This breaks the expected functionality of the browser – being able to select and copy text.
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.
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.
The ticket icon is not common. It's important to have a label with your icon.
My solution:
If the user does not focus the time button, don't show a button to proceed with the reservation.
...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.
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!)
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
Well, if it's a button to buy tickets, then why not
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.
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?
