Changes for page Page design

Last modified by Lizzie Bruce on 2020/01/12 00:17
From version Icon 5.1 Icon
edited by Lizzie Bruce
on 2019/06/05 16:04
Change comment: Added lynch and horton WSG
To version Icon 6.1
edited by Lizzie Bruce
on 2020/01/12 00:17
Change comment: on page redirect

Summary

Details

Icon Page properties
Content
... ... @@ -1,122 +1,1 @@
1 -There are a lot of elements involved in designing content within a page, or across multiple pages.
2 -
3 -== Paragraphs ==
4 -
5 -Divide content up into short paragraphs. Chunked content is easier to absorb as smaller units of content are easier to process, understand and remember. Text divided into distinct visual units helps users scan.
6 -
7 -== Sub-headings ==
8 -
9 -If you have a page with several paragraphs, organise the paragraphs with [[sub-headings>>doc:User centred design.Page titles and headings.WebHome]]. These should indicate what the paragraph is about. This helps users scan page content for what they are looking for.
10 -
11 -== Bullet points ==
12 -
13 -Use bullet points to split up long sentences.
14 -
15 -They should:
16 -
17 -* complete a sentence
18 -* be front-loaded with the most important information
19 -* start with the same language form (verb, noun, adjective)
20 -
21 -
22 -== Accordions ==
23 -
24 -This function allows you to present content in expandable sections.
25 -
26 -The GDS design system provides advice, HTML coding and [[usability research for accordions>>https://design-system.service.gov.uk/components/accordion/]].
27 -
28 -If your CMS does not have accordion functionality you could consider using anchor links.
29 -
30 -
31 -== Guides ==
32 -
33 -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.
34 -
35 -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. 
36 -
37 -
38 -== Feature boxes ==
39 -
40 -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/]]. 
41 -
42 -
43 -== Tools ==
44 -
45 -A content tool is content that users interact with in ways other than reading.
46 -
47 -Examples:
48 -
49 -* [[Calculator, Money Savings Expert website>>https://www.moneysavingexpert.com/mortgages/mortgage-rate-calculator]]
50 -* [[Birthdate eligibility checker, GOV.UK website>>https://www.gov.uk/state-pension-age/y/bus_pass]]
51 -* [[Date picker, Easyjet website>>https://www.easyjet.com/en]]
52 -
53 -These examples are all inclusively designed.
54 -
55 -
56 -== Images, infographics and videos ==
57 -
58 -If you decide to present content as images, infographics and videos, make sure it is inclusively designed:
59 -
60 -* images, use alt text if the image contains useful information
61 -* infographics, provide a text version of the infographic
62 -* videos, provide captions on the video and a full transcript
63 -
64 -----
65 -
66 -== Usability evidence: page design ==
67 -
68 -(% class="wikigeneratedid" id="H" %)
69 -[['How Chunking Helps Content Processing'>>https://www.nngroup.com/articles/chunking/]], Kate Moran, NNg, 2016
70 -
71 -(% class="wikigeneratedid" %)
72 -[['Web style guide'>>https://webstyleguide.com/10-editorial-style.html]], Chapters 10. Editorial Style, Lynch, P. and S. Horton, 4th edition, 2016
73 -
74 -=== Books ===
75 -
76 -[['Communicating in style'>>http://bookstore.teri.res.in/books/9788179930168]], Joshi, Y. TERI: The Energy and Resources Institute, 2003
77 -
78 -[['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
79 -
80 -[['Don’t make me think, revisited. A common sense approach to web usability.'>>http://www.sensible.com/dmmt.html]], S. Krug, 2014
81 -
82 -[['Content Strategy for the Web'>>https://www.contentstrategy.com/content-strategy-for-the-web]], Kristina Halvorson, Melissa Rach, 2012
83 -
84 -[['Clout: the Art and Science of Influential Web Content'>>https://content-science.com/publications/clout/]], Coleen Jones
85 -
86 -[['The Web Content Style Guide'>>http://gerrymcgovern.com/books/the-web-content-style-guide/]], Gerry McGovern, Rob Norton, Catherine O’Dowd, 2001
87 -
88 -
89 -=== Journals, open access ===
90 -
91 -[['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
92 -
93 -[['Guidelines for authoring comprehensible web pages and evaluating their success'>>http://core.ecu.edu/engl/tpc/MennoMenno/ftp/spyridakis%202000.pdf]], J. Spyridakis, 2000
94 -
95 -[['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
96 -
97 -[['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
98 -
99 -[['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
100 -
101 -[['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
102 -
103 -
104 -=== Journals, locked ===
105 -
106 -[[‘Reading to learn to do’>>https://ieeexplore.ieee.org/document/44542]], Redish, J. C., IEEE Transactions, 32, 4, pp. 289 to 93. 1989. Locked.
107 -
108 -[[‘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.
109 -
110 -[['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.
111 -
112 -[['Hypertext Segmentation and Goal Compatibility: Effects on Study Strategies and Learning'>>https://www.learntechlib.org/noaccess/10812/]], Dee-Lucas, D. and Huston Larkin, J., 1999. Locked.
113 -
114 -
115 -(% class="box" %)
116 -(((
117 -See also:
118 -
119 -* [[How people read>>doc:User centred design.How people read.WebHome]]
120 -* [[Headings and titles>>doc:User centred design.Page titles and headings.WebHome]]
121 -* [[Social media>>doc:People.Social media.WebHome]]
122 -)))
1 +Please go to [[readabilityguidelines.co.uk/content-design/page-design>>url:https://readabilityguidelines.co.uk/content-design/page-design/]].