Form vs Function in UI Design

Form vs Function in UI design

UI design plays a crucial role in creating digital products that are both visually appealing and functional. This dynamic between form and function is a constant challenge for designers, as they strive to strike the right balance.

On one hand, the visual elements of a UI, such as colors, typography, and layout, contribute to the overall form and aesthetic appeal of the design.

On the other hand, the functionality of the UI, including ease of use, intuitive navigation, and efficient interactions, determines how well users can accomplish their tasks.

Achieving a successful UI design requires careful consideration of both form and function. Starting with the question

What form should my design take?

‍

Design Constraints

What if I asked you to design a box? Sure, you could make something, but it's hard to make anything meaningful or useful because you don't know what the box needs to do. There aren't enough constraints. But if I was a little bit more specific and told you that it was a pizza box, suddenly the task is a bit easier.

You know the shape of pizza, it's round, and you know enough about it to start to develop more nuanced concepts. If I told you that this pizza box needed to fit a 16 inch diameter pizza, and the box must be made from compostable molded fiber, then it's even more clear. If this box needs to have several other pizzas stacked on top of it, I know to add in...

Some structural ribbing to make the box stronger. So this is important because this shows you that the more specific you are with constraints, the easier it is to design. The shape that your designs take are dictated by what the designs need to do, or how they should function. This is the crux of the phrase…

Form follows function.

This is a quote that was originally coined by architect Lewis Sullivan in the late 1800s, and it still holds true today, and it will probably always hold true. The first thing that I do when I start a project is establish a design criteria. It forces you to be very specific about what a success will look like for a problem you're solving, and it takes a lot of subjectivity out of the design process.

Ask questions like…

who is my user?

what is the user trying to accomplish?

is my design helping or hindering their goal?

You can't just arbitrarily choose red for the product's color just because you like it. Every design decision should be made in service of a specific goal, and this is really, really important when you're sort of designing for form following function. When you present a design without a clear goal to engineers, marketers, senior designers, or business people, this is what you sound like.

Now, you can't really make a design criteria unless you understand the problem very intimately. And this sort of problem scoping is done through design research. So I won't get into the details of design research right now for this video.

Visual Indicators.

Properly using contrasting colors, type, and shapes is a really good way to highlight function. For example, the equal sign on this brown calculator is a great example of that.

Same thing with this messenger bag. These color changes highlight the most important or most used touch points on the object. The color change draws your eye in.

And this is especially useful when you're working in high stress environments. So in an airplane cockpit, mistakes can mean life or death.

That's why many of the buttons in the cockpit are distinctly different shapes and colors. You don't want to mistake one button for another. Now, I've never flown a plane, but I'm willing to bet that the buttons with the red covers on them are probably only meant for an emergency. This is the power of visual indicators and form following function.

It tells you how to use the object just by looking at it. With form following function, really the best thing that you can do is make it so that the user can't do something the wrong way.

Mapping

A great example of very confusing mapping are with stovetops. So I always have trouble figuring out which knob controls which burner, and a more practical control array would be one that's aligned with the stovetop burners. Now I can almost guarantee you that there are mechanical constraints here. But from a usability perspective, this makes way more sense.

Form following convention.

Every production-made drill I've ever seen has a trigger in the same place, except for one which was designed by Porsche. So, this design has a trigger on top of the device. Now, it's totally possible that this is a superior design, but power drills have been around for over a hundred years and they've always had the trigger in the same spot.

So changing that trigger location goes against a hundred years of convention. And for this reason, radically new ideas are often not accepted. Customers are just used to the status quo. And even if the new idea is much better, people will be slow to adopt those new ideas. In addition to that, you may be going against legal regulations that are heavily entrenched.

So, I want to make it clear that I'm not saying that you should blindly follow convention, that I would never suggest that. All I'm saying is that you need to be aware of those conventions and figure out how to navigate any potential pushback from customers.