There are five main types of UI structures that I like to call “navigation paradigms”. Here’s a brief overview of the structures supplemented by their characteristics.

TreeStructure

Tree (Most commonly used in web design – think WordPress, Drupal, Joomla and SharePoint)

The branches offer various navigation possibilities like breadcrumbs, secondary nav, et cetera.
Logical hierarchical structure

SingleFrameStructure.png

Single Frame (think parallax or other highly interactive sites that animate from section to section)

Experienced as a single page by users – fancy!
No hierarchies – hip and trendy!

NetStructure.png

Net (More commonly used in application and OS design than web design – think multitasking and accessing contact lists)

No clear hierarchy
Smaller, interlinked subsidiary systems
Nodes correspond with the home page

JumpLineStructure.png

Jump-line

Linear screen arrangement
User can reach any page from the homepage
Little interactivity

linearStructure.png

Linear

Linear screen arrangement
no active user intervention possible
each item of information built on others

To create compelling UI architecture one should ask themselves the following questions that entertain certain criteria:

1. Is the information presented in a simple fluid manner?
2. Is the content essential?
3. Is the logical structure manageable?
4. Is the structure intuitive and useable?
5. Is the design consistent?
6. Is the design visually pleasing and delightful?
7. Is the information delivered quickly?

So there you have it! Now go have that conversation with UX with your head held high!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s