Embed Size (px)
Citation preview
HCI – MMI 9Style in design
Stig Kjær Andersen (HST)Spring 2004
Stig Kjær Andesen/Spring 2003 [email protected]
Or how to create aesthetically pleasant graphic design for user interfaces
Stig Kjær Andesen/Spring 2003 [email protected]
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.
Stig Kjær Andesen/Spring 2003 [email protected]
telephone
Life Style ?
Enhanced functionality?
Which design criteria have been used?
Aesthetics?
Technical constrains?
Stig Kjær Andesen/Spring 2003 [email protected]
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?
Stig Kjær Andesen/Spring 2003 [email protected]
What's usable?
What's pleasant?
What’s good taste oraesthetic?
What's for the eyes?
What’s for the brain?
Stig Kjær Andesen/Spring 2003 [email protected]
To day’s literature
Kevin Mullet and Darrell Sano: Designing Visual Interfacescommunication oriented techniquesWeb-references http://home.att.net/~kiana.matthews/independent_study/Aesthetics_Paper.htm
Stig Kjær Andesen/Spring 2003 [email protected]
Basic in communicating visually:
1. Based on visual language2. Having visual variables3. Given a perceptual organization
Stig Kjær Andesen/Spring 2003 [email protected]
Three Key Issues in Visual Design
Simplicity and eleganceUnity
Scale, contrast and proportionVisual variables
Organization and visual structurePerceptual organization
Stig Kjær Andesen/Spring 2003 [email protected]
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
Stig Kjær Andesen/Spring 2003 [email protected]
Simplicity and elegancePrinciples
UnityTo get a coherent whole
RefinementFocus on essential aspects
FitnessBalance between capacity and complexity
Stig Kjær Andesen/Spring 2003 [email protected]
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!!
Stig Kjær Andesen/Spring 2003 [email protected]
Stig Kjær Andesen/Spring 2003 [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
Stig Kjær Andesen/Spring 2003 [email protected]
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
Stig Kjær Andesen/Spring 2003 [email protected]
Simplicity and eleganceSummary of the principles
ReductionDesign to it essence
RegularizationFocus on essential aspects
LeverageCombining elements
Stig Kjær Andesen/Spring 2003 [email protected]
Visual variable
Scale, Contrast and Proportion
- they are interrelated in visual effect!
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion
Can be used to express:DifferentiationEmphasisActivityInterest
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion- Theory: Visual variables
Is the fundamental unit of visual communication:
Associative/dissociativeSelective perception to communicateOrdered perceptionQuantitative perception
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion
Can supportClarityHarmonyActivityRestraint
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion –Examples
Shape coding for clarity by contrast:
Restrained by visual coding
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion– How to get the visual effect:
Establish layeringSharpening visuallyIntegration figure and ground
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion –method: Layering
Establish perceptual layersGrope itemsRank themUse perceptual variables to establish effectMaximize the perceptual effectUse the squint test
Stig Kjær Andesen/Spring 2003 [email protected]
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
Stig Kjær Andesen/Spring 2003 [email protected]
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
Stig Kjær Andesen/Spring 2003 [email protected]
Stig Kjær Andesen/Spring 2003 [email protected]
Perceptual organization
Organization and visual structure
Stig Kjær Andesen/Spring 2003 [email protected]
Organization and visual structure –principles
GroupingHierarchyRelationshipBalance
Stig Kjær Andesen/Spring 2003 [email protected]
Organization and visual structure –errors
Random layoutConflicting symmetriesAmbiguous internal relationshipsAligning labels but not controlsFalse structureExcessive display density
Stig Kjær Andesen/Spring 2003 [email protected]
Stig Kjær Andesen/Spring 2003 [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
Stig Kjær Andesen/Spring 2003 [email protected]
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
Stig Kjær Andesen/Spring 2003 [email protected]
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
Stig Kjær Andesen/Spring 2003 [email protected]
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
Stig Kjær Andesen/Spring 2003 [email protected]
To day’s message…
Simplicity and eleganceUnity
Scale, contrast and proportionVisual variables
Organization and visual structurePerceptual organization
