Recently I commented on a topic involving website design and it inspired me to write this blog post. When I say recently, I should say it was about 10 minutes before I began writing this. It's a topic that I'm quite passionate about. From the positioning of content based on where a person's eye is most likely to land first, to the flow of that same content based on the most natural direction for that person to move their eyes, and down to the aesthetic of the design; I love every part of the process.

I'll start off with a the golden rule of design across the board; The initial thought that drives every successful design; 'Form follows function'.

Whether you are making the menu interface for a video game,the front page of a website or the User Interface for an operating system *cough* you need to establish the core required functions and then based on the target demographic, the form comes into play.

For an example of form not following function, see Windows 8 with a mouse and keyboard. An interface obviously designed exclusively for touch and in that environment it's brilliant. However because Microsoft chose to ignore their core demographic of mouse/keyboard users they only reason it's sold as well as it has, which is not well is because they attempted to force it on their user base. They have since acknowledged their oversight and an update to fix the problem over-all is pending

See:

http://www.theregister.co.uk/2014/04/03/windows_desktop_updates/

This entire process is an example of how damaging it can be to ignore the golden rule of design. Microsoft attempted to force their desired form upon their user base and have paid for it with a low adoption rate and users even reverting to Windows 7 in spite of Windows 8's superior performance. They realized their mistake (they were basically slapped in the face with it) and they have been working ever since to fix the issue. Once the updated menu goes live potentially later in the summer. They have a good chance of seeing their adoption rate shoot up as mouse and keyboard users will have an interface which works well for their input method while offering the convenience of the 'metro UI' in a way that makes sense for those kind of users. Touch users can keep using what they've been using as it is perfect for them.

What functions do you need to communicate to the end user with your design? Is it a website that focuses on sales? They probably want to see your store first, An example of form following function would be to have the store be the first item on your navigation menu.

Is the function of your design to assist a user in navigating an online community? This very website is an excellent example; You're at LinusTechTips.com and you likely came here to talk to other people. So the first thing you see when your eyes go down the top of the page is 'Forum'. You immediately know where to go to enter a forum of discussion with others. And once in there, you know here to go to talk about the topics important to you. Who's a part of this community? There's a members listing so you can find out who's who The function of the community is discussion, but discussion around what? Primarily technology and other topics of interest to PC/Tech Enthusiasts. You would read about someone's case mod an that's interesting but you've got a gallery front and center so can jump right in and take a look right away. No digging, no waiting; It's right there for you, it took you 4 seconds at the most to find it. Then you've got what amounts to two stores. You love the community? There's your opportunity to get something for it while supporting it. And lastly. PC enthusiast tend to obtain, have, and make awesome stuff. Classifies allows you to see whats' up for offer, and offer anything you might have.

Here's an example of an established function with the form growing and taking shape;

This is a front-end interface for an arcade cabinet. It's a business concept and product that I'm working on. The interface is designed to be attractive, and obviously functional; part of that function is that it's navigated with an arcade joysick console. So they're can't be too many different menu areas. How can the most information be communicated smoothly with the least movement?

The system is controlled at it's core with a confirm button, a back button and movement based navigation. The user starts on the system bar with the game listing being dulled. This signifies that they need to select their desired system first. The orientation immediately communicates to them that this is accomplished with left and right movement. Upon pressing confirm (which glows green while in the menu thus communicating 'go/confirm) the focus shifts to the listing of available games. What if the user hasn't seen that game? When they highlight it by going up or down the game 'wheel' they get a blurb of text similar to what you might read on the back of a game-case, and either a screenshot slideshow or a video. However as nice as it might look and as polished as it might seem this interface is not done. There are other functions that need to be communicated to the user in a way that make sense on an arcade control panel; What immediately obvious yet subtle method can be used to communicate that there is a method of viewing and adding to a favorites menu and/or multiple genres? How can the user add/remove content from the system in as few steps as possible without typing a thing?

Another reason it's incomplete; Are arcade ethusiasts the only demographic? HTPC users my find it of interest to them. What additions or changes might need to be made to suit them? Can one system suit both of them?

Since they are using a similar method of input one came almost assume. But assuming can be dangerous. This is an example of the function still growing and thus the for must adapt.

It's also why software developers will commonly implement 'feature lock' before they even start on the user interface.

So are you designing an interface? Then remember. Form follows function as long as the function is static, and that function is the most time consuming part to identify.

Thanks for taking the time to read this. Feel free to comment with your thoughts and opinions.