To be covered:- What is HCI? Goal of HCI HCI - An Interdisciplinary Area Concerns in HCI
Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design,...
-
Upload
ann-thornton -
Category
Documents
-
view
214 -
download
0
Transcript of Communication design Slides by Professor John Zimmerman HCI Institute and the School of Design,...
communication design Slides by Professor John ZimmermanHCI Institute and the School of Design, Carnegie Mellon University
and Professor Steven DowHCI Institute
05-863 / 08-763 / 46-863: Introduction to Human Computer Interaction for Technology Executives
Lecture 5
1
Announcements 10 (of 77) people who are registered didn’t
submit HW #1 yet Definitely worthwhile if in the course, since
generous late penalty http://www.cs.cmu.edu/~bam/uicourse/08763fall13/grading.html
Be sure to drop officially if you aren’t actually take the course
Sketching important for Part A of HW #2
© 2014 - Brad Myers 2
goals for today
explore communication
design familiar with basic
principles examine some
examples
Copyright © 2014 - CMU 3
overview
what is design?
communication
planning key concepts typography color design systems
web design examples
Copyright © 2014 - CMU 4
what is design?
5
design
Simon: design as focus on achieving a preferred state
Rittel: design inquiry as a means to address wicked problems (problems that cannot be broken down) through reframing
Schön: design inquiry as reframing throughreflection in and on action
Copyright © 2014 - CMU 6
what is communication design?
act of creating a communicative artifact: print piece, web site, way finding system, data visualization, illustration, etc.
requires an awareness of the social and cultural systems within the context of use
intention of information transfer … both of text and subtext
intention of specific user action or other outcome
Copyright © 2014 - CMU 7
designers struggle to
combine words, pictures, and other graphic elements to form a unified whole — communicative gestalt
Copyright © 2014 - CMU 8
designers struggle to
find harmony between the needs and expectations of users (specific audience) and the goals (short term and longer term) of their client
must work to understand the needs and values of both and of other stakeholders
Copyright © 2014 - CMU 9
design process
The design process is a series of events that begins when the designer receives an assignment. It continues until a correct solution is generated and implemented. The design process is not linear, but iterative.
Copyright © 2014 - CMU 10
communication design and the web
early days (1995-2000), simply shovel print content onto web
today, often the primary communication
approach benefits production speed dynamic information update search interactivity (information retrieval and
transactions) moving to mobile … ubiquitous
Copyright © 2014 - CMU 11
three linked representations
user interface
information architecture
system architecture
Copyright © 2014 - CMUCopyright © 2014 - CMU 12
communication design planning
13
What is communication design?
14Copyright © 2014 - CMU
What is communication design?
15Copyright © 2014 - CMU
What is communication design?
16Copyright © 2014 - CMU
17Copyright © 2014 - CMU
18Copyright © 2014 - CMU
19Copyright © 2014 - CMU
project planning
Copyright © 2014 - CMU
resolve goals and objectives of client and stakeholders
select audience
sketch out experience goals and
voice budget and schedule
20
technical planning
Copyright © 2014 - CMU
connection speed
(mobile)
computer/device
platform
display size and resolution
(mobile) browser support
(mobile/TV)
21
other considerations
Copyright © 2014 - CMU
copyright for words and images
accessibility — screen readers, color blindness, text size for low-vision
22
challenge of user experience looking for desire within
Copyright © 2014 - CMU 23
manifestations of desire
Copyright © 2014 - CMU 24
very incomplete view
Copyright © 2014 - CMU 25
see in pastwant to know desire in the future
Copyright © 2014 - CMU 26
usability
Copyright © 2014 - CMU
primary audience, secondary audience … same goals?… should this be two sites or one site?
issues skill level familiarity with this site or similar sites professional tool (flow and efficiency) walk up and use once? 27
basic communication design
28
topics
Copyright © 2014 - CMU
typograph
y color
design systems
29
typography
civilization relies on alphabet and numerals … in English, we mix Roman letters and Arabic numbers
typography taught as the visual art of communication
designer investigates by working with elements and spatial relationships
goal is to provide a voice (intention and tone of write)early systems:ALL•CAPs•WITH•BULLETS•BETWEEN•WORDS•AND•NO•PUNCTUATION SOMETIMES•EVEN•RUNNING•LEFT•TO•RIGHT•AND•THEN•BACK•TO LEFT
Copyright © 2014 - CMU 30
anatomy of a typeface
a typeface is a set of type families of a unifying and distinctive design (for instance, Times Roman)
a font is one instance of that family (Times Roman light italic)
standard measuring unit is the point, measured from top of ascender to bottom of descender
Copyright © 2014 - CMU 31
more on type
two kinds of type, serif and sans serif
Copyright © 2014 - CMU 32
more on type
Copyright © 2014 - CMU
the relationships between type and space around it makes paragraphs look different:
size of x-height type size leading line length
33
type x-height
Copyright © 2014 - CMU
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service. (11 pt Bernhard Modern)
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service. (11 pt Garamond)
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service. (11 pt Taz)
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service. (11 pt Gill Sans)
34
leading and line length
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu displays the next stop (Figure 2F). At the end of the trip, commuters press a stop recording button (Figure 2F) as they exit.
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time.When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E).Once they board the bus, commutersindicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace.While tracing, Tiramisu displays the next stop (Figure 2F). At the end of the trip, commuters press a stop recording button (Figure 2F) as they exit.
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu displays the next stop (Figure 2F). At the end of the trip, commuters press a stop recording button (Figure 2F) as they exit.
Copyright © 2014 - CMU 35
alignments: flush left, flush right, centered, and justified
Copyright © 2014 - CMU
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu
Tiramisu displays real-time arrival information when a commuter is actively sharing GPS (figure 2C). When this is not available, the system shows historic arrival information, assuming the system has previous trace data for this bus at this time. When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows bus fullness information, something currently not available as an estimate in the schedule provided by the transit service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu
Tiramisu displays real-time arrival information when a
commuter is actively sharing GPS (figure 2C).
When this is not available, the system shows historic
arrival information, assuming the system has previous
trace data for this bus at this time.
When neither real-time nor historic arrival information are available, the interface shows the scheduled arrival
time. In addition, the interface shows bus fullness
information, something currently not available as an
estimate in the schedule provided by the transit
service.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E).Once they board the bus, commutersindicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace.While tracing, Tiramisu
Tiramisu displays real-time arrival information when
a commuter is actively sharing GPS (figure 2C).
When this is not available, the system shows historic arrival
information, assuming the system has previous trace
data for this bus at this time. When neither real-time nor
historic arrival information are available, the interface shows the scheduled arrival time. In addition, the interface shows
bus fullness information, something currently not
available as an estimate in the schedule provided by the
transitservice.
To share GPS traces, commuters decide on the bus they wish to take, they select that bus from the list of arrival times, transitioning the interface to the “Destination” screen (Figure 2D). Here they select from a list of upcoming stops. Making a selection transitions the interface to the “Record” screen (Figure 2E). Once they board the bus, commuters indicate fullness and press the “Start Recording” button to share the fullness rating and the GPS trace. While tracing, Tiramisu
36
type “etiquette”
Copyright © 2014 - CMU
larger x-heights are often easier to read at small sizes, but look dense when leading is tight
tight leading makes long bodies of text hard to read, especially if the line length is long
long lines of type (>70 characters) are hard to read
very short lines break up text into non-syntactic groups of 2-3 words
justified text often creates
river just don’t center!!!!
37
choosing type for your design
look at short and long pieces of textCopyright © 2014 - CMU
take an inventory of text elements you need (ex: head, subhead, footnotes).
choose a type family or two to work with — no font saladsmake sure faces look good together and support intended voice
find suitable sizes for each of the elements create guidelines and maintain them
test line length and leading if applicable 38
working with type
Copyright © 2014 - CMU
use of ALL CAPS or all italic slows reading
readers pay attention to contrast among typographic elementschanges in weight (bold, etc.) may be noticed more than changes in typeface
reversed type (white letters on a black or colored background) is a strong visual element and should be used sparingly
white space helps to create visual tension and clusters of related elements
39
color
40
Color is communication
41Copyright © 2014 - CMU
Color is communication
42Copyright © 2014 - CMU
Color matters!
43Copyright © 2014 - CMU
Color matters!
44Copyright © 2014 - CMU
color basics
Copyright © 2014 - CMU
colors we seen in nature are reflections of the visible light around us.
calls attention to or relate
elements creates an emotional
response carries semantic
meaning
45
color is difficult
Copyright © 2014 - CMU
cultural differences – Kodak yellow, Coke
red highly subjective
relative – affected by light, context, environment, screen settings
simultaneous contrast – color is affected by what color is next to it
46
print and screens
print and screens use different color models.
The additive model used by screen displays mixes colors with light (white).
The subtractive model used by print media and pigment mixes colors with ink (black).
Copyright © 2014 - CMU 47
color wheel
Copyright © 2014 - CMU 48
properties
hue, chroma
intensity,
saturation value,
brightness
Copyright © 2014 - CMU 49
hue
Copyright © 2014 - CMU
hue refers to the name of the colorone hue can be varied to produce many colors: pink, rose scarlet, maroon, and crimson are all colors, but the hue in each case is red
50
intensity / saturation
Copyright © 2014 - CMU
terms refer to the richness of a
color color is at full intensity
when there is no other pigment present in the
color (no black or white mixed in) when color has only two or fewer RGB
values
51
value / brightness
Copyright © 2014 - CMU
lightness or darkness of a hue or color
CMYK: value can be affected by adding white or black paint to the color
RGB: value is changed by adding more or less light
52
choosing color for your design
Copyright © 2014 - CMU
strategies primary/secondary/tertiary warm /cool triads monochromatic neutrals complements/split complements analogous
work from examples … collage what you like
53
digital (screen) color
Copyright © 2014 - CMU
print uses CMYK or Pantone representations of color, and occasionally RGB
CMYK can give rich browns you cannot get
in RGB digital color is usually represented
as RGB values RGB can give intense blues
that are hard in CMYK hard to match
between print and screen
print allows matte and glossblack gloss print on matte black paper (can’t do this on the screen)
54
Color contrasts
55Copyright © 2014 - CMU
design systems
56
design systems
Copyright © 2014 - CMU
create ordered and systematic designs using grids and visual hierarchy
functional and aesthetic benefits include: approachable – use immediately recognizable – easy to assimilate and
remember immediate – have a greater impact on the
viewer usable – prominent, easy to engage with
57
creating design systems
Copyright © 2014 - CMU
assess component parts of a design and the relationships between those parts
train your eye to look for these relationships:
symmetry and asymmetry scale, contrast and proportion harmony alignment proximity and correspondence
58
symmetry and asymmetry
symmetry is similarity of form or arrangement on either side of a dividing line or plane
a symmetric organization symbolizes a restive state, while asymmetry suggests energy
content drives designers’ choices about symmetry.
Copyright © 2014 - CMU 59
John ZIMMERMAN communication design … and the web 49
MOM
Copyright © 2014 - CMU 60
John ZIMMERMAN communication design … and the web 50
MOM
Copyright © 2014 - CMU 61
John ZIMMERMAN communication design … and the web 52
Copyright © 2014 - CMU 62
scale, contrast, and proportion
the scale of elements determines where the viewer looks first, and what is most important
large, powerful visual elements must be used sparingly
saturated color and high contrast areas are very visually attractive
Copyright © 2014 - CMU 63
harmony and unity
establishing regular relationships (i.e., a pattern) allows the viewer to become comfortable with the design and move to a higher level of abstraction – the whole rather than the parts.Copyright © 2014 - CMU 64
alignment
when forms, their edges, or their central axes align with one another, relationships and connections between them are established
Copyright © 2014 - CMU 65
Copyright © 2014 - CMU
The scale of elements determines where the viewer looks first, and what is most important. Large, powerful visual elements must be used judiciously, particularly in interface design.
Scale, contrast, and proportion
66
Copyright © 2014 - CMU
Harmony describes the effect, seen at the level of the whole, of the pleasing interaction of the parts.
Harmony
67
Copyright © 2014 - CMU 68
When forms, their edges, or their central axes align with one another, relationships and connections between them are established.
Elementsare Center
Aligned
Elementsare LeftAligned
Alignment
Copyright © 2014 - CMU 69
When forms are near to each other, the eye makes visual groupings of the information. Similar size, shape, color or texture can also cause groupings.
1 3 21 37 21 3713
Proximity and correspondence
Copyright © 2014 - CMU 70
Symmetry is similarity of form or arrangement on either side of a dividing line or plane. A symmetric organization symbolizes a restive state, while asymmetry suggests energy. Content drives designers’ choices about symmetry.
Symmetry and asymmetry
A design system is a comprehensive organization, utilizing repeated sizes, proportions, and design elements to maintain consistent functional and aesthetic qualities over a series of pages, screens, or artifacts.
Elements such as type sizes, styles, placement of elements, and colors are used consistently to unify a series of designs.
Design systems
71Copyright © 2014 - CMU
Copyright © 2014 - CMU 72
Design systems are based on grids.
Design systems
Copyright © 2014 - CMU
Grid systems allow the layout to be codified across a series of pages, displays, etc.
Grid systems are based on columns and rows.
The more columns and rows, the more flexible the design.
73
Design systems
Copyright © 2014 - CMU
When a grid system is put to good use, it will create a regular and rhythmic design.
Consistent use of a grid, paired with visual elements, will create a consistent “look and feel” in a manual, web site, or GUI.
74
Design systems
Copyright © 2014 - CMU
Why is it good to have a design system?
• Structured: the foundation on which the design is built
• Predictable: simplifies the task of communicating information to the user
• Efficient: the basic design work is complete, and the design can be repeated easily
75
Design systems
Copyright © 2014 - CMU
Assess your communication goals. Where will the information be displayed? Who is the audience? What is the purpose of the communication?
Group each item of information into a small number (5-7) of categories according to origin or intended use.
Determine the rank or importance of each group. Organize into a smaller number (3-5) of echelons based on this ranking.
76
Creating a design system
Copyright © 2014 - CMU
Use appropriate variables to establish hierarchy. Large, bold type might be used for the most important information. A systemic location on the grid might be reserved for pictures.
Base your designs on a grid.
Use the squint test to make sure echelons are hanging together as a unit, but with enough difference to be visually separated from each other. 77
Creating a design system