Form follows function is a principle associated with 20th-century modernist architecture and industrial design which says that the shape of a building or object should primarily relate to its intended function or purpose. – Wikipedia

Well, in UI form follow function is defined as;

A design aesthetic that encourages design to be grounded on the functional, useful forms inherent in the application. This avoids gratuitous decoration but elevates the human task and the meaning of the object as the principle aesthetic. – Usabilityfirst.com

Principles of User Interface: Form Follows Function

Basically, it means the form should follow the function. Take for example a chair no matter how great it looks ultimately it should be useful for sitting or foot rest or whatever the user needs it for. Without the function chair turns purposeless.

Chair

(Source)

Similarly UI should follow the functionality, make it look good but keeping in mind the purpose and user behaviour patterns. In this blog post we will see how to make sure form follows function.

Here’s how to ensure form follows function in your UI

Buttons

button vs text link

Make it a habit to give buttons instead of link texts. Buttons lets the user to realize there is more, meanwhile a link text might not provoke the users to click. Buttons have more contrast than text links.

Dropdown lists

drop down list

In a form it’s always great to use a dropdown menu because it will save time and effort of the user. But make sure it is neither very long list nor very short one. For example in gender column you can use check boxes because the options are fewer, meanwhile country list can be used as dropdown with search option. Bottom line is dropdown lists and check boxes are great when it is used in right place and for right purpose.

Sliders

sliders

(Source)

Sliders are just like dropdown lists but you will be sliding the pointer to choose your values. Many uber cool websites use sliders in their forms. But why? Sliders are immensely handy when it comes to smaller screens. For example you have to enter a numerical value, say price range. It will be easier to slide the pointer to the location of the value user needs than to tap –type-go. Since devices are getting connected more and more the screen sizes are getting tiny and integrated with touch.

Tip: When designing UI always think for web and mobile usability

Icons

icons

Using icons instead of text is one of the best thing to get noticed by the user. Sometimes just plain icons are used as fillers to bring balance to the design and force the user to notice it. Icons also help user to navigate easily in smaller screens.

 

Pagination

pagination

Nobody likes to scroll for a long time so  breaking up the content into edible pieces would make user’s life much easy.

Read the previous blog post on accessibility here

 

Facebookgoogle_pluslinkedinmail