TUTORIAL 6 VISUAL AESTHETICS 2 Colour in GUI design.

TUTORIAL 6VISUAL 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

5 min

10 min

10 min

15 min

10 min

5 min

00 - 05

05 - 10

10 - 20

20 - 30

30 - 45

45 - 50

50 - 55

12:56 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 (http://doi.acm.org/10.1145/2470654.2481281) USING COLOR IN INFORMATION DISPLAY GRAPHICS: http://colorusage.arc.nasa.gov/

12:56 PM 1. Overview – visual aesthetics in HCI |time: 00 - 05

2. Register as user

1. Go to the designeye website: https://www.cs.auckland.ac.nz/projects/designeye/

2. Click ‘Sign Up’ on the top menu bar

12:56 PM 2. Register as user at designeye |time: 05 - 10

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 ZealandInstitute: University of AucklandCourse: *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 [email protected] if you did not

attend the tutorial and need the course key)

Fill in the rest of the fields as indicated in the form (e.g. passwords, gender student ID, etc) then click ‘Create Account’

12:56 PM 2. Register as user at designeye |time: 05 - 10

Play Mini-Game 1: Colour Contrast

12:56 PM 3. Play Mini-game 1 on Colour’s Brightness Contrast |time: 10 - 20

Play Mini-Game 2: Colour Scheme

12:56 PM 4. Play Mini-game 2 on Colour Scheme|time: 20 - 30

Do the design challenge: UI Colouring task

12:56 PM 5. Do the design challenge|time: 30 - 45

Rate, like and/or comment on your friends’ work

12:56 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.

Discussion and Debriefing

http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-designers/

12:56 PM 7. Discussion and debriefing: 50 - 55

http://contrastrebellion.com/

12:56 PM

12:56 PM

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

Accessible design

http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible/

12:56 PM