While working at Epic Systems I had the opportunity to review a lot of new user interfaces we developed. Sometimes I had the opportunity to go in and improve these. This post outlines one such instance, the different approaches I looked at, and an overview on how I learned about CSS transitions.
The starting-point was a card view, where the different cards could be selected. Before I worked on this component, selection was a simple blue border on the selected card. I’ve recreated what this looked like in the JSFiddle below with the selection shifting between the cards.
While this got the point across, the border jumping between the cards was sudden and caused pixel-jumps in the surrounding cards, and I thought we could do better.
I easiest fix was to make the selection border the same size as the non-selection border, to avoid any jumps in pixels.
Beyond this fix, I took this opportunity to see how I could make this prettier. I started with some indentation. In the class that defined the css changes for the selected card, I added a margin-left value to indent the selected card.
On the class that applied to all cards I added the following line:
transition: margin-left 0.2s linear;This tells the CSS that whenever margin-left changes, the change should occur over 0.2 seconds. I considered using a CSS animation, but transitions have the benefit of automatically applying the change-over-time whenever a property changes, as well as handling the change-over-time when my selection is removed.
The transition helped differentiate the selected card in a smooth way, but the border was still jumping from card to card. I decided to test out a custom border that appeared over time.
If I simply made the border appear, then it would have the earlier issue of pixels jumping around, so I decided to make a custom border animation using pseudo-elements.
I did this by creating before and after pseudo elements on the card that were hidden when the card was not selected, and when the card was selected these would appear by increasing the size over a short period of time. I also positioned these elements absolutely to they didn’t affect the card layout.
The key to making this work was to have the pseudo-elements on the non-selected class for the card, and adding the selection class simply adjusted the elements in the way I wanted. This allowed the transition to pick up the changes both when the selection was applied and removed.
I made the before pseudo-element act as the left-border, going from 0% height to 100% height over the given transition time. I made the after pseudo-element act as the bottom-border, going from 0% width to 100% width over the given transition time, delayed until after the left-border was fully expanded.
I brought this concept to the user experience expert I was work with, and while they liked the movement we decided to try a different solution that was closer to general UX guidelines at the company. This meant we would remove the indentation, and change the border to reflect what users expect from cards in the software.
This solution is what we ended on in order to keep the card styled similar to other cards in the system.
