Process Doc: Fixing the UI Design of a One-Line Diagram

“I don’t like this, but I can’t tell why.”

I was recently tasked with a redesign for an electrical equipment management application. Part of the UI involves a one-line diagram:

The start. I blurred some potentially sensitive proprietary details.

Electricians use one-line diagrams to understand the electrical hierarchy and diagnose problems, like floor plans for construction workers.

Like most designers, I have zero background in electrical engineering beyond my high school education. I tried looking up common one-line diagram symbols but was only able to identify circuit breakers.

My designer brain has no idea what these components mean. But does this prevent me from polishing the design?

Nonetheless, I decided to make assumptions and use common design heuristics to make this initial pass before showing it to the professionals.

1. The most important elements need to catch users’ attention first.

Since this is a monitoring application, I assumed that the engineers would pay attention to (1) what the components are and (2) what statuses they are in. They prioritize identifying the anomaly over understanding the wiring of the entire system.

In this case, the circuit breakers (the components marked with green squares) needed to be more prominent than other components:

The area circled by “1” is more important than “2” and needed to visually stand out.

Perhaps brightening and thickening the line strokes would help?

Adjust the line strokes and colors

I applied drop shadows to all components to help them stand out even more:

Use drop shadows to help components stand out more

2. Do not use color alone to indicate status.

This is not only for accessibility, but the precise meaning of the color “green” in the electricity world can be ambiguous. The green color can mean “everything is connected and running, and there is a dangerous current going through the wire”; yet it can also mean “everything is safe and disconnected”. If one uses only “green”, which way does it go?

Depending on the context, green and red might carry different meanings.

I assumed that for the monitoring staff, green means the system is up and running, as shown by the left situation in the picture above; for the ground crew who’s working on-site, green indicates that the system is off and safe to approach, as shown by the right situation in the picture above. Since I was designing for the monitoring staff, I should stick to green. But we need more than just colors.

I looked up that breaker symbol online to see if there are any industry standards to depict a closed/open circuit breaker but sadly to no avail. But I did notice in the app an existing symbol for closed/open switch instead:

I saw these open/closed switch symbols somewhere else in the application; perhaps I could get some inspiration from them?

Iterate on different “circuit breaker closed” symbols. I wouldn’t know which one works better for the user without a proper user testing

It might also be good to supplement with the reason for why the circuit breaker tripped, as long as the text did not crowd the diagram:

Add a warning text on the bottom

Now let’s put these designs together to ensure they fit nicely in the diagram:

So far so good. Can we do even better?

3. Target size must be sufficiently large.

This diagram is, in fact, interactive. Users can click on a circuit breaker symbol to view more details, such as device health and power factors. Yet its current implementation of the hit target was limited to the green box on the circuit breaker symbol.

I fixed it by adding a hover effect with a larger target area.

Add a hover effect with a larger target area

4. Zooming in / out needs to be more affordable.

I pinch-zoomed by accident and learned for the first time that the whole diagram could be zoomed in. Yet there was no indication on the page that this user interaction was possible.

How do I know that I can zoom in on Google Maps or Miro board? Well, not only because I have to zoom in to see the fine details, but also because they have these +/- buttons anchored on the bottom corner.

I moved the full-screen button to the bottom right corner of the screen and added zoom in/out buttons, along with a thumbnail view to guide users when they are zoomed in:

Add a thumbnail view with zoom action buttons

Actually, the thumbnail was kinda annoying 🤪 Let’s add a show/hide button for it, with an active state:

Add a thumbnail show/hide button.

Don’t forget to remind the front-end developer about these small details that tend to get overlooked:

“Dear engineers implementing this:
Set mouse cursor to ‘grab’ to remind users this diagram is draggable”

5. And, we just want to look cool.

This is the only design decision made based solely on aesthetic preference in this entire article.

Who doesn’t want to look cool and professional when they are working? While one-line diagrams are not accurate presentations of the physical locations of their components, it does look cool to give them a “blueprint” finishing touch.

Add a grid pattern as the background.

We are finished!

I felt comfortable enough to user-test this design iteration.

In fact, documenting the design process is an excellent way to reflect on design rationales. I made many alterations to my design while typing this Medium article!

In the future, if the management gives me more time and resources to push the pixels, I will explore other design aspects such as animation and keyboard navigation.