HCI_Visually Pleasing Composition

Visually Pleasing Composition

Ms. Rishu Bhalla

Lecturer,CSE

Lecture no:15

Contents

Recapitulation

Objective

Topic to be covered

Class Exercise

Summarization

Recapitulation

Interface Design Goals

Screen Meaning and Purpose

Organizing Screen Elements Clearly and Meaningfully

Ordering of Screen Data and Content

Screen Navigation and Flow

Objective

To study the qualitiesof Visually Pleasing Compositionin order to understand the principlesof good screen design as a designerin a more effective manner.

Introduction

A visually pleasing composition draws attention subliminally, conveying a positive message clearly and quickly.

A lack of visually pleasing composition is disorienting, obscures the intent and meaning, slows one down and confuses one.

A design communicates to the user nonverbally but quite powerfully.

Cont.....

The qualities that helps a design make visually pleasing includes Balance, Symmetry, Regularity, Predictability, Sequentiality, Economy, Unity, Proportion, Simplicity and Grouping.

What does the two images suggest?

Balance

Instability Balance (Stability)

Create equalbalance by providingan equal weight ofscreen elements leftand right, top andbottom.

What is common in these images?

Symmetry

Create symmetry byreplicating elementsleft and right of thescreen centerline.

Compare the two images....

Regularity vs Irregularity

Regularity

Create regularity by establishing standard and consistently spaced vertical and horizontal alignment points.

Use similar elementsizes, shapes, colors,and spacing.

Can you Interpret this graph?

How predictable is this graph?

Predictability

Create predictability by being consistent and following conventional orders or arrangements.

Pick the odd one out?

Sequentiality

Sequentiality can beachieved byalignment, spacingand grouping

Economy

Provide economy by using as few styles, display techniques, and colour as possible.

Unity

Create unity byusing similarsizes, shapes,or colours forrelatedinformation

Leaving lessspace betweenelements of ascreen than thespace left at themargins.

Proportions

Keep aesthetically pleasing proportions.

Which one looks more simple?

Simplicity

Optimize the number of elements on a screen ,within limits of clarity.

Minimize the alignment points, especially horizontal or columnar.

Which phenomena is represented here?

Grouping

Grouping

Provides functional grouping, spatialgrouping, even space controls, visualreinforce grouping, provides meaningfultiltles.

Class Exercise-What modifications can be brought in this form?

Summarization

Visually pleasing composition by the designer motivates, attracts and directs the user to use that particular design.

The qualities for a visually pleasing composition includes Balance, Symmetry, Regularity, Predictability, Sequentiality, Economy, Unity, Proportion, Simplicity and Grouping.