16

I'm working on an application that uses the Windows "modern" design language (née Metro). The app involves a lot of data entry and manipulation. Think of something like you might do with MS Access - master detail, forms, queries/filters, etc. The design guideline docs from Microsoft on Modern Apps focus on the consumer space. That is, the views don't generally contain a lot of data.

Microsoft has a large library of sample Windows 8 apps, but none that really show a dense UI. By dense UI, I mean something like the following:

screenshot of a screen with a lot of input fields

So, what I am looking for is an example, either from Microsoft or elsewhere, of a dense data screen in the Modern style. Or guidelines around how to write such an app.

Improve this question
3
  • 2
    Good Question! I think you need to browse PC Settings of any Windows 8 PC and see what they did there. It's not immediate obvious, but they hide a lot of Windows 7 settings, focusing on most used settings. Take the workflow of changing images as an example, and work your way from there.
    – Benny Skogberg
    Dec 7, 2013 at 21:12
  • 2
    @BennySkogberg That's the best answer I've seen to this question. It's a shame it's languishing as a comment :(
    – Racheet
    Dec 11, 2013 at 11:34
  • I think this would actually be against the core design principles for Windows User Experience, which is to make things simple, easy and presented clearly for the user. I would consider redesigning the content and layout to simplify things instead.
    – Michael Lai ♦
    Jun 16, 2014 at 6:10

5 Answers 5

Reset to default
4

@MichaelZuschlag hits the nail on the head: there are no matching guidelines for metro, and at least I've never seen any (platform-wide) for any platform.

At first look, the intent of the UI formerly known as Metro is at odds dense UI. A "dense" screen would have to be broken up into detail pages (see Navigation guidelines).

Your first screen would have to be broken down (roughly) into the following pages:

  • a "quick search" for customers
  • an "advanced search" with filter options
  • a "Contact Details" page with the main details, and "preferences" and "Personal" stowed away under expandable sections
  • an address list
  • a Trip list
  • address details
  • Trip details

(plus pages for adding / editing these)

Fundamentally, the pages would be task-oriented (find someone, add a trip for them, fix an address), whereas "Dense" is data centric.

Making this transition in the implementation would be quite challenging - and getting users accustomed to "dense" interfaces to make the transition wouldn't be easier. It stands to reason whether FKAMetro would even be a good choice.

However, you can integrate aspects of Metro, looking modern, reaping the familiarity of users with some FKAMetro concepts, and the "progress in UX" that stands behind it.

Things you can carry over, with some effort:

Less data per page. In your first example, e.g. moving the (editing of) trip lists and addresses to a separate page.
Rationale: Users have learnt - mainly through the internet - to use the "back" button. Breadcrumbs are quite common and can provide both context and extended navigation. Flyouts can especially can be used to integrate secondary navigation, editing and confirmation

Format for presentation, edit on demand. Format your data to be read, and provide editing - ideally in-place - on demand; e.g. on mouse over, selection or similar.
You do need a consistent indicator what is editable (a faint icon, background color, etc.) However, get rid of the traditional "boxes" around all but the active field, as they are visually dominating over the actual context.
Rationale: this is my understanding of the "simplicity" of modern UI: Tone down window decoration and the "technical aspects" of the app so that content takes the spotlight.

Task-oriented Navigation. Bring the most common user activities to the front, and let the less common operations step back. "Dense" often has little if any explicit commands, but moving data to separate pages should free up your UI sufficiently. Check Command Patterns if you find something that fits.

Looks and details. Use Style Elements and Layout that is FKAMetro-inspired.

In general, I see a significant effort for potentially little return in terms of usability, error rate, etc. It would be interesting to take a "dense" app, transform it to become metro-ish, and see how users respond. Users might hate you for it, or, probably worst, "meh" at it.

"Dense" applications are often little more than database-bound form elements and data grids bound to tables or views; the frontend development for a "beautiful" application is likely higher. Developing similar generic mechanisms and controls is likely a separate challenge.

Casual vs. Business. Somewhat related to the "is it worth it?" question: I've argued here that Casual and Business use have some conflict - very roughly: casual relies on "not too wrong, at worst you can undo", whereas business often requires to take responsibility for changes. The respective styles are sometimes at odds.

sorry for all the letters :)

Improve this answer
2
  • 1
    Thanks for the great response. I agree that these apps are usually forms over a database, with some extra functionality where needed. I am thinking about an approach where there is a Metro UI where I know the tasks and workflow, then having an "ugly" area that is the rest of the dense UI. I'll see how it turns out.
    – Erick T
    Dec 11, 2013 at 18:53
  • It would be nice if you could post the results of your exploration - maybe in a blog post and link it here. Contemporary UX for complex data entry is largely neglected, a single example can be helpful for others.
    – peterchen
    Dec 17, 2013 at 16:46
8

Hear those crickets? That’s the sound of no guidelines for dense data presentations for any design language. There has been a need for such guidelines since GUIs first arrived, but there aren’t any I know of.

For what it’s worth, I’ve been developing my own approach for dense alpha-numeric GUI presentations over the years, which I described at Coded, Compacted, Contrasting Controls. Coincidentally, it happens to be aesthetically compatible with Metro (e.g., it’s flat). Your example above would look like: enter image description here

I’ve only deployed it on a couple apps with small user populations, so I don’t consider it fully tested. Take it as inspiration, if you wish.

In general, I’d argue that dense data presentation calls for a Tufte-esque minimalist style. You’ve so much data there is simply no room for any space-consuming or distracting use of color, line, shade, gradients, 3-D, or animation. You need to minimize the “ink” while still graphically conveying the essential information (e.g., type of control, enabling, editability). Make it internally consistent and as consistent as you can with the existing styles, then test it on users to be sure that it at least doesn’t confuse them.

Improve this answer
5
  • 1
    I agree about going Tufte-esque, but note that this sample is rather anti-Tufte in that there is a lot of 'chart junk' still floating around. It might be necessary but I think you could streamline it even more by removing the zebra striping and reducing the outlines a bit more.
    – DA01
    Dec 10, 2013 at 16:21
  • @DA01: Zebra striping has been shown to reduce errors (see alistapart.com/article/zebrastripingmoredataforthecase), so it isn't junk... generally. I'll concede in this example it probably doesn't do much --there're only four rows at most. As explained in the "Coded" article, outlines indicate active (clickable) controls and the exact shape and shade provides additional information. I don't know how to reduce it more. Ideas? What I emphatically don't want is the Metro tendency to make every control look indistinguishable. That has no place in a heavy-use complex application.
    – Michael Zuschlag
    Dec 10, 2013 at 22:14
  • 1
    The Tufte angle is to reduce unecessary elements. Does the zebra striping help here? Maybe. But there's likely other solutions that would be less visually busy such as right-aligning the labels, or in the bottom table, relying on the row borders that are already there.
    – DA01
    Dec 10, 2013 at 23:08
  • @DA01: As it explains in the A List Apart Link, row borders performed worse that zebra striping. Those aren't row borders in the illustration -they're text controls. Right-aligned and top-positioned labels disrupt the ability to scan quickly for a field, although there are certainly conditions/tasks that call for top-positioned. Assume this isn't one of them.
    – Michael Zuschlag
    Dec 10, 2013 at 23:30
  • I like the idea of a less colorful/distracting UI, but it definitely doesn't look "metro"
    – Erick T
    Dec 11, 2013 at 18:50
2

My answer is to first of all avoid have such data heavy applications. Can your functions be separated into a flow? Or do all these interactive elements need to be presented at the same time? Can you separate the administrative UI and the presentative UI? I would focus my work on trying to reduce the number of items per page, since there's only so much you can do with that amount of information and interaction

Having said that, the guru for designing forms, is Luke Wroblewski. Check out this presentation, following those guidelines would improve greatly on what you have:

http://static.lukew.com/webforms_lukew.pdf

Improve this answer
1
  • 1
    The problem with reducing the number of fields/data per page is that you need to make assumptions on the workflow. If you know exactly what the workflow will be, you could make task pages.
    – Erick T
    Dec 11, 2013 at 18:48
2

I think you need to browse PC Settings of any Windows 8 PC and see what they did there. It's not immediate obvious, but they hide a lot of Windows 7 settings, focusing on most used settings. Take the workflow of changing images as an example, and work your way from there.

enter image description here

These navigation elements, is a starting point!

Improve this answer
2
  • @Racheet I followed your comment on the question and converted it to an answer. Thanks!
    – Benny Skogberg
    Dec 11, 2013 at 12:08
  • 1
    I think the most useful bit of insight for me was that the artist-formally-known-as-metro was built around workflows as its primary metaphor for dealing with data.
    – Racheet
    Dec 11, 2013 at 12:28
0

Take a look at Azure. For instance Azure Boards

Improve this answer

Your Answer

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

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