TUTORIAL 6 VISUAL AESTHETICS 2 Colour in GUI design.
-
Upload
abraham-wright -
Category
Documents
-
view
223 -
download
2
Transcript of 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
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
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