Killer UIs Principle #9. Organize the Page Into Logical Groups

If there’s a lot of content on a page, organize the content into logical groupings. Use space between logical groupings and each other.

Section 7 addresses a functional layout. As a further refinement to that, group similar content together and separate that group from other objects or text.

Grouping similar data, data entry fields, text, objects, etc. together, and then separating those groups from each other helps the user to understand the function of the page. It’s easy to grasp the separate topics when similar items are grouped together, and much easier than trying to comprehend an entire page at one glance.

Demonstration Examples

www.wheelcovers.com

This site is very clean. You’ll notice that there’s a nice banner graphic that is visually appealing that separates content above and below and is the centerpoint of the page. The header area has the contact info clearly displayed as well as Search and the Cart. These are the most commonly used functions by online catalog shoppers and these functions are grouped together and easy to find by users.

Between the header and banner ad is a drop-down menu. Below the banner ad are nicely arranged images with each product category clearly displayed. Below that are featured items.

Each section of the page has similar content and it’s well laid out.

WheelCovers-com

www.urbanroad.com.au

This website features a much more contemporary style. It also has logical groupings of content and it’s easy to navigate, with information grouped together in an easy-to-find layout.

In addition to having a completely different style, the layout is different as well. Even with a completely different look and feel, the page can be easily navigated and is a nice example of the right way to lay out a page.

UrbanRoad

 

www.lovoda.com

The last example is a fashion website, so we’re covering a wide range of user demographics–and completely different-looking UIs.

This third example is also nicely laid out and the user can navigate it easily, another good example of a logical layout.

Lovoda

Summary Note

The principles demonstrated by the websites apply to installed apps as well. Installed apps are limited to the display area of the smallest monitor used by customers, requiring better planning of content on each page. Especially with this limitation, one must avoid cramming content onto the page while continuing to follow the earlier principles for layout, spacing, coloring, etc.

With the limited space for apps, it’s crucial to have menus with logical content under each title, and having the right content on the screen. Screen content often includes buttons or icons that direct the user to subsequent pages. Arranging these action buttons must follow the logical layout.

The three examples above also demonstrate most of the earlier principles, particularly the use of white space and spacing. (No color gradations or background images in these examples!)

Each has an aesthetic look that the target demographic relates to. Wheel Covers has a very strong, macho look to it, perfect for its target market. Urban Roads has a very contemporary look that mirrors the style of the products they sell. Lovoda has excellent appeal for women. The style and look of the page is reflective of the fashions they sell.

When you design a website or an app, you need to apply all of the applicable principles. When looking at apps and websites, notice those that appeal to you and pick out the principles that are followed.

When looking at apps and websites that you don’t like, identify the principles that are violated. You will start to develop your eye for what makes a great app or page.

 

©2017 Curt Larson. All Rights Reserved.

Advertisements