device management unit interaction page redesign

PORTAL SITE PAGE RE-DESIGN

Trying to make some UI easier to process.

What is current?

Let’s take a look at the current user interface and understand how we have positioned our information for users to discern the state of information.

Site Tactical Bar

This is the area that is seen above the alarm events.

The original idea here was to provide a short concise tactical bar that has important information with minimum overload, for a deeper dive into technical data the additional information pop-over menu was created.

The tactical bar worked as intended until the additional information area became overloaded with information. With said overload of information we start to loose the quick and concise discerning of info that I was going for.

What I want here, is that the user should be able to look at the page and discern the state of things within seconds if not milliseconds of opening the page.

What I’ve been trying to fix this

I have been trying to experiment with some card & chip style designs that are modular and make absorbing information as quick as possible.

What I have found is that I seem to be able to absorb what is in front of me by attaching naming conventions to header and then sub information in the form of chips.

Attempting to create a hierarchy of information through the cards

The heading text being the most important point of information.

Then followed by the heading of the chip.

Which is supported by the icon.
Which lastly is brought to an understanding with a subtext description.

Hoping the learnt behaviour here becomes the consumption of icons and their relation to data and the subtext information becomes less needed as time goes on.
The only chip that seems to break this ^ pattern is the SMS MNO CHIP as this chip’s subtext provides actual important information on wether the current MNO is in fallback or default mode. ( not sure how I feel about this at this point but I am aware of pattern breaking. )
Colours are purely random at this point as I am focusing on the rate of consumption of information.

Current Figma prototype

Unsure why I have given the maps location so much visual importance but what it is doing for me is allowing me to have more cards on the right.

The cog wheels are also irritating me, I think they are potentially too prominent and distract.

What I might suggest to myself here is to put them inside of a container circle and slightly lighten them until when they are hovered.

I am also frustrated by the spacing, I have a pattern I am following of 15px spacing elements but I then end up with some of the cards having a large right hand white space if the chips don’t fill up the card exactly correct. Not sure if this is just me or a valid visual element to be frustrated at.

Also I am concerned for the future proof of this design, we know there will be customer requests that eventually require new cards.

So there needs to be some way that this section can ‘grow’

Some concerns

What I am concerned about here is the editing of these elements.

If the cog wheel opens up a form structure that allows all the visible fields to be edited and submitted. I am not sure how I would handle the information being sent to different mutation apis, just yet.

The other thing I was thinking about is that the cog wheel could open up a pop-over menu that has sub headings.

This way we defeat the api mutation scarries but we then potentially introduce more clicks to the user. Unsure who comes first in this? Protect my sanity? or protect the users fingers from multiple clicks.

The other idea here was that the chips themselves if they are editable show a cursor-pointer if they are hovered otherwise if they are not editable they simple remain on the default pointer.

Unsure if this is enough information?

Do I need to hold the user’s hand through every interaction or is there room for assumption of intelligent behaviour.

Because this could be really nice!

I could have a nice and clean pop-up per chip that is simple and sends one easy api request.
This also allows me to get rid of the ugly cog wheels.
We do have hover information chips ready as a design pattern so that could be used to do the hand holding?

Revisions based on concerns

Cog wheel icons being dulled until hover - also they are contained in a circle that is the same height as the left hand heading a subtext.

Also moved some of the cards around in a attempt to make the system more modular

included a little preview of payments as this is not currently in scope but I imagine it will be included at some point.

What I have moved is the arm profile into its own card and away from the ‘site information’ card.

why? well it seems a pattern has formed where the left hand side of the column split is dull information, whereas the right hand side column is important information.

It also seems easier to process this as I get a brief overview of my context from the top left then my eyes move right and as they move I see the most important information as I scan the page.

Something is still bugging me about the cog wheels - they still seems to visually powerful.

Where we are now

There have been some changes to the UI/UX as per requests from client.

The main issue here that was brought up was the UX of users not being able to find the alarm events hidden below the fold.

The solution here is to make the layout slightly more modular by putting the two main components side by side.

what does this do for us?

Well it gives the us the creator the ability to add more components into the scrollable device information area as the requests here grow.

For now maps have been removed to save space and at the request that this information may not be valid at this current state.

Having the two main components next to each other reduces the cognitive load when trying to find specific information.

We now follow the LTR methodology of reading. Where important information is scanned from LTR & TTB.

This will need more user testing and feedback to fully validate these decisions.

Validating design decisions

I have come back to this read this piece I wrote almost a year later and just want to validate my own decisions here.

As we can see in Production almost a year later not much has changed other than some particular OCD moments from me fixating on spacing patterns and border radius/colours etc etc.