0

I need to design a game start screen, where there's a PLAY button waiting for the installation to complete. But the user has a possibility of stopping the installation which would result in a new screen appearing, where they can start the installation manually from the start.

My question is if I can change the label of this PLAY button to INSTALL on the last screen, mainly to save some space or not to have to leave blank space for the other button to show up later (or never, if the user never stops the installation).

Same I guess would be applied to an update screen and other that need some kind of loading that can be stopped and started manually again.

Thanks!

1

I have updated my answer to be a bit better laid out and also to hopefully address your follow up questions.


The following is a design that is seen in many game launcher/installers such as Blizzard's Battle.net, Warframe, World of Warhips, etc.

When the launcher is initially loaded and the game is needing to be installed, they show the following view containing solely the 'install' button: enter image description here

Once the game has begun installing the launcher changes the ui elements to reflect that the game is now in the 'installing' state and provides the relevant controls (and no longer the 'install' button which is not relevant in this state):

enter image description here

but it is important to note that during installation the 'Play' button will be greyed out, so the user cannot click it until the game has finished its installation. It is also from this view the user can control the installation - pausing, cancelling, or resuming (which were not relevant controls in the previous state).

And finally when the game is finished its installation the view will replace all fo the installation controls with the now active 'Play' button, since that is the only control that is relevant once the installation has completed. It might also be a good idea to place a 'settings' icon in this state as well, so the user's can uninstall the game from here as well.

enter image description here

The main reason why I feel that this is a clean design is because it displays only the relevant controls that the user will care about based on the games current state - needing install, installing, installed and ready to play - meaning there will a low cognitive load (they don't have to discern the meaning of controls since only the relevant ones are displayed).


As for the implemntation details, that is more of my developer side coming out. It is not a nice design to have one element provide multiple operations or functions. So for implementation you can actually have two different buttons (one 'install' and one 'play') but you would only ever have one of the buttons be displayed at any given time.

The one thing to note is that this is only a good idea if you can visually turn on and hide the buttons seemlessly from the user's point of view (so it looks like all that changed is the label). If the button shifts location or blinks or anything like that, it can be visually jarring and in that case it would be a better idea to just change the label as you first suggested (basically, the user's experience of the button/label change is more important than the underlying implementation I think).

  • Hi, thanks for your answer, @KristenD. I wrote "screens", but what I meant is just that something there changes, so it appears different (I am in the phase of sketching it all out so for me those are separate screens :) ). Could you elaborate though on that implementation part? Is it just easier in the development area or is it something else? Anyway, thank you for providing an example, but could you (or anybody) explain if it has any pros or cons considering UX/UI guidelines? I really can't find anything that specific to back this up (or not). – Ola Osinska Jan 17 '18 at 9:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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