HCI – MMI 8 Style in design Or how to create aesthetically pleasant graphic design for user Stig Kjær Andersen (HST) interfaces Spring 2006 Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk What is style….. telephone Enhanced functionality? Style (in printing) : Aesthetics? Arbitrary rule or collection of rules governing the practice of a printer or a publisher in Which design criteria have been used? doubtful or disputed matters to obtain consistency. Aesthetic , Informal : Life Style ? Conforming to accepted notions of good taste . Technical constrains? Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk To day’s question 1996 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 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 1
2003 2006 Different styles? Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk To day’s literature What's usable? What's pleasant? Kevin Mullet and Darrell Sano: What’s good taste or aesthetic? Designing Visual Interfaces Trade Secrets for Elegant Interfaces, Conf. comp. HCI ´94 Boston Mass. What's for the eyes? Designing Visual Interfaces – What’s for the brain? Communication Oriented Techniques – Sun microsystems, inc. isbn 0-13-303389-9 Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Three Key Issues in Visual Basic in communicating visually: Design Simplicity and elegance 1. Based on visual language Unity Scale, contrast and proportion 2. Having visual variables Visual variables 3. Given a perceptual organization Organization and visual structure Perceptual organization Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 2
Simplicity and elegance Simplicity and elegance Principles In anything at all, perfection is finally Unity attained not when there is no longer To get a coherent whole anything to add, but when there is no Refinement longer anything to take away Focus on essential aspects - Antoine de Saint Exupery Fitness Balance between capacity and complexity Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Unity – get a coherent whole Refinement – focus on essential aspects Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Clutter and visual noise Balance between capacity and complexity Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 3
Literal translation Interference between competing elements Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Simplicity and elegance Can you reduce it further? Step 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 needed Try to remove it anyway!! Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Simplicity and elegance Step 2: regularization Regularizing the elements of the design Use regular geometric form, simple contours Limit variation in typography to few size and families Critical elements are not regularized Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 4
Regularization and .. Uniform spacing. Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Simplicity and elegance Combination of elements for leverage Step 3: leverage Combining elements for leverage Review the functional role played by each element Look for situations where multiple elements are (partially) filling same role Could 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 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Simplicity and elegance Leverage Summary of the principles Reduction Design to it essence Regularization Focus on essential aspects Leverage Combining elements Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 5
Visual variable Clips Scale, Contrast and Proportion - they are interrelated in visual effect! Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Scale, Contrast and Proportion Can be used to express: Scale Differentiation Contrast Emphasis Proportion Activity Interest Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Scale, Contrast and Proportion - Theory: Visual variables Examples of visual vars. Is the fundamental unit of visual communication: Associative/dissociative Selective perception to communicate Ordered perception Quantitative perception Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 6
Scale, Contrast and Proportion – Scale, Contrast and Proportion Examples Can support Shape coding for clarity by contrast: Clarity Harmony Activity Restraint Restrained by visual coding Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Scale, Contrast and Proportion (Dis)harmony by proportion! – How to get the visual effect: Establish layering Sharpening visually Integration figure and ground Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Scale, Contrast and Proportion – Layering: method: Layering Establish perceptual layers Group items Rank them Use perceptual variables to establish effect Maximize the perceptual effect Use the squint test Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 7
Scale, Contrast and Property – Optical focus method: Sharpening Sharpening visual distinctions Identify the ranking that needs to be established across the groups Determine the range of variation (value, size color) and use as much as possible Use logarithmic rather than linear scaling – double each successive level Use the squint test Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Scale, Contrast and Property – Grouping.. method: Integration Integrating figure and ground Determine the over all size of the figure/ground combination Equalize the visual weight Provide enough space around the margins of the figure to eliminate visual tensions Position the figure correctly within the ground Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Grouping Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 8
Perceptual organization Layering, sharpening, integration Organization and visual structure Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Organization and visual structure – Visual completion/ambiguity principles Grouping Hierarchy Relationship Balance Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Organization and visual structure – Visual organization and structures errors Random layout Conflicting symmetries Ambiguous internal relationships Aligning labels but not controls False structure Excessive display density Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 9
Organization and visual structure – Method: Using symmetry to ensure balance Identify the axis which along which symmetry will be established Symmetry about the vertical axis is more prevalent in human perception Centre the information on the axis of symmetry by carefully balancing it The axis of symmetry is itself centred within the overall display context Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Organization and visual structure – Symmetry and alignment Method: Using Alignment to establish visual relationships Identify the major boundaries in and look for ways to enhance them by moving additional elements into alignment Look 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 display If 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 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Alignment Optical spacing Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk Stig Kjær Andesen/Spring 2006 ska@miba.auc.dk 10
Recommend
More recommend
