Wiki source code of Page design

Version 2.4 by Lizzie Bruce on 2019/04/24 13:42
Show last authors
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 == Tools ==
37
38 A content tool is content that users interact with in ways other than reading.
39
40 Examples:
41
42 * [[Calculator, Money Savings Expert website>>https://www.moneysavingexpert.com/mortgages/mortgage-rate-calculator]]
43 * [[Birthdate eligibility checker, GOV.UK website>>https://www.gov.uk/state-pension-age/y/bus_pass]]
44 * [[Date picker, Easyjet website>>https://www.easyjet.com/en]]
45
46 These examples are all inclusively designed.
47
48
49 == Images, infographics and videos ==
50
51 If you decide to present content as images, infographics and videos, make sure it is inclusively designed:
52
53 * images, use alt text if the image contains useful information
54 * infographics, provide a text version of the infographic
55 * videos, provide captions on the video and a full transcript
56
57 ----
58
59 == Usability evidence: page design
60 ==
61
62 === Books ===
63
64 [['Communicating in style'>>http://bookstore.teri.res.in/books/9788179930168]], Joshi, Y. TERI: The Energy and Resources Institute, 2003
65
66 [['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
67
68 [['Don’t make me think, revisited. A common sense approach to web usability.'>>http://www.sensible.com/dmmt.html]], S. Krug, 2014
69
70 [['Content Strategy for the Web'>>https://www.contentstrategy.com/content-strategy-for-the-web]], Kristina Halvorson, Melissa Rach, 2012
71
72 [['Clout: the Art and Science of Influential Web Content'>>https://content-science.com/publications/clout/]], Coleen Jones
73
74 [['The Web Content Style Guide'>>http://gerrymcgovern.com/books/the-web-content-style-guide/]], Gerry McGovern, Rob Norton, Catherine O’Dowd, 2001
75
76
77 === Journals, open access ===
78
79 [['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
80
81 [['Guidelines for authoring comprehensible web pages and evaluating their success'>>http://core.ecu.edu/engl/tpc/MennoMenno/ftp/spyridakis%202000.pdf]], J. Spyridakis, 2000
82
83 [['Quicklist for authoring comprehensible web pages'>>https://www.hcde.washington.edu/files/people/docs/Quicklist_Authoring_Comprehensible_Web_Spyridakis.pdf]], excerpt from J. Spyridakis, 2000
84
85 [['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
86
87 [['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
88
89 [['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
90
91
92 === Journals, locked ===
93
94 [[‘Reading to learn to do’>>https://ieeexplore.ieee.org/document/44542]], Redish, J. C., IEEE Transactions, 32, 4, pp. 289 to 93. 1989. Locked.
95
96 [[‘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.
97
98 [['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.
99
100
101 (% class="box" %)
102 (((
103 See also:
104
105 * [[How people read>>doc:User centred design.How people read.WebHome]]
106 * [[Headings and titles>>doc:User centred design.Page titles and headings.WebHome]]
107 * [[Social media>>doc:People.Social media.WebHome]]
108 )))