March 25 Class: Writing for the Web

23 Apr

Learning Objectives:

  1. Apply principles for writing for the web
  2. Define excise
  3. Identify examples of excise and propose solutions for removing excise

In this class, we first discussed the concept and examples of excise:

We also read about how Web users hate and are bad at reading on the Web. Therefore, you need to remember tactics and strategies to write for Web (e.g., eliminate the needless words, and design scannable layouts). Please revisit the readings posted on the CN, and check this reading you did in the class as well:

http://www.nngroup.com/articles/how-users-read-on-the-web/

 

 

March 13 Class: Homepage Design

23 Apr

Learning Objectives:

  1. Explain the purposes a good homepage needs to fulfill
  2. Analyze homepages and evaluate how they fulfill these purposes
  3. Process to decide homepage elements

The mini lecture used the slides below. Pay special attentions to the 3 questions a homepage should answer.

In lab exercise, you examined and criticized home pages of several websites and phone apps:
Websites: slideshare.net; slack.com; mint.com; zotero.org; evernote.com
Apps: Flipboard; Dipic; Instagram

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.

Follow

Get every new post delivered to your Inbox.

Join 48 other followers