Game and Developer Page - action rail breakdown
I've been working on the action rail for the game and developer pages that looks like this.
Wow some icons, much text, that tells you so much.
So I thought it might be fun to do a breakdown of what thinking and work actually goes into a section like this.
Work usually starts with a concept or what we call a *flow*
This can be a user flow or a developer flow and so on. Pretty much, it breaks down to what the foundation goal of the piece is.
This one was
*Allow users to take several actions from the developer and game pages.*
Super vague and very helpful.
Then you build on that. Similar to the snowflake writing method
What type of actions?
Where would it live?
Why would it live there?
What is the use case for these?
I wanted a quickly accessible set of actions surfaced to the user that they can take on the game pages and developer pages. These are dynamic to
- is the user signed in
- are they the owner of the page
So you keep breaking it down. Starting with one action and who can use it, when it appears.
And then you end up with
Visitor / signed-out user
Follow — approved developers only; clicking prompts sign-in.
Claim admin-created profile — only when the profile is still unowned; clicking prompts sign-in.
Follow/unfollow — only when they do not own or originally create the profile.
Claim admin-created profile — only when it is still unowned.
Review status and reviewer feedback.
No Claim or Admin-created icon—even if originally admin-created.
Visitor / signed-out user
Game library status — clicking prompts sign-in.
Claim admin-created game — only when the game is still unowned; clicking prompts sign-in.
Add to library / change gameplay status — for eligible published games.
Claim admin-created game — only when it is still unowned.
Publish game — when it is a draft.
Unpublish game — when it is published.
Review status and reviewer feedback.
Game library status — when eligible or previously saved.
No Claim or Admin-created icon—even if originally admin-created.
That's just the *states* of the piece.
Then you move to the visual. UX Design
I want this to be low profile but easily accessible (icon design)
What icons will I use then
I want it to be clear from just icons what the actions do
I want further information to be easily accessible. (tooltip on hover)
Needs both Dark and Light mode
Are the colours in high enough contrast on both dark and light modes
Are the hover states clear enough
Are they keyboard accessible
Do they have their correct aria labels
Do they work correctly with self voicing
Then you move on to how that data is going to be shown. The variables and so on. Just like in a video game. This is called implementation details. And this is the stage when you usually actually start coding. Some of these things can be done in different orders depending on your preference, or some can be more vague than others. It depends on how much pre-work you want to do.
Then, of course, if you are like me, you add tests to make sure that when you change things, you don't break functionality.
So I build, tweak, test, find bugs, build some more, review, dislike something, change it, break something, build again, check UX, fix bugs, test again, do accessibility and use tests like Lighthouse and load times, fix those things, make sure tests are all running and then HUZZAH.
We have a bunch of buttons on the page now.
Work like this really is reminiscent of dynamic branching and variables in video games. Because at the end of the day, the user doesn't really see all the dynamic content. Not unless they are replaying it multiple times and making different choices.
If a user never creates a developer or game, they will never be aware they can see an edit or review status icon, for example. This is really the same for games, unless there is some sort of indicator that shows a player they don't really know or see that the content is dynamic for them unless they play in a different state. Both these rails have a set of admin actions that only I will ever see, for example.
Anyway, this was really just me having a long ramble. Action rail is built, and I'm doing some tests. Might tweak it a bit more. Need to make sure it passes all the accessibility tests.
Work on the website is coming along.
Gonna work on a revamp of the developer page. Nothing major, just a clean-up. I need to work on the developer section in the dashboard section as well.
Talk to you all next time!
