Enhancing Document Usability through Supra-Level Design

1. Notes to Chapter Ten English 308 Designing Visual Language-Chapter 10

2. Supra-Level Elements Supra-level design • Coordinates and unifies all of the elements of a document • Is an important part of all documents—print, or electronic Designing Visual Language-Chapter 10

3. Supra-level Design Focuses on improving the usability of documents • The paper size, orientation and shape of a document is a supra-level choice • The use of consistent graphic elements, pictures, symbols and icons are supra-level choices • The use of headers and footers, bleed and die-cut tabs, field borders and many other choices are supra-level and all have a significant impact on the usability of the document Designing Visual Language-Chapter 10

4. Supra-level Cohesion • Supra-level design choices might be used to unify not just a single document, but a whole series of documents • Consistent design creates a common “look and feel” to the documents, making them easier to use • Some examples of such consistent design include web sites where the pages share a common navigation interface, telephone directories where information is located in approximately the same location regardless of location, and a published series of textbooks which share a common look and feel Designing Visual Language-Chapter 10

5. Conventions of Supra-level Design—Textual Elements Textual elements frequently mark the beginning of new sections and are used to create cohesion across text fields For example Designing Visual Language-Chapter 10

6. Supra-textual Elements • Titles on cover pages initiate a document • Section headings mark major boundaries within a document • Initial letters tell readers where to start on a given page • Tabs provide access points in longer documents • Navigational bars give users access to pages in a web site • Headers and footers tie together pages or screens within a section • Background text and watermarks link pages Designing Visual Language-Chapter 10

7. Textual Conventions • Supra-textual elements often conform to accepted conventions—in fact, over time these conventions create a consistent look and feel for a company’s or organization’s documents • These conventional supra-textual elements might be very rigid Designing Visual Language-Chapter 10

8. Textual ConventionsFormal Reports • Formal reports have title pages, often section title pages, and page headers or footers • Web sites also have title (home) pages that introduce or provide links to a series of screens. Designing Visual Language-Chapter 10

9. Textual ConventionsTraining Materials • Training materials often use tab headings to increase access; catalogs use internal tabs • Web sites use various kinds of navigational buttons for links Designing Visual Language-Chapter 10

10. Textual ConventionsNewsletters • Use initial letters (or drop caps) to start articles • Web sites might also use initial letters This is an example of using initial letters to mark the beginning of an article. A variation of this device is the drop initial cap which is shown in the text box to the right. This is an example of using a drop initial cap to mark the beginning of an article. It is a variation of the initial cap which is shown in the text box to the left. Designing Visual Language-Chapter 10

11. Textual ConventionsOfficial Documents • Often have faint text, watermark text, or embossed text embedded in the pages • Web sites often make use of watermark backgrounds, but such backgrounds can be found on a broad range of documents This certificate honors the recipient as most outstanding student in English Writing 401 Designing Visual Language-Chapter 10

12. Conventions of Supra-level Design—Spatial Elements Spatial decisions include • The size, shape, orientation of the page and the document • How the document is physically contained (i.e. within a jacket, folder, pouch, binder, or laminated cover) • The paper stock, or print or display surface Designing Visual Language-Chapter 10

13. Supra-Spatial Vocabulary Paper documents come in many sizes • Portrait pages are oriented with the long sides at the sides • Landscape pages are oriented with the long sides at the top and bottom • Folded pages are usually folded in the middle • Tri-fold pages are folded in three sections and usually only consist of a single page Designing Visual Language-Chapter 10

14. Supra-Spatial Vocabulary Paper documents come in many shapes • They might be die-cut (by a printer) to have a shape other than rectangular • They might be punched such as a door-knob hanger • They might have cut out shapes so that readers can see text on an inside page • They might hold other documents in folds, pouches or pockets • They might be perforated for easy tearing Designing Visual Language-Chapter 10

15. Supra-Spatial Vocabulary Paper documents come in many textures • They might be printed on thin photocopy-quality paper (20 lbs stock) • They might be printed on heavier “rag” stock (24 lbs. and up) • They might be printed on heavy cardstock (60 lbs and up) • They might be laminated Designing Visual Language-Chapter 10

16. Supra-Spatial Design In an electronic medium the screen is a window Designing Visual Language-Chapter 10

17. Supra-Spatial Design In an electronic medium the screen is a window Designing Visual Language-Chapter 10

18. Supra-Spatial Design In an electronic medium the screen is a window Designing Visual Language-Chapter 10

19. Supra-Spatial Design In an electronic medium the screen is a window Designing Visual Language-Chapter 10

20. Supra-Spatial Design In an electronic medium the screen is a window Designing Visual Language-Chapter 10

21. Supra-Spatial Design In an electronic medium the screen is a window Designing Visual Language-Chapter 10

22. Supra-spatial Convention • Often tied to storage, retrieval and transport systems • For print documents, that means envelopes, three-ring binders, folders and so on • For web pages, that means the width and resolution of standard display devices Designing Visual Language-Chapter 10

23. Conventions of Supra-level Design—Graphic Elements Graphic elements • Provide boundaries between text sections • Give the document cohesion • Express a theme or mood Designing Visual Language-Chapter 10

24. Supra-Graphic Vocabulary Graphic elements give the document shape and structure • They include lines or shading in page headers or footers or in the margins of fields, or shading that bleeds to the edge of the page • They include borders, icons or shading or color that ties textual elements together • They include data display frames or shading • They include the background color of a page or screen as well as watermarks or images placed behind the text Designing Visual Language-Chapter 10

25. Applying the Cognate Strategies How do we apply this rich visual vocabulary to document design? We can do so by considering the six cognate strategies. Designing Visual Language-Chapter 10

26. Arrangement Questions • How can I structure the document so readers easily access information? • How can I use supra-level design to enhance the document’s usability? Designing Visual Language-Chapter 10

27. Arrangement Strategies Create visual patterns that • Give readers a quick map of the document by identifying the key units and subunits • Create cohesion among the units and subunits by bonding them visually Designing Visual Language-Chapter 10

28. Arrangement Strategies Supra-textual elements that create structure and cohesion Section 1 Section 2 1 2 Title 4 8 3 7 2 6 1 5 Designing Visual Language-Chapter 10

29. Arrangement Strategies Supra-textual elements that create structure and cohesion      Designing Visual Language-Chapter 10

30. Arrangement Strategies Consistent arrangement of text and pictures to signal new sections Designing Visual Language-Chapter 10

31. Arrangement Strategies Cascading pages for usability Introduction Personal Information History Medical Waiver Designing Visual Language-Chapter 10

32. Emphasis Questions • Which aspects of the document do I want readers to notice when they encounter the document, however long and complex? • How can I get readers to notice these elements? Designing Visual Language-Chapter 10

33. Emphasis Strategies • In textual mode, title pages, chapter and section titles, numbers and tab labels all signal major breaks in the document • In the graphic mode, the color or texture of a page, graphic cues for section breaks or for alerting readers to important information are all emphasis strategies • In web design graphic cues for emphasis can be quite dramatic and must be used sparingly • In the spatial mode, the most common emphasis strategy is altering the size and shape of pages Designing Visual Language-Chapter 10

34. Emphasis Strategies Textual elements can create emphasis Heading Section Title Designing Visual Language-Chapter 10

35. Emphasis Strategies Tabs—another emphasis strategy def abc Designing Visual Language-Chapter 10

36. Emphasis Strategies Graphic cues that provide emphasis Chapter Chapter Designing Visual Language-Chapter 10

37. Emphasis Strategies Spatial changes for emphasis Designing Visual Language-Chapter 10

38. Clarity Questions • How can I use supra-level design to signal the function of the document, its genre, its structure, or its points of access? • How can I use supra-level design to make the document durable? Designing Visual Language-Chapter 10

39. Clarity Strategies Supra-level elements enhance clarity by • Signaling the document’s purpose • Making its structure transparent • Giving users access to its information • Making that information durable Designing Visual Language-Chapter 10

40. Clarity Strategies: Purpose Supra-level design • Gives readers clues about the type of document they’re looking at • Orients them to a basic purpose • Can camouflage purpose deliberately (as in sales materials) Designing Visual Language-Chapter 10

41. Clarity Strategies: Structure Top-down understanding of the document’s structure Designing Visual Language-Chapter 10

42. Clarity Strategies: Access Providing quick access to parts is a clarity strategy Pensions Travel Benefits Designing Visual Language-Chapter 10

43. Conciseness Questions • How can I get the most impact for the least use of design elements? • How can I avoid over-designing the document, making it look cumbersome or confusing? Designing Visual Language-Chapter 10

44. Conciseness Strategies • Because supra-level design is so conspicuous, its excesses are usually easy to spot • Overkill in print drives up production costs and can make a document unusable • Overkill in web documents can drive users away (complex pages take longer to load, are more subject to error, and might simple annoy users Designing Visual Language-Chapter 10

45. Tone Questions • How do I want supra-level design to come across to my readers? • Serious, friendly, authoritative, formal, informal, technical, low-key, humorous, eloquent, breezy? Designing Visual Language-Chapter 10

46. Tone Strategies • Supra-level elements immediately give documents a voice. • The question, though, remains: is it the right voice? Designing Visual Language-Chapter 10

47. Tone Strategies Designing Visual Language-Chapter 10

48. Tone Strategies Designing Visual Language-Chapter 10

49. Tone Strategies Designing Visual Language-Chapter 10

50. Tone Strategies Designing Visual Language-Chapter 10