TUTORIAL 6 VISUAL AESTHETICS 2 Colour in GUI design

  • View
    213

  • Download
    2

Embed Size (px)

Transcript

  • Slide 1
  • TUTORIAL 6 VISUAL AESTHETICS 2 Colour in GUI design
  • Slide 2
  • Todays agenda (designeye) 1. Briefing and overview on colour What youll 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
  • Slide 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 others 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
  • Slide 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
  • Slide 5
  • 2. Register as user 3.Fill in the sign up form. Note: Username: You can use your UPI as your username to ensure its unique. Email address: Make sure its 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
  • Slide 6
  • Play Mini-Game 1: Colour Contrast 11:31 PM 3. Play Mini-game 1 on Colours Brightness Contrast |time: 10 - 20
  • Slide 7
  • Play Mini-Game 2: Colour Scheme 11:31 PM 4. Play Mini-game 2 on Colour Scheme|time: 20 - 30
  • Slide 8
  • Do the design challenge: UI Colouring task 11:31 PM 5. Do the design challenge|time: 30 - 45
  • Slide 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.
  • Slide 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
  • Slide 11
  • http://contrastrebellion.com/ 11:31 PM
  • Slide 12
  • http://www.betaversion.org/~stefano/linotype/news/108/
  • Slide 13
  • Accessible design http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible/ 11:31 PM