UI SOFTWARE ARCHITECTURE docx

UI SOFTWARE
ARCHITECTURE
Topics

Visual structure

Model-view-controller

View hierarchy

Observer

Android design pattern
2
Visual structure

Clarity

Consistency

Hierarchy

Balance

Grids

Contrast

Textures

Evaluating

3
Clarity

Directs the eye

Provides balance through its use

Strengthens impact of message

Allows eye to rest between elements of activity


Increases legibility, clarifies hierarchy

Used to promote simplicity and “elegance”
4
Clarity

Economy of Visual Elements

Minimize borders, heavy outlining, section
boundaries

Use white space instead

Reduce clutter

Minimize the number of controls
5
Clarity via White Space


White space
6
Principle: Consistency

Be c ons is tent in e ve ry as pe c t:

In layout, color, images, icons,
typography, text

Within screen, across screens

Stay within metaphor everywhere

Platform may have a style guide – follow
it!
7
Inconsistency

Result when local and global
designs aren’t balanced

Color Palette conflict

Conflict between local and global
design
8
Principle: Hierarchy

What are the relative “levels” of

importance?

What should the user see first?
Second?
9
Hierarchy

What are the relative “levels” of
importance?
10
Typographical Hierarchy
11
Typographical Hierarchy plus
Indentation
12
Principle: Grids

Western world

Start from top left

Allows eye to parse display more
easily
13
Grids

(Hidden) horizontal and vertical
lines to help locate window
components


Align related things

Group items logically
14
Grids: Examples
15
Grid Alignment

Grid: the invisible, underlying structure of a site


Grid: essential – you must use one
16
Grid Aligment
17
Grid Alignment

Grids

Help locate window components

Align related things

Group items logically

Minimize number of controls,
reduce clutter
18
Grid Example
19

Principles: Contrast

Pulls you in

Guides your eyes around the interface

Supports skimming

Take advantage of contrast to guide user
through hierarchy of information; add
focus; or to energize an interface with
“texture”

Can be used to distinguish active control
20
Contrast

Can be used to set off most important
item

Allow it to dominate

Ask yourself what is the most
important item in the interface,
highlight it

Use geometry to help sequencing
21
Contrast Techniques


Blinking

Good for grabbing attention, but use
very sparingly

Reverse video, bold

Good for making something stand out

Again, use sparingly
22
Contrast Example
23
Important
element
Poor Graphic Design

Inconsistent tone

Marble conflicts with icons

Varied hue, saturation and brightness

Unbalanced – heavy on left.

No Gridding

Colors conflict

Conflict between global and local icons


Font unreadable
24
Evaluating Screen Organizations

Logical grouping

Visual reinforcement of logical
groupings

Aesthetics

Eye movements

Hand movements to devices

Consistency
25