Website Structure & Digital Interaction Design

Information architecture

Before starting to design a web site, you must create the site’s information architecture design. This consists of:

1. The website’s basic structure and navigation
2. The content of the site, how this is split in sections and sub-sections and how it progressively appears to users.
3. The steps a user will take to complete tasks or goals within a website.
4. The content of the site, how this is split in sections and sub-sections and how it progressively appears to users.
5. How sections are labelled, so that they accurately describe the content users expect to find.

These deliverables are essential to a website’s design. To use a building analogy, before you build a house you must have a floor plan that shows the number and typed of rooms your house will have. And you need to take into account the way people will move around in them. All this applies to web sites too.

It's important to stress that designing a website’s information architecture is a top-down process just like an architect starts with a building’s floor plan and does not fixate on a single room and its look-n-feel. 

Good information architecture is vital to a website’s usability because: 

1. Every piece of information is where users expect to find it. It helps explore all choice of products and services that your company offers to help arrive at a decision. It is therefore linked directly to customer satisfaction and retention. 
2. It creates the sense of user-friendlinees and easy to use. 
3. It reduces bounce rates during critical online processes such as applications and form submissions and enhances conversion rates.
   
   
   

Wireframes

After you've decided on the site’s basic structures, it's time to wireframe! Wireframes are black and white illustrations of the layout and interface of each page including navigation, main content, promo areas, sidebar widgets and functionality. 

Wireframes are usually style free, excluding design or brand features. Wireframes are a middle step between information architecture and visual design and an essential part of a website’s design process, because they require little effort to produce and offer the opportunity to explore alternatives in terms of page layouts beofre going on to more complex visual design decisions.At the same time, wireframes look at the bigger picture rather than individual visula details so they help to: 

1. Make sure the information architecture structure is fully served by the website’s templates.
2. Guarantee consistency of navigation patterns, widgets’ placement and information display.
3. Safeguard users moving from page to page intuitively and without any information gaps.

Many websites that lack design consistency or which do not offer visitors clear paths to complete their tasks are a result of hasty or non-existent wireframe or prototype design.