{"id":5057,"date":"2020-06-07T16:27:32","date_gmt":"2020-06-07T20:27:32","guid":{"rendered":"https:\/\/techrhet.com\/3213\/?page_id=5057"},"modified":"2021-03-20T21:29:32","modified_gmt":"2021-03-21T01:29:32","slug":"hats-a-design-procedure-for-routine-business-documents","status":"publish","type":"page","link":"https:\/\/techrhet.com\/3213\/notes\/online\/hats-a-design-procedure-for-routine-business-documents\/","title":{"rendered":"HATS: Design for Professional\/Technical Documents<div style=\"text-shadow:none; font-size:70%; color: #BEBEBE; letter-spacing: 3px; line-height:1.2em; padding-top:3px; \"><span style=\"color:#72C2CC;\">H<\/span>EADINGS \u25aa <span style=\"color:#72C2CC;\">A<\/span>CCESS \u25aa <span style=\"color:#72C2CC;\">T<\/span>YPOGRAPHY \u25aa <span style=\"color:#72C2CC;\">S<\/span>PACE<\/div>"},"content":{"rendered":"<div class=\"page-toc\">\n<div class=\"page-toc-title\">Contents &amp; Navigation<\/div>\n<div class=\"item\"><a href=\"#overview\">overview<\/a><\/div>\n<div class=\"item\"><a href=\"#headings\">headings<\/a><\/div>\n<div class=\"item2\"><a href=\"#topic-talking\">topic vs. talking<\/a><\/div>\n<div class=\"item2\"><a href=\"#more-headings\">more on headings<\/a><\/div>\n<div class=\"item\"><a href=\"#access\">access<\/a><\/div>\n<div class=\"item\"><a href=\"#typography\">typography<\/a><\/div>\n<div class=\"item2\"><a href=\"#type\">type<\/a><\/div>\n<div class=\"item2\"><a href=\"#alignment\">alignment<\/a><\/div>\n<div class=\"item\"><a href=\"#space\">space<\/a><\/div>\n<div class=\"item\"><a href=\"#summary\">summary<\/a><\/div>\n<div class=\"item\"><a href=\"#final\">one more thing<\/a><\/div>\n<div class=\"item3\"><a href=\"https:\/\/techrhet.com\/3213\/notes\/research-reports-table-of-contents\/\">all research &amp; reports \u232a<\/a><\/div>\n<\/div>\n<div style=\"margin-left: 285px;\">\n<div style=\"width: 600px; text-align: center; margin: 20px auto; line-height: 1.2em; font-weight: 300; font-size: 90%; color: #999;\">Information based on and adapted from Baker, William H. &#8220;HATS: A Design Procedure for Routine Business Documents.&#8221; <em>Business Communication Quarterly <\/em>64.2 (2001): 65-76.<\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-7908\" src=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2021\/03\/HATS-new3.png\" alt=\"\" width=\"750\" height=\"291\" srcset=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2021\/03\/HATS-new3.png 1050w, https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2021\/03\/HATS-new3-768x298.png 768w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<div style=\"display: block; text-align: right; margin-top: -1em; margin-bottom: 1em; margin-right: 30px;\"><span id=\"overview\" class=\"anchor\"> <\/span><span class=\"arrowtop\" style=\"font-size: 30%; opacity: 0;\"><a href=\"#\">\u2305<\/a><\/span><\/div>\n<\/div>\n<h3 style=\"margin-top: -0;\">Overview<\/h3>\n<p>One of the most common mistaken notions novice professional writers hold is the idea that readers will approach their writing chronologically, reading the entire document from beginning to end.<\/p>\n<p>In professional arenas, audiences are comprised of different readers, different needs, and different approaches to reading. Upper management may read documents for conclusions and recommendations, accountants may read documents for the budget sections, and lawyers may read documents for the backgrounds and methods. Because professional contexts have various audiences with various needs and interests, professional writers must create documents that are easy to navigate, easy to understand, and serve the needs of all potential audiences. These documents are sometimes known as \u201cmodular documents.\u201d<\/p>\n<p>Professional writers can use &#8220;HATS&#8221; to create modular documents that are easy to navigate, access, and understand. While we&#8217;re familiar with making documents <em>rhetorically<\/em> effective, HATS is a set of considerations for making documents <em>visually<\/em> effective.<\/p>\n<div style=\"display: block; text-align: right; margin-top: -1em; margin-right: 30px;\"><span id=\"headings\" class=\"anchor\"> <\/span><span class=\"arrowtop\" style=\"font-size: 150%; opacity: 0.7;\"><a href=\"#top\">\u2305<\/a><\/span><\/div>\n<h3 style=\"margin-bottom: 0;\"><span class=\"ltr\">H<\/span>eadings<\/h3>\n<div style=\"padding: 6px 20px 12px 30px; background: linear-gradient(to bottom, rgba(239, 249, 250,1) 0%,rgba(239, 249, 250,1) 65%,rgba(239, 249, 250,0) 100%); font-weight: 300; font-size: 92%; letter-spacing: 0.05em;\">material in this section also included in <a href=\"https:\/\/techrhet.com\/3213\/notes\/professional-reports\/\">Professional Reports<\/a><\/div>\n<div class=\"pg-qte\" style=\"margin-top: 15px;\">\n<p>Headings are standard features of technical documents that serve several important functions:<\/p>\n<ul style=\"margin-bottom: 0.5em;\">\n<li style=\"padding-bottom: 2px;\">Provide organizational overview of the document<\/li>\n<li style=\"padding-bottom: 2px;\">Show logical development of ideas<\/li>\n<li style=\"padding-bottom: 2px;\">Show hierarchical relationship of ideas (headings, sub-headings)<\/li>\n<li style=\"padding-bottom: 2px;\">Allow the reader to scan and read selectively<\/li>\n<li>Increase readability of the document by providing breaks and white space.<\/li>\n<\/ul>\n<div class=\"pg-qte-cite\"><em>Technical Writing Essentials<\/em>, <a href=\"https:\/\/pressbooks.bccampus.ca\/technicalwriting\/chapter\/headings\/\" target=\"_blank\" rel=\"noopener noreferrer\">Chapter 3.2<\/a><\/div>\n<\/div>\n<p>Clear and specific headings (and other kinds of visual\/written guides) are important for the busy reader who will scan the report to determine its overall argument or findings, or to find specific sections of interest. The report should be written in a way that allows the reader to start reading in any major section and follow the line of thought.<\/p>\n<p>Headings are navigation signposts that guide readers through documents, to parts of documents, and preview forthcoming information. Headings should be adequate in number\/frequency to serve as landmarks of current and forthcoming content. They should be organized hierarchically, using typeface, size, style, and alignment to show different levels of importance, specificity, and relationships.<\/p>\n<div style=\"color: #777; width: 150px; margin: -15PX 10px 0 20px; float: right; background-color: #f4f5fb; border-radius: 7px; box-shadow: 2px 2px 3px #bdbdbd; padding: 6px 15px; font-weight: 300; text-align: center;\">\n<div style=\"font-size: 85%; letter-spacing: 0.2em; font-weight: 400; color: #666; text-shadow: 1px 1px 2px rgba(147, 157, 216, 1);\">COMMON<\/div>\n<div style=\"font-size: 120%; font-weight: 400; padding-bottom: 2px; color: #666; text-shadow: 1px 1px 2px rgba(147, 157, 216, 1);\">Topic \/ Function<\/div>\n<div style=\"font-size: 85%; letter-spacing: 0.2em; font-weight: 400; color: #666; text-shadow: 1px 1px 2px rgba(147, 157, 216, 1);\">HEADINGS<\/div>\n<div style=\"border-bottom: 1px solid #e0e0e0;\">Abstract<\/div>\n<div style=\"border-bottom: 1px solid #e0e0e0;\">Introduction<\/div>\n<div style=\"border-bottom: 1px solid #e0e0e0;\">Background<\/div>\n<div style=\"border-bottom: 1px solid #e0e0e0;\">Materials<\/div>\n<div style=\"border-bottom: 1px solid #e0e0e0;\">Methodology<\/div>\n<div style=\"border-bottom: 1px solid #e0e0e0;\">Results<\/div>\n<div style=\"border-bottom: 1px solid #e0e0e0;\">Findings<\/div>\n<div style=\"border-bottom: 1px solid #e0e0e0;\">Conclusions<\/div>\n<div>References<\/div>\n<\/div>\n<h4 id=\"topic-talking\">Topic (Functional) vs. Talking (Explanatory) Headings<\/h4>\n<p>There are two main types of headings: Topic (or Functional) Headings and Talking (or Explanatory) Headings.<\/p>\n<p>Topic (functional) headings use terms that describe the function of sections rather than the content of sections. Topic (functional) headings are often terms like &#8220;Introduction,&#8221; &#8220;Background,&#8221; &#8220;Materials,&#8221; &#8220;Methodology,&#8221; &#8220;Results,&#8221; &#8220;Discussion,&#8221; etc. In general, use function headings <strong>only<\/strong> in documents\u2014such as lab reports\u2014that have consistent structures.<\/p>\n<p>More reports in professional settings <strong>are not<\/strong> &#8220;so strictly organized or predictable. Readers will find it much more helpful if headings concretely describe the <strong>content<\/strong> of each section rather than the <strong>function<\/strong> (<em>TWE<\/em>, <a href=\"https:\/\/pressbooks.bccampus.ca\/technicalwriting\/chapter\/headings\/\">3.2 &#8220;Headings&#8221;<\/a>).<\/p>\n<p>The most effective talking (or explanatory, or content) &#8220;headings use concrete, descriptive language to tell the reader what to expect from the content of each section&#8221; (<em>TWE<\/em>, <a href=\"https:\/\/pressbooks.bccampus.ca\/technicalwriting\/chapter\/headings\/\">3.2 &#8220;Headings&#8221;<\/a>).<\/p>\n<div style=\"display: block; text-align: right; margin: 1em 3em; height: 1px;\"><span id=\"talking-headings\" class=\"anchor\"> <\/span><span class=\"arrowtop\" style=\"font-size: 150%; opacity: 0;\"><a href=\"#top\">\u2305<\/a><\/span><\/div>\n<div style=\"margin-left: 15px; margin-top: 20px;\">\n<div style=\"margin-left: 15px;\">\n<table class=\"ex1\" style=\"margin: 20px auto 30px; width: 900px;\" cellspacing=\"0\" cellpadding=\"10\" align=\"center\">\n<tbody>\n<tr>\n<td style=\"text-align: center;\" align=\"center\" width=\"27%\"><span style=\"font-weight: 400; font-size: 150%; font-family: 'Roboto Slab'; text-align: center;\"><span class=\"material-icons\" style=\"opacity: 0.75; color: #b71c1c; vertical-align: top;\">clear<\/span>Topic Headings\u00a0\u00a0\u00a0\u00a0<\/span><br \/>\n<span style=\"text-align: center;\">(Generic or Functional)<\/span><\/td>\n<td style=\"text-align: center;\" align=\"center\" width=\"73%\"><span style=\"font-weight: 400; font-size: 150%; font-family: 'Roboto Slab'; text-align: center;\"><span class=\"material-icons\" style=\"opacity: 0.75; color: #2e7d32; vertical-align: top;\">done<\/span>Talking Headings\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><br \/>\n(Explanatory or Content)<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Intro<\/td>\n<td style=\"text-align: center;\">The Question of Health Care for Part-Time Employees<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Background<\/td>\n<td style=\"text-align: center;\">Social Media Strategy: Brief History of an Emerging Field<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Qualifications<\/td>\n<td style=\"text-align: center;\">What Sports Journalists Need to Succeed<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Methods<\/td>\n<td style=\"text-align: center;\">Identification and Selection of Florida Water Samples<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">Conclusions<\/td>\n<td style=\"text-align: center;\">The Palm Beach Parks Project: Steps to Save the Parks and Lose the Litter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<div style=\"margin-left: 15px;\">\n<h4 id=\"more-headings\">More on Writing &amp; Organizing Headings<\/h4>\n<table class=\"noborder dklink\" style=\"border-collapse: separate; width: 100%;\" cellspacing=\"15\">\n<tbody>\n<tr>\n<td style=\"width: 33.3333%; background-color: #f6f3fb;\" rowspan=\"2\"><a href=\"http:\/\/typographyforlawyers.com\/hierarchical-headings.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u201cHierarchical Headings\u201d<\/a> from <em>Typography for Lawyers; <\/em>provides a great explanation of why writers should use a tiered number system instead of traditional Roman numerals or numbered\/lettered hierarchies.<\/td>\n<td style=\"width: 33.3333%; background-color: #f4f5fb;\"><a href=\"https:\/\/www.prismnet.com\/~hcexres\/textbook\/headings.html\" target=\"_blank\" rel=\"noopener noreferrer\">Headings: Make Your Text Scannable<\/a>, from David McMurray of <em>Online Technical Writing<\/em><\/td>\n<td style=\"width: 33.3333%; background-color: #f4faf4;\" rowspan=\"2\"><a href=\"https:\/\/faculty.washington.edu\/farkas\/TC510-Fall2011\/Farkas-ManagingHeadings.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">\u201cManaging Headings in Print and Online Documents\u201d<\/a> from David K. Farkas from the Department of Technical Communication in the College of Engineering at University of Washington.<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 33.3333%; background-color: #f0faff;\"><a href=\"http:\/\/www.plainlanguage.gov\/howto\/guidelines\/headings.cfm\" target=\"_blank\" rel=\"noopener noreferrer\">Headings<\/a>, by Ginny Redish for <em>PlainLanguage.gov<\/em><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 33.3333%; background-color: #f0fbfd;\" rowspan=\"2\"><a href=\"http:\/\/designsensory.com\/pws\/lesson6\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">\u201cLesson 6: Using Parallel Form\u201d<\/a> from<em> Professional Writing Style<\/em> by Dr. Russel Hirst, Associate Professor and Director of the Technical Communication Program at the University of Tennessee, Knoxville.<\/td>\n<td style=\"width: 33.3333%; background-color: #f0f9f8;\"><a href=\"http:\/\/wps.pearsoncustom.com\/pls_1256647969_pwo\/217\/55692\/14257344.cw\/content\/index.html%20From%20Pearson\" target=\"_blank\" rel=\"noopener noreferrer\">Headings<\/a>, from Pearson<\/td>\n<td style=\"width: 33.3333%; background-color: #f1f9fe;\"><a href=\"https:\/\/pressbooks.bccampus.ca\/technicalwriting\/chapter\/headings\/\">Headings<\/a> from <em>Technical Writing Essentials<\/em><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 33.3333%; background-color: #f8fcf4;\"><a href=\"https:\/\/www.gvsu.edu\/cms3\/assets\/C7078FCF-E2C3-F3DD-7F8E1630561E3F3E\/Headings.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Headings<\/a>, from Grand Valley State University<\/td>\n<td style=\"width: 33.3333%; background-color: #f9f2fa;\"><a href=\"https:\/\/idratherbewriting.com\/2013\/08\/23\/subheadings-perhaps-the-most-useful-technique-in-technical-writing\/\">&#8220;Subheadings: The Most Useful Technique in Tech Writing&#8221;<\/a> from Tom Johnson at <em>I&#8217;d Rather be Writing.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div style=\"display: block; text-align: right; margin-top: 0.5em; margin-right: 30px;\"><span id=\"access\" class=\"anchor\"> <\/span><span class=\"arrowtop\" style=\"font-size: 150%; opacity: 0.7;\"><a href=\"#top\">\u2305<\/a><\/span><\/div>\n<h3><span class=\"ltr\">A<\/span>ccess<\/h3>\n<div style=\"width: 244px; float: right;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2016\/10\/charts-254.png\" alt=\"\" width=\"254\" height=\"648\" align=\"right\" \/><\/div>\n<p>When appropriate, visuals should accompany text to help convey complex ideas or data. This helps to make information understandable and accessible to audiences.<\/p>\n<p>In professional documents, writers may decide to use lists, graphic organizers, tables, visual aids, charts, illustrations, or photographs to convey information that might be difficult to read, understand, or use in paragraph format.<\/p>\n<div style=\"float: left; font-size: 120%; font-weight: 300;\">\n<table border=\"0\" cellspacing=\"10\" cellpadding=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td style=\"text-align: right;\"><span style=\"font-family: 'Roboto Slab'; font-size: 130%; font-weight: 400;\">Graphic<\/span><\/td>\n<td style=\"text-align: center;\"><span style=\"font-family: 'Roboto Slab'; font-size: 130%; font-weight: 400;\">Information Type &amp; Uses<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">tables<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">organized or systematic display of data<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">maps<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">geographic information; data by location<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">bulleted lists<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">unordered or nonchronological information<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">numbered list<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">ordered, prioritized, or chronological information<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">pie chart<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">relationships between parts and the whole.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">bar graph<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">simple comparisons; changes in quantity<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">line graph<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">trends or changes over time<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">flowchart<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">a process, often with shapes to represent (types of) activities<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">organization chart<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">organizational hierarchy; how an organization is set up<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right; padding: 10px;\">Gantt chart<\/td>\n<td style=\"padding: 10px 10px 10px 30px;\">project schedule with concurrant, overlapping, and linear phases<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<hr class=\"divider3\" \/>\n<div class=\"pagefootnote\">fig 1: <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Organizational_chart.svg\" target=\"_blank\" rel=\"noopener noreferrer\">Organizational chart<\/a>, by TotoBaggins at the English language Wikipedia via Wikimedia Commons. Licensed under<a href=\"https:\/\/en.wikipedia.org\/wiki\/en:GNU_Free_Documentation_License\" target=\"_blank\" rel=\"noopener noreferrer\"> GNU Free Documentation License<\/a> and Creative Commons Attribution-Share Alike 3.0 Unported <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">(CC BY-SA 3.0)<\/a>.<\/div>\n<div class=\"pagefootnote\">fig 2: <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Tornado_Frequency.svg\" target=\"_blank\" rel=\"noopener noreferrer\">Tornado Frequency<\/a>, by 0Jak via [Wikimedia Commons. Licensed under Creative Commons Attribution-Share Alike 3.0 Unported <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">(CC BY-SA 3.0)<\/a>.<\/div>\n<div class=\"pagefootnote\">fig 3: <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Gantt-chart.png\" target=\"_blank\" rel=\"noopener noreferrer\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\">Gantt chart<\/a>, by Mkoval via <em>Wikimedia Commons<\/em>. Licensed under<a href=\"https:\/\/en.wikipedia.org\/wiki\/en:GNU_Free_Documentation_License\" target=\"_blank\" rel=\"noopener noreferrer\"> GNU Free Documentation License<\/a> and Creative Commons Attribution-Share Alike 3.0 Unported <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">(CC BY-SA 3.0)<\/a>.<\/div>\n<div style=\"display: block; text-align: right; margin-top: -2em; margin-right: 30px;\"><span id=\"typography\" class=\"anchor\"> <\/span><span class=\"arrowtop\" style=\"font-size: 150%; opacity: 0.7;\"><a href=\"#top\">\u2305<\/a><\/span><\/div>\n<div style=\"width: 395px; padding-left: 10px; float: right; margin-top: 20px;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2016\/10\/typography-weights.png\" alt=\"\" width=\"385\" height=\"514\" align=\"right\" \/><\/div>\n<h3><span class=\"ltr\">T<\/span>ypography<\/h3>\n<div style=\"margin-left: 15px;\">\n<h5 id=\"type\" class=\"aud\">Type<\/h5>\n<div style=\"margin-left: 15px;\">\n<p style=\"margin-bottom: 0.5em;\">Typeface can convey professionalism, illustrate contrast, and show hierarchical organization of information. In general, make sure body text is readable by using a 10-12 point common serif font such as Times New Roman (for print documents). Select a contrasting font for headings and vary type size and style for subheadings.<\/p>\n<div style=\"padding-bottom: 7px; padding-left: 15px;\"><strong>typeface<\/strong> = font family such as Times New Roman, Arial, or Roboto<\/div>\n<div style=\"padding-bottom: 7px; padding-left: 15px;\"><strong>type size<\/strong> = size of font; in print documents, often measured in points; in online documents, often measured in pixels, em, or percent<\/div>\n<div style=\"padding-bottom: 7px; padding-left: 15px;\"><strong>type style<\/strong> = style of font such as italic, bold, or underlined<\/div>\n<p>Avoid using more than two typefaces in routine business documents. Use size, style, and font variants (such as all caps, small caps, etc.) to indicate hierarchy and contrast. Above all else, make sure the text is readable.<\/p>\n<\/div>\n<\/div>\n<div style=\"margin-left: 15px;\">\n<h5 id=\"alignment\" class=\"aud\">Alignment<\/h5>\n<div style=\"margin-left: 15px;\">\n<div style=\"padding-bottom: 7px; padding-top: 7px; padding-left: 15px;\">\n<p style=\"margin-bottom: 0.5em;\"><strong>left aligned text<\/strong> (or left justified text, or left alignment) aligns each line of text on the left margin (or an invisible left vertical rule). Left aligned (or left justified) left has a ragged right margin.<\/p>\n<p style=\"margin-bottom: 0.5em;\"><strong>right aligned text<\/strong> (or right justified text, or right alignment) aligns each line of text on the right margin (or an invisible right vertical rule). Left aligned (or left justified) left has a ragged left margin.<\/p>\n<p style=\"margin-bottom: 0.5em;\"><strong>center aligned text<\/strong> (or centered text) balances each line of text with equal length on both sides of the vertical center of the page or section. Centered text has both a ragged left and ragged right margin.<\/p>\n<p style=\"margin-bottom: 0.5em;\"><strong>justified text<\/strong> (or full justified text) puts extra space between letters and\/or words so blocks of text line up on both the left and right vertical rules.<\/p>\n<\/div>\n<p>Usually, the body or main text of a professional document should be left-aligned (or left-justified), leaving a &#8220;ragged&#8221; right margin.<\/p>\n<\/div>\n<div style=\"width: 841px; margin: 20px auto;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2016\/10\/margins-all.png\" alt=\"\" width=\"841\" height=\"466\" \/><\/div>\n<div style=\"display: block; text-align: right; margin-top: -2em; margin-right: 30px;\"><span id=\"space\" class=\"anchor\"> <\/span><span class=\"arrowtop\" style=\"font-size: 150%; opacity: 0.7;\"><a href=\"#top\">\u2305<\/a><\/span><\/div>\n<div style=\"width: 410px; padding-top: 20px; float: right;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2016\/10\/whitespace.png\" alt=\"\" width=\"400\" height=\"347\" align=\"right\" \/><\/div>\n<h3><span class=\"ltr\">S<\/span>pace<\/h3>\n<p>The use of \u201cwhite space\u201d (or blank space) can promote the appearance of visual units, and in the same respect, can separate items that should not be grouped. Often times, document designers load up their pages with large text blocks, images, and other design elements with little or no blank space between them. This is burdensome to a reader and may cause her\/him to skip information or skip over whole pages. Using white space effectively between visual elements that are related in some way gives the reader a sort of \u201cbreak\u201d between blocks of information, allowing them to process what they have read or experienced, and also making the page look less intimidating.<\/p>\n<p>Using space is essential to &#8220;chunking&#8221;\u2014a concept that works in both print and electronic writing.<\/p>\n<div class=\"pgqt3\">\n<div style=\"margin-left: -58px; float: left; width: 40px; margin-top: -5px;\"><img decoding=\"async\" style=\"opacity: 0.3; align: left;\" src=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2018\/07\/275847-200.png\" alt=\"\" width=\"30\" \/><\/div>\n<p>Chunking is a method of presenting information which splits concepts into small pieces or &#8220;chunks&#8221; of information to make reading and understanding faster and easier. Chunking is especially useful for material presented on the web because readers tend to scan for specific information on a web page rather than read the page sequentially.<\/p>\n<p>Chunked content usually contains:<\/p>\n<ul style=\"margin-bottom: 0;\">\n<li style=\"padding-bottom: 3px;\">bulleted lists<\/li>\n<li style=\"padding-bottom: 3px;\">short subheadings<\/li>\n<li style=\"padding-bottom: 3px;\">short sentences with one or two ideas per sentence<\/li>\n<li style=\"padding-bottom: 3px;\">short paragraphs, even one-sentence paragraphs<\/li>\n<li style=\"padding-bottom: 3px;\">easily scannable text, with bolding of key phrases<\/li>\n<li>inline graphics to guide the eyes or illustrate points which would normally require more words<\/li>\n<\/ul>\n<\/div>\n<div class=\"qtsource\"><a href=\"https:\/\/en.wikipedia.org\/wiki\/Chunking_(writing)\" target=\"_blank\" rel=\"noopener noreferrer\">&#8220;Chunking (writing)&#8221;<\/a> <em>Wikipedia<\/em><\/div>\n<table style=\"border-collapse: collapse; width: 100%; margin-bottom: 15px;\">\n<tbody>\n<tr>\n<td style=\"border-bottom: none; width: 50%; padding: 15px;\"><img decoding=\"async\" class=\"img-shad aligncenter size-full wp-image-3920\" style=\"box-shadow: 3px 3px 12px #CB9F9B;\" src=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2020\/03\/3213S20-design-chunking-before-1000px.png\" alt=\"\" height=\"auto\" srcset=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2020\/03\/3213S20-design-chunking-before-1000px.png 1000w, https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2020\/03\/3213S20-design-chunking-before-1000px-768x964.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<div style=\"text-align: center; font-weight: 300; line-height: 1.4em;\">Large blocks of text with no visual groupings make information difficult and time consuming to understand.<\/div>\n<\/td>\n<td style=\"border-bottom: none; width: 50%; padding: 15px;\"><img decoding=\"async\" class=\"img-shad aligncenter size-full wp-image-3921\" style=\"box-shadow: 3px 3px 12px #A1BAA2;\" src=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2020\/03\/3213S20-design-chunking-after-1000px.png\" alt=\"\" height=\"auto\" srcset=\"https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2020\/03\/3213S20-design-chunking-after-1000px.png 1000w, https:\/\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2020\/03\/3213S20-design-chunking-after-1000px-768x964.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<div style=\"text-align: center; font-weight: 300; line-height: 1.4em;\">Chunking information (as well as using headings and formatting for access) helps to make the document more readable, usable, and easier to understand.<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div style=\"display: block; text-align: right; margin-top: -2em; margin-right: 30px;\"><span id=\"summary\" class=\"anchor\"> <\/span><span class=\"arrowtop\" style=\"font-size: 150%; opacity: 0.7;\"><a href=\"#top\">\u2305<\/a><\/span><\/div>\n<h3>Summary<\/h3>\n<p>To recap, ask these questions when using HATS:<sup>*<\/sup><\/p>\n<ol>\n<li style=\"padding-bottom: 10px;\"><strong>Headings:<\/strong> Are there enough headings? Do they reflect a clear hierarchy of organization?<\/li>\n<li style=\"padding-bottom: 10px;\"><strong>Access:<\/strong> Is important information easy to find? Is the information easy to understand? Does the method of presentation enhance readability and clarity?<\/li>\n<li style=\"padding-bottom: 10px;\"><strong>Typography:<\/strong> Does the document use appropriate typefaces, size, styles, and alignment for both body text and headings?<\/li>\n<li><strong>Space:<\/strong> Does the document have appropriate white space to make it inviting and easy to read?<\/li>\n<\/ol>\n<hr class=\"divider3\" \/>\n<div class=\"pagefootnote\">* Recap questions adapted from the OWL at Purdue, <a href=\"https:\/\/owl.english.purdue.edu\/owl\/resource\/632\/1\/\" target=\"_blank\" rel=\"noopener noreferrer\">&#8220;HATS: A Design Procedure for Routine Business Documents.&#8221; <\/a><\/div>\n<div style=\"display: block; text-align: right; margin-top: -2em; margin-right: 30px;\"><span id=\"final\" class=\"anchor\"> <\/span><span class=\"arrowtop\" style=\"font-size: 150%; opacity: 0.7;\"><a href=\"#top\">\u2305<\/a><\/span><\/div>\n<h3>A Final Note:<\/h3>\n<div style=\"width: 100%;\">\n<table style=\"border-collapse: collapse; width: 100%;\">\n<tbody>\n<tr>\n<td style=\"border-bottom: none; width: 45%;\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2016\/10\/wall-of-text-2.png\" \/><\/td>\n<td style=\"border-bottom: none; width: 55%; padding-right: 15px; vertical-align: middle;\"><img decoding=\"async\" style=\"border: 1px solid #bdbdbd; border-radius: 7px; box-shadow: 2px 2px 4px #999999;\" src=\"https:\/\/i2.wp.com\/techrhet.com\/3213\/wp-content\/uploads\/sites\/2\/2020\/04\/reddit-use-paragraphs.png\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"border-bottom: none;\" colspan=\"2\">\n<div style=\"font-family: 'Roboto Slab'; font-size: 200%; color: #006064; text-align: center; margin: 0 auto;\">Nobody likes a wall of text.<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div style=\"display: block; text-align: right; margin-top: -2em; margin-right: 30px; margin-bottom: 1000px;\"><span class=\"arrowtop\" style=\"font-size: 150%; opacity: 0.7;\"><a href=\"#top\">\u2305<\/a><\/span><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Contents &amp; Navigation overview headings topic vs. talking more on headings access typography type alignment space summary one more thing all research &amp; reports \u232a Information based on and adapted from Baker, William H. &#8220;HATS: A Design Procedure for Routine Business Documents.&#8221; Business Communication Quarterly 64.2 (2001): 65-76. \u2305 Overview One of the most common <a href='https:\/\/techrhet.com\/3213\/notes\/online\/hats-a-design-procedure-for-routine-business-documents\/' class='excerpt-more'>[&#8230;]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":4493,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"no-sidebars.php","meta":[],"_links":{"self":[{"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/pages\/5057"}],"collection":[{"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/comments?post=5057"}],"version-history":[{"count":10,"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/pages\/5057\/revisions"}],"predecessor-version":[{"id":7910,"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/pages\/5057\/revisions\/7910"}],"up":[{"embeddable":true,"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/pages\/4493"}],"wp:attachment":[{"href":"https:\/\/techrhet.com\/3213\/wp-json\/wp\/v2\/media?parent=5057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}