I am a developer, not a designer, but I have strong opinions on UI. I helped thousands of new computer users while working at a public library. I got a very informal introduction to the world of UI and UX, accessibility and expected behaviors. It was these interactions that led me to becoming a software engineer. I work with designers who have their own experiences and educations on UI. Sometimes I don’t love the designs, and while I often make their designs into a reality, I thought it would be fun to explore how I would have designed things instead.
Note: All of the UI images here were created with Penpot. The these examples are simplified, and often quite clunky and far from pixel perfect, but hopefully they get the gist across.
The modal
A designer I work with designs a lot of modals. I know people have a lot of opinions about modals, but that is a discussion for another post.
I recently worked on a new timeline feature for a SASS application. A user may have multiple sites that they manage and the timeline will show the user events in chronological order. Each timeline event has a "view more" button that opens a modal.
This is the original design. It features a heading with the event and a list of each site that attempted the event. There are both indeterminate and static progress bars, status badges (they're not buttons), a list of errors and a vertical scroll when there is more than a few sites.
I immediately had thoughts on this modal. This is a massive modal with a lot of elements to interpret. The combination of movement, colors and the vertical scroll were visually overwhelming to me. A modal seemed like too small of a surface to display a potentially lengthy list of sites.
My modal idea
Rather than providing the user with ALL of the details, I would opt to present them an overview and then link them to a page for more detail.
I would expect the "view site details" button to take me to a full page. In fact, the modal could be eliminated all together and the original user interaction could take them to this page directly.
There are a few things that I changed between the original modal list and this new page.
- I am only displaying a progress bar when the event is occurring. It is redundant to have both a complete progress bar and a status badge.
- Rather than display all of the errors, I moved them behind a toggle button. When the button is clicked, the error details expand.
- I added a line between each site to easily distinguish between sites.
Some other ideas I have for this page include adding a button to view the site (in case an update broke something) or to go to the main admin screen. I couldn't decide a good place for those buttons, so I left them out of the example.
Thoughts?
So, what do y'all think? Fellow devs, do you ever feel like a professional design isn't quite hitting the spot? Designers, do you wish the devs would stay in their lane?
Until recently, I created UI components and screens that matched the design without question. Lately, though, the handoff between design and dev has been much more of a discussion. This has worked well for both design and dev. We can see different perspectives from our own and discover challenges we unknowingly create for each other. We're all working towards the same goal so it makes sense to collaborate a little more along the way.
Top comments (0)