Photo courtesy of flickr user Jason Robb

One of the highest impact design decisions when it comes to software is none other than the overall layout, which should in turn determine the placement and arrangement of information throughout applications.

Many considerations will need to be made to determine the optimal layout to present information, and especially for applications that deal with a huge amount of data, complex processes, client facing, depended upon to perform day-to-day operations by organizations and people and many more. Such decisions could prove to be very impactful indeed – even to the extent of deciding the success or failure of an application.

Here are a few steps that could help get you going when masterminding the overall layout of your applications.

Screen Size

Consider the screen size, is your application a client application? mobile application? Web application? Or even a Web application targeted at mobile devices?

This will determine the amount of screen real-estate that is allowed to your application, which will lead questions like below:

• What’s the minimum screen size that needs to be supported?
• What platform/OS will this application be targeted at?
• How will the user interact with the application – mouse + keyboard? touchscreen? touchscreen + keyboard? etc

These questions will first need to be answered before proceeding to the next step of working on other stuff.

 

Information Architecture

Photo courtesy of flickr user hungrybrowser

Have a think of the big picture, consider the amount of information throughout the system. Other than taking into consideration all the features that is in scope for the application at this point of time, also consider features that will be in there in the future. This will potentially allow the overall UI to be more “future proof”, requiring less change in the future, reducing the the problem of having updates that might introduce a huge change in UI, which could be a huge support/training issue.

It’s my personal preference to have things structured in a hierarchical manner like a Sitemap, but I doubt it will be applicable for every scenario. This is to ensure that whatever layout is decided upon can scale and potentially incorporate.

 

Elements

The next step would be deciding on the screen elements that would be required for your application, along with their considerations.

Element	Considerations
Header	What should it contain? – Logo, Tagline, Navigation Menu, User Info, Action Buttons Where should it be placed? – Top, Left, Right, or?
Navigation Menu	How many sections will there be? (Pro tip: If there will be alot of sections, left navigation is the way to go) Should icons be used to represent each section? Should some sections placed as sub-navigation menus?
Secondary Navigation Menu	Is it absolutely required? How to ensure it can be clearly separated from the main navigation menu?
Action Buttons / Toolbar	Should there be a usual spot on the screen that contains actions that can be performed?
Title	Is there need for a title to clearly indicate to the user where he is, or does the navigation menu suffice?
Content	What sort of content are there? – Images, Text, Links, Lists, etc? Can the content be placed into logical groups? – Categories, Tags, etc?
Sidebar	Is there any sub-content in your pages?
Search	Is there need for searching?
Advertisements	Image or Text?
Footer	Is it required? What should it contain? – Copyright, buttons, etc?

 

Examples

Here are some real world examples to get you going on possible layout solutions:

1. WordPress (wordpress.org)

2. Twitter (twitter.com)

 

3. eBay (ebay.com)

 

Other considerations

There are many other considerations that could and should be made when planning the overall layout of your application, which are stuff like:

• User’s Environment – What’s the environment the users of your software are working in? e.g: Point of Sale systems are used by cashiers day-in-day out and their focus would be to process sales transactions quickly, thus a consistent layout in allowing them to perform sales, refunds, etc is definitely required.
• Scrolling – Which elements should be scrollable? Will the header or searchbox etc be always visible on the screen?
• UI Patterns – What are the UI Patterns that will be used throughout the application, whether in getting input, dictating processes etc. Tip: check out ui-patterns.com.
• Width – To go with fixed or fluid width? Fixed width layouts have a fixed width (e.g.: if the width of the application is 960px, it will be presented as 960px), whereas fluid width layouts would have percentage based widths, that can potentially scale based on the screen resolution. Both have their strengths and weaknesses, here’s a link to a pretty good article titled “Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?” from Smashing Magazine on exactly this issue.

Personally…

Photo courtesy of flickr user Martin Kulakowski

I prefer kick-starting everything through sketching. By drafting my initial thoughts in the form of sketches, I find it much easier to communicate my thoughts and discuss with others and arrive at the best solution.

 

In the end of the day

I sincerely think that nailing down the perfect layout for your the design of your application in the first go would be quite impossible. The key here is to consider as many scenarios as possible in your initial layout design and have a go at it. Then as your progressively design and develop your application, iteratively improve on the overall layout design as you go along.

Remember that have a consistent layout is great, but there are times when going creative and breaking the rules might be the better solution, but I guess the tough part of that is when should we do so… Oh well, I guess we’ll figure it out then, don’t you think so?