-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1179 lines (1091 loc) · 58 KB
/
Copy pathindex.html
File metadata and controls
1179 lines (1091 loc) · 58 KB
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
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en"><head>
<script src="index_files/libs/clipboard/clipboard.min.js"></script>
<script src="index_files/libs/quarto-html/tabby.min.js"></script>
<script src="index_files/libs/quarto-html/popper.min.js"></script>
<script src="index_files/libs/quarto-html/tippy.umd.min.js"></script>
<link href="index_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="index_files/libs/quarto-html/light-border.css" rel="stylesheet">
<link href="index_files/libs/quarto-html/quarto-syntax-highlighting-dark-8ea72dc5fed832574809a9c94082fbbb.css" rel="stylesheet" id="quarto-text-highlighting-styles"><meta charset="utf-8">
<meta name="generator" content="quarto-1.6.40">
<meta name="author" content="Mick McQuaid">
<meta name="dcterms.date" content="2025-02-03">
<title>HCI: User research</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="index_files/libs/revealjs/dist/reset.css">
<link rel="stylesheet" href="index_files/libs/revealjs/dist/reveal.css">
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
vertical-align: middle;
}
/* CSS for citations */
div.csl-bib-body { }
div.csl-entry {
clear: both;
margin-bottom: 0em;
}
.hanging-indent div.csl-entry {
margin-left:2em;
text-indent:-2em;
}
div.csl-left-margin {
min-width:2em;
float:left;
}
div.csl-right-inline {
margin-left:2em;
padding-left:1em;
}
div.csl-indent {
margin-left: 2em;
} </style>
<link rel="stylesheet" href="index_files/libs/revealjs/dist/theme/quarto-ab7a322b4ca39adb1086c9e0171297e3.css">
<link rel="stylesheet" href="style.css">
<link href="index_files/libs/revealjs/plugin/quarto-line-highlight/line-highlight.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/reveal-menu/menu.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/reveal-menu/quarto-menu.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/quarto-support/footer.css" rel="stylesheet">
<style type="text/css">
.reveal div.sourceCode {
margin: 0;
overflow: auto;
}
.reveal div.hanging-indent {
margin-left: 1em;
text-indent: -1em;
}
.reveal .slide:not(.center) {
height: 100%;
}
.reveal .slide.scrollable {
overflow-y: auto;
}
.reveal .footnotes {
height: 100%;
overflow-y: auto;
}
.reveal .slide .absolute {
position: absolute;
display: block;
}
.reveal .footnotes ol {
counter-reset: ol;
list-style-type: none;
margin-left: 0;
}
.reveal .footnotes ol li:before {
counter-increment: ol;
content: counter(ol) ". ";
}
.reveal .footnotes ol li > p:first-child {
display: inline-block;
}
.reveal .slide ul,
.reveal .slide ol {
margin-bottom: 0.5em;
}
.reveal .slide ul li,
.reveal .slide ol li {
margin-top: 0.4em;
margin-bottom: 0.2em;
}
.reveal .slide ul[role="tablist"] li {
margin-bottom: 0;
}
.reveal .slide ul li > *:first-child,
.reveal .slide ol li > *:first-child {
margin-block-start: 0;
}
.reveal .slide ul li > *:last-child,
.reveal .slide ol li > *:last-child {
margin-block-end: 0;
}
.reveal .slide .columns:nth-child(3) {
margin-block-start: 0.8em;
}
.reveal blockquote {
box-shadow: none;
}
.reveal .tippy-content>* {
margin-top: 0.2em;
margin-bottom: 0.7em;
}
.reveal .tippy-content>*:last-child {
margin-bottom: 0.2em;
}
.reveal .slide > img.stretch.quarto-figure-center,
.reveal .slide > img.r-stretch.quarto-figure-center {
display: block;
margin-left: auto;
margin-right: auto;
}
.reveal .slide > img.stretch.quarto-figure-left,
.reveal .slide > img.r-stretch.quarto-figure-left {
display: block;
margin-left: 0;
margin-right: auto;
}
.reveal .slide > img.stretch.quarto-figure-right,
.reveal .slide > img.r-stretch.quarto-figure-right {
display: block;
margin-left: auto;
margin-right: 0;
}
</style>
</head>
<body class="quarto-dark">
<div class="reveal">
<div class="slides">
<section id="title-slide" class="quarto-title-block center">
<h1 class="title">HCI:<br>User research</h1>
<div class="quarto-title-authors">
<div class="quarto-title-author">
<div class="quarto-title-author-name">
Mick McQuaid
</div>
</div>
</div>
<p class="date">2025-02-03</p>
</section>
<section class="slide level2 center">
<div class="r-fit-text">
<p>Week FOUR</p>
</div>
</section>
<section id="today" class="title-slide slide level1 center">
<h1>Today</h1>
<ul>
<li>Feedback from last time</li>
<li>Discuss readings</li>
<li>Article presentation (Andres)</li>
<li>User research</li>
<li>End of class questionnaire</li>
</ul>
</section>
<section id="feedback-from-last-time" class="title-slide slide level1 center">
<h1>Feedback from last time</h1>
</section>
<section id="discuss-readings" class="title-slide slide level1 center">
<h1>Discuss readings</h1>
</section>
<section id="article-presentation-andres" class="title-slide slide level1 center">
<h1>Article presentation (Andres)</h1>
</section>
<section>
<section id="user-research" class="title-slide slide level1 center">
<h1>User research</h1>
</section>
<section id="empirical-ways-of-studying-people-users" class="slide level2 center">
<h2>empirical ways of studying people (users)</h2>
<ul>
<li>experiments (Nikki and Belle)</li>
<li>surveys (Nikki and Belle)</li>
<li>diaries (Anna and Pin-Yin)</li>
<li>case studies (Anna and Pin-Yin)</li>
<li>interviews (and contextual inquiry) (Julie and Victor)</li>
<li>ethnography (Julie and Victor)</li>
<li>automated data collection (Diya and Twisha)</li>
<li>biometric study (Diya and Twisha)</li>
<li>action research (Andres and Maggie)</li>
<li>technical research (Andres and Maggie)</li>
</ul>
<aside class="notes">
<p>What do we mean by the word empirical? Empirical research uses the evidence of direct observation or experience</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="the-preceding-is-not-an-exhaustive-list" class="slide level2 center">
<h2>the preceding is not an exhaustive list</h2>
<p>For example, see <span class="citation" data-cites="Olson2014">Olson and Kellogg (<a href="#/references" role="doc-biblioref" onclick="">2014</a>)</span> for a different list of ways hci professionals and scholars study the interactions of people and computers. The above list is based mostly on <span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span>.</p>
</section>
<section id="experiments" class="slide level2 center">
<h2>experiments</h2>
<p>Wikipedia tells us that an experiment is a procedure used to support or refute a hypothesis, model, or theory.</p>
<p>For example, suppose we hypothesize that programmers can complete a specific task faster using one IDE (integrated development environment) than in another IDE.</p>
<p>You can imagine an experiment to support or refute this hypothesis.</p>
</section>
<section id="experiment-characteristics" class="slide level2 center">
<h2>experiment characteristics</h2>
<p>It is a hallmark of experiments that the experimenter tries to control as many variables as possible. For the IDE experiment, what could you control? Task lighting, machine and peripherals, chair, desk and ambient noice all come to mind as possible confounds.</p>
<p>Experiments focus on dependent and independent variables, also referred to as <span class="math inline">\(y\)</span> and <span class="math inline">\(x\)</span>, response and treatment, regressand and regressor, predicted and predictor, unknown and known, output and input.</p>
<p>Experiments randomly allocate subjects to treatments.</p>
</section>
<section id="quasi-experimentation" class="slide level2 center">
<h2>quasi-experimentation</h2>
<p>Cook and Campbell wrote an interesting book called <em>Quasi-Experimentation</em> about the possibilities for observation of nature that would be similar to experimentation except that the researcher can’t control the variables and instead tries to collect as much information as possible so that all factors are accounted for.</p>
</section>
<section id="surveys" class="slide level2 center">
<h2>surveys</h2>
<p>Surveys allow you to gather information from many more people than would be practical in other methods. Their main drawback is that the researcher can not react to the survey subject. This raises a lot of problems.</p>
<p>You have to pilot surveys with a small group to gain confidence that the questions have construct validity. In other words, you want to gain confidence that the questions are asking what you think they are asking.</p>
<p>Many validated survey instruments exist, including some in HCI. Researchers try to validate instruments by asking many similar questions and phrasing some positively and others negatively to see how people answer them.</p>
</section>
<section id="diaries" class="slide level2 center">
<h2>diaries</h2>
<p>Some researchers ask people to keep a diary while using an application over a period of weeks or months. The key problem here is getting people to maintain a habit of diary entries.</p>
</section>
<section id="case-studies" class="slide level2 center">
<h2>case studies</h2>
<p>Case studies are in-depth studies of specific instances within specific real-life context, according to <span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span>. They may concern a single specific instance or a small set of instances.</p>
<p>Case studies typically have small sample sizes so sample selection is a key challenge.</p>
</section>
<section id="case-study-example" class="slide level2 center">
<h2>case study example</h2>
<p><em>Observing Sara</em> is a well-known case study conducted by RIT faculty member Kristen Shinohara. She conducted 6 two-hour sessions in which Sara demonstrated her use of assistive technologies for the blind. The generated material included notes, audio recordings, interviewer reactions, and photographs. Analysis included task tables and detailed descriptions. The result of the study was a set of design guidelines.</p>
</section>
<section id="task-table-from-shinohara2007" class="slide level2 center">
<h2>task table from <span class="citation" data-cites="Shinohara2007">Shinohara and Tenenberg (<a href="#/references" role="doc-biblioref" onclick="">2007</a>)</span></h2>
<img data-src="fiTaskTable.png" class="r-stretch"></section>
<section id="goals-of-case-studies" class="slide level2 center">
<h2>goals of case studies</h2>
<p>According to <span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span>, the following goals apply to HCI case studies.</p>
<ul>
<li>exploration: understanding novel problems or situations, often in hopes of informing new designs</li>
<li>explanation: developing models to understand a context of technology use</li>
<li>description: documenting a system, a context of technology use, or a process leading to a proposed design</li>
<li>demonstration: showing how a new tool was successfully used</li>
</ul>
</section>
<section id="interviews" class="slide level2 center">
<h2>interviews</h2>
<p>Interviewing is an open-ended, exploratory technique. It affords the flexibility to react to what the interviewee says as well as to the interviewe’s unspoken signals.</p>
<p>Interviewing requires practice to develop skill. You are unlikely to be a good interviewer in your first few, perhaps many, interviews.</p>
<p>Analysis of interviews is likewise challenging and time-consuming. One hour of interviewing may lead to ten hours of analysis, according to <span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span>.</p>
<p>Both interviews and surveys require the participant to remember something from the past, not an easy task.</p>
</section>
<section id="contextual-inquiry" class="slide level2 center">
<h2>contextual inquiry</h2>
<p>Contextual inquiry is an interview-oriented technique that requires the interview to occur in the workplace during work. An important tenet of contextual inquiry is that the interviewer not examine her notes until an interpretation session, which is conducted under strict rules.</p>
<p>In the interpretation session, transcribe interview notes to affinity notes (post-it notes or a digital equivalent) and arrange them on an affinity diagram constructed in a bottom-up manner. Write affinity notes in the first person as the interviewee. After clustering, add labels at different hierarchical levels. The process is described in detail in <span class="citation" data-cites="Holtzblatt2005">Holtzblatt, Wendell, and Wood (<a href="#/references" role="doc-biblioref" onclick="">2005</a>)</span>.</p>
</section>
<section id="ethnography" class="slide level2 center">
<h2>ethnography</h2>
<p>Ethnography is a challenging combination of observation, interviews, and participation in a community. It originated with anthropologists and has been adopted in other fields, including sociology and HCI.</p>
<p>The ethnographer immerses herself in the environment of the people being studied. One famous ethnographer in information systems earned a medical doctor degree while studying radiologists intensively over a period of seven years. (HCI researchers rarely have the opportunity to conduct ethnographic research because of time and money limitations but, when they are able to, a remarkably deep understanding of user needs results.)</p>
</section>
<section id="automated-data-collection" class="slide level2 center">
<h2>automated data collection</h2>
<p>Online traffic is a rich source of data, for better or worse. Google Flu Trends exemplifies the former. Facebook’s Emotions study of 2014 may exemplify the latter. (Facebook altered the news feeds of half a million people to see if they could alter their moods.)</p>
<p>A/B testing, where visitors are served one of two versions of a web artifact, is the most common method for HCI professionals.</p>
</section>
<section id="biometric-study" class="slide level2 center">
<h2>biometric study</h2>
<p>Eye tracking was the most well-known form of biometric study until the advent of smart watches. Other types of physiological data used in HCI research includes electrodermal activity, cardiovascular data, respiration, muscular and skeletal positioning, muscle tension, and brain activity.</p>
</section>
<section id="user-research-as-described-and-as-practiced" class="slide level2 center">
<h2>User research as described and as practiced</h2>
<div class="container">
<div class="col">
<p><img data-src="fiOrderlyTraffic.jpg" style="width:70.0%"></p>
</div>
<div class="col">
<p><img data-src="fiSnowInRaleigh2014.jpg"></p>
</div>
</div>
</section></section>
<section>
<section id="contextual-inquiry-1" class="title-slide slide level1 center">
<h1>Contextual Inquiry</h1>
<aside class="notes">
<p>Because of its minimal time requirements, contextual inquiry is the most popular of three methods we’ve considered, and we’re going to learn it.</p>
<p><span class="citation" data-cites="Holtzblatt2005">Holtzblatt, Wendell, and Wood (<a href="#/references" role="doc-biblioref" onclick="">2005</a>)</span> describes the most commonly used of the above three methods. It’s the most common for a chain of reasons. First, the reliance on an underlying work structure minimizes the need for client time, always an attractive feature in a resource-constrained workplace. Second, the direct manipulation of the underlying work structure means that existing design artifacts can be sidestepped and radical changes are possible without time-consuming study and modification of existing design artifacts.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="contextual-inquiry-process" class="slide level2 center">
<h2>Contextual Inquiry Process</h2>
<ul>
<li>Prepare for workplace interviews / observations</li>
<li>Conduct workplace interviews / observations</li>
<li>Interpret workplace interviews / observations</li>
</ul>
<aside class="notes">
<p>Because contextual inquiry and its umbrella, contextual design, have been so successful and so inexpensive to implement, you are more likely to participate in it in the workplace than in any other design method. One hallmark of contextual design you may experience is the method’s reliance on extremely large numbers of post-it notes containing atomic observations about the subject work.</p>
<p>A team conducting a contextual inquiry typically immerses itself in a mass of these post-it notes, following a structured method for grouping and regrouping the notes to make sense of the subject work and to organize the observations of the client participants to reveal the essential characteristics that will inform the new design.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="immersion" class="slide level2 center">
<h2>Immersion</h2>
<img data-src="fiAffinityAftermath.png" class="r-stretch"><aside class="notes">
<p>This photo shows the picture of immersion from <span class="citation" data-cites="Beyer1999">Beyer and Holtzblatt (<a href="#/references" role="doc-biblioref" onclick="">1999</a>)</span>, the article that introduced contextual inquiry. Notice the 90s era personal computer in the foreground. Today, it’s relatively easy to do this immersion using FigJam or Miro or similar tools.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="affinity-mapping" class="slide level2 center">
<h2>Affinity Mapping</h2>
<p>I usually call this <em>affinity diagramming</em> but every online source I’ve found uses the terms interchangeably. Jacek calls it WAAD (work activity affinity diagramming).</p>
</section>
<section id="good-affinity-diagrams-start-with-good-affinity-notes" class="slide level2 center">
<h2>Good affinity diagrams start with good affinity notes</h2>
</section>
<section id="good-affinity-notes-happen-in-an-interview" class="slide level2 center">
<h2>Good affinity notes happen in an interview</h2>
</section>
<section id="getting-there-in-the-interview" class="slide level2 center">
<h2>Getting there in the interview</h2>
<ul>
<li>Transition to work focus</li>
<li>Observe and discuss</li>
<li>Be nosy</li>
<li>Take notes (avoid using a laptop)</li>
<li>Know what to take notes about!</li>
</ul>
</section>
<section id="what-to-take-notes-about" class="slide level2 center">
<h2>What to take notes about</h2>
<ul>
<li>The user’s role</li>
<li>The user’s responsibilities</li>
<li>The user’s communication types</li>
<li>The user’s organization of physical space</li>
<li>The user’s artifacts (get copies if possible)</li>
<li>Breakdowns in the user’s work</li>
<li>What works and what doesn’t</li>
</ul>
</section>
<section id="interview-activities" class="slide level2 center">
<h2>Interview activities</h2>
<ul>
<li>Share design ideas stimulated by events</li>
<li>Draw the physical space</li>
<li>Take photos (if you get permission)</li>
</ul>
</section>
<section id="wrap-up" class="slide level2 center">
<h2>Wrap up</h2>
<ul>
<li>Summarize what you learned, check your high-level understanding</li>
<li>Ask about pet issues</li>
<li>Give tips about system use (avoid doing so earlier)</li>
<li>Thank the user and give a gift if possible</li>
<li>Be sure you followed the tips in <span class="citation" data-cites="Holtzblatt2005">Holtzblatt, Wendell, and Wood (<a href="#/references" role="doc-biblioref" onclick="">2005</a>)</span> in Tables 4-1 through 4-5!</li>
</ul>
</section>
<section id="views-of-the-ci-interview" class="slide level2 center">
<h2>Views of the CI interview</h2>
</section>
<section id="section" class="slide level2 center">
<h2></h2>
<img data-src="fiCIinterview1.jpg" class="r-stretch"></section>
<section id="section-1" class="slide level2 center">
<h2></h2>
<img data-src="fiCIinterview2.jpg" class="r-stretch"></section>
<section id="section-2" class="slide level2 center">
<h2></h2>
<img data-src="fiCIinterview3.jpg" class="r-stretch"></section>
<section id="section-3" class="slide level2 center">
<h2></h2>
<img data-src="fiCIinterview4.jpg" class="r-stretch"></section>
<section id="section-4" class="slide level2 center">
<h2></h2>
<img data-src="fiCIvsIntvwvsObs.jpg" class="r-stretch"></section></section>
<section>
<section id="interpret-the-contextual-inquiry-interviews" class="title-slide slide level1 center">
<h1>Interpret the contextual inquiry interviews</h1>
</section>
<section id="intro" class="slide level2 center">
<h2>Intro</h2>
<ul>
<li>Today usually done via FigJam or Miro instead of on a wall with post-its</li>
<li>Should happen 48 hours after the interviews (or sooner)</li>
<li>You should NOT talk to your teammates (or anyone else) about the interviews before the interpretation session</li>
<li>You should never do it alone</li>
<li>Must be synchronous</li>
<li>Usually takes all day</li>
</ul>
</section>
<section id="interpretation-session-steps-overview" class="slide level2 center">
<h2>Interpretation session steps overview</h2>
<ol type="1">
<li>Create affinity notes from your atomic observations</li>
<li>Add 500 affinity notes to the diagram</li>
<li>Organize the affinity notes by similarity</li>
<li>Add the bottom level of labels above the affinity notes</li>
<li>Add the temporary top level of labels and reorganize the bottom level of labels and affinity notes to fit them</li>
<li>Remove the temporary top level labels</li>
<li>Add the middle level of labels</li>
<li>Add the top level of labels</li>
</ol>
<aside class="notes">
<p>Note that there are three levels of affinity labels and one level of affinity notes. The affinity note copies one thing a participant said. It is the <em>atom</em> of the contextual inquiry universe. For example, a participant might say “I hate the menus because they are hard to navigate.” The affinity labels are top, middle, and bottom. For example, the bottom level label above the note just mentioned might be “challenges navigating the menus”, while a midle level label above that might be “menus” or “navigation”, depending on other affinity notes.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="first-steps" class="slide level2 center">
<h2>First steps</h2>
<ul>
<li>Write affinity notes in the first person</li>
<li>Use words that mean the same to everyone</li>
<li>Let the meaning emerge from the groups instead of predefining</li>
<li>Reorganize hard-to-label groups rather than wrestling with unsatisfying label wording</li>
</ul>
</section>
<section id="bottom-level-of-affinity-labels" class="slide level2 center">
<h2>Bottom level of affinity labels</h2>
<ul>
<li>Start when you can’t keep track of the affinity notes</li>
<li>Give them design relevance</li>
<li>Highlight distinctions rather than trying to bring groups together</li>
</ul>
</section>
<section id="temporary-top-level-of-affinity-labels" class="slide level2 center">
<h2>Temporary top level of affinity labels</h2>
<ul>
<li>Helps you move the affinity notes around into positions closer to their final positions</li>
<li>Only half a dozen temporary top labels</li>
<li>Remove them when this step is complete</li>
</ul>
</section>
<section id="middle-level-of-affinity-labels" class="slide level2 center">
<h2>Middle level of affinity labels</h2>
<ul>
<li>Highlight highlevel work concepts</li>
<li>Steps in work</li>
<li>Communication strategies in work</li>
<li>Tool use</li>
<li>Organizational structure</li>
</ul>
</section>
<section id="top-level-of-affinity-labels" class="slide level2 center">
<h2>Top level of affinity labels</h2>
<ul>
<li>Describe the key issues relevant to the design</li>
<li>Inform the behavior patterns that will be the basis for personas</li>
<li>Any break in the chain from interview to key issues jeopardizes the persona milestone, coming up next</li>
</ul>
</section>
<section id="section-5" class="slide level2 center">
<h2></h2>
<div class="container">
<div class="col">
<p><em>Example of the relationship between a top level label and those below it</em></p>
</div>
<div class="col">
<p><img data-src="fiAffinityExample.png"></p>
</div>
</div>
</section>
<section id="different-views-of-the-process" class="slide level2 center">
<h2>Different views of the process</h2>
</section>
<section id="section-6" class="slide level2 center">
<h2></h2>
<img data-src="fiAffinityVariety.png" class="r-stretch"></section>
<section id="section-7" class="slide level2 center">
<h2></h2>
<img data-src="fiAffinityTiny.png" class="r-stretch"></section>
<section id="section-8" class="slide level2 center">
<h2></h2>
<img data-src="fiAffinityInProcess.jpg" class="r-stretch"></section>
<section id="section-9" class="slide level2 center">
<h2></h2>
<img data-src="fiAffinityLarge.jpg" class="r-stretch"></section>
<section id="summary" class="slide level2 center">
<h2>Summary</h2>
<p>Affinity diagramming or mapping is similar to many other techniques. It’s a summarizing activity, originally developed to support contextual design or personas or scenarios, but eventually adapted to many other uses. The keys, in my view, are</p>
<ol type="1">
<li>Good affinity notes, written in the first person so that they speak with the voice of the user</li>
<li>Too many of them to make sense of directly</li>
<li>A rearranging and grouping and labeling process</li>
</ol>
</section></section>
<section>
<section id="surveys-1" class="title-slide slide level1 center">
<h1>Surveys</h1>
</section>
<section id="intro-1" class="slide level2 center">
<h2>Intro</h2>
<p>Surveys are the easiest method.</p>
<p>Hence, surveys are the most abused method.</p>
<p><span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span> says they may be the most appropriate method for measuring attitudes, awareness, intent, feedback on user experiences, characteristics of users, and over-time comparisons.</p>
<p>Surveys may be less useful for precise measurements or standalone measures of usability.</p>
<p>Surveys can be construed as a method, including questions, sampling, reminders, and incentives.</p>
<p>Surveys are cheap and can have large sample sizes.</p>
</section>
<section id="more-intro" class="slide level2 center">
<h2>More intro</h2>
<p>Surveys are easy for the IRB to approve.</p>
<p>The tools are readily available: paper, email, or survey websites.</p>
<p>Surveys are good for getting shallow data.</p>
<p>Surveys are hard to modify once sent out.</p>
<p>Surveys are subject to all kinds of biases: recall bias, bias about self-image.</p>
<p>Some cultures are predominantly oral rather than written.</p>
<p>Surveys are targeted at specific groups. How do you find the group?</p>
</section>
<section id="sampling" class="slide level2 center">
<h2>Sampling</h2>
<p>A census tries to select everyone to participate but random sampling is more frequent because of the extraordinary expense of a census.</p>
<p>A sample frame refers to the target population from which a sample is drawn. The sample may be of institutions such as libraries rather than individuals.</p>
<p>Stratification occurs when you divide the population into subpopulations known as strata.</p>
<p>An example of strata would be classes (freshman, sophomore, etc.) among students. Suppose you wanted equal representation from each class.</p>
</section>
<section id="more-sampling" class="slide level2 center">
<h2>More sampling</h2>
<p>Another example given in <span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span> is long-distance and local moves.</p>
<p>How large should the sample be? <span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span> dodges this question then says 384 gives a ninety-five percent confidence level with a plus or minus five percent margin of error. Then says you should read another book.</p>
<p>Sampling error occurs when too small a fraction of those surveyed actually respond.</p>
<p>Coverage error occurs when members of the target group have an unequal chance of being selected for survey.</p>
</section>
<section id="still-more-sampling" class="slide level2 center">
<h2>Still more sampling</h2>
<p>Measurement error occurs when questions are poorly worded or biased.</p>
<p>Nonresponse error occurs when the respondents differ systematically from the sampling frame.</p>
<p>HCI usually does not engage in probabilistic sampling except at the smallest level.</p>
<p>HCI usually uses techniques like self-selected surveys or snowballing (respondents recruit other respondents).</p>
<p>Nonprobabilistic sampling is unacceptable to some disciplines but common in HCI.</p>
</section>
<section id="surveys-are-rarely-used-alone" class="slide level2 center">
<h2>Surveys are rarely used alone</h2>
<p>HCI researchers often use surveys in conjunction with other research methods.</p>
</section>
<section id="demographic-data" class="slide level2 center">
<h2>Demographic data</h2>
<p>The more you ask for, the more respondents you lose. I like to place demographic data near the end of the survey.</p>
<p>In the USA, the zip code is the most valuable piece of demographic data because household income averages are available via census data.</p>
<p><span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span> suggests that you get age, gender, education, job responsibility, and computer usage.</p>
</section>
<section id="oversampling" class="slide level2 center">
<h2>Oversampling</h2>
<p>This occurs when the response is large in proportion to the target population size.</p>
</section>
<section id="random-sampling-of-usage" class="slide level2 center">
<h2>Random sampling of usage</h2>
<p>Also known as intercept sampling, you can survey on, for instance, every hundredth page load.</p>
</section>
<section id="self-selected-surveys" class="slide level2 center">
<h2>Self-selected surveys</h2>
<p>This occurs when a link on a page invites every visitor to complete a survey. This can be considered invited or self-selected.</p>
<p>A self-selected survey may make the best starting point for investigating new user populations or new phenomena of usage. Social media may provide the best contact point for a self-selected survey.</p>
</section>
<section id="uninvestigated-populations" class="slide level2 center">
<h2>Uninvestigated populations</h2>
<p><span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span> asserts that many groups, such as sufferers of certain cognitive impairments, are completely unstudied in an HCI context. The authors have studied people with Down Syndrome and seem to think there are opportunities for similar studies.</p>
<p>Snowballing may work well for uninvestigated populations if they have community ties.</p>
</section>
<section id="survey-questions" class="slide level2 center">
<h2>Survey questions</h2>
<p>A set of questions is often called an instrument and one that has been tested using factor analysis is often called a validated instrument. This means that the survey has been tested to see if the questions are asking what you think they are asking.</p>
</section>
<section id="kinds-of-survey-questions" class="slide level2 center">
<h2>Kinds of survey questions</h2>
<p>One way to think of individual questions is whether they are open ended or not.</p>
<p>Closed ended questions may have ordinal or nominal responses.</p>
<p>Open ended questions should ask about specific constructs: instead of asking whether you like software, ask about the usability and usefulness of the software. Ask about the barriers faced.</p>
</section>
<section id="survey-question-answer-choices" class="slide level2 center">
<h2>Survey question answer choices</h2>
<p>Likert scales are the most typical ordinal closed-ended questions. One nice thing about computers is that users can’t mark the space between two numbers. Bear in mind that the middle option may be interpreted in two different ways. It is usual to phrase some Likert-type questions in reverse to see if people are just randomly using one column of answers. You may want to discard surveys showing strong evidence of random answering.</p>
<p>Nominal questions may elicit radio-button answers or choose as many as apply.</p>
</section>
<section id="typical-survey-question-problems" class="slide level2 center">
<h2>Typical survey question problems</h2>
<p>Beware of a question that asks two questions at once.</p>
<p>Negative wording often may not cause confusion.</p>
<p>Biased wording leads to biased responses.</p>
<p>Politically charged words lead to biased responses.</p>
<p>Abbreviations cause confusion and distraction.</p>
</section>
<section id="survey-structure" class="slide level2 center">
<h2>Survey structure</h2>
<p>Group similar questions together to take advantage of spreading activation.</p>
<p>Place demographic and sensitive questions near the end.</p>
<p>I personally like to end surveys with “Please share any additional thoughts at this time.”</p>
<p>Contingent questions need to be marked, either by indentation or arrows on a paper survey, or by a link on a web-based survey.</p>
</section>
<section id="validated-instruments" class="slide level2 center">
<h2>Validated instruments</h2>
<p>Some validated instruments are mentioned in <span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span>: CSUQ, ICTQ, PUTQ, QUIS, SUMI, WAMMI.</p>
<p>The website <a href="garyperlman.com/quest">garyperlman.com/quest</a> collects a bunch of these and others along with a perl script to administer them. Personally I would manually type the questions into Qualtrics and use that. There is another survey site popular with hci students (name escapes me).</p>
</section>
<section id="paper-surveys" class="slide level2 center">
<h2>Paper surveys</h2>
<p><span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span> urge you to consider paper surveys for underserved populations. I am skeptical. The only reason I can think of is to reach people at certain postal addresses or people you can meet in certain locations, such as homeless people congregating at a shelter.</p>
</section>
<section id="informed-consent" class="slide level2 center">
<h2>Informed consent</h2>
<p>An informed consent form may be needed as part of a paper-based survey but informed consent for online studies is alleged by <span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span> to be controversial.</p>
</section>
<section id="pilot-study" class="slide level2 center">
<h2>Pilot study</h2>
<p><span class="citation" data-cites="Lazar2017">Lazar, Feng, and Hochheiser (<a href="#/references" role="doc-biblioref" onclick="">2017</a>)</span> adopts a three stage model from Dillman (2000) for pretesting or piloting</p>
<ol type="1">
<li>review by knowledgeable colleagues</li>
<li>interviews with potential respondents to evaluate cognitive and motivational qualities of the instrument</li>
<li>pilot study of the survey instrument and the implementation</li>
</ol>
</section>
<section id="more-on-pilot-study" class="slide level2 center">
<h2>More on pilot study</h2>
<p>Pilot study may include tests of internal reliability such as asking the same question multiple times in different ways. A popular statistic for this kind of check is Cronbach’s alpha. A better statistic, according to the R documentation for alpha, is omega, also found in the psych package for R.</p>
<p>Pilot study may include a factor analysiss to try to reduce the number of questions by keeping only those in a group of similar questions with high factor loadings.</p>
</section>
<section id="response-rate" class="slide level2 center">
<h2>Response rate</h2>
<p>Prizes are often used as incentives to increase response because people typically overestimate the likelihood they will win the prize.</p>
<p>The instrument itself can include statements attesting to the value to the researchers and perhaps society at large of the respondent’s participation.</p>
<p>Dillman (2000) suggests five contacts: Precontact, the actual instrument, a thank you reminder, a replacement survey to non-respondents, and a final contact using a different mode.</p>
</section>
<section id="data-analysis" class="slide level2 center">
<h2>Data analysis</h2>
<p>Descriptive statistics can be generated for all closed-ended questions as well as for some open-ended questions.</p>
<p>Most open-ended question are amenable to content analysis. Content analysis is typically more used by academic researchers than in industry, but it is becoming more popular so I predict that methods like those of Braun and Clarke will gain popularity in industrial research in coming years, especially for the development of sophisticated software, such as medical software. Large language models like ChatGPT can’t easily replace content analysis by humans (yet) due to inconsistent language used by humans in discussing their work and play.</p>
</section></section>
<section id="readings" class="title-slide slide level1 center">
<h1>Readings</h1>
<p>Readings last week include <span class="citation" data-cites="Johnson2020">Johnson (<a href="#/references" role="doc-biblioref" onclick="">2020</a>)</span>: Ch 7–9, <span class="citation" data-cites="Norman2013">Norman (<a href="#/references" role="doc-biblioref" onclick="">2013</a>)</span>: Ch 2, 4</p>
<p>Readings this week include <span class="citation" data-cites="Hartson2019">Hartson and Pyla (<a href="#/references" role="doc-biblioref" onclick="">2019</a>)</span>: Ch 7, 8</p>
</section>
<section id="assignments" class="title-slide slide level1 center">
<h1>Assignments</h1>
<ul>
<li>Assignment 1</li>
<li>Milestone 1: Topic selection and product concept statement</li>
</ul>
</section>
<section id="end-of-class-questionnaire" class="title-slide slide level1 center">
<h1>End of class questionnaire!</h1>
</section>
<section>
<section id="references" class="title-slide slide level1 smaller scrollable">
<h1>References</h1>
<div id="refs" class="references csl-bib-body hanging-indent" data-entry-spacing="0" role="list">
<div id="ref-Beyer1999" class="csl-entry" role="listitem">
Beyer, Hugh, and Karen Holtzblatt. 1999. <span>“Contextual Design.”</span> <em>Interactions</em> 6 (1): 32–42.
</div>
<div id="ref-Hartson2019" class="csl-entry" role="listitem">
Hartson, Rex, and Pardha Pyla. 2019. <em>The UX Book, 2nd Edition</em>. Cambridge, MA: Morgan Kaufman.
</div>
<div id="ref-Holtzblatt2005" class="csl-entry" role="listitem">
Holtzblatt, Karen, Jessamyn Burns Wendell, and Shelley Wood. 2005. <em>Rapid Contextual Design: A How-to Guide to Key Techniques for User-Centered Design</em>. San Francisco, CA: Morgan Kaufmann.
</div>
<div id="ref-Johnson2020" class="csl-entry" role="listitem">
Johnson, Jeff. 2020. <em>Designing with the Mind in Mind, 3rd Edition</em>. Cambridge, MA: Morgan Kaufman.
</div>
<div id="ref-Lazar2017" class="csl-entry" role="listitem">
Lazar, Jonathan, Jinjuan Heidi Feng, and Harry Hochheiser. 2017. <em>Research Methods in Human-Computer Interaction, 2nd Ed.</em> West Sussex, UK: Wiley.
</div>
<div id="ref-Norman2013" class="csl-entry" role="listitem">
Norman, Donald A. 2013. <em>The Design of Everyday Things, 2nd Edition</em>. Basic Books.
</div>
<div id="ref-Olson2014" class="csl-entry" role="listitem">
Olson, Judith S., and Wendy A. Kellogg, eds. 2014. <em>Ways of Knowing in <span>HCI</span></em>. Springer New York. <a href="https://doi.org/10.1007/978-1-4939-0378-8">https://doi.org/10.1007/978-1-4939-0378-8</a>.
</div>
<div id="ref-Shinohara2007" class="csl-entry" role="listitem">
Shinohara, Kristen, and Josh Tenenberg. 2007. <span>“Observing Sara: A Case Study of a Blind Person’s Interactions with Technology.”</span> In <em>Proceedings of the 9th International ACM SIGACCESS Conference on Computers and Accessibility</em>, 171–78. Assets ’07. New York, NY, USA: ACM. <a href="https://doi.org/10.1145/1296843.1296873">https://doi.org/10.1145/1296843.1296873</a>.
</div>
</div>
</section>
<section class="slide level2 center">
<div class="r-fit-text">
<p>END</p>
</div>
</section></section>
<section id="colophon" class="title-slide slide level1 center">
<h1>Colophon</h1>
<p>This slideshow was produced using <code>quarto</code></p>
<p>Fonts are <em>League Gothic</em> and <em>Lato</em></p>
</section>
</div>
<div class="quarto-auto-generated-content" style="display: none;">
<p><img src="iSchoolLogo.png" class="slide-logo"></p>
<div class="footer footer-default">
</div>
</div></div>
<script>window.backupDefine = window.define; window.define = undefined;</script>
<script src="index_files/libs/revealjs/dist/reveal.js"></script>
<!-- reveal.js plugins -->
<script src="index_files/libs/revealjs/plugin/quarto-line-highlight/line-highlight.js"></script>
<script src="index_files/libs/revealjs/plugin/pdf-export/pdfexport.js"></script>
<script src="index_files/libs/revealjs/plugin/reveal-menu/menu.js"></script>
<script src="index_files/libs/revealjs/plugin/reveal-menu/quarto-menu.js"></script>
<script src="index_files/libs/revealjs/plugin/quarto-support/support.js"></script>
<script src="index_files/libs/revealjs/plugin/notes/notes.js"></script>
<script src="index_files/libs/revealjs/plugin/search/search.js"></script>
<script src="index_files/libs/revealjs/plugin/zoom/zoom.js"></script>
<script src="index_files/libs/revealjs/plugin/math/math.js"></script>
<script>window.define = window.backupDefine; window.backupDefine = undefined;</script>
<script>
// Full list of configuration options available at:
// https://revealjs.com/config/
Reveal.initialize({
'controlsAuto': false,
'previewLinksAuto': true,
'pdfSeparateFragments': false,
'autoAnimateEasing': "ease",
'autoAnimateDuration': 1,
'autoAnimateUnmatched': true,
'jumpToSlide': true,
'menu': {"side":"left","useTextContentForMissingTitles":true,"markers":false,"loadIcons":false,"custom":[{"title":"Tools","icon":"<i class=\"fas fa-gear\"></i>","content":"<ul class=\"slide-menu-items\">\n<li class=\"slide-tool-item active\" data-item=\"0\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.fullscreen(event)\"><kbd>f</kbd> Fullscreen</a></li>\n<li class=\"slide-tool-item\" data-item=\"1\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.speakerMode(event)\"><kbd>s</kbd> Speaker View</a></li>\n<li class=\"slide-tool-item\" data-item=\"2\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.overview(event)\"><kbd>o</kbd> Slide Overview</a></li>\n<li class=\"slide-tool-item\" data-item=\"3\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.togglePdfExport(event)\"><kbd>e</kbd> PDF Export Mode</a></li>\n<li class=\"slide-tool-item\" data-item=\"4\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.toggleScrollView(event)\"><kbd>r</kbd> Scroll View Mode</a></li>\n<li class=\"slide-tool-item\" data-item=\"5\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.keyboardHelp(event)\"><kbd>?</kbd> Keyboard Help</a></li>\n</ul>"}],"openButton":true},
'smaller': false,
// Display controls in the bottom right corner
controls: true,
// Help the user learn the controls by providing hints, for example by
// bouncing the down arrow when they first encounter a vertical slide
controlsTutorial: false,
// Determines where controls appear, "edges" or "bottom-right"
controlsLayout: 'bottom-right',
// Visibility rule for backwards navigation arrows; "faded", "hidden"
// or "visible"
controlsBackArrows: 'faded',
// Display a presentation progress bar
progress: true,
// Display the page number of the current slide
slideNumber: false,
// 'all', 'print', or 'speaker'
showSlideNumber: 'all',
// Add the current slide number to the URL hash so that reloading the
// page/copying the URL will return you to the same slide
hash: true,
// Start with 1 for the hash rather than 0
hashOneBasedIndex: false,
// Flags if we should monitor the hash and change slides accordingly
respondToHashChanges: true,
// Push each slide change to the browser history
history: true,
// Enable keyboard shortcuts for navigation
keyboard: true,
// Enable the slide overview mode
overview: true,
// Disables the default reveal.js slide layout (scaling and centering)
// so that you can use custom CSS layout
disableLayout: false,
// Vertical centering of slides
center: true,
// Enables touch navigation on devices with touch input
touch: true,
// Loop the presentation
loop: false,
// Change the presentation direction to be RTL
rtl: false,
// see https://revealjs.com/vertical-slides/#navigation-mode
navigationMode: 'linear',
// Randomizes the order of slides each time the presentation loads
shuffle: false,
// Turns fragments on and off globally
fragments: true,
// Flags whether to include the current fragment in the URL,
// so that reloading brings you to the same fragment position
fragmentInURL: false,
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded: false,
// Flags if we should show a help overlay when the questionmark
// key is pressed
help: true,
// Flags if it should be possible to pause the presentation (blackout)
pause: true,
// Flags if speaker notes should be visible to all viewers
showNotes: false,
// Global override for autoplaying embedded media (null/true/false)
autoPlayMedia: null,
// Global override for preloading lazy-loaded iframes (null/true/false)
preloadIframes: null,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: 0,
// Stop auto-sliding after user input
autoSlideStoppable: true,
// Use this method for navigation when auto-sliding
autoSlideMethod: null,
// Specify the average time in seconds that you think you will spend
// presenting each slide. This is used to show a pacing timer in the
// speaker view
defaultTiming: null,
// Enable slide navigation via mouse wheel
mouseWheel: false,
// The display mode that will be used to show slides
display: 'block',
// Hide cursor if inactive
hideInactiveCursor: true,
// Time before the cursor is hidden (in ms)
hideCursorTime: 5000,
// Opens links in an iframe preview overlay
previewLinks: false,
// Transition style (none/fade/slide/convex/concave/zoom)
transition: 'slide',
// Transition speed (default/fast/slow)
transitionSpeed: 'default',
// Transition style for full page slide backgrounds
// (none/fade/slide/convex/concave/zoom)
backgroundTransition: 'fade',
// Number of slides away from the current that are visible
viewDistance: 3,
// Number of slides away from the current that are visible on mobile
// devices. It is advisable to set this to a lower number than
// viewDistance in order to save resources.
mobileViewDistance: 2,
// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be
// specified using percentage units.
width: 1050,
height: 700,
// Factor of the display size that should remain empty around the content
margin: 0.1,
math: {
mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js',
config: 'TeX-AMS_HTML-full',
tex2jax: {
inlineMath: [['\\(','\\)']],
displayMath: [['\\[','\\]']],
balanceBraces: true,
processEscapes: false,
processRefs: true,
processEnvironments: true,
preview: 'TeX',
skipTags: ['script','noscript','style','textarea','pre','code'],
ignoreClass: 'tex2jax_ignore',
processClass: 'tex2jax_process'
},
},
// reveal.js plugins
plugins: [QuartoLineHighlight, PdfExport, RevealMenu, QuartoSupport,
RevealMath,
RevealNotes,
RevealSearch,
RevealZoom
]
});
</script>
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
const toggleBodyColorMode = (bsSheetEl) => {
const mode = bsSheetEl.getAttribute("data-mode");
const bodyEl = window.document.querySelector("body");
if (mode === "dark") {
bodyEl.classList.add("quarto-dark");
bodyEl.classList.remove("quarto-light");
} else {