HCI quiz 3

color temperature

Warm colors are reds, oranges, yellows. • Generally energizing, passionate, positive • Red & yellow are primary colors, with orange in the middle, which means warm colors cannot be created with a cool color

similarity

When objects looks similar to one another, viewers will often see the individual elements as part of a pattern or group. This effect can be used to create a single illustration, image or message from a series of separate elements. The similarity between different elements can be shape, colour, size, texture or value. The more commonality that individual elements have, the greater the sense of coherence, thanks to similarity.

affordance

attribute of an object that allows people to know how to use it

mapping

clear relationship between controls and the effect they have on the world. you want mapping to feel as natural as possible ex. STOVe TOPS

interaction design

focuses on creating engaging interfaces with well thought out behaviors

information architecture

focuses on organizing structuring and labeling content in an effective and sustainable way to help users find information and complete tasks

visual design

focuses on the aesthetics of a site and its related materials by strategically implementing images colors fonts and other elements

visual path

guide users from one element to another, and allow designers to control how information is being perceived and in what order

UI brings together concepts from

interaction design visual design information architecture

typography

legibility serif vs sans serif

constraints

limiting the range of interaction possibilities for the user to simplify the interface and guide the user to the appropriate next action

feedback

making it clear to the user what action has been taken and what has been accomplished.

usability

measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment NOT identical to making things simple to use

consistency

refers to having similar operations and similar elements for achieving similar tasks. by leveraging consistent elements throughout your entire experience you make your experience far easier to use

Norman's 6 Design Principles

visibility- can I find what to do? feedback- what is it doing now? mapping: were am I and where can I go? affordance: how do i do it? constraint: these are the things I can't do consistency: i think i have seen this before

Psychological principles

1. users see what they expect to see 2. users have difficulty focusing on more than one activity at a time 3. it is easier to perceive a structured layout (Gestalt theory) 4. it is easier to recognize something than to recall it

grid and rule of thirds

A technique of composition in which a medium is divided into thirds, creating aesthetic positions for the primary elements of a design

visibility

Can i find what to do? more visible an element is, the more likely users will know about them and how to use them.

closure

Closure is a common design technique that uses the human eye's tendency to see closed shapes. Closure works where an object is incomplete or the interior space of an element is not fully closed, but the viewer perceives a complete shape by filling in the missing information. This technique is often associated with stencilled artwork, but is also closely associated with logo forms.

color is not just about visuals

Color is more than just a visual phenomenon. Each color we use conveys both tone and meaning; which is essential to affecting audiences' judgments and reactions

continuity

Continuation is the principle through which the eye is drawn along a path, line or curve, preferring to see a single continuous figure than separate lines. This can be used to point towards another element in the composition, and is seen where a line is cut through one object, often in a curve, aligning perfectly with a secondary element.

cool colors

Cool colors include green, blue, purple. • Blue is the only primary color within cool spectrum, which means other cool colors are created by combining blue with a warm color • Use cool colors to give a sense of calm/professionalism

use visual hierarchy to

Create a center of interest that attracts user's attention • Create a sense of order and balance • Guide the user through your UI - Visual path • Tell a story...Like all good stories, there should be a beginning, an end, and a point

neutral colors

Neutral colors include grays, browns. • Often serve as backdrop in design • Combine them with accent colors or use them • Alone for a minimalistic, clean loo

proximity

Proximity uses the close arrangement of elements to create a group association between those objects. If individual elements are also similar, they will tend to be perceived as a single whole, even though they are separate elements.

design principles for wearables

Size Matters • Make it Glanceable • Tactile is important • Balance public and private • Design for offline

design with many colors is hard

The colorful interfaces take a lot of skill to design. Designs that have lots of color require lots of thought about selecting colors that all work together. This is really hard and takes experience. When pulled off well, it can create a very nice fun, flashy aesthetic. But it's easy to do poorly! Rule of thumb: Keep it simple. Having too many colors undermines a clean look. Grayscale + One Hue is a simple, easy-to implement approach for forcing you to focus on things like layout, sizing, spacing, etc

connectedness

The law of unified connectedness states that elements that are connected to each other using colors, lines, frames, or other shapes are perceived as a single unit when compared with other elements that are not linked in the same manner. Connecting related links or buttons by adding them to the same drop-down menu.

figure / ground

This principle describes the eye's tendency to see and separate objects from their surrounding background. A classic example uses a vase/candlestick illustration to show two faces peering at each other, but you can also see this effect in a variety of logo designs. It works because human eyes want to see the figure (foreground object) and background (ground) as two different planes of focus.

responsive design

To make websites responsive to their environment • Make pages that look great at any size Start small (Mobile First) • Make it modular • Make it fluid, flexible • Flexible Layouts • Flexible Grid • Fluid Images • Always be optimizing best practices are still emerging