TUTORIAL 6 VISUAL AESTHETICS 2 Colour in GUI design

Today’s agenda (designeye)  1. Briefing and overview on colour What you’ll be doing:  2. Register as a user at designeye  3. Play mini-game 1 (colour contrast)  4. Play mini-game 2 (colour scheme)  5. Do design challenge  6. Do peer assessment: work gallery  7. Discussion and debriefing 5 min 10 min 15 min 10 min 5 min :31 PM

1. Overview: Colour and Visual Aesthetics in HCI  Two promising factors for predicting perceived visual appeal: visual complexity and colourfulness  Colour:  one of the most notable features to invoke an emotional reaction  has been shown to influence perceived trustworthiness, users’ loyalty and purchase intention  attributes:  Hue - the purity of a colour with regards to the primary colours red, blue, and yellow  Saturation - the intensity of a colour  Luminance - the visually perceived brightness.  E.g. yellow = high luminance & blue = lowest luminance.  The perceived colourfulness is highly dependent on the distribution of colours and the composition of neighbouring colours.  E.g. two adjacent complimentary colours (i.e., colours that cancel each other’s hue) will appear brighter, and can potentially increase the overall perceived brightness.  A high brightness can increase our perception of colourfulness.  This tutorial focuses on the application of colour to UI design.  Source and additional links:  Reinecke et al., 2013 (  USING COLOR IN INFORMATION DISPLAY GRAPHICS: :31 PM 1. Overview – visual aesthetics in HCI |time:

2. Register as user 1.Go to the designeye website:  Click ‘Sign Up’ on the top menu bar 11:31 PM 2. Register as user at designeye |time:

2. Register as user 3.Fill in the sign up form. Note:  Username: You can use your UPI as your username to ensure it’s unique.  address: Make sure it’s a valid address as an will be sent to you to activate your account.  Country: New Zealand  Institute: University of Auckland  Course: *select the tutorial session you are in  e.g. IF you are in the Monday session, select COMPSCI345 Tutorial 1 Mon 5-6  Course Key : as announced in class.  ( if you did not attend the tutorial and need the course  Fill in the rest of the fields as indicated in the form (e.g. passwords, gender student ID, etc) then click ‘Create Account’ 11:31 PM 2. Register as user at designeye |time:

Play Mini-Game 1: Colour Contrast 11:31 PM 3. Play Mini-game 1 on Colour’s Brightness Contrast |time:

Play Mini-Game 2: Colour Scheme 11:31 PM 4. Play Mini-game 2 on Colour Scheme|time:

Do the design challenge: UI Colouring task 11:31 PM 5. Do the design challenge|time:

Rate, like and/or comment on your friends’ work 11:31 PM 6. Peer assessment: Click on a thumbnail image to: view the full image of the work read the description/design rationale comment on the work.

Discussion and Debriefing 11:31 PM 7. Discussion and debriefing:

11:31 PM

Accessible design 11:31 PM