-
Notifications
You must be signed in to change notification settings - Fork 26
/
Copy pathui.html
698 lines (627 loc) · 42 KB
/
ui.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>OSF Style & UI Guidelines</title>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'>
<link href="vendor/prism/prism.css" rel="stylesheet" />
<!-- OSF style -->
<link href="css/base.min.css" rel="stylesheet">
<!-- Guidelines style -->
<link href="page.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body role="document" class="m-b-lg">
<nav class="navbar navbar-inverse osf-navbar navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars fa-lg fa-inverse"></span>
</button>
<a class="navbar-brand" href="index.html">OSF Style Guide </span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">Home<span class="sr-only">(current)</span></a></li>
<li><a href="style.html">Style Guide</a></li>
<li class="active"><a href="ui.html">UI Guide </a></li>
<li><a href="language.html">Language</a></li>
</ul>
<div class="navbar-form navbar-right">
<button id="openGithub" role="button" class="btn btn-info"><i class="fa fa-github"></i> Open in Github</button>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-full style-header">
<div id="top" class="container theme-showcase" >
<div class="jumbotron">
<h1>UI Guide</h1>
</div>
</div>
</div>
<div class="nav-rows container m-t-xl">
<div class="row">
<div class="col-xs-12 col-sm-9">
<!--COMPONENTS PAGE-->
<div id="components" class=" theme-showcase" >
<div class="page-header m-t-xl">
<h2 id="ui"> UI examples </h2>
</div>
<h3 id="auto-save"> Autosave example </h3>
<div class="row">
<div class="col-xs-12 m-b-lg">
<h4 class="m-t-lg"> Continous Save with a continuously changed document (i.e. Wiki) </h4>
<p>Have save time information and button just in case. Similar to Google Docs. </p>
<div class="osf-box p-lg">
<div style="border-bottom:1px solid #ccc" class="text-right p-xs">
<span class="text-muted">Last Saved: 2 minutes ago.</span> <button class="btn btn-sm btn-success">Save</button>
</div>
</div>
<h4 class="m-t-lg"> Save on Input control change </h4>
<p>Show change alert that disappears after about 3 seconds. </p>
<div class="osf-box p-lg">
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" value="Name here">
</div>
<div class="col-xs-6">
<span class="text-success">Changes saved!</span>
</div>
</div>
</div>
<div class="m-t-md m-b-md p-md osf-box-lt">
<h4> When you should NOT autosave: </h4>
<ul>
<li>If the edit is highly sensitive, never autosave. The extra step of saving adds a level of security.</li>
<li>If the edit is going to be public immediately think about implications. The step to save gives users a moment to revise.</li>
<li>When intermediate changes being applied would alter the layout or page. For example selecting to hide certain elements in a settings page should not hide those immediately and move the page around, resulting in the user losing location. </li>
<li>When one edit is related to another edit that is yet to be made. I.e. when the edit is not independent.</li>
</ul>
</div>
</div>
</div>
<h3 id="feedback"> Feedback examples </h3>
<div class="row">
<div class="col-xs-12 m-b-lg">
<h4 id="form-validation" class="m-t-lg">Form validation</h4>
<p>Use existing Bootstrap style to communicate errors related to forms. Don't use Growl notifications. <a href="http://getbootstrap.com/css/#forms-control-validation">Learn more here</a>. </p>
<div class="osf-box p-lg">
<div class="form-group has-error">
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<pre><code class="language-markup">
<div class="form-group has-error">
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</code></pre>
<h4 id="error-reporting" class="m-t-lg">Error reporting</h4>
<p>Site related errors should use Growl style error reporting. OSF uses <a href="https://github.com/ifightcrime/bootstrap-growl/">Bootstrap Growl</a> plugin to display messages. The advantage of this library is that is builds on top of bootstrap design and utilizes alert boxes, which means it already complies with the style guide.</p>
<div class="osf-box p-lg">
<h4>Which feedback to use when? </h4>
<table class="table table-striped">
<thead>
<tr>
<th>Action examples</th>
<th>Feedback type</th>
<th>Auto vs manual dismiss</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h5> Mundane success events</h5>
<p>Events that user expects to happen and occurs frequently.</p>
<ul>
<li>Page loaded successfully</li>
<li>Login was successful</li>
</ul>
</td>
<td>
Does not need feedback
</td>
<td>N/A</td>
</tr>
<tr>
<td>
<h5>Expected but critical success events</h5>
<p>Events that the user expects to succeed but it's success is important</p>
<ul>
<li>File uploaded successfully</li>
<li>File deleted successfully</li>
<li>Wiki changes are saved</li>
</ul>
</td>
<td>
Use text with "text-success" within the vicinity of the action elements.. i.e: <span class="text-success">Files uploaded!</span>
</td>
<td>Auto dismiss</td>
</tr>
<tr>
<td>
<h5>Not critical error events</h5>
<p>Errors that are caused by events that will try to repeat action or are not breaking.</p>
<ul>
<li>Dropbox files could not be loaded</li>
<li>Collaborative editing is not available at the moment</li>
</ul>
</td>
<td>
Use text with "text-danger" within the vicinity of the action elements. i.e: <span class="text-danger">Dropbox files could not be loaded!</span>
</td>
<td>Auto dismiss</td>
</tr>
<tr>
<td>
<h5>Input errors</h5>
<p>Validation or input requirement errors that need the user to correct the error before moving on.</p>
<ul>
<li>First name is required</li>
<li>Please enter DELETE to remove this item.</li>
<li>This user name already exists</li>
</ul>
</td>
<td>
Use text with "text-danger" using the form validation error example above. If not using a form place near input field. See example in Validation section above.
</td>
<td>Dismiss when user fixes error or cancels.</td>
</tr>
<tr>
<td>
<h5>Critical errors</h5>
<p>Errors that break the user workflow and may result in problems, mainly due to connectivity</p>
<ul>
<li>Profile settings could not be saved!</li>
<li>File did not upload</li>
<li>Wiki changes cannot be saved at the moment</li>
</ul>
</td>
<td>
Use Growl box error
</td>
<td>Manual dismiss</td>
</tr>
</tbody>
</table>
</div>
<div class="alert alert-danger m-t-lg"><b>Never use Javascript alerts!</b> (except for onunload events).</div>
</div>
</div>
<h3 id="confirmations">Confirmations</h3>
<div class="row">
<div class="col-xs-12">
<p>Sometimes it's pertinent to stop the user to confirm the action they are taking. Often this is done as a Modal or onunload dialog boxes. This should be used in very rare instances. </p>
<h4 class="text-success">USE confirmation when:</h4>
<ul>
<li>The action will override an existing content AND the content can't be easily reverted.(e.g. Deleting files, wiki pages)</li>
<li>The action will take effect for other users as well or have consequences for other users. (e.g. Make project public) </li>
<li>The action will have lasting consequences even if it is reverted (for instance making a project public may make it difficult to make it private again due to caching online) </li>
<li>There is unsaved content or settings </li>
</ul>
<h4 class="text-danger"> DON'T USE confirmation when </h4>
<ul>
<li>The action can easily be reverted (e.g instance settings changes that can be changed back)</li>
<li>The content can easily be reverted (e.g. editing wiki pages, since we save revisions) </li>
<li>Commonplace actions like navigating between pages.</li>
<li>Creating content that is expected and not affecting others (e.g. Creating a project)</li>
</ul>
<div class="osf-box-lt p-lg m-t-lg">
<h4>Two-step Confirmation</h4>
<p>This involves not just asking users if they want to apply the action but to add another step to make accidental actions impossible. In this case:</p>
<ul>
<li>Add a process which requires additional conscious step, entering text to match a pre selected text is ideal. Avoid steps that can be completed with mouse clicks or pressing enter.</li>
<li>Show the button to apply the event as disabled and do not bind Enter key to it until the second step is done.</li>
<li>Make sure to test that the second step works, accesibility is especially important here </li>
</ul>
<p> Use two step confirmation when the action is highly dangerous and should be done carefully. For intance deleting a project has repurcussions that can be serious and it is very difficult to reproduce aspects of it such as the unique ID that many links independent of the OSF uses. </p>
</div>
</div>
</div>
<h3 id="options" class="m-t-xl">Buttons and toggles </h3>
<h4 id="button-state" class="m-t-lg">Button state feedback</h4>
<div class="m-b-md p-md osf-box box-round">
<div class="row">
<div class="col-xs-4">
<h5>Regular button</h5>
<button class="btn btn-success">Save</button>
</div>
<div class="col-xs-4">
<h5>Active state button</h5>
<button class="btn btn-default"><i class="text-muted">Saving...</i></button>
</div>
<div class="col-xs-4">
<h5>Disabled state button</h5>
<button class="btn btn-default disabled"><span class="text-muted">Save</span></button>
</div>
</div>
</div>
<pre><code class="language-markup">
<h5>Regular button</h5>
<button class="btn btn-success">Save</button>
<h5>Active state button</h5>
<button class="btn btn-default"><i class="text-muted">Saving...</i></button>
<h5>Disabled state button</h5>
<button class="btn btn-default disabled"><span class="text-muted">Save</span></button>
</code></pre>
<h4 class="m-t-lg">Do not hide action buttons if the button is not yet available and show action buttons if action is possible but not yet available</h4>
<div class="m-b-md p-md osf-box box-round">
<div class="row">
<div class="col-xs-4">
<h5 class="text-success"> Do this if action item is not possible (waiting for selection): </h5>
<button class="btn btn-default">Cancel</button>
<button class="btn btn-default disabled">Save</button>
</div>
<div class="col-xs-4">
<h5 class="text-success"> Do this if action item is available but there are validation errors: </h5>
<span class="text-danger">Please correct errors above and try saving again.</span>
<button class="btn btn-default">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
<div class="col-xs-4">
<h5 class="text-danger"> Don't do this: </h5>
<button class="btn btn-default">Cancel</button>
<span class="text-muted"> Save button becomes visible magically later</span>
</div>
</div>
</div>
<p> Often you will give users the opportunity to make a selection to either immediately save an option or to save together with the rest of the form. Follow these guidelines when making your decision about which component to use:</p>
<div class="row">
<div class="col-xs-12 m-b-lg">
<h4 class="m-t-lg">Selection between on or off states</h4>
<p>Do not use single flip-flop buttons that show the current state. You can however use the action verbs and utilize a single button this way.</p>
<div class="m-b-md p-md osf-box box-round">
<div class="row">
<div class="col-xs-4">
<h5 class="text-success">Do this:</h5>
<button class="btn btn-success"><i class="fa fa-eye"></i> Show</button>
<button class="btn btn-default"><i class="fa fa-eye-slash"></i> Hide</button>
</div>
<div class="col-xs-4">
<h5 class="text-danger">Don't do this:</h5>
<button class="btn btn-success"><i class="fa fa-eye"></i></button>
<button class="btn btn-default"><i class="fa fa-eye-slash"></i></button>
</div>
<div class="col-xs-4">
<h5 class="text-danger">Don't do this:</h5>
<select class="form-control">
<option>Show</option>
<option>Hide</option>
</select>
</div>
</div>
</div>
<h4 class="m-t-xl">UI specific toggle with more than 2 states</h4>
<p>If there is a UI component that shows more than 2 states and it's effects are immediate (such as toggling views) use a button group with a disabled button as label. This shows the user that these view changes belong together and work in a similar way.</p>
<div class="m-b-md p-md osf-box box-round">
<div class="row">
<div class="col-xs-6">
<h5 class="text-success">Do this:</h5>
<div class="btn-group">
<button class="btn btn-default disabled">Show:</button>
<button class="btn btn-default">Preview</button>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-primary">Compare</button>
</div>
</div>
<div class="col-xs-6">
<h5 class="text-danger">Don't do this:</h5>
<button class="btn btn-default">Preview</button>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-primary">Compare</button>
</div>
</div>
</div>
<h4 class="m-t-xl">Inline selection with multiple states without using Select</h4>
<p>If for some reason you need to have users choose from multiple options that are not part of a UI change but still needs to be part of a toolbar you can use split button drop downs from Bootstrap.</p>
<div class="row">
<div class="col-xs-9">
<!-- Split button -->
<div class="btn-group m-b-lg">
<button type="button" class="btn btn-default">Detailed options</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="active">
<a href="#">
<div>Selected option</div>
<div class="text-smaller">With some more details here.</div>
</a>
</li>
<li>
<a href="#">
<div>Options can take HTML</div>
<div class="text-smaller">Make <b>Bold</b> or <i>Italic</i>.</div>
</a>
</li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<pre><code class="language-markup">
<div class="btn-group m-b-lg">
<button type="button" class="btn btn-default">Detailed options</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="active">
<a href="#">
<div>Selected option</div>
<div class="text-smaller">With some more details here.</div>
</a>
</li>
<li>
<a href="#">
<div>Options can take HTML</div>
<div class="text-smaller">Make <b>Bold</b> or <i>Italic</i>.</div>
</a>
</li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</code></pre>
</div>
<div class="col-xs-3">
<a href=" http://getbootstrap.com/components/#btn-dropdowns-split" class="btn btn-sm btn-default"> Bootstrap documentation </a>
</div>
</div>
<h4 class="m-t-lg">Button Placement</h4>
<p>When using multiple buttons with general save related actions (on forms, modals etc); use the following order:
<div class="m-b-md p-md osf-box box-round">
<div class="row">
<div class="col-xs-12" style="text-align:right">
<button class="btn btn-default">Cancel/close</button>
<button class="btn btn-default">Secondary action</button>
<button class="btn btn-primary">Primary action</button>
</div>
</div>
</div>
<hr>
<h3 id="alphabetize" class="m-t-xl" id="alphabetize">When to alphabetize?</h3>
<p> When using drop downs, think carefully about the ordering of the options. Is the a hierarchical, or temporal order to the options that could be used to order them? Are they're certain options that users should see before others, assuming they are scanning down the list [this is actually just good practice whether they are using drop downs, check boxes, or radical buttons]? If none of these apply, then the drop down options should be in alphabetical order.</p>
<div class="m-b-md p-md osf-box box-round">
<div class="row">
<div class="col-xs-4">
<p>Alphabetize general and equal structures like country names:</p>
<select class="form-control">
<option>Adipiscing</option>
<option>Amet</option>
<option>Consectetur</option>
<option>Dolor</option>
<option>Elit</option>
<option>Ipsum</option>
<option>Lorem</option>
<option>Mauris</option>
<option>Sit</option>
</select>
</div>
<div class="col-xs-4">
<p>Don't alphabetize order and hierarchy</p>
<select class="form-control">
<option>Read</option>
<option>Read & Write</option>
<option selected>Administrator</option>
</select>
</div>
<div class="col-xs-4">
<p>Break alphabetical order in favor of common uses</p>
<select class="form-control">
<option>Select Person</option>
<option>Me</option>
<option>Ally</option>
<option>Carlos</option>
<option>Jamal</option>
<option>Kim</option>
<option>Zach</option>
</select>
</div>
</div>
</div>
<h4 id="inputs-forms" class="m-t-xl">Input elements in forms</h4>
<p>If the input changes are not part of a UI element, use regular form standards. Below is a general guideline about what forms to use</p>
<table class="table">
<tbody>
<tr>
<td>
Multiple items can be selected and there are less than 6 items per group
</td>
<td>
<a href="http://getbootstrap.com/css/#checkboxes-and-radios"> Default stacked checkboxes</a>
</td>
</tr>
<tr>
<td>
Single item can be selected and there are less than 6 items per group
</td>
<td>
<a href="http://getbootstrap.com/css/#checkboxes-and-radios">Default stacked radio buttons</a>
</td>
</tr>
<tr>
<td>
Multiple items can be selected and there are more than 6 items in a group
</td>
<td>
<a href="http://getbootstrap.com/css/#selects"> Multiple select</a>
</td>
</tr>
<tr>
<td>
Single item can be selected and there are more than 6 items in a group
</td>
<td>
<a href="http://getbootstrap.com/css/#selects">Default Select </a>
</td>
</tr>
</tbody>
</table>
<div class="osf-box-lt p-lg">
<h4> More tips:</h4>
<ul>
<li>If the individual items are shorter than ~10 characters, keep your checkboxes and radio buttons inline (if you have space).</li>
<li>If the individual items are longer, keep each checkbox or radio button in its own line.</li>
</ul>
</div>
</div>
</div>
<hr>
<h3 id="modals">Modals </h3>
<h4>When should you use modals?</h4>
<p class="m-t-lg"> Modals should be used in rare instances when the content needs to be in full focus of the user because</p>
<ul>
<li> they are making an important decision.</li>
<li> they are making a breaking change.</li>
<li> they need to read critical information.</li>
</ul>
<p class="m-t-lg">When adding modals consider these questions:</p>
<ul>
<li>Is the user going to expect a modal in this type of operation?</li>
<li>Is the modal going to hide content that will still be needed</li>
<li>Is this modal important enough? Can it be added within the page?</li>
<li> How many modals are there in this work flow?</li>
<li>Modals are easily dismissed so if the action is very important (i.e. new registration) create a multi page workflow instead. </li>
</ul>
<h4 class="m-t-lg">What to watch out for with modals</h4>
<p>When adding modals also be cognizant of these implementation practices:</p>
<ul>
<li>Always include a dismiss icon on the right top corner</li>
<li>Phrase the words in terms of the action, i.e. don't use "OK" if possible, use "I agree", or other verb.</li>
<li>Modals should not include too much text. If your modal needs to scroll in regular screens, look for a different method.</li>
<li>Check modal headers for narrow screen sizes by trying long names if the header is populated dynamically.</li>
</ul>
<hr>
<h3 id="tooltips">Using tooltips</h3>
<p>Tooltips are a method where hovering over an element provides additional information in a hovering text element. It's an addition to the default <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title">"title" html attribute </a>and default browser behavior.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<p>The implementation and styling of tooltip should be exactly as <a href="http://getbootstrap.com/javascript/#tooltips">standard bootstrap</a>. Hovering over items is not always intutitive so don't use tooltips unless necessary.</p>
<h4> USE with items that users are expected to move their mouse to</h4>
<div class="m-b-md p-md osf-box-lt box-round">
<div class="row">
<div class="col-xs-6">
<h5 class="text-success"> Do this: </h5>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Click to show the Side bar ">Show</button>
</div>
<div class="col-xs-6">
<h5 class="text-danger">Don't do this (hint: hover on "rows"):</h5>
Some of these <span data-toggle="tooltip" data-placement="right" title="Click on the rows to see what actions are available.">rows</span> are editable.
</div>
</div>
</div>
<h4>USE if the tooltip text is in fact longer and useful.</h4>
<div class="m-b-md p-md osf-box-lt box-round">
<div class="row">
<div class="col-xs-6">
<h5 class="text-success"> Do this: </h5>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Click to make your project viewable by anyone with or without an OSF account.">Make public</button>
</div>
<div class="col-xs-6">
<h5 class="text-danger">Don't do this: </h5>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Click to add collaborator.">Add collaborator</button>
</div>
</div>
</div>
<hr>
<h3 id="label">Using label</h3>
<h4>Why do we need to use label?</h4>
Label is used with input element. It provides a usability improvement for mouse users. Because if the user click on the text within a label element, it will toggles the control. See the example below.Click on one of the text labels to toggle the related control.
<div class="m-md p-md osf-box box-round">
<div class="row">
<div class="col-xs-12">
<!-- With label, it will toggle the checkbox if clicking text -->
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<!-- Without label, no action will happen if clicking text -->
<span>Female</span>
<input type="radio" name="sex" id="female" value="female"><br>
</div>
</div>
</div>
<pre class="language-markup"><code class="language-markup"><!-- With label, it will toggle the checkbox if clicking text -->
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<!-- Without label, no action will happen if clicking text -->
<span>Female</span>
<input type="radio" name="sex" id="female" value="female"><br></code></pre>
<h4>How to use label</h4>
Following the <a href="http://www.w3.org/WAI/tutorials/forms/labels/">accessibility rules</a>, whenever possible, use the label element to explicitly associate text with form elements. The for attribute of the label must exactly match the id of the form control.
<pre class="language-markup"><code class="language-markup"><!-- Recommended -->
<label for="Dataverse">Dataverse</label>
<input type="checkbox" name="dataverse" id="Dataverse" class="addon-select">
<!-- Not Recommended -->
<label>Dataverse<input type="checkbox" name="dataverse" class="addon-select"></label></code></pre>
<hr>
<h3 id="datetime">Using datetime</h3>
<p>All dates are to be displayed in <a href="https://en.wikipedia.org/wiki/Coordinated_Universal_Time">UTC</a> and should be precise down to minute. Ideally dates should be bolded and appear with a explainatory tooltip. You may also want to include information about the timezone if many datetimes are listed.</p>
<b><span data-toggle="tooltip" data-placement="right" title="2015-01-23 17:42 UTC">2015-01-23 1:42 PM</span></b>
<h3 id="reading">Further reading </h3>
<p>Resources below will give you good ideas about general UI principles. If the contents differ from guidance in this document remember that the Style Guide should be applied in OSF. </p>
<ul>
<li>
<b>Good UI </b> <a href="https://www.goodui.org/">https://www.goodui.org/</a>
</li>
<li>
<b>IOS Design Basics</b> <a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html">https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html</a>
</li>
<li>
<b>Android Design Guides </b> <a href="https://developer.android.com/design/index.html">https://developer.android.com/design/index.html</a>
</li>
</ul>
</div>
</div>
<div id="side-menu" class="col-sm-3 hidden-xs">
<ul class="nav nav-pills nav-stacked m-t-xl" data-spy="affix" data-offset-top="350" data-offset-bottom="200">
<li >
<a href="#ui">UI examples</a>
<ul class="nav subnav" >
<li><a href="#auto-save">Autosave</a></li>
<li><a href="#form-validation">Form validation</a></li>
<li><a href="#error-reporting">Error reporting</a></li>
<li><a href="#confirmations">Confirmations</a></li>
<li><a href="#button-state">Buttons and toggles</a></li>
<li><a href="#alphabetize">Alphabetize</a></li>
<li><a href="#inputs-forms">Input in frorms</a></li>
<li><a href="#modals">Modals</a></li>
<li><a href="#tooltips">Tooltips</a></li>
<li><a href="#label">Label</a></li>
<li><a href="#datetime">Datetime</a></li>
<li><a href="#reading">Further reading</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/prism/prism.js"></script>
<script src="script.js"></script>
</body>
</html>