|
Information architecture (IA) is the overall structure of your website, dictating hierarchy, divisions, and relationships. It is a blueprint for your site and should be one of your first considerations when beginning the process of site conceptualization. Before you start designing individual pages and considering what content you want on your pages, make sure your information architecture is in place.
IA and website usability tightly align. When website information architecture is poorly structured, the effectiveness of the site decreases. Information that is not structured intuitively can leave a user frustrated with their experience, decreasing the chances of a repeat visit.
IA maps out:
There are multiple methods used to develop and determine information architecture. Two basic approaches are site outlines (or site maps) and flowcharts.
A site outline (sometimes referred to as a site map) is a traditional outline of your website showing the hierarchy of information as it relates to pages on your site. The information is tiered, with secondary-level pages shown as descendents of the top-level pages, and so forth.
It is similar to the outline you might create for a report or other manuscript and can be made in Microsoft Word.
Example:
A flowchart is a more visual representation of the site hierarchy. Blocks represent pages, with the top-level pages appearing at the top of the flowchart and sublevel pages shown as direct descendents of the pages above it. Connecting lines represent how the pages relate to each other in the page hierarchy. Links to videos, PDFs, or external sites are also indicated.
It is similar to an organizational chart you might create for a department and can be made with drawing software such as Microsoft Visio or GoogleDocs/Drawing.
Example:
Wireframes are basic line drawings showing the placement and position of information on a single webpage. Wireframes map out:
Areas of a page’s “real estate” are sectioned off and assigned a particular piece of information. These areas could include a header for a school/unit logo, a navigation area for site navigation, a main content area for copy/text, and a footer area for copyright and contact information. Usually the structure of a wireframe is used across multiple pages. This gives a website consistency and allows the user to find information in the same area no matter which page they may be on.
A wireframe is a mockup of your page and can be made using presentation software such as Microsoft PowerPoint or Apple Keynote.
Example:
As you develop your wireframe, keep in mind the components that make up a website.
Written Content: Banners (banners are images/text across the top of the page), introductory text, descriptions of majors, descriptions of research capabilities and labs, research reports, press releases, guides for students, archive, forms, directory, contact information, etc.
Multimedia Content: Photos, videos, podcasts, audio, etc.
Functions: Search, email alert signup, registration, databases, surveys, etc.
Navigation Tools: Multiple ways through site, such as menus, A to Z listing, search, site map, quick links
Context on Every Page: All pages should include homepage link, webmaster and/or feedback link, contact information or link
