Designing for readability

1. Designing for readability visual rhetoric Week 6 Designing for Readability

2. "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 personas and their validity Week 6 Designing for Readability

3. “I don’t want to have to look for privacy information. I want the site to make it clear” Sarah Williams: New customer Demographics Tech. comfort Personal background Age group: 21-34Years online: 0-2Income: $50k+ PC: MediumWeb: Low 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. 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 • 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” rich picture of a persona Brown, 2007 p 16

4. rich picture of personae behaviours Week 6 Designing for Readability

5. 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 rhetoric Week 6 Designing for Readability

6. Week 6 Designing for Readability

7. "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. 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) readability & findability Week 6 Designing for Readability

9. 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 how do people read? 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. Alater Ntntend 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. “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 multimodal landscape of communication Week 6 Designing for Readability

14. “. . . 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 internal structure of documents Week 6 Designing for Readability

15. 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 internal structure of documents Week 6 Designing for Readability

16. do you recognise this? back

18. 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 information genres 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 Understand the relationship of individual words to the whole passage Retrieve the information Encode the information Relate the information to entire body of knowledge cognitive process of reading Coe, 1996 p.136 Week 6 Designing for Readability

20. 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 chunking content Week 6 Designing for Readability

21. basic level: name the ‘structure’ • containers • headings, subheadings • labels should be user-centric • standardisation of labels within genres labelling chunks Week 6 Designing for Readability

23. linear flow • although possibly only novels are read in this manner • signposts • wayfinding • paragraphs, headings & subheadings • navigation simple • well established models & aids paper-based documents Week 6 Designing for Readability

24. spatial attributes • layout • image placement • length of text • window size • navigation icons • semantic attributes of information genre • expected form • style • sequencing • meaning reading electronic documents 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. 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 importance of blank space Week 6 Designing for Readability

27. Week 6 Designing for Readability

28. Paradis, 2005 Week 6 Designing for Readability

29. Week 6 Designing for Readability

30. Week 6 Designing for Readability

31. 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 assignment 2 Week 6 Designing for Readability

32. Buchanan, R. (1985). ‘Declaration by design: Rhetoric, argument, and demonstration in design practice’ Design Issues2(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 References