Designing for readability

Week 6 Designing for Readability

visual rhetoric

Week 6 Designing for Readability 2

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

3

rich picture of a persona

•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-34Years online: 0-2Income: $50k+

PC: MediumWeb: Low

Needs•Reassurance about security and privacy•Clear messaging about what to do•Easy access to a human

Motivations

Scenarios Features BehaviorsLearn 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

Week 6 Designing for Readability 4

rich picture of personae behaviours

5

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

Week 6 Designing for Readability

6

Week 6 Designing for Readability

"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 8

readability & findability characteristics

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 9

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 10

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 11

AlaterNtntend o homepage

Week 6 Designing for Readability 12

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

Kress & Leeuwen, 2003 p155-6

Week 6 Designing for Readability 13

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 14

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 15

internal structure of documents

cognitive 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

do you recognise this?

16back

17

Week 6 Designing for Readability 18

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 19

cognitive process of reading

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

Week 6 Designing for Readability 20

chunking 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 21

labelling chunks

basic level: name the ‘structure’ containers headings, subheadings

labels should be user-centric standardisation of labels within genres

22

Week 6 Designing for Readability 23

paper-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 24

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 25

“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 26

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 27

28

Paradis, 2005

Week 6 Designing for Readability

Week 6 Designing for Readability

30Week 6 Designing for Readability

Week 6 Designing for Readability 31

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

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, 2nd 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, 2nd 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 Yorkhttp://www.papress.com/thinkingwithtype

Publication design standardshttp://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