6 aprilie 2012 12:20
I am designing a very data rich app from an original business system. In the original system the user can choose between 8 different tabs and in each tab the user must fill in information / make choices from comboboxes. There are about 30 choices / inputs for each page.
Its hard to find inspiration from other apps, most apps which is available only present the user with content, giving only a few input-options.
Right now i have a menu placed to the left (with the tab options) and all my fields placed to the right (only one per line). The right part is scrollable in the vertical direction. While great for usability (the user can easily acces each field and the information is clearly visible), im not sure if this fits with the Metro-style.
I have tried using a gridview to present the input in a horizontal-scrollable manner but this overwhelms the user with information at a given time.
How would you go about designing this kind of app in a Metro-style manner without sacrificing the user experience? Can anyone point me to some inspirational apps with this kind of input options?
All ideas are appreciated as im kind of stuck (im also more of a technical person than design person).
6 aprilie 2012 14:47
What does each "tab" represent? How are the tabs related? Are they different aspects of the same entity, or steps in a business progress, or...?
Rebecca M. Riordan
6 aprilie 2012 15:00The tabs represent different parts of the same entity, all of which the user will be able to modify!
6 aprilie 2012 15:40
I'm not a Metro UI expert, but I do know a lot about data UI (well, I wrote a book about it that was nominated for a Jolt award and I think that qualifies as "know a lot" but I'm prepared to be wrong about that, lol). FWIW...
I think the basic framework you've set up is fine, particularly if your users are happy with it. (In my world, 'my users are happy with it' trumps design pronouncements hands down.) I'd replace the tabs with radio buttons so your users can easily keep track of their context, and I'd probably style them more like regular buttons to make the "you are here" signpost more obvious.
You could actually dummy up images so that the radio buttons looked like tabs, but I probably wouldn't bother unless my users were getting lost. You could also do something creative with background colors to provide some extra context clues. Just make sure that the selected item is obvious at a glance, but (of course) don't sacrifice readability--I'd keep it fairly subtle, using maybe tints and shades of the same basic color, but that depends on the overall aesthetics of the app.
You might be able to adapt the existing page navigation to swap your tab contents in and out, but given the caching issues, which would be an issue if you're working with multiple instances of the entity, I'd probably use UserControls inside a ScrollViewer. Just swap the content in the button click. Oh. That assumes you're using XAML. I'm sure you can do the same thing in HTML, but I'm a XAML girl, so I can't speak to which controls to use in that environment.
I'd guess your users will be using a keyboard if it's a data intensive app, but assuming you want to support touch, be careful about spacing your elements. There are guidelines--search for 'guidelines for touch targeting'; IE is misbehaving on me this morning, so I can't copy the URL for you. Sorry.
Does that help, or were you looking for something more (or less) specific?
Rebecca M. Riordan
9 aprilie 2012 18:47Moderator
Does the design require to user to visit every tab or is it optional?
If it is optional what about a series of text items across the top that is scrollable (if required) and then surface the necessary inputs as they select the items? This would keep the UI faily clean and would adapt nicely to portrait, snapped, full and landscape orientations as well.
settings1 settings2 settings3...
Content block here
Jeff Sanders (MSFT)