4

I'm working on a game website for desktop and mobile and one of the pages has 5 action buttons:

  1. Edit (no text, just pencil icon)
  2. Share (no text, just standard share icon)
  3. Play (just text)
  4. Compare scores (just text)
  5. View scores (just text)

Desktop

Desktop

Mobile

Mobile

It's currently a visual mess. On top of that, I'm having a hard time making room for this number of buttons on mobile, especially if they all end up being text only.

Any suggestions?

Improve this question
5
  • I will give an improved answer later. But in Desktop you could remove the A-Z list since it is usually not used in computers. That could free some room and improve alignment.
    – RA828
    Jan 5, 2021 at 20:40
  • Can you also give us a brief of the game? Where does the "back arrow" next do "Favorite Names" will lead the user?
    – RA828
    Jan 5, 2021 at 20:41
  • Thanks for that suggestion - looking forward to hearing what else you have in mind. It's a list ranking website (in this case, baby names). The back button will take the user to a page with their other lists (boys names, girls names, etc.)
    – Sarah Bierman
    Jan 6, 2021 at 19:54
  • So the target user is: “Parents planning to/about to have a baby”?
    – RA828
    Jan 6, 2021 at 19:56
  • Yup. But the website can be used to rank anything really - pet names, vacation destinations...
    – Sarah Bierman
    Jan 6, 2021 at 20:58

2 Answers 2

Reset to default
1

I think the biggest problem with your draft is not the quantity of buttons, actually this is easily solvable on practically any screen size. In my understanding the most serious problem is in the design itself or if this is just a scheme, in how it's solved.

According to the description, there are five buttons, but the diagram shows five different entities with few elements in common to visually unify them, where long/short text mixes with icons and button design.

One of the basic points for interface design is the graphical systematization of elements with similar functionality. The first step is undoubtedly to Unify Criteria of Graphic Representation, either by size, color, type, content, etc.

examples

Being a game website I would not hesitate to use a kind of "gaming" interface. Here a very practical example of grouping buttons from Callmenick

enter image description here

Demo

Improve this answer
1
  • 1
    Oh wow this is super helpful, thanks! I considered that gaming interface as a possibility - I will definitely explore all these options and see what looks and feels best!
    – Sarah Bierman
    Jan 7, 2021 at 15:55
0

I would suggest grouping everything related to score under a menu with an icon like this: enter image description here

Improve this answer

Your Answer

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

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