Wiki source code of Page design
Version 1.11 by Lizzie Bruce on 2019/04/23 20:52
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | There are a lot of elements involved in designing content within a page, or across multiple pages. | ||
| 2 | |||
| 3 | |||
| 4 | == Bullet points == | ||
| 5 | |||
| 6 | Use bullet points to split up long sentences. | ||
| 7 | |||
| 8 | They should: | ||
| 9 | |||
| 10 | * complete a sentence | ||
| 11 | * be front-loaded with the most important information | ||
| 12 | * start with the same language form (verb, noun, adjective) | ||
| 13 | |||
| 14 | |||
| 15 | == Accordions == | ||
| 16 | |||
| 17 | This function allows you to present content in expandable sections. | ||
| 18 | |||
| 19 | The GDS design system provides advice, HTML coding and [[usability research for accordions>>https://design-system.service.gov.uk/components/accordion/]]. | ||
| 20 | |||
| 21 | If your CMS does not have accordion functionality you could consider using anchor links. | ||
| 22 | |||
| 23 | |||
| 24 | == Guides == | ||
| 25 | |||
| 26 | These are a useful way to join together content on the same topic which is too much for a single page. Use chapters for different sections. | ||
| 27 | |||
| 28 | You can give the top page of the guide a super H1 heading and the sections H1s, so that Google picks up each individual section. | ||
| 29 | |||
| 30 | |||
| 31 | == Feature boxes == | ||
| 32 | |||
| 33 | These allow you to promote a particular part of your content. If you change the background colour or font colour, [[check the contrast passes WCAG requirements>>https://webaim.org/resources/contrastchecker/]]. | ||
| 34 | |||
| 35 | |||
| 36 | == Images, infographics and videos == | ||
| 37 | |||
| 38 | If you decide to present content as images, infographics and videos, make sure it is inclusively designed: | ||
| 39 | |||
| 40 | * images, use alt text if the image contains useful information | ||
| 41 | * infographics, provide a text version of the infographic | ||
| 42 | * videos, provide captions on the video and a full transcript | ||
| 43 | |||
| 44 | |||
| 45 | == Tools == | ||
| 46 | |||
| 47 | A content tool is content that users interact with in ways other than reading. | ||
| 48 | |||
| 49 | |||
| 50 | Examples: | ||
| 51 | |||
| 52 | * [[Calculator, Money Savings Expert website>>https://www.moneysavingexpert.com/mortgages/mortgage-rate-calculator]] | ||
| 53 | * [[Birthdate eligibility checker, GOV.UK website>>https://www.gov.uk/state-pension-age/y/bus_pass]] | ||
| 54 | * [[Date picker, Easyjet website>>https://www.easyjet.com/en]] | ||
| 55 | |||
| 56 | These examples are all inclusively designed. | ||
| 57 | |||
| 58 | |||
| 59 | ---- | ||
| 60 | |||
| 61 | == Usability evidence: page design == | ||
| 62 | |||
| 63 | [[‘Reading to learn to do’>>https://ieeexplore.ieee.org/document/44542]], Redish, J. C., IEEE Transactions, 32, 4, pp. 289 to 93. 1989. Locked. | ||
| 64 | |||
| 65 | [[‘The instructions clearly state . . . Can't people read?’>>https://www.sciencedirect.com/science/article/pii/0003687081900028]], Wright, P., Applied Ergonomics, 12, 131 to 142. 1981. Locked. | ||
| 66 | |||
| 67 | [['Communicating in style'>>http://bookstore.teri.res.in/books/9788179930168]], Joshi, Y. TERI: The Energy and Resources Institute, 2003. Book. | ||
| 68 | |||
| 69 | [['Letting go of the words'>>http://redish.net/books/item/5-letting-go-of-the-words-writing-web-content-that-works]], Redish, J., Boston: Morgan Kaufmann, 2012. Book. | ||
| 70 | |||
| 71 | [['Designing procedures as a foundation for instructions'>>https://ieeexplore.ieee.org/document/637025]], Jansen, C. and M. Steehouder, Professional Communication Conference, 1997. IPCC '97 Proceedings. Crossroads in Communication. IEEE International, 1997. Locked. | ||
| 72 | |||
| 73 | [['The processing of organizational and component step information in written directions'>>https://www.sciencedirect.com/science/article/pii/0749596X8790060X]], Dixon, P., Journal of Memory and Language, 26, pp. 24 to 35. 1987 | ||
| 74 | |||
| 75 | [['The effects of adding motivational elements to user instructions'>>https://www.utwente.nl/nl/bms/com/proefschriften/Proefschrift_Loorbach.pdf]], Loorbach, N., J. Karreman, and M. Steehouder, Professional Communication Conference Proceedings, 2007. IPCC 2007. IEEE International. 2007 | ||
| 76 | |||
| 77 | [['Adding motivational elements to an instruction manual for seniors: effects on usability and motivation'>>https://research.utwente.nl/en/publications/adding-motivational-elements-to-an-instruction-manual-for-seniors]], Loorbach, N., J. Karreman, and M. Steehouder, Technical Communication, 54, 3, pp. 343 to 58. 2007 | ||
| 78 | |||
| 79 | [['Cognitive constraints on multimedia learning: when presenting more material results in less understanding'>>http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.456.5304]], Mayer, R. et al., Journal of Educational Psychology, 93, 1, pp. 187 to 98. 2004 | ||
| 80 | |||
| 81 | |||
| 82 | (% class="box" %) | ||
| 83 | ((( | ||
| 84 | See also: | ||
| 85 | |||
| 86 | * [[How people read>>doc:User centred design.How people read.WebHome]] | ||
| 87 | * [[Headings and titles>>doc:User centred design.Page titles and headings.WebHome]] | ||
| 88 | * [[Social media>>doc:People.Social media.WebHome]] | ||
| 89 | ))) |