paul lyons and giovanni moretti hci research group massey university new zealand
DESCRIPTION
I NCORPORATING G ROUPS I NTO A M ATHEMATICAL M ODEL O F C OLOR H ARMONY F OR G ENERATING C OLOR S CHEMES F OR C OMPUTER I NTERFACES. Paul Lyons and Giovanni Moretti HCI Research Group Massey University New Zealand. A M ATHEMATICAL M ODEL O F C OLOR H ARMONY F OR - PowerPoint PPT PresentationTRANSCRIPT
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20051
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20052
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20053
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Paul Lyons and Giovanni MorettiHCI Research GroupMassey University
New Zealand
INCORPORATING GROUPSINTO
A MATHEMATICAL MODEL OF COLOR HARMONYFOR
GENERATING COLOR SCHEMESFOR
COMPUTER INTERFACES
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20054
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
A MATHEMATICAL MODEL OF COLOR HARMONYFOR
GENERATING COLOR SCHEMESFOR
COMPUTER INTERFACES
INCORPORATING GROUPSTHE COLOR HARMONIZER
Paul Lyons and Giovanni MorettiHCI Research GroupMassey University
New Zealand
INTO
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20055
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Geometric relationships in color space
WHAT’s THE COLOR HARMONIZER ALL ABOUT?
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20056
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
B
B
A
A
Replacing manual updating with calculation
WHAT’s THE COLOR HARMONIZER ALL ABOUT?
Where should the controls be set?
Must we copy the RGB values?
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20057
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
rat color
widow’s joy
elephant’s breath
stifled sigh
town blond
enveno
med monk
ey
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20058
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Perceptually uniform spaces
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 20059
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
Perceptually uniform spaces
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200510
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200511
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200512
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200513
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200514
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200515
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200516
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200517
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200518
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200519
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200521
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
The Munsell colour solid
Lightness
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200522
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Hue Lightness
The Munsell colour solid
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200523
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Hue Lightness
The Munsell colour solid
Chroma
MUNSELL’S COLOR NOTATION
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200525
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MUNSELL’S RULE FOR COLOR Harmony
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200527
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
5
0
432
6
1
10987
2
THE COLOR HARMONIZER
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200528
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
THE COLOR HARMONIZER
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200529
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Getting this right, by hand, is really difficult
THE COLOR HARMONIZER
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200530
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
TYPES OF COLOR SCHEME
Monochromatic
Analogous
Complementary
Split Complementary
Triadic
Oval
Other?
Abstract color schemes beads on wireframes(aka color molecules)
To make the color scheme concrete,position the wireframe in the color space
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200531
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
A SAMPLE APPLICATION
in1
RS
edge
choose outin2
in3
in4
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200533
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Pictorial component
Terminal
3Size
medium Importance
medium Longevity
Distinct components background
Identical components wire
PRODUCING A COLOR SCHEME
Capture image characteristics
color strengthc = lightnessc x saturationc small, shortlived, important items high color strengthlarge, long-lived, unimportant items low color strength
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200534
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Synthesize a colour molecule
PRODUCING A COLOR SCHEME
Capture image characteristics
‘interatomic’ distances determined by spring-based optimization
Low color strength itemunimportant,long-lived,large
Items identified as ‘distinct’ are kept separate
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200535
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Position and orient the molecule in the colour space
Synthesize a colour molecule
PRODUCING A COLOR SCHEME
Capture image characteristics
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200536
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
Position and orient the molecule in the colour space
Synthesize a colour molecule
PRODUCING A COLOR SCHEME
Capture image characteristics
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200538
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
THE CHROMOTOME
Spin complete L*u*v* space
Spin simple cutaway L*u*v* space
Spin clipped cutaway L*u*v* space
Show sections through L*u*v* space
Chromotome prototype
Harmoniser prototype
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200539
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
GROUPED INTERFACE ITEMS
Groupingtreat many items as one
Benefitsfewer properties to define (if not automatic)
fewer interactions to specify
simpler optimisation (fewer items on wireframe)
More than one way to handle groups …
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200540
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
PSEUDO-ATOM GROUPS
Simple Groupstreat many elements as a single ‘pseudo-atom’
aggregate their size don’t aggregate their importance, longevity or text properties
Simple to manage, optimise, define
Navigation Bar Background
Navigation Buttons all have same colour
Body Text
Body Background
Button Text
Navigation Bar Background
Navigation Buttons b1 – b5
all have same colour
Body Text
Body Background
Button Text
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200541
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
GROUPS WITH DISTINCT COLORINGS
Subgroup with its own wireframe
How is the wireframe oriented?
Some orderings work better than others
D
C
B
c2
c3
c4
A
c5
c1
Menubuttons
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200543
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
IMPLICATIONS FOR OPTIMISATION
Optimisation moves beads on wireframeto balance colour strength and areato ensure items are distinguishable
Local Optimisationgroup C could be treated as a pseudo-atom
Global Optimisationgive subgroup C given an initial orientationoptimise it globally
ensures that c1-c5 aren’t too close to other atoms
D
C
B
c2
c3
c4
A
c5
c1
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200544
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
MULTI-LEVEL GROUPS
Groups with subgroups
groups indicate relationships
limit to how many groupings are meaningful
Groups with Subgroupsprobably aren’t useful
D
C
B
c2
c3
c4
A
c5
c1
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200546
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
CONCLUSION
Adding Interface Element Groups
reduces image characterisation phaseusers benefit
complicates the optimisation more programming
allows for sub-color schemes
Raises many possibilities for future work …
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200548
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer
© 2005 Paul Lyons and Giovanni Moretti VECIMS 200549
Title Color Harmonizer Munsell Munsell’s rule Sample App Rotating Molecule Exx Grouping
Incorporating Groups into The Color Harmonizer