Chapter 1: Title - University of Auckland

GROUPING Organizing Information & Gestalt Principles of Perception Mostly from Heim Chapter 6.6 and usability.gov 1-2 Learning Outcomes When and where is grouping critical in UI design? What techniques can be used to sort things into groups?

How can you visualize the groups? What visual clues can you use to indicate things belong together or apart? 1-3 Information Architecture Recap from Conceptual design (Lecture 8) If you have lots and lots of things to organize into a structure how can you do it? Hierarchy

Network Tree 1-4 Card sorting Card sorting is one of the most effective ways to group things. Although there are software

tools moving physical things around is easier! (and probably more effective) http://www.usability.gov/methods/desi gn_site/cardsort.html 1-5 Site Map

The sort translates into Menu structure Site map 1-6 Grouping on a screen Low-level principles - used to make decisions about specific screen controls, menus and layouts

Use visual cues to support the logical structure of the interface 1-7 Gestalt Principles of Perception Gestalt psychology strives to

explain the factors involved in the way we group things At the heart of Gestalt psychology is the idea that we strive to find the simplest solutions to incomplete visual information Figure-Ground: Basic premise

We perceive our environment by differentiating between objects and their backgrounds 1-8 Gestalt Principles of Perception Proximity Similarity Common Fate Closure Good Continuity

Area Symmetry Surroundedness Prgnanz 1-9 Gestalt Principles of Perception Proximity Principle Objects that are close to each other will be seen as belonging together

Equidistant Horizontal Proximity Vertical Proximity 1-10 Gestalt Principles of Perception Proximity - Adobe PhotoShop Preferences Dialog

1-11 Half time entertainment http://www.nzherald.co.nz/business/news/article.cfm?c_id =3&objectid=11189192 Online news papers circa 1981 1-12

Gestalt Principles of Perception Objects that have similar visual characteristics, such as size, shape or color will be seen as a group and therefore related Similarity Principle Rows of Similar Objects Columns of Similar ObjectsGrouped Columns 1-13

Gestalt Principles of Perception Property Pane from Macromedias Dreamweaver Our eyes pick up all of the text boxes because of the strong blue squares and the white areas that they have in common 1-14 Gestalt Principles of Perception Common Fate Principle Objects that move together are seen as related

Unaligned Drop-Down Menus Aligned Drop-Down Menus 1-15 Gestalt Principles of Perception We tend to see things as complete objects even though there may be gaps in the shape of the objects

Closure Principle ][ [ ][ ][ ][ ][ ][ 1-16 Gestalt Principles of Perception We tend to see things

as smooth, continuous representations rather than abrupt changes Good Continuity Principle 1-17 Gestalt Principles of Perception Objects with small area tend to be seen as the figure, not the ground (also called the smallness principle)

The Area Principle 1-18 Gestalt Principles of Perception Symmetrical areas tend to be seen as complete figures that form around their middle Symmetry Principle Translation

Reflection Rotation 1-19 Gestalt Principles of Perception An area that is surrounded will be seen as the figure and the area that surrounds will be seen as the ground

Surroundedness Principle 1-20 Gestalt Principles of Perception We tend to perceive things based on the simplest and most stable or complete interpretation (the literal translation from German is precise). Prgnanz Principle

Visual Conflict with Common Fate Visual Conflict with Surroundedness 1-21 Lines and borders Are immediate visual clues to grouping Lines, may be lines or changes in background colour White space also has the same effect More on this next lecture

1-22 Summary When and where is grouping critical in UI design? Grouping happens at many levels and places Menus Sitemaps Pages What techniques can be used to sort things into groups? Card sorts How can you visualize the groups?

Trees and hierarchy charts 1-23 Summary What visual clues can you use to indicate things belong together or apart? The Gestalt Principles of Perception: Proximity Similarity

Common Fate Closure Good Continuity Area Symmetry Surroundedness Prgnanz Borders and Lines Apply this in your assignment

Recently Viewed Presentations

  • Engaging with the NHS Commissioning Board and the impact of ...

    Engaging with the NHS Commissioning Board and the impact of ...

    Leading the development of strategy and vision for the NHS, and promoting the research, innovation and change which will make the NHS world class in all it does. ... Engaging with the NHS Commissioning Board and the impact of the...
  • The Physical Environment Polar cell Ferrel cell Ferrel

    The Physical Environment Polar cell Ferrel cell Ferrel

    Rivers & Lotic Zonation. Cain, Bowman & Hacker (2014), Fig. 3.13. Temperate zone river systems. Decrease in particle size. in stream bed. Allochthonous. input of . detritus. decreases relative to volume of water. Please do not use the images in...
  • Deloitte PowerPoint template — Top tips for use

    Deloitte PowerPoint template — Top tips for use

    However, for derivative liabilities any changes in fair value attributable to instrument-specific credit risk would continue to be presented in net income. ... Whether the shortcut and critical-terms-match methods should be eliminated.
  • The Cuban Missile Crisis and Beyond  Fidel Castro

    The Cuban Missile Crisis and Beyond Fidel Castro

    The United States aided Cuban dissidents in a failed attempt to overthrow Castro in 1961. Soviets try to put missile launch pads in Cuba in 1962, leading to the Cuban Missile Crisis.
  • History of Rock and Roll Introduction What is

    History of Rock and Roll Introduction What is

    History of Rock and Roll Introduction What is "Rock and Roll" and who coined the term? * * Thriller (1982) Produced by Quincy Jones, Thriller featured a duet with Paul McCartney ("The Girl Is Mine"), "Beat It," and "Billie Jean."
  • Driving sustainable behavior change in antimicrobial ...

    Driving sustainable behavior change in antimicrobial ...

    Behaviour Change Wheel approach. Interrelated theory- and evidence-based behavioural science frameworks and principles. Guide decision making and facilitate a step-by-step, transparent, systematic approach to designing behaviour change interventions
  • Registration for Granada High School

    Registration for Granada High School

    Current Students Registration Presentation. Classes of 20. 20, 202. 1, and 202. 2. March . 20th, 2019. Registration for Granada High School. Introduce yourself and your role on campus. This session will give you an overview of the schedule and...
  • Presentation Skills Type the authors name and date

    Presentation Skills Type the authors name and date

    Aims and Objectives. To assist students prepare and deliver a presentation as part of their Extended Project Qualification (EPQ) To give students an understanding of: Using appropriate resources. Presentation structure. Presentation skills. To assist students prepare and deliver a presentation...