Information Design – Week 10

Topics: Page Designs: Unity and Continuity
Lab / Activity: Project Lab / Revise Past Projects
Homework due this week: 3 Comps for Company Homepage
Homework due next week: 4 Page Designs

Information Design: Final Project
4 Page Designs for your Company’s site: (20pts)
All pages should share the same look and basic layout.

- Home page
- Category Page (listing items in a category, showing range)
- Product Detail Page (focus on one product, description, choose color/size etc.)
- Shopping Cart Page (or checkout form)

Grading: 20 points total
__ (4) Theme: Color scheme and fonts support the theme of the company.
__ (4) Message: Imagery & Emphasis make it clear what the site is about.
__ (4) Unity: all pages share a similar layout, look and feel.
__ (4) Layout: all elements are aligned and spaced consistently.
__ (4) Usability: Type is legible and consistent.

** Extra credit: 7pts awarded for making an interactive site mock-up! Create all of the above pages as a functioning prototype.

Information Design – Week 9

Topics: Prototype Testing
Lab / In-class activity: Paper Prototype Testing, Keywords, Personas
Work due this week: Site Wireframes, Reading: Chapter 9
Homework for next week: 3 Comps for Site Homepage, Reading: Chapter 8

DUE WEEK 10:
3 Design Comps for Site Homepage: (10pts)
Create 3 different rough designs for your company’s site.
Each design should have a different style, imagery, and color scheme.

- Include a Logo for your company that reflects the company’s mission (the Logo can be the same on all 3 comps).

- Your design should communicate the “range of offerings” that your company provides – make it obvious what type of products are being sold.

- Navigation items should be visually distinct from other elements of the site

- Category labels should be simple and obvious, and suggestive of what items are in the category.

Grading: 10 points total:
__ (2) Required details are present, all text is legible.
__ (2) Layout: Design follows a consistent grid, spacing, and alignment.
__ (2) Emphasis & Imagery are relevant to the theme of the client.
__ (2) Color Scheme & Typography are relevant to the theme of the client.
__ (2) Variety: Each comp has a different look.

Reading Questions for Chapter 8: (4pts – Due Week 10)

1 ) Explain the different scenarios in which you would want to use a Wizard, Control Panel, or Toolbar.

2 ) Why is interface design considered to be “disputed territory”? How does the author suggest dealing with such territory issues?

3 ) What is the user’s “locus of attention”?

4 ) What techniques can designers use to create a “visual code” for grouping related items together?

5 ) What design techniques can you use to keep a user focused on their task? (For example, keeping them from abandoning a shopping cart transaction)

6 ) What methods can be used to make links visible and apparent?

7 ) What suggestions does the author give for defining Global Navigation?

8 ) What type of links belong in a secondary “bottom navigation”?

9 ) What is the difference between “Pogo-sticking” and “Crab-walking”? What behaviors do they require of the user, and what design techniques are commonly used to support them?

10 ) Explain the situations in which it is appropriate to use the following: Radio buttons, Check Boxes, Drop-down menus, Selection List.

GRADING: READING QUESTIONS (4 points total)
__ (1) Use complete sentences.
__ (1) Answers demonstrate knowledge of the assigned reading.
__ (1) Answers are in your own words, not copied from the book.
__ (1) All questions are answered.

Information Design – Week 8

Topics: Paper Prototyping, User Personas, Keyword Research
In-class Activity: Video Response, Choose either Personas or Keyword assignment
Homework due this week: Site Blueprint
Homework due next week: Site Wireframes

*NOTE: in class today, you may do the “personas” assignment in my Faculty Out-box, OR you may do the “keywords” assignment listed here below the homework.

Please turn in all homework, in-class work, revisions, and late work in a folder with your name on it to my Faculty In-box in the “Information Design” folder.

Due week 9: Site Wireframes (10pts)
Next week, we will test out a paper prototype of your company’s site. Research your company’s competitors for inspiration. You may draw your Wireframes by hand, or you may create digital files. See examples on pages 284-285

Create Wireframes for the pages involved in the following user tasks:

a) Finding 2 Specific Items
Choose 2 items on the site from 2 different categories, and create wireframes for the screens the user would see while looking for each product. (homepage, category pages, individual item pages, etc.)

b) Shopping Cart and Checkout
Create wireframes for the screens the user would see while viewing his/her shopping cart, and purchasing the product. (view/update shopping cart, entering payment information, confirmation of purchase, etc.)

c) Returning an item
Assume that a user has purchased an item and wants to return it. Create all the screens necessary for them to return the item. (Will it be under a “help” or “customer service” or “FAQ” section? Include a form where the user can explain the reason for their return.)

GRADING: Site Wireframes (10pts total)

__ (2) Unity: use a consistent layout on all pages
__ (2) Navigation: information is organized into an intuitive hierarchy
__ (2) Finding 2 specific items: pages are organized and intuitive
__ (2) Shopping Cart & Checkout: pages are organized and intuitive
__ (2) Returning an Item: pages are organized and intuitive

OPTIONAL IN-CLASS ASSIGNMENT: KEYWORDS
For week 8, you may do the “personas” assignment in my Faculty Out-box, OR you may do the following assignment:

Information Design: In-class Assignment: Finding Keywords
“Keywords” (aka “Search Criteria” or “Tags”) are words that define your product in order for it to be found by search engines. Keywords should be as specific as possible, but be careful: it’s good to check and see how often a keyword is being “searched for”. Below is a series of tools that analyze keywords and how often people are searching for them.

In class today, define keywords for your company’s site.
Use the list of similar terms that you developed last week as a starting point.
Turn in your lists of keywords as a word or excel document.

1) List 10 keywords for your company’s home page:
(General terms that apply to the company as a whole)
List the estimated search volume of each keyword.

2) List 10 keywords each for 2 of your company’s products:
(More specific terms, related to each particular product.)
Choose 2 products from your company’s inventory,
and find 10 keywords to use on the pages related to each item:
List the estimated search volume of each keyword.

*Note: Consider Location!
If your company is location-based (real estate, doctor’s office, restaurant, etc.),
it is important to include the address and name of the city in your keywords.

Check how often a keyword is searched for:

Google Keyword Analyzer:
https://adwords.google.com/select/KeywordToolExternal

Overture Keyword Suggestion Tool:
http://www.vretoolbar.com/keywords/

Analyze an existing website to find search terms:
http://seokeywordanalysis.com/seotools/Default.asp

Open Directory Project:
submits your site info to most major search engines.
http://www.dmoz.org/

Top searches: What are people searching for?

MetaSpy
http://www.metacrawler.com/info.metac/searchspy/results.htm?filter=1

Google ZeitGeist
http://www.google.com/press/zeitgeist.html

Yahoo Buzz
http://buzz.yahoo.com/

AOL Hot Searches
http://hot.aol.com

Additional Office Hours

I’ve made additional time available for tutoring, critiques, and questions.

Fridays, 5:30-7pm
Room #165

Please email me in advance if you intend to stop by:
lcesari@aii.edu
If you need tutoring but cannot schedule during this time or my other available time (Thursday 3-5pm), please email me to schedule an alternate time.

Information Design – Week 7

Topics: Site Blueprints, Controlled Vocabularies
Lab / Activity: Visual Vocabulary for Site Blueprinting, Defining Controlled Vocabularies
Homework due this week: HW5: Company Data, Reading Ch.5
Homework due next week: HW6: Site Blueprint, Reading Ch.9

Homework #6: Due Week 8
Site Blueprint & Reading Ch.9

I) Site Blueprint: (10pts)
Use Jesse James Garrett’s Visual Vocabulary System to create a Blueprint of your Company’s site, including product pages and a shopping cart.
Link: Visual Vocabulary for Site Blueprints

GRADING: Site Blueprint (10 points total)
__ (4) Symbols are used correctly
__ (2) All pages of your company’s site are represented
__ (2) Hierarchy: items are placed according to a natural flow.
__ (2) Graphic Quality: use consistent alignment, spacing, and fonts

II) Reading, CH.9: Making it all up, Writing it all down

1) Why is it useful in the information design process to use drawings instead of a computer-based plan?

2) Explain the difference between a Sitepath Diagram, a Topic map, an Interactive storyboard, and a Wall Diagram. When would you use each type of document?

3) What are the advantages and disadvantages of the following site map layout structures – tree, comb, star, and tab?

4) Explain the purpose of a wireframe document.

5) What is the “trouble with wireframes”, as defined by the author? How would you counteract these troubles?

GRADING: READING QUESTIONS (4 points total)
__ (1) Use complete sentences.
__ (1) Answers demonstrate knowledge of the assigned reading.
__ (1) Answers are in your own words, not copied from the book.
__ (1) All questions are answered.

Information Design – Week 6

Topics: Midterm Presentations, Organization
Lab / Activity: Presentations, Organizing Large Data Structures
Work due this week: HW#4 – Complex Data Poster
Homework for next week: HW#5 – Company Data Documentation, Reading #4: Chapter 5.

Homework #5: Company Data Documentation & Reading: Chapter 5

I) Invent your “Company”: For the rest of the quarter, you will be given assignments that relate to a larger project: designing the information architecture for an online retailer. This week, develop the following items:

COMPANY DATA (10 points total)
__ (2) A Name for your Company
__ (3) A list of 100 products that they will offer through their online store
__ (2) Find 2 similar companies with websites – (bring in URLs and Screenshots)
__ (3) Taxonomy / Organization system (see reading Ch. 5)

II) Reading, CH.5: Organization
1 ) How can a site’s design help assure users that they have reached the right place?

2 ) How can you make it clear to the user whether or not the site has what they are looking for?

3 ) How can you encourage for the user to browse further once they have found what they are looking for?

4 ) What is a Faceted Classification System, and when would you use it?

5 ) What should be considered when naming Navigation Labels?

6 ) What does the author mean by “categorization provides context” and “categorization is shaped by context”?

7 ) What is a Card Sort? Why is it useful to conduct a Card Sort?

8 ) Develop a Taxonomy (organization system) for your Company’s Site based on your card sorting results. Create an outline of the categories and sub-categories your site will use to organize the products.

GRADING: READING QUESTIONS (4 points total)
__ (1) Use complete sentences.
__ (1) Answers demonstrate knowledge of the assigned reading.
__ (1) Answers are in your own words, not copied from the book.
__ (1) All questions are answered.

Information Design – Week 5

Topics: Presentation & Critique of Data Poster Rough Drafts / Project Lab
Lab / In-class activity: Presentations, Lab to work on Data Posters
Work due this week:HW#3: Complex Data Poster, Rough Draft, Reading #3: Chapters 3 and 4
Homework for next week: HW#4: Finished Data Poster

Information Design: Homework Due Week 6
Complex Data Poster – Finished (20pts)

Create a poster charting out the relationships between 100 different data points of ANY SUBJECT. Use graphic symbols to convey the information. Include a key explaining your system.

Phase 2 – Due week 6:
1) Show at least 100 data points in your design.
2) Show least 3 different relationships between the data points.
3) Include a key that decodes the visual system you used: describe what the symbols mean.

GRADING : Complex Data Poster – Phase 2 (20 points total)
__ (4) 100 Data points are represented using graphic symbols.
__ (4) Include a key that explains the visual system used.
__ (4) Text is legible, fonts are consistent.
__ (4) Consistent Graphic Style
- use unified themes & graphics
- don’t mix iconic and realistic shapes!
__ (4) Thematic Design: Theme of the chart should be obvious at first glance.

School Closure Update

The school was closed during Week 4 (Oct.22-27), due to the county-wide fire emergency.

We will be continuing on with the Week 4 class content during Week 5 (Oct.29-Nov.3).

Assignments due Week 4 are now due Week 5.

I will note any changes to the course content and deadlines in class Week 5.

Information Design: Week 3

Topics: Unconventional Infographics, Complex Information Structures
Lab / In-class Activity: Edward Tufte, Mark Lombardi, Visual Complexity
Homework due this week: Proportional Thematic Data Chart
Homework due next week: Complex Data Poster, Phase 1 (Midterm Project)

Information Design: Homework Due Week 4
Complex Data Poster Phase 1 & Reading, Chapters 3 & 4

I) Complex Data Poster – Phase 1 (10pts)
Create a poster charting out the relationships between 100 different data points of ANY SUBJECT. Use graphic symbols to convey the information. Include a key explaining your system.

Inspiration: Visual Complexity

This project is done in 2 phases: a conceptual rough is due week 4, and the final design is due week 5.

Phase 1 – Due week 4:
1) Show at least 20 data points in your design.
2) Show least 3 different relationships between the data points.
3) Include a key that decodes the visual system you used: describe what the symbols mean.

Example Project:
For example, if you like music, start with your 3 favorite musicians, and research each one to find who has influenced them. Then, research their influences to find their influences, and so forth. Also, research other relationships that you find between musicians, such as collaborations, genre, era, label affiliations, style, etc. Each relationship should be visually noted in your chart using graphic symbols, and a key of your own design.

Recommended Links for Music Research:
allmusic
Rolling Stone
Live Plasma
MusicMap
Musicovery

GRADING : Complex Data Poster – Phase 1 (10 points total)
__ (2) 20 Data points are represented using graphic symbols.
__ (2) Inlcude a key that explains the visual system used.
__ (2) Text is legible, fonts are consistent.
__ (2) Consistent Graphic Style
- use unified themes & graphics
- don’t mix iconic and realistic shapes!
__ (2) Thematic Design: Theme of the chart should be obvious at first glance.

II) READING #3: Chapters 3 & 4 (4pts)
Answer questions in writing – please type or write neatly.

1 ) What is the “squinty eye”? When would you use it?

2 ) Compare the 4 designs on p.58-60. What tendencies do the engineers, designers, and CEO have about building a site?

3 ) What kind of information can be found by talking to a company’s Marketing Department?

4 ) How would you determine whether someone would be a good subject for a user research interview?

5 ) How would you format interview questions to avoid getting “bad information”?

6 ) What techniques would you use to keep interviews “neutral”?

7 ) What techniques would you use to keep the interviewee talking and get the most information possible?

8 ) What is the purpose of a paper prototype test?

9 ) Imagine that you are starting a company. Create a set of 8 “screening” questions and follow-up questions (like the ones on page 75) that relate to what your company does.

10 ) Interview 2 people using your screening questions, and record the data.

GRADING: READING (4 points total)
__ (1) Use complete sentences.
__ (1) Answers demonstrate knowledge of the assigned reading.
__ (1) Answers are in your own words, not copied from the book.
__ (1) All questions are answered.

Information Design – Week 2

Week 2:

Topics: InfoGraphics 1: Graphs, Charts, & Tables: Showing Proportional Data
Lab / In-class activity: Documenting Proportional Data with Excel & GraphicsSoftware
Work due this week: 3 Public Signs, Reading: Intro & Chapter 1
Homework for next week: Proportional Data Chart, Reading: Chapter 2

Links:
Edward Tufte, Mark Lombardi, Understanding USA

Due Week 3, beginning of class:
Thematic Proportional Data Chart (10pts) + Reading #2 Chapter 2, “First Principles”(4pts)

I) Thematic Proportional Data Chart (10pts)

Richard Saul Wurman is famous for combining statistics and design to create “themed” charts, which use graphic symbols to communicate visually the subject of the chart as well as the chart statistics. This week, find a statistic and create a “Theme Chart” of your own.

Create an informational poster that shows proportional data in the form of a chart or graph, and also conveys a visual thematic message, using symbols and imagery related to the theme of the chart.

You may choose the theme of the chart and the data you would like to represent.

Here are a few places you can look:

GeoHive
US Census Bureau
US Social Statistics
US Economic Statistics

If you can’t think of a subject, here is an example assignment:

EXAMPLE: Food Pyramid Revised

In 2005, the U.S. Department of Agriculture released new dietary recommendations and a
new food “pyramid.” You can learn more about it in this article from NPR or at the USDA’s official site. How effective is the graphic the government used to display this information? Does it help you understand what foods and what portions are recommended? Is the pyramid metaphor really the most appropriate graphical idea they could have used?

For this assignment, we’ll see if you can do better. First go to the USDA’s site. Enter your information under the “My Pyramid Plan” and check the results. Save the information, and convert it into a more usable graphical representation of the USDA’s recommendations. Consider how you can improve the graphic to make it more usable, accurate and interesting. Include your daily recommendations for the following:

* Grains
* Vegetables
* Fruits
* Dairy
* Oils
* Meat and beans

ALL GRAPHICS MUST BE YOUR ORIGINAL WORK – DO NOT USE CLIP ART!

Turn in digital files of your work in .png .jpg or .pdf format.

GRADING : Thematic Proportional Data Chart (10 points total)

__ (2) Proportional Data is represented correctly.

__ (2) Graphics convey the Theme of the poster

- it should be immediately clear what the chart is about

__ (2) Relevant Symbols & Colors are used to represent the data.

- use unified themes & graphics

- don’t mix iconic and realistic shapes!

__ (2) Text is legible, and consistent fonts are used.

__ (2) Image Quality: chart should be at least 8×10″ at 72dpi, or larger.

__ TOTAL out of 10 points

II) READING #2: Chapter 2, “First Principles” (4pts)

Answer questions in writing – please type or write neatly.

1 ) What are the goals of “Wayfinding”? How can good site design help achieve these goals?

2 ) What types of feedback do users need?

3 ) What can you do as a designer to make an experience “ergonomic” to the user’s hands, eyes, and ears?

4 ) What standards do you notice that are common to many sites? Under what circumstances would you consider working outside of these standards?

5 ) How can you prevent users from making errors? If a user does make an error, how should a site respond?

6 ) How would you organize a site to allow users to navigate by “Recognition rather than Recall”?

7 ) What should you consider when designing advanced features for expert users?

8 ) Where and how should Help content be provided in an interactive experience?

GRADING: READING #2 (4 points total)

__ (1) Use complete sentences.

__ (1) Answers demonstrate knowledge of the assigned reading.

__ (1) Answers are in your own words, not copied from the book.

__ (1) All questions are answered.

__ TOTAL out of 4 points