- Last post
- 9 Responses
I give this course in usabilty and one of the cases I discuss is this mobile app screen for the National Railway Company of Belgium:
In my opinion the Buy-button is not visible enough, and it is the most important element on the screen as it functions as the next button.
However, the Apple human interface guidelines often place buttons at this spot (upper right) too.
What is your opinion?
Button should be below the total price and should look like a button (shape).
My opinion too, but how does this accord with the Apple human interface guidelines?
the problem is, once you have finished reading all that text, your eye is at the bottom of the screen and you need to look for the button to get to the next screen.
different solutions are possible.
make sure the user knows about the buy button before he or she starts reading the text.
- make the button bigger, i.e. make it a 'Buy >' button to balance it with the '< Back'.
- use a little animation, for instance a light highlight animation, to draw the user's attention to the button when first viewing the screen, so he will know in advance where he / she has to touch to continue.
- fade the button in delayed by a second after you show the text.
- or simply ignore the user guidelines and put the button where ever you feel it's appropriate for the user experience you are designing.
That buy button is the third item I read. Right after "Next", and "Your journey". What is distracting and confusing is the little football (B) and differentiating between label and action text. Clarifying those issues could help make it more visible.
Belgium has a railway? Isn't it like 12½ miles wide?
At the very least, the critical Buy button should be in a contrasting colour. And, perhaps, repeated after the summation.
A big Green "Buy" button at the bottom of the screen.
A light grey and smaller 'Cancel' or perhaps '< return to search' button underneath it. Depending on what precedes this page.
If you don't put the cancel button in. Then user changes mind and starts scanning around for a way to go back, and will have to find that '< back' button as it's in a 'blind spot'. Perhaps understood for younger or advanced users, but my folks would be totally lost on not only finding that, but the meaning of 'back' when in the midst of purchasing a ticket. No one ever has said "would you like to continue with your purchase or back?". it's "cancel"!
This is simple stuff. Don't over research/study/think it. Just 'feel it'.
Also all the ticket info looks like a right mess, presume that's not been designed yet.
Thanks folks, great response!
All the responses here are good.
I agree with the first one from SimonFFM who said the button should be below the "total price" line at the bottom and should look like a button.
In usability, obvious always wins.
If you need to keep that "buy" link in the upper right, I'd still repeat it at the bottom as a traditional looking, large button.
I have only worked on one app so I am no expert.
While placing the buy button below the content in this case sorta makes sense, but then we have to remember in in the content area a million different buttons with a million different reasons are placed and this changes from app to app. The top header area is almost reserved for two logical things... "go back/change your mind" and "move forward/purchase/proceed".
Another thing is that "below the fold" dilemma still exists. While a 20-year-old will scroll to find that button without thinking, a 60-year-old or a not very tech savvy person won't. If tomorrow 4 more lines of info were required in that screenshot, the "buy button" could move below the fold on mobile devices with smaller screens.
We then also have the the fact that apps and every element within the app does not resize according to the screen size. Due to certain limitations in terms of coding, some elements need to be hard coded and have a fixed size. Apps won't show up perfectly scaled down from phone to phone. Not just because it looks fine on a 6 plus, means the same amount of content will appear on a single screen on a 6 or 7, and much less on a 5s.