1

We are developing a screen that is a Heads Up Display for a piece of hardware that has different LED configurations depending on device type. We mimic the physical layout of the LEDs. The user can tap an LED button to see what it means when it is lit up.

Sample configurations:

LEDs all in one row LEDs in two rows

We need ideas on how to show this information, as the screen is already pretty data dense.

  1. We considered tooltips, but it obstructs other things on the page and it may contain a lot of information.

enter image description here




  1. We are currently considering an expandable listview, but it pushes all the other fields on the page down, and is just generally ugly. enter image description here

  2. Dialog boxes are evil and we want to stay away from them.

Any suggestions?

UPDATE

This is the direction we are currently leaning. The selected LED changes to indicate it was the one pressed. We show a new scrollable field of text in-between the "rows" of data. And get rid of the title because it was taking up too much room. enter image description here enter image description here

Improve this question
4
  • could you provide a little more of context? what "but" represents? how much available space you have?
    – Alejandro Veltri
    Jul 1, 2015 at 15:08
  • "But" is just short for "button".
    – beyondtheteal
    Jul 1, 2015 at 15:18
  • Here is just my guessing. If those four lights represent some "hardware diagnostic codes", it is possible that each LED light has no individual meaning; instead, the condition of the whole set LED lights must be noted, and then looked up from a table. Example: the explanations for green-green-green-green may be entirely different from green-green-green-amber, even though three of the four LED lights have the same color. This is just a guess - not yet confirmed by OP. But if my guess is correct, it will force the UX to adopt the table-lookup approach, much like a mechanics handbook.
    – rwong
    Jul 2, 2015 at 3:52
  • An example where a combination must be looked up in a tabular form (either programmatically or visually) is the Nest Learning Thermostat wiring guide
    – rwong
    Jul 2, 2015 at 4:02

2 Answers 2

Reset to default
2

I like the accordion-style section, having a scrollable text box appear below a selected LED, pushing content below down the page.

Have you considered a simple detail viewer? It takes up more room, which is not always desirable, but would help with the data density problem.

enter image description here

Improve this answer
1

How about expandable list that just covers the labels of the latter 3 buttons? Chances are, when the user is interacting with the LED portion, they're little bit interested in the other sections. A little transparency effect can give the user the sense that those are still there.

Improve this answer
1
  • Good point. We will take that into account. However, simply using the space covering the labels of the later 3 buttons will not provide enough space for all of the text that needs to be displayed. I have updated my question with another one of our ideas.
    – beyondtheteal
    Jul 1, 2015 at 20:18

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.