Physical Design

What is physical design concerned with? (3)

Who does what (allocation of functions); how artefacts look; how artefacts behave

What is the minimum system specification? (3)

A conceptual model; a set of use cases; a design language

What is the user interface (UI)? (2)

Everything in the system that people come into contact with; the design of the interface mediates the interaction between people and devices

What are the three ways people interact with a system? (3)

Physically (pressing buttons, touching a screen); perceptually (what people see, hear, touch); conceptually (knowing what they can do)

What is a graphical user interface (GUI)? (2)

An interface found on personal computers, smartphones and touchscreen displays; uses graphics rather than typed commands

What is the history behind GUIs? (4)

Early research at the Stanford Research Laboratory and MIT; built on by Xerox PARC; inspired the Macintosh; Windows GUIs were broadly based on the Macintosh

What is a direct manipulation (DM) interface? (1)

One where graphical objects on the screen are directly manipulated with a pointing device

What are the three features of direct manipulation? (3)

Continuous representation of the objects of interest; physical actions or labelled button presses instead of complex syntax; rapid, incremental, reversible operations whose impact is immediately visible

What does direct manipulation depend on? (2)

Bitmapped screens so each pixel can be used for input and output; a pointing device

What does WIMP stand for? (4)

Windows; icons; menus; pointers

What is a WIMP interface? (2)

The most prevalent type of GUI (e.g. Windows or Mac OS); uses direct manipulation of on-screen objects instead of issuing commands

What is the template for defining each WIMP element? (3)

Window: a way of sharing the display among applications; icon: an image or symbol representing a file, folder, application or device; menu: a list of commands or options to choose from

What is a window in a WIMP interface? (3)

Divides the screen into areas that act like separate input and output channels; lets people see the output of several processes at once; lets people choose which receives input by selecting it

What is changing the focus? (1)

Choosing which window receives input by selecting it with a pointing device (click or touch)

What is an icon used for? (2)

Represents features and functions (from software applications to clothing); helps people recognise which feature they need to access

What are the three types of icon representation? (3)

Metaphor (transferring knowledge from one domain to another); direct mapping (a direct image of what it represents); convention (meaning developed over time)

What is the template for classifying an icon? (3)

Does it use a familiar metaphor; does it directly picture the thing; has its meaning been learned through convention

What are menus used for? (2)

Present a list of commands or options to choose from; use groupings and shortcuts to help users find items

What types of pointer can be used? (4)

Mouse, joystick or stylus; finger (touchscreen); remote pointers (e.g. Wii wand) or IR pointers; gestures

What is a design language? (3)

A set of design elements (colour, styles, types of buttons, sliders and other widgets); principles of composition (rules for putting them together); collections of qualifying situations (contexts and how they affect the rules)

What is the template for describing a design language? (3)

Elements: the building blocks (colour, buttons, widgets); composition: the rules for combining them; context: situations that change the rules

What are examples of published design languages? (2)

Material Design (Google/Android); Microsoft Windows design guidelines

What is navigation design? (3)

The discipline of creating, analysing and implementing ways for users to navigate a website or app; can enhance a user's understanding; can give users confidence and provide credibility to a product

What is a design pattern? (1)

A general, reusable solution to a problem

What is the hamburger menu? (3)

An icon of three lines; clicked or tapped to reveal more navigation options; common on mobile and increasingly on desktop

What is vertical navigation? (3)

Usually on the left-hand side of the screen; takes up generous screen space; displays global navigation links with primary, secondary and tertiary levels

What is a call-to-action button? (3)

Persuades, motivates and moves the audience to act (sign up, purchase, download); given prime place on the page; must be noticeable

What is the template for choosing a navigation pattern? (3)

Identify the user's goal; pick a pattern that suits the screen space and content; check it is consistent, clear and easy to learn

What are the key concepts of layout? (8)

Similarity and proximity; hierarchy; whitespace; balance and symmetry; alignment; grid-based and responsive approaches; typography; colour

What are similarity and proximity in layout? (2)

Similar items are seen as belonging together; items placed close together are seen as a group

What is hierarchy in layout? (2)

Shows the order of importance of elements; uses size, position and emphasis to guide the eye

What are the whitespace guidelines? (4)

Use whitespace for grouping instead of lines; use margins to draw the eye around the design; scale objects proportionally to their surroundings; don't crowd controls together

Why should controls not be crowded? (2)

Crowding creates spatial tension; it inhibits scanning

What are the alignment guidelines? (4)

Align labels on the left or right; align controls on the left and right; expand as needed; align text baselines

What is grid-based design? (2)

Lays out content on a structure of rows and columns; keeps elements consistent and aligned

What is responsive design? (2)

Layout adapts to different screen sizes; commonly built with a grid framework such as Bootstrap

What is the template for a Bootstrap grid layout? (3)

An outer container element; a row element inside the container; column elements inside the row whose widths add up to 12 (e.g. col-md-N)

What is the reading process in typography? (2)

Consists of fixations and saccades; readability and legibility are different things

What are the metrics of readability? (3)

Speed; comprehension; error rate

What are the typography spacing guidelines? (3)

Use whitespace and always leave margins around body text; use generous leading (e.g. line-height of 140%); keep paragraphs narrow (about 60 to 75 characters, 12 to 15 words, 30 to 45 em)

What is a typeface? (2)

A family of fonts; two main categories are serif and sans serif

What are the guidelines for choosing fonts? (5)

Keep it simple with contrast; use no more than 2 or 3 typefaces (e.g. one for body text, one for display text); don't use two faces from the same category; use size, weight, style and hue to create contrast; 4 to 5 font varieties should be enough

What is red-green colour blindness? (3)

Protanopia and deuteranopia; affects about 8% of males; affects about 0.4% of females

What is blue-yellow colour blindness? (2)

Called tritanopia; far more rare (about 50 people in a million)

What is the guideline for designing around colour blindness? (2)

Don't depend solely on colour distinctions; use redundant signals such as brightness, location and shape

What are the three colour models? (3)

RGB (red, green, blue, each 0% to 100%); CMYK (cyan, magenta, yellow, used for printing); HSV (hue, saturation, value, based on biology)

What do the HSV values mean? (3)

Hue is the wavelength of the colour; saturation is the amount of pure colour (0% grey, 100% pure); value is brightness (0% dark, 100% bright)

What are the colour design guidelines? (3)

Avoid saturated colours; use few colours (3 to 4 is often enough for most websites); be consistent with expectations

Why should saturated colours be avoided? (3)

They are on the outside edge of the HSV cone; they cause visual fatigue because the eye keeps refocusing on different wavelengths; they tend to saturate the viewer's receptors

What are the ways to choose good colours? (3)

Copy colours from other interfaces or pick them from a photograph with natural colours; pick one colour and several shades of grey (the safe choice); or pick two colours that seem coordinated and ask for other opinions

What is the template for a colour scheme? (3)

One main colour plus shades of grey; one accent colour for important actions; check contrast between text and background