1. TUTORIAL 6 VISUAL AESTHETICS 2 Colour in GUI design

2. 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 00 - 05 05 - 10 10 - 20 20 - 30 30 - 45 45 - 50 50 - 55 11:31 PM

3. 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 (http://doi.acm.org/10.1145/2470654.2481281)http://doi.acm.org/10.1145/2470654.2481281  USING COLOR IN INFORMATION DISPLAY GRAPHICS: http://colorusage.arc.nasa.gov/ http://colorusage.arc.nasa.gov/ 11:31 PM 1. Overview – visual aesthetics in HCI |time: 00 - 05

4. 2. Register as user 1.Go to the designeye website:  https://www.cs.auckland.ac.nz/projects/designeye/ https://www.cs.auckland.ac.nz/projects/designeye/ 2.Click ‘Sign Up’ on the top menu bar 11:31 PM 2. Register as user at designeye |time: 05 - 10

5. 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.  Email address: Make sure it’s a valid email address as an email 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.  (email sabd058@aucklanduni.ac.nz if you did not attend the tutorial and need the course key)sabd058@aucklanduni.ac.nz  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: 05 - 10

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

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

8. Do the design challenge: UI Colouring task 11:31 PM 5. Do the design challenge|time: 30 - 45

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

10. Discussion and Debriefing http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-designers/ 11:31 PM 7. Discussion and debriefing: 50 - 55

11. http://contrastrebellion.com/ 11:31 PM

12. http://www.betaversion.org/~stefano/linotype/news/108/

13. Accessible design http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible/ 11:31 PM