a handbook of cognition for ux designers

Download A Handbook of Cognition for UX Designers

Post on 22-Mar-2017

212 views

Category:

Documents

11 download

Embed Size (px)

TRANSCRIPT

  • 1

    A Handbook of Cognition for UX Designers

    Table of Contents Introduction .................................................................................................................................... 2 Perception ....................................................................................................................................... 3 Grouping ............................................................................................................................. 3 Three-Dimensional Projection ................................................................................ 6 Color perception .................................................................................................................... 6 Object Recognition .................................................................................................... 7 Face Recognition ........................................................................................................ 8 Contrast bias ................................................................................................................ 9 Expectation Bias ......................................................................................................... 9 Visual Preferences .................................................................................................. 10 Constancy ........................................................................................................................ 12 Time Requirement ................................................................................................. 13

    Attention ....................................................................................................................................... 14 Easily Diverted Attention ................................................................. 14 Tools to Focus Attention ....................................................................... 15 Predictable Patterns .................................................................................... 16

    Memory .......................................................................................................................................... 17 Recognition over Recall ......................................................................... 17 Mnemonic Devices ................................................................................................. 17

    Reading .......................................................................................................................................... 20 Reading skills are different ....................................................................... 20 Eye movement Patterns .................................................................................. 21

    Thinking ........................................................................................................................................ 22 Learning from experience is easy ....................................... 22 Problem solving is hard .............................................................................. 23 Decision-making is irrational ......................................................... 23 Environment Effect ................................................................................................ 24

  • 2

    Introduction

    This handbook is about general cognition knowledge we summarized for UX designers. We hope that this would become one of your favorite tools while designing, and make your work more intuitive and more accord with human cognition. And if you already know everything, just read it for fun.

    Now, lets talk about our way of thinking. Firstly, we divided cognition into five topics, which are perception, attention, memory, reading and thinking from lower to higher mental processes. Secondly, we concluded the most basic features for each topic, including strengths, weaknesses and our opinions. And at last, we listed every design principle that could explain more about these features.

    Besides, this handbook is totally open. We are going to update it continually. And if you find anything that is really useful, do not hesitate to email us. We can make this better together.

  • 3

    Perception

    Perception is the process of organization, identification, and interpretation of sensory information in order to represent and understand the environment.

    Human perception is very amazing. We can see things as structured, three-dimensional; we can recognize objects or faces. At the same time, our perception is also not a real response to the world. It is always biased by context, expectations, visual preferences and other factors.

    Lets talk about its strengths first.

    Grouping

    Human has the ability to perceive elements as organized patterns and objects by nature. We can not only organize elements into groups, but also resolve ambiguity and reduce complexity.

    The principles of grouping are a set of principles proposed by Gestalt psychologists first. These principles are organized into categories as follows.

    Firstly, lets talk about principles that would promote our perception of grouping.

  • 4

    Proximity

    The relative distance between elements in a display affects our perception of whether and how the elements are organized into groups. Elements that are close together are perceived to be more related than elements that are not.

    Similarity

    Similarity is another factor that affects our perception about grouping. Elements that are similar are perceived to be more related than elements that are not.

    Consistency

    Consistency also affects our perception about grouping. Elements that are consistent in forms of the same or similar shape, pattern, color and other aspects are perceived to be more related.

    Secondly, our perception also has the ability to resolve ambiguity and perceive things as a whole.

    Closure

    Our vision system has the ability of closing open figures in order to perceive a set of individual elements as a single, recognizable object or pattern, rather than multiple, individual elements.

    Continuation

    Our vision system tends to perceive continuous forms rather than disconnected segments, even by adding missing data if necessary.

    Thirdly, we tend to parse complicated figures in a way that reduces complexity. This is because that the data in our visual field always has more than one interpretation, but our vision automatically

  • 5

    interprets the data in simple or symmetry way in order to help the mind create meaning. Simplicity

    A tendency to interpret ambiguous or complex images as simple ones.

    Symmetry

    A tendency to interpret ambiguous or complex images as symmetrical shapes.

    Fourthly, we can also distinguish figures and grounds.

    - Figure-Ground Relationship

    Elements are perceived as either figures, which are the objects of focus, or ground which is the rest of the perceptual field. Generally speaking, the more striking the contrast of figure and ground will be, the figure will be more prominent and become the focus of our vision. And the principle is always influenced by the characteristics of the scene and the viewers focus of attention.

    Fifth, the principle of grouping is not only talking about static objects, but also moving things. Common Fate Elements that move in the same direction are perceived to be more related than elements that move in different directions.

    At last, there are still some useful principles that can be seen as further explanations of the principles of grouping.

    Hierarchy

    Hierarchical organization is the simplest structure for visualizing and understanding complexity. And it is also one of the most effective ways to learn the system. There are three basic ways to visually represent hierarchy: trees, nests, and stairs.

  • 6

    Layering

    Layering is the process of organizing information into related groupings and then presenting only certain groupings at one time. It is used to manage complexity and reinforce relationships in the information. There are two basic kinds of layering: two-dimensional and three-dimensional.

    Alignment

    Alignment is about the placement of aligning elements into rows and columns or along a centerline. It not only creates a sense of consistency and contributes to the designs overall aesthetic, but also leads the eyes left-right and top-bottom accordingly.

    Three-Dimensional Projection

    We have the ability to see two-dimensional images as three-dimensional objects or patterns; especially certain visual cues are present.

    The following visual cues are commonly used to enhance the perception of three-dimensional relationships. Such as: interposition, size, elevation, linear perspective, texture gradient, shading, and atmospheric perspective.

    Color perception

    Human color perception has both strengths and limitations. Color vision helps us to distinguish between a figure and its background; and makes it easier for us to recognize fine discriminations among objects. In design, color is commonly used to attract attention, group elements, indicate meaning, and enhance aesthetics.

    Color Contrasts

  • 7

    Our vision tends to detect color contrast, not absoluteness. Usually, we choose to distinguish colors by saturation and brightness as well as hue. (For further knowledge about color, we recommend you with the book named Learn color psychology everyday by a Japanese author Reiji Harada.) In design, designers usually avoid subtle color differences and make sure the contr