HCI – MMI 9Stig Kjær Andesen/Spring 2003 [email protected] What is style….. Style (in printing):...
Transcript of HCI – MMI 9Stig Kjær Andesen/Spring 2003 [email protected] What is style….. Style (in printing):...
![Page 1: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/1.jpg)
HCI – MMI 9Style in design
Stig Kjær Andersen (HST)Spring 2004
![Page 2: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/2.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Or how to create aesthetically pleasant graphic design for user interfaces
![Page 3: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/3.jpg)
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.
![Page 4: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/4.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
telephone
Life Style ?
Enhanced functionality?
Which design criteria have been used?
Aesthetics?
Technical constrains?
![Page 5: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/5.jpg)
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?
![Page 8: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/8.jpg)
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?
![Page 9: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/9.jpg)
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
![Page 10: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/10.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Basic in communicating visually:
1. Based on visual language2. Having visual variables3. Given a perceptual organization
![Page 11: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/11.jpg)
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
![Page 12: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/12.jpg)
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
![Page 13: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/13.jpg)
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
![Page 20: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/20.jpg)
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!!
![Page 22: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/22.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
![Page 23: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/23.jpg)
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
![Page 26: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/26.jpg)
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
![Page 29: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/29.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Simplicity and eleganceSummary of the principles
ReductionDesign to it essence
RegularizationFocus on essential aspects
LeverageCombining elements
![Page 31: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/31.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Visual variable
Scale, Contrast and Proportion
- they are interrelated in visual effect!
![Page 32: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/32.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion
Can be used to express:DifferentiationEmphasisActivityInterest
![Page 34: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/34.jpg)
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
![Page 36: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/36.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion
Can supportClarityHarmonyActivityRestraint
![Page 37: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/37.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion –Examples
Shape coding for clarity by contrast:
Restrained by visual coding
![Page 39: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/39.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Scale, Contrast and Proportion– How to get the visual effect:
Establish layeringSharpening visuallyIntegration figure and ground
![Page 40: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/40.jpg)
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
![Page 42: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/42.jpg)
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
![Page 45: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/45.jpg)
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
![Page 47: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/47.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
![Page 49: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/49.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Perceptual organization
Organization and visual structure
![Page 50: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/50.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
Organization and visual structure –principles
GroupingHierarchyRelationshipBalance
![Page 53: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/53.jpg)
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
![Page 54: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/54.jpg)
Stig Kjær Andesen/Spring 2003 [email protected]
![Page 55: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/55.jpg)
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
![Page 57: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/57.jpg)
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
![Page 60: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/60.jpg)
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
![Page 61: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/61.jpg)
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
![Page 63: HCI – MMI 9Stig Kjær Andesen/Spring 2003 ska@miba.auc.dk What is style….. Style (in printing): Arbitrary rule or collection of rules governing the practice of a printer or a publisher](https://reader036.fdocuments.in/reader036/viewer/2022071413/610a9d8dab04c27fa067276e/html5/thumbnails/63.jpg)
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