Best way to identify different element states?

Question

I maintain a reporting app and currently we're trying to come up with a new way to organize our settings page.

We display our settings in a table, this is used for displaying the setting/values only.

e.g.

Setting    Value
Name       Bob
Age        45
Pets       5
Fb Friends 80
Mood       Happy
Health     Fit

Behind the scenes, our Web App knows which settings are qualitative and which settings are quantitative, however, how do I convey that to the user? Grouping the qualitative/quantitative information together is not an option.

Answer 1

It sounds like you want to separate quantitative and qualitative information? Try two tabs, one for qualitative and one for quantitative. Or you could separate the information into regions using alignment grids, borders and frames, area fills, white space, and gestalt integration. Besides color which you mentioned earlier, your other options for marking something are texture and shape.

Maybe have one tab labeled 'Basic Info' and another labeled 'About Tyler.' Go ahead and use the person's name instead of Tyler.

Let me know if I'm understanding your question and the constraints.

Answer 2

Not sure what the reasoning is behind the requirement of visually identifying the quantitative entries against the qualitative entries. But here's 3 different ways to do it.

You can highlight the rows that are quantitative (with gentle colors just enough to stand out but not off-putting)

Or you can display an icon (what icon you pick depends on why you want the quantitative ones to be called out from the rest. In this example below, I just used a hash sign).

Or you can use a combination of both the ideas above as shown below.

Hope that helps.