I need some expert advice redesigning the layout of my Facebook game. Below is a screenshot of my home page as it stands now. Styling of margins and some font stuff isn't done which is why some things are touching the left side.

There are a few different pieces of data here and I can't decide where to place them, or if I should omit some completely. There's the picture, basic data to its right, stats and the button to train them, space for training stories, and combat status (when in use takes up the same amount of space as the top section picture and data).

I want to be able to put a display of inventory on here too but then it seems like it's getting crowded and it might fall below the fold. Not terrible I know but maybe information overload.

The UX part of me knows that the long winded stories are wasting space and nobody will ever read them, but if I remove them then the game is just clicking to watch numbers go up. I also can't decide if I should try to fit the stats in the top right corner, maybe by making the basic info smaller or moving / removing it. On the other hand, the stats are central to the game, and I know that UX wise, the left side on the second line is a bit more readily visible than the right edge, as far as how eye flow goes.

If I had to rank things that could be on this page in order of importance, it would be

  1. Stats / training
  2. Inventory
  3. Combat status
  4. Name and picture (full size picture doesn't appear anywhere else)
  5. "Basic" information (gender and age aren't really anywhere else though)

So I'm looking for advice on what things I should throw away, resize, shuffle around, etc. I want to avoid nesting another set of tabs in here if at all possible. Expandable / collapsable sections came to mind but seems a bit too "advanced" or click heavy for a casual game crowd. Also note the screenshot is already at the maximum width I can get (760px).


  • The training (16) should be on the top bar as well or is it not that important? Can you have an icon of the character next to its name in title bar as well. You can move training numbers to the right of name/age etc and make titles smaller than name of characters or make the name a little bigger. Have an underline below title with blue or something. Jan 31, 2013 at 17:02

1 Answer 1


Focusing of what you have in your screenshot I've made a few changes:

  1. I moved the subtitle Great Wyrm to be placed next to The Tesserex title
  2. I've drawn lines below headers and sub headers to group things together
  3. The info is shortened, with the option to show all the text using the more-button
  4. The labels (Gander, Age,...) have been right-aligned to increase readability. Label/value pair who belongs together should be visually closer.
  5. The subtitles Training and Combat status are less promonent than the header Tesserex. Headers should always show their hierarchical order.
  6. The status update on gaining weight is moved to the section weight/hunt for food.
  7. Sub training activities are mildly grouped by a line to make room for status updates on each sub training section (Food, Gold and Combat).
  8. The hour glass is moved above the training line since it's just info and nothing you can control. Training activities is below the line.
  9. Combat status section is moved to the right of Training section
  10. Headers and sub headers have the same blue header color.

enter image description here

  • Where does inventory fit into this layout?
    – Rich
    Feb 2, 2013 at 6:19

Your Answer

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

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