🎨

UI Design

User interface (UI) design refers to the visual elements that users interact with, such as menus, buttons, icons, typography, colors, etc.

User experience (UX) on the other hand describes the broader experience that a user has when interacting with a product.

In a typical process for a software product, the UX design step will output the conceptual/logical flow of how the product will work, typically with artefacts such as wireframes and user stories.

It is then the UI designer's task to turn these structural elements into a compelling, easy to use, aesthetically pleasing, ideally unique visual design.

UI design of course not only refers to software products, but also hardware. In hardware, there is an additional element of 3D styling and industrial design that adds value to a product. Furthermore, there are now types of UIs that are not visual, e.g. voice recognition and haptic UIs.

Importance of Aesthetics in UI Design

How important is a "pretty" user interface for your product? This is a fairly nuanced topic. Obviously, an aesthetically pleasing product is better than an ugly one, all other things being the same. However, aesthetics are in the eye of the beholder, and any kind of aesthetic sends a particular signal about the product.

Productivity-oriented enterprise products for example tend to favor a "dry", no-nonsense kind of design. These products focus on efficiency rather than elaborate decoration. An overly decorative and playful UI would potentially send the wrong message to buyers. However, differentiating your enterprise product by ease of use and approachability is probably beneficial, particularly in a market with incumbents that have never prioritized UI design. Slack is a good example: There have been plenty of instant messaging apps before, but Slack's particular brand of design (supporting its well thought-out UX) made it stand out.

In some cases, particularly in the B2C space, UI design can be fairly counter-intuitive. Snapchat for example made a point of having a relatively unintuitive design that needed a learning curve, helping its (initially) teenage users to feel "different" from their parents who didn't know how to use the app.

Design aesthetics are also required to change occasionally to keep things fresh. A classic example is Apple's design for iOS, which initially was strongly skeuomorphic, i.e. imitated real-world objects in its design. The contacts app for instance looked like a little address book, the YouTube app like a little TV, and so on. With iOS 7 Apple changed radically to a very "flat", abstract design that has since defined its design language, only to become softer and more 3D again in recent years.

What makes a UI "intuitive"?

When you ask people what the most important thing about a user interface is, they will likely tell you that it should be "intuitive".

Intuitive (definition): using or based on what one feels to be true even without conscious reasoning; instinctive.

Now, obviously none of us were born knowing how to use computers or smartphones. So any kind of intuitive concept about what feels "natural" when using a tech product has to be based on learned concepts.

This is what makes the discussion about "intuitive" design so complicated.

💡

Different people will consider very different UI concepts to be intuitive.

For example, for people well over 30 a diskette icon is probably an intuitive way of expressing the "Save" function — that's where you saved your files when you were younger. People under 20 have likely never used real-world diskette, so this is not remotely intuitive for them. Very young users who grew up with automatically saving product such as Google Docs will likely not even have a mental concept of what "saving a file" might refer to. Similarly, much more complex underlying concepts might be well-learned and therefore intuitive to one group of user and completely novel to another one.

💡

The only way around this is to test your core user group and discover which patterns they are familiar with and therefore will consider to be intuitive.

UI Aesthetic vs. Usability

Of course every product team wants their product to be easy to use. Good UI design supports this goal by prioritizing design elements visually in such a way that users can easily find their way around a product.

However, there is often a potential conflict between usability and the aesthetic goals of UI designers.

A classic example is typography: Many UI designers like type to be relatively low contrast (e.g. grey), on the smaller side and using interesting fonts — it just looks best. This might be at odds with usability goals that are likely to prefer large, contrast-rich and easy to read text. Add concerns about accessibility for users with reduced eyesight, and you have a complicated mix of conflicting priorities.

The role of product management is to find a good balance between these goals in collaboration with designers and UX experts. Well-designed products reduce friction as much as possible, and following usability best practices is similarly important for that goal as making the product pleasant to look at.

Useful Resources

Krug: Don't Make Me Think

A classic book about pragmatic user interface design

Krug: Rocket Surgery Made Easy

A slightly tongue-in-cheek, but very approachable guide to usability

Garrett: The Elements of User Experience

A bit older, but still a classic of user-centered design

Norman: The Design of Everyday Things

Interesting exploration of how good design makes things pleasant to use — not focusing on digital design at all