Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've been designing a game based on jquery mobile. I've come to a hurdle that I am finding hard to overcome.

So here's, hopefully, a fun exercise for some budding game designers out there.

I've changed the UI around quite a bit from the original plan because it became apparent that information I was previously displaying separately was much more related than in the original design.

This means, that I need a rather condensed design.

Heres a quick overview of the game:

It's based on "Archmage." Players earn 'land' which is the primary contributing factor to their overall 'power' which increases their ranking. With Land, you build structures, which increase your economy and allow you to build more units. Land is then used to upgrade each building. The higher the building power, the better ther units you can recruit are.

My stumbling point is the structure display. Currently, I am listing out each structure (8 in total, 4 military[focuses on units/battle], 4 city[focuses on economy]), in its own separate page where I want to display the following:

  1. Name of Structure
  2. More info on the structure
    • (gold cost)(mana cost)<-equal priority (current str level) (attunements**)
    • attunements: Each structure can have 3. They initially start out as empty. The player decides when and how to fill them up.
  3. Units that the specific structure can produce (w/ or w/out 'more info' on each) 3b. A way for the user to 'recruit' these units if they want
  4. A way to access the other structures pages easily
  5. A way to access the "home page" for structures.
  6. If the structure is being upgrade(a time factor) how far along it is.

Here is the current look (its still in early stages of development).

Structure Menu

Structure with open panel

Most is self explanatory, however:

When clicking on "Military" or "City" you get a dialog window with a UL for the different structures. This is currently how I am navigating between structure pages.

The Upgrade button simply calls another dialog with information on the structure, and the confirmation to upgrade (after check to see if they have resources).

The 5 rune like things is a filter. Its a checkbox group, so multiple runes can be selected at a time, and it filters the below 'unit list.'

The 5 runes correspond to the "Attunements" that each structure can have (the 3 white circles in the upper right of the barracks image).

I will gladly offer more information if you request it. Like I was saying, I am finding it hard to add this information in an appealing way. Perhaps I am getting stuck on this too early, but I feel that having a good foundation for layout helps in setting up the backend for more effortless expansion.

Again, I am using jquery mobile, so bonus points to layouts that support features from 1.3.0rc1. I am familiar with jquery and javascript in general, but its an HTML5 project, so I don't want to get much more complicated than that.

Thanks for the help in advance!

share|improve this question
Could you abstract your problem somehow? What is the real problem here? –  kontur Feb 21 '13 at 11:45
@ kontur Well, I don't think its ever a problem to try and stuff everything onto a page. In a worse case scenario, you list it. I'm just looking for a solution that condenses the information thats necessary into a good looking design. Right now...the upgrade button is floating in the middle of no where. Theres barracks info an unit info. They seem sparsely tied to each other...nothing really interacts or flows. I tried layering data, but in a mobile environment, you have much less space. –  Ricky Mason Feb 21 '13 at 13:49
add comment

closed as too localized by kontur, Benny Skogberg, Matt Obee, dhmholley, Mervin Johnsingh Feb 21 '13 at 14:42

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

Browse other questions tagged or ask your own question.