23

I have an iOS game which shows a screen every time you win or lose a game. On that screen, the user can tap anywhere to return to the gameplay screen. However, this does not seem immediately obvious. I could use a traditional button or other navigation item, but that seems to unnecessarily clutter the view. Also, I could use a simple label saying "tap to continue", but at that point a button may make more sense.

Here is the view so far, presented when the game was lost (note: the game is a hangman style game):

mockup

Improve this question
12
  • 15
    Sometimes the simplest options are the best,whats wrong with an explicit button?
    – Mervin
    May 5, 2015 at 0:31
  • 1
    Maybe not a text button, but a large graphic button at the bottom?
    – mginn
    May 5, 2015 at 0:33
  • 1
    Agreed with @MervinJohnsingh - the best UX is to simplest, giving them a button. If it's too intrusive, give them a message string telling them to tap anywhere.
    – Nicholas Pappas
    May 5, 2015 at 3:39
  • 2
    How anout a hand tapping icon?
    – Ooker
    May 5, 2015 at 10:47
  • 5
    "I can't find the anywhere"
    – nhgrif
    May 5, 2015 at 22:52

10 Answers 10

Reset to default
53

There is no good way

Here's the design logic:

  • Backgrounds are perceived by users as backgrounds, i.e. inert and uninteractable. This is obvious.
  • In order to communicate to users that the background is tappable, you need to tell them that. The most reliable way of doing this is to sign it, i.e. Tap to continue.
    • Note that trying to do something fancy like beveling the background to make it seem like a button is not going to be effective. The clearest way to communicate this is to provide a sign.
  • So long as you are going to provide a sign, you might as well make it a button, because you are already requiring the user to focus on it.

What you can do...

If you want the minimalist, functional look is to make the button highly functional but less visually intrusive. Here is an example which uses a shaded bottom bar and mild font presence to do that:

enter image description here

Improve this answer
7
  • I'd prefer swiping instead of tapping, because that's just easier to do. I'd put a >>> image instead of Tap to continue. And if that's an iPhone, the text should be a bit bigger.
    – polkovnikov.ph
    May 5, 2015 at 17:26
  • 9
    @polkovnikov.ph I couldn't disagree more. Dragging already includes the action of pressing dow and raising your finger (aka tapping), how is it easier?
    – Etheryte
    May 5, 2015 at 19:02
  • @Nit Doesn't tapping require lifting a finger no further than several millimeters from the touch point?
    – polkovnikov.ph
    May 5, 2015 at 19:28
  • 5
    I like this answer. One option is also to have a visible button but to accept a tap anywhere on the screen (so the user can target the button if they like, but if they miss or mash the screen, they still get the desired behaviour).
    – Kit Grose
    May 6, 2015 at 0:14
  • 1
    @KitGrose funnily enough, i wrestled with whether or not to describe a NYC MTA style fake button as a potential solution here. it's a good suggestion so i'm glad you brought it up. At the end i decided i didn't want to risk the inevitable comment spam that might provoke so i left it out.
    – tohster
    May 6, 2015 at 0:32
24

Case in point. Credit: 20th Century Fox/The Simpsons

What's the issue with giving the user a predefined region of space with some sort of indicator that that space is where they should tap to continue - a button with an appropriate continue icon (the right-ward arrow is popular), for instance?

From a UX perspective, you're removing a level of complexity by removing an unnecessary choice, namely where on the screen to tap, AND you're eliminating the need to telegraph that they can tap anywhere - just tap HERE.

Giving them the option to tap anywhere may seem best, but it's a classical fallacy; choices take time and energy, easy directions are easy to follow.

Improve this answer
5
  • 3
    There's no reason you can't have a button that says "tap to continue", but still allow tapping anywhere on the screen to continue.
    – Mar
    May 7, 2015 at 17:01
  • What's the purpose of making the button a button in that instance and not just putting an icon or text in some blank space? The user may be expecting that ONLY that button causes the screen to change and when it does for some other reason, that's unexpected behavior.
    – Garandy
    May 7, 2015 at 20:15
  • The OP was saying they want the whole screen to be "tap to continue". The button gives users a target. If the screen had multiple possible outcomes then having the whole screen be tap-able would be bad, but since there's always one outcome for that screen, having the whole thing be tap-able means they can't miss their target. Of course, if you prefer only the button to be tap-able, that's valid UI too.
    – Mar
    May 7, 2015 at 22:56
  • One way you're pointlessly giving too many choices, the other way you're creating an unexpected effect. @tohster got it right, there is no good option that strictly answers only the question. So in the spirit of this kind of forum, I proposed an alternative that is (subjectively) better and achieves the same goal.
    – Garandy
    May 8, 2015 at 3:54
  • Fair enough, @Alex
    – Mar
    May 8, 2015 at 4:11
6

"On that screen, the user can tap anywhere to return to the gameplay screen."

Without knowing what "gameplay screen" here are two suggestions.

  1. A common iOS strategy of presenting several view screens (gameplay and the one shown here?) is pushing and popping views via the navigation controller. That is if said view is a child of the 'gameplay view'.

The result is a navigation menu -- closer to breadcrumbs -- shown on the top. (presumably only 1 level versus the shown 4 level nav)

  1. If "gameplay view" is closer in meaning to "Refresh game with new word"

Then suggested by tohster is a button, "you might as well make it a button, because you are already requiring the user to focus on it."

In this case, make it a universal refresh symbol (in a round button), acknowledging that it does look similar to the iPhone hardware button directly below.

Image showing both methods

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
3
  • 1
    This button looks like a good design, but I don't think I want any sort of navigation breadcrumbs
    – mginn
    May 5, 2015 at 12:41
  • 1
    Eww, those breadcrumbs look crummy.
    – bjb568
    May 6, 2015 at 0:14
  • I do like the button for this and may very well use this design.
    – mginn
    May 6, 2015 at 23:17
4

In the game "Two Dots", messages are shown in small dialog windows that have no buttons. To dismiss these, you have to tap on the background. Perhaps this solution could work for you.

Improve this answer
4

I think this can be handled by looking at how you've prepared the user experience thus far.

If the game has had several screens with small load-times up to this point, then the user will expect to have to do some waiting at these screens while the game loads/gets enough time to deliver a message, to continue.

If you consistently have 'forced' the user to click to proceed in the users own time then I'd say a blank page with no particular prompts it is enough for the user to discover on her own that tapping here as well leads to progress.

Smart phones have very few ways to interact with the screen. tapping, swiping and orienting. Without pulling out a source on this, I think users try to solve unknown prompts by doing those three things in that order. if not maybe quitting and restarting the app. Which they probably wont try before at least tapping once or twice first, which by then will have succeeded your "challenge".

On the flip-side. If you have screens that load at irregular times, adds that needs to be clicked away or other elements that lead to an inconsistent experience, then a button prompt as the other answers have suggested is probably for the best.

Improve this answer
3

If the elements are required for proper navigation then don't think about clutterness, You can provide any button to 'go back' or to 'continue' in minimalist design.

I also suggest to provide the 'Re-play' option on 'Lost' screen to play again.

Improve this answer
3

In Material Design on Android it's common to make displays as virtual "cards" that overlay, say, the left 80% of the screen. The user swipes right to left to dismiss the card and return to the previous screen, which is partially visible behind the card. By visually layering the content, the user has a clear cue they can get back to the content below by swiping or tapping in that area.

Improve this answer
2
  • @tohster I didn't mean to imply this was how Material Design would handle OP's case; just that they solve the "Tap Anywhere" vs. "Tap Here" problem a different way; by making it visually distinct from what's behind it.
    – dimo414
    May 6, 2015 at 6:08
  • Ah i see what you mean. that's a fair and reasonable point....nicely clarified. i'll remove my orignial comment.
    – tohster
    May 6, 2015 at 6:14
2

I got addicted to the addictinggames.com website for my flash game fix back in it's infancy and the complete list of games didn't have a scroll bar and watched them grow.

I got the impression that in the game in question your going to be seeing the game over screen every 5 seconds until you learn the basic skills needed to survive.

In that case my solution is tell the player to "touch the screen anywhere upon failure to restart" on the home screen or fail screen and after a few times they'll catch on.

Improve this answer
1
  • That's some clunky language, IMHO. To restart, I need to touch the screen anywhere upon failure? Or upon failure to restart, I need to touch the screen anywhere? If the only action available is to restart, why not just tell them to 'Touch the screen'?
    – nekomatic
    May 7, 2015 at 9:29
2

On the other hand, Blizzard, one of the companies best known for their intuitive UI, has done this for their iOS Hearthstone app:

Hearthstone screenshot showing "Tap anywhere" messaging

Simply saying "Tap anywhere to continue" isn't out of the question if you don't do it every other second.

Improve this answer
3
  • I imagine this screen would be more user friendly if it were a "Tap here" rather than "Tap anywhere"...
    – dimo414
    May 6, 2015 at 16:33
  • Then again anywhere is fine for this specific screen.
    – Blindy
    May 6, 2015 at 16:46
  • How about 'Tap to reconnect'?
    – nekomatic
    May 7, 2015 at 9:30
1

One way to accomplish this would be to place a label, for instance the word 'tap' or 'continue' at the bottom. Users would see that and select it to continue.

However, if in addition to that, you make the whole screen respond to a tap then, as users become more comfortable with the application they will know that they can, in fact, click anywhere.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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