Graphical Elements of the User Experience

9 March 2009

2.0 Course Information

Quarter(s) offered:
Spring

Students required to take this course:

None

Students who might elect to take this course:
This course is appropriate for students pursuing a course of study in the HCI concentration area within Information Technology. This course might be of interest to other graduate students within GCCIS. Interdisciplinary students with the appropriate pre-requisites are also welcome

3.0 Goals of the course

Upon completion of the course, students will be able to effectively determine appropriate metaphor, narrative, and attendant graphical styles for a given interface.

4.0 Course Description

This course provides a theoretical framework covering principles of GUI and its effect upon the user experience. Emphasis will be upon principles that guide the user toward certain behaviors and elicit a sense of identity. This course is designed to articulate methods used to manipulate visual perceptions of space and surface. Students will apply these methods to create user interfaces that reflect the utility and character appropriate for specific projects.

5.0 Possible resources (texts, references, computer packages, etc.)

5.1 Kevin Mullet, Darrell Sano (1994). Designing Visual Interfaces: Communication Oriented Techniques. Prentice Hall.
5.2 Alexander W. White, (2002). The Elements of Graphic Design: Space, Unity, Page Architecture, and Type. Watson-Guptill Publications.
5.3 Editors of Phaidon Press (Eds). (2003). Area. Phaidon Press.

6.0 Topics

6.1 Types of grids and alignments

6.1.1 Mathematical progressions
6.1.2 Dynamic spaces
6.1.3 Irregular progression and syncopation
6.1.4 Negative spaces

6.2 Narrative structures for specific interfaces
6.2.1
Root concepts, brand identity, essence
6.2.2 Metaphor
6.2.3 Symbol
6.2.4 Representation

6.3 Surface treatment and ornamentation
6.3.1
Motif
6.3.2 Surface, texture and implied affordance
6.3.3 Font, type, leading, kerning

6.4 Narrative themes and graphical elements
6.4.1
Simplification of form
6.4.2 Closure
6.4.3 Proximity

6.5 Manipulating viewer perception of the z-axis (perceived depth)
6.5.1
Blur
6.5.2 Opacity
6.5.3 Overlap
6.5.4 Perspective
6.5.5 Scaling

6.6 Changing visual states based upon interaction-timed events, and juxtapositioning
6.6.1
Rhythm
6.6.2 Syncopation
6.6.3 Point of view
6.6.4 The long, medium and close-up shot
6.6.5 Editing

6.7 Synthesis: prototype creation

7.0 Learning Outcomes

7.1 Students will be able to differentiate between various methods used to manipulate user focus. Assessed through critique of work and evidenced in their implementation during in-class exercises.
7.2 Students will create several GUI prototypes that illustrate principles of visual hierarchy. Assessment will be judged via the creation of a prototype.
7.3 Students will develop integrated interfaces; selecting proper color, texture, and widgets in keeping with the intended target audience and utility of the interface. Assessment will be judged via the creation of a prototype.
7.4 Students will create interfaces using a spectrum of architectural structures. Assessed through critique of projects and in-class exercises.
7.5 Students will determine appropriate narrative structures for specific interfaces. Assessed through critique of projects and in-class exercises.
7.6 Students will address issues of style. Assessed through critique of projects and in-class exercises.
7.7 Students will implement a prototype that will include single state, interactive states, and animation or video. Assessed through critique of projects and in-class exercises.

8.0 Grading

  • Logo - "Picture the Impossible" 10%
  • Personal Logo 15%
  • Project Proposal 5%
  • Ideation 40%
  • Final Project 30%

Elouise Oyzon

Elouise Oyzon

Office hours:
Wednesdays and Thursdays Noon - 2oo

Office: 70-2547
E-mail: eroics at rit dot edu
AIM nick: oyzani