Seed of Life dev update 4 - menus and user experience
Seed of Life is a meditative game in which you deflect colourful elements to create sacred patterns.
Catch up on what the game is in this post.
I’ve been working on the game’s presentation and menus; what the player sees when they first switch on the game, how the start screen looks, how they move between pages, and so on.
Some rules I’ve kept in mind:
The very first time the player starts the game, they will automatically begin playing a short tutorial that then progresses onto Story Mode, without navigating any menus.
User-interface should be compatible with Mouse, Controller, and Touch. This is to maximise compatibility across multiple platforms.
Minimalist button prompts should appear on the screen (or should they?)
No important rollover states (touch screens don’t have them)
Buttons should feel natural and touchable/clickable.
Utilise as little text as possible.
Maintain a minimalist aesthetic.
Design to be visually intuitive.
Don’t over clutter the screen + maintain good spacing between elements.
Here are the different menu screens you can navigate through.
This is not something I’ve done yet, but some possible elements could include:
Emotion Theory logo / a game by Adam Thompson
This game saves data automatically.
Best played with headphones.
A simple screen the player should engage with before they continue. Leaving the game on this screen could enable the game to play itself - a demo mode.
Press any button / Press any key / Click anywhere / Touch anywhere.
At first I felt there was too much text, so I chose to replace the “Press Any Button” text with icons
Here’s a revised edition with unique icons for each input / platform:
Once you’re in the game, you select the mode you’d like to play.
Story - Chapter Select (paginated)
Endless - Difficulty Select (paginated)
Challenge - Set Select (paginated)
At first I kept the game’s title in the screen, but it felt it was unnecessarily obstructive at this point in the menu.
Immediately I felt that the button prompts at the bottom could utilise icons rather than text.
The B button feels appropriate using an icon for “Back”. However, pairing up A and the Arrows with icons for “OK” and “Select” felt strange. Alternatively, I opted to leave them without any icons, since I believed it felt intuitive enough that they reprsent navigation and confirmation.
I still felt there was a strange disconnect and that there could still be a better way.
The arrows appearing on the sides was a step in the right direction, but I still felt they took up an unnecessary amount of screenspace given their innately intuitive and obvious functions.
I strongly feel this solution is the right way to go. It communicates the function yet does not feel overly obstrusive or visually verbose.
Some may forego this attention to detail given how obvious these functions seem to be. Yet still, even without playtesting this, I know from experience how players at times can completely miss a menu function if it is not explicity offered or displayed to them, even if it is as simple as the functions seen above.
Some additional thoughts / notes:
Icon designs should be revised.
Story mode icon could maybe use a simpler lotus made of three strokes, or a different icon entirely.
Challenge mode (triangle) could instead be a 3x3 grid of painted dots - symbolising the multitude of waves you can pick and play.
I’m happy with the icons for Endless and Zen mode since they both accurately represent their respective concepts.
An alternative display would be to have pages where each mode encompass the entire display. Not sure I like this as much, though.
Maybe the Story Mode icon (leftmost) could be bigger and more pronounced. My problem is when players return to the game to continue their progress in Story Mode and see this menu - since there are no words - they won’t likely know that it’s the leftmost icon that is Story Mode, the mode they’ve been playing...
This could be countered by locking the other modes initially. The icons could play an “unlock” animation when they are first unlocked.
Story Mode could possibly benefit with a Continue button somewhere... then again, it will always load up on the most recent chapter, so this is not likely a problem.
When you’ve selected a mode, you will be presented with a Level Select screen. This is a paginated view with a single selection taking up the whole screen (eg. Chapter I, Chapter II... etc). For Story mode, you will select the chapter. For Endless, the difficulty - and so on.
Circles at the bottom representing page number
Arrows on the sides to navigate pages
Functionally, this concept feels right. You will switch pages, and each page represents a chapter. You can play the chapter by pressing A from its page.
I think that each page will need some kind of embelishment, as well as possibly some meta data for each chapter, such as Best Score and what not, similar to Endless Mode.
I’m using roman numerals for each chapter number, which fits the language agnostic approach (sort of). I’m not sure about the font used though, which has more of a brush stroke feel.
In general, I’m beginning to see a mix of zen/brush type design along with flat minimalism. I’m not sure if the two work together and whether or not I should stick to one style - and if so, which style to choose.
Immediately I could see that the navigation felt a little cluttered, particularly since now we’ve added up/down arrows to it.
I pondered whether it was necessary at all. Should I keep them on the main menu but omit them in the mode sub menus? Would this be considered inconsistent and thus confusing? By this point players should know to use the arrows for navigation, so perhaps it will make sense? Or should I omit them from *all* menus?
I’m not sure what the solution is, but for this menu specifically, I tried it without the arrows and it feels much less cluttered.
I feel this is close, but I might get further opinions before settling on a final design.
Endless mode is a case where I’m OK with using text. This is for the “Best” and the “Last” labels as well as the scores you got. It’s quite possible to use a BEST icon (such as a scoring medal or a star) and a LAST or RECENT icon (such as a clock?).
Animation could really drive home these concepts. When you finish a game, your score can flash and tween into the LAST position, reinforcing the fact that this is your most recent score of the game you just played. Same deal with BEST; beating your own high score will place it into that slot too, emphasising the fact that you’ve just made your personal best score.
I feel the icons actually work quite well. For the BEST icon, we could instead use a badge or a winner’s up icon. Thoughts?
Lastly, there’re the icons representing the difficulty levels. It was tough thinking of what could work, but what I’ve got - and what I think is really interesting - is a fibonacci spiral on a pinecone. Each difficulty adds another spiral, up to a total of four. This fits the game’s theme perfectly and is a pleasant looking image. Of course, what’s in the image above, as with all images, is just a blueprint with a placeholder graphic. This will be reconstructed suitably.
There’s nothing to really display here except a Play button. Maybe there could be different types of Zen modes, but I think that’s overcomplicating things.
I really feel tempted to put the Zen icon in the center... but that doesn’t really make sense.
Should Zen mode play instantly when you select it from the main menu, rather than enter this sub menu?
Well, I’ve got about 80% of these menu designs locked in. I’d still like some feedback on some of them before finalising their designs, but for the most part this exercise was really helpful - I feel like a lot of work has been cleared up.
Once the designs are all locked in, I will look at polishing the look of each menu. Things to consider are fonts, colours, icon graphics, layout and positioning, embelishments, etc - all of which are currently placeholders.
