Web Design, Graphic Design, Cognitive Psychology

1
Web Design, Graphic Design, Cognitive Psychology
2
Web Design The Process

• Identify and define the purpose of the site
• Develop concept and idea
• Decide information structure/ navigation
  structure
• Design the Interface of the web site
• Develop the web site
• Evaluate (through out the entire process)

3
Identify and define the purpose of the site

• What is the main purpose and goal of the site?
• Information, Transactions, Commerce,
  Entertainment etc.
• Who are the users/target group?
• Create demographic profiles/Personas
• What do they want? What do they need?
• What form/style should the Web site have?

4
Develop concept and idea

• Conceptual design
• Sketch out a site design and architecture at an
  abstract level. Shall we use metaphors?
• Conduct a task/goal analysis to find critical
  features.
• Sketch again!
• Consider site dimensions. (1024768, 800600)

5
Decide information structure/ navigation structure

• Focuses designing effective navigation,
  organization and labeling.
• Linear
• Grid
• Hierarchy
• Web

6
Design the Interface of the web site

• Deciding the form, color, font, pictures to fit
  the purpose, goal and user needs.
• Graphic Design and Cognitive Psychology tools
  for developing a usable interface.

7
Cognitive Psychology

• Short term memory
• 72 memory units
• Lasts a few seconds, Sensitive for disturbance
• Chunking
• Ex 019301054
• 019 30 10 54

• Long term memory
• No memory loss
• Demands learning
• Hard to retrieve triggers

8
Cognitive Psychology Gestalt Principles

• Proximity - objects that are close together are
  related
• x x x x x
• x x x x x
• x x x x x
• x x x x x
• x x x x x

• Similarity- objects with similar properties
  (color, shape, etc.) are related
• x o x o x
• x o x o x
• x o x o x
• x o x o x
• x o x o x

9
Cognitive Psychology Gestalt Principles

• Continuation - objects along a common path form a
  unit

• Symmetry- objects surrounded by symmetrical
  boarders are regarded as continuous objects

10
Cognitive Psychology Mental models

• Why is this important?
• Mental Models
• Humans establish mental models of how things
  work, or how they would behave in a particular
  situation
• The website should understand and respect the
  "mental models" of the target group in order to
  avoid confusion

11
Cognitive Psychology Mental models
12
Cognitive Psychology

• Affordance
• a situation where an object's sensory
  characteristics intuitively imply its
  functionality and use.
• Flow
• The construct of flow is defined by
  Csikszentmihalyi (1990) as the holistic
  sensation that people feel when they act with
  total involvement, an optimal state of
  consciousness characterized by a state of
  concentration so focused that it amounts to
  absolute absorption in an activity
  (Csikszentmihalyi, 1990).

13
Cognitive Psychology - Flow
14
Cognitive Psychology a design tool
15
Cognitive Psychology a design tool
16
Cognitive Psychology a design tool
17
Graphic Design

• Graphic Design Is Communication!
• Direct (Experienced)
• Indirect (Told to you)
• How do you get a user to interact?
• Communicate!
• Textual message, Form

18
Graphic Design

• Fibonacci Series
• 1,1,2,3,5,8,13,21
• 12, 23, 35, 58, 813, 1321, 2134
• Any number in the series divided by the following
  is approximately 0.618. If divided by the
  previous the result is app. 1.618 The golden
  section

19
Graphic Design

• The golden section
• The rule of thirds

20
Graphic Design - Typography and readability

• Sanserif fonts
• Verdana Arial
• Serif fonts
• Georgia Times New Roman
• Font size on a web page should be about 10 12
  px for normal text.
• A line of text should not exceed 45 sign.

21
Graphic Design - Typography and readability

• Remember that the font carry a message to!
• LOVE
• HATE

22
Web design tips

• Navigation should
• Be easy to learn.
• Be consistent throughout the website.
• Provide feedback.
• Use the minimum number of clicks to arrive at the
  next destination.
• Use clear and intuitive labels.
• Support user tasks.
• Have each link be distinct from other links.
• Group navigation into logical units.
• Avoid making the user scroll to get to important
  navigation or submit buttons.
• Not disable the browser's back button.

23
Web design tips

• Use breadcrumbs
• Books gt Subjects gt Computers gt Web Design
• Focus context
• Display the most important data at the focal
  point at full size and detail, and display the
  area around the focal point (the context) to help
  make sense of how the important information
  relates to the entire data structure.

24
Web design tips

• Use the gestalt principles to group and organize
  content and objects.
• Use logical form guide the user
• Be consistent in the design
• When designing for a resolution of 800600 design
  the page in 760420.
• When designing for a resolution of 1024768
  design the page in 955600.