Jump to content

Archived

This topic is now archived and is closed to further replies.

Talon

Seeking suggestions: iPad UI for SPD tracker

Recommended Posts

I'm working on a SPD chart app for iOS to help run Hero System combats. I have the functionality more or less done, but I'm at a standstill deciding how to layout the app for iPad. (Ironic that more screen space causes a problem, but there it is.)

 

iPhone screenshots are below; the main screen showing the upcoming phases, and the menu where you can select actions (you can also use the icons at the top). The app is intended to support all options (holding, stunning, aborting, haymakers, SPD/DEX changes, etc.) along with undo in case you make a mistake.

 

This all works great on the iPhone but I'm not sure how best to display it on the iPad. There's a pane showing combatants, there could be a pane showing characters with statuses (held, stunned, etc.), but how best to display the menu screen is a good question. Hopefully there will be some good suggestions, or maybe just writing this will inspire me. :)

 

Screen%2001_zps1rtvpyfh.png

 

Screen%2002_zpsmjr3ltx3.png

 

Screen%2003_zpsaxhoyjwq.png

 

 

Share this post


Link to post
Share on other sites

heroct_suggest.png

 

This is my rough idea for an iPad layout.

 

The menu for possible actions would always be on the screen.  As a result, you could lose the ">" on the iPad version.

 

In the bottom left, you would have a character stat block (probably all characteristics plus a few lines of combat-relevant notes.  I would add a button on the iPhone version on each character name line that lets you display this info.

 

In the bottom right, you would have the status pane.  There should be a button in the combat tracking screen on the iPad that brings up this status pane. 

 

Those are just my quick thoughts. 

 

Because this only tracks statuses and requires only a couple of taps per character action, this actually looks like something that I might use.  My problem with many Hero combat tools is that they try to do too much and as a result would bog down my running of a combat. 

 

Note that the vertical line should end before the bottom menu.

Share this post


Link to post
Share on other sites

Microsoft has developed something called the Universal Windows Platform (UWP) Framework. Basically a further development of WPF/XAML It aims to let the same App run on many diffrent devices, with radically different screen sizes and capabilities - as long as they run Windows 8 or 10.

The basic problem (what to do with the extra space) applies to those apps too.

 

Just speaking about general GUI design:

There should be a single center piece, that fills as much space as availible. All other pieces (like menu strips) are designated to be minimal range on one axis, filling on the other.

You get a menu strip or menu bar only as high as it absolutely needs to be (based on content), but as wide as the screen.

Or a status strip that might not even be shown if no messages are to be shown.

 

For a Mobile Design App, you might want to limit yourself to one bar at the top and avoid multiple click menu's (they do not work that well without mouse). Instead consider having "pages" that the user can just switch between via a wipe motion (is that the right term in english?)

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×