Human Computer Interaction
Graphical User Interfaces
Javier Gonzalez-Sanchez, PhD
Office Hours: By appointment
• Users are influenced by the visual perceptual aspect
• The mind copes with the visual confusion of our everyday world
by consolidating objects into groups in order to simplify input
– simplifies the parts by making it into a single object.
• The stronger the relationship between elements on a page, the
better the communication (visual).
• Five design principles: proximity, similarity, continuity, closure
and figure/ground. Each employs different methods to create
unity within the whole.
Five design principles to create unity within the whole.
• When spaced far apart, objects are perceived as separate.
• The strongest proximity relationship is when objects overlap
§ Shared visual characteristics automatically create relationships.
§ The more alike objects appear, the more likely they are to be
seen as a group.
§ It is based upon what an object looks like, not what an object
• Once the eye begins to follow something, it will continue
traveling in that direction until it encounters another object.
§ It is related to continuity in that it asks the eye to complete a
§ As long as enough essential information is present, the mind
supplies the missing pieces of an object.
To Do List
§ Keep the interface simple. Almost invisible to the user. Avoid unnecessary
§ Match between system and the real world
§ Create consistency using common UI elements.
§ Spatial relationships between items on the page and structure the page
based on importance. Draw attention to the most important pieces of
§ Strategically use color and texture. You can direct attention toward or
redirect attention away from items using color, light, contrast, and texture
to your advantage.
To Do List
§ Use typography to create hierarchy and clarity. Different sizes, fonts, and
arrangement of the text to help increase scanability, legibility and
§ Communicates what’s happening. Always inform your users of
location, actions, changes in state, or errors. The use of various UI
elements to communicate status and, if necessary, next steps can reduce
frustration for your user.
§ Think about the defaults. By carefully thinking about and anticipating the
goals people bring to your site, you can create defaults that reduce the
burden on the user. This becomes particularly important when it comes
to form design where you might have an opportunity to have some fields
pre-chosen or filled out.
§ Improve the GUI for your server application
§ Develop a GUI for your client application
SER594 – Human Computer Interaction
Disclaimer. These slides can only be used as study material for the SER594 course at ASU.
They cannot be distributed or used for another purpose.