Table of Contents
Welcome back in the fifth post of UI design series focused on creating great user interfaces with ten, mostly simple, steps. In the previous part we were dealing with accessibility and took a look at different steps to bulletproof our design. These steps include always labeling the links and including title attribute for them. For images, the same applies to an alt attribute. Also, that you should never use images to represent links and much more. Today, you are going to learn about form and function of commonly used elements.
“Form (ever) follows function.”
Form and function in UI design
In the 20th century modernist new principle or phrase was formed predominantly in architecture and industrial design. Form follows function. In other words, the shape of an object should be primarily based upon its intended purpose or function. This idea is credited to American architect Louis Sullivan who favored more rational approach to design. The phrase appeared in article The Tall Office Building Artistically Considered.
Later on Sullivan’s assistant Frank Lloyd Wright modified this principle and continued with it. The question is how and where aesthetics and also decoration fall into it and if you should even consider it as an option. From my point of view, function should always remain the main object of design. Only then, designer should consider adding additional elements to design, not sooner. What do you think?
No.5: Form follows function
OK. Six things on the list and the first are buttons, so let’s start with them. When it comes to design, button can take many visual forms. It can look like a square (not so often), rectangle or circle. Have you ever seen one looking like a triangle? These simple shapes can be modified as well and we can get button with slightly (or heavily) rounded edges. On the other hand, you can leave it as it is – without softening the edges. You can also change the background of the button and color of its label (text) to suit the UI design and so on.
“Buttons are not for decoration!”
This all is of course nice way to spend your free time, but what about the function? The visual side of button is one thing, but if it does not suggest that it is a button, what’s the point? No matter if the button is flat, skeumorphic or if it is a ghost button, the user must understand two things. First, it is a button. Second, he either can interact with it or not (if it’s disabled). So, use contrast color and don’t forget the states like hover, focus and active. Another great thing is to use animation.
In the end remember, buttons have their own space and function in UI design. They are not for decoration so don’t use them and make them look that way.
The next elements on the list are check boxes. These elements can be sometimes interchanged, not just in UI design with radio buttons. Looking similar, there is a quick way to distinguish one from another by their function. Put simply, check boxes allows you to select more than one option while radio buttons don’t. If you have some place in your UI where the user can select one or more options, go with check boxes. Otherwise, pick the radio buttons.
“Check boxes allows you to select more than one option while radio buttons don’t.”
When it comes to style used in your UI design, feel free to customize the check boxes as you wish. Just make sure they still look like check boxes – so the user can recognize them as a check boxes – and their function is preserved.
Next element often used in UI design is a drop-down list. Using this design pattern provides couple advantages. First, it helps you group similar content and focus it on one place, giving the user more clarity. Second, they allow you to de-clutter the interface by wrapping multiple options, links and other elements into drop-down. However, don’t take these benefits to the edges. Don’t get rid of elements just to make space, think about it once or twice. Also, group together only similar elements and objects.
Quick note for webdesign … In HTML you can use “default” select element along with option elements. However, this approach has one disadvantage. You don’t have complete freedom over styling. What I mean is you can style the select element as your creativity and fantasy will allow you, but this doesn’t apply to individual options. No matter how beautiful and unique your UI design is, when you open the drop-down, styling will go through window.
For this reason you can use a DIY approach and create your own custom drop-down with HTML, CSS and JavaScript. Just make sure it works across the browsers and devices.
Another UI element on the rise is slider. Slider can be used for almost any type of content. Individual slides can contain images, videos, audio, plain text or mix of these things. Slides can also have various sizes, speeds of change and directions of movement. To make your UI design more distinct you can come up a bit weirder directions. How about moving the slides diagonally or even under completely custom angle? Only your creativity is the limit.
However, sliders too should follow some practices. For example, should there be some kinds of pagination showing the amount of slides and which one is active? Should there be a controls on sides to allow user cycle through slides manually? How fast should slides change? What content do you want to be presented? What about the touch, gestures or keyboard interaction? These and more are the question you should answer before implementing slider(s) to your UI design.
Icons are often mentioned and wildly used element UI design. Have you heard about the “hamburger” icon? Icons, as well as drop-downs can help you de-clutter the interface using universal and easy to recognize symbols and images instead of text. Important thing is “easy to recognize”. Inventing and designing new icon can be fun, but if users will not recognize it and understand its function, it will become plain decoration and whole UI design will break apart.
“Icon should always suggest the user its purpose and function.”
I know the moment when you want to add something unique to your design … Something nobody used before, but icons are not the best place to go. Sure, you can play with color, background, thickness of the lines, but you had better used time-tested symbols and pictograms. Otherwise, you are risking your users will not recognize the icon. Remember, icon should always suggest the user its purpose and function, i.e. what it stands for.
The last element is pagination. Pagination can bring more space to your UI design and let the content breathe as well. If you think about it, this is the main purpose of this element. Why would you want to bury the user under tons of content if you can give just a few sweet bites and hide the rest behind the pagination? Decide on what amount of object do you want to show as default and then bring pagination to the game. You can also ditch the pagination thing and use infinite scrolling instead, but I will leave this decision to you.
Final words
The fifth, more philosophical, part is in the end. A quick look back on what we’ve covered today. Well, it was pretty much element based talk … Buttons, check boxes, drop-down lists, sliders, icons, pagination all in one package! This all with advice on what, how and when to use these elements as a dessert. I hope you liked and enjoyed today’s serving of information on UI design and thank you very much for your time. See you in the next part of UI design – 10 steps for great user interfaces where the main subject will be colors!
What thoughts on form and function in UI design do you have?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
