2

I'm designing an app that handles the majority of the math and bookkeeping for a tabletop RPG that my friends are designing. The "character sheet" is fairly extensive and we REALLY wanted to avoid scrolling, so to divide up the information I have two sets of tabs - horizontal for the broader categories and vertical for pages within it. Here's a couple examples:

enter image description here

enter image description here

There are a few issues with the designs that I'm working on but right now I'm focused on the tab layout. Vertical space is precious and I think it would be confusing to put two sets of tabs on top of each other anyways, so I came up with this. To interact, side swipes will change the horizontal tab, while vertical scrolling is for lists so the vertical tabs need to be touched.

I'm not entirely satisfied with it, and many people say tab nesting is bad design. I need some input!!

  • I dunno, that makes sense to me. Everything's there, the two tab sets are distinct from each other, it uses the screen space efficiently, it meets your goal of no-scrolling while keeping all functions accessible, and a user would probably learn where everything is pretty quickly even if it isn't 110% obvious right off the bat (I find users of hyper-specialized applications to be a little more forgiving to an initial learning curve). But, maybe that's just me. How do your friends (your target users) feel about it? Why aren't you satisfied with it, specifically? – Jason C Sep 12 '16 at 0:45
  • I'm running into a problem with consistency. The character sheet is the only place with vertical tabs, and how they're styled currently interferes with certain things. The "Item Shop" - where all of the in-game items are listed - goes from screen edge to screen edge. These designs can't. And the whole thing made me start questioning the logic of the tabs in the first place. It's good to know that it seems straightforward enough. I actually haven't shown my designs to too many people. I should work on that. My friends like how it's coming along so far. – Alex C Sep 12 '16 at 19:55
2

This actually seems like a pretty intuitive setup for something with as much data as an RPG needs to track... especially if you desire to remove scrolling, this seems to accomplish it. RPG players get used to complex screens full of informations and options, and many are dedicated enough that they are frequent and motivated users, so they will not balk at learning the tool if it benefits them. However, your visual design may go a long way towards making the overall controls more intuitive still.

For example, making the tabs at the top a bit more "connected" to the main panel (perhaps like actual tabs, perhaps in some other way), or at least more highlighted, will probably make the associations clearer... it took me a second to realize that the top level of "tabs" you were referring to was the list of words underneath the "Main Menu," "Combat," "Player Name..." and such buttons above them.

Also make sure the actual action buttons on your page look clearly like buttons and are distinct from the "tabs."

And where does that "back arrow" in the upper left take the user? I'd expect to the main menu, but there's a Main Menu button right next to it... a little confusing.

Finally, the way you highlight the secondary tabs will be important as well; currently the secondary tab "highlight" state is fairly subtle; I know this is just a wireframe, but it's something to keep in mind.

It would help to know a lot more about your hierarchy of information and your site map to understand how best to design this to emphasize the right things at the right time, but those are a few ideas.

  • The original idea for the horizontal tabs was to center the current one... but I'm probly going to switch to a more conventional style, with 5 equal spaces and the current one underlined. Back button leads back a page. There are many sections, so the back button almost never leads back to the main menu. I'm trying to decide whether the back arrow should exist, since androids have one built in. I also have a little info about where I was coming from in the comments. I'll up the highlight because I agree with that, and I do have a page flow but it's not complete and might be hard to read. – Alex C Sep 12 '16 at 19:58
  • That would be a more traditional style of "main navigation," which I think would be beneficial to your format here (assuming you are talking about those "Main Menu," "Combat," "Player Name..." buttons at the top). Then you could treat the "Character," "Inventory," "Combat," "Summary" etc. links as actual tabs, visually distinct. – Mattynabib Sep 12 '16 at 20:05
  • The top nav acts more as a section to quickly navigate to high-traffic pages than to be the main navigation. But I will keep that general idea in mind. Thank you for your help – Alex C Sep 12 '16 at 21:34

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.