User Interface Design
This word brings the same terror and dread that the word ‘dentist’ does to most – UI and I have never been very good friends and being more inclined to UX research, I thought we’d be able to keep our relationship long distance.
However, any UX designer worth their socks should be able to recognise good and bad UI design as well as be able to design a pleasing UI by themselves. Sometimes a graphic designer is an expense a client cannot afford or a schedule lacks the time needed for a visual design phase in the project lifecycle. Thus, a UX designer needs to be able to adapt their role and learn how to tackle the aspects they don’t like, which in my case was UI. And to achieve this, the age old adage of ‘practice makes perfect’ was implemented.
So, how does one practice UI design?
There are many methods one can employ in order to practise UI, such as the Gestalt Principles which are intended to help ‘simplify’ complex designs so that they are better perceived by the eye. Learning how to use white space is another method that can be used to improve visual readability and element relatability of a screen as well as learning about complementary colours to pick a good colour scheme. A good understanding of contrast as well as patterns can also vastly improve a screen’s design. However, the thought of needing to learn all of this to be able to design good UI scared me a little. Luckily, it wasn’t that complex.
As a graduate at Sand Dollar Design, my mentor came up with three simple exercises for me in order to practice and improve my UI skills. Two of these exercises involved a copycat strategy – choose a website and mobile application that I found appealing and recreate them by myself. Easy enough, right? However, the instruction was to not only copy, but improve on any issues I found. This had confused me. How would I find issues when I was not decent at UI myself? The answer came in the form of a short word – spacing.
Spacing, from what I’ve learnt, sets your design apart from the rest. Spacing allows the eyes to accurately and comfortably absorb information on a page. Spacing allows a user’s brain to easily process information on a page as well as store that information as dictated by the principle of memory and cognitive load. Users will feel ‘overwhelmed’ if there is too much information trying to capture their attention on a screen and thus won’t commit any of this information to memory because there is too much and no focal point. Spacing is a major factor in providing an overall pleasing interface. Spacing shows not only hierarchy, but also grouping without the use of underlines or section dividers.
Through my copycat exercises, I was quickly able to identify awkward spaces between sections and components that upon closer inspection, made one of my favourite websites feel disjointed and cramped. The spacing also made me aware of inconsistencies in the design – ‘why is this ‘see more’ button so close to the products here, but so far away in this section? Why does ‘best sellers’ not even have a ‘see more’ button?’. These inconsistencies break one of the core ‘rules’ in interface design – consistency, as stated by Don Norman in his book, ‘The Design of Everyday Things.’ Consistency gives users a sense of familiarity; ‘Oh, I’ve seen this before, this must be a button,’ and other similar thoughts. Consistency is an enabler of usability and usability keeps users engaged.
A lesson in spacing by my mentor also taught me how to identify good apps and helped me determine why I enjoyed the mobile app I’d chosen to copy so much. The spacing made the app pleasant to use and interact with. I’d previously been unable to identify the reason before and probably would’ve told you something about the use of colours and icons, when in actuality, it was the spacing that had appealed to me so much.
My final exercise was to re-create an app I’d previously designed as part of Sand Dollar’s graduate program. This also filled me with dread as the design seemed awkward, but I’d been unable to understand exactly why I found it so awkward. The answer?
Spacing
The screenshots below display my progress. I think it’s plain to see how the screenshot on the right is much friendlier to the eye and incurs much less eye-strain on the user. The layout is also simpler as I’d learnt that I didn’t have to compensate for bad spacing with colour to distract the user from the awkward screen flow. The bottom nav was also improved to more clearly indicate which function is currently shown. I’m grateful for the exercise and also the ability to identify good and bad spacing in other projects as well as being made aware of resources such as Google’s Material Design guidelines, which they provide for free.
Other lessons that I learnt can be seen on the other two screenshots below. Touch-friendliness is sometimes forgotten when one is designing a mobile application on a computer screen. The second screen shows an improvement in selecting what option one is searching for between a company and a graduate program. Elements and text were made bigger to increase readability. There was also an overall improvement in line height and the ‘padding’ between different components. You can see consistency in the second screenshot – similar components look similar (length, width, bolding or outlined) and everything has equal padding.
In summary
The word ‘dentist’ can happily reclaim its throne as UI and I have taken a step in our relationship, from long distance to mutual understanding. In order for other UX designers to benefit from my experience, I think you should ask yourself if spacing has ever been something you’ve been cognizant of before and if not, I encourage you to find your favourite website or mobile application and re-create it. While re-creating it, pay special attention to their spacing. Is the padding on either side of an element the same? Is the component centered? These types of questions will help you determine whether or not it’s the spacing that is aiding in your enjoyment of a particular website or app. If that isn’t an option, I urge you to keep spacing in mind when creating wireframes and prototypes as spacing already makes a design seem less like a wireframe and more like an actual UI design. Another take away from my experience is that simpler is better as seen in my updated screen designs. UI does not need to have vivid colours and interesting animations to provide a good experience. As a UX designer with a focus on research and the processes that come before design, this experience taught me that ‘graphic’ design skills aren’t needed to create good interfaces and that quelled any feelings of dread I had towards design and reminded me that there’s always simple solutions to ‘complex’, almost self-made, problems. There are many methods to create good UI, such as colour scheme selection, gestalt principles and even a good use of white space and spacing. But in order to practice UI, this exercise taught me that you can focus on one of these aspects and that can already provide a visible improvement in UI.
