-
Notifications
You must be signed in to change notification settings - Fork 9
/
guidelines.json
6246 lines (6246 loc) · 464 KB
/
guidelines.json
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
{
"title": "Web Sustainability Guidelines",
"version": "1.0",
"edition": "Sixth Draft",
"lastModified": "2024-04-11",
"category": [
{
"id": "1",
"name": "Introduction"
},
{
"id": "2",
"name": "User-Experience Design",
"shortName": "UX Design",
"guidelines": [
{
"id": "1",
"url": "https://w3c.github.io/sustyweb/#undertake-systemic-impacts-mapping",
"guideline": "Undertake Systemic Impacts Mapping",
"description": "Many variables can impact the user-experience, and a bunch of these can impact how sustainable your website will be. Attempting to identify where you can make a difference to the visitor and give them a more sustainable experience will be beneficial.",
"criteria": [
{
"title": "External Variables",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX01-1)",
"description": "List the negative external variables and identify where your product's sustainable impact can be diminished (systemic design)."
}
],
"impact": "Medium",
"effort": "Medium",
"benefits": [
{
"Environmental": "Clearly understanding a system's components can help a product team construct a plan to reduce emissions, especially from third-party services in an organization's supply chain.",
"Privacy": "Teams can better prioritize data privacy when they clearly understand a system's components, especially if they can identify potential risks to data protection.",
"Social Equity": "Teams can better prioritize social equity when they clearly understand a system's components. They must pay special attention to considerations from underrepresented groups, as these variables may not be well understood or covered in existing best practices.",
"Accessibility": "Teams can better prioritize accessibility when they clearly understand the components of a system. This is because they will understand their target audience and can identify improvements to make beyond basic inclusive design practices which could provide a well-rounded experience."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Medium",
"water": "Medium",
"emissions": "Medium"
}
],
"example": [
{
"content": "A Systemic Design [Toolkit](https://oasahk.glueup.com/resources/protected/organization/1649/event/40184/d8b58bf3-c7bb-4662-b3c6-5b6f49318961.pdf) (PDF)."
}
],
"resources": [
{
"[AFNOR] Spec 5.1.6 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315",
"Are my third parties green?": "https://aremythirdpartiesgreen.com/",
"ATOS Ecobranding Report (PDF)": "https://atos.net/wp-content/uploads/2021/07/atos-ecobranding-report.pdf",
"Digital Eco-Design: Assess and measure": "https://eco-conception.designersethiques.org/guide/en/content/2-evaluate.html",
"[GR491] 7-3047 - Systemic Approach": "https://gr491.isit-europe.org/en/crit.php?id=7-3047-uxui-starting-a-project-without-taking-into-account",
"IBM Design For Sustainability (PDF)": "https://www.ibm.com/design/practices/design-for-sustainability/",
"Learn Performance": "https://web.dev/learn/performance?hl=en",
"Nachhaltige Websites? (German)": "https://www.websiteboosting.com/magazin/75/nachhaltige-websites-wie-wir-alle-mehr-fuer-die-umwelt-tun-koennen.html",
"Opquast Web Quality Assurance Checklist (PDF)": "https://checklists.opquast.com/en/web-quality-assurance/download/",
"Reduce the weight of a web page: which elements have the greatest impact?": "https://greenspector.com/en/reduce-the-weight-of-a-web-page-which-elements-have-the-greatest-impact/",
"Scope 3 Emissions in Your Digital Supply Chain": "https://www.mightybytes.com/blog/scope-3-emissions-in-your-digital-supply-chain/",
"The Fog of Enactment": "https://www.thegreenwebfoundation.org/publications/report-fog-of-enactment/",
"Variables of Web Sustainability (PDF)": "https://websitesustainability.com/cache/files/variables.pdf",
"Why your internet habits are not as clean as you think": "https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think"
}
],
"tags": ["Social Equity", "Accessibility", "Ideation", "Research", "Compatibility", "Performance", "Hardware", "Software", "Networking", "Reporting"]
},
{
"id": "2",
"url": "https://w3c.github.io/sustyweb/#assess-and-research-visitor-needs",
"guideline": "Assess and Research Visitor Needs",
"description": "When creating a product or service, identifying your target audience through user-research, analytics, data collected using ethical anonymous methods, or feedback from and with visitors is important in being able to create a customized service for and with them that is tailor-made for their specific preferences, adapted for any needs they may have, and particularly useful in helping a website or application evolve its service to meet sustainability targets.",
"criteria": [
{
"title": "Identify And Define",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX02-1)",
"description": "Primary and secondary target visitors are identified, and their needs are defined through quantitative or qualitative research, testing, or analytics, ensuring your visitors and affected communities remain a close part of the research and testing process."
},
{
"title": "Visitor Constraints",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX02-2)",
"description": "Potential visitor constraints like the device age, operating system version, browser, and connection speeds are considered when designing user-experiences."
},
{
"title": "Barriers And Access",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX02-3)",
"description": "The team has researched and identified whether a technical, material, or human constraint might require an adapted version of the product or service that reduces barriers or improves access to content."
},
{
"title": "Barrier Removal",
"testable": "Human Testable",
"description": "In the user-research, identify with your visitors if some barriers should be removed (pain points or dark / deceptive design patterns)."
},
{
"title": "Seat At The Table",
"testable": "Human Testable",
"description": "When undertaking research, identifying needs, or conducting iterative design work, ensure that all stakeholders including your visitors have an equitable role in the decision-making process."
}
],
"impact": "Medium",
"effort": "High",
"benefits": [
{
"Environmental": "Undertaking analytics or research allows you to customize your product or service based on the needs of your visitor. The benefits of this are that emissions will be reduced due to an experience not making assumptions or developing unnecessary features (wasting resources), and being more specific about how you might reduce a product or service's environmental impact.",
"Privacy": "Assessing the needs of visitors will help you comply with privacy laws like GDPR, and anonymous analytics alongside test data can also be used to improve privacy.",
"Social Equity": "Improved user-experience often means products or services work better for visitors on older devices, in low-bandwidth environments, those with older devices, those in restrictive countries, those who speak different languages, and those with other potential barriers to accessing content. This reduces emissions as less e-waste will be produced if the need for newer equipment becomes less of a priority.",
"Accessibility": "Understanding the needs of your visitors through accessibility and trauma-informed research will help you prioritize which inclusive design improvements need to be implemented to enhance an already accessible product or service.",
"Performance": "Identifying what visitors require through research and analytics will reduce the potential for technical debt along the product's lifespan, which will help reduce emissions as developers will spend less time building a product with unnecessary features. It can also be used to identify bottlenecks in the user-experience that are causing visitor abandonment. Fixes can be measured and tested against each other, and the benefits of improvements can result in fewer emissions.",
"Economic": "Knowing your audience has financial benefits, as they are more likely to purchase your product or service if it meets their requirements. Quantitative data analysis can identify potential cost savings by reducing data payload sizes where optimizations can be made.",
"Conversion": "If a product matches an audience's requirements, they will be likely to use it regularly and this will increase its popularity and gain trust, word of mouth, and social standing."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Medium",
"water": "Medium",
"emissions": "Medium"
}
],
"example": [
{
"content": "A User-research [plan with a template](https://maze.co/guides/ux-research/plan/). Plus some additional [interview](https://savranska.medium.com/the-complete-guide-to-user-interviews-87bd783a4448) templates. Also a user-experience return-on-investment [calculator](https://humanfactors.com/thinking-favorite.aspx)."
}
],
"resources": [
{
"5 Privacy focused analytics providers": "https://geekflare.com/privacy-focused-site-analytics/",
"6 Powerful User Research Methods to Boost Hypothesis Validation": "https://uxplanet.org/6-powerful-user-research-methods-to-boost-hypothesis-validation-58c491461075",
"9 bogus reasons why some designers claim UX Research is a waste": "https://uxdesign.cc/9-bogus-reasons-why-some-designers-claim-ux-research-is-a-waste-5ddf3d030851",
"[AFNOR] Spec 5.1.1 & 5.1.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315",
"Design Justice Network Principles": "https://designjustice.org/read-the-principles",
"Deceptive Patterns": "https://www.deceptive.design/",
"Digital Eco-Design: Define the must haves and eliminate the non-essential": "https://eco-conception.designersethiques.org/guide/en/content/1-define-need.html",
"[GR491] 3-3024 - Target Versions of Devices, OS and Browsers": "https://gr491.isit-europe.org/en/crit.php?id=3-3024-uxui-the-business-line-the-users-profile-allows",
"[GR491] 6-3039 - Software or Hardware Configurations": "https://gr491.isit-europe.org/en/crit.php?id=6-3039-uxui-users-equipement-is-increasingly-more-efficient-and",
"GreenIT (French) 002 - Quantifier précisément le besoin": "https://github.com/cnumr/best-practices/blob/main/chapters/BP_002_fr.md",
"How can we design sustainably?": "https://medium.com/@sandra.pallier/how-can-we-design-sustainably-3be7530a0f5b",
"IBM Design For Sustainability (PDF)": "https://www.ibm.com/design/practices/design-for-sustainability/",
"Keys To An Accessibility Mindset": "https://www.smashingmagazine.com/2023/02/keys-accessibility-mindset/",
"Make the sustainable thing the best thing, by design": "https://medium.com/wearesnook/make-the-sustainable-thing-the-best-thing-by-design-e38da7bd7768",
"Metrics to measure the ROI of web accessibility": "https://uxdesign.cc/top-10-metrics-to-measure-the-roi-of-web-accessibility-f9ddd697896a",
"Precisely specify the need": "http://www.ecometer.org/rules/precisely-specify-the-need.html",
"[RGESN] (French) 1.2 - User Targets": "https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/critere/1.2/",
"[RGESN] (French) 1.4 - Hardware Profiles": "https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/critere/1.4/",
"Shaping Europe's digital future": "https://commission.europa.eu/strategy-and-policy/priorities-2019-2024/europe-fit-digital-age/shaping-europes-digital-future_en",
"Six Dark Patterns to Avoid On Your Website": "https://www.mightybytes.com/blog/6-dark-patterns-to-avoid-on-your-website/",
"The UX Cookbook": "https://theuxcookbook.com/",
"UX: Best Practices For Developers": "https://blog.openreplay.com/ux-best-practices-for-developers/"
}
],
"tags": ["Social Equity", "Accessibility", "UI", "Patterns", "Ideation", "Research", "Usability", "Compatibility", "Reporting", "KPIs"]
},
{
"id": "3",
"url": "https://w3c.github.io/sustyweb/#research-non-visitor-s-needs",
"guideline": "Research Non-Visitor's Needs",
"description": "If you provide physical goods or services, you may also have to account for the sustainability impact of delivery services. This can often be tricky, but courier companies may provide useful tooling to help you identify emissions data for routing.",
"criteria": [
{
"title": "Non-Human Impact",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX03-1)",
"description": "Consider and work with non-users and other stakeholders who might be passively impacted by a digital product or service, such as neighbors accepting parcels, traffic jams due to deliveries, etc. Research their needs and understand how they might be affected."
}
],
"impact": "Medium",
"effort": "Medium",
"benefits": [
{
"Environmental": "To the extent that they can be planned for up-front through verifiable research practices, interventions such as planning with suppliers can potentially significantly reduce the environmental impact of a digital product or service.",
"Social Equity": "By including other potentially marginalized groups as part of the research process, product teams can potentially head off unintended consequences or requirements these groups may have before they occur.",
"Accessibility": "By including people who might not be primary or secondary users, such as people with disabilities who may be specifically impacted by the need for such services; as key stakeholders in research, this community's specific needs can be better addressed.",
"Economic": "Up-front research on a product or service's entire ecosystem, including the wider aspects like indirect services will help organizations more effectively manage project budgets."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Medium",
"water": "Medium",
"emissions": "Medium"
}
],
"example": [
{
"content": "Physical goods carbon footprint and emissions [calculator](https://www.2030calculator.com/)."
}
],
"resources": [
{
"Digitalisation and Energy": "https://www.iea.org/reports/digitalisation-and-energy",
"Foundations of Humane Technology": "https://www.humanetech.com/course",
"IBM Design For Sustainability (PDF)": "https://www.ibm.com/design/practices/design-for-sustainability/",
"Stakeholder Mapping": "https://www.mightybytes.com/blog/stakeholder-mapping/",
"Sustainability Guide: Distribution": "https://sustainabilityguide.eu/ecodesign/distribution/",
"Sustainability Guide: Manufacturing": "https://sustainabilityguide.eu/ecodesign/manufacturing/",
"The power of good design": "https://www.vitsoe.com/rw/about/good-design"
}
],
"tags": ["Social Equity", "Ideation", "Research", "Usability", "Hardware", "E-Waste", "Reporting", "KPIs", "Marketing"]
},
{
"id": "4",
"url": "https://w3c.github.io/sustyweb/#consider-sustainability-in-early-ideation",
"guideline": "Consider Sustainability in Early Ideation",
"description": "While some things require the use of electricity, during the early ideation phase you could consider wireframing or rapid prototyping (using paper) among other offline tools to reduce energy consumption. Even the electronic versions of these may have a lower carbon cost than committing to building a full-blown experience for each idea.",
"criteria": [
{
"title": "Wireframes And Prototypes",
"testable": "Human Testable",
"description": "Utilize wireframes, and rapid prototyping to quickly build consensus, reduce risk, and lower the number of resources needed to build features."
},
{
"title": "Participation And Testing",
"testable": "Human Testable",
"description": "Involve your users within the iteration and design process using participatory design, and when conducting user-testing reach out to your community to help improve your product by allowing them to apply their knowledge and experience to your product or service."
}
],
"impact": "Low",
"effort": "Low",
"benefits": [
{
"Environmental": "Incorporating wireframes, prototypes, and user-testing into early product design cycles improves environmental impact by helping product teams build only the features visitors want. This reduces resource use and lowers emissions.",
"Economic": "Early rough ideation can improve financial performance, since organizations won't waste time and money building features people don't use.",
"Conversion": "Tested user-interfaces often improve conversion rates as they have been optimized to remove confusing aspects of the layout that cause friction and arrange content to optimize the fastest user flow (which can help emissions)."
}
],
"GRI": [
{
"materials": "Low",
"energy": "Low",
"water": "Low",
"emissions": "Low"
}
],
"example": [
{
"content": "A website wireframe [example](https://cdn-proxy.slickplan.com/wp-content/uploads/2019/03/hand-drawn-wireframe-1024x683.jpeg) from SlickPlan."
}
],
"resources": [
{
"An introduction to radical participatory design": "https://www.cambridge.org/core/journals/design-science/article/an-introduction-to-radical-participatory-design-decolonising-participatory-design-processes/63F70ECC408844D3CD6C1A5AC7D35F4D",
"How Wireframes and Rapid Prototypes Improve Digital Projects": "https://www.mightybytes.com/blog/wireframes-and-prototypes-for-websites/",
"Importance of Wireframing & Prototyping in Web Design": "https://www.loop-digital.co.uk/the-importance-of-wireframing-prototyping-in-web-design/",
"L'idéation au service de l'éco-conception #1 : La méthode C.O.E.U.R. (French)": "https://www.lunaweb.fr/actualites/blog/atelier-ideation-eco-conception/",
"Rapid prototyping can be key to creating more sustainable products": "https://www.imeche.org/news/news-article/rapid-prototyping-can-be-key-to-creating-more-sustainable-products",
"Sustainable UX design": "https://blog.adobe.com/en/publish/2021/09/24/sustainable-ux-design-what-is-it-and-how-can-it-benefit-your-organization",
"The Design Process": "https://sustainabilityguide.eu/methods/the-design-process/"
}
],
"tags": ["UI", "Ideation", "Research", "Software", "Strategy"]
},
{
"id": "5",
"url": "https://w3c.github.io/sustyweb/#account-for-stakeholder-issues",
"guideline": "Account for Stakeholder Issues",
"description": "Brainstorming allows you to flush out ideas before you commit to pursuing a path. Being considerate of not just your visitors but other individuals who may be affected by your product or service (including non-humans, like the environment!) is a useful practical exercise as it may influence your decisions in how you scope your project.",
"criteria": [
{
"title": "Human-Centered Brainstorming",
"testable": "Human Testable",
"description": "In the brainstorming process, consider all stakeholders using a human-centered approach."
},
{
"title": "Ecological Brainstorming",
"testable": "Human Testable",
"description": "In the brainstorming process, take the planetary needs and ecological boundaries into account."
}
],
"impact": "Medium",
"effort": "Medium",
"benefits": [
{
"Environmental": "By helping key project stakeholders better understand the ecological impact of a potential digital product or service, its environmental impact can be identified and reduced throughout its lifecycle.",
"Social Equity": "For other potentially marginalized groups, such as those who speak different languages, live in low-bandwidth areas, use older devices, have other barriers to accessing information, and so on, accounting for their needs early in the process will reduce the need for costly redesigns to accompany their requirements later on due to demand (or producing specialist alternative sites to cope with their functionality).",
"Accessibility": "By understanding the accessibility communities' requirements in the early stages of a digital project, inclusive design can be prioritized throughout the product or service life-cycle, which will lead to efficiency savings in developer time (due to not having to retrofit accessibility) and fewer emissions from the patching process."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Medium",
"water": "Medium",
"emissions": "Medium"
}
],
"example": [
{
"content": "A product brainstorming guide / [framework](https://www.smashingmagazine.com/2016/06/a-framework-for-brainstorming-products/)."
}
],
"resources": [
{
"[GR491] 1-3002 - Brain Storming": "https://gr491.isit-europe.org/en/crit.php?id=1-3002-uxui-putting-the-user-at-the-center-of",
"[GR491] 1-3003 - Planet Centric Design": "https://gr491.isit-europe.org/en/crit.php?id=1-3003-uxui-every-design-decision-has-an-impact.-if",
"Planetary Boundaries": "https://sustainabilityguide.eu/sustainability/planetary-boundaries/",
"Sustainable UX is more than reducing your website's footprint": "https://uxdesign.cc/sustainable-ux-and-ui-design-is-more-than-reducing-your-website-s-footprint-a99c336c151f",
"Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2022/sustainability"
}
],
"tags": ["Social Equity", "Accessibility", "Ideation", "Research", "Strategy", "KPIs"]
},
{
"id": "6",
"url": "https://w3c.github.io/sustyweb/#create-a-frictionless-lightweight-experience-by-default",
"guideline": "Create a Frictionless Lightweight Experience by Default",
"description": "When providing the option to download, save, print, or access anything online, defaulting to the most lightweight, least featureful version will reduce emissions through passive browsing; with non-essential information removed from the screen either to be shown when it's required or eliminated.",
"criteria": [
{
"title": "Efficient Paths",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX06-1)",
"description": "The path taken to access the service (the initial contact with the website or service) should be as efficient and as simple as possible (time required to complete an action displayed, reducing too much choice, ensuring visitors know what's required at the start of a complex set of steps, etc)."
},
{
"title": "Patterns For Efficiency",
"testable": "Human Testable",
"description": "Make your user-journey (when browsing an accessed website or service) as smooth as possible. User-research is key, as is building on established design patterns that people already understand."
},
{
"title": "Distraction-Free Design",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX06-3)",
"description": "Visitors can complete tasks without distractions or non-essential features getting in the way."
},
{
"title": "Eliminate The Non-Essential",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX06-4)",
"description": "Visitors see only information that is relevant to their experience, without non-essential information being displayed on the screen."
},
{
"title": "User-Initiated Actionable Content",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX06-5)",
"description": "Ensure that actionable information such as pop-up or modal windows can only be initiated by the visitor."
}
],
"impact": "Medium",
"effort": "Medium",
"benefits": [
{
"Environmental": "Streamlining a user-experience to remove barriers and non-essential items (which eliminates waste from code and content) reduces the amount of time visitors spend on their devices trying to complete tasks or find information. This reduces the amount of energy used and lowers emissions.",
"Privacy": "Collecting less information by hiding non-essential features will be beneficial for data protection as you can reduce how much information is presented to the visitor and, in turn, how much is exposed to a minimum (if any is needed during the experience).",
"Social Equity": "Lightweight experiences work better for people with older devices, those who live in low-bandwidth environments, and so on. The benefits for lower-powered devices are that fewer emissions will be generated, as the device's reduced capabilities will often have lower energy requirements.",
"Accessibility": "Intuitive, lightweight user-experiences that are easy to understand improve accessibility, especially for people with cognitive disabilities, and will benefit sustainability in terms of less confusion which could impact the time spent on websites trying to find content.",
"Performance": "Displaying less information on the screen by reducing the amount of content until it is necessary will naturally reduce bandwidth consumption over the lifecycle of a product or service, and may make an experience feel faster.",
"Economic": "Lower data payloads resulting from reducing visitor choices and simplifying an interface by reducing the amount of information can help reduce the burden of choice and convince visitors during the decision-to-purchase process.",
"Conversion": "Busy websites with too much information laid out haphazardly will lead to confusion and abandonment. Following conventions and patterns with a clean, distraction-free layout will reduce churn, page abandonment, and barriers to entry."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Medium",
"water": "Medium",
"emissions": "Medium"
}
],
"example": [
{
"content": "The example shown for this airline check-in page shows how [performance by default](https://hidde.blog/the-web-is-fast-by-default-lets-keep-it-fast/) can benefit visitors."
}
],
"resources": [
{
"[AFNOR] Spec 5.2.1 and 5.2.2 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315",
"Customer Experience Mapping": "https://www.startupgrind.com/blog/customer-experience-mapping-what-is-it-and-how-to-do-it/",
"Design patterns": "https://ui-patterns.com/patterns",
"Design Principles": "https://principles.design/",
"Digital Eco-Design: Default options": "https://eco-conception.designersethiques.org/guide/en/content/5-9-options.html",
"Digital Eco-Design: Define the must haves and eliminate the non-essential": "https://eco-conception.designersethiques.org/guide/en/content/1-define-need.html",
"[GR491] 2-7033 - Lighter Framework / Library": "https://gr491.isit-europe.org/en/crit.php?id=2-7033-backend-for-an-equal-functional-scope-several-technical",
"[GR491] 4-5030 - Older Equipment or Limited Network Access": "https://gr491.isit-europe.org/en/crit.php?id=4-5030-frontend-the-more-components-the-service-implements-that",
"[GR491] 7-3052 - Quick And Simple": "https://gr491.isit-europe.org/en/crit.php?id=7-3052-uxui-there-are-several-scenarios-for-accessing-the",
"[GR491] 9-3063 - Useful to the User": "https://gr491.isit-europe.org/en/crit.php?id=9-3063-uxui-the-efficient-use-of-a-digital-service",
"GreenIT (French) 001 - Éliminer les fonctionnalités non essentielles": "https://github.com/cnumr/best-practices/blob/main/chapters/BP_001_fr.md",
"GreenIT (French) 003 - Optimiser le parcours utilisateur": "https://github.com/cnumr/best-practices/blob/main/chapters/BP_003_fr.md",
"How can we design sustainably?": "https://medium.com/@sandra.pallier/how-can-we-design-sustainably-3be7530a0f5b",
"How to Become an Eco Web Designer": "https://onextrapixel.com/how-to-become-an-eco-web-designer/",
"Improve the process flow": "http://www.ecometer.org/rules/improve-the-process-flow.html",
"Laws Of UX": "https://lawsofux.com/",
"Microsoft Green Design Principles (PDF)": "https://wxcteam.microsoft.com/download/Microsoft-Green-Design-Principles.pdf",
"OpQuast 29 - A product or service can be purchased without creating an account.": "https://checklists.opquast.com/en/web-quality-assurance/a-product-or-service-can-be-purchased-without-creating-an-account",
"OpQuast 33 - Product availability is indicated before final validation of the order.": "https://checklists.opquast.com/en/web-quality-assurance/product-availability-is-shown-before-final-order-placement",
"OpQuast 84 - The user is alerted at the beginning of a complex process to the nature of the required data and document.": "https://checklists.opquast.com/en/web-quality-assurance/the-user-is-alerted-at-the-beginning-of-a-complex-process-to-the-nature-of-the-data-required",
"OpQuast 149 - Navigating the website does not open any pop-up windows.": "https://checklists.opquast.com/en/web-quality-assurance/navigating-the-website-does-not-open-any-pop-up-windows",
"Paradox of Choice: Why Less is More in UX Design": "https://thedecisionlab.com/reference-guide/economics/the-paradox-of-choice",
"Patterns": "https://web.dev/patterns?hl=en",
"Patterns.dev": "https://www.patterns.dev/",
"Remove non-essential features": "http://www.ecometer.org/rules/remove-non-essential-features.html",
"[RGESN] (French) 4.4 - Optimized Navigation": "https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/critere/4.4/",
"Sustainable UX is more than reducing your website's footprint": "https://uxdesign.cc/sustainable-ux-and-ui-design-is-more-than-reducing-your-website-s-footprint-a99c336c151f",
"UI Tools": "https://designsustainably.eu/uitools/",
"Using UX Design to Build a Sustainable Future": "https://uxmag.com/articles/using-ux-design-to-build-a-sustainable-future",
"UX: Best Practices For Developers": "https://blog.openreplay.com/ux-best-practices-for-developers/",
"Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2022/sustainability",
"What is a Customer Journey Map?": "https://www.mightybytes.com/blog/customer-journey-map-template-download/"
}
],
"tags": ["Social Equity", "Content", "UI", "Patterns", "Usability", "Performance"]
},
{
"id": "7",
"url": "https://w3c.github.io/sustyweb/#avoid-unnecessary-or-an-overabundance-of-assets",
"guideline": "Avoid Unnecessary or an Overabundance of Assets",
"description": "It's great to have a pretty-looking website or application but to ensure a sustainable design, it's important to avoid cluttering up the interface with too many visuals (which aren't necessary to the content). Keeping a clean design will reduce website rendering, and thereby emissions.",
"criteria": [
{
"title": "Decorative Design",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX07-1)",
"description": "Decorative design is used only when it improves the user-experience, and unnecessary assets or ones that fail to benefit the visitor or sustainability are removed (or rendered optional and disabled by default)."
}
],
"impact": "High",
"effort": "Medium",
"benefits": [
{
"Environmental": "Using fewer typefaces will reduce the page size and use fewer resources to render the new font on the visitor's machine for that page's instance (saving DOM rendering cycles).",
"Social Equity": "Bloat costs bandwidth, slimming down the web matters to remain inclusive.",
"Accessibility": "Decorative design can be intrusive (if marked up incorrectly) or distracting.",
"Performance": "HTTP requests can be reduced both with fewer fonts and by creating CSS / SVG sprites if the images are unlikely to change.",
"Conversion": "A page with fewer heavy elements is more likely to load within 3 seconds."
}
],
"GRI": [
{
"materials": "High",
"energy": "High",
"water": "High",
"emissions": "High"
}
],
"example": [
{
"code": "@font-face {\r\n\tfont-family: \"Trickster\";\r\n\tsrc: local(\"Trickster\"),\r\n\t\turl(\"trickster-COLRv1.otf\") format(\"opentype\") tech(color-COLRv1), url(\"trickster-outline.otf\")\r\n\t\tformat(\"opentype\"), url(\"trickster-outline.woff\") format(\"woff\");\r\n}",
"content": "This is an example of an external web asset (a custom typeface). Too many of these can be detrimental to the performance of a website or application due to their need to be rendered (through CPU cycles) to the screen on every element in which they are used, which is bad news for sustainability! [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)."
}
],
"resources": [
{
"Best practices for fonts": "https://web.dev/articles/font-best-practices?hl=en",
"Decorative Images": "https://www.w3.org/WAI/tutorials/images/decorative/",
"Implementing image sprites in CSS": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS",
"Less Data Doesn't Mean a Lesser Experience": "https://timkadlec.com/remembers/2019-08-30-less-data-doesnt-mean-a-lesser-experience/",
"Less is more: How stripping back can improve UX Design": "https://www.uxdesigninstitute.com/blog/improve-ux-design/",
"Mobile website Load Time Statistics": "https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-site-load-time-statistics/",
"Reduce Redundancy": "https://www.nngroup.com/articles/reduce-redundancydecrease-duplicated-design-decisions/",
"Reduce The Number Of Images": "https://www.giftofspeed.com/minimize-images/",
"Reducing Cognitive Overload": "https://www.lionandmason.com/ux-blog/reducing-cognitive-overload-declutter-your-design-for-better-ux/",
"Simple icon systems using SVG sprites": "https://oliverjam.es/articles/svg-sprites",
"Simplify Your UX Through Reduction": "https://www.uxmatters.com/mt/archives/2015/07/simplify-your-ux-through-reduction.php",
"The Website Obesity Crisis": "https://idlewords.com/talks/website_obesity.htm",
"Use fewer web fonts": "https://web.dev/articles/font-best-practices?hl=en"
}
],
"tags": ["UI", "Usability", "Assets", "Performance"]
},
{
"id": "8",
"url": "https://w3c.github.io/sustyweb/#ensure-navigation-and-way-finding-are-well-structured",
"guideline": "Ensure Navigation and Way-Finding Are Well-Structured",
"description": "Information architecture is a central part of the Web development process, and how you structure a website ensures that people can way-find your content easily. Having appropriately marked-up links within your product or service allows visitors, search engines, and social networks to identify key information quickly.",
"criteria": [
{
"title": "Navigation And Search",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX08-1)",
"description": "Provide an accessible, easy-to-use navigation menu with search features that help visitors easily find what they need."
},
{
"title": "Navigable Sitemaps",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX08-2)",
"description": "Implementing an efficient (human-readable) sitemap that is organized and regularly updated helps search engines better index website content, which helps visitors more quickly find what they are looking for."
},
{
"title": "New Content",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX08-3)",
"description": "Provide a way for visitors to find out about new content and services."
}
],
"impact": "Low",
"effort": "Low",
"benefits": [
{
"Environmental": "Efficient navigation with intuitive search features means visitors spend less time and energy finding what they require and accomplishing tasks. This also lowers emissions.",
"Accessibility": "Accessible navigation improves the user-experience for people with disabilities. Being able to find the correct pages quickly also helps to reduce data wastage.",
"Performance": "Efficient website structure has an impact on performance in that people can more quickly find what they require. This doesn't necessarily mean pages or assets load faster, but if appropriate way-finding mechanisms are in place, less time on-screen can result, which is beneficial for emissions.",
"Economic": "If visitors more quickly find what they need, this could potentially reduce hosting costs if those are based on data transfer.",
"Conversion": "Good website structure and navigation can also improve conversion rates if more people find what they require. This could also be true if visitors are alerted to new content they have expressed interest in."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Low",
"water": "Medium",
"emissions": "Low"
}
],
"example": [
{
"content": "[Information Architecture](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f1bf345c-c79c-45e8-9d46-416d1e5ff0cb/ia-big-picture-sitemap.png) of a Website Sitemap."
}
],
"resources": [
{
"An Excellent Beginner's Guide to Information Architecture": "https://careerfoundry.com/en/blog/ux-design/a-beginners-guide-to-information-architecture/",
"Build and submit a sitemap": "https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=en",
"Building Accessible Menu Systems": "https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/",
"Digital Eco-Design: Eco-Conception: Content": "https://eco-conception.designersethiques.org/guide/en/content/5-6-content.html",
"Find And Add Your Sitemap": "https://accessibleweb.com/user-guide/finding-and-adding-your-sitemap/",
"GreenIT (French) 4008 - Mettre en place un sitemap efficient": "https://github.com/cnumr/best-practices/blob/main/chapters/BP_4008_fr.md",
"How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change",
"Menus Tutorial": "https://www.w3.org/WAI/tutorials/menus/",
"OpQuast 1 - The website provides a way for users to find out about new content and services.": "https://checklists.opquast.com/en/web-quality-assurance/the-site-provides-users-with-a-way-to-know-about-new-contents-and-services",
"OpQuast 213 - The website provides a sitemap file listing the content to be crawled.": "https://checklists.opquast.com/en/web-quality-assurance/the-website-provides-a-sitemap-file-listing-the-content-to-be-crawled",
"UX: Best Practices For Developers": "https://blog.openreplay.com/ux-best-practices-for-developers/"
}
],
"tags": ["Accessibility", "UI", "Usability", "HTML", "Marketing"]
},
{
"id": "9",
"url": "https://w3c.github.io/sustyweb/#respect-the-visitor-s-attention",
"guideline": "Respect the Visitor's Attention",
"description": "Time is precious, wasting a visitor's will cause frustration and lead to abandonment or resentment. Additionally, the more time a visitor spends in front of a screen, the more energy they utilize. As such, throwing stuff in front of the visitor vying for their attention might sound like good business (even though we know due to banner blindness it rarely works), but it mostly damages the environment and dissuades the visitor.",
"criteria": [
{
"title": "Respecting Attention",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX09-1)",
"description": "Respect a visitor's attention by allowing them to easily control how (and when) they receive information."
},
{
"title": "Avoid Distraction",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX09-2)",
"description": "Prioritize features that don't distract people or unnecessarily lengthen the time they spend using the product or service."
},
{
"title": "Avoid Attention-keeping",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX09-3)",
"description": "Avoid using infinite scroll or related attention-keeping tactics."
}
],
"impact": "Medium",
"effort": "Low",
"benefits": [
{
"Environmental": "Using pagination rather than infinite scrolling allows individuals to request data on demand rather than encouraging overconsumption, thereby reducing their carbon impact by way of using psychology to encourage healthy (and sustainable) browsing habits.",
"Transparency": "Being open and honest with visitors about their experience and avoiding moving their attention in negative ways will lead to greater trust and the potential for repeat custom.",
"Social Equity": "By avoiding dark and deceptive patterns and ensuring that the visitor's attention is focused on achieving their aims, you reduce the potential for confusion, mistakes, and lapses in judgment which could lead to consequences for them and the trust they have in your business down the road.",
"Accessibility": "Being aware of accessibility barriers and accounting for them within your processes will allow you to reduce barriers to access and prioritize the availability of information for visitors who may access information using different tooling (such as assistive technology like a screen reader). In doing so you can reduce the additional emissions produced by accessibility tools as visitors can find what they want quicker, and fewer mistakes are likely to be made during a session.",
"Performance": "Certain attention-seeking features like notification requests or cookie banners can detract from visitor performance, as time is spent by consumers navigating through methods to close or hide the annoyances. Finding better ways of presenting the information will make an experience feel faster and reduce the barriers to access which trigger a block in the user-flow.",
"Economic": "Organizations that monetize visitor attention strive to keep it as long as possible, therefore increasing their product or service's environmental impact. Conversely, organizations that strive to streamline interactions while still meeting visitor's needs (and their own business goals) measurably reduce their product or service's environmental impact, and potentially reach new audiences."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Medium",
"water": "Medium",
"emissions": "Medium"
}
],
"example": [
{
"content": "[Community guidelines](https://www.thinkific.com/blog/how-to-create-community-guidelines-examples-template/) can help foster a safe, conflict-free environment. Here is also an example of an attention manipulation tactic to be avoided."
}
],
"resources": [
{
"4 practices for eco-friendly online purchase journeys": "https://www.bunnyfoot.com/2023/09/sustainable-ux-4-practices-for-eco-friendly-online-purchase-journeys/",
"Deceptive Patterns": "https://www.deceptive.design/",
"Design Justice Network Principles": "https://designjustice.org/read-the-principles",
"Digital Eco-Design: Interactions": "https://eco-conception.designersethiques.org/guide/en/content/5-7-interaction.html",
"Design for Sustainable Behaviour": "https://sustainabilityguide.eu/methods/design-sustainable-behaviour/",
"[GR491] 8-5057 - Attention Capturing": "https://gr491.isit-europe.org/en/crit.php?id=8-5057-frontend-the-attention-of-the-user-is-a",
"[GR491] 10-3072 - Respect for the User": "https://gr491.isit-europe.org/en/crit.php?id=10-3072-uxui-addictions-some-services-are-designed-to-create",
"[GR491] 10-3074 - Attention Control": "https://gr491.isit-europe.org/en/crit.php?id=10-3074-uxui-the--users-attention-is-an-asset",
"GreenIT (French) 4035 - Préférer la pagination au défilement infini": "https://github.com/cnumr/best-practices/blob/main/chapters/BP_4035_fr.md",
"Humane By Design": "https://humanebydesign.com/principles",
"Laws Of UX": "https://lawsofux.com/",
"Microsoft Green Design Principles (PDF)": "https://wxcteam.microsoft.com/download/Microsoft-Green-Design-Principles.pdf",
"Psychology of Design": "https://growth.design/psychology",
"[RGESN] (French) 4.3 - Infinate Scrolling": "https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/critere/4.3/",
"Society Centered Design": "https://societycentered.design/",
"Social sustainability": "https://sustainabilityguide.eu/sustainability/social-sustainability/",
"The Potentially Dangerous Non-Accessibility Of Cookie Notices": "https://www.smashingmagazine.com/2023/04/potentially-dangerous-non-accessibility-cookie-notices/",
"The snake that eats its tail": "https://uxdesign.cc/the-snake-that-eats-its-tail-3656b31fd0f9"
}
],
"tags": ["UI", "Patterns", "Usability", "Assets"]
},
{
"id": "10",
"url": "https://w3c.github.io/sustyweb/#use-recognized-design-patterns",
"guideline": "Use Recognized Design Patterns",
"description": "Visitors can identify patterns fairly easily, and they like browsing websites and apps and feeling as if they know what they are dealing with. As such, focusing your efforts on producing a product or service that is clean and has key components in easy-to-recognize locations (and visuals) will allow faster user-experiences and fewer emissions.",
"criteria": [
{
"title": "Design Patterns",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX10-1)",
"description": "Provide only essential components visible at the time they are needed. Where appropriate, interfaces should deploy visual styles (patterns) that are easily recognized and used."
}
],
"impact": "Medium",
"effort": "Low",
"benefits": [
{
"Environmental": "Using easily recognized design components will reduce the amount of time visitors spend browsing between pages, trying to identify the information they came to your resource to locate. As such, the less time visitors spend on your site, the greater the efficiency savings in terms of emissions.",
"Accessibility": "Recognizable design patterns can help people with cognitive disabilities easily understand how to perform a task. Similarly, simple layouts often improve access to information as well.",
"Performance": "Using recognized patterns that appear where visitors expect, and only when they require them may increase the perceived speed of the website or application as navigation from point to point will increase due to the ease of use."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Low",
"water": "Medium",
"emissions": "Low"
}
],
"example": [
{
"content": "Clean, simple, [honest](https://lowwwcarbon.com/) website layout [examples](https://minimal.gallery/)."
}
],
"resources": [
{
"Choose a design that is simple, clear and tailored to the web": "http://www.ecometer.org/rules/choose-a-design-that-is-simple.html",
"Dark mode can save battery, but only if your device has an OLED screen": "https://www.businessinsider.com/guides/tech/does-dark-mode-save-battery?r=US&IR=T",
"Dark Mode Can Improve Text Readability — But Not for Everyone": "https://www.boia.org/blog/dark-mode-can-improve-text-readability-but-not-for-everyone",
"Design patterns": "https://ui-patterns.com/patterns",
"GreenIT (French) 005 - Favoriser un design simple, épuré, adapté au web": "https://github.com/cnumr/best-practices/blob/main/chapters/BP_005_fr.md",
"[GR491] 5-3029 - Visual Soberness": "https://gr491.isit-europe.org/en/crit.php?id=5-3029-uxui-visual-sound-and-tactile-elements-/-components",
"Google: Here's why dark mode massively extends your OLED phone's battery life": "https://www.zdnet.com/article/google-heres-why-dark-mode-massively-extends-your-oled-phones-battery-life/",
"How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change",
"Laws Of UX": "https://lawsofux.com/",
"Patterns": "https://web.dev/patterns?hl=en",
"Patterns.dev": "https://www.patterns.dev/",
"The dark side of green web design": "https://www.wholegraindigital.com/blog/dark-colour-web-design/"
}
],
"tags": ["UI", "Patterns", "Usability", "Assets", "CSS"]
},
{
"id": "11",
"url": "https://w3c.github.io/sustyweb/#avoid-manipulative-patterns",
"guideline": "Avoid Manipulative Patterns",
"description": "Manipulating the visitor into doing things you want them to is a short-term gain, long-term loss tactic tool. It's ethically bad, unsustainable, and should be avoided at all costs.",
"criteria": [
{
"title": "Dark and Deceptive Design Patterns",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX11-1)",
"description": "Avoid what are commonly known as dark patterns, deceptive design, or unethical coding techniques, which manipulate visitors into taking actions not necessarily in their best interest (anti-right click, no-copy, requiring an account to purchase, etc)."
},
{
"title": "Using Advertisements",
"testable": "Human Testable",
"description": "Advertisements and sponsorships are both ethical and clearly identified with the product or service, only presenting them when they provide real economic and ethical value and don't diminish a visitor's experience."
},
{
"title": "Page Tracking",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX11-3)",
"description": "Remove unused and unconsented page tracking."
},
{
"title": "Search Engine Optimization",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX11-4)",
"description": "Optimization for search engines, social networks, and third-party services should be organically led with good coding practices and user-experience being the focus, not manipulating the services to gain greater priority through obfuscating content, pages, websites, or applications with redundancy or non-useful and optimized (to the visitor) material."
}
],
"impact": "High",
"effort": "Medium",
"benefits": [
{
"Environmental": "Many deceptive design patterns have visitors wasting time and energy trying to undo choices they never intended to make. Avoiding them therefore reduces energy use.",
"Privacy": "Many deceptive patterns are intentionally designed to undermine data privacy. Ensuring you comply with ethical privacy practices and avoiding such patterns will avoid potential legal conflicts. You also reduce additional data being sent among the providers of tracking and advertising data.",
"Accessibility": "Dark and deceptive design patterns often intentionally block or hide access to information, which especially undermines the experience of people with disabilities who use assistive technologies. By avoiding them, you will give those with accessibility needs justification to trust your brand. Furthermore, avoiding unsustainable or carbon-intensive implementations will prevent making any existing situations worse.",
"Performance": "Interference with the user-interface (such as removing the ability to copy text) causes friction and forces the visitor to spend more time on the page to work around the barrier put in place. This uses additional energy as they try to find a solution onsite, elsewhere, or give up entirely. Using ethical, non-disruptive coding practices will speed up interactions within your website.",
"Economic": "Ethical websites incentivize customers to whitelist your website on ad blockers.",
"Conversion": "Avoiding dark and deceptive patterns will likely result in fewer complaints. A classic example of this is the use of CAPTCHAs which can disrupt the visitor, cause accessibility barriers, and reduce the legitimate use of your product or service."
}
],
"GRI": [
{
"materials": "Low",
"energy": "Low",
"water": "Low",
"emissions": "Low"
}
],
"example": [
{
"content": "[Examples](https://www.netsolutions.com/insights/dark-patterns-in-ux-disadvantages/) of dark patterns to be avoided."
}
],
"resources": [
{
"48 Cart Abandonment Rate Statistics 2023": "https://baymard.com/lists/cart-abandonment-rate",
"Biased By Design": "https://biasedbydesign.com/",
"Climate change SEO survey": "https://searchengineland.com/climate-change-seo-survey-making-web-more-sustainable-438209",
"Dark pattern": "https://en.wikipedia.org/wiki/Dark_pattern",
"Dark patterns in UX: how designers should be responsible for their actions": "https://uxdesign.cc/dark-patterns-in-ux-design-7009a83b233c",
"Dealing with Ads in 2020": "https://schepp.dev/posts/ad-integration-in-2020/",
"Deceptive Patterns": "https://www.deceptive.design/",
"Design Justice Network Principles": "https://designjustice.org/read-the-principles",
"Digital sustainability audits: a de facto standard for the Internet carbon footprint": "https://www.researchgate.net/publication/343041330_Digital_sustainability_audits_a_de_facto_standard_for_the_Internet_carbon_footprint",
"Effectively loading ads without impacting page speed": "https://web.dev/articles/loading-ads-page-speed?hl=en",
"Fair Patterns": "https://fairpatterns.com/",
"Fastest Ad Blocker: 13 Best We Tested for Performance in 2023": "https://whatsoftware.com/10-ad-blocking-extensions-tested-for-best-performance/view-all/",
"[GR491] 10-3070 - Dark Patterns": "https://gr491.isit-europe.org/en/crit.php?id=10-3070-uxui-some-services-are-designed-to-create-some",
"[GR491] 10-3073 - Advertisements": "https://gr491.isit-europe.org/en/crit.php?id=10-3073-uxui-targeted-or-untargeted-advertising-can-be-an",
"Guide to using analytics for performance and privacy": "https://www.wholegraindigital.com/blog/guide-to-using-analytics-for-performance-and-privacy/",
"How to Build a Low-tech Website?": "https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low-tech-website/",
"How to Win More Customers by Reducing User Friction": "https://hockeystack.com/blog/reducing-user-friction/",
"How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change",
"Humane By Design": "https://humanebydesign.com/principles",
"Is GDPR Good for the Environment?": "https://www.mightybytes.com/blog/is-gdpr-good-for-the-environment/",
"Just normal web things": "https://heather-buchel.com/blog/2023/07/just-normal-web-things/",
"Learn Privacy": "https://web.dev/blog/introducing-learn-privacy?hl=en",
"Ledger of Harms": "https://ledger.humanetech.com/",
"OpQuast 8 - Advertisements and sponsored content are identified as such.": "https://checklists.opquast.com/en/web-quality-assurance/advertisements-and-sponsored-content-are-identified-as-such",
"Overlay Fact Sheet": "https://overlayfactsheet.com/",
"Overlay False Claims": "https://overlayfalseclaims.com/",
"Six Dark Patterns to Avoid On Your Website": "https://www.mightybytes.com/blog/6-dark-patterns-to-avoid-on-your-website/",
"Society Centered Design": "https://societycentered.design/",
"The Calm Web": "https://calibreapp.com/blog/calm-web",
"Tracking Protection in Firefox For Privacy and Performance": "https://www.ieee-security.org/TC/SPW2015/W2SP/papers/W2SP_2015_submission_32.pdf",
"Why People Block Ads (And What It Means for Marketers and Advertisers)": "https://blog.hubspot.com/marketing/why-people-block-ads-and-what-it-means-for-marketers-and-advertisers",
"Why you should stop using Google Analytics on your website": "https://plausible.io/blog/remove-google-analytics"
}
],
"tags": ["Social Equity", "Accessibility", "UI", "Patterns", "Usability", "Compatibility", "Assets", "JavaScript", "Security", "JavaScript", "Security", "Privacy"]
},
{
"id": "12",
"url": "https://w3c.github.io/sustyweb/#document-and-share-project-outputs",
"guideline": "Document and Share Project Outputs",
"description": "Everything produced by designers, developers, writers, and those involved with a project should be in an open format, well maintained, and curated in a common format (so everyone is working from the same model).",
"criteria": [
{
"title": "Deliverables Reusability",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX12-1)",
"description": "The deliverables output, including documentation, are used upstream of the project and produced in ways that will allow it to be reused in subsequent projects."
},
{
"title": "Deliverables Documentation",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX12-2)",
"description": "Design functionality and technical specifications are documented so that deliverables are comprehensible by the project team and transferable to the development team."
},
{
"title": "Deliverables Readability",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX12-3)",
"description": "Ensure that developers have access to code comments and other View Source affordances which can reduce the burden to access, understand, maintain, and utilize production-ready code as this will reduce redundancy and foster an open source culture."
}
],
"impact": "Medium",
"effort": "High",
"benefits": [
{
"Environmental": "Deliverables that are used in common, easy-to-understand formats will take less computer time to learn and adapt to the environment. As such, less energy will be spent trying to manage a project with emissions savings as a consequence.",
"Economic": "Well-documented projects that can be implemented with ease are likely to have fewer ongoing costs due to a lower need for maintenance.",
"Conversion": "Using an open format, to which anyone can contribute, will have a lower barrier to entry as there will likely be no cost involved in participation. Therefore it will encourage more individuals to play an active role in your project's future."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Medium",
"water": "Medium",
"emissions": "Medium"
}
],
"example": [
{
"content": "[System Design](https://miro.medium.com/v2/resize:fit:1362/0*aZ2wQ5lWgbSHeLpj) of a Website functional structure."
}
],
"resources": [
{
"7 simple habits of the top 1% of engineers": "https://read.engineerscodex.com/p/7-simple-habits-of-the-top-1-of-engineers",
"[GR491] 1-3008 - Reusability": "https://gr491.isit-europe.org/en/crit.php?id=1-3008-uxui-a-sustainable-it-knowledge-and-skills-base",
"[GR491] 7-3050 - Documentation": "https://gr491.isit-europe.org/en/crit.php?id=7-3050-uxui-too-many-inadequate-documents-are-produced-during",
"HTMX First": "https://html-first.com/",
"Right-Click-View-Source As Culture": "https://htmx.org/essays/right-click-view-source/#right-click-view-source-as-culture",
"Society Centered Design": "https://societycentered.design/",
"System design": "https://sustainabilityguide.eu/methods/system-design/",
"System Design: The complete course": "https://kps.hashnode.dev/system-design-the-complete-course",
"System Design in Software Development": "https://medium.com/the-andela-way/system-design-in-software-development-f360ce6fcbb9"
}
],
"tags": ["Content", "Patterns", "Education", "Assets", "Software"]
},
{
"id": "13",
"url": "https://w3c.github.io/sustyweb/#use-a-design-system-to-prioritize-interface-consistency",
"guideline": "Use a Design System To Prioritize Interface Consistency",
"description": "Design systems allow common components and patterns to be formalized and managed within a website or application. By using such a tool, designers and developers can avoid reinventing existing tooling and thereby reduce wasted time (and emissions).",
"criteria": [
{
"title": "Design System",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX13-1)",
"description": "Employ a design system based on web standards and recognizable patterns to mutualize interface components and provide a consistent experience for visitors."
}
],
"impact": "Low",
"effort": "Medium",
"benefits": [
{
"Environmental": "Consistent interfaces that employ web standards require less energy and resources across the product ecosystem, as they are usually tightly optimized. Also, design systems that incorporate environmental criteria can help to scale digital sustainability across the enterprise and reduce redundancy within code, resulting in collectively reduced energy use and impact.",
"Social Equity": "A design system with standardized, lightweight components will improve access to information for people in low-bandwidth areas, on older devices, and so on. Also, design systems will reduce the chance of biases that could affect such groups being introduced.",
"Accessibility": "A design system with accessible components will improve access to information for people with disabilities. Building design features with accessibility baked in by default reduces the potential that people with accessibility requirements will be left out during the website or application's lifecycle.",
"Performance": "Design Systems are built using standardized components that reduce the churn of repeat coding, thereby reducing developer coding turnarounds and, as a byproduct, improve performance and reduce emissions during the process. This will inherently reduce emissions considerably through the building of sustainable patterns.",
"Economic": "Because of their use of standardized components and their avoidance of redundancy, design systems reduce costs as the development time may be reduced (even accounting for the maintenance time involved in having one). Also, familiar-looking websites that can be browsed with ease are likely to suffer lower bounce rates (where visitors just give up) due to the ease of transition (unlike a unique-looking website which can make navigation increasingly complex).",
"Conversion": "Design Systems encourage using recognizable components throughout a design, which will help visitors identify and utilize the product or service successfully. As such, this will reduce complaints and annoyance, which can help increase customer retention. Also, user-interface consistency improves visitor trust as individuals will recognize familiar components within your design and know how to utilize them, and this can improve conversion rates as it will lower the rates of abandonment."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Low",
"water": "Medium",
"emissions": "Low"
}
],
"example": [
{
"content": "[Polaris](https://polaris.shopify.com/) Design System."
}
],
"resources": [
{
"4 Ways to Make Your Code More Reusable": "https://medium.com/@lanceharvieruntime/4-ways-to-make-your-code-more-reusable-bc20889c1e4",
"[AFNOR] Spec 5.3.5 (French)": "https://www.boutique.afnor.org/en-gb/standard/afnor-spec-2201//fa203506/323315",
"A comprehensive guide to design systems": "https://www.invisionapp.com/inside-design/guide-to-design-systems/",
"Design System Ecosystem": "https://bradfrost.com/blog/post/the-design-system-ecosystem/",
"Design System Gallery": "https://designsystemsrepo.com/design-systems/",
"Design System Guide": "https://thedesignsystem.guide/",
"Design System Metrics": "https://thedesignsystem.guide/design-system-metrics",
"Design System ROI Calculator": "https://www.knapsack.cloud/calculator",
"Everything you need to know about Design Systems": "https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969",
"[GR491] 7-3047 - Systemic Approach": "https://gr491.isit-europe.org/en/crit.php?id=7-3047-uxui-starting-a-project-without-taking-into-account",
"How much is a design system worth?": "https://uxdesign.cc/how-much-is-a-design-system-worth-d72e2ededf76",
"How to Write Clean, Reusable Code": "https://eledris.com/how-to-write-clean-reusable-code/",
"Laws Of UX": "https://lawsofux.com/",
"OpQuast 133 - Links of the same nature have identical colors, shapes and behaviors on all pages.": "https://checklists.opquast.com/en/web-quality-assurance/hyperlinks-of-the-same-nature-have-identical-colors-shapes-and-behaviors-on-all-pages",
"The Anatomy of a Design System": "https://sparkbox.com/foundry/design_system_makeup_design_system_layers_parts_of_a_design_system",
"What is a Design System?": "https://www.mightybytes.com/blog/what-is-a-design-system/",
"Why digital isn't always greener or fairer": "https://www.southampton.ac.uk/blog/digitalteam/2021/03/03/why-digital-isnt-always-greener-or-fairer/"
}
],
"tags": ["UI", "Patterns", "Education", "Usability", "Assets", "Strategy"]
},
{
"id": "14",
"url": "https://w3c.github.io/sustyweb/#write-with-purpose-in-an-accessible-easy-to-understand-format",
"guideline": "Write With Purpose, in an Accessible, Easy To Understand Format",
"description": "Everyone should be able to understand what you've written without wasting time staring at a screen or jumping from page to page looking for answers, whether they have accessibility requirements or not. This also means avoiding using technical language (without explanations) and including enough information to help direct people (and search engines) from page to page.",
"criteria": [
{
"title": "Write Clearly",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX14-1)",
"description": "Write clearly, using plain, inclusive language delivered at an easy-to-understand reading level considering accessibility and internationalization inclusions as required (for example, dyslexia)."
},
{
"title": "Content Formatting",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX14-2)",
"description": "Deliver content formatted in ways that support how people read online, including a clear document structure, visual hierarchy, headings, bulleted lists, line spacing, and so on."
},
{
"title": "Search Engine Optimization (SEO)",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX14-3)",
"description": "Prioritize SEO at early design stages and throughout a product or service's lifecycle to improve content findability."
}
],
"impact": "Low",
"effort": "Low",
"benefits": [
{
"Environmental": "When people can quickly find and comprehend the content they need to make informed decisions, they use less time and resources, which reduces energy use and lowers emissions.",
"Social Equity": "Inclusive language that avoids jargon, gendered terms, and so on can improve the user-experience for a broader audience.",
"Accessibility": "Plain-language content that can be quickly skimmed is easier to understand, especially for people with cognitive disabilities. Moreover, good document structure works better for assistive technologies such as screen readers.",
"Performance": "Good document structure improves search performance as the content will likely rank higher in search engines, which can help people more quickly find the content they need.",
"Economic": "Being an authoritative source on a subject can have a positive financial impact on your business, as it can bring income through multiple streams.",
"Conversion": "Content that is well-written and authoritative will be cited by third parties and can lead to an increase in traffic."
}
],
"GRI": [
{
"materials": "Medium",
"energy": "Low",
"water": "Medium",
"emissions": "Low"
}
],
"example": [
{
"content": "CodePen's plain English [terms of service](https://blog.codepen.io/documentation/terms-of-service/) agreement are easy to read."
}
],
"resources": [
{
"Adapt text for the web": "http://www.ecometer.org/rules/adapt-text-for-the-web.html",
"Digital Eco-Design: Content": "https://eco-conception.designersethiques.org/guide/en/content/5-6-content.html",
"Digital Eco-Design: Le contenu": "https://eco-conception.designersethiques.org/guide/fr/content/6-6-contenu.html",
"[GR491] 1-4002 - Sustainable Commitment": "https://gr491.isit-europe.org/en/crit.php?id=1-4002-contents-many-elements-are-produced-externally-it-would",
"[GR491] 1-4003 - Verified Sources": "https://gr491.isit-europe.org/en/crit.php?id=1-4003-contents-the-information-transmitted-can-be-controversial-and",
"[GR491] 1-4004 - Facts and Opinions": "https://gr491.isit-europe.org/en/crit.php?id=1-4004-contents-when-the-information-provided-is-not-deemed",
"[GR491] 2-4014 - Internationalisation": "https://gr491.isit-europe.org/en/crit.php?id=2-4014-contents-multi-language-management-adds-a-substantial-volume-of",
"[GR491] 5-3033 - SEO Stakeholders": "https://gr491.isit-europe.org/en/crit.php?id=5-3033-uxui-algorithms-optimization--tend-to-accumulate-data",
"[GR491] 5-4046 - Useful Images and Links": "https://gr491.isit-europe.org/en/crit.php?id=5-4046-contents-content-uses-external-references-rather-than-duplicating",
"GreenIT (French) 113 - Adapter les textes au web": "https://github.com/cnumr/best-practices/blob/main/chapters/BP_113_fr.md",
"How screen readers read special characters: an update": "https://elevenways.be/en/articles/screenreaders-special-characters",
"How to Effectively Use Visual Hierarchy in Web Design": "https://speckyboy.com/visual-hierarchy-web-design/",
"How to Use Keywords for SEO and Web Sustainability": "https://www.mightybytes.com/blog/keyword-optimization-seo-sustainability/",
"How UX design can help tackle climate change": "https://www.cyber-duck.co.uk/insights/how-sustainable-design-can-help-climate-change",
"HTML: HyperText Markup Language": "https://developer.mozilla.org/en-US/docs/Web/HTML",
"Page Structure Tutorial": "https://www.w3.org/WAI/tutorials/page-structure/",
"Plain Language Writing — An Essential Part Of Accessibility": "https://www.forbes.com/sites/andrewpulrang/2020/10/22/plain-language-writing---an-essential-part-of-accessibility/",
"Readability Scoring System": "https://readabilityformulas.com/readability-scoring-system.php",
"Stop Writing Web Copy That Over Explains Everything": "https://www.mightybytes.com/blog/stop-writing-web-copy-that-over-explains/",
"Sustainable SEO: How to focus on a lasting SEO strategy": "https://yoast.com/sustainable-seo/",
"The digital butterfly effect: Sustainable websites and SEO": "https://www.the-future-of-commerce.com/2022/03/01/sustainable-websites/",
"WCAG 2.2 Understanding Docs: Reading Level": "https://www.w3.org/WAI/WCAG22/Understanding/reading-level.html",
"Web Almanac: Sustainability": "https://almanac.httparchive.org/en/2022/sustainability",
"Why Heading Tags and Content Structure Matter": "https://www.mightybytes.com/blog/why-heading-tags-and-structure-matter/"
}
],
"tags": ["Social Equity", "Accessibility", "Content", "UI", "Usability"]
},
{
"id": "15",
"url": "https://w3c.github.io/sustyweb/#take-a-more-sustainable-approach-to-image-assets",
"guideline": "Take a More Sustainable Approach to Image Assets",
"description": "Of all the data that comprises the largest over-the-wire transfer rates within the average website or application, images are usually those that are responsible due to their quantity and usefulness. As such, doing all you can to reduce their size and unnecessary loading will be beneficial for sustainability.",
"criteria": [
{
"title": "Need For Images",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX15-1)",
"description": "Assess the need for images considering the quantity, format, and size necessary for implementation."
},
{
"title": "Optimize Images",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX15-2)",
"description": "Resize, optimize, and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions."
},
{
"title": "Lazy Loading",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX15-3)",
"description": "Provide Lazy Loading to ensure image assets only load when they are required."
},
{
"title": "Sizing And Deactivation",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX15-4)",
"description": "Let the visitor select the display size, and provide the option to deactivate images."
},
{
"title": "Management And Usage",
"testable": "[Machine Testable](https://w3c.github.io/sustyweb/star.html#UX15-5)",
"description": "Set up a media management and use policy to reduce the overall impact of images, with criteria for media compression and file formats."
}
],
"impact": "High",
"effort": "Low",
"benefits": [
{
"Environmental": "Image assets often make up the largest part of a web page's overall size. Compressing and delivering them in lightweight formats that improve the user-experience can often reduce the hardware burden on older devices. This in turn can reduce overall consumer e-waste by reducing forced upgrade cycles.",
"Social Equity": "Lightweight images work better for visitors in low-bandwidth areas and on older devices, as long as the device can support the formats used.",
"Accessibility": "Delivering images in ways that are meaningful to visitors improves access to information.",
"Performance": "By optimizing your images, you can significantly speed up your website in terms of HTTP requests, data transfer, and even in some cases the physical rendering effort - all of which have an impact on a visitor's user-experience and speed of access.",
"Economic": "Visitors with data caps will benefit from optimized resources as they will be able to consume more content, and hosts of content will endure smaller bills due to lower overheads."
}
],
"GRI": [
{
"materials": "High",
"energy": "High",
"water": "High",
"emissions": "High"
}
],
"example": [
{
"code": "<img src=\"image.jpg\" alt=\"...\" loading=\"lazy\"\/>\r\n<iframe src=\"video-player.html\" title=\"...\" loading=\"lazy\"><\/iframe>",
"content": "[Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading)."
}
],
"resources": [
{
"20 ways to make your website more energy efficient": "https://www.wholegraindigital.com/blog/website-energy-efficiency/",
"Avoid using bitmap images for the interface": "http://www.ecometer.org/rules/avoid-using-bitmap-for-the-interface.html",
"Digital Eco-Design: Images": "https://eco-conception.designersethiques.org/guide/en/content/5-1-images.html",
"Dithering Images": "https://www.greendesign.io/dithering-images",
"Fast load times: Optimize Your Images": "https://web.dev/explore/fast?hl=en#optimize-your-images",
"Favor CSS over images": "http://www.ecometer.org/rules/favor-css-over-images.html",
"Focus Mode": "https://www.greendesign.io/focus-mode",
"[GR491] 2-4008 - Image Compression": "https://gr491.isit-europe.org/en/crit.php?id=2-4008-contents-the-transmission-of-compressed-data-is-essential",
"[GR491] 2-4009 - Meaningful Images": "https://gr491.isit-europe.org/en/crit.php?id=2-4009-contents-the-weight-of-an-image-thus-its",
"[GR491] 2-4010 - Image Avoidance": "https://gr491.isit-europe.org/en/crit.php?id=2-4010-contents-the-weight-of-an-image-thus-its",
"[GR491] 2-4011 - Text Replacement": "https://gr491.isit-europe.org/en/crit.php?id=2-4011-contents-the-weight-of-an-image-thus-its",