In this post I’ll talk about what I learned from two courses I recently took on Coursera: Visual Elements of User Interface Design and UX Design Fundamentals (both taught by Michael Worthington from the California Institute of the Arts).

I decided to learn more about user interface and experience (UI/UX) design for two main reasons. Firstly, as I’ve got deeper into the world of Shiny apps and dashboards, I often find myself making decisions about how I want things to look and behave. Sometimes I spend a lot of time getting my code working as I’d intended, only to find that there’s an underlying design problem that makes something feel not quite right about the app. So far I’ve been dealing with these things as they come up and gradually rediscovering UI conventions on my own, but it seemed to be time to just take a intro course to get the basics down. Secondly, I’m very interested in the idea of data science as design and hoped that taking an explicitly design-centred course would help me grasp some of the big ideas about design that I could apply more generally.

What is UI/UX design?

Broadly speaking, UI refers to how an interface looks and UX to how the user engages with it. Things like the choices of colour scheme fall under UI whereas decisions as to how the flow of an interface works are parts of UX design. Often it’s hard to draw a sharp line between the two, but the separation of between form and function can be very useful.

A good interface allows a user to interact with a product seamlessly and without being needlessly exposed to the product’s internals. The interface is essentially anything that stands between the technical back end of the product and the user. Two common examples of user interfaces are the front ends of apps and websites.

Why is UI/UX design important? We’ve all had the experience of interacting with a clunky or ugly user interface and being frustrated. Ideally, a user interface should feel obvious and unobtrusive, so that it is easy to do whatever you need to do. Bad UI can ruin the experience of a product that is otherwise very good.

As a data scientist, making a dashboard for a client can seem like an easier or less important task than the analysis that is behind it. However, often the technical aspects of the analysis aren’t what most users directly engage or interact with. Making the end product elegant and usable is thus crucial to doing justice to all the work that underlies it.

Keep conventions in mind

There are a lot of interface conventions, but most of us are very rarely aware of these. In fact, we most often become aware of design conventions when they’re violated. For example, if you want to search a website, you’ll probably look first to the top of the page for a search bar. If the search bar was instead at the bottom of the page, you’ll probably get quite frustrated looking for it.

Part of good UI/UX design is about avoiding frustrating experiences like this. Being aware of UI/UX conventions means that you can piggy back on your users’ existing knowledge of how things work rather than have to guide them through every step of using your interface. For example, most users will be familiar enough with a button or a dropdown menu to know what to do when they see one.

Jakob Nielsen’s usability heuristics provide some excellent (and classic) guidance for UI design. For example, one of the heuristics is visibility of system status. Imagine you fill out a form and press a button but nothing happens. Is the form being processed behind the scenes, or is it broken? Providing a visual cue that something is happening (like a progress bar or processing icon) prevents confusion and frustration.

The need to conform to conventions creates a tension in interface design, because although the interface can’t be so weird that it’s unusable we also don’t want it to be generic or boring. You may be able to violate a design convention here or there as long as it’s done intentionally or mindfully rather than out of ignorance.

Understand the user

A point that was reiterated in both courses was the importance of understanding your audience or user. A design that is perfect for one user may be confusing for someone with a different background or different goals, so understanding who your audience is and what they want is crucial.

One suggestion was to create imaginary individuals with names, ages, professions, and hobbies that represent different types of users. This makes the user seem more concrete and makes it easier to design something that will suit their needs. Talking to the people who will use your product about what they expect and how they will use it also helps foreground the user experience. This makes it harder to lose sight of what the end goal is and what should be prioritised. User testing is another important tool, since ultimately what the designer thinks should work matters less than how a design works for the people it’s intended for.

Separate form and function

While UI and UX often bleed together, the courses highlighted how it can be useful to separate form from function to examine them separately. The aesthetics of an app or website can be developed quite separately from its structure or flow, and trying to do develop and improve both simultaneously makes it harder to do either well.

Tools like paper prototyping or wireframes can be very useful to test out ideas without necessarily committing to them. Non-visual paper prototyping involves recreating the flow of your app on pieces of paper before building the actual interface. This means you can test how well things fit together without worrying too much about visual elements of the interface. Ideally you would test this on actual potential users, but sometimes just by making a prototype or running through it yourself it can become clear that an idea doesn’t work.

Iterate to improve

It’s easy to zero in on the first idea you have and very quickly and unnecessarily constrain yourself. An aspect of design that was highlighted was the need to try out many different ideas, which means you need to be able to prototype, test, and iterate quickly. This allows you to quickly discard ideas that don’t work and find ones that do. Keeping form and function initially separate really helps with this, since it makes it faster to create and test prototypes and also allows you to identify precisely which aspects of the design are or aren’t working.

Summary

Overall I found the two courses very interesting and useful. As well as providing concrete advice that I can apply to design better user interfaces for my Shiny apps, the courses also emphasised some aspects of design that can be applied far more generally. For example, ideas like the importance of iteration and of foregrounding the user can be as important for data science as they are for design.

Resources