ID01: Interaction Design & Development 01

Icon

Thom Meredith

Week 10

Week 10 – Topics

Final Project

Quiz 2 review

What is information architecture?

Site maps

Wireframes

Building navigation using the <li> list tag

Assignments

1) Lab assignment: Using the files you worked on last week with the Apple iPod page, create a navigational menu using the Listamatic website and list tag as demonstrated in class.

2) Using the information you put together from your Communication Brief and Personas. Complete a re-design of your home page and landing page. I’m looking for you to:

  1. Keep in mind the wants/needs of your target audience(s).
  2. Push yourself. Think beyond the design you presented for your midterm. How can you improve the visual design and push your design forward? Be less concerned about how you will build the design technically and focus more on the visual.

Bring print-outs of the re-design of your home page and landing page for critique.

3) Bring print-outs of your personas as additional Process Documentation for next week’s critique.

Final Project Assignment (Due Week 14)

Your final project presentations are Tuesday, Week 14.  

No late projects accepted.

Using the prototype you developed for your midterm, the focus of the final project is to create a portfolio quality web site that incorporates design, strategy and interactivity. Your web site design should have a strong design aesthetic along with a strong concept. The site design should also reflect the technical skills you learned in this class

The final project web site specifications are:

  • 6 complete pages (and placeholder pages for other pages when applicable).
  • A clear navigation system.
  • A successful sub navigation system.
  • A strong visual design and concept that carries through the site.
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560).
  • You must use some html text in the site.
  • You must use div structure. (Do not build your site completely in tables! — or use Photoshop to save out HTML)
  • You must use an external CSS file.
  • Create a Snapz Pro (.mov) demo of your site (10 mins maximum).
  • Completion of all Process Documentation: Communication (Creative) Brief, Personas, Sitemap, and Wireframes. You need to have this “portfolio-ready,” meaning you will be graded on your presentation of this documentation. You will bring print-outs of this documentation to hand in to me and will also post digital versions to your process blog.
  • You are also responsible for documenting your entire process on your process blog.

You need to upload your final project to the class server in order to present your project to the class. Please do this BEFORE class on Monday, Week 14.

Design Process 

The Design Process I’d like you to follow can be found in the section above, “Process Blogs.” On the Process Blog page, I will provide more details about each of the ten steps. For the Final Project, I expect you to cover processes #1 — #10 on your WP blog.

1. Defining Project & Audience

2. Sketching

3. Information Design

4. Interface Design

5. Visual Design

6. Prototyping: Wireframes –> HTML

7. Usability Testing

8. Iteration

9. Repeat

10. Final Version

Resources

Possible sources for images other than Corbis:

Quiz 2 Review

We will have a quiz next week that will cover the following topics. Please review the notes below and come prepared for the Quiz!

1) Name 3 limitations of typography for the Web

  • A reduced selection of fonts
  • No hyphenation, making full justification look ugly when a column of text gets narrow
  • Poor control over kerning (ie, the spacing between the letters)
  • A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions and environments

2) Name 5 of the most commonly available fonts for the Web

Andale Mono

Times New Roman

Georgia

Verdana

Arial

Courier

Trebuchet MS

Comic Sans

Impact

3) To aid readability on the Web, what is the the average length of a line of text within your block of text?

For a block of text, the average line length should be around 40–60 characters per line.

4) If by default, the value for 1 em equals 16 pixels. How can you make it easier to determine your sizing using ems?

You can set the body tag “font-size” property to 62.5%.

body { font-size: 62.5%; /* 1em = 16px therefore 16px × 62.5% = 10px */ }

By doing so, 1 em will not equal 10 pixels.

5) What is the main reason to size your text using ems?

Using ems allows users to resize text in all browsers.

6) What web image type is the best to compress a photograph?

The jpg format is best for photographic images, complex images, images with soft edges

7) What kind of image is best compressed using the .gif web image format?

Gif is the best compression for graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.

8) What is image slicing?

Once a design is solidified, the designer must translate their Photoshop layout into the realities of HTML and limited download time. This involves compressing different parts of the layout in different ways (e.g. some parts will be GIF while others will be JPEG), and leaving some parts of the layout for live HTML. To do this, it’s usually necessary to cut the original Photoshop image into smaller pieces. This is called image slicing.

9) What is an easy way to remember the slicing process is as a 3 step process?

Step 1- slice

Step 2- name

Step 3- optimize

10) You can use Photoshop to quickly prototype a website, what is another application that is commonly used to prototype websites?

Adobe Fireworks is commonly used for prototyping.

What is Information Architecture (IA)?

Defining Information Architecture (from the IA Institute)

They define information architecture as:

  • The structural design of shared information environments.
  • The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.
  • An emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

Are these definitions definitive? Absolutely not. The craft is new and still taking shape. It’s clear on the center but fuzzy at the boundaries. This inherent ambiguity challenges us to think deeply and seek diverse perspectives.

Below material about Information Architecture from Web Information Architecture Deliverables and Diagrams.

Web Information Architecture Examples

1. Content Inventory (aka Content Survey, Audit)

A content inventory is intended to provide a consolidated snapshot of all the major sections, pages, and content on a Web site. This would include text, graphics, and multimedia. Some even go as far as to break content down into individual pieces or paragraphs of content. Sometimes a content inventory is performed on content that is not yet part of a Web site. This would be helpful for an organization that is collecting content to be placed on a new Web site. Card sorting would be helpful for organizing content in this situation.

Here a a couple examples of Web content inventory variations.

Survey – A high level review of a site’s main sections and pages. It enables you to develop an understanding of the general site scope and major chunks of content.

Detailed Audit – this is a comprehensive inventory of every page on a site. This inventory will list every page’s filename, title, URL, and possibly its file type and a description. It’s also helpful to assign a unique page ID that will correspond to the pages location on the Site Map.

Content Map – This simply entails laying out the site content in a graphical format. If you’re performing a content inventory on a current site, then an effective site map might nullify the need for a content map.

Sample content inventory (pdf)

Read more about content inventories for the Web

2. User Profile (aka Personas)

A user profile or persona is a realistic (but likely fictional) example of a target audience member. The profile commonly takes the form of a one page piece that lists the user’s name, occupation, education, demographic characteristics, computer/web experience, and site goals or likely tasks. A stock photography picture is usually used to give a face to the profile.

These profiles can be extremely useful in keeping the web team focused on the user’s needs. When making decisions it’s helpful to be able to say “John B. really would have trouble with this,” or “Adding this link here would really make life easier for Sharon.” User profiles also help to reinforce the importance of an Information Architect. It is a deliverable that documents the establishment of target audiences, a process that might have taken a considerable amount of effort and research.

Read more about user profiles for the Web

3. Use Case (aka User Scenario, Task Analysis, User Flow)

Use cases are narratives that describe how a user might use a system or site. A use case illustrates a sequence of events that an actor (external agent) might go through in order to accomplish their goal. A use case is similar to a process flow.

Essential Use Case – Narratives that remain relatively independent of a specific technology or implementation.

Real Use Case – Narratives that incorporate the current technology and/or site design. This is basically the same thing as a Process Flow.

Sample use case (pdf)

Read more about use cases for the Web

4. Sitemap (aka Site Map, Site Hierarchy Map, Site Diagram, Blueprint, Web Map)

Site maps are one of the most critical and widely used web information architecture tools (along with wireframes). They show the overall structure and hierarchy of a Web site. They can be used as the first step in laying out the web information architecture of a site, and will provide the framework upon which to base site navigation. When setting out to understand the IA of a current site, or design an IA for a new site, start by sketching out a rough site map. Site maps can be constructed in a wide variety of formats, but the general structure and principles remain relatively consistent.

Sample Site Map (pdf)

Simple Site Map (pdf)

Read more about Web sitemaps

5. Wireframes (aka Wire Frame, Page Architecture, Low Fidelity Mock-Up, Page Schematic)

Wireframes (combined with Site Maps) are the bread and butter tools of information architects. They are useful for conveying the general page structure and content requirements for individual pages. Wireframes need to achieve a happy medium between being too precise and too loose. What is meant by this is that a wireframe that is too precise or detailed may leave little creative room for the designer. A wireframe that is too loosely defined can easily be misinterpreted by designers and developers. The format used should be dependent upon the audience.

Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about yet. They also help to keep a paper trail of functional and design decisions that are made. Wireframes are sometimes used to get people thinking and generate requirements. Wireframes will sometimes end up evolving into the default requirements document for a Web site.

Sample Wireframes (pdf)

Sample Wireframes 2 (pdf)

Read more about Web wireframes

6. Paper Prototype (aka Low Fidelity Prototype)

Paper prototyping involves using screen shots and/or hand sketched page diagrams to quickly elicit user feedback and identify interface IA problems. Using a paper prototype involves conducting a usability test using a low fidelity prototype. These prototypes can be created electronically using programs such as MS Word, Excel, Visio, or various WYSIWYG editors. However, in many cases paper prototypes are nothing more than loosely hand-sketched designs. The quicker these paper prototypes can be created, the greater the benefit. Paper prototypes shouldn’t incorporate specific design elements such as color, style, fonts, detailed graphics, etc.

You may be hesitant to present something that might resemble a 6th graders art project to a client. However, with a bit of education the client will be appreciative of the time and money you are saving them.

7. Story Board (aka Storyboard)

It’s debatable whether a storyboards are anything different than a set of wireframes, but they can tend to illustrate more of a process than a wireframe does. However in many cases IAs add usage and process notes to wireframes. You may also see storyboards (or something resembling them) referred to as Blueprint, Schematic, Grey Model, Interaction, Interaction Wireframe, IA Requirements Document, Design Document Story boards typically combine information from process flows, site maps, and other IA deliverables. They can be used to illustrate a single screen or a whole system or site. They usually offer screen shots or some type of graphical representation of the screens, combined with a narrative description. Storyboards help to document the functionality of the site and describe how users will potential use the interface. These deliverables can be used by programmers, project managers, upper management, and clients to ensure that everyone is on the same page. Storyboards often turn into the initial requirements documents that programmers begin coding from. These deliverables provide an excellent chance to get client buy in and sign-off on the proposed function laity and IA of a site. Story boards can be similar to a detailed wireframe, and there is a lot of crossover between the two.

Sample Story Board 1

Sample Story Board 2

8. Style Guide

Style guides are used to document baseline design requirements for a site. They usually define font classes and a wide range of various design conventions to be followed. This deliverable would generally be considered the responsibility of a designer, but in some instances the Information Architect may be covering multiple roles. HTML Wire frames are a good solution to solve multiple needs; deliverables for clients or management, and functional templates to start programming from.

Sample Style Guide (pdf)

Read more about Web style guides

Above material about Information Architecture from Web Information Architecture Deliverables and Diagrams.

Creating navigation using the list tag

I modified the Jeffrey Zeldman’s DWWS menu example from the Listamatic web site:

http://css.maxdesign.com.au/listamatic/horizontal09.htm

You can find the finished page here.

Below is the HTML for the nav container:

<div id="nav">
 <ul>
 <li><a href="store.html">Store</a></li>
 <li><a href="mac.html">Mac</a></li>
 <li id="active"><a href="mac.html">iPod</a></li>
 <li><a href="iphone.html">iPhone</a></li>
 <li><a href="ipad.html">iPad</a></li>
 <li><a href="itunes.html">iTunes</a></li>
 <li class="end"><a href="support.html">Support</a></li>
 </ul>

 </div>

Below is the CSS for the navigation bar from my demonstration. It’s slightly different from the code on the Listamatic site:

#nav {
 padding: 0;
 width: 980px;
 height: 35px;
 border: 1px solid #aaaaaa;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background-color: #aaaaaa;
 margin: 10px 0 0 0;
}

#nav ul {
 border: 0;
 list-style-type: none;
 text-align: center;
 width: 980px;
 margin: 0;
}

#nav ul li {
 display: block;
 float: left;
 text-align: center;
 padding: 0;
 margin: 0;
}
/* ----- [ the properties below add most of the styling and precise positioning for the menu  ] ----- */
#nav ul li a {
 background: #aaaaaa;
 width: 98px;
 border-left: 1px solid #ccc;
 border-right: none;
 padding: .7em 1.2em;
 color: #333;
 display: block;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1.3em;
 line-height: 18px;
 text-decoration: none;
}

/* ----- [ the properties below add the hover and the color for the active(on) state  ] ----- */
#nav ul li a:hover {
 color: #fff;
 background: #666666;

}
#nav a:active {
 background: #333;
 color: #fff;
}
#nav li#active a {
 background: #333;
 color: #fff;
}
/* ----- [ this property adds the vertical line at the end of the navigational menu  ] ----- */
.end {
 border-right: 1px solid #ccc;
 height: 35px;
}

Category: Classes

Tagged:

Comments are closed.