-1

I have website on which I have a group of approx. 20 pieces of data I want to show the status for in a kebab/hamburger type of menu:

EX:

  • Datasource #1 Status
  • Datasource #2 Status
  • Datasource #3 Status
  • ...
  • Datasource #N Status

Currently, I am using some "hand made" indicator lights (see image below) and the Bootstrap tooltips to show the name of each piece of information, but I don't feel these look very good.

These are not the focus of the site, they are just extra bits of information the uses will be interested in.

What suggestions do you have for a better looking system for status indicators? I am open to any suggestions to fix my current approach or a completely new approach.

enter image description here

EDIT: As a follow-up, I wanted to say that I went with Youik's suggestion and it looks great. I honestly never thought about using a simple "table", I though I had to be fancy and use eye-catching images. In the end, the more simple solution I went with is much better. Granted, I also added a bit of color, but I kept Yorik's basic premise, and it was definitely the right way to go.

Improve this question
5
  • What do these statuses represent? How does this list fit into the context of the rest of your application? What does the rest of your application look like?
    – Zach Saucier
    Sep 21, 2021 at 19:01
  • @ZachSaucier Like I said, they are indicators of the status of a data source. The rest of the application is fine, I just need assistance with these. It's a top-menu icon that a user clicks on and the indicators drop down using Bootstraps dropdown menu.
    – Brian
    Sep 21, 2021 at 19:12
  • 2
    Design is all about context. It's impossible for us to be of much help as is.
    – Zach Saucier
    Sep 21, 2021 at 19:39
  • When you say "better looking", that's a subjective opinion. It's really hard to answer questions like this because what one person thinks is "better" might not be what another person thinks is better.
    – Billy Kerr
    Sep 22, 2021 at 11:35
  • @BillyKerr It is, and I apologize; I just wasn't sure how to better phrase it. I wanted it to look "modern", "professional", and accurately display the data. I think I may go with what Yorik suggested. Thank you.
    – Brian
    Sep 22, 2021 at 13:57

1 Answer 1

Reset to default
4

What you have now is generally called skeuomorphic: it mimics a real-world interface element. This often is a mistake: as it simply depicts something that would normally be tactile or have other reasons for design and behavior that simply don't exist or are cumbersome in a digital interface. In addition, they rarely age well. In this particular example: LED light as a place holder. In the real world, the bulb needs to be there. In a digital interface, it can magically materialize at need. We really only need a light to command attention.

Green, red, and yellow are problematic colors: there will be users who cannot see them. Consider an clear icon in combination with a color. i.e. O X ! – etc. Think of the color as an additional source of information rather than the primary method of conveying the information.

I am guessing that the most important information to convey is the state of "not green." In long running lists (aka spreadsheets) for projects, it can be difficult to identify actions because they are camouflaged by so much other information. For this reason, consider not displaying OK status in the column. This allows a user to get a first-approximation gestalt of actionable information.

Compare:

O   Datasource #1 - OK
X   Datasource #1 - Offline
O   Datasource #1 - OK
O   Datasource #1 - OK
O   Datasource #1 - OK
X   Datasource #1 - Offline
O   Datasource #1 - OK
X   Datasource #1 - Offline
O   Datasource #1 - OK
—   Datasource #1 - Error
O   Datasource #1 - OK
O   Datasource #1 - OK

And:

    Datasource #1 - OK
X   Datasource #1 - Offline
    Datasource #1 - OK
    Datasource #1 - OK
    Datasource #1 - OK
X   Datasource #1 - Offline
    Datasource #1 - OK
X   Datasource #1 - Offline
    Datasource #1 - OK
—   Datasource #1 - Error
    Datasource #1 - OK
    Datasource #1 - OK
Improve this answer
3
  • Those are excellent points ... thank you! I will take a look at what I have and see if I can implement your design.
    – Brian
    Sep 21, 2021 at 19:54
  • +1 for thie reference to color blindness. Colored status indicators are a big problem for me and many others in the world.
    – fred_dot_u
    Sep 21, 2021 at 21:22
  • Also any prudent real world digital list would allow you to sort by priority. Or horror only show errors.
    – joojaa
    Sep 22, 2021 at 5:36

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.