-
Notifications
You must be signed in to change notification settings - Fork 0
/
basic-page.html
142 lines (131 loc) · 8.01 KB
/
basic-page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><!--Meta data is page specific and should be assess and adjusted on a per page basis.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortlink" href="https://beta.novascotia.ca/">
<title>Question page template - Forms & Services Building Blocks - Government of Nova Scotia</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"><!-- Should be included in all head tags -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><!-- Should be included in all head tags -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script><!-- Should be included in all head tags -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script><!-- Not needed for service design, loads the navigation for this site -->
<link rel="stylesheet" media="all" href="https://novascotia.ca/clf/fonts/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" media="all" href="css/saltire.css">
<link rel="stylesheet" media="all" href="css/service-specific-styles.css"><!-- Not needed for services-->
<link rel="stylesheet" media="all" href="css/supplimentary-page-styles.css">
<link rel="stylesheet" media="all" href="css/global-form-styles.css">
<link rel="stylesheet" media="all" href="css/radio-button.css">
<link rel="stylesheet" media="all" href="css/toggle.css">
<link rel="stylesheet" media="all" href="css/checkboxes.css">
<link rel="stylesheet" media="all" href="css/slider.css">
<link rel="stylesheet" media="all" href="css/input-field-group.css">
<link rel="stylesheet" media="all" href="css/select.css">
<link rel="stylesheet" media="all" href="css/buttons.css">
<link rel="stylesheet" media="all" href="css/phase-banner.css"><!-- Include this only if needed -->
<!--[if lte IE 8]>
<script src="/core/assets/vendor/html5shiv/html5shiv.min.js?v=3.7.3"></script>
<![endif]-->
</head>
<body>
<div class="Site js-enabled" id="container">
<!-- -------------------------------------------------- START Skip Link --------------------------------------------------- -->
<nav class="skip-links" aria-label="Skip to main content">
<a href="#main" class="skip-to-link">Skip to main content</a>
</nav>
<!-- -------------------------------------------------- END Skip Link --------------------------------------------------- -->
<!-- -------------------------------------------------- START HEADER --------------------------------------------------- -->
<header>
<!-- START SALTIRE NS MOTHERSHIP RIBBON w FR -->
<nav id="navigation" class="ribbon" role="navigation" aria-label="Main navigation">
<div class="container">
<div class="row">
<div class="col-xs-6">
<a href="https://novascotia.ca/" hreflang="en"><img class="ribbon-img" src="https://novascotia.ca/clf/ignition/img/nsvip-en-white-flag.svg" alt="Province of Nova Scotia" /></a>
</div>
</div>
</div>
</nav>
<!-- END SALTIRE NS MOTHERSHIP RIBBON w FR -->
</header>
<!-- -------------------------------------------------- END HEADER --------------------------------------------------- -->
<!-- START Alpha Phase Banner -->
<div class="ns-phase-banner">
<div class="container">
<div class="row">
<div class="col">
<p class="ns-phase-banner__content">
<strong class="ns-tag ns-phase-banner__content__tag">
Alpha
</strong>
<span class="ns-phase-banner__text">
This is a new service that we're still developing. Try the service and <a href="https://github.com/connorscarolyns/service-pattern-library/issues">send us your comments and suggestions</a>. Your feedback will help make the service easier to use for everyone.
</span>
</p>
</div>
</div>
</div>
</div>
<!-- END Alpha Phase Banner -->
<!-- START Primary NAV -->
<div id="nav-placeholder4">
</div>
<script>
$(function(){
$("#nav-placeholder4").load("primary-nav.html");
});
</script>
<!-- End Primary NAV -->
<!--A basic page has a primary content area and an optional column for secondary information like related content.-->
<div class="container Site-content">
<main id="main"><!-- SEMANTIC MAIN TAG TO INDICATE PAGE CONTENT-->
<article><!-- SEMANTIC ARTICLE TAG TO GROUP RELATED CONTENT-->
<form name="parameters" method="GET" target="_parent">
<div class="row">
<div class="col-sm-3 col-xs-12 order-last order-sm-first">
<div id="nav-placeholder2">
</div>
<script>
$(function(){
$("#nav-placeholder2").load("nav-templates.html");
});
</script>
</div>
<div class="col-sm-9 col-xs-12"><!-- Bootstrap column grid should not be set to more than 8-col for main content column -->
<h1>Question page templates</h1><!-- SEMANTIC H1 TAG TO RELAY PAGE TITLE ONLY 1 PER PAGE-->
<h2>Split it up</H2>
<p>When building a service it's not enough to just "put your form online." People do not read or understand content the same way when reading from a screen or paper. Think about splitting your content up. It's best to display one topic per page. This allows people to easily undsertand the content of the page and focus on the topic.</p>
<h2>Start by asking one question per page</h2>
<p>Asking just one question per question page helps users understand what you’re asking them to do, and focus on the specific question and its answer.</p>
<p>To help you follow this approach, you can set the contents of a <code><legend></code> or <code><label></code> for a page’s input as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.</p>
<div>
<iframe src="pages/question-page.html" style="width:100%; height:600px; border: 1px solid #a2a2a2" frameborder="0"></iframe>
</div>
<h2>Asking multiple questions on a page</h2>
<p>Sometimes it makes sense to group a number of related questions on the same page.</p>
<p>User research will tell you when you can group pages together. For example, if you’re designing an internal service for government users who need to repeat and switch between tasks quickly.</p>
<p>If you need to ask for multiple related things on a page, use a statement as the heading.</p>
<div>
<iframe src="pages/multiple-question-page.html" style="width:100%; height:600px; border: 1px solid #a2a2a2" frameborder="0"></iframe>
</div>
<h2>Asking A / B option questions on a page</h2>
<p>Asking A / B option questions can be used determine a persons eligibility to use the service. They can help quickly channel people through a flow and to present them information that's specific to their situation. Selecting otion A or B should automatically move the user to the next screen.</p>
<p>Do not use this pattern if people may have difficulty understanding the difference between options. If they cannot confidently answer, it might cause them to hesitate or abandon the service.</p>
<p>If it is difficult to ask a clear question you might need to break it down into a set of smaller questions or add another option to catch exceptions. For example, you could provide the option 'None of these apply to me" or 'It's complicated' if needed. User research will help uncover these areas of uncertainty.</p>
<div>
<iframe src="pages/yes-no-page.html" style="width:100%; height:400px; border: 1px solid #a2a2a2" frameborder="0"></iframe>
</div>
</div><!-- /col-xs-8 -->
</div><!--/row-->
</form>
</article>
</main>
</div><!-- /container -->
<!-- START FOOTER -->
<footer id="footer" class="footer" role="contentinfo">
<div class="container">
</div>
</footer>
<!-- END FOOTER -->
</div>
</body>
</html>