Designing for readability

pogonotomygobbleAI and Robotics

Nov 15, 2013 (3 years and 8 months ago)

66 views



Designing
for readability



Week 6 Designing for Readability

visual rhetoric

personas and their validity

"Actually
, we don't so much "make up" our personas as

discover
them as a by
-
product of the investigation process.

We
do, however, make up their names and personal details . .
.

Cooper 2004


narrative pictures built on background research


goals: short term and long term benefits of using your product


task analysis: should match real world behaviours


problems in personaland


Week 6 Designing for Readability

2

rich picture of a persona

3


Sarah clicks a link(TBD) that
takes her to a list of
products that allows her to
compare


On a product page, Sarah
clicks a link that says

Ask a
representative


Sarah Williams: New
customer


I don

t want to have to
look for privacy information.
I want the site to make it
clear


Demographics

Tech. comfort

Personal background

Sarah is a single woman who works long
hours in management consulting. She
travels extensively and rarely has time to run
errands. At the same time she

s been wary
of doing financial transactions online
because of fraud and identity theft. The
convenience and possible cost saving of
online banking is attractive, but she wants
to feel reassured that her information is
secure and money is safe.

Age group: 21
-
34

Years online: 0
-
2

Income: $50k+

PC: Medium

Web: Low

Needs


Reassurance about security and privacy


Clear messaging about what to do


Easy access to a human

Motivations

Scenarios

Features

Behaviors

Learn about
different kinds of
online bank
accounts


Compare bank accounts
across different Web sites


Seeking contact
information for
representative to ask
specific questions


Product
comparison
chart


Competitor comparison
chart for different products


Frequently asked
questions


Online chat with
representative

Brown, 2007 p 16



rich picture of personae behaviours

Week 6 Designing for Readability

4

rhetoric


the art of persuasion through communication


in language, the 3 modes of persuasion:


logos: reason


ethos: moral competence, expertise and knowledge


pathos: appeal to audience’s sympathies and imagination


in design


technological reasoning


Visibility,
mechanical aspect of the design


characteristic spirit


authority, credibility of designer


emotional response


Week 6 Designing for Readability

5



Week 6 Designing for Readability

6

"As you begin to plan
a document, you
should not only
consider who your
audience is and how
they will use the
document, but also
how you can use the
visual presentation of
the text to reinforce
the structure of the
information"


Benson, 1985, in Nord & Tanner
1993

Week 6 Designing for Readability

readability & findability


c
haracteristics



user
dependent and
co
-
dependent


components



logical structure of the

document




chunking


of
content



naming the structured components


labelling



providing
access
points to the information
in
the
document


keywords, indexing,
etc.



design principles


white space, fonts, graphics,
etc. (Weeks 7 & 9)


Week 6 Designing for Readability

8

how do people read?

reading
paths
:

choosing how to read



traditional written
texts



set by convention & culture


e.g..
top to bottom, left to right


linear


sentence by
sentence
?


non
-
linear


footnotes, endnotes, hypertext
links


scanning more prevalent now, even with books


images


relatively

open



bi
-
modal


block by block
scanning


Week 6 Designing for Readability

9



do you have trouble
with this reading path?


probably not,

but
others might




the designer of such

pages

/sites is no longer
the

author

of an
authoritative text, but is
a provider of material
arranged in relation to
the assumed
characteristics of the
imagined
audiences

Kress, 2004
p.
114


Week 6 Designing for Readability

10

Week 6 Designing for Readability

11

A
l
a
t
e
r

N
t
n
t
e
n
d

o
h
o
m
e
p
a
g
e



Writing


use for what
writing does
best



to provide an account of
events, action of events
involving significant
participants



Image


use for what
image does
best



depict the world
in
terms of
the significant elements
and their (spatially
represented) relations to
each other



Week 6 Designing for Readability

12

Kress & Leeuwen, 2003 p155
-
6

multimodal landscape of communication

“the
logic of image will more and more shape the
appearance and uses of writing. . . The story
-
board is an apt
metaphor for this change


image led, and very often the
product of a design
team”

Kress, 2004 p116


think graphic novels, new UTS website, even
books

Week 6 Designing for Readability

13

internal structure of documents


“.
. . it seems certain that on approaching a
document, readers possess some knowledge of it
that provides information on the probable structure
and organisation of key elements within
it”

Dillon
, 2003 Chapter 7 p.
2



Week 6 Designing for Readability

14

internal structure of documents


c
ognitive

structures
-
mental models


what Dillon calls

shape




imposed by the reader


representation
of
convention


conveyer
of
context


schema


organised set of global or thematic units


we build up information
schemas




sense of location within a document


spatial characteristics


semantic relationships



Week 6 Designing for Readability

15

do you recognise this?

16

back

17

information genres


regularities in presentation of discourse


book, newspaper, journal


well
-
understood in
paper


agreed
conventions in digital
documents are more loose


website
conventions


logo hypertext link to homepage


dropdown menus



Week 6 Designing for Readability

18

cognitive
process of reading


Week 6 Designing for Readability

19

Perceive visual

data

Communicate the
information to
oneself and/or
others

Recognize words

and letters or learn
new words

Encode the
information

Retrieve the
information

Relate the

information to entire
body of knowledge

Understand the
relationship of
individual words to the
whole passage

Coe, 1996 p.136

c
hunking

content


organizing complex information into manageable
chunks


responds
to the internal structure of the document


visually organise the chunks


visual cues


pre
-
defined objects


standard patterns


consistency


Week 6 Designing for Readability

20

l
abelling

chunks


basic level: name the

structure



containers


headings
,
subheadings



labels should be user
-
centric


standardisation
of labels within genres

Week 6 Designing for Readability

21

22

p
aper
-
based documents


linear flow


although possibly only novels are read in this
manner


signposts


wayfinding


paragraphs, headings & subheadings


navigation simple


well established models & aids

Week 6 Designing for Readability

23

reading
electronic
documents


spatial
attributes


layout


image placement


length of text


window size


navigation icons


semantic attributes of information
genre


expected form


style


sequencing


meaning

Week 6 Designing for Readability

24

“One
could make a case for paper being the liberator as at
least the reader always has access to the full text (even if
searching it might prove awkward).


With
digital documents, the absence of links could deny
some readers access to information and always force them
to follow someone else

s ideas of where the information trail
should lead
.”


Dillon, 2003 Chapter 7 p.2


Week 6 Designing for Readability

25

importance of blank space


spatial cues


gestalt psychology
-

principles of human visual perception
[more
in Week 9]


Bauhaus, New Typography, International Typographic Style
designers


modular grids


to
unify

the visual field


objects, text and space


consistent look


space
around

text


space
within

text

Week 6 Designing for Readability

26

Week 6 Designing for Readability

27

28

Paradis,
2005

Week 6 Designing for Readability

Week 6 Designing for Readability

30

Week 6 Designing for Readability

assignment
2


Structure
your design Project


find an existing print product


Research your chosen user community


Choose your theme from a
set list in
UTSOnline Announcements



Each theme has three (3) possible target user communities


choose one (1) user community only


Each theme
has given textual content


which you can edit, restructure, chunk, etc.


You can find the FAQ
for Assignment 2
in
UTSOnline
>Assignments>Assignment 2 FAQ


Week 6 Designing for Readability

31

References


Buchanan, R. (1985). ‘Declaration by design: Rhetoric, argument, and demonstration


in design practice’
Design Issues

2(1): 4
-
22 [Available via JSTOR]



Coe, M. 1996, 'Accessing information', in,
Human factors for technical communicators
, Wiley, New York, pp.
131
-
157.



Dillon, A. 2003, 'Shape: information as a structured space [Chapter 7]', in,
Designing


Usable Electronic Text
, 2
nd

ed [electronic resource], Taylor & Francis, New York


Kress, G.R. 2004, 'Reading images: Multimodality, representation and new media',


Information Design Journal
, vol. 12, no. 2, pp. 110
-
119 [Available via
IngentaConnect
]


Lynch, P.J. & Horton, S. 2002,
Web Style Guide
, Yale University Press, 2
nd

edn December


2007
http://www.webstyleguide.com/index.html



Lupton, E. 2004,
Thinking with type : a critical guide for designers, writers, editors, &


students
, Princeton Architectural Press, New York


http://www.papress.com/thinkingwithtype



Publication
design
standards


http
://www.graphic
-
design.com/DTG/Design/grids/parade.html



Townsend, S. 1998, 'Unfolding the surface of information',
Design Issues
,


vol. 14, no. 3,

pp. 5
-
20


32