designing for readability
DESCRIPTION
Designing for readability. visual rhetoric. "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 - PowerPoint PPT PresentationTRANSCRIPT
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