Organizing the Content: Information Architecture and Application Structure

Organizing the Content: Information Architecture and Application StructureProject #2: Your design portfolioBrief: Create a website that will serve at least the following purposes:1. showcase your student works (at least 3)2. provide your contact detailsDeliverables:Information architectureWireframeBranding - logo, colors, fontsWebsite - Wix or WeeblyInformation Architecture (IA)is the art of organizing an information spacepresenting, searching, browsing, labeling, categorizing, sorting, manipulating, and strategically hiding informationVia text and imagery, users should be directed to the part of your site or app that accomplishestheirpurposesIt is the blueprint of the site upon which all other aspects are built form, function, metaphor, navigation and interface, interaction, and visual design

Main Components of IAOrganizationSchemesandStructures: How you categorize and structure informationLabeling Systems: How you represent informationNavigation Systems: How users browse or move through informationSearch Systems: How users look for information

Output of IAShow one single thing, such as a map, book, video, or gameShow a list or set of thingsProvide tools to create a thingFacilitate a task

Elements of IA

Hierarchicalmeans that there is a parent page with multiple child pages which offers the user choice.

Elements of IALinear or sequentialallows the user to go forward and back. This is typical of slide shows and videos and, to some degree, games where a given path is preset.

All-in-one modelThis is the simplest possible model. Everything goes on a single Home page.

IA models

FlatA flat pattern is where all pages are arranged as peers, and every one is accessible from every other one. This is very common for simple sites, where there are a few standard topics, such as: Home, About Us, Contact Us, Products.

IndexAn index structure is like the flat structure, with an additional list of contents.An index is often organised in some way, to make stuff easier to find. For example, a list of files in a web directory (the index page), or could be an index of peoples names ordered by last name.Indexes work well when there is a medium amount of data, and also when that data can be ordered in a way that makes it easier to scan to what you want.

Daisy modelThis model is useful for multiple, distinct linear workflows. A good example may be an email application, where you will return to your inbox at several points, e.g. after reading a message, after sending a message, or after adding a new contact.

Strict hierarchyA strict hierarchy describes a system where you can only access a lower-level page via its parent.This could apply to a real-world model where there is a strict parent-child relationship between objects, such as arranging pages for company offices by their country. An office cannot be in more than one country.

Multidimensional hierarchyA multi-dimensional hierarchy is where there are many ways of browsing to the same content. In a way, several hierarchies co-exist, overlaid on the same content. The structure of the content can appear to be different, depending on the mode youre looking in.A typical example is a site like Amazon, which lets you browse books by genre, or by title, and also lets you search by keyword. Each of these hierarchies corresponds to a property of the content, each of which can be useful for people in different situations.

SearchSearch functions present a dynamic view of a set of content, and offer instant links to each result. This allows users to jump straight to content, without having to browse through hierarchies or indexes.

Wireframing: Visual Navigation

Four Important Gestalt PrinciplesThe theory behind grouping and alignment was developed early in the 20th century by the Gestalt psychologists. They described several layout properties that seem to be hardwired into our visual systems.Proximity - Put things close together, and viewers will associate them with one another. This is the basis for strong grouping of content and controls on a UI.Similarity - If two things are the same shape, size, color, or orientation, for instance, viewers will also associate them with each other.Continuity - Our eyes want to see continuous lines and curves formed by the alignment of smaller elements.Closure - We also want to see simple closed forms, such as rectangles and blobs of whitespace, that arent explicitly drawn for us. Groups of things often appear to be closed forms.

Visual Hierarchya good visual hierarchy gives instant clues about:The relative importance of page elementsThe relationships among themHow to make things look importantUsers can choose to ignore things that we think we dont need to look at, and zero in on what they think is the important part of the page

How to make things look importantFor short but large textsuch as headlines and short phrasesuse font size, contrasting color, and visual weight You can also make text look very dramatic by setting it off with generous whitespace or background colorPut small but important items at the top of the page, along the left side, or in the top-right corner (Give them high contrast and visual weight, and set them off with whitespace)High-contrast, dramatic images draw attention; so do pictures of facesAd blindness: Users may consciously ignore elements that look like ads, even if those elements carry important information

Density - A dense, heavy-looking block has stronger contrast with the surrounding page; an open look has less contrast.Background color - Contrast draws attention. Black on white, or vice versa, is the strongest contrast possible.Position and size - A medium or large text block, roughly in the center of the page, calls attention to itself as the primary content (like an article or blog post). But a small strip of text at the bottom of the page says quietly, Im just a footer and begs to be ignored!Rhythm - Lists, grids, alternating elements such as headlines and summaries, and whitespace separation can create a strong visual rhythm that irresistibly draws the eye.

Ways to emphasize blocks of text or small items (clockwise from upper left): density, background color, rhythm, and position and size

Grouping related items

Distinguishing one item among peers

Visual Flow: What Should I Look at Next?Visual flow deals with the tracks that readers eyes tend to follow as they scan the pageHuman tendency to read top to bottom and left to right: When faced with a monotonous page of text, thats what youll do naturally; but if there are strong focal points on the page, they can distract you from the usual progression, for better or for worse.Focal points: You tend to follow them from strongest to weakest, and skillfully designed pages have only a fewtoo many focal points dilute the importance of each oneA good visual hierarchy uses focal points to pull eyes to the right places in the right ordergood visual flow: One simple way is to use implied lines, either curved or straight, to connect elements on the page, creating a visual narrative for the viewer to follow.