Skip to main content

Useability & Visual Communication

    Useability Principle

    Useability Principle Definition What you could look for
    accessibility ability to be used by many different people, even people with disabilities
    • responsive design - able to be used on mobile, tablet and desktop
    • compatible with speech readers and scaling fonts for visual difficulties
    • uses ARIA parameters for assistive technologies
    • use HTML5 semantic tags to categorise content for quicker access
    • compatibility tested across browsers Chrome, Edge, Safari. (Consider older versions)
    learnability how easy a system is to learn
    • Minimal clutter, consistent and familiar layout (Design principles)
    • Iconography
    • Tutorials
    • Tooltips
    • Help features
    safety ability for users to make errors and recover from the mistake - don't confuse safety with security
    • 404 pages (good error recovery pages)
    • Error feedback on page
    • AFK timeouts (… security)
    • Checking of fields before submitting an answer (client-side validation)
    • Limiting input options
    utility ability of the system to provide all the functionality that users need CAN IT DO PRESCRIBED FUNCTIONALITY?
    1. E.g.: generate a cipher problem
    2. E.g.: CAN THE WEB APPLICATION SEARCH FOR USERS?
    effectiveness ability of users to use the system to do the work they need to do, includes reliability HOW WELL CAN IT DO IT?
    1. E.g.: the cipher problem is random so that it's a new problem every time
    2. E.g.: CAN THE WEB APPLICATION FILTER SEARCH RESULTS

    Elements of Visual Communication

    Design Element Definition
    Space Used to support meaning or zone groups of data (i.e. space between elements). Used consistently to develop predictability
    Point Smallest element of visual communication, can be a dot but not necessarily circular
    Colour Choice of colour matters. Be consistent throughout application, and make sure colours chosen are compatible with each other (perhaps use a colour wheel)
    Tone Tone is light or dark variation of any colour
    Line A line can be a starting place, a marker or trigger to change
    Shape Shapes can use lines (straight or curved) to develop two-dimensional zoning and the implied boundary of an object. Shapes are good for conveying structure around data. The simplest form of shapes with data is a table. Shapes could also be a circular icon to centre a user to a record button on a phone
    Texture Texture refers to the tactile or inferred visual features of an object
    Form Can give depth
    Proportion and scale Ratio and size. Look for the "Golden Ratio". In mathematics, two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities

    Principles of Visual Communication

    Design Principle Definition
    Balance Arrangement of components of a visual communication in relation to a real or implied central axis / equilibrium / symmetry
    Contrast Contrast refers to opposing aesthetic qualities (i.e., what you see when you compare things that are different) and can be used for to create emphasis or focal point
    Proximity Where elements are positioned or grouped in relation to each other, perhaps 'clumping' elements near each other that have a perceived relationship (or avoiding those that don't)
    Harmony Interpreting the proximity to make sure components as a whole provide valuable meaning and are complementary across the interface. For example, sometimes it is better to split datasets across screens for example to avoid confusion
    Alignment Elements should 'line up', commonly used in HTML sign up forms
    Repetition Repeated elements (such as page constructs, sections or product layouts) which helps predictability
    Hierarchy Hierarchy refers to the 'reading order' of a design
    Back to top