Spring’15 Class notes: Day 19 – Content & Writing; Excise

24 Mar

Learning Objectives:

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

  1. Apply content strategy thinking to specific problems
  2. Apply principles for writing for the web
  3. Define excise
  4. Identify examples of excise and propose solutions for removing excise

We first tried to walk a few minutes in the shoes of a content strategist for Purdue CGT and thought how we would go about it and what it would be like.

Then, we looked at several homepages of similar products (Zotero, Endnote, RefWorks, Papers, Mendeley) and identified the following strategies they use for writing effectively on the Web:

  • Video (understandable without audio)
  • Short plain description
  • Use cases with screenshots
  • Clear & visible call to action
  • Where do I start? – CLEAR
  • Pattern: icon, title, 3 lines of text
  • Simple words, short sentences
  • Shallow structure – don’t make users click too many times!
  • Multiples headings
  • Vary layout, background, alignments
  • Minimalist color scheme

After you reviewed slides explaining the concept of excise and provided your own examples, you proceeded to think about how you would tell your story in your portfolio – and how you would write for people who don’t read.


Spring’15 Class notes: Day 18 – Homepage design

24 Mar

Learning Objectives:

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

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

To jog your memory, here are the slides we used in class:

Spring’15 Class notes: Day 17 – Navigation design, information architecture, card sorting.

24 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 (Where am I? Where have I been? Where do I go from here?)
  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, topical, life-event, etc.)
  5. Solve IA problems using card sorting

Here is a version of the slides we used in class:

Spring’15 Class notes: Day 16 – Wireframes and Prototypes

24 Mar

Learning  Objectives:

At the end of class, students will 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

Besides the differences among them, we talked about low vs. high fidelity prototyping – and how there is a continuum from low to high.

Also, remember that as long as they are interactive, even hand-drawn sketches can be made into a low fidelity prototype.

Spring’15 Class notes: Day 14 – Heuristic Evaluation

24 Mar

We learned about Nielsen’s 10 famous heuristics for good usability and how to conduct heuristic evaluation. We worked in lab on an exercise where you had to find examples of the 10 heuristics applied well and violated.

Spring’15 Class notes: Days 12 &13: Design principles based in human perception and cognition

24 Feb

On Days 12, 13, and 14 we learned about human perception and cognition so we can design interfaces that work well with the human mind.

Day 12 – The Gestalt principles of visual perception are fundamental. They explain how we organize visual signals into groups and patterns. These are the inherent biases of the human mind. We can use them to create structure, organization, or fun visual effects.

Below are the slides with examples we used in class.

Day 13 – was all about creating visual structure. You can use visual hierarchy and grids to create layouts that guide the eye meaningfully and communicate what is most important, and where people should look. Try to remember some of the techniques for creating visual hierarchy:

  • create contrast through size, color, shape, alignment, saturation
  • create patterns through chunking and the use of negative space
  • capitalize on the human eye’s tendency to start reading from top left by using the Z pattern or the inverted F pattern.

Below are some slides on visual hierarchy:

Day 14 – we talked about attention, information scent, and memory.

Remember that human attention has 2 main mechanisms:

  • top-down, which the person controls with their will
  • bottom-up, which is “grabbed” by external stimuli in the environment

Understanding how attention works can help you design in ways that not only GET ATTENTION, but also you learn to support the person’s top-down attention. People use top-down attention when they search for relevant information that can help them accomplish their goals. So, if you know what people’s goals are, through user research, you can facilitate that process. One way in which you can facilitate it is through information scent. If you provide links and icons with strong information scent, people have to think less, guess less, and accomplish their goals faster.

Information scent is an estimate, or a probability. When users look at a link, they try to predict what is on the other side – what will they find if they click it? If they are unable to predict, or are uncertain or wrong about their prediction, this means the link has poor/weak information scent. For example, what do you predict you will find if you click on the words “information scent” at the beginning of this paragraph? How confident are you in your prediction? Click the link. Were you right? If you were able to predict confidently and correctly, the link has strong information scent. How about this, though? What do you predict is at the link from the word “this”? How confident are you? Were you right? If you can’t predict confidently and correctly, the link has weak information scent.

Memory is a weakness for most people. It is hard to remember things. It is hard to recall without any prompt or help. However, it is relatively easy to recognize items and remember that way. This is why multiple-choice exams are easier than essay exams: Because you recognize the concepts from class, and this helps you remember, as opposed to starting with a blank page and having to recall everything. Also, imagine I ask you to name the textbook you used in your junior high school English class. You probably can’t recall. But, if I show you 5 different books, you will probably be able to recognize and thus remember the one you used back then.

Below are the slides I used in class.

Spring ’15 Class notes: Day 10 – Conceptual design intro

16 Feb

In this class, we moved into the creative part of conceptual design. The objectives were:

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

  1. Use scenarios to 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.

You took the personas developed in the previous class and created scenarios and design requirements for an app that would help students maintain motivation to learn. You then practiced effective (I hope!) brainstorming and used thumbnail sketches to generate very many ideas. Remember that at this stage, quantity of ideas is more important than quality.

You then sorted through the ideas you generated to come up with 1-2 concepts for the new product that everyone on your team could agree would be worth pursuing further.

Please also remember how sketching is used this early in the UX process as a way to generate ideas.