Visual design

The “look” of your interface

Project: What to do now

Start brainstorming!!– Lots of ideas, then narrow down to 3 or 4

Explore design space– Vary what you can – hardware, forms of input, forms of output,

features, requirement priorities, usability priorities

Be off the wall, crazy– This will lead to less crazy but original ideas

Project poster – March 4 Project report + prototype: April 1

Midterm review

How to study:– Look at slides for topics, bullets, vocabulary, etc.– Find details and examples in the book

Test format– 25-50% true/false, multiple choice, fill-in-blank– Rest short answer, with one longer answer

Review

What is usability? What is design? Why is it hard? The user centered design process

– General steps– various models – high level understanding– What is waterfall model?

Requirements Review

Functional vs. non functional What pieces are part of this?

– User characteristics, task analysis, environment, etc.etc. – Persona – what is it and what makes a good one?– Scenario – what is it and what makes a good one?– Stakeholders (primary, secondary, tertiary, facilitating)

How do you gather data? Tradeoffs?– Interview, questionnaire, observation, etc. etc.

Task models– Hierarchical task analysis - how to do it?– Use cases – what are they good for?

Humans review

What are issues concerning our senses? Model Human Processor model of memory

– What are pieces of memory (STM, LTM, etc.)– What’s a chunk? Why do we care?– What are implications? (recognition over recall,

externalizing, etc.)

Other processes – what are they? (attention, learning)– What are the implications?

Interaction Review

Command line WIMP Direction manipulation Pen & mobile Speech & natural language

Issues, advantages, disadvantages, etc.

Prototyping

Prototyping– What’s vertical vs. horizontal?– What’s low vs. high fidelity?– What are various methods?

Scenarios, mockups/sketches, etc. Issues and tradeoffs?

Role of Graphic Design

What someone initially encounters– Sets a framework for understanding content

Role of Graphic Design

What someone initially encounters– Sets a framework for understanding content

Role of Graphic Design

What someone initially encounters– Sets a framework for understanding content

Graphic Design

A comprehensible mental image Appropriate organization of data, functions, tasks

and roles High-quality appearances

The “look”

Effective interaction sequencing The “feel”

Classes at UNCC– http://www.uncc.edu/schedule/subject/artg.html

Graphic Design

Involves knowledge of:– Sequencing– Organization– Layout– Imagery– Color– Typography

Graphic Design Principles

Metaphor Clarity Consistency Contrast Alignment Proximity

Clarity

Every element in an interface should have a reason for being there

– Make that reason clear too!

White/open space– Leads the eye– Provides symmetry and balance– Strengthens impact of message– Allows eye to rest between elements of activity– Used to promote simplicity, elegance, class, refinement

Clarity via “White” Space

White = Open

Example

Clear, cleanappearance

Opinion?

Example

Does this convey different impressions?

Consistency

In layout, color, images, icons, typography, text, …

Within screen, across screens Stay within metaphor everywhere

Platform may have a style guide– Follow it!

Example

Home page Content page 1 Content page 2

www.santafean.com

Alignment

Western world– Start from top left

Novices often center things– No definition, calm, very formal

Grids– (Hidden) horizontal and vertical lines to help locate window

components– Align related things– Group items logically

Grids – use them

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

Three Column Layout Grids

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

Symmetry vs. Asymmetry

Beware of too much symmetry

Proximity

Items close together appear to have a relationship

Distance implies no relationship

Time:

Time

Example

Name

Addr1

Addr2

City

State

Phone

Fax

Name

Addr1Addr2

CityState

PhoneFax

Name

Addr1Addr2

CityState

PhoneFax

Two-level Hierarchy•indentation•contrast

Grouping by white space

Alignment connects visual elements in a sequence

Logic of organizationalflow

Slide fromSaul Greenberg

Economy of visual elements

– Minimize number of controls

– Include only those that are necessary eliminate, or relegate others to secondary windows (but don’t want too many extra windows!)

– Minimize clutter so information is not hidden

Example

Overuse of3D effects

Haphazard layoutfrom mullet & sano

Repairing a Haphazard layoutfrom mullet &sano

Contrast

Pulls you in – set off most important item Guides your eyes around the interface Supports skimming Add focus

Example

Visual noise

Color

Use for a purpose and sparingly Draw attention, communicate organization, to

indicate status, to establish relationships, aid search Use redundant cues

– Color-blindness– Enhances performance

Be consistent with color associations from jobs and cultures

How many small ovals?

Now how many small ovals?

Yellow– happy, caution, joy

Brown– warm, fall, dirt, earth

Green– go, on, safe, envy, lush,

pastoral

Purple– royal, sophisticated, Barney

Color Meanings: Contextually Specific

Red– aggression, love – hot, warning, stop, radiation

Pink– female, cute, cotton candy

Orange– warm, autumn, Halloween

Blue– cold, off

Color Meanings: Culturally Specific

http://www.ricklineback.com/culture2.htm

Legibility and readability

Characters, symbols, graphical elements should be easily noticable and distinguishable

Text set in Braggadocio

Text set in Helvetica

TEXT SET INCAPITOLS

Text set in Times Roman

Saul GreenbergU. Calgary

Legibility and readability

Proper use of typography – 1-2 typefaces (3 max)– normal, italics, bold– 1-3 sizes max

LargeMediumSmall

LargeMediumSmall

Readable

Design components to be inviting and attractive

Design components to be inviting and attractive

Unreadable

Design components to be inviting and attractive

Design components to be inviting and attractive

Saul GreenbergU. Calgary

Remember

Form follows function– Visual elements should help convey purpose and meaning

Be consistent Just like all design – iterate and get feedback!!

Let’s analyze:– http://www.cnn.com/– http://www.microsoft.com/