Interface + Structure: Web Design

Task schemes
Organize content by considering the user's needs, actions, questions, or processes given specific content.

Audience schemes
Organize content for separate segments of users. Audience schemes can be closed or open, ie users are able to navigate from one audience to another. This type of scheme does present challenges unless the content lends itself to users very easily self-identifying to which audience they belong, as well as not fitting multiple audience profiles.

Metaphor schemes
Help users by relating content to familiar concepts. This is used in interface design (folders, trash, etc) but can pose challenges when used as the site’s primary organization scheme.

Hierarchical Structures
In Hierarchical Structures, sometimes referred to as tree structures or hub-and-spoke structures, there is a top down approach or parent/child relationships between pieces of information. Users start with broader categories of information (parent) and then drill further down into the structure to find narrower, more detailed information (child).
Many users are familiar with structuring information in hierarchies because they see these structures on a daily basis in the way businesses have a formed their lead leadership structure, the way project plans are set-up, and so on.

Sequential Structures
Websites with Sequential Structures require users to go step-by-step, following a specific path through content.
An example of this type of structure is ecommerce purchases or ecourses. Sequential structures assume that there is an optimal ordering of content which renders greater effectiveness or success.

Matrix Structures
A Matrix Structure allows users to determine their own path since content is linked in numerous ways. This type of structure takes full advantage of the principles behind hypertext, or HTML. For example, one user could choose to navigate through a set of content based on date while another navigates based on topic.

Considerations
Allow room for growth.
Avoid structures that are too shallow or too deep.
For some information architects, wireframes are the best way to represent the connections between different screens and identify how the site will work from a practical perspective. Based on the information gathered during research and the decisions made during hierarchy creation, an IA will sketch out certain key screens in order to demonstrate how a user will interact with the information available.

A “wire frame” is a non-graphical layout of the proposed web page. The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website. Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work like flowcharts or site maps and screen designs.” Within the process of building a website, wireframing is where thinking becomes tangible.

Wireframes should not convey:
Specific or granular design choices and details.
• Ex. typefaces, treatments, or color choices.
Actual assets or media
• Ex. High resolution images or screencaps, typeset copy, or non-generic asset references.