You are on page 1of 13

11/30/2016

Design Principles:
Color and Consistency

Center for Social and
Human-Centered Computing

The core problem we’re trying
to solve in the next few videos:
• Pictures
• Information
• Buttons
• Other UI
elements

Given a blank screen, how do I optimally visualize all
the pictures, information, buttons and other UI
elements on that screen?

Copyright 2016 Brent Hecht.  All rights 
reserved.   1

not the Great Laws of User Interfaces Uew Kils Just the tip of the iceberg (but a valuable tip) Copyright 2016 Brent Hecht.  All rights  reserved.   2 . 11/30/2016 Rules of Thumb.

S 2012 Presidential Election Results NBC News Blue means Democratic Red means Republican Party victory (Obama) Party victory (Romney) Copyright 2016 Brent Hecht. 11/30/2016 Two frameworks for understanding: NBC News Geographic Analogy Gestalt Psychology U.   3 .  All rights  reserved.

  All rights  reserved.   4 . 11/30/2016 Notice any similarities to the map? Copyright 2016 Brent Hecht.

be used to indicate similar items or functions. How do we choose which (consistent) colors to use? Copyright 2016 Brent Hecht. • Can be a useful redundant indicator with layout • Another way to think of this is that the meaning of colors should be consistent.  All rights  reserved.   5 . 11/30/2016 Color and Consistency Principles • Colors should. in general.

  All rights  reserved.S 2012 Presidential Election Results NBC News Blue means Democratic Red means Republican Party victory (Obama) Party victory (Romney) The use of standards-informed colors is pervasive Copyright 2016 Brent Hecht. 11/30/2016 U.   6 .

color choices should conform to standards Oof! TOO many colors! Copyright 2016 Brent Hecht.  All rights  reserved. in general. • When possible.   7 . be used to indicate similar items or functions. 11/30/2016 Color and Consistency Principles • Colors should. • Can be a useful redundant indicator with layout • Another way to think of this is that the meaning of colors should be consistent.

11/30/2016 Use 5-7 different thematic colors maximum. and far fewer if possible (excluding icons.  All rights  reserved. photos) The reasons for this relate to short- term memory limitations Imagine this interface with 10 different colors! (Note: even 5 might be too many man) Copyright 2016 Brent Hecht.   8 .

  All rights  reserved. color choices should conform to standards • Minimize the total number of colors So many colors! Which ones should I choose? Copyright 2016 Brent Hecht. 11/30/2016 Color and Consistency Principles • Colors should. be used to indicate similar items or functions. in general.   9 . • When possible. • Can be a useful redundant indicator with layout • Another way to think of this is that the meaning of colors should be consistent.

bcgsc.org mkweb.ca/colorblind/ Copyright 2016 Brent Hecht. 11/30/2016 Key factor: A large percentage of the population is color blind There are a number of tools available to help you select colors that are colorblind- safe: ColorBrewer.   10 .  All rights  reserved.

  All rights  reserved. • Can be a useful redundant indicator with layout • Another way to think of this is that the meaning of colors should be consistent. color choices should conform to standards • Minimize the total number of colors • Choose a colorblind-safe color scheme Copyright 2016 Brent Hecht. • When possible. • Caution needs to be taken here.g. though • Use position as a redundant indicator (e. 11/30/2016 There are also a number of more general solutions to colorblind-safe color choice: • Make sure your colors have variances in their brightness. in general. Color and Consistency Principles • Colors should. be used to indicate similar items or functions. • Use hashing as a redundant indicator. stoplights).   11 .

   12 . 11/30/2016 Two frameworks for understanding: NBC News Geographic Analogy Gestalt Psychology Color and Consistency Principles • Colors should. in general. color choices should conform to standards • Minimize the total number of colors • Choose a colorblind-safe color scheme Copyright 2016 Brent Hecht. be used to indicate similar items or functions.  All rights  reserved. • Can be a useful redundant indicator with layout • Another way to think of this is that the meaning of colors should be consistent. • When possible.

“iMac” by Lloyd Humphreys from The Noun Project Copyright 2016 Brent Hecht.  All rights  reserved. 11/30/2016 Thanks! See you in the next video! Image credits: “iPhone” created by Daniel from The Noun Project.   13 .