SER594 Human-Computer Interaction Lecture 04 Graphical User Interfaces Javier Gonzalez-Sanchez, PhD [email protected] javiergs.engineering.asu.edu Office Hours: By appointment

Design Principles • 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.

Design Principles Five design principles to create unity within the whole. § proximity § similarity § continuity § closure

Proximity • When spaced far apart, objects are perceived as separate. • The strongest proximity relationship is when objects overlap

Similarity § 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 is.

Continuity • Once the eye begins to follow something, it will continue traveling in that direction until it encounters another object.

Closure § It is related to continuity in that it asks the eye to complete a path. § 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 elements. § 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 information § 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 readability. § 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.

Homework § Improve the GUI for your server application § Develop a GUI for your client application

SER594 – Human Computer Interaction Javier Gonzalez-Sanchez [email protected] Spring 2019 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.