Skip to content

Latest commit

 

History

History
105 lines (79 loc) · 5.15 KB

6-1.md

File metadata and controls

105 lines (79 loc) · 5.15 KB
Raw

Visual Design

CS 349 - User interfaces, LEC 001

6-6-2016

Elvin Yung

Slides

Why Discuss Visual Design?

  • You need to know how to present your interface to the user.
  • People shouldn't have to think when they use your interface!

Bad interfaces

An example of a bad interface At least it's not phallic.

Objectives

  • Your interface should be easy to understand - design with the human's conscious and unconscious capabilities in mind.
  • Pre-attentive processing happen at a lower level than conscious thought. We unconsciously process a lot of
  • Keep things simple!
  • (But not too simple. You want the user to still be able to do the things they want to do.)
  • Basically, remember also that essential can conflict with simple - expert users need specialized interfaces.

Ultimate sophistication

(Source: http://rhymeswithorange.com/comics/may-23-2013/)

Organization and Structure: Gestalt Principles

  • Ways that we look at the world and find patterns.
  • Our brains are wired to look for patterns.
  • Gestalt principles describe some of the ways we do this real world.
  • The idea is that you can build an interface that takes advantage of how our minds group things.

Proximity

  • We associate things more strongly when they are close to each other.

  • e.g. items that are spaced more closely vertically looks like columns, more closely horizontally looks like rows.

  • Example: sign at Big Bend National Park, Texas

Bad proximity

Similarity

  • We group things based on visual characteristics, like shape, size, color, texture, orientation.
  • e.g. in a group of similar-sized squares and circles, we group by shape. In a group of large and small squares and circles, we group by size. In a group of green and white squares and circles, we group by color. (TODO: add image)
  • (We see size first - it's more obvious to us.)
  • When things look like one another, we tend to think of them as belonging in a common set.

Good Continuation

  • We have a tendency to find flow in things.
  • Your eyes will track and follow a line or curve.
  • Things arranged in such pattern tend to get associated with each other.
  • e.g. we tend to follow a menu, in a straight line.
  • Arranging things like this can get people to look at more things, even if they were only looking for one thing.

The last three principles dealt with how we group objects. The next few will deal with how we fill in missing or ambiguous information.

Closure

  • We like to see a complete figure even if some parts are missing.
  • For example, a dotted circle looks like a circle because it has a circular in shape, even if large parts are missing.
  • In UIs, for example, windows overlap, but we infer the fact that there's a window behind the current window.

Figure/Ground (aka Area)

  • We like to separate or visual field into things that are in the foreground (the figure), and things that are in the background (the ground).
  • Things in the foreground, or figure, are interpreted as the object of interest.
  • Ground is everything else.

Ambiguity

  • Visual cues can help solve this.
  • Figure has a definite shape, but ground seems shapeless.
  • (In the absence of a horizon, it's hard to tell.)

Law of Prägnanz

  • We like to perceive shapes in the simplest possible way.
  • In some cases we use depth to do this - a stack of partially overlapping squares are interpreted as three squares, even though it doesn't really look like it.
  • Symmetry is great as well - we like to parse symmetry.

Uniform Connectedness

  • The interface can force a grouping on the user. They can do this by creating regions or connecting lines.
  • You can define regions to force people to perceive things similarly.
  • This isn't nearly as effective as proximity, but it's an option.
  • For a long time, Microsoft used uniform connectedness in their UIs. It works, but makes their interfaces very cluttered.

Alignment (?)

  • Is alignment a Gestalt principle?
  • Basically, we see things similarly when we group things in line.
  • It's a powerful organizing tool.
  • It's kind of like continuation - continuation tends to imply alignment.

Pleasing Layouts

Applying Concepts

  • Avoid haphazard layouts
  • Align stuff

Testing Your Interface

  • Show it to someone else - don't ask if they like it, try to get first impressions
  • You want to figure out, the first time that they see it, if everything is clear and usable.
  • Squint test - when you squint and look at your interface, does it still make sense?

Summary

  • Strive for simplicity!
  • Know your target.
  • Don't leave your visual design up to chance! Think about your design, and test it out.