December 10, 2020 Ecosystem admin

22 Things Which Create A Perfect Layout

Single column layout vs. multi-column

A single column layout provides you with more control over your narrative. Single column layout guides your readers in a more predictable way from top to bottom whereas a multi column approach runs some risks of distracting the readers from the core purpose of the page.

       Distinct Clickable/Selected Styles

Visual styling such as color, depth, and contrast can be used as a reliable cue to help people understand the fundamental language of navigating the interface. In order to communicate clearly with your users, the styles of your clickable actions (links, buttons), selected elements (chosen items), and plain text should be clearly distinct from one another. It should also be applied consistently across the interface.

Try Contrast

Want a stronger UI? Make your calls to action be a bit more prominent and distinguishable in relation to the elements surrounding them. You can easily increase the contrast of your primary calls to action in a number of ways. Use tone; make certain elements appear darker vs. lighter. With depth, you can make an item appear closer while the rest of the content looks like it’s further (talking drop shadows and gradients here). You can also pick complementary colors from the color wheel to increase contrast even further. Consider a higher contrast between your call to action and the rest of the page.

Form Fields

If you ask your users to fill out various fields then you will probably run the risk of making your visitors turn around and give up. Not everyone can type at a high speed. Question yourself if each field is really necessary and remove as many fields as you can. If you have numerous optional fields, then consider moving them after form submission on a separate page.

Expose Options

Pull down menus hide an extra set of actions which require additional effort to be discovered. If these hidden options are really central to getting things done by your visitors, then you should consider having them up front. Reserve pull down menus for options that are predictable. Just be careful to use drop downs for primary items that are on your path to conversion.

Continuity vs. False bottoms

A false bottom is never the right way to go. Yes, scrolling long pages are great, but be careful of giving your users a sense that the page has come to an end when it really hasn’t.  Try to establish a visual pattern or rhythm that the user can learn and rely on to read further down. Secondarily, be careful of big gaps around the areas of where the fold can appear. Over all it is about authenticity and not duping your users.

Do not create links

Think again if your narrative page points towards a specific call to action at the bottom. Keep an eye on the number of links on your pages and possibly balance discovery style pages (a bit heavier on the links) with tunnel style pages (with fewer links and higher conversions). Remove extraneous links to increase a user’s chance of reaching that important button.

Expose Fields

Merge the sign up forms with the landing page so a number of benefits can be made in comparison to creating separate multi-page sign ups. First, you are cutting out extra steps from the flow in general. Secondly, by showing the number of form fields right there, you are providing the customer with a sense of how long the sign up actually is.

Try Transitions

Interface elements often appear, hide, move, shift, and resize as users do their thing. As elements respond to our interactions, it may sometimes be easier to comprehend what just happened when we sprinkle in the element of time. A built in intentional delay in the form of an animation or transition, respects cognition and will give people the required time to understand a change in size or position. Yet keep in mind that the people who just wish to get things done quickly, too long of a delay of course can be a burden.

Try Gradual Engagement

Instead of asking visitors to sign up immediately, why not ask them to first perform a task? During such initial interactions you can both show off the benefits of the product as well as of personalization. Once users begin to see your product’s value, they are more likely to make it their own. Gradual engagement is the way to postpone the sign up process as much as possible and still allow users to use and customize your application/product.

Few Borders

Borders compete for attention with real content. Borders can be used to define a space very clearly and precisely. Define the relationships between screen elements which use less attention and other elements which can be just grouped together through proximity, be aligned, have distinct backgrounds, or share a similar typographic style. Pages with lots of boxes tend to look noisy or misaligned. It is helpful to throw in a line here and there. But consider alternative ways of defining visual relationships that are less taxing to attention.

Visual Hierarchy

Use a good visual hierarchy to separate out your important elements from the less important ones. A visual hierarchy results from varying things as alignment, proximity, color, tone, indentation, font size, element size, padding, spacing, etc. If these visual language elements are applied correctly, they work together to direct and pause people’s attention within a page. With a good visual hierarchy, you will invite your users to spend a bit more time on the page.

Click Areas

Make Links, forms and buttons easier to click on by increasing their size. Do consider increasing your form fields, calls to action, and links. Alternatively, also keep the visual element looking as is, but instead only increasing its hotspot or clickable area.

Multifunctional Controls

Simplicity is valuable in design as it somewhat correlates with ease of use. Too much clutter will result in limited attention pools. The more parts there are, the greater is the room for usability issues to creep up. One way for you to achieve the same with less is to make UI controls more multifunctional. That is, you take one control and you squeeze two or more functions into it. It’s therefore probably better to reserve the multifunctional approach for repeat visitors who can deal with a slightly higher learning curve. Also, use it wisely and don’t overdo it. 

Extra Padding

White space definitely makes content and/or data more readable. When elements are slightly separated away from each, they begin to be allowed to be perceived individually. This is good for lists, tables, paragraphs or any sets of elements on a screen. One common way of applying white space is with extra padding all around an item. Without adequate padding on the other hand, elements begin to blur together into indistinguishable wholes. Therefore, when readability is concerned use padding to help.

 Responsive Layouts

Double scroll bars create a lot of confusion.  Confusion might also be caused unintentionally due to static layouts when looking at UIs on smaller devices. One way to solve this problem is making responsive layouts that adjust automatically for various screen shapes and sizes.

Smart Defaults

Use smart defaults or pre-filling form fields with educated guesses to remove the amount of work users have to do. This is a common technique for helping users move through forms faster. One of the worst things you can do is to ask people for data that they have already provided in the past, repeatedly over and over again. Try to display fields that are preloaded with values to be validatedas opposed to asking for values to be retyped each time. The less work, the better.

Group Related Items

Grouping related items together is the most basic way to increase fundamental usability. We know that open and save functions can typically be found more or less together. Related items are just meant to be placed in proximity of each other in order to respect a degree of logic and lower overall cognitive friction. Wasting time looking for stuff usually isn’t fun for people.

Keyboard Shortcuts

When you have a high use product, it’s always good to consider those advanced users who keep coming back and spend much time with your application. People often seek ways which allow them to perform repetitive task quicker and keyboard shortcuts are one such way of providing this. Hot keys speed up task performance over point and click graphical user interfaces dramatically.

Progressive Reduction

Progressive Reduction means that users learn to use your interface, the functions which were more important to them in the beginning, become easier or less important over time. For example, certain on-boarding related calls to actions may be moved further away as room is made for other content. Or, icon labels may become hidden as the meaning of icons becomes understood. People learn to use an interface and the progressive reduction pattern respects that.

Grab Attention

Channel additional attention towards the most important actions. This can be achieved in numerous ways; by starting with the more obvious size increase or higher contrast of an element. Other ways for directing attention also include: using irregular shapes, field auto focusing, section highlights, sticky element interactions (floating), as well as directional arrows. Emphasize the primary calls to action. It is always worth it.

 Display Progress

This increases the motivation for getting things done once we are closer to completion. Make people feel progress sooner rather than later.This will help you by making your users more receptive and appreciative for their time spent.


[bibblio style=”bib–font-arial bib–size-18 bib–recency-show bib–default bib–hover bib–shine bib–white-label bib–grd-6″ query_string_params=”e30=” recommendation_type=”optimised”]

Leave a Reply

Your email address will not be published. Required fields are marked *