Information Architecture & Navigation

11 Mar

Learning Objectives:

At the end of class, students will be able to:

  1. Explain the 3 questions that navigation must answer at all times

  2. Apply the 3 questions to critique existing interfaces

  3. Define “Information Architecture” (IA)

  4. Recognize and create IAs using different organization logics (task-based, audience-based, topica, life-event, etc.)

  5. Solve IA problems using card sorting

The mini lecture used the slides below. You then engaged in one lab exercise that identified how some major sites answer the 3 main navigation questions, and in a lab activity that used card sorting to propose a better IA for this course.

Sketches, Wireframes, Mockups, Prototypes

11 Mar

The objectives were that at the end of the class, students would be able to:

  1. Differentiate between: sketch, wireframe, mockup, and prototype

  2. Explain the utility of each one

  3. Create sketches by hand and wireframes in Balsamiq

We discussed the differences between terms using the white board, but here are some slides that capture the same ideas:

CGT 256 Learning Objectives by Class

25 Feb

Class 1: Course welcome; Design process overview

  1. Students are exposed to UCD process

  2. Students value active learning approach

  3. Students are motivated to engage actively in their own learning

  4. Students value course objectives and approach

Class 2: Introductions; Why websites suck; UX careers

  1. Increase comfort by sharing some personal information

  2. Identify types of issues in websites that suck

  3. Consider UX as a career option

Class 3: Important definitions; GUI history

  1. Explain what major moments in GUI history are and how they influenced today’s interfaces.

  2. Define popular concepts and acronyms such as UX, HCI, IxD, UI, interface, usability

Class 4: What is usability? What is UX? The UX process

  1. Appreciate the importance of user-centered design (user error = design error)

  2. Distinguish between UCD and design as art

  3. List the major steps of UCD

  4. Identify examples of affordances

Class 5: Step 1: User research – but first, clients and goals

  1. Decide where to begin a UCD project

  2. Decide who are the parties they need to talk to

  3. Decide what questions to ask of each party

Class 6: Planning and conducting user research

  1. Set goals for user research

  2. Plan user research for various problems

  3. Conduct basic user research with contextual inquiry and focus groups

Class 7: User research continued

  1. Create a plan for conducting user research to inform product development.

Class 8: Personas, scenarios, design requirements

  1. Explain the utility/value of personas and scenarios in the UCD process

  2. Define the concepts

  3. Identify the parts of a persona and a scenario

  4. Construct personas and scenarios

Class 9: Analyzing user research data – affinity diagramming

  1. Explain the purpose of affinity diagramming

  2. Conduct affinity diagramming to make sense of qualitative data

Class 10: Step 2: Conceptual design – brainstorming, sketching, creativity

  1. Extract design requirements from user data.

  2. Conduct brainstorming session according to the rules for effective brainstorming.

  3. Use thumbnail sketches as a way to generate ideas.

  4. Reflect on the creative aspects of the conceptual design process.

Class 11: Fundamental usability principles 1: Gestalt

  1. Identify Gestalt principles in existing designs.

  2. Apply Gestalt principles to create a new design.

Class 12: Fundamental usability principles 2: Visual hierarchy and structure (grids)

  1. Identify the principles used to create visual hierarchy in existing designs

  2. Use visual salience to create visual hierarchy

  3. Identify grid systems on existing designs

  4. Use the 960 grid system to create different Web layouts

Class 13: Fundamental usability principles 3: Attention, information scent, recognition > recall

  1. Explain how attention works and its design implications.

  2. Explain the concept of information scent and its design implications.

  3. Explain the principle “Recognition rather than Recall” and its design implications.

Class 14: Fundamental usability principles 4: Nielsen’s 10 heuristics; Heuristic evaluation

  1. Apply Nielsen’s 10 heuristics to critique interfaces.

  2. Conduct heuristic evaluation.

Class summary: Attention, Information scent, memory

25 Feb

The learning objectives for this class were:

  1. Explain how attention works and its design implications.

  2. Explain the concept of information scent and its design implications.

  3. Explain the principle “Recognition rather than Recall” and its design implications.

We (I?) talked through the slides below and you synthesized Design Implications in your reflection.

Class summary: Visual hierarchy & structure; Grids

25 Feb

The learning objectives for this class were:

  1. Identify the principles used to create visual hierarchy in existing designs

  2. Use visual salience to create visual hierarchy

  3. Identify grid systems on existing designs

  4. Use the 960 grid system to create different Web layouts

You first look at some examples and identified how they create visual hierarchy:

Then, we talked a bit about techniques for creating visual hierarchy using these slides:

You then did an exercise where you redesigned the way flight ticket information would be presented in an iPhone travel app.

Then, we moved on to grid layouts. We started by counting columns in the following examples:

We then discussed the difference between columns and grid units (they might be much smaller than columns). I showed some slides from this deck:

You then sketched 3-4 different website layouts on thumbnail print-outs of browser windows with the 960 grid system.

Class summary: Gestalt principles of visual perception

18 Feb

The objectives of this class were:

  1. Identify Gestalt principles in existing designs.
    You reviewed the slides below and identified the principles in each example.

  2. Apply Gestalt principles to create a new design.
    You created a layout for a course home page using only text, which forced you to employ the principles of similarity and proximity.

The resources we used in class are embedded here:

 

Class summary: Conceptual Design

18 Feb

On day 10 we moved to the second step of the UCD process, conceptual design.

We continued the lab exercise from the previous class and used the personas to derive design requirements for an app that would help motivate students to learn. You engaged in several creativity exercises in order to generate ideas:

  • brainstorming using design probes (the cards I gave you)
  • quick thumbnail sketches
  • sketching a general concept

The purpose was to experience what it is like to be creative on demand, and to see how you can use some activities to stimulate idea generation. Remember that at this stage, the quantity of ideas is more important than quality. Here is the sheet with instructions you got in class, in case you don’t remember.

Follow

Get every new post delivered to your Inbox.

Join 48 other followers