hci – mmi 8 style in design or how to create aesthetically pleasant graphic design ... · 2006....

1

HCI – MMI 8Style in design

Stig Kjær Andersen (HST)Spring 2006

Stig Kjær Andesen/Spring 2006 [email protected]

Or how to create aesthetically pleasant graphic design for user interfaces


What is style…..

Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher in doubtful or disputed matters to obtain consistency.

Aesthetic, Informal: Conforming to accepted notions of good taste.


telephone

Life Style ?

Enhanced functionality?

Which design criteria have been used?

Aesthetics?

Technical constrains?


To day’s question

What is art and what is simple handicraft when designing a pleasant and aesthetic user interface?What are the secrets of good visual design and how to apply them to the design of graphical user interface?


1996

2


2003

Differentstyles?


2006


What's usable?

What's pleasant?

What’s good taste oraesthetic?

What's for the eyes?

What’s for the brain?


To day’s literature

Kevin Mullet and Darrell Sano:

Designing Visual InterfacesTrade Secrets for Elegant Interfaces, Conf. comp. HCI ´94 Boston Mass.

Designing Visual Interfaces –Communication Oriented Techniques –Sun microsystems, inc. isbn 0-13-303389-9


Basic in communicating visually:

1. Based on visual language2. Having visual variables3. Given a perceptual organization


Three Key Issues in Visual Design

Simplicity and eleganceUnity

Scale, contrast and proportionVisual variables

Organization and visual structurePerceptual organization

3


Simplicity and elegance

In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away

- Antoine de Saint Exupery


Simplicity and elegancePrinciples

UnityTo get a coherent whole

RefinementFocus on essential aspects

FitnessBalance between capacity and complexity


Unity – get a coherent whole


Refinement – focus on essential aspects


Balance between capacity and complexity


Clutter and visual noise

4


Interference between competing elements


Literal translation


Simplicity and eleganceStep 1: reduction

Reducing a design to its essence:Determine the essential qualities (a list of adjectives) that should be conveyed by the design along with formal elements (labels, color,control,pattern)Critical examine each element – why is it neededTry to remove it anyway!!


Can you reduce it further?

Stig Kjær Andesen/Spring 2006 [email protected] Stig Kjær Andesen/Spring 2006 [email protected]

Simplicity and eleganceStep 2: regularization

Regularizing the elements of the design

Use regular geometric form, simple contoursLimit variation in typography to few size and familiesCritical elements are not regularized

5


Regularization and ..


Uniform spacing.


Simplicity and eleganceStep 3: leverage

Combining elements for leverageReview the functional role played by each elementLook for situations where multiple elements are (partially) filling same roleCould an elements role could be filled by an adjacent component, possible after minor modifications?Combine redundant elements into a single simpler unit or replace the lot with a common higher-level idiom


Combination of elements for leverage


Leverage


Simplicity and eleganceSummary of the principles

ReductionDesign to it essence

RegularizationFocus on essential aspects

LeverageCombining elements

6


Clips


Visual variable

Scale, Contrast and Proportion

- they are interrelated in visual effect!



Can be used to express:DifferentiationEmphasisActivityInterest


ScaleContrastProportion


Scale, Contrast and Proportion- Theory: Visual variables

Is the fundamental unit of visual communication:

Associative/dissociativeSelective perception to communicateOrdered perceptionQuantitative perception


Examples of visual vars.

7



Can supportClarityHarmonyActivityRestraint


Scale, Contrast and Proportion –Examples

Restrained by visual coding

Shape coding for clarity by contrast:


(Dis)harmony by proportion!


Scale, Contrast and Proportion– How to get the visual effect:

Establish layeringSharpening visuallyIntegration figure and ground


Scale, Contrast and Proportion –method: Layering

Establish perceptual layersGroup itemsRank themUse perceptual variables to establish effectMaximize the perceptual effectUse the squint test


Layering:

8


Scale, Contrast and Property –method: Sharpening

Sharpening visual distinctionsIdentify the ranking that needs to be established across the groupsDetermine the range of variation (value, size color) and use as much as possibleUse logarithmic rather than linear scaling –double each successive level Use the squint test


Optical focus


Grouping..


Scale, Contrast and Property –method: Integration

Integrating figure and groundDetermine the over all size of the figure/ground combinationEqualize the visual weightProvide enough space around the margins of the figure to eliminate visual tensionsPosition the figure correctly within the ground


Grouping


9


Layering, sharpening, integration


Organization and visual structure

Perceptual organization


Organization and visual structure –principles

GroupingHierarchyRelationshipBalance


Visual completion/ambiguity


Visual organization and structures


Organization and visual structure –errors

Random layoutConflicting symmetriesAmbiguous internal relationshipsAligning labels but not controlsFalse structureExcessive display density

10

Stig Kjær Andesen/Spring 2006 [email protected] Stig Kjær Andesen/Spring 2006 [email protected]

Organization and visual structure –Method: Using symmetry to ensure balance

Identify the axis which along which symmetry will be establishedSymmetry about the vertical axis is more prevalent in human perceptionCentre the information on the axis of symmetry by carefully balancing itThe axis of symmetry is itself centred within the overall display context


Symmetry and alignment


Organization and visual structure –Method: Using Alignment to establish visual relationships

Identify the major boundaries in and look for ways to enhance them by moving additional elements into alignmentLook for elements and margins – that nearly aligns – and bring them into alignment by altering size,positions of one Look for free standing elements and make sure they align with something else in the displayIf an element cannot be related to anything else –try to place the element in a position corresponding to a regular division of the space


Alignment


Optical spacing

11


Organization and visual structure –Method: Optical adjustment for human vision

Determine the true position of alignment. Translate it into a value corresponding to rectangular elementExtend elements beyond the margin according to the sharpness of their adjacent angleVerify with a close-up


Organization and visual structure –Method: Shaping the display with negative space – spatial segregation

Review the organisation of information into a prioritised set of chunks of manageable sizeEnsure spatial separation of independent units of information by adding extra white spaceDetermine which elements require additional visual emphasisIncrease the with space surrounding critical elements Remember white space is not wasted space


White space..


To day’s message…

Simplicity and eleganceUnity

Scale, contrast and proportionVisual variables

Organization and visual structurePerceptual organization


Have a nice weekend..

hci – mmi 8 style in design or how to create aesthetically pleasant graphic design ... · 2006....

Documents