User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm creating an app which is intentionally basic as it will ultimately be used by toddlers. However, because of this there's quite a lot of blank space and even more so on larger screens. Is there a way of making this blank space seem more natural rather than look incomplete?
Screen shot of the app:
The app isn't complete yet so happy to make changes and improvements where necessary.
Hmm... I see where the other answerers are going with this (and I agree, this is more of a graphic design and layout issue). But I disagree that that answer is to distribute things to close up that space, or make things larger to minimize the space.
"White space" is a perfectly valid - and actually quite valuable - design element, and its power should not be underestimated. You can look into the full Gestalt principles of design to learn why... here are a couple of resources:
https://en.wikipedia.org/wiki/Gestalt_psychology
Blank space plays a strong factor in several of the Gestalt aspects of visual design, but I think in your case we are mostly dealing with issues of proximity and similarity.
So what I'm understanding is that you want the large star to remain discrete and to stand out from the other stars, and you are perfectly appropriately using space/proximity and similarity/difference principle to help that along. But you want a way to make that space itself more interesting, without minimizing it - do I have that right?
This definitely falls into the category of visual and/or motion design, but you could certainly use some sort of interesting background or moving animation field to keep that space more "alive." You want it to be subtle enough that it doesn't interfere with the main action, of course, but generations of arcade games have used such things for this very reason, from Galaga's animated star fields or Super Mario's clouds and plants, to the gorgeous, atmospheric backgrounds of Monument Valley (already a gorgeous game), or any number of newer games with large playfields but a lot of space:
All of those background elements and scenery are strictly ornamental and do nothing to enhance the actual interactions of the games, but they increase the atmosphere and aesthetic value greatly, and in some cases can help to make a good game great.
I can easily envision the exact screen you have there, but with a subtly animated abstract texture in the background, or some interesting (and again subtle) geometric pattern... the animations or patterns could change depending on the level the user is on.
Most importantly, however, is that an ornamental element should never interfere with the interactive elements or detract in any way from the game play value! You will need to experiment and play test on these new factors as well to make sure they are not having any undesired affect on the playability of your game.
I'm thinking this might fall more under the category of graphic design.
But off-hand I would recommend considering larger buttons for the small stars (assuming that is indeed what they are), and maybe realigning them into a different grid (2 x 5, or 3x3 with a middle button on the bottom). If you could give more padding around the stars it might double as a usability enhancement by enlarging the touch area.
I would recommend a subtle, but visually interesting background image instead of a solid color.
Since this is intended to be used by toddlers I would also re-consider the 'Settings' and 'Reset' buttons that you have on the bottom. Maybe you could hide them in such a way that the user has to swipe to get to them first, or it is PIN-protected. This should be difficult for a child to accidentally use, but easy for a more advanced user.
I think it looks incomplete because the stars are crowded on the upper part and then all the space between them and the big star.
I would recommend to add some space above and between the stars. So the space look distributed across the screen. And to separate the buttons and make them bigger, with an icon to easily identify each one.
