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.
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.
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.
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.
javiergs
okuramasafumi
trapezoid
ffjlabo
assu_ming
azukiazusa1
suzukimar
takefumiyoshii
ryounasso
huffon
mugi_uno
codemountains
codehex
ddemaree
holman
dougneiner
smashingmag
addyosmani
cromwellryan
bluesmoon
mthomps
reverentgeek
denniskardys
bryan
malarkey