$30 off During Our Annual Pro Sale. View Details »

SER594 Lecture 04

SER594 Lecture 04

Human Computer Interaction
GUI
(201902)

Javier Gonzalez-Sanchez
PRO

April 20, 2019
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

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

    View Slide

  2. 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.

    View Slide

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

    View Slide

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

    View Slide

  5. 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.

    View Slide

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

    View Slide

  7. 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.

    View Slide

  8. 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.

    View Slide

  9. 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.

    View Slide

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

    View Slide

  11. 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.

    View Slide