Refactoring User Interfaces

02 Sep 2019

Was sent a link to a YouTube video at work about Refactoring User Interfaces by Steve Shoger at CSS day 2019. This entry documents notes and thoughts while watching it.

My tasks after watching this video are:

I answer these questions at the conclusion of this post.

Practical Solutions to Common UI Design Problems

Steve Shoger says that he is the guy that teaches you tactics instead of talent for designing user interfaces.

Flight-booking application

The example up on screen is of a flight booking aapplication design. It includes text, radio options for return trips, one-way or multi-city, a couple input fields for city and destination, drop down options for dates and number of passengers, checkboxes for adding a hotel or a car and a search button.

My design improvement suggestions before watching

I paused the video at this point to share my own thoughts on this design, before Steve shares his tips for refactoring it.

You have to read the text in all of the input fields to understand what they are for. The text is all black and this clashes with the background image that spans the page. There is no wow feeling when viewing this page.

To improve this design, I would seperate the background image from the text so that it compliments the form, whilst at the same time making the form stand out as important to focus on it it's own right.

I like that the title and tagline indicates a visual hierarchy (the title is bigger than the tagline). I'd emphasise this by making the title bold and use a darker brand color for it, whilst using a lighter shade of the same brand color for the tagline. Brand colors are useful for making a design instantly recognasable as belonging to a company.

I would also group the origin and destination input fields below each other. At the moment, when reading from the top to the bottom of the page we start on the origin city input, then to the departure/return dates, then to the destination and then to the number of travellers. There would be less jumping around if they were below each other.

I might add icons to make it a little clearer what each of the input fields are for.

I'd use custom radio buttons and check boxes that match brand colors so that there is more personality - it's not just a generic box solution. Custom radios and boxes are easy to rebrand and reuse too. Just a bit of thoughtful effort doing it the first time.

The whole thing right now feels unoriginal, not bad but not the best experience it could be either.

Design improvement suggestions from talk

Steve scrolled down and showed that the site includes cards, forms, a sign up form etc. The site is built using Bootstrap defaults.

He says there are a lot of quick wins available that will help make this site more polished and to take it to the next level.

Background and color theory

Inputs and whitespace

Drop Shadow and light Advice

Styling tables

Styling tables can be tricky because it's styling a lot of data in a condensed space.

Links

Instead of styling the link with an underline, Steve removed the underline, changed the link color to a brand color and added a chevron icon to the right of the link to make it look more clickable.

Cards (vacation package deals)

Newsletter Signup

Footer

Final tips

Summarising refactoring UI in relation to our system at work

This was an amazing talk. I love that Steve started with a design and then made a series of small changes that had a massive impact on the overall design by the end.

At work, we have a mobile app and a web portal. The mobile app uses web-based languages, and is converted into a mobile app using Cordova. So all CSS-based tips are applicable.

What have we already managed to do successfully?

Is there something that we need to do urgently?

What things would be good for the next pass through the system?