UI/UX Design Guide

Concepts • Terminology • Tactics

Edited by Joel Parker Henderson

2024‐01‐01

1
Contents
What is this book? 8
Who is this for? . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Why am I creating this? . . . . . . . . . . . . . . . . . . . . . 10
Are there more guides? . . . . . . . . . . . . . . . . . . . . . . 11

UI/UX 12
User Interface (UI) . . . . . . . . . . . . . . . . . . . . . . . . 13
User Interface (UI) ‐ benefits . . . . . . . . . . . . . . . . . . . 14
User Experience (UX) . . . . . . . . . . . . . . . . . . . . . . 15
User Experience (UX) ‐ benefits . . . . . . . . . . . . . . . . . 16
Customer Experience (CX) . . . . . . . . . . . . . . . . . . . . 17
Customer Experience (CX) ‐ benefits . . . . . . . . . . . . . . . 18
Developer Experience (DX) . . . . . . . . . . . . . . . . . . . . 19
Developer Experience (DX) ‐ benefits . . . . . . . . . . . . . . 20

User‐centered design (UCD) 21

Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Information architecture (IA) . . . . . . . . . . . . . . . . . . 24

Design thinking 25
Focus group . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Journeys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Voice of the Customer (VoC) . . . . . . . . . . . . . . . . . . . 29
Subject Matter Expert (SME) . . . . . . . . . . . . . . . . . . . 30
Design charrette . . . . . . . . . . . . . . . . . . . . . . . . . 31
Mind map . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Decision tree . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Gamification . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Design management 35
Design system . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Style guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2
 Pattern library . . . . . . . . . . . . . . . . . . . . . . . . . . 38
UK Government Design Principles . . . . . . . . . . . . . . . . 39
Apple Human Interface Guidelines (HIG) . . . . . . . . . . . . 40
Google Material Design . . . . . . . . . . . . . . . . . . . . . . 41

Task analysis 42
Cognitive Task Analysis (CTA) . . . . . . . . . . . . . . . . . . 43
Hierarchical Task Analysis (HTA) . . . . . . . . . . . . . . . . 44
Workflow Analysis . . . . . . . . . . . . . . . . . . . . . . . . 45
Critical Incident Technique (CIT) . . . . . . . . . . . . . . . . . 46
Diary study . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Anticipatory design . . . . . . . . . . . . . . . . . . . . . . . 48

Ideation 49
Creative thinking techniques . . . . . . . . . . . . . . . . . . . 50
Brainstorming . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Active listening . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Thinking Hats . . . . . . . . . . . . . . . . . . . . . . . . . . 53
SCAMPER . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Futurespective . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Storyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Storyboard steps . . . . . . . . . . . . . . . . . . . . . . . . . 57
Mental model . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Dendrogram . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
The map is not the territory . . . . . . . . . . . . . . . . . . . 60
Vision board . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Oblique Strategies . . . . . . . . . . . . . . . . . . . . . . . . 62
Abramović Method . . . . . . . . . . . . . . . . . . . . . . . . 63

Product design 64
Design canvas . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Mockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Wireframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Use cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
User stories . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

3
 Use cases and user stories . . . . . . . . . . . . . . . . . . . . 70
MoSCoW method . . . . . . . . . . . . . . . . . . . . . . . . . 71
Low‐fidelity prototype . . . . . . . . . . . . . . . . . . . . . . 72
High‐fidelity prototype . . . . . . . . . . . . . . . . . . . . . . 73
WYSIWYG . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Kaizen (continuous improvement) . . . . . . . . . . . . . . . . 75
Cognitive load . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Cognitive load ‐ recommendations . . . . . . . . . . . . . . . . 77
Usability friction . . . . . . . . . . . . . . . . . . . . . . . . . 78
Usability friction ‐ recommendations . . . . . . . . . . . . . . 79
Jakob’s Ten Usability Heuristics . . . . . . . . . . . . . . . . . 80

Modeling diagrams 81
Activity diagram . . . . . . . . . . . . . . . . . . . . . . . . . 82
Sequence diagram . . . . . . . . . . . . . . . . . . . . . . . . 83
Use case diagram . . . . . . . . . . . . . . . . . . . . . . . . . 84
State diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Timing diagram . . . . . . . . . . . . . . . . . . . . . . . . . 86
Cause‐and‐effect diagram . . . . . . . . . . . . . . . . . . . . 87
Unified Modeling Language (UML) . . . . . . . . . . . . . . . . 88
PlantUML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Mermaid.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

North Star 91
Big Hairy Audacious Goal (BHAG) . . . . . . . . . . . . . . . . 92
Strategic Balanced Scorecard (SBS) . . . . . . . . . . . . . . . . 93
Big design up front (BDUF) . . . . . . . . . . . . . . . . . . . . 94
Domain‐Driven Design (DDD) . . . . . . . . . . . . . . . . . . 95
Behavior Driven Development (BDD) . . . . . . . . . . . . . . . 96
Test‐driven development (TDD) . . . . . . . . . . . . . . . . . 97

Affordance 98
Gibson’s affordance theory . . . . . . . . . . . . . . . . . . . . 99
Accordion UI . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Drawer UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

4
 Ribbon UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Tree UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Wizard UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Progress indicator . . . . . . . . . . . . . . . . . . . . . . . . 105
Header and footer . . . . . . . . . . . . . . . . . . . . . . . . 106
Site map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
ARIA attributes . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Model‐View‐Controller (MVC) . . . . . . . . . . . . . . . . . . 109
Paper cut bug . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Dark pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Cross‐cultural communication . . . . . . . . . . . . . . . . . . 112
Communication styles . . . . . . . . . . . . . . . . . . . . . . 113
Screen reader . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Keyboard shortcut (a.k.a. hotkey) . . . . . . . . . . . . . . . . 115
Alternative text attribute . . . . . . . . . . . . . . . . . . . . . 116
Web Content Accessibility Guidelines (WCAG) . . . . . . . . . . 117
UI for color blindness . . . . . . . . . . . . . . . . . . . . . . 118

UI/UX implementation 119

Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Copywriting . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Microcopy . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Iconography . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Grid system . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Mobile‐first design . . . . . . . . . . . . . . . . . . . . . . . . 125
Reactive UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Low‐code / no‐code . . . . . . . . . . . . . . . . . . . . . . . 127
Text‐To‐Speech (TTS) and Speech‐To‐Text (STT) . . . . . . . . . 128
Progressive enhancement . . . . . . . . . . . . . . . . . . . . 129
Graceful degradation . . . . . . . . . . . . . . . . . . . . . . . 130
Data schema . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Object‐Relational Mapper (ORM) . . . . . . . . . . . . . . . . . 132

Internationalization and localization 133

Internationalization and localization: steps . . . . . . . . . . . 134

5
 Locale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Locale codes . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Bidirectional text (bidi) . . . . . . . . . . . . . . . . . . . . . . 137

UI/UX testing 138

Split testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
End‐to‐end testing . . . . . . . . . . . . . . . . . . . . . . . . 140
Acceptance testing . . . . . . . . . . . . . . . . . . . . . . . . 141
Localization testing . . . . . . . . . . . . . . . . . . . . . . . 142
Accessibility testing . . . . . . . . . . . . . . . . . . . . . . . 143
Screen reader testing . . . . . . . . . . . . . . . . . . . . . . . 144
Benchmark testing . . . . . . . . . . . . . . . . . . . . . . . . 145
Shift‐left testing . . . . . . . . . . . . . . . . . . . . . . . . . 146
Heatmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Artificial Intelligence (AI) 148

AI UI/UX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
AI form fill . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
AI for product development . . . . . . . . . . . . . . . . . . . 151
AI content generators . . . . . . . . . . . . . . . . . . . . . . 152
AI image generation . . . . . . . . . . . . . . . . . . . . . . . 153
AI internationalization/localization . . . . . . . . . . . . . . . 154

Books about UI/UX 155

Universal Principles of Design by William Lidwell et al. . . . . . 156
The Design of Everyday Things by Donald Norman . . . . . . . 157
Envisioning Information by Edward R. Tufte . . . . . . . . . . . 158
Don’t Make Me Think by Steve Krug . . . . . . . . . . . . . . . 159
Forms that Work by Caroline Jarrett et al. . . . . . . . . . . . . 160
The Humane Interface by Jef Raskin . . . . . . . . . . . . . . . 161

UI/UX quotations 162

Learn early, learn often . . . . . . . . . . . . . . . . . . . . . . 163
Make mistakes faster . . . . . . . . . . . . . . . . . . . . . . . 164
Perfect is the enemy of good . . . . . . . . . . . . . . . . . . . 165

6
 Data beats emotions . . . . . . . . . . . . . . . . . . . . . . . 166

Idioms 167
Quick wins . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Think outside of the box . . . . . . . . . . . . . . . . . . . . . 169
Out of scope . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Over the horizon . . . . . . . . . . . . . . . . . . . . . . . . . 171

Aphorisms 172
The Law of Demos . . . . . . . . . . . . . . . . . . . . . . . . 173
The Law of Conservation of Complexity . . . . . . . . . . . . . 174
The Pareto Principle (The 80/20 Rule) . . . . . . . . . . . . . . 175
Chesterton’s fence . . . . . . . . . . . . . . . . . . . . . . . . 176

Soft skills 177

How to create a UI/UX portfolio . . . . . . . . . . . . . . . . . 178
How to sketch a user interface . . . . . . . . . . . . . . . . . . 179
How to run a focus group . . . . . . . . . . . . . . . . . . . . . 180
How to give a demo . . . . . . . . . . . . . . . . . . . . . . . 181
How to interview a user . . . . . . . . . . . . . . . . . . . . . 182
How to collaborate . . . . . . . . . . . . . . . . . . . . . . . . 183
How to lead a meeting . . . . . . . . . . . . . . . . . . . . . . 184
How to work with stakeholders . . . . . . . . . . . . . . . . . . 185
How to get feedback . . . . . . . . . . . . . . . . . . . . . . . 186
How to give feedback . . . . . . . . . . . . . . . . . . . . . . . 187

Conclusion 188
Thanks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
About the editor . . . . . . . . . . . . . . . . . . . . . . . . . 190
About the AI . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
About the ebook PDF . . . . . . . . . . . . . . . . . . . . . . . 192
About related projects . . . . . . . . . . . . . . . . . . . . . . 193

7
What is this book?
UI/UX Design Guide is a glossary guide ebook that describes one topic
per page. The guide is intended for quick easy learning about concepts,
tactics, and ideas.

Why these topics?

All the topics here are chosen because they have come up in real‐world
UI/UX work, with real‐world stakeholders who want to learn about the
topic.

If you have suggestions for more topics, then please let me know.

Some of the topics are related, so they are grouped into sections. For
example, see the topic about task analysis: in the table of contents, it’s
listed as the first topic in a section that contains various kinds of task
analysis techniques. The section grouping is intended to help readers get
up to speed faster. If you have suggestions for new groups, or topics that
should be in existing groups, then please let me know.

What is the topic order?

You can read any topic page, in any order, at any time. Each topic page is
intended be clear on its own, without needing cross‐references or links.

8
Who is this for?
People should read this guide if they want to learn quickly about user
interface (UI) design and user experience (UX) development, and how
these concepts are practiced in companies today.

For practitioners

For UI/UX practitioners, this guide is intending to summarize and distill

many of your daily concepts and terminology. For you, the value of the
guide is in being able to quickly and easily teach stakeholders about
general UI/UX topics. For example, if you want to use a particular
technique such as user‐centered design or task analysis with your
stakeholders, then you can quickly and easily direct the stakeholders to
this guide and its relevant topic pages, as one aspect of your
communications. You can freely excerpt, remix, and share these pages
with your coworkers.

For stakeholders

For people whose work intersects with UI/UX topics, this guide is
intending to bring you up to speed quickly and easily, so you can work
better together with your team, your partners, and your other
stakeholders. When you know the right terminology, then you’re
better‐able to share information, collaborate, and create the working
relationships that you value.

For students

For students and educators, this guide is a snapshot of industry

techniques and practices that can help bridge the gap between academic
studies, such as computer science studies, and industry jobs, such as
computer programming jobs. If students are able to learn what’s in this
book, they will have a big advantage when they go for job interviews for
roles that involve UI/UX.

9
Why am I creating this?
I am creating this ebook because of years of experience in UI/UX work,
with a wide range of clients, from small startups to enormous
enterprises.

For team collaboration

When I work with companies and teams, then I’m able to use glossaries
like this one to help create shared context and clearer communication.
This can accelerate working together, and can help teams forge better
UI/UX, in my direct experience.

For example, one of my enterprise clients describes this kind of shared

context and clear communication in a positive sense as “singing from
the same songbook”. When a team understands UI/UX terminology, and
has a quick easy glossary for definitions and explanations, then it’s akin
to teammates with the same songbook.

For cross‐cultural communication

What I discovered is that these kinds of glossaries can be especially

helpful for teams with members coming from various cultures, such as
from different countries, or different industries, or different ways of
working. The topic pages help provide a baseline for better
collaboration.

10
Are there more guides?
Yes there are more guides that may be of interest to you.

Startup Business Guide: Learn topics that help with entrepreneurship,

such as pitch decks, market/customer/product discovery,
product‐market fit (PMF), minimum viable product (MVP), technology
industries and sectors, company roles and responsibilities, sales and
marketing, venture capital (VC), and legal agreements.

• Get it via Gumroad or GitHub

Project Management Guide: Learn topics that help with leading projects,
programs, and portfolios. Example: the project management life cycle
(PMLC), outputs versus outcomes (OVO), Key Performance Indicators
(KPIs), SMART criteria, Work Breakdown Structure (WBS), change
management, digital transformation, and practices including agile, lean,
kanban, and kaizen.

• Get it via Gumroad or GitHub

Business Lingo Guide: Learn about topics that show up in many
workplaces. Examples: analysis tools like the 2x2 grid, aphorisms the
Pareto Principle, idioms like “Get on the front foot”, and quotations like
“Make mistakes faster”, and soft skills like how to collaborate. This guide
can be especially helpful for cross‐cultural communication.

• Get it via Gumroad or GitHub

11
UI/UX
UI/UX stands for User Interface (UI) and User Experience (UX), which
are two essential components of designing and developing digital
products, such as websites, mobile applications, and software interfaces.

While UI and UX are distinct, they are closely related and work together
to create an optimal user experience.

UI (User Interface) refers to the visual elements, layout, and interactive

components of a digital product that users interact with. It focuses on
the presentation and aesthetics of the design, including elements such
as buttons, menus, forms, icons, and typography. The goal of UI design
is to create an attractive, intuitive, and visually pleasing interface that
guides users through the product and facilitates their interaction.

UX (User Experience) encompasses the overall experience and

satisfaction that users have while interacting with a digital product. It
involves understanding user needs, preferences, and behaviors to create
a seamless and meaningful experience. UX design involves activities
such as user research, information architecture, interaction design, and
usability testing. The goal is to optimize the user journey, ensuring that
the product is easy to use, efficient, and provides value to the user.

Some helpful topics related to UI/UX are:

• User‐centered design such as via use cases and user stories

• Task analysis such as via empathy maps and diary studies
• Design tactics such as mockups, wireframes, and storyboards
• Artificial intelligence such as for assistants and image generation
• Strategic effects such as network effects and flywheel effects

12
User Interface (UI)
User Interface (UI) refers to the visual and interactive elements of a
digital product or system. It encompasses the graphical layout, controls,
and navigation elements that allow users to interact with software
applications, websites, or other digital interfaces. Typical goals of a user
interface include being appealing, intuitive, and efficient.

Key aspects:

• Visual Design: Focus on the aesthetics of the interface, including

the use of colors, typography, icons, and images. Aim to create a
visually appealing and consistent look and feel.

• Organization: Provide a logical and intuitive structure and flow.

Determine the placement of elements, such as menus, controls,
and sections, to facilitate easy comprehension and navigation.

• Interaction: Enable users to perform actions through the interface,

by using controls such as buttons, menus, sliders, forms, and other
elements. Focus on making these easy to understand and use.

• Presentation: Show content in clear understandable ways. Use

visual hierarchy, typography, and appropriate use of whitespace to
highlight information, guide attention, and ensure readability.

• Consistency: Use established design systems, style guides, pattern

libraries, conventions, and industry standards, because these help
users understand how to interact with the system.

• Accessibility: Ensure that the interface is usable and inclusive for

all users, including those with disabilities and impairments.
Follow accessibility guidelines and laws.

• Testing: Conduct usability testing and gather feedback to refine the

interface and improve it. Identify pain points and opportunities
for improvement. Use results for continuous improvement.

13
User Interface (UI) ‐ benefits
User Interface (UI) design helps users and businesses.

Examples:

• Enhanced User Experience: Improve the overall user experience

by making it intuitive, easy to use, and visually appealing. Reduce
friction and cognitive load. Increase user satisfaction and
engagement.

• Increased Usability: Ensure users can interact with the interface

effectively for their goals. Provide clear navigation, logical layout,
and intuitive controls. Reduce the learning curve. Minimize user
errors.

• Better Branding: Promote consistency in visual elements,

interaction patterns, mental models, and branding throughout the
interface. Reinforce the brand identity, enhance brand
recognition, and increase Net Promotor Score.

• Improved Accessibility: Ensure the interface is usable by

individuals with disabilities or impairments. Provide
accommodations and assistive technologies. Follow accessibility
guidelines and regulations.

• Competitive Advantage: Attract and retain users. Differentiate

from competitors. Leverage a positive user experience to improve
customer loyalty, positive word‐of‐mouth, and increased customer
satisfaction.

• Better Metrics: Use engaging visuals, micro‐interactions, and

delightful experiences to encourage users to stay longer and
explore more. Optimize the user flow towards desired actions,
such as sign‐ups and purchases.

• Less Friction: Optimize for fewer errors, fewer support issues, and
fewer needs for training. Minimize user frustration, abandonment,
and poor reviews.

14
User Experience (UX)
User Experience (UX) refers to the overall experience and satisfaction of
users when interacting with a product, system, or service. It focuses on
understanding users’ needs, behaviors, and emotions to design and
deliver an enjoyable, intuitive, and meaningful experience.

Key aspects:

• User Research: Start with understanding the target users, their

goals, preferences, and pain points. Gather insights by using
methods like surveys, interviews, and observations.

• Information Architecture: Design clear navigation systems,

logical grouping of content, and intuitive labeling, to ensure users
can navigate and understand the offering.

• Usability: Make the product or service easy to use, efficient, and

effective in achieving users’ goals. Minimize friction, eliminate
unnecessary steps, and provide clear instructions and feedback.

• Visual Design: Create aesthetically pleasing and visually engaging

designs. Attend to typography, color schemes, imagery, and visual
hierarchy.

• Interaction Design: Design the interactive elements of a product

or service, such as buttons, menus, forms, and other user interface
components. Provide intuitive and responsive interactions.

• Accessibility: Ensure usability for users with disabilities or

impairments, such as visual, auditory, or motor limitations.
Provide alternative text, captioning, keyboard navigation, and
other accessibility features.

• Iteration: Gather user feedback and incorporate it into iterative

improvements is essential. Test and refine the work, based on
feedback, usability testing, and analytics.

15
User Experience (UX) ‐ benefits
UX encompasses every aspect of the user’s interaction, including their
initial impression, ease of use, efficiency, effectiveness, and overall
satisfaction. It goes beyond the visual aesthetics and considers factors
such as usability, functionality, accessibility, and emotional response.

Key aspects:

• Customer Satisfaction: Good UX leads to increased customer

satisfaction and loyalty, and makes users more likely to try the
product or service, return for repeat use, and recommend it to
others.

• Increased Engagement: Intuitive interfaces, clear calls‐to‐action,

and streamlined user flows guide users toward desired actions and
reduce friction, increasing engagement and conversions.

• Reduced Support: Good UX reduces the need for extensive

customer support or training. When users can easily understand
and use a product or service, they require fewer resources to get
started or resolve issues.

• Competitive Advantage: In a crowded market, a superior user

experience sets a product or service apart from its competitors.
Investing in UX can differentiate a brand, attract users, and create
a competitive advantage.

• Positive Brand Perception: When users have a delightful

experience, they associate it with the brand, fostering positive
brand recognition and increasing trust.

• Improved Efficiency: Good UX improves efficiency and

productivity for users. When interfaces are intuitive and tasks are
streamlined, users can accomplish goals quickly and effectively.

16
Customer Experience (CX)
Customer Experience (CX) refers to the overall perception and
interaction a customer has with a company or brand throughout their
entire journey, from the initial contact to post‐purchase support. It
encompasses every touchpoint and interaction between the customer
and the business, including online experiences, customer service
interactions, product usage, and more.

Key aspects:

• Touchpoints: Identify and optimize all touchpoints where

customers interact with the brand, including websites, mobile
apps, social media, physical stores, customer service channels,
and more.

• Personalization: Tailor the customer experience to individual

preferences and needs. Collect and analyze customer data, to
provide personalized recommendations, targeted marketing, and
customized experiences.

• Ease of Use: Simplify complex tasks to enhance the overall

experience. Customers appreciate intuitive interfaces,
straightforward processes, and minimal friction when interacting
with a brand.

• Consistency: Build trust and reliability by creating consistency

across all touchpoints and interactions. Customers expect a unified
experience, regardless of the channel or device they use to engage.

• Emotional Connection: Evoke positive emotions such as joy or

excitement, to leave a lasting impression and build a loyal
customer base. Achieve this via personalized interactions,
storytelling, or surprising and delighting customers with
exceptional service.

• Customer Feedback: Actively listen to customer opinions,

concerns, and suggestions, to identify areas for improvement and
make necessary adjustments to enhance the overall experience.

17
Customer Experience (CX) ‐ benefits
Customer Experience (CX) is a holistic approach that focuses on
understanding and improving the customer’s feelings, emotions, and
satisfaction at every stage of their engagement with the company. It goes
beyond simply providing a product or service and aims to create positive
and memorable experiences that foster loyalty, advocacy, and long‐term
customer relationships.

Examples:

• Customer Retention: Satisfied customers are more likely to

remain loyal and continue doing business with a brand. Repeat
customers contribute to long‐term profitability and can also serve
as brand advocates, recommending the company to others.

• Brand Differentiation: In competitive markets, providing an

exceptional customer experience sets a brand apart from its
competitors. It becomes a unique selling point that attracts
customers and establishes a positive brand reputation.

• Customer Satisfaction: A positive experience contributes to

customer satisfaction, leading to higher levels of customer
happiness and reducing the likelihood of negative feedback or
complaints.

• Business Growth: Satisfied customers often spend more and are

more likely to make additional purchases or try new products or
services offered by the brand. Positive word‐of‐mouth
recommendations can also attract new customers, driving
business growth.

18
Developer Experience (DX)
Developer Experience (DX) refers to the overall experience and
satisfaction of software developers when working with tools,
frameworks, libraries, and APIs to create applications or software
solutions. It encompasses the usability, efficiency, effectiveness, and
enjoyment that developers derive from their development process and
the tools they use.

Key aspects:

• Documentation: Well‐written documentation, tutorials, code

samples, and reference materials make it easier for developers to
learn, troubleshoot, and integrate offerings into their projects.

• Ease of Use: Developer tools and frameworks should be intuitive,

well‐designed, and easy to set up and use. Simplify complex
processes, provide clear APIs, and offer streamlined workflows.

• Robustness: Tools and frameworks that are stable, reliable, and

performant are essential for a positive DX. Developers rely on the
consistency and dependability of the tools they use to avoid
unnecessary frustrations, bugs, or downtime.

• Debugging and Testing Capabilities: Povide robust debugging

tools, error messages, logging mechanisms, and testing
frameworks, to contribute to a smoother development process,
and help developers produce high‐quality code.

• Integration and Compatibility: Ensure compatibility, seamless

integration, and interoperability between different components.
Developers often work with a combination of tools, libraries, and
APIs to build their applications.

• Community and Support: Build a strong developer community

around a particular tool or framework fosters collaboration,
knowledge sharing, and support. Enable developers to seek help,
exchange ideas, and share best practices, such as via forums,
online communities, and interaction channels.

19
Developer Experience (DX) ‐ benefits
DX focuses on improving the productivity, efficiency, and satisfaction of
developers by providing them with well‐designed and developer‐friendly
tools, documentation, resources, and support. It recognizes that
developers are the key users and stakeholders in the software
development process, and their experience directly impacts the quality
and speed of application development.

Examples:

• Increased Productivity: A positive DX boosts developer

productivity by reducing the time and effort required to
accomplish tasks. Well‐designed tools, efficient workflows, and
clear documentation enable developers to focus on coding and
problem‐solving rather than dealing with unnecessary obstacles or
inefficiencies.

• Faster Development Cycle: Developers can iterate quickly and

deliver software faster when they have access to developer‐friendly
tools and resources. Streamlined processes, effective debugging,
and testing capabilities contribute to a shorter development cycle.

• Higher Code Quality: Tools that prioritize DX often lead to higher

code quality. Developers can write cleaner, more maintainable
code and follow best practices when they have access to
well‐documented APIs, debugging tools, and testing frameworks.

• Developer Satisfaction and Retention: A positive DX contributes

to developer satisfaction, engagement, and motivation. Developers
who enjoy working with well‐designed tools and frameworks are
more likely to stay with the company, resulting in lower turnover
rates and knowledge retention.

• Attraction of Talent: Companies that prioritize DX can attract top

developer talent. Developers actively seek environments that offer
modern, developer‐friendly tools and frameworks, as well as a
supportive community and a focus on continuous improvement.

20
User‐centered design (UCD)
User‐centered design (UCD) is an approach to designing products,
systems, or interfaces that places the needs, goals, and preferences of
the end users at the forefront of the design process. It involves
understanding the users through research and iterative testing, and
using that knowledge to guide design decisions. Benefits include
improved user satisfaction, enhanced usability, reduced development
costs, and ultimately a competitive advantage.

Key aspects:

• User Involvement: Emphasize involving users throughout the

design process. Achieve this via techniques such as user research,
user interviews, surveys, and usability testing. Gain insights into
user needs, preferences, and pain points. Consider factors such as
the physical environment, user characteristics, technological
constraints, and social or cultural influences.

• User Goals: Focus on understanding the goals that users want to

accomplish with the system, and the context in which the product
will be used, to ensure that the design supports users in achieving
their objectives correctly and efficiently.

• Design for Usability: Create prototypes or mock‐ups of the

product or interface, conduct usability testing, gather user
feedback, and incorporate finding. Create designs that are
intuitive, easy to learn, efficient to use, and error‐resistant. Focus
on a positive user experience by designing interfaces that support
users in accomplishing their tasks with minimal effort.

• Multidisciplinary Collaboration: Collaborate among designers,

developers, researchers, and other stakeholders involved in the
design process. Bring together diverse perspectives and expertise,
to create designs that meet the needs of the users while also
considering technical feasibility and business goals.

21
Usability
Usability refers to the ease of use and effectiveness of a product, system,
or interface in achieving its intended purpose. Usability plays a crucial
role in user experience (UX) design, as it directly impacts how users
perceive and interact with a product.

Benefits can include enhanced user experience, increased productivity,

reduced support costs, reduced errors, and competitive advantages.

Key aspects:

• Learnability: Users can quickly understand and learn how to use a

system. Intuitive interfaces, clear instructions, and familiar design
patterns contribute to learnability.

• Efficiency: Users can accomplish tasks in an efficient manner.

This involves minimizing the number of steps, clicks, or actions
required to complete a task and providing shortcuts or time‐saving
features.

• Memorability: Users can remember how to use a product or

system even after a period of inactivity. Consistent design, clear
navigation, and prominent cues help users retain their knowledge.

• Error Prevention: Users can discover their mistakes easily, and

correct them. Error messages should be clear and helpful,
Additionally, systems should provide an easy way to undo or
recover from errors.

• User Satisfaction: Users feel satisfied, confident, and positive

about their experience with the system. Pleasant aesthetics,
engaging interactions, and responsive feedback all help.

22
Accessibility
Accessibility refers to the design and development of products, services,
environments, or digital content that can be used by individuals with
disabilities. It aims to ensure that everyone, regardless of their abilities
or disabilities, can access and engage with information, technology, and
physical spaces.

Benefits include improved user experience, inclusivity, legal and ethical

compliance, expanded audience, and future‐proofing.

Ensuring accessibility requires following established guidelines, such as

the Web Content Accessibility Guidelines (WCAG), and conducting
accessibility testing and audits.

Key aspects:

• Perceivability: Ensure that information can be perceived through

multiple senses. For example, provide alternative text for images,
captions for videos, clear and readable text, and color contrast.

• Operability: Ensure that user interfaces can be operated by

individuals with different abilities. For example, provide for
keyboard‐only access, screen readers, ARIA attributes, or assistive
technologies.

• Understandability: Ensure that content and functionality are

presented in a clear and understandable manner. For example, use
plain language, logical organization, and provide assistance to
guide users.

• Robustness: Ensure that system can be interpreted and accessed

by a wide range of assistive technologies, devices, and platforms.
Adhere to web standards, such as WCAG, alternate text attributes,
and semantic markup.

23
Information architecture (IA)
Information architecture (IA) is the practice of organizing, structuring,
and labeling information to support effective navigation, findability, and
understanding within a system, such as a website, application, or
database. A well‐designed information architecture helps improve user
efficiency and enhances user satisfaction.

Information architects work closely with designers, developers, content

creators, and stakeholders to create successful information architecture
for a given system.

Key aspects:

• Structure: Organize information in meaningful ways. Determine

categories, annotations, tags, and relationships between different
pieces of information. Reflect users’ mental models.

• Navigation Design: Enable users to move through the information

space. This includes menus, navigation bars, search functionality,
and other interactive elements that help users find what they want.

• Labeling and Metadata: Use clear and descriptive labels for

information and content. Accurately represent content and
actions. Help users understand what they will find when they
select a specific option.

• Search Functionality: Enable users to search within the system.

This includes designing search interfaces, setting up search
algorithms, optimizing search results, and tracking search metrics.

• User‐Centered Design: Understand user needs, behaviors, and

goals. Conduct user research, such as interviews, user testing,
focus groups, and surveys. Align IA with users’ mental models.

• Content Strategy: Collaborate closely with content strategy teams

and content providers, to ensure content meets users’ needs.
Cover content creation, curation, maintenance, and governance.

24
Design thinking
Design thinking is a problem‐solving approach that emphasizes
empathizing with the end‐user, to understand problems, ideate potential
solutions, and iterate until a solution is achieved. Design thinking can
apply to a wide range areas, from product design to user experience
design to organizational design. It is a flexible and iterative process that
allows designers to stay focused on the user’s needs.

Typical stages:

1. Empathize: In this stage, designers seek to understand the needs,

desires, and pain points of the end‐user or customer. This can
involve conducting research, interviews, and observation to gain
insights into the user’s perspective.

2. Define: In this stage, designers define the problem they are trying
to solve based on the insights gathered in the empathize stage.
This involves reframing the problem in a way that focuses on the
user’s needs and interests.

3. Ideate: In this stage, designers generate potential solutions to the

problem identified in the define stage. This can involve
brainstorming, sketching, and other creative techniques to
generate a wide range of ideas.

4. Prototype: In this stage, designers create tangible representations

of their ideas in order to test and refine them. This can involve
creating physical prototypes, digital mockups, or other types of
prototypes that allow the designer to test the usability and
effectiveness of the solution.

5. Test: In this stage, designers test their prototypes with end‐users

or customers in order to gain feedback and insights into how well
the solution meets their needs. Based on the feedback received,
designers can refine and iterate their prototypes until a final
solution is achieved.

25
Focus group
A focus group is a qualitative research method used to gather opinions
and attitudes from a small, diverse group of individuals about a
particular product, service, concept, or topic. It typically involves
bringing together 6 to 10 individuals who represent the target audience
and who can provide valuable feedback on the subject being studied.

In a focus group, participants are asked open‐ended questions or given

specific tasks to complete to gather their opinions and insights. The
discussion is led by a moderator who guides the conversation,
encourages participation, and ensures that all participants have an
opportunity to share their thoughts.

Focus groups are often used in market research to gather feedback on

new products, services, or marketing campaigns before they are
launched. The information gathered from a focus group can help
companies identify consumer needs and preferences, as well as
potential issues or concerns that need to be addressed.

There are several advantages to using focus groups as a research method.

For example, focus groups allow for the gathering of detailed and
in‐depth information about a topic or product, as participants can share
their thoughts and experiences in a group setting. Additionally, focus
groups can provide insight into the reasons behind consumer behavior,
as participants can share their motivations and attitudes.

However, there are also some limitations to focus groups. For example,
the opinions and attitudes shared by participants may not be
representative of the wider population, and group dynamics can
influence the responses given. Additionally, the moderator’s role can
also have an impact on the results obtained, and there may be bias in the
selection of participants or in the questions asked.

26
Personas
Personas are a tool used in product design and development to create a
representation of the typical user of a product. A user persona is a
fictional character that represents a group of users who share similar
goals, needs, motivations, and behaviors. It is based on research and
analysis of real users, including their demographics, behavior patterns,
and preferences.

The goal of creating user personas is to provide a clear understanding of

the users of a product and their needs, which can then inform the design
and development of the product. User personas can help designers and
developers to make decisions about product features, functionality, and
user experience, and to create a product that meets the needs of its
intended audience.

A typical user persona includes a name, photo, demographic

information, job title, and a brief description of their goals and
motivations. Additional information may include details about their
behavior patterns, pain points, and preferences.

User personas are typically created through a process of user research,

which may include interviews, surveys, and other forms of data
collection. The data collected is then analyzed to identify patterns and
trends, which are used to create the user persona.

User personas are an important tool in product design and development,

as they help to ensure that the product is user‐focused and meets the
needs of its intended audience. They provide a clear understanding of
the user’s needs, goals, and behaviors, which can be used to inform
design decisions and create a product that is easy to use and provides
value to its users.

27
Journeys
A user journey, also known as a customer journey, is a tool used in
product design and development to map out the path that a user takes to
complete a specific task or achieve a goal. It is a visual representation of
the steps that a user goes through, from initial awareness of a product or
service to the final outcome.

User journeys are often created in conjunction with user personas and
are used to provide a better understanding of the user’s experience when
interacting with a product or service. They help designers and
developers to identify pain points and areas for improvement, and to
create a product that is user‐focused and meets the needs of its intended
audience.

A typical user journey includes a series of steps that a user takes to

achieve their goal, from the initial trigger that leads them to seek out a
product or service, to the final outcome. Each step in the journey is
typically accompanied by a description of the user’s actions, thoughts,
and emotions, as well as any pain points or issues they encounter.

User journeys can be created through a process of user research, which

may include interviews, surveys, and other forms of data collection. The
data collected is then analyzed to identify patterns and trends, which are
used to create the user journey.

User journeys are an important tool in product design and development,

as they help to ensure that the product is user‐focused and meets the
needs of its intended audience. They provide a clear understanding of
the user’s experience when interacting with a product or service, which
can be used to inform design decisions and create a product that is easy
to use and provides value to its users.

28
Voice of the Customer (VoC)
Voice of the Customer (VoC) refers to the process of capturing customer
feedback, opinions, preferences, and needs regarding a particular
product or service. It is a way for organizations to better understand
their customers and make informed decisions about how to meet their
needs.

The goal of VoC is to capture and analyze customer feedback through

various channels such as surveys, focus groups, customer support
interactions, social media, and other feedback mechanisms. By
analyzing this feedback, organizations can make changes and
improvements to better meet customer needs and expectations.

Benefits include:

• Improved customer satisfaction: By understanding what

customers want and need, organizations can make the necessary
improvements to their products or services to meet those needs.

• Increased customer loyalty: By showing customers that their

feedback is being listened to and acted upon, organizations can
build stronger relationships with their customers and improve
retention rates.

• Enhanced product development: By using customer feedback to

drive product development, organizations can create products that
are more likely to meet customer needs and be successful in the
market.

• Better decision‐making: By having a clear understanding of what

their customers want, organizations can make more informed
decisions about where to invest their resources and how to
prioritize their efforts.

29
Subject Matter Expert (SME)
A Subject Matter Expert (SME) refers to an individual who possesses
specialized knowledge, expertise, and experience in a specific subject
area or field. SMEs provide subject‐specific insights, guidance, and
support. Their expertise is typically acquired through years of education,
or work in a specific industry, or conducting research.

Key aspects:

• Expertise and Knowledge: Advise colleagues and stakeholders by

sharing subject knowledge and expertise. Clarify complex
concepts, explain industry practices, shape priorities, and
accelerate decision‐making related to the subject area.

• Knowledge Transfer: Design and deliver training programs,

instructional resources, technical documentation, subject
presentations, or research articles, to transfer knowledge and
skills to colleagues, employees, or clients.

• Collaboration Guidance: Serve as advisor with cross‐functional

teams, project managers, and stakeholders to provide
subject‐specific insights and support, such as for product
development, process optimization, and business objectives.

• Continuous Learning: Engage in continuous learning and stay

up‐to‐date with advancements, industry trends, new research
findings, emerging technologies, and changes in regulations or
best practices.

30
Design charrette
A design charrette is a collaborative, intensive, and time‐limited design
process that brings together a group of designers, stakeholders, and
subject matter experts to generate ideas, explore solutions, and develop
a plan for a specific project or problem.

The goal is to produce a comprehensive, cohesive, and innovative design

solution that meets the needs of all stakeholders. Key benefits include
improving collaboration, innovation, efficiency, and engagement.

General steps:

1. Problem definition: The group defines the problem or challenge

that the design charrette will address, and identifies the
stakeholders who will be involved.

2. Research and preparation: Participants conduct research and

gather information about the project or problem, and prepare
design concepts and ideas to bring to the charrette.

3. Ideation: The group engages in brainstorming and idea generation,

exploring a wide range of design solutions and approaches.

4. Concept development: Participants refine and develop their

design concepts, exploring the feasibility and practicality of
different approaches.

5. Review and feedback: The group reviews and critiques each

other’s design concepts, providing feedback and suggestions for
improvement.

6. Integration and synthesis: Participants work together to integrate

their design concepts into a cohesive plan that addresses all
aspects of the project or problem.

7. Presentation and communication: The group presents their

design solution to the stakeholders, communicating the rationale
behind their approach and seeking feedback.

31
Mind map
A mind map is a graphical tool that is used to organize and structure
ideas and information visually. It is a type of diagram that is created by
starting with a central idea or concept and then branching out to other
related ideas or subtopics. The main idea is placed in the center of the
diagram, and additional information is added in the form of branches
that radiate out from the center.

Mind maps are often used for brainstorming, problem‐solving,

note‐taking, and organizing information. They can be used for personal
or professional purposes, such as planning a project, creating a
presentation, or studying for an exam.

Benefits include:

• Better organization: Mind maps structure information in a logical

and organized way, making it easier to understand.

• Increased creativity: Mind maps encourage brainstorming and

free association, allowing for more creative ideas to emerge.

• Improved memory retention: Mind maps use visual and spatial

relationships to help the brain remember information more
effectively.

• Enhanced communication: Mind maps can communicate

complex ideas and concepts in simple and concise ways.

To create a mind map, use a large piece of paper or mind mapping

software. Write the central idea or topic in the center of the page and
draw a circle around it. Then draw branches radiating out from the
central idea to represent related subtopics or ideas. Expand each
subtopic with additional branches and sub‐branches. Use color, images,
and symbols to enhance the visual appeal and meaning.

32
Decision tree
A decision tree is a decision‐making model that is widely used in
business, science, and engineering. It is a tree‐like structure that
represents a series of decisions and their potential consequences.
Decision trees are useful when there are multiple possible outcomes or
decision paths, and the best path is not immediately clear.

The top of the decision tree is the root node, which represents the initial
decision. From there, each branch represents a possible outcome or
decision. The branches are connected to additional nodes, which
represent the decisions that lead to that outcome.

Sector examples:

• Business: Useful to analyze different scenarios, such as the best

marketing strategy, pricing strategies, and product development.

• Medicine: Useful to diagnose diseases or conditions based on a

patient’s symptoms.

• Finance: Useful to evaluate different investment strategies or

financial plans.

Tree types:

• Classification trees: Used to classify data into different categories

or classes.

• Regression trees: Used to predict a continuous value, such as a

price or a temperature.

• Decision trees with continuous variables: Used when the input

data contains continuous variables, rather than discrete categories.

One of the benefits of decision trees is that they are easy to interpret,
even for people without a technical background. They can also be
updated easily as new data becomes available, making them a flexible
and useful tool for decision‐making.

33
Gamification
Gamification is the process of incorporating game‐like elements and
mechanics into non‐game environments to make them more engaging
and enjoyable. It is used in a wide variety of contexts, from education
and training to marketing and advertising, to encourage participation
and increase motivation and engagement.

At its core, gamification is about leveraging the motivational power of

games to encourage people to engage with a product or service. This can
take many forms, including points, badges, leaderboards, challenges,
rewards, and more. By adding these elements to an activity, it can
become more enjoyable and rewarding, and users are more likely to be
motivated to continue engaging with it.

The goal of gamification is to make activities more engaging and fun, but
it is also used as a tool to achieve specific objectives. For example, it can
be used to motivate employees to improve their performance or to
encourage customers to make more purchases. It can also be used in
educational settings to encourage students to learn and retain
information.

The process of gamification involves analyzing the target audience and

identifying the specific behaviors and actions that need to be
encouraged. Then, game mechanics and elements are designed and
incorporated into the activity to encourage those behaviors and actions.
Finally, the gamified activity is launched and monitored to evaluate its
effectiveness and make adjustments as needed.

Gamification has become increasingly popular in recent years as

technology has made it easier to incorporate game mechanics into
various settings. It has been used in many industries and contexts,
including healthcare, finance, fitness, and more. While it can be a
powerful tool for engaging and motivating people, it is important to
ensure that the game elements are well‐designed and do not distract
from the underlying activity.

34
Design management
Design management refers to the process of planning, coordinating, and
overseeing the design activities within an organization to achieve
strategic objectives. It involves managing the design function and
integrating it into the broader business strategy and operations.

Key aspects:

• Strategic Alignment: Align design activities with the organization’s

strategy. Understand the business context, market dynamics, and
customer needs to identify design opportunities and define design
objectives.

• Design Planning: Develop design plans that outline the scope,

timelines, resources, and deliverables of design projects. Identify
project requirements, set design goals, and allocate resources.

• Cross‐functional Collaboration: Work with stakeholders such as

marketing, engineering, and operations to ensure that design
efforts are integrated effectively into the product and process.

• Design Leadership: Provide leadership and guidance to design

teams. Set a vision, inspire creativity, and promote a culture of
excellence. Advocate for design and its value throughout the
organization.

• Design Methods: Establish effective design processes that enable

efficient and high‐quality design outcomes. Implement design
thinking, user‐centered design, and iterative design processes.

• Resource Management: Manage design resources, including

budgets, talent, and technology. Identify skill gaps, training
opportunities, and strategies to enhance the organization’s design
capabilities.

35
Design system
A design system is a collection of guidelines, principles, and reusable
components that help maintain consistency and cohesion in the design
of digital products or services. It serves as a central resource that defines
the visual and interactive elements, patterns, and rules to be followed
when creating user interfaces. A design system helps improve UI/UX
consistency, efficiency, scalability, and collaboration.

Typical aspects:

• Design Principles: These are overarching guidelines that inform

the design decisions and provide a framework for creating a
cohesive and user‐centered experience.

• Visual Style Guide: It outlines the visual elements such as

typography, colors, iconography, spacing, and imagery that should
be used consistently throughout the product.

• Component Library: This includes reusable UI components like

buttons, forms, navigation menus, cards, and other interface
elements. These help create consistent efficient user interfaces.

• Interaction Patterns: This includes practices for navigation,

gestures, animations, wizards, and other interactivity. These help
ensure a predictable and intuitive user experience.

• Accessibility Guidelines: These guidelines ensure that the design

system adheres to accessibility standards for a diverse range of
users, including those with disabilities.

• Documentation: Comprehensive documentation accompanies the

design system, providing guidelines, usage examples, code
snippets, and explanations to help stakeholders use the design
system effectively.

36
Style guide
A style guide is a comprehensive set of guidelines that establishes rules,
standards, and best practices for design and communication. It serves as
a reference document that ensures consistency in the visual and written
elements of a brand or organization.

Typical aspects:

• Visual Elements: Guide the typography, color palette, logo usage,

imagery, iconography, and other visual elements.

• Layout and Grid Systems: Guide the layout and grid systems to
maintain consistency in the placement and alignment of elements
within designs, such as for spacing, margins, and proportions.

• Use of Imagery: Guide the selection, placement, and treatment of

images or illustrations within designs. It may include
recommendations for image style, resolution, and content.

• Brand Voice and Tone: Guide the brand’s voice and tone, writing
style, language usage, and cohesive communication personality
across written materials, such as web copy, social posts, and
marketing.

• Writing Guidelines: Guide the grammar, punctuation,

capitalization, and other writing conventions specific to the brand
or organization, to ensures consistency and professionalism.

• Usage Examples: Provide examples or case studies that illustrate

how to apply the guidelines in different contexts. The examples
show how to implement the style guide effectively.

37
Pattern library
A pattern library is a centralized collection of reusable design
components, patterns, and guidelines that help maintain consistency
and efficiency in the design and development of digital products. It
serves as a reference and resource for designers, developers, and other
stakeholders involved in creating and maintaining a product’s user
interface.

Key aspects:

• Design Consistency: Provide a set of standardized design elements

that ensure visual and functional consistency. For example,
buttons, forms, typography, navigation menus, and cards.

• Efficiency and Productivity: Promote reuse and modularity.

Designers and developers can refer to the library of pre‐designed
components, eliminating the need to recreate them from scratch.

• Scalability and Maintenance: Provide a framework for growth and

updates. When new features or pages are added, designers can
leverage the pattern library across the entire product.

• Collaboration and Communication: Serve as a shared language

and reference point for stakeholders. Provide a common
understanding of design principles, interactions, and guidelines.

• Design System Extensibility: Work alongside and withing design

systems that encompass guidelines for layout, color palettes,
typography, tone, and other brand elements.

• Documentation: Describe how to use the components effectively,

such as via design principles, usage guidelines, accessibility
considerations, coding conventions, and example uses.

• Customization: Consider enabling flexibility and adaptability to

accommodate unique design requirements, to enable the creation
of new patterns when necessary.

38
UK Government Design Principles
Start with user needs. Do research, analyse data, talk to users. Don’t
make assumptions. Have empathy for users. Remember that what they
ask for isn’t always what they need.

Do less. If something works, make it reusable and shareable instead of

reinventing the wheel every time. Provide resources (like APIs) that
others can use, and link to the work of others.

Design with data. Let data drive decision‐making, not hunches or

guesswork. Prototype and test with users, then iterate. Analytics should
be built‐in, always on, and easy to read.

Do the hard work to make it simple. Making something simple to use is

hard ‐ especially when the underlying systems are complex. Don’t take
“It’s always been that way” for an answer.

Iterate. The best way to build good services is to start small and iterate
wildly. Release minimum viable products early, test them with actual
users, and make refinements based on feedback.

This is for everyone. Accessible design is good design. Everything we

build should be as inclusive, legible and readable as possible. If we have
to sacrifice elegance ‐ so be it.

Understand context. We’re not designing for a screen, we’re designing

for people. We need to think hard about the context in which they’re
using our services. Where are they? How experienced are they?

Build services, not websites. A service is something that helps people to

do something. Uncover user needs, and build the service that meets
those needs. The digital world has to connect to the real world.

Be consistent, not uniform. Use the same language and the same design
patterns wherever possible. This helps people get familiar. When this
isn’t possible, make sure your approach is consistent.

Make things open. Share code, share designs, share ideas, share
intentions, share failures. The more eyes the better things get.

39
Apple Human Interface Guidelines (HIG)
The Apple Human Interface Guidelines (HIG) are a set of design
principles and recommendations provided by Apple Inc. to assist
developers in creating user‐friendly and visually appealing software
applications for Apple platforms. The HIG covers various aspects of user
interface design, including visual design, interaction design, and user
experience guidelines.

Key aspects:

• Design Themes: Embrace the design themes specific to each

platform, such as clarity in iOS, or elegance in macOS. Create a
visually consistent and intuitive user experience.

• Layout and Structure: Organize content and controls within an

app, emphasizing the importance of hierarchy, consistency, and
using appropriate spacing and alignment to enhance usability.

• Navigation and Controls: Use navigation patterns and control

patterns, for tab bars, sidebars, and menus, and behavior of
interactive controls, such as buttons, switches, and sliders.

• Typography and Text: Choose fonts, sizes, and styles to ensure

legibility and clarity. Handle text localization and accessibility
features like Dynamic Type.

• Graphics and Animation: Use of well‐crafted icons, illustrations,

and animations that complement the app’s purpose and provide
visual cues to enhance usability.

• Accessibility: Implement accessibility features, such as VoiceOver

support, Dynamic Type, and Assistive Touch, to ensure inclusive
app experiences.

• App Store Guidelines: Submit apps to the App Store using Apple’s
guidelines, covering topics such as app icon design, app previews,
and user privacy considerations.

40
Google Material Design
Google Material Design is a set of guidelines developed by Google to
create visually appealing and consistent user interfaces across different
platforms and devices. It aims to emphasizing a clean and modern
design aesthetic, while also considering functionality and usability.

Key aspects:

• Material Metaphor: Represent a tangible surface for user

interactions, such as touch or motion. Use depth, shadows, and
animations to help create hierarchy and interactivity.

• Bold Intentional Typography: Use a typographic hierarchy that

emphasizes readability and clarity. Ise of a consistent and legible
typeface with appropriate font weights, sizes, and spacing.

• Grid‐based Layouts: Use a responsive grid system that provides

structure and consistency to layouts. Align elements to create a
sense of order and organization.

• Color and Contrast: Employ a vibrant and bold color palette to

create visual interest and communicate meaning. Use color to
highlight. Use high contrast for readability and accessibility.

• Responsive Design: Be responsive and adaptable to different

screen sizes and orientations. Optimize layouts and interactions
across a variety of devices.

• Motion: Use motion and animation to provide feedback, guide

attention, and enhance the experience. Make transitions and
animations smooth, purposeful, and meaningful.

• Consistency and Continuity: Promote consistency across different

apps and platforms, ensuring a familiar experience for users.
Standardize components, interactions, patterns, and continuity.

41
Task analysis
Task analysis is a systematic method used to break down complex tasks
or activities into smaller, more manageable steps. It involves studying
and documenting the actions, processes, and cognitive activities
required to complete a specific task or achieve a particular goal. Task
analysis enables researchers to identify potential bottlenecks, errors, or
inefficiencies, and find ways to optimize.

General process:

1. Identify the Task: Select a specific task or activity that you want to
analyze. It could be a complex work task, a user interaction with a
software application, or any other goal‐oriented activity.

2. Collect Information: Gather information about the task by

observing individuals performing the task, interviewing subject
matter experts, or consulting existing documentation or manuals.

3. Decompose the Task: Break down the task into smaller steps or
subtasks. Start with a high‐level view of the task, and decompose it
into more detailed actions. Each step should be discrete and
meaningful.

4. Sequence the Steps: Arrange the steps in the order in which they
need to be performed. Consider dependencies and relationships
between the steps and ensure a logical flow.

5. Document: Create a detailed record of the task analysis, either in

written form or using visual aids such as flowcharts, diagrams, or
hierarchical task analysis (HTA) diagrams.

6. Evaluate: Identify any missing steps, redundant actions, or unclear

instructions. Refine the analysis as needed to improve accuracy
and completeness. Seek advice from experts and stakeholders.

7. Improve: Work on areas where performance can be optimized,

errors can be reduced, or processes can be simplified. This may
involve redesigns, training courses, or adding automation.

42
Cognitive Task Analysis (CTA)
Cognitive Task Analysis (CTA) is a research methodology used to
understand the cognitive processes and mental strategies that
individuals employ while performing a task. CTA aims to uncover the
knowledge, decision‐making, problem‐solving, and other cognitive
activities involved in completing a task. The goal is to bridge the gap
between observable behaviors and underlying cognitive processes.

Key aspects:

• Interviews: Interview experienced individuals who perform the

task. Use open‐ended questions to learn about thought processes,
decision‐making strategies, and problem‐solving techniques.

• Think‐Aloud Protocol: Ask participant to verbalize their thoughts

and actions while performing the task. They express their thinking
process, observations, decisions, and reasoning out loud.

• Cognitive Work Analysis (CWA): Examine the interplay between

the individual’s cognitive processes, the social and organizational
context, and the task. Focus on the mental models, task strategies,
and knowledge structures.

• Knowledge Elicitation Techniques: Extract explicit and tacit

knowledge via methods like knowledge maps, concept mapping,
and decision trees. Capture the cognitive structures and
relationships between different pieces of relevant knowledge.

• Cognitive Task Interviews: Present participants with specific task

scenarios. Probe for thought processes, problem‐solving
approaches, decision‐making strategies, and task‐relevant
cognitive aspects.

• Cognitive Workload Assessment: Measure the cognitive workload

experienced by individuals while performing a task. Methods
include subjective ratings, physiological measures, and
performance measures.

43
Hierarchical Task Analysis (HTA)
Hierarchical Task Analysis (HTA) is a method used to break down
complex tasks into a hierarchical structure of subtasks, actions, and
operations. It provides a systematic way of representing the
relationships between different levels of tasks, allowing for a detailed
understanding of the task’s structure, goals, and dependencies. HTA can
help with process evaluations, schedule planning, risk identification,
training needs, and workflow optimizations.

General process::

• Task Identification: Select a specific task to analyze. Clearly define

the boundaries of the task and identify its overall goal or objective.

• Decomposition: Break down the task into subtasks. Start with the
highest level or top‐level task and decompose it into more specific
subtasks, actions, and operations. Each item is a meaningful unit
of work.

• Task Relationships: Identify dependencies and relationships

among tasks and subtasks. Determine any conditional
relationships, schedule ordering, or constraints between them.

• Documentation: Document the HTA using visual aids such as

diagrams, flowcharts, or outlines. The hierarchy should clearly
represent the relationships between tasks and the flow of work.

• Evaluation: Review the HTA and seek feedback from subject

matter experts or individuals who perform the task. Identify any
missing or redundant steps, clarify ambiguities, and revise the
analysis as needed.

44
Workflow Analysis
Workflow Analysis, also known as Process Analysis, is a systematic
examination and evaluation of the sequence of activities, tasks, and
information flow within a system, organization, or process. It aims to
understand how work happens, identify inefficiencies and opportunities,
clarify roles and responsibilities, and optimize the workflow.

Typical aspects:

• Workflow Mapping: Represent the process, context, and

relationships, by using flowcharts, diagrams, or process maps to
illustrate the sequence of tasks, decision points, and data flow.

• Task Analysis: Examine each activity in detail to understand its

purpose, inputs, outputs, and the resources required. Document
the actions, decisions, or information exchanges involved.

• Time Analysis: Measure the time taken to complete each activity.

Identify time‐consuming steps, inefficient areas, and bottlenecks.
Do this via observation, interviews, or historical data.

• Data Flow Analysis: Analyze the flow of data to ensure smooth

communication. Identify sources of data, how it is transmitted,
how it is used, and any problems.

• Roles and Responsibilities: Examine the roles and responsibilities

of individuals and teams involved in the workflow. Ensure clarity
and accountability. Understand interactions and handoffs among
roles. Identify areas of confusion or duplication of effort.

• Decisions: Analyze the decision‐making process and its criteria,

the rules or guidelines followed, and any dependencies or
conditions that influence the decisions.

• Controls: Examine mechanisms for evaluating the workflow.

Analyze feedback, such as via customer input, employee
suggestions, and performance metrics. Drive improvements.

45
Critical Incident Technique (CIT)
The Critical Incident Technique (CIT) is a qualitative research method
used to gather detailed and specific information about significant events
or incidents that have occurred in a particular context. The primary
objective is to extract valuable insights and actionable knowledge from
real‐life events that can inform decision‐making, problem‐solving,
training, or process improvement efforts.

General process:

1. Define: Clearly define what constitutes a critical incident within

the context, such as within a specific job role, task, customer
interaction, or any other relevant domain.

2. Collect: Gather details of critical incidents from individuals who

have experienced them. Do this via interviews, surveys, reports,
etc. Cover what happened, who was involved, actions taken, and
outcomes.

3. Select: Choose a subset of incidents that are most critical or

representative of the phenomenon, and that cover a range of
outcomes, highlight different aspects of the context, or provide
rich insights.

4. Code: Analyze each selected incident and identify themes,

patterns, or factors that emerge from the narratives. Code the
incidents by tagging relevant concepts or categories that capture
the essence.

5. Cluster: Identify commonalities, differences, trends, recurring

themes, critical behaviors, environmental factors, or decision
points that are associated with the outcomes. Extract insights and
actionable knowledge.

6. Interpret: Draw conclusions based on the identified factors,

patterns, or themes. These findings can inform decision‐making,
process improvement, training programs, or other relevant actions.
Validate findings with stakeholders or subject matter experts.

46
Diary study
A diary study is a research method used to collect qualitative data about
individuals’ experiences, behaviors, and thoughts over a specific period
of time. It involves participants keeping a record, often in the form of a
diary or journal, of their activities, emotions, and other relevant
information. Diary studies are particularly useful when studying
phenomena that unfold over time or when exploring people’s thoughts
and experiences within their own context.

General overview:

• Recruitment: Identify and recruit participants who are willing to

keep a diary and provide regular entries. Participation can vary
depending on the research goals and available resources.

• Guidelines: Provide instructions on what to record in the diaries,

such as documenting specific events, activities, emotions, or any
other aspects relevant to the study.

• Diary Keeping: Participants record entries in their diaries, often

on a daily or weekly basis, depending on the study’s duration.
Entries can be in written form, audio recordings, or even
multimedia formats.

• Data Collection: Collect the diaries and associated materials from

the participants. Conduct additional interviews or surveys to
gather more context or clarify aspects of the diary entries.

• Data Analysis: Analyze entries and other collected data using

qualitative analysis methods. Look for patterns, themes, and
insights to gain a deeper understanding of participants’
experiences, behaviors, or attitudes.

• Reporting: Interpret and summarize results. Present the findings

in papers, reports, or other relevant formats. Use quotes or
excerpts from the diaries to illustrate key points.

47
Anticipatory design
Anticipatory design is an approach to user experience (UX) design that
focuses on predicting and fulfilling user needs and actions before they
explicitly express them. It involves using data, context, and intelligent
algorithms to proactively provide users with relevant information,
options, or interactions, thereby simplifying their decision‐making
process and enhancing their overall experience.

Key aspects:

• Context Awareness: Leverage real‐time data and contextual

information to understand the user’s current situation,
environment, and needs, to deliver personalized and relevant
content or features.

• Predictive Analytics: Analyzing patterns and trends in user data to

forecast user behavior and preferences, to enable proactive
delivery of recommendations or actions.

• Automation: Automate tasks or processes to reduce user effort and

streamline interactions, such as for form filling, scheduling, or
content generation, based on user behavior and preferences.

• Intelligent Assistants: Use natural language processing (NLP),

machine learning (ML), and other AI techniques to understand
user input and provide relevant suggestions or actions.

• Adaptive Interfaces: Tailor the presentation of information or

options based on individual needs, to optimize the UI for each user
and use case.

48
Ideation
Ideation is a creative process or technique used to generate ideas,
concepts, or solutions to a problem or challenge. It involves
brainstorming and exploring various possibilities without judgment or
evaluation. The goal of ideation is to foster a free‐flowing environment
that encourages diverse thinking and promotes the emergence of
innovative and novel ideas.

During the ideation process, individuals or teams engage in divergent

thinking, where they generate a large quantity of ideas without
immediately focusing on their feasibility or practicality. The emphasis is
on quantity rather than quality at this stage, as it allows for a wide range
of perspectives and potential solutions to be considered.

There are techniques and methods that can be used to facilitate ideation,
such as brainstorming, mind mapping, role play, random word
association, random image association, provocation, and SCAMPER
(Substitute, Combine, Adapt, Modify, Put, Eliminate, Reverse).

Ideation is often followed by a subsequent phase of evaluation and

refinement, where ideas are analyzed, selected, and further developed
into actionable concepts or solutions. However, during the ideation
phase, it is essential to suspend judgment and embrace a non‐linear,
open‐minded approach to allow for the exploration of diverse ideas and
possibilities.

49
Creative thinking techniques
Creative thinking techniques stimulate and enhance the generation of
new ideas, insights, and innovative solutions. These techniques help
individuals or teams break free from traditional or linear thinking
patterns and encourage out‐of‐the‐box, imaginative, and unconventional
ideas.

Examples:

• Brainstorming: Generate a large number of ideas in a free‐flowing

and non‐judgmental environment.

• Mind Mapping: Create a visual representation of ideas, concepts,

and their interrelationships.

• SCAMPER: Generate variations via prompts: Substitute, Combine,

Adapt, Modify, Put to another use, Eliminate, Reverse.

• Random Association: Associate random words or images with a

problem or challenge to trigger new ideas.

• Analogies: Draw comparisons between seemingly unrelated

concepts, to find new perspectives.

• Six Thinking Hats: Adopt different thinking styles represented by

colored hats to explore multiple angles.

• Mindful Observation: Engage in focused observation of the

environment or problem, to discover ideas.

• Storyboard: Create a visual narrative or sequence of ideas to

explore and develop concepts or solutions.

There are numerous other creative thinking methods and approaches

available. Find ones that work best for you or your team and to create an
environment that fosters open‐mindedness, curiosity, and a willingness
to explore diverse perspectives.

50
Brainstorming
Brainstorming is a creative problem‐solving technique used to generate
a large number of ideas in a short period of time. The goal is to promote
a free‐flowing and non‐linear environment that allows for the
exploration of diverse perspectives and possibilities, related to a specific
topic or problem.

Brainstorming is widely used in various settings, including business,

education, and problem‐solving contexts, to foster innovation, creativity,
and generate a wide range of ideas that can lead to new insights and
solutions.

During brainstorming, participants are encouraged to suspend

judgment and criticism and focus on generating as many ideas as
possible. After brainstorming, evaluate the ideas.

Key aspects:

• Quantity over Quality: Generate many ideas without immediately

evaluating or analyzing their feasibility.

• Non‐judgmental Atmosphere: Refrain from criticizing or

evaluating ideas during the brainstorming phase.

• Free Thinking: Encourage ideas that are unconventional,

imaginative, and even seemingly wild.

• Build on Ideas: Build on or combine the ideas of others. This

promotes collaboration and interaction.

• Participation: Give everyone an opportunity to contribute, such as

via round‐robin or equal airtime.

• Timebox: Set a time limit for the brainstorming phase, to helps

maintain focus and energy.

• Capture: Document ideas in a visible accessible format, such as a

whiteboard, flipchart, or web app.

51
Active listening
Active listening is a communication skill that involves fully focusing on,
understanding, and responding to the speaker. By practicing active
listening, you can improve communication and understanding, help
problem‐solving and decision‐making, and foster collaboration and
teamwork.

Key aspects:

• Pay Attention: Give your full attention to the speaker. Minimize

distractions. Avoid interruptions. Maintain eye contact and use
non‐verbal cues, such as nodding or leaning in, to show that you
are engaged.

• Encourage: Provide verbal cues, such as saying “Yes,” “I see,” or

“Go on”. Provide non‐verbal cues, such as nodding, smiling, or
maintaining an open body posture. Cues convey attentiveness.

• Clarify: Seek clarification if something is unclear or if you need

more information. Ask open‐ended questions that encourage the
speaker to elaborate or provide more details.

• Reflect: Summarize what the speaker has said to ensure

understanding. Paraphrase their main points or use statements
like “So, if I understand correctly, you’re saying…” or “It seems like
you’re feeling…”.

• Manage Your Response: Control your urge to react immediately or

provide solutions. Avoid assumptions and suspend judgement.
Show empathy.

• Empathize: Show that you appreciate the speaker’s point of view.

Use statements like “I can understand why you feel that way” or
“This sounds like it is exciting for you”. This builds rapport and
trust.

52
Thinking Hats
Thinking Hats is a decision‐making problem‐solving technique that uses
a metaphor of hats to encourage different ways of thinking. Each hat
represents a different type of thinking. By wearing a particular hat,
individuals are encouraged to think in a particular way.

• White Hat: This hat represents objective, factual thinking. When

wearing this hat, individuals focus on what information is available
and what information is needed to make a decision.

• Red Hat: This hat represents emotional thinking. When wearing

this hat, individuals focus on their instincts, feelings, and
intuitions about the decision or problem.

• Black Hat: This hat represents critical thinking. When wearing

this hat, individuals focus on the risks and potential problems
associated with the decision or problem.

• Yellow Hat: This hat represents optimistic thinking. When

wearing this hat, individuals focus on the benefits and positive
aspects of the decision or problem.

• Green Hat: This hat represents creative thinking. When wearing

this hat, individuals focus on generating new ideas and
possibilities.

• Blue Hat: This hat represents meta‐cognitive thinking. When

wearing this hat, individuals focus on the overall process,
structure, and organization of the decision‐making or
problem‐solving session.

The Thinking Hats technique can be used in a variety of settings, from

individual problem‐solving to group decision‐making. The Thinking
Hats technique can help improve communication, creativity, and
decision‐making in personal and professional settings.

53
SCAMPER
SCAMPER is a creative thinking technique used to stimulate idea
generation and innovative problem‐solving. It is an acronym for
prompts to examine existing ideas or concepts, and transform them into
new and improved versions.

• Substitute: Can you replace certain parts of an idea with

something else? Can you identify aspects that can be swapped or
substituted to bring a fresh perspective?

• Combine: Can you merge different elements or ideas together? It

involves identifying how existing concepts or components can be
brought together to create something new or synergistic.

• Adapt: Can you adapt or modify an idea to fit a different context or

purpose? Can you think about how existing solutions or
approaches can be adjusted or tweaked?

• Modify: Can you alter an idea? Can you change, enhance, or adjust
to improve functionality, aesthetics, or performance?

• Put to another use: Can you find alternative applications or

contexts for an existing idea or concept? Can you think beyond the
original purpose and identify ways to repurpose?

• Eliminate: Can you remove aspects from an idea? Can you simplify
or streamline it?

• Reverse: Can you flip any traditional assumptions or perspectives

associated with an idea? Can you think in the opposite direction or
consider alternative viewpoints to gain new insights?

54
Futurespective
A futurespective is a group activity that focuses on exploring and
envisioning possible futures for a team, organization, or project. It is a
forward‐thinking approach that helps to identify potential opportunities
and challenges, as well as to prepare for possible changes and
disruptions.

The main goal of a futurespective is to imagine a range of possible future

scenarios, and to use these scenarios to inform current decision‐making
and planning. By exploring different possible futures, teams can better
understand the potential consequences of their actions and make more
informed choices.

Futurespectives typically involve a group of people, such as a team or

department, and are often facilitated by a trained facilitator or coach.
During the activity, participants are asked to imagine different scenarios,
such as best‐case and worst‐case outcomes, and to think about the
factors that could lead to these outcomes.

Participants are encouraged to think creatively and to challenge

assumptions about the future. They may use tools such as
brainstorming, scenario planning, and SWOT analysis to generate ideas
and explore different possibilities.

Futurespectives can be especially useful for teams that are working on

projects with a high degree of uncertainty, such as new product
development or strategic planning. By exploring different possible
futures, teams can better anticipate and prepare for potential challenges,
as well as identify new opportunities for growth and innovation.

55
Storyboard
A storyboard is a visual tool used to outline and plan the sequence of
events in a story, such as a film, animation, advertisement, or any other
visual narrative. It is a series of illustrated or sketched panels arranged
in a sequence, much like a comic strip, to represent the key scenes,
actions, and shots of the story.

Key aspects:

• Visualizing the Story: Storyboards help translate a story into a

visual format. By creating a series of drawings or images, the
storyboard allows the team to see how the story will unfold visually
and understand the narrative flow.

• Planning and Organization: Storyboards enable the creator or

production team to plan and organize the various elements of the
story. Each panel represents a specific scene or shot and helps
determine the composition, camera angles, character placement,
dialogue, and other visual details. This allows for better
coordination and pre‐production planning.

• Communication and Collaboration: Storyboards are

communication tools, allowing team members to share and
discuss their vision for the project. It helps align everyone’s
understanding of the story, and serves as a reference for
collaborate during the production process.

• Timing and Pacing: Storyboards can include indications of timing

and pacing through the use of arrows, notes, or additional
annotations. This helps visualize the rhythm and tempo of the
story, ensuring that the desired effect is achieved.

• Cost and Resource Estimation: Storyboards help estimate the

resources required for a project. By visualizing the work, the team
can identify the necessary locations, props, special effects, or other
production elements needed, helping with cost estimation and
resource allocation.

56
Storyboard steps
Storyboarding allows creators to visualize their ideas and communicate
them effectively, making it an essential tool in the planning and
production of visual narratives.

General steps:

1. Script or Concept: Start with a script or a concept for the story.

Identify the key scenes, actions, and important visual elements
that need to be represented in the storyboard.

2. Thumbnail Sketches: Create small, rough sketches or thumbnail

drawings for each panel, representing the scenes or shots in
sequence. Keep the sketches simple and focused on the main
actions or compositions.

3. Composition and Details: Refine the sketches, adding more details

to each panel. Consider the camera angles, character positions,
backgrounds, and other visual elements that will enhance the
storytelling.

4. Annotations and Notes: Add notes, instructions, or dialogue

indications to each panel to provide additional context or guidance
for the production team. This can include camera movements,
character emotions, or specific actions.

5. Panel Arrangement: Arrange the panels in sequence, ensuring a

logical flow from one scene to the next. Pay attention to the visual
transitions and continuity between panels.

6. Presentation: Share the storyboard with the relevant team

members or stakeholders for feedback and discussion. Make
revisions and adjustments as necessary to refine the storytelling
and align everyone’s understanding.

57
Mental model
A mental model is a cognitive framework or representation that
individuals use to understand, interpret, and navigate the world around
them. It is an internalized concept or schema that helps people make
sense of complex information, predict outcomes, and guide their
actions. Understanding and leveraging mental models can enhance
learning, problem‐solving, decision‐making, and communication.

Key aspects:

• Cognitive Framework: Mental models are how individuals

organize and structure their understanding. They are shaped by
knowledge, beliefs, experiences, and cultural background.

• Simplification and Abstraction: Mental models simplify complex

phenomena by abstracting and distilling essential elements and
relationships.

• Predictive and Decision‐Making Tool: Mental models enable

individuals to make predictions and decisions based on their
understanding of how the world works.

• Influence on Perception and Behavior: Mental models shape how

individuals perceive, categorize, and interpret the world. They also
influence behavior and decision‐making processes.

• Evolving and Adaptive: Mental models can evolve and adapt over
time as individuals gain new knowledge, acquire new experiences,
or challenge existing beliefs.

• Practical Applications: Mental models are used in various fields,

including psychology, education, design, problem‐solving, and
user experience design.

58
Dendrogram
A dendrogram is a graphical representation used in various fields such
as biology, data science, and taxonomy to illustrate the arrangement of
objects or items based on their similarity or dissimilarity. It’s commonly
used in hierarchical clustering analysis, which is a technique that groups
similar data points into clusters or groups based on their distances or
relationships.

In a dendrogram, each object or data point is represented as a leaf node,

and these nodes are gradually connected to form a tree‐like structure.
The length of the branches connecting nodes indicates the degree of
similarity or dissimilarity between the objects. Objects that are more
similar are grouped together at lower levels of the tree, while those that
are less similar are farther apart.

Dendrograms are particularly useful when you have a large dataset and
you want to understand how items or data points are related to each
other in terms of their attributes. By analyzing the dendrogram, you can
decide where to cut the tree to form clusters at different levels of
granularity, depending on the specific analysis or task you’re
performing.

59
The map is not the territory
“The map is not the territory” is a phrase coined by philosopher Alfred
Korzybski to illustrate a fundamental concept in semantics and
perception: a subjective understanding or representation of reality (the
map) is not the same as the actual reality or experience itself (the
territory).

This encourages us to approach situations with openness, curiosity, and

a willingness to consider multiple perspectives. By recognizing the
limitations and biases in our mental maps, we can strive for better
understanding, empathy, and effective communication with others.

Key aspects:

• Subjective Interpretation: Each person constructs their own

mental representation or “map” of the world based on their
experiences, beliefs, cultural background, and other factors. This
subjective interpretation can differ from person to person, leading
to different perceptions and understandings of the same reality.

• Abstraction and Simplification: Maps, whether they are physical

maps or mental representations, are abstractions of reality. They
simplify and condense complex information into a simplified form.
Similarly, our mental maps are abstractions of reality, as we can
never fully grasp the entirety of the world or any given situation.

• Limitations and Incompleteness: Maps have limitations and can

never fully capture the complexity and nuances of the territory
they represent. Similarly, our mental maps are inherently limited
and can never fully capture the richness and intricacies of the real
world.

• Perception and Bias: Our subjective interpretation of reality is

influenced by our biases, preconceptions, and personal
experiences. This can lead to distortions and inaccuracies in our
understanding of the territory, and in our communications with
others who have different maps.

60
Vision board
A vision board is a visual representation of your goals, dreams, and
aspirations. It is a tool that helps you clarify and visualize what you want
to achieve in different areas of your life, such as career, relationships,
health, or personal growth.

Key aspects:

• Set Your Intentions: Imagine your goals and aspirations. What do

you want to achieve in different aspects of your life? Consider
short‐term and long‐term goals. Be specific about what you want.

• Gather Inspiration: Look for inspiration in images, quotes, words,

or symbols that represent your vision. You can find them in
magazines, books, online platforms, or even create your own
images.

• Arrange Your Visuals: Arrange your visual elements on the board

in a ways that feel meaningful to you. Experiment with different
layouts and compositions until you’re satisfied.

• Add Personal Touches: Include personal touches that make the

vision board meaningful to you, such as handwritten affirmations,
personal photos, or items that feel significant for your goals.

• Reflect and Visualize: When your vision board is complete, sit

with it and reflect on your goals. Visualize yourself achieving those
goals and feel the emotions associated with them.

• Take Action: Use your vision board as a source of inspiration and

motivation, and also take practical steps towards your goals. Make
consistent efforts to bring your vision to life.

61
Oblique Strategies
Oblique Strategies is a set of cards created by musician and producer
Brian Eno and artist Peter Schmidt in the 1970s to help stimulate creative
thinking and problem‐solving. The cards contain aphorisms,
instructions, and prompts designed to encourage lateral thinking and
break free from conventional ways of approaching a problem.

Key aspects:

• Purpose: The purpose of Oblique Strategies is to help individuals

or groups break out of their creative ruts and explore new
possibilities. The cards are designed to stimulate creative thinking
and encourage people to approach problems and challenges from
different angles.

• Format: Oblique Strategies consists of a deck of cards, each of

which contains a different phrase or instruction. The phrases are
intentionally ambiguous and open to interpretation, encouraging
users to apply them in a variety of ways.

• Examples: Some examples of the phrases on the cards include

“Use an old idea,” “Emphasize the flaws,” “Do nothing for as long as
possible,” and “What would your closest friend do?” These prompts
are intended to break up habitual patterns of thinking and
encourage users to explore new ideas and approaches.

• Application: Oblique Strategies can be used in a variety of creative

contexts, such as music composition, art, writing, and design. The
cards can be drawn randomly or selected deliberately, and users
can apply them individually or as a group.

• Impact: Oblique Strategies has been credited with inspiring a

number of creative breakthroughs in various fields. The cards have
been used by musicians such as David Bowie, Coldplay, and
Radiohead, as well as artists and designers in a range of disciplines.

62
Abramović Method
The Abramović Method is a set of exercises and techniques developed by
performance artist Marina Abramović. It is designed to enhance
awareness, presence, and focus for both performers and audience
members.

Core principles:

• Presence: The method emphasizes the importance of being fully

present in the moment. It encourages individuals to let go of
distractions and immerse themselves in their immediate
experience.

• Stillness: Stillness is a key component of the method. Participants

are encouraged to cultivate inner stillness and silence, allowing for
a deeper connection with themselves and their surroundings.

• Concentration: The method emphasizes the power of

concentration and focus. It involves various exercises that help
participants develop a heightened sense of concentration and
awareness.

• Durational Performance: Abramović is known for her durational

performances, where she pushes the boundaries of physical and
mental endurance. The method explores the potential of extended
periods of concentration and presence.

• Mindfulness and Sensory Awareness: The method incorporates

mindfulness practices and sensory exercises to enhance
participants’ awareness of their own bodies, sensations, and the
environment around them.

• Ritual and Ceremony: Abramović often incorporates rituals and

ceremonial elements into her performances. The method draws
on these elements to create a sense of intention, reverence, and
heightened focus.

63
Product design
Product design is the process of creating new products or improving
existing ones to meet the needs of consumers. It involves designing,
prototyping, testing, and iterating until a final product is developed that
meets the user’s needs, solves their problems, and provides a delightful
user experience.

The product design process typically begins with understanding user

needs, pain points, and behaviors through research and analysis. This
information is used to create personas, user stories, and use cases that
inform the design process.

Next, the design team will create rough sketches, wireframes, and
mockups to explore different design options and present them to
stakeholders. Once the stakeholders have approved a design direction,
the team will create high‐fidelity prototypes that mimic the look, feel,
and functionality of the final product.

After the prototype is developed, the team will test it with real users to
gather feedback on the product’s usability, desirability, and functionality.
This feedback is used to iterate on the design and refine the product
until it is ready for launch.

Throughout the product design process, the design team will collaborate
with stakeholders, including product managers, engineers, marketing,
and sales teams, to ensure that the final product aligns with business
goals and meets the needs of the market.

64
Design canvas
A design canvas in UI/UX design is a visual framework or template that
helps designers organize and structure their thoughts, ideas, and design
concepts. It serves as a tool to capture and communicate key aspects of a
design project, providing a holistic view of the product or experience
being designed.

Typical elements:

• Problem Statement: Define the problem or challenge that the

design aims to solve. This helps align the design process with the
project goals.

• Personas: Describe the target audience or user groups, including

their characteristics, demographics, needs, perspectives,
motivations, and goals.

• Journeys: Map out the user’s journey or workflow, showing steps

they take and touchpoints they encounter when interacting with
the product or experience.

• Information Architecture: Plan the structure and organization of

information within the design, including content hierarchy,
navigation, and layout.

• Visual Design: Sketch or represent the layout, components, and

visual elements of the design. This can includes wireframes,
mockups, in low‐fidelity and/or high‐fidelity.

• Interaction Design: Define how users interact with the design,

including user flows, navigation patterns, and interactive elements.

• Testing: Outline methods for evaluating and testing the design,

such as usability testing, focus groups, feedback collection,
behavioral analytics, or user research.

65
Mockups
Mockups are visual representations of a design or product concept. They
are used in various industries, including software development, product
design, and marketing. Mockups can take many forms, such as sketches,
wireframes, digital prototypes, or physical models.

Mockups are created early in the design process to help stakeholders

visualize and test different design ideas, layouts, and functionalities.
They provide a way to communicate design concepts and gather
feedback from clients, users, or team members. Mockups can also help
identify potential problems or issues with the design before investing
resources in developing a full‐scale product.

In software development, mockups are used to visualize the user

interface and the flow of the application. They can be low‐fidelity
sketches or high‐fidelity digital prototypes that mimic the look and feel
of the final product. Mockups can also be used to test different user
interactions and workflows, allowing designers and developers to refine
the product before starting the coding process.

In product design, mockups can be used to test physical prototypes and

assess the feasibility and usability of a design. For example, mockups of
a new product design can be created using materials such as cardboard,
foam, or 3D printing. These mockups can then be tested by users or
focus groups to gather feedback and identify potential issues with the
design.

Mockups can also be used in marketing to create visual representations

of a product or campaign. These mockups can be used in advertising,
social media, or print materials to showcase the product or service and
generate interest and engagement from potential customers.

66
Wireframes
Wireframes are a type of visual design representation used in the early
stages of product development, particularly in software design. They are
essentially a low‐fidelity blueprint of a user interface (UI) that represents
the basic layout and structure of a web page, application, or other digital
product.

Wireframes are created to help design teams conceptualize and plan the
layout and flow of a product, and to communicate this information to
other stakeholders such as developers, project managers, and clients.
They are typically created using simple lines and shapes, and can be
produced using a range of tools, from pen and paper to specialized
software.

Wireframes help designers to determine the optimal placement of

content and functionality, and to explore different options before
committing to a particular design. They can be used to test user flow,
navigation, and interactions, and to identify potential issues and areas
for improvement.

Wireframes are often created in conjunction with other design elements

such as user personas, user journeys, and visual design concepts. They
are an important step in the design process, allowing designers to create
a functional, user‐friendly product that meets the needs of their target
audience.

67
Use cases
A use case is a technique used in software engineering to describe and
define the interactions between a user or a system and a product. It is a
tool used to capture the functional requirements of a system and is an
important part of the requirements gathering process in software
development.

The use case defines a specific interaction between a user or system and
the product being developed. It outlines the steps that are taken to
achieve a specific goal or task, and identifies the inputs, outputs, and
actors involved in the process. Use cases are typically presented in a
diagram or table format, and may include descriptions, flow charts, and
other visual aids to help illustrate the interactions.

Use cases are an important tool in software development because they

help to ensure that the product being developed meets the needs of its
intended audience. They provide a clear understanding of the user’s
needs and requirements, and help to ensure that the product is designed
to meet those needs. Use cases also provide a way to test and validate the
product’s functionality and usability, and can help to identify potential
issues and areas for improvement.

There are several types of use cases, including functional use cases,
which describe how the system should behave under normal conditions;
alternate use cases, which describe how the system should behave under
different or unexpected conditions; and exception use cases, which
describe how the system should handle errors or unexpected input.

68
User stories
A user story is a technique used in software development to capture a
description of a feature from the user’s perspective. It is a short, simple
statement that describes a user’s need or requirement for a product or
system. User stories are often used in Agile software development,
where they are used as a basis for planning and prioritizing work.

A user story typically follows a simple format, consisting of three parts:

a persona or user, a need or requirement, and a goal or outcome. For
example, a user story for an e‐commerce website might read: “As a
customer, I want to be able to view my order history so that I can track
my purchases and returns.”

User stories are designed to be simple and easy to understand, and are
often written in a way that can be easily communicated to both technical
and non‐technical stakeholders. They are intended to serve as a
reminder of the user’s perspective throughout the development process,
and help to ensure that the product being developed meets the user’s
needs and expectations.

User stories are typically organized and prioritized using a product

backlog, which is a list of all the features or requirements that need to be
developed for a product or system. The product backlog is often
prioritized based on the value that each user story provides to the user
or customer, with the most valuable stories being developed first.

69
Use cases and user stories
Use cases and user stories are two techniques used in software
development to capture requirements from the user’s perspective, but
they have some key differences.

A use case is a technique used to capture the interactions between a

system and its users or other systems. It is a detailed description of how
a user or system interacts with a system to accomplish a specific goal.
Use cases are typically represented as diagrams or flowcharts that show
the different steps in the interaction and the possible outcomes.

A user story, on the other hand, is a short, simple statement that

describes a user’s need or requirement for a product or system. It is
often written in a specific format: “As a [type of user], I want [some
feature or capability], so that [some benefit or outcome].” User stories
are typically used in Agile software development to help prioritize work
and ensure that the development team is building features that meet the
user’s needs.

One key difference between use cases and user stories is their level of
detail. Use cases are typically more detailed and comprehensive than
user stories, as they describe the specific interactions between the user
and the system in greater detail. User stories, on the other hand, are
typically shorter and more focused on the user’s needs and desired
outcomes.

Another difference is the way they are used in the development process.
Use cases are often used in more traditional, Waterfall‐style
development processes, where requirements are captured up front and
the development team follows a structured plan. User stories, on the
other hand, are more commonly used in Agile development processes,
where requirements are captured in an iterative and incremental
manner and the development team adapts to changing needs and
priorities.

70
MoSCoW method
The MoSCoW method is a prioritization technique used in project
management and requirements gathering. MoSCoW stands for Must,
Should, Could, and Won’t, representing different levels of priority for
project requirements or features.

Levels:

• Must: These are the essential requirements that must be fulfilled

for the project to be considered successful. They are the core
functionalities or features that are critical for the project.

• Should: These requirements are important but not critical for the
project’s immediate success. Should requirements are desirable
and add value to the project but can be deferred if necessary.

• Could: These are nice‐to‐have requirements that are not essential

for the project’s success but can provide additional benefits or
enhancements. These may considered for inclusion if resources
allow.

• Won’t: These requirements are explicitly excluded from the

project scope. They are identified as features or functionalities that
will not be developed or included.

The MoSCoW method enables project teams to prioritize their efforts

and focus on delivering the most critical and valuable features first. It
helps to manage scope, allocate resources efficiently, and make
informed decisions about what to include or exclude from the project.

When using the MoSCoW method, project stakeholders and team

members collectively assess and assign each requirement or feature to
one of the four categories based on its priority and importance. This
prioritization process allows for effective resource allocation, risk
management, and scope control throughout the project lifecycle.

71
Low‐fidelity prototype
A low‐fidelity prototype is a simple and rough draft of a product,
application, or service that is created at the early stages of the design
process to quickly and inexpensively test and iterate on ideas. It is also
known as a lo‐fi or paper prototype.

Low‐fidelity prototypes are created with low‐cost materials such as

paper, cardboard, sticky notes, or wireframes, and do not usually
incorporate detailed design elements or functionality. The purpose of
these prototypes is to provide a basic representation of the product’s
structure, features, and user flow, and to get feedback from users and
stakeholders.

There are several benefits to creating low‐fidelity prototypes. First, they

are quick and inexpensive to produce, which allows designers to explore
multiple ideas and iterate on them more rapidly. Second, they can be
easily modified and updated as feedback is received, without incurring a
lot of cost or effort. Third, they help designers and stakeholders visualize
the product and its functionality in a tangible way, which can help to
identify usability issues, clarify requirements, and generate new ideas.

Some common examples of low‐fidelity prototypes include:

• Sketches or drawings on paper or a whiteboard

• Hand‐drawn wireframes or flowcharts
• Cardboard cutouts or mockups of physical objects
• Low‐resolution digital mockups created with tools such as
Balsamiq or Sketch

Low‐fidelity prototypes are a useful tool for designers to rapidly explore

and iterate on new ideas and gather feedback from stakeholders and
end‐users. They are an important part of the design thinking process
and can help to ensure that the final product meets the needs of its users.

72
High‐fidelity prototype
A high‐fidelity prototype is a detailed and interactive representation of a
design that closely resembles the final product or application. It
includes all the visual and functional elements of the final product, such
as colors, fonts, images, layout, and user interactions.

High‐fidelity prototypes can be created using various tools such as

design software, web development frameworks, or specialized
prototyping tools. They require a higher level of technical expertise and
take more time and resources to create than low‐fidelity prototypes.

Examples:

• Physical products: A fabricated model that is near the correct size,

shape, color, weight, and usability. The model is used for
functional testing, market research, and even for creating mold
patterns for mass production.

• Websites and mobile applications: An interactive user interface,

realistic imagery, legible content, navigation menus, clickable
buttons, and followable links.

• Games, virtual reality (VR), augmented reality (AR): high‐quality

graphics, interactive environments, sound effects, and immersive
user experiences.

High‐fidelity prototypes are useful for testing the functionality and

usability of a product before it goes into development. They help identify
potential issues and provide a more realistic user experience for testing.
They can also be used for stakeholder presentations and demonstrations,
as they provide a more accurate representation of the final product.

High‐fidelity prototypes are an essential part of the design process, as

they allow designers and stakeholders to test and refine the product
before it goes into development, ultimately saving time and resources in
the long run.

73
WYSIWYG
WYSIWYG stands for “What You See Is What You Get.” It refers to an
interface or editor that allows users to see the final output of their work
exactly as it will appear to the end‐user. In other words, what is
displayed on the screen during the editing process closely resembles the
final printed or published result.

In the context of web design or document editing, a WYSIWYG editor

provides a visual representation of the content being created or edited.
It allows users to format and style the text, insert images or media,
create tables, and apply various visual elements such as colors, fonts,
and alignments, all while being able to see the immediate visual impact
of these changes.

WYSIWYG editors are commonly used in web content management

systems, word processors, website builders, and email marketing
platforms. They aim to simplify the content creation process for users
who may not have technical coding knowledge or prefer a visual
approach to designing and editing content.

The benefits of WYSIWYG editors include visual editing, ease of use, no

coding required, efficiency, and usability by non‐technical users.

However, it’s important to note that WYSIWYG editors may have

limitations compared to hand‐coded approaches, especially for complex
or customized designs. The generated code from WYSIWYG editors can
sometimes be bloated or have inconsistencies, and the visual
representation may not always accurately reflect how the content will
appear across different devices or platforms.

74
Kaizen (continuous improvement)
Kaizen is a Japanese term that means “continuous improvement.” It is a
philosophy and methodology that emphasizes a systematic, incremental
approach to improving processes and products in a way that involves all
employees of an organization, from top management to frontline
workers.

Kaizen is based on the principle of “Plan‐Do‐Check‐Act” (PDCA), which

is a cyclical process of continuous improvement.

Steps:

• Plan: Identify opportunities for improvement and develop a plan

for making changes.

• Do: Implement the plan and make the changes.

• Check: Measure the results of the changes to determine their
effectiveness.

• Act: If the changes were effective, standardize them and continue

to use them. If they were not effective, identify the reasons and
make further improvements.

Kaizen involves all employees of an organization, from top management

to frontline workers, and emphasizes the importance of teamwork,
communication, and collaboration. It is not a top‐down approach, but
rather a collaborative process that involves all levels of the organization
in identifying areas for improvement and implementing changes.

Kaizen can be applied to any process or product, from manufacturing to

service industries, and can be used to improve efficiency, quality, safety,
and customer satisfaction. It can also lead to cost savings, increased
employee engagement and motivation, and a culture of continuous
improvement within the organization.

75
Cognitive load
Cognitive load, in the context of product design and usability, refers to
the amount of mental effort or processing capacity that users must
expend to interact with a product, understand its interface, and
accomplish tasks. Cognitive load is a crucial concept in user experience
(UX) design, as minimizing unnecessary cognitive load can significantly
improve a product’s usability and user satisfaction.

Three main types:

• Intrinsic Cognitive Load: This is the cognitive load associated with

the inherent complexity of a task or the information being
processed. Some tasks are naturally more complex and will have a
higher intrinsic cognitive load. Designers cannot eliminate
intrinsic cognitive load, but they can work to make it as
manageable as possible by simplifying tasks and providing clear
instructions.

• Extraneous Cognitive Load: This is the unnecessary cognitive load

imposed by the design and presentation of the product. It results
from poor user interface design, confusing navigation, unclear
instructions, and other elements that create confusion or
frustration for users. Reducing extraneous cognitive load is a key
goal in product design.

• Germane Cognitive Load: This is the cognitive load that is

beneficial and necessary for learning and problem‐solving. It
represents the mental effort required for users to understand and
integrate new information or adapt to a new system. Designers
aim to make germane cognitive load as efficient as possible by
presenting information and tasks in a clear and organized manner.

76
Cognitive load ‐ recommendations
Reducing cognitive load in product design makes the user experience
more efficient and enjoyable, and also increases the likelihood of users
successfully completing tasks and returning to the product. It is a
fundamental aspect of creating user‐friendly and intuitive interfaces.

Recommendations:

• Simplify and Streamline: Minimize complexity and simplify tasks

and processes. Remove unnecessary steps and information.

• Use Clear and Consistent Design: Maintain a consistent and

intuitive user interface. Use familiar design patterns and
terminology.

• Plan Effective Information Hierarchy: Organize information

logically, with important information and actions prominently
displayed. Use visual cues like headings, lists, and color to guide
users.

• Provide Feedback and Guidance: Provide clear feedback on user

actions and errors. Offer guidance and tooltips when necessary.

• Leverage Progressive Disclosure: Present information and

options gradually, only when needed. Avoid overwhelming users
with too many choices or details at once.

• Prioritize Content: Focus on the most important content or

actions and de‐emphasize less important elements. Users should
be able to quickly discern what’s relevant.

• Test Usability: Conduct usability testing with real users to identify

areas of high cognitive load and gather feedback for
improvements.

77
Usability friction
Usability friction refers to the resistance or obstacles that users may
encounter when interacting with a product. It encompasses any
elements that make the user experience less smooth or efficient.
Reducing friction is a key goal in product design because it can lead to
improved user satisfaction, increased engagement, and better overall
product performance.

Common friction areas:

• UI: Complicated or cluttered user interfaces.

• Slowness: Slow loading times for websites, or slow running times
for applications.

• Onboarding: Lengthy or complex sign‐up processes or setup steps.

• Navigation: Unclear navigation or confusing menu structures.
• Data Entry: Long or complex forms can be tiresome for users.
• Errors: Inadequate error messages or lack of feedback can lead to
user confusion.

• Payments: Purchasing processes with too many steps or security

complexity.

• Inaccessibility: Inaccessible design for people with disabilities.

• Mobile: Inconsistent or poorly responsive design on mobile
devices.

• Waste: Unnecessary steps or actions required to complete a task.

• Overload: Too much information or too many choices.

78
Usability friction ‐ recommendations
Reducing usability friction is a critical goal in design and user
experience, because reducing friction makes it easier for users to
interact with a product, website, or application. This leads to increased
user satisfaction, improved engagement, and more successful task
completion.

Recommendations:

• Focus: Present relevant content concisely. Prioritize and structure

effectively. Remove unnecessary elements.

• Clarify: Use well‐labeled menus and buttons, and ensure that

users can easily find what they need. Implement a clear
information hierarchy to guide users.

• Streamline: Minimize onboarding. Improve forms by using input

masks, autosuggest, and contextual help. Simplify purchasing.

• Optimize Page Load Times: Compress images, use content

delivery networks (CDNs), and minimize HTTP requests
Implement asynchronous loading of content or lazy loading.

• Provide Feedback: Provide positive reinforcement when tasks are

completed. Provide explanations and suggestions when there are
errors.

• Ensure Mobile Responsiveness: Test and optimize the user

experience on various screen sizes, orientations, and devices.

• Ensure Accessibility: Comply with accessibility standards and

guidelines, such as WCAG (Web Content Accessibility Guidelines).

• Test: Address any performance issues or bugs promptly. Regularly

test and update usability, accessibility, and responsiveness. Split
test options.

• Get Feedback: Collect and act upon user feedback and suggestions.
Users often provide valuable insights for improving usability.

79
Jakob’s Ten Usability Heuristics
Source

1. Visibility of System Status: Designs should keep users informed

about what is going on, through appropriate, timely feedback.

2. Match between System and the Real World: Use words, phrases,
and concepts familiar to the user, rather than internal jargon.

3. User Control and Freedom: Users often perform actions by

mistake. They need a clearly marked “emergency exit” to leave the
unwanted action.

4. Consistency and Standards: Users should not have to wonder

whether different words, situations, or actions mean the same
thing.

5. Error Prevention: Good error messages are important, and good

designs carefully prevent problems from occurring in the first
place.

6. Recognition Rather Than Recall: Minimize the user’s memory

load by making elements, actions, and options visible. Avoid
making users remember information.

7. Flexibility and Efficiency of Use: Shortcuts — hidden from novice

users — may speed up the interaction for the expert user.

8. Aesthetic and Minimalist Design: Interfaces should not contain

information which is irrelevant. Every extra unit of information in
an interface competes with the relevant units of information.

9. Recognize, Diagnose, and Recover from Errors: Error messages

should be expressed in plain language (no error codes), precisely
indicate the problem, and constructively suggest a solution.

10. Help and Documentation: It’s best if the design doesn’t need any
additional explanation. However, it may be necessary to provide
documentation to help users complete their tasks.

80
Modeling diagrams
Modeling diagrams are graphical representations that help visualize
software systems or processes. They provide a visual representation of
the system’s architecture, structure, and behavior, which can be used to
communicate the system’s design to stakeholders.

Common diagrams:

• Use Case Diagram: Show interactions between actors and the

system in different scenarios. Define and clarify the requirements
of the system and to identify the actors that interact with the
system.

• Class Diagram: Represents the static structure of the system by

showing the classes, attributes, and methods that make up the
system. Visualize the relationships among classes.

• Sequence Diagram: Shows how objects interact with each other

over time. Visualize the flow of information and control between
different objects in the system.

• Activity Diagram: Shows the flow of activities or actions within a

system. Model the workflow or business process of the system.

• State Diagram: Show states and transitions that an object goes

through in response to events. Model the behavior of the system by
showing how the system responds to external stimuli.

• Component Diagram: Show the organization and dependencies

between software components in a system. Visualize the high‐level
architecture of the system.

• Deployment Diagram: Show how the software components are

deployed on hardware nodes. Visualize the physical architecture of
the system.

81
Activity diagram
An activity diagram is a type of behavioral diagram in software
engineering that describes the flow of activities or actions within a
system or process. It is a graphical representation of the steps or actions
that take place in a workflow or business process, and can be used to
model complex systems or business processes.

Key aspects:

• Activities: An activity is a task or action that takes place in the

system. It is represented as a rectangle with rounded corners, and
the name of the activity is written inside the rectangle. For
example, in a banking system, an activity could be “Withdraw
Money”.

• Transitions: A transition is a connection between activities that

shows the flow of control from one activity to another. It is
represented as an arrow, and the label on the arrow describes the
condition or event that triggers the transition. For example, in a
banking system, a transition could be “Verify Account” that occurs
before the “Withdraw Money” activity.

• Decisions: A decision is a point in the process where the flow of

control splits into multiple paths based on a condition or event. It
is represented as a diamond with arrows indicating the possible
paths. For example, in a banking system, a decision could be “Has
Sufficient Balance?” that leads to two paths: “Yes” and “No”.

• Swimlanes: A swimlane is a visual element used to indicate the

participation of different actors or departments in a process. It is
represented as a horizontal or vertical rectangle with the name of
the actor or department written inside. For example, in a banking
system, a swimlane could be used to indicate the roles of the
customer and the bank employee in the withdrawal process.

82
Sequence diagram
A sequence diagram is a type of interaction diagram that illustrates the
interactions between objects or components in a system over time. It is
used to model the behavior of a system in terms of the messages
exchanged between objects or components.

Typical elements:

• Objects: An object represents an instance of a class or a

component in a system. Objects are shown as rectangles with the
name of the object at the top.

• Lifelines: A lifeline represents the lifespan of an object or a

component in a system. Lifelines are represented as vertical lines
that extend from the top of an object rectangle.

• Messages: A message represents a communication between

objects or components in a system. Messages are represented as
arrows between the lifelines of the objects or components. They
can be synchronous or asynchronous, and they can have
parameters and return values.

• Activation bars: An activation bar represents the period during

which an object or a component is active in processing a message.
Activation bars are shown as horizontal bars on a lifeline.

• Combined fragment: A combined fragment is used to group

messages or to specify conditions or loops in a sequence diagram.
Combined fragments are represented as rectangles with a specific
notation that indicates the type of fragment.

83
Use case diagram
A use case diagram is a type of behavioral diagram that illustrates the
interactions between actors (users or other systems) and a system. It
models the functionality from the user’s perspective.

Main elements:

• Actors: An actor is an external entity that interacts with the system

and performs specific roles. Actors can be users, other systems, or
external devices. They are represented by stick figures.

• Use cases: A use case represents a specific task or functionality

that the system must perform to satisfy the user’s needs. Use cases
are initiated by an actor and describe the interactions between the
actor and the system under specific scenarios. They are
represented by ovals.

Relationship connections:

• Association: An association represents a communication link

between an actor and a use case. It shows the relationship between
the actor and the use case in terms of the actor’s role in the system.
Associations are represented by a solid line between the actor and
the use case.

• Extend: An extend relationship indicates that one use case can

extend another use case. It is used to model optional functionality
that can be added to the base use case. The extending use case is
represented by an arrow pointing from the base use case to the
extending use case.

• Include: An include relationship indicates that one use case

includes another use case. It is used to model common
functionality that is shared between use cases. The included use
case is represented by an arrow pointing from the including use
case to the included use case.

84
State diagram
A state diagram, also known as a state machine diagram or state chart
diagram, is a type of behavioral diagram in software engineering that
describes the behavior of an object or a system over time. It is a
graphical representation of the states, events, and transitions that occur
in the system.

Typical elements:

• States: A state is a condition in which an object or system exists.

Each state is represented by a rectangle with a name. For example,
in a traffic light, the states are “Red”, “Yellow”, and “Green”.

• Transitions: A transition is a change from one state to another.

Transitions are represented by arrows with labels indicating the
events that trigger the transition. For example, in traffic light, the
“Green” state could transition to the “Yellow” state when a timer
expires.

• Events: An event is something that occurs that triggers a transition.

Events are represented by labels on the arrows that connect the
states. For example, in the traffic light system, the event that
triggers the transition from “Red” to “Green” could be the
expiration of a timer.

• Actions: An action is something that occurs during a transition.

Actions are represented as labels on the arrows or as actions
associated with the transitions. For example, in the traffic light
system, the action associated with the transition from “Green” to
“Yellow” could be to turn on a warning light.

• Guards: A guard is a condition that must be true for a transition to

occur. Guards are represented as Boolean expressions in square
brackets. For example, in the traffic light system, the guard for the
transition from “Red” to “Green” could be a condition that checks if
there are no cars in the intersection.

85
Timing diagram
A timing diagram is a graphical representation of the timing and
duration of signals or events in a digital system or electronic circuit. It is
commonly used in electronics, digital communication systems, and
software engineering to visualize the temporal behavior of a system.

Typical elements:

• Horizontal axis: This represents time.

• Vertical axis: This represents signal values.
• Rows or lanes: The diagram is divided into several rows or lanes,
with each lane representing a different signal or event.

The signal values can be represented in several ways, including voltage

levels, logic states, or data values. In digital systems, signal values are
usually represented as high or low logic states, where a high state
represents a logical 1, and a low state represents a logical 0.

Timing diagrams can be used to visualize a variety of signals and events,

including clock signals, data signals, control signals, and system
responses. They can also be used to analyze the timing and performance
of a system, including clock speeds, signal propagation delays, and
system latencies.

Timing diagrams can be created using various software tools, including

simulation software and specialized drawing programs. They can also be
created manually using graph paper or other drawing tools.

86
Cause‐and‐effect diagram
A cause‐and‐effect diagram, also known as an Ishikawa diagram or
fishbone diagram, is a visual tool used to analyze and solve problems.
The diagram is shaped like a fishbone, with the problem statement or
effect placed at the head of the fish, and the potential causes branching
out along the spine. They were developed by quality control expert
Kaoru Ishikawa, and are often used in manufacturing, engineering, and
quality management.

A cause‐and‐effect diagram is a structured tool that helps identify

possible causes of a particular problem or event. It is based on the idea
that there are multiple factors that contribute to a problem, and that by
identifying and addressing these factors, the problem can be solved.

There are six main categories of causes known as “6 Ms”:

• Manpower (people)
• Methods (processes)
• Machines (equipment)
• Materials (inputs)
• Measurements (data)
• Mother nature (environmental conditions)
The diagramming process involves brainstorming the possible causes of
the problem and organizing them into these categories. This is typically
done in a group setting, with a team of people who have knowledge and
experience related to the problem. Once the possible causes are
identified, they are analyzed and prioritized, and potential solutions can
be developed and implemented.

Cause‐and‐effect diagrams are useful for identifying root causes of a

problem. They are also helpful in promoting collaboration, as they allow
different perspectives and areas of expertise to be brought together in a
structured way.

87
Unified Modeling Language (UML)
Unified Modeling Language (UML) is a visual language used for
modeling software systems. It is a standardized notation that helps
developers, architects, and other stakeholders to communicate and
visualize the structure, behavior, and relationships of different
components in a software system.

Diagrams:

• Sequence diagram: Represent the interaction between the objects

of the system, to describe the behavior of the system.

• Use Case diagram: Represent the interaction between the system

and its users, to describe system functionality.

• Activity diagram: Represent the flow of control in the system, to

describe system behavior.

• State diagram: Represent the states and transitions of an system,

to describe the behavior of the system.

• Deployment diagram: Represent the physical deployment of the

system on hardware, to describe the deployment architecture of
the system.

• Class diagram: Represent the classes, interfaces, and their

relationships, to describe the structure of the system.

• Object diagram: Represent objects and their relationships, to

verify the system design.

• Package diagram: Organize the elements of a system into

packages, to show dependencies among packages and their
contents.

• Component diagram: Represent the physical components of a

system, to show the interfaces and dependencies among
components.

88
PlantUML
PlantUML is an open‐source tool that allows you to create various types
of diagrams using a textual syntax. It provides a way to write diagrams as
plain text and then generates the corresponding visual representations.

Diagram types include:

• UML Diagrams: Such as class diagrams, sequence diagrams,

activity diagrams, use case diagrams, component diagrams, and
more. These diagrams help in modeling software systems.

• Flowcharts: Such as shapes, arrows, decision points, and

connectors to represent various elements.

• Network Diagrams: Depict the relationships between different

nodes, devices, and connections in a network.

• Entity‐Relationship Diagrams (ERDs): Model database schemas

and illustrate the relationships between entities and their
attributes.

• Mind Maps: Organize and visualize hierarchical information or

brainstorming sessions.

• Gantt Charts: Visualize project timelines, tasks, dependencies,

and progress.

The PlantUML syntax is straightforward and uses a set of keywords and

symbols to define the elements and relationships in the diagrams. You
write the diagram description in a plain text file. PlantUML then
processes the text file and generates the corresponding diagram in
various formats, such as PNG, SVG, or PDF.

89
Mermaid.js
Mermaid.js is a JavaScript‐based library that allows you to create
diagrams and flowcharts directly in the browser. It provides a simple
way to define diagrams using a Markdown‐inspired syntax, and to
embed diagrams in webpages, documents, or presentations.

Key aspects:

• Diagram Types: Includes flowcharts, sequence diagrams, Gantt

charts, class diagrams, state diagrams, pie charts, and more.

• Markdown Syntax: Uses a concise and human‐readable

Markdown‐like syntax for defining diagrams. This makes it easy to
write and understand the diagram specifications, even for
non‐technical users.

• Browser‐Based: Runs entirely in the browser. There is no need for

server‐side processing or dependencies on external servers. This
makes it convenient for creating and sharing diagrams on websites.

• Interactive and Live Rendering: Mermaid.js automatically

renders the diagrams in real‐time as you write or modify the
diagram specifications. You can see the immediate visual
representation.

• Customization: Mermaid.js provides various options for

customizing the appearance and style of the diagrams. You can
change colors, fonts, arrow styles, line thickness, and other
attributes.

• Integration: Mermaid.js can be easily integrated into Markdown

editors, content management systems (CMS), documentation tools,
or any web‐based application. It supports exporting diagrams as
SVG or PNG images.

90
North Star
In business terminology, the “North Star” is a term used to refer to a
singular, overarching goal or objective that guides a company’s
decision‐making and strategy. It is the guiding principle that helps the
company stay focused on what is most important and drives the
company towards achieving its long‐term vision.

The North Star concept is often used in agile and lean startup
methodologies, where it is seen as a critical tool for staying focused on
what matters most, avoiding distractions, and making effective decisions
in the face of uncertainty. By identifying a clear North Star, companies
can more easily align their efforts, stay motivated, and measure their
progress towards their ultimate goals.

For some companies, the North Star is expressed in terms of a key

metric, or set of metrics, that the company tracks and seeks to optimize.
These metrics might include customer satisfaction, revenue growth, or
market share, for example. The North Star is typically tied to the
company’s overall mission and vision, and represents the key outcome
that the company is striving to achieve.

Here is an example of a North Star metric: For Airbnb, their North Star
metric is “nights booked”. This metric is used to track the company’s
success in connecting travelers with unique and affordable
accommodation options. By focusing on this metric, Airbnb is able to
measure the effectiveness of its platform, make data‐driven decisions to
improve user experience, and stay focused on its mission of providing
travelers with a unique and authentic travel experience.

91
Big Hairy Audacious Goal (BHAG)
The term “Big Hairy Audacious Goal” (BHAG) was first coined by James
Collins and Jerry Porras in their book “Built to Last: Successful Habits of
Visionary Companies”. A BHAG is a long‐term goal that is both
ambitious and inspiring, challenging a company to think beyond its
current capabilities and pursue something truly significant.

A BHAG is typically set for a period of 10 to 30 years and should be a clear

and compelling statement of the company’s ultimate purpose or mission.
It should be specific enough to be measurable, yet broad enough to
inspire and motivate the company’s stakeholders, including employees,
customers, and investors.

The idea behind a BHAG is that it provides a long‐term direction for the
company, helping to guide its strategic decisions and prioritize its
resources. It also helps to rally employees around a common purpose
and inspire them to think creatively and innovatively to achieve the goal.

Examples:

• Google: Organize the world’s information and make it universally

accessible and useful.

• Microsoft: A computer on every desk and in every home.

• Amazon: Be the world’s most customer‐centric company.
Setting a BHAG can be a powerful tool for companies of all sizes, as it
provides a clear and inspiring vision for the future and helps to align the
efforts of all stakeholders towards a common purpose. However, it is
important to set a BHAG that is realistic and achievable, while still being
challenging and inspiring. A BHAG that is too unrealistic or unattainable
can actually be demotivating and may undermine the company’s overall
performance.

92
Strategic Balanced Scorecard (SBS)
The Strategic Balanced Scorecard (SBS) is a management framework that
helps organizations to measure and manage their performance across
multiple perspectives.

• Financial perspective: focus on financial outcomes such as

revenue growth, profitability, and shareholder value. It includes
metrics such as sales growth, return on investment (ROI), and cash
flow.

• Customer perspective: focus on satisfaction and loyalty. It

includes metrics such as customer retention rates, customer
satisfaction scores, and net promoter scores.

• Internal business processes perspective: focus on the processes

that drive business success. It includes metrics such as process
cycle times, defect rates, and inventory turnover.

• Learning and growth perspective: focus on the organization’s

ability to innovate and improve over time. It includes metrics such
as employee satisfaction, employee turnover, and training and
development programs.

The scorecard helps align strategy, objectives, and metrics across these
four perspectives. This helps align resources and initiatives with
strategic priorities.

In addition, the scorecard also helps organizations to communicate their

strategy and objectives to investors, employees, and other stakeholders.

93
Big design up front (BDUF)
Big design up front (BDUF) is an approach to software development
where developers work on detailed requirements, design documents,
and specifications that outline the entire project before any coding
begins. BDUF contrasts with agile methodologies, which favor iterative
approaches.

The BDUF approach is often used in large‐scale software development

projects, where there are many stakeholders and dependencies that
need to be managed. By completing the design phase before any coding
begins, the hope is that the development process will be more efficient
and that the final product will be of higher quality. Proponents of the
BDUF approach argue that it provides a clear roadmap, minimizes the
need for later changes, and increases the probability of success.

However, there are several criticisms of the BDUF approach. One of the
main criticisms is that it can be time‐consuming and costly. By spending
a lot of time on design upfront, there is a risk that the development team
will invest resources in creating a design that ultimately does not meet
the needs of stakeholders or the market. Additionally, because the entire
system is designed before any coding begins, it can be difficult to make
changes or pivot the project if new information or requirements emerge
during the development process.

The BDUF approach can be a useful tool in certain software development

projects, but it is not a one‐size‐fits‐all solution. The key is to understand
the strengths and limitations of the approach and determine whether it
is appropriate for a particular project based on factors such as scope,
budget, timeline, and stakeholder requirements

94
Domain‐Driven Design (DDD)
Domain‐Driven Design (DDD) is a software development approach that
aims to help teams create software aligned with a business’s needs and
requirements. DDD focuses on breaking down complex business
domains into components, which can then be implemented in software.
The business domains are the subject matter and context in which a
particular business operates.

Practices, concepts, and patterns:

• Ubiquitous Language: This refers to a shared language and

vocabulary used by both the business stakeholders and the
development team. By using the same language, everyone involved
in the project can have a better understanding of the requirements
and goals of the project.

• Bounded Contexts: This refers to the idea that a complex business

domain can be broken down into smaller, more manageable
subdomains, each with its own context and rules. Each bounded
context has its own language, models, and constraints that are
specific to that context.

• Entities and Value Objects: These are two key building blocks in
DDD. Entities are objects that have a unique identity and can
change over time, while Value Objects are objects that represent a
value or a concept, such as a date or a currency.

• Aggregates: Aggregates are collections of entities and value

objects that are treated as a single unit. They are used to ensure
consistency and integrity in the business domain.

• Domain Events: Domain events are occurrences that happen

within the business domain, such as a customer placing an order
or a product being shipped. They can be used to trigger actions or
processes within the software system.

95
Behavior Driven Development (BDD)
Behavior Driven Development (BDD) is an agile software development
methodology that emphasizes collaboration between developers, testers,
and business stakeholders to ensure that the delivered software meets
the business requirements. It involves the creation of a shared
understanding of the project goals and the development of tests to
ensure that the system behaves as expected. BDD is an extension of Test
Driven Development (TDD), which focuses on unit testing, but BDD
shifts the emphasis to behavior specification and documentation.

BDD follows a three‐step process to define and implement the desired

behavior of the system:

1. Define the behavior in scenarios.

2. Implement the code to support the scenarios.

3. Validate the implemented code against the scenarios.

This process ensures that the system is developed to meet the business
requirements, and that the code is tested to ensure that it behaves as
expected.

BDD focuses on defining the desired behavior of the system from the
perspective of the business stakeholders. BDD typically uses a structured
language to define the expected behavior of the system in terms of
scenarios that describe the interactions between the system and its
users.

BDD collaboration results in the creation of a shared understanding of

the project goals and the development of tests that reflect the desired
behavior of the system. BDD encourages developers to write code that is
easy to read and maintain, and that is well‐designed to meet the business
requirements. It also helps to reduce the risk of defects and bugs, by
identifying them early in the development cycle.

96
Test‐driven development (TDD)
Test‐driven development (TDD) is a software development practice that
emphasizes writing automated tests before writing code. In this
approach, developers write a test case first, which describes an aspect of
the code that they want to implement, and then they write the code to
make the test pass. TDD is a part of the Agile software development
methodology.

Steps:

1. Red: The developer writes a test that fails because the code that
implements the test is not yet written.

2. Green: The developer writes the minimum amount of code

necessary to make the test pass.

3. Refactor: The developer improves the code to make it more

maintainable, readable, and efficient.

TDD provides several benefits to software development, including

improved code quality, better test coverage, increased confidence in
code changes, and reduced debugging time. By writing tests first,
developers can ensure that their code meets the requirements of the test
case, which can help to prevent bugs and catch issues earlier in the
development process.

In addition, TDD promotes a culture of continuous testing and

improvement, as developers can continuously run tests to ensure that
their code is functioning as expected. This can help to catch bugs early
and reduce the likelihood of errors slipping through the cracks and
making it into production.

However, TDD also has some drawbacks. It can be time‐consuming to

write tests first, and it may require developers to write more code than
they would otherwise. Additionally, TDD may not be well‐suited to all
types of software development projects, particularly those that are highly
exploratory or that require a significant amount of experimentation.

97
Affordance
Affordance is a concept in design and psychology that refers to the
perceived and intuitive relationship between an object or element and
its potential actions or uses. It describes the qualities or attributes of an
object that suggest how it can or should be interacted with.

Two types:

• Perceptible Affordances: These are physical or visual

characteristics of an object that convey its potential uses or
interactions. For example, a round doorknob affords grasping and
turning, while a flat surface affords pushing. Buttons with a raised
appearance or distinct shape afford pressing.

• Hidden or Implied Affordances: These are qualities or cues that

are not immediately visible but can be inferred through past
experiences or cultural conventions. For example, a flat icon on a
touchscreen may imply that it can be tapped or swiped. Similarly,
underlined text in a document may imply that it is a hyperlink.

Affordances provide users with cues or signals about how they can
interact with a physical object, digital interface, or any designed artifact.
However, it’s important to note that affordances can sometimes be
misleading or ambiguous, leading to usability issues. Clear and
well‐designed affordances can enhance the usability and learnability of a
product or interface, while ambiguous or misleading affordances can
cause confusion and frustration.

Affordances help bridge the gap between a user’s goals or intentions and
the actions they need to perform to achieve those goals. They provide
visual or sensory cues that guide users to interact with objects or
interfaces in a way that aligns with their expectations.

98
Gibson’s affordance theory
Gibson’s affordance theory, developed by psychologist James J. Gibson, is
a framework that explains how humans perceive and interact with their
environment. Affordances are the perceived possibilities for action that
the environment offers to an individual. Gibson’s affordance theory has
had a significant impact on various fields, including psychology,
cognitive science, human‐computer interaction, UI/UX, and design.

Key aspects:

• Perception‐Action Coupling: Gibson proposed that perception

and action are closely coupled. Perception is not simply the
passive reception of sensory information but an active process that
involves perceiving opportunities for action in the environment.

• Direct Perception: Gibson argued for the concept of direct

perception, which suggests that perceptual information is rich and
informative enough for individuals to directly perceive the
affordances in their environment without the need for complex
cognitive processes or internal representations.

• Environmental Properties: Affordances are determined by the

properties and characteristics of the environment. For example, a
chair affords sitting, a doorknob affords grasping and turning, and
a staircase affords climbing. Affordances can be both physical and
social in nature, as they encompass the physical properties of
objects and also the social cues and invitations for action in a social
context.

• Situated Action: Gibson emphasized the importance of the

ecological context in which perception and action occur.
Affordances are context‐dependent, and individuals perceive
different affordances in different situations. The meaning and
relevance of affordances are shaped by the goals, intentions, and
cultural norms of the individual within their specific environment.

99
Accordion UI
An accordion user interface is a graphical control that allows users to
expand or collapse sections of content within a limited amount of screen
space. It helps to organize and manage large amounts of information or
content in a compact and easily navigable manner.

Key aspects:

• Space Efficiency: Accordions are useful when there is limited

space to display all the content upfront. By allowing users to
expand or collapse sections, accordions conserve screen space,
making it easier to present a large amount of information without
overwhelming the user.

• Content Organization: Accordions provide a structured and

hierarchical organization of content. By grouping related
information into collapsible sections, users can quickly navigate to
the specific content they are interested in without the need for
excessive scrolling or searching.

• User Control: Accordions empower users to control their browsing

experience. They can choose which sections to expand and explore
further, focusing on the content that is most relevant to them. This
interactive element enhances user engagement and satisfaction.

• Progressive Disclosure: Accordions support the concept of

progressive disclosure, which means revealing information
gradually as users show interest or need for more details. Users
can access additional information by expanding specific sections,
allowing them to dive deeper into specific topics when desired.

• Visual Clarity: Accordions provide a clean and organized visual

appearance. With collapsed sections, only the headings or labels
are visible, reducing visual clutter. This promotes a clear and
scannable interface, making it easier for users to find and access
the desired content.

100
Drawer UI
A drawer user interface, also known as a slide‐out menu or navigation
panel, is a graphical control that provides a hidden panel that can be
revealed by sliding it into view from the edge of the screen. It is
commonly used in mobile and web applications to display additional
navigation options or content without taking up much screen space.

Key aspects:

• Space Efficiency: Optimize screen space by hiding secondary

navigation or content behind a collapsible panel. Provide a
compact and unobtrusive way to present additional options or
functionality.

• Hidden Accessibility: Hide the drawer UI by default, to reduce

visual information, to enable users to focus on the primary
content. Users can access the hidden panel by swiping or tapping.

• Smooth Interaction: Ensure the interaction with a drawer is

smooth and animated, providing a visually pleasing experience
whtn the drawer slides into view, and slides out of view.

• Flexibility and Customization: Customize the drawer to match the

overall design aesthetic of the application, such as the style and
layout of the panel, and the triggering mechanism.

• Content Organization: Organize secondary navigation items,

settings, filters, or additional actions. By grouping related options
within the drawer, designers can create a more structured and
organized UI.

• Contextual Relevance: Potentialy customize the drawer to display

different options or content based on the current context or user
interaction. This enhances usability and reduces cognitive load.

101
Ribbon UI
A ribbon user interface is a graphical control that presents a set of
commands or actions in a horizontal bar across the top of an application
or document. The ribbon control is often used in productivity software,
to provide a visually organized and easily accessible set of tools and
options to users.

Key aspects:

• Grouping: Organize commands and actions into logical groups,

such as formatting options, editing tools, or document‐related
functions. Each group is visually distinct, often represented by
icons or text labels, making it easier for users to find and select the
desired command.

• Discoverability: Improve discoverability by presenting a wide

range of available commands in a visible and accessible manner.
Users can quickly scan the ribbon to locate specific functions or
explore related features within the grouped sections.

• Visual Hierarchy and Priority: Establish a visual hierarchy among

commands and actions. Frequently used or primary commands
can be placed in prominent locations or given larger icons, while
less frequently used options can be grouped together or positioned
in less prominent areas.

• Contextual Tool Sets: Adapt and display different sets of

commands or tools based on the context of the user’s actions.
Context‐awareness provides a more focused and relevant set of
tools to users at any given time.

• Customizability: Potentially enable users to customize the ribbon

control by adding or removing commands, rearranging groups, or
creating custom tabs. This flexibility enables users to tailor the UI
to their specific needs, improving efficiency and personalization.

102
Tree UI
A tree user interface is a graphical control that displays hierarchical data
in a tree‐like structure. It allows users to navigate and interact with a
hierarchical set of items or categories, typically represented as nodes
and branches. Tree controls are commonly used in various applications,
including file explorers, project management tools, organizational
charts, and content management systems.

Key aspects:

• Hierarchical Data Representation: Represent hierarchical data,

where items or categories have parent‐child relationships.
Organize data, showing the relationships between different levels
of information.

• Expandable and Collapsible Nodes: Enable users to expand or

collapse branches to reveal or hide sub‐levels of information. This
lets users to focus on specific sections of the tree and navigate
through the data efficiently.

• Visual Hierarchy: Use indentation and visual cues such as lines or

connectors to convey the hierarchical structure and relationships
between nodes.

• Contextual Menu and Actions: Potentially provide context‐specific

actions or menus that users can access by right‐clicking on a node.
These menus allow users to perform operations on the selected
item, such as editing, deleting, or creating new child nodes.

• Search and Filtering: Potentially provide search and filtering

functionality to help users quickly find specific items within the
tree. Users can enter keywords or criteria to filter the displayed
nodes based on their search terms.

• Drag‐and‐Drop Support: Potentially support drag‐and‐drop

functionality, allowing users to rearrange nodes or move them
between different levels in the hierarchy. This feature provides a
flexible and intuitive way to manage the structure of the tree.

103
Wizard UI
A wizard user interface is a step‐by‐step interactive process that guides
users through a series of tasks or decisions. It simplifies complex
processes and makes them more manageable for users. Wizards are
commonly used in a variety of applications and scenarios, such as user
registrations, onboarding processes, form submissions, configuration
setups, and complex task workflows.

Key aspects:

• Task Chunking: Break down complex tasks or processes into

smaller, more manageable chunks. This helps users focus,
reducing cognitive load.

• Step‐by‐Step Progression: Provide a sequence of screens or pages,

with each step representing a specific task or decision point. Guide
users through the process by moving forward.

• Clear Instructions and Guidance: Provide clear instructions and

guidance to users at each step. This helps users understand what
they need to do and what information they are required to provide.

• Validation: Provide real‐time feedback to users as they complete

each step. This can include validation of user inputs, error
messages, or confirmation of successful completion of a step.

• Flow: Provide a flow and structure that users follow to progress

through the process. Users typically have the ability to navigate
back and forth between steps to review or modify their inputs.

• Progress Indicators: Use visual design elements as progress

indicators, such as progress bars or step counters, to show users
how far they have progressed and how many steps are remaining.

• Flexibility: Potentially enable users to skip steps that are not

relevant to them or provide options for customizing the experience
based on user preferences or requirements.

104
Progress indicator
A progress indicator, in the context of user interface (UI) and user
experience (UX) design, is a visual element that communicates the
progress or status of a process, task, or operation to the user. They
provide feedback to users that something is happening, and can help
users understand the expected completion time.

Key aspects:

• Visual Representation: Progress indicators visually represent the

completion status of a process, often using elements such as a
progress bar, percentage, spinner, or animated icon. These visual
cues provide a clear indication of how far along the process is and
how much more time or steps are remaining.

• Enhancing User Experience: Progress indicators contribute to a

positive user experience by providing a sense of control and
understanding. Users feel more engaged and informed when they
can see the progress of their actions, which leads to a better
perception of system responsiveness and overall satisfaction.

• Improving Usability: Progress indicators help users gauge the

time and effort required to complete a task. By providing an
estimated time, remaining steps, or an indication of completion
percentage, users can plan their actions accordingly and manage
their expectations.

• Error Handling: Progress indicators can also be used to

communicate errors or unexpected events during a process. For
example, if an operation fails or encounters an error, the progress
indicator can display an appropriate message or icon to inform the
user and prompt further action.

• Contextual Messaging: Progress indicators can be accompanied

by additional information about the process or task. This can
include status updates, helpful tips, or instructions, enhancing the
user’s understanding of the process.

105
Header and footer
A header and footer are two essential components of a website’s layout
that appear consistently across multiple pages.

• Header: The header is located at the top of the web page and
typically contains branding elements, the website’s logo, and
primary navigation menus. It serves as a visual identifier for the
website and allows users to navigate to different sections or pages
of the site. The header may also include search bars, contact
information, social media icons, or other relevant elements that
facilitate user interaction and engagement.

• Footer: The footer is positioned at the bottom of the web page and
often contains secondary navigation menus, copyright
information, legal disclaimers, links to important pages (such as
privacy policy or terms of service), and contact details. The footer
is typically less prominent than the header but still serves as a
navigational aid and provides additional information or links for
users.

Key aspects:

• Consistency: The header and footer are consistent elements that

appear across all pages of a website. This helps users navigate
easily and find information regardless of their location within the
website.

• Aesthetics: The header and footer contribute to the overall design

and aesthetics of a website. They can be customized to match the
website’s visual style and create a cohesive user experience.

• SEO and Conversion Opportunities: The header and footer offer

opportunities to include relevant keywords, optimize internal
linking, and improve search engine optimization (SEO). The
header and footer can be used to include calls‐to‐action (CTAs) or
links to encourage user engagement, conversions, or sign‐ups.

106
Site map
A site map is a visual representation of the hierarchical structure and
organization of a website’s content. It is essentially a list of all the pages
and sections of a website, organized in a way that helps users navigate
and understand the site’s content.

Typical elements:

• Sections: such as Products, Support, Contact, FAQ, etc.

• Links: Hyperlinks that connect the different sections and pages of
the website, making it easy for users to navigate.

• Page hierarchy: The hierarchical structure of the website’s pages,

showing how they relate to each other and to the overall structure
of the site.

Site maps can be presented in a variety of formats, including

hierarchical diagrams, flowcharts, or lists. They can also be designed as
interactive diagrams, allowing users to click on different sections and
pages to navigate through the site.

Important functions:

• Help users navigate the site: Site maps make it easy for users to
find the information they are looking for by providing a clear and
organized overview of the site’s content.

• Improve search engine optimization: Site maps provide search

engines with a comprehensive overview of the site’s structure and
content, helping them to index and rank the site more accurately.

• Streamline website design: Site maps help designers to plan and

organize the site’s content and structure, making it easier to create
a user‐friendly and intuitive website.

107
ARIA attributes
The ARIA (Accessible Rich Internet Applications) attributes are a set of
HTML attributes that can be used to enhance the accessibility of web
content for individuals with disabilities. ARIA attributes are particularly
useful for making dynamic web applications and interactive components
more accessible to assistive technologies, such as screen readers.

Key aspects:

• Purpose: ARIA attributes provide additional information to

assistive technologies that cannot be conveyed through standard
HTML tags. They help describe the functionality, state, and
behavior of elements in a way that can be interpreted by screen
readers and other assistive devices.

• ARIA Roles: The role attribute is used to define the role or type of
an element. It allows you to specify the purpose or function of an
element beyond its default role. For example, to indicate that a div
element functions as a button or a menu.

• ARIA States and Properties: ARIA attributes also can describe the
state and properties of elements. For example, the aria‐expanded
attribute can be used to indicate whether a collapsible section is
expanded or collapsed.

• Enhancing Interactive Elements: ARIA attributes are helpful for

making interactive elements, such as menus, tabs, and sliders,
accessible. They allow assistive technologies to understand and
communicate the functionality and behavior of these elements.

• Integration with JavaScript: ARIA attributes are often used in

conjunction with JavaScript. JavaScript can be used to update the
ARIA attributes dynamically as the user interacts with the page,
ensuring that the accessibility information remains up to date.

• Compatibility and Support: ARIA attributes are supported by

most modern web browsers and widely recognized by assistive
technologies.

108
Model‐View‐Controller (MVC)
Model‐View‐Controller (MVC) is a software architectural pattern widely
used in designing and developing applications. It separates an
application’s data (Model), user interface (View), and the logic that
connects the two (Controller) into distinct components. Key benefits of
using the MVC pattern include modular design, separation of concerns,
code reusability, simultaneous development, and better testability.

The MVC pattern:

• Model: The Model component represents the data and business

logic of the application. It encapsulates the data structure, storage,
and operations related to the application’s data. The Model is
responsible for managing data access, manipulation, and
validation. It operates independently of the user interface and
notifies the View and Controller of any changes in the data.

• View: The View component is responsible for the presentation

layer of the application. It represents the user interface and is
responsible for displaying the data to the user. Views are typically
designed to be visually appealing and provide an intuitive user
experience. In the MVC pattern, the View is passive and does not
contain any application logic. It receives data from the Model and
presents it to the user.

• Controller: The Controller acts as an intermediary between the

Model and View components. It handles user input, manipulates
the data in the Model, and updates the View accordingly. The
Controller receives input from the user via the View, processes it,
and updates the Model. It also listens to changes in the Model and
updates the View to reflect those changes. The Controller is
responsible for maintaining the flow of data and interactions
between the Model and View.

109
Paper cut bug
A “paper cut bug” in the context of UI/UX refers to a minor but
noticeable usability issue or annoyance in a user interface. It’s often
used to describe small design flaws or inconsistencies that, although
seemingly insignificant individually, can collectively impact the overall
user experience.

Examples:

• Inconsistent elements: When elements such as buttons, text, or

images are misaligned or inconsistent throughout the interface, it
can create a sense of visual imbalance.

• Inadequate error messages: If error messages are unclear, lack

specificity, or fail to provide actionable guidance, users may feel
frustrated or confused.

• Unintuitive form validation: Poorly designed form validation can

lead to confusion or frustration for users, and can also lead to
errors and mistakes.

• Inconsistent typography: Inconsistent typography, such as

different font sizes, weights, or styles, across different sections or
pages of the interface, can undermine the design.

• Lack of visual feedback: When clicking a button or selecting an

option, a lack of visual cues such as highlighting or animation can
make the interaction feel unresponsive or confusing.

• Unclear or ambiguous labels: If labels are vague, ambiguous, or

use unfamiliar terminology, users may struggle to understand their
purpose or functionality.

• Suboptimal mobile experience: Poor experiences on mobile

devices can include issues such as poorly‐placed touch targets,
difficult scrolling, or elements that don’t adapt well to different
screen sizes.

110
Dark pattern
A dark pattern in UI/UX design refer to deceptive techniques used to
influence user behavior. These patterns exploit cognitive biases and
psychological principles to trick or mislead users. Dark patterns are
unethical and harm the user experience.

Examples:

• Misdirection: The design intentionally draws attention away from

certain options or information, leading users to make unintended
choices.

• Urgency: False or exaggerated time pressure is created to push

users into making quick decisions without adequate consideration.

• Forced Continuity: Users are enrolled in a free trial or subscription

without their explicit knowledge or consent, and it’s hard to exit.

• Roach Motel: It is easy to get into a certain situation, but it

becomes challenging or impossible to leave.

• Hidden Costs: Additional fees, charges, or subscriptions are

hidden or obscured, such as with fine print, or asterisk disclaimers.

• Sneak into Basket: Items or services are added to the user’s

shopping cart without their consent, often during the checkout
process.

• Friend Spam: The design encourages users to share or invite their

friends but takes advantage of their personal network without their
explicit consent.

111
Cross‐cultural communication
Cross‐cultural communication refers to the communication process that
takes place between individuals or groups from different cultural
backgrounds. It involves the exchange of information, ideas, and
messages across cultural boundaries. Effective cross‐cultural
communication requires understanding and navigating cultural
differences to ensure mutual understanding and avoid
misunderstandings.

Key aspects:

• Cultural Awareness: Recognize the values, beliefs, norms, and

customs of different cultures. Understand differences, including
communication styles, nonverbal cues, and etiquette.

• Language Differences: Use clear and simple language. Avoid

jargon or slang. Be patient and accommodating when
communicating with people who are not fluent.

• Nonverbal Communication: Nonverbal cues, such as body

language, facial expressions, gestures, and personal space, can
vary. Be aware of differences to interpret and convey messages.

• Communication Styles: Different cultures’ communication styles

can be categorized as direct or indirect, high‐context or
low‐context, and individualistic or collectivist. Understand these
differences and adapt communication strategies.

• Cultural Sensitivity and Adaptation: Respect and value cultural

differences. Avoid stereotypes or prejudices. Be mindful of
cultural norms, customs, and taboos.

• Listening and Feedback: Give full attention to the speaker,

understanding their perspective, and clarifying any uncertainties.
Use feedback to confirm understanding and fix
misunderstandings.

112
Communication styles
Communication styles refer to the patterns and preferences individuals
or cultures have in conveying and interpreting messages. Three
common dimensions of communication styles are direct or indirect,
high‐context or low‐context, and individualistic or collectivist.
Understanding communication styles helps individuals adapt their
approach to different cultural contexts, promoting effective
communication, building rapport, and avoiding misunderstandings or
misinterpretations.

Dimensions:

• Direct Communication versus Indirect Communication: Direct

communication involves expressing thoughts, opinions, and
requests explicitly and straightforwardly. Indirect communication
relies more on context, subtlety, and nonverbal cues, often using
hints or suggestions.

• High‐Context Communication versus Low‐Context

Communication: High‐context communication uses contextual
information, nonverbal cues, shared assumptions, or cultural
understanding. Low‐context communication uses explicit verbal
communication.

• Individualistic Communication versus Collectivist

Communication: Individualistic communication styles emphasize
personal goals, independence, and self‐expression, often in direct
assertive ways. Collectivist communication styles prioritize group
harmony, cooperation, and maintaining social relationships.

113
Screen reader
A screen reader is an assistive technology software designed to help
individuals with visual impairments or blindness access and interact
with digital content. It is a crucial tool for ensuring inclusive user
experiences in UI/UX design.

Key aspects:

• Accessibility: Screen readers provide an audio representation of

the visual content on a digital interface. They read aloud the text,
icons, buttons, and other elements on the screen, enabling
individuals with visual impairments to understand and navigate
the interface.

• Accessibility Guidelines: Designing for screen reader

compatibility involves following accessibility guidelines, such as
using proper semantic HTML markup, providing alternative text
for images, and ensuring keyboard accessibility.

• Interaction: Screen readers offer various navigation mechanisms

to help users explore and interact with digital interfaces, such with
as headings, links, buttons, form controls, and other interactive
elements, via spoken commands or keyboard input.

• Content and Context: Screen readers provide users with

information about the structure and layout of the content. They
convey the hierarchy of headings, lists, and other structural
elements, allowing users to navigate through the content more
efficiently. Screen readers also provide context cues, such as the
presence of images, form input requirements, and error messages.

• Screen Reader Compatibility Testing: By testing with a screen

reader, designers can understand how their design is perceived
audibly, identify any missing or improperly labeled elements, and
make necessary adjustments for an inclusive user experience.

114
Keyboard shortcut (a.k.a. hotkey)
A keyboard shortcut, also known as a hotkey or key combination, is a
combination of one or more keys on a computer keyboard that triggers a
specific action or command in a software application or operating
system. Keyboard shortcuts are designed to provide a quick and efficient
way for users to perform common tasks. Examples include Ctrl+C (copy),
Ctrl+V (paste), and Alt+Tab (switch between open applications).

Key aspects:

• Accelerate Workflow: Keyboard shortcuts can significantly speed

up workflows by eliminating the need to navigate through menus
or use the mouse for every action.

• Increased Productivity: By reducing the reliance on mouse

movements and clicks, keyboard shortcuts allow you to perform
tasks more efficiently.

• Accessibility: Keyboard shortcuts offer an alternative method of

interaction for individuals with mobility impairments or those who
prefer keyboard‐based navigation.

• Consistency and Standardization: Many software applications and

operating systems follow a set of standardized keyboard shortcuts,
such as Ctrl+Z for undo. This consistency enhances user
familiarity and ease of use.

• Customization: Some systems provide options for the user to

customize or create their own keyboard shortcuts, to align with
their preferences or for specific actions that are not available by
default.

• Learning Curve: Keyboard shortcuts can have a learning curve,

especially when starting with a new software application or
operating system. However, investing time in learning commonly
used shortcuts can improve efficiency and productivity in the long
run.

115
Alternative text attribute
In web design and accessibility, the “alt” attribute (short for alternative
text) is used to provide a text alternative for images. It is an important
accessibility feature that allows users who are visually impaired or using
assistive technologies, such as screen readers, to understand and
interpret the content of an image.

Key aspects:

• Text Alternative: The alt attribute allows you to describe the

content and purpose of an image in text format. This description
should be concise, accurate, and meaningful. It should convey the
same message or convey the intended context that the image is
trying to communicate.

• Accessibility Compliance: Providing alt text for images is a

requirement for web accessibility compliance, as specified by the
Web Content Accessibility Guidelines (WCAG). Including alt
attributes ensures that your website is accessible to individuals
with visual impairments.

• Screen Reader Compatibility: Screen readers are assistive

technologies that read aloud the content of a web page to
individuals who are visually impaired. When an image contains an
alt attribute, the screen reader can read the alternative text.

• SEO Benefits: Alt text also serves a search engine optimization

(SEO) purpose. Search engines rely on alt text to understand and
index images, which can improve the visibility and ranking of your
web pages in search results.

• Image Loading Failure: In cases where an image fails to load due

to slow connections, broken links, or browser issues, the alt
attribute serves as a fallback. Instead of a broken or missing image,
users will see the alternative text, providing them with some
context.

116
Web Content Accessibility Guidelines
(WCAG)
The Web Content Accessibility Guidelines (WCAG) are a set of guidelines
for making web content more accessible to people with disabilities. The
guidelines aim to ensure that web content is perceivable, operable,
understandable, and robust. Success criteria are organized into three
levels of conformance: A (low), AA (medium), and AAA (high).

Core principles:

• Perceivable: Present information and user interface components

in ways that users can perceive them. Provide alternatives for
non‐text content (such as images or videos) for people who cannot
see them. Ensure text is readable and understandable. Ensure
content is easily distinguishable from the background.

• Operable: Ensure user interface components and navigation are

operable by users. Users must be able to interact with all the
functionality using various input methods (such as keyboard,
mouse, or touch), with enough time for users to read and use
content.

• Understandable: Make web content and its operation

understandable to users. Make text and content clear and easy to
read. Use plain language and avoid jargon or complex terminology.
Provide instructions and feedback in a clear and concise manner.
Help users avoid and correct mistakes.

• Robust: Make web content interpretable reliably by a wide range

of user agents (such as browsers, assistive technologies, and other
user interfaces). Use standard HTML, CSS, and other web
technologies correctly. Ensure compatibility with different
browsers and devices. Avoid relying on specific technologies or
features that may limit accessibility.

117
UI for color blindness
Designing user interfaces (UI) that are accessible to individuals with
color blindness is an important consideration for creating inclusive
digital experiences.

Guidelines:

• Do Not Rely on Color: Do not convey critical information solely

through color. Use additional visual cues like icons, labels, shapes,
patterns, or text to convey meaning or indicate status. This way,
users with color blindness can understand information without
relying solely on color distinctions.

• Use Contrast: Ensure sufficient contrast between foreground (text

or icons) and background colors. This helps users with color
blindness differentiate and read the content. Tools like color
contrast checkers can assist in evaluating color combinations for
accessibility compliance.

• Use Colorblind‐friendly Color Palettes: Consider using color

palettes designed with color blindness in mind. These palettes
have colors that are more distinguishable for individuals with
various types of color blindness. Online resources and tools are
available to help generate colorblind‐friendly palettes.

• Test with Users: Conduct usability testing with color blindness

simulations and with individuals who have color blindness. This
can provide valuable feedback on the effectiveness and
accessibility of your UI design. Incorporating user feedback
ensures that your interface is truly inclusive.

• Provide User Customization Options: Enable users to customize

the UI, including color choices or alternative visual
representations, to accommodate their specific needs and
preferences. This empowers users to adapt the interface to their
individual requirements.

118
UI/UX implementation
UI/UX implementation refers to the process of bringing the user
interface (UI) and user experience (UX) designs to life. It involves
translating the design concepts, wireframes, and prototypes into
functional and visually appealing digital products, such as websites,
mobile applications, or software interfaces.

Key aspects:

• Front‐End Development: Front‐end developers use web

technologies such as HTML, CSS, and JavaScript to code the visual
elements and interactive components of the user interface. This
includes working with typography, iconography, grid systems,
mobile‐first design, visual designers, interaction designers, and
more.

• Content Integration: Content integration involves incorporating

textual and media content into the interface. This includes adding
and formatting text, integrating images and videos, and ensuring
that the content is properly displayed and aligned within the UI.
Content integration also involves considering factors such as
readability, accessibility, and localization.

• Testing: Once the UI/UX implementation is complete, usability

testing is conducted to evaluate the effectiveness and
user‐friendliness of the interface. Special testing may be involved
for progressive enhancement, graceful degradation, accessibility,
screen readers, and assistive technologies.

• Optimization: This includes optimizing page load times,

minimizing the use of network resources, and ensuring smooth
transitions and animations. Performance optimization contributes
to a positive user experience by providing fast and responsive
interfaces.

119
Typography
Typography refers to the art and technique of arranging and designing
typefaces (fonts) to make written language readable and visually
appealing. It involves the selection, arrangement, and styling of
typefaces, as well as considerations of spacing, line length, and overall
layout. Typography plays a crucial role in graphic design, web design,
branding, and various forms of visual communication.

Key aspects:

• Typefaces: Typefaces, or fonts, are the different designs and styles

of letterforms. They can range from classic serif fonts (with small
decorative strokes at the ends of characters) to modern sans‐serif
fonts (without those strokes), script fonts, display fonts, and more.

• Readability: Typography should prioritize readability and

legibility. Factors such as font size, line spacing (leading), letter
spacing (tracking or kerning), and contrast between the text and
background are crucial in ensuring that the text is easily readable.

• Emotional Impact: Typography has the power to convey emotions

and set the tone of the message. Different typefaces can evoke a
sense of elegance, playfulness, seriousness, or informality, among
others.

• Hierarchy: Typography helps establish a visual hierarchy by using

different font sizes, weights, and styles to guide the reader’s
attention among headings, subheadings, body text, and other
elements.

• Alignment: The alignment of text, whether left, right, centered, or

justified, can affect the visual flow and readability, and can create
different visual effects and evoke different emotions.

• Consistency: Consistency in typography across a design or brand

helps create a cohesive visual identity and reinforces recognition.
This promotes a unified and professional appearance.

120
Copywriting
Copywriting is the art and skill of writing persuasive and engaging
content with the intention of promoting a product, service, or idea. It
involves crafting written material that grabs attention, communicates a
message effectively, and motivates the reader to take a desired action,
such as making a purchase, signing up for a newsletter, or sharing
information.

Key aspects:

• Understand the audience: Know the target audience’s needs,

desires, challenges, and motivations.

• Write compelling hooks: Make the headline and opening

sentence intriguing and relevant, to gain the reader’s attention.

• Emphasize the Unique Selling Proposition (USP): Focus on the

unique aspects or benefits of a product, service, or idea to
differentiate it from others.

• Persuasive Language and Tone: Utilize persuasive language and a

tone that resonates with the target audience. Evoke emotions, use
storytelling techniques, and incorporate sensory details.

• Provide Call‐to‐Action (CTA): Give a clear compelling prompt for

the reader to take a specific action, such as to sign up, purchase an
item, or share an article.

• Iterate: Edit, proofread, test, and optimize, to ensure that the

content is polished, professional, error‐free, readable, credibile,
and successfully effective.

121
Microcopy
Microcopy refers to the small, concise blocks of text or copy that are
used throughout digital interfaces to guide and assist users in their
interactions. It includes labels, instructions, error messages, tooltips,
button texts, and other short snippets of text that provide clarity,
direction, and feedback to users.

Key aspects:

• Clarity: Microcopy should be clear, concise, and easy to

understand. It should communicate information in a
straightforward manner without ambiguity or jargon.

• Contextual Relevance: Microcopy should align with the user’s

current situation and provide guidance or information that is
directly applicable to their needs at that moment.

• User‐Focused Language: Microcopy should be written in a

user‐centric language that speaks directly to the user, using the
target audience’s preferences, knowledge level, and language
proficiency.

• Tone and Voice: Microcopy should reflect the brand’s tone and
voice to create a consistent experience, whether the brand aims for
a formal, friendly, professional, or playful tone.

• Help and Guidance: Microcopy can serve as a helpful assistant,

providing guidance, tips, and suggestions to users. It can
preemptively answer potential questions or address common
issues.

• Error Handling: Microcopy plays a crucial role in communicating

errors and guiding users through recovery. Error messages should
be concise, specific, and provide actionable suggestions.

122
Iconography
Iconography refers to the use and design of icons, which are visual
representations or symbols that convey meaning or represent concepts,
objects, actions, or ideas. Icons are widely used in various fields,
including user interfaces (UI), graphic design, signage, and
communication to communicate information quickly and effectively.

Key aspects:

• Visual Communication: Icons are designed to be easily

recognizable, using simple shapes, colors, and symbols. They
facilitate quick and efficient communication, especially in
situations where language barriers exist or when information
needs to be conveyed in a compact and visually appealing manner.

• Consistency and Standards: Iconography often follows

established conventions and standards to ensure consistency and
familiarity. Commonly used icons, such as those for navigation
(e.g., hamburger menu) or social media (e.g., Facebook or Twitter
logos), have become widely recognized and understood.

• User Experience: Well‐designed icons enhance the user

experience by providing visual cues and aiding in navigation,
information retrieval, and interaction within user interfaces.

• Space Optimization: Icons can save screen space and reduce

clutter by conveying information concisely. They are particularly
useful in mobile interfaces and small‐sized displays where space is
limited.

• Branding and Recognition: Icons can become associated with

brands, products, or services, contributing to brand recognition
and identity.

• Cultural Adaptation: Iconography can be adapted to different

cultures and contexts by incorporating culturally specific symbols,
colors, or visual cues.

123
Grid system
A grid system in design refers to a structure or framework that helps
organize and align elements within a layout. It provides a systematic way
to create balance, hierarchy, and consistency in the visual presentation
of information. Grid systems are widely used in various design
disciplines, including graphic design, web design, and print layout.

Benefits include improved organization of content, enhanced readability

and usability, streamlined design process and faster production, and
facilitated content updates and modifications.

Key aspects:

• Grid Structure: A grid consists of a series of horizontal and

vertical lines that create a framework of intersecting rows and
columns. The number of columns and the spacing between them
can vary based on the design requirements. Common grid
structures include 12‐column, 16‐column, or flexible grid systems.

• Layout Division: The grid helps divide the layout into discrete
areas or modules. These modules provide designated spaces for
placing content, such as images, text, and other design elements.

• Alignment and Proximity: Grid systems facilitate alignment of

elements by providing a set of guidelines to follow. Elements can
be aligned horizontally or vertically along the grid lines to create a
sense of order and visual cohesion.

• Consistency and Structure: Grids promote consistency by

establishing a set of rules for spacing, margins, and element
placement. This helps create a unified look and feel throughout
the design.

• Responsive Design: Grid systems can adapt to different screen

sizes and devices in responsive design. By using flexible grids, the
layout can automatically adjust and rearrange the content based on
the available screen space.

124
Mobile‐first design
Mobile‐first design is a design philosophy in which the design process
starts with creating a design specifically for mobile devices, and then
scaling it up to larger screens such as tablets and desktops. It focuses on
providing an optimal user experience on smaller screens with limited
space, processing power, and bandwidth.

The approach involves designing for the smallest screen size first,
typically a smartphone, and then working up to larger screens. This
forces designers to prioritize content and features, and to think about
the most efficient ways to present information to users. The mobile‐first
approach also encourages designers to use techniques such as
responsive design and progressive enhancement to ensure that the user
experience is consistent across all devices.

Mobile‐first design is important because mobile devices have become

the primary device for accessing the internet. More than 50% of internet
traffic comes from mobile devices, and this number is only increasing.
Therefore, designing for mobile devices first ensures that users have a
positive experience when accessing content and services on smaller
screens, which can lead to increased engagement and conversions.

In addition, mobile‐first design also has SEO benefits. Google has stated
that mobile‐friendly websites will rank higher in search results, and they
have also started to use mobile‐first indexing, which means that they use
the mobile version of a website as the primary version for indexing and
ranking.

125
Reactive UI
Reactive UI, also known as Reactive User Interface, is an approach to
user interface design and development that focuses on building
responsive and interactive user interfaces. It involves designing UI
components that react to changes in data or user input, providing a
dynamic and engaging user experience. Reactive UI is often associated
with reactive programming frameworks such as React and Angular.

Key aspects:

• Data Binding: Reactive UI frameworks provide mechanisms for

establishing data bindings between the UI components and the
underlying data model. This allows the UI to automatically update.

• Declarative UI: Describe how the UI should look and behave based
on the current state of the data, instead of imperatively
manipulating the UI.

• Component‐Based Architecture: UI elements are reusable

components that encapsulate their own state and behavior. This
promotes code reusability, maintainability, and scalability.

• Reactive Programming: Focus on managing asynchronous data

streams and propagating changes through a stream of events,
including complex event‐driven behavior and asynchronous tasks.

• Event‐Driven Interactions: Handle user interactions and events in

a reactive and composable way, such as by defining event handlers
that react to user input or other events.

• State Management: Reactive UI frameworks typically provide

mechanisms for managing application state in a reactive manner,
making it easier to synchronize the UI with the data model.

126
Low‐code / no‐code
Low‐code and no‐code are software development approaches that aim to
simplify and accelerate the process of creating applications, typically
without the need for extensive coding knowledge or traditional
programming skills. Both approaches allow individuals with varying
technical backgrounds, such as business users or citizen developers, to
build functional software solutions.

• Low‐Code Development: Low‐code platforms provide a visual

development environment that allows users to design and build
applications using a drag‐and‐drop interface and pre‐built
components. These platforms typically include a visual editor,
pre‐configured templates, and a range of building blocks or
modules that can be customized to meet specific requirements.
While some coding may still be necessary for complex
functionality, the emphasis is on reducing manual coding and
increasing productivity.

• No‐Code Development: No‐code platforms take the concept of

low‐code further by eliminating the need for any coding or
programming. These platforms provide a highly intuitive and
visual interface where users can build applications through
configuration, rather than writing code. No‐code tools often offer a
wide range of pre‐built functions, integrations, and workflows that
can be combined and customized to create functional applications.

Benefits include rapid application development, empowering

non‐technical users, increased productivity, bridging the gap between
IS/IT and business, collaboration, and agility.

Low‐code and no‐code development offer advantages in terms of speed

and accessibility, but have limitations in terms of customization and
scalability for highly complex or specialized applications. It’s important
to evaluate the specific requirements and constraints of a project to
determine whether low‐code or no‐code development is the best
approach.

127
Text‐To‐Speech (TTS) and
Speech‐To‐Text (STT)
Text‐To‐Speech (TTS) and Speech‐To‐Text (STT) are two technologies
that enable the conversion of text and speech, respectively, into their
corresponding formats. These technologies have various applications
across different fields, including accessibility, communication, and
automation.

• Text‐To‐Speech (TTS) is technology that converts written text into

spoken words. It takes textual input and uses speech synthesis
algorithms to generate audible speech output. TTS systems
analyze the text and apply linguistic rules and voice synthesis
techniques to produce natural‐sounding speech. The synthesized
speech can be played through speakers, headphones, or other
audio output devices. TTS is commonly used in applications such
as assistive technology for individuals with visual impairments,
language learning tools, e‐books, and voice assistants.

• Speech‐To‐Text (STT) is technology that converts spoken words

into written text. It involves analyzing audio input, typically from a
microphone or a recorded source, and using speech recognition
algorithms to transcribe the spoken words into text form. STT
systems utilize various techniques, including acoustic modeling,
language modeling, and machine learning algorithms, to interpret
and convert speech accurately. STT finds applications in
transcription services, voice‐controlled systems, voice assistants,
real‐time captioning, and more. STT is also known as automatic
speech recognition (ASR).

TTS and STT are often used together in applications that require
seamless voice interaction. For example, voice assistants like Siri,
Google Assistant, and Amazon Alexa utilize both TTS and STT
technologies to understand spoken commands and respond with
synthesized speech.

128
Progressive enhancement
Progressive enhancement is an approach to web or user interface (UI)
design and development that focuses on delivering a basic, functional
experience to all users, then adding enhanced features and functionality
for those with more advanced or capable devices.

Key aspects:

• Core Functionality: Ensure the core functionality of the system is

usable by all users. Ensure proper semantic markup, basic
navigation, and support for essential features that work for
everyone.

• Layered Enhancements: Add layers of enhancements on top of the

core functionality. These can include additional styling,
interactivity, animations, advanced features, or performance
optimizations.

• Device/Context Independence: Ensure the system works well on a

variety of devices, including older browsers, smaller screens, or
limited bandwidth connections. Take into account different user
contexts, such as varying input methods (mouse, touch, keyboard),
screen sizes, or accessibility needs.

• Flexibility: By building a UI in a progressively enhanced manner,

it becomes more flexible and adaptable to future changes in
technology. New features or enhancements can be easily added on
top of the existing foundation without compromising the core
functionality.

• Accessibility: Ensure accessibility by ensuring that users with

disabilities can access and interact with the UI. Enable
implementation of accessible design practices, such as via ARIA
attributes, and provide a more inclusive user experience.

129
Graceful degradation
Graceful degradation, in the context of UI/UX design, refers to a design
approach that ensures a website or application functions and remains
usable even when certain features or technologies are not supported or
available in the user’s environment. Graceful degradation is the
complement of progressive enhancement.

Key aspects:

• User Experience: Aim to provide a positive user experience for all

users, regardless of their device, browser, or technological
limitations. Ensures that even if a user’s system does not support
certain features, they can still access and interact with the core
functionality of the website or application.

• Design Prioritization: Identify and prioritize essential features

and content that are fundamental to the user experience. These
core elements should be designed to work across different
platforms and be accessible to all users.

• Feature Detection: Use feature detection techniques to identify

the capabilities of the user’s device or browser. By detecting what
features are available, the design can adapt and provide an
appropriate user experience that suits the user’s environment.

• Responsive Design: Enable the layout and content to adapt and

adjust based on the user’s screen size and device capabilities. This
ensures that the user experience remains optimal, regardless of
the device being used.

• Robust Error Handling: Handle situations if a capability is

unavailable, such as by providing suitable error messages and
notifications that informative and clear. Provide alternative paths
or options for users to continue their journey.

130
Data schema
A data schema is the structure or blueprint of a database. It defines the
organization, storage, and relationships among data elements, tables,
views, and other database objects. The schema provides a framework for
organizing data and ensuring data integrity and consistency.

A data schema typically includes a description of each data element or

attribute, such as its data type, size, and format. It also defines the
relationships among the tables or views, including the primary and
foreign keys used to connect them. In addition, the schema may define
views, stored procedures, and other database objects.

The schema is usually created using a data definition language (DDL),

such as SQL, and is stored in the database catalog. It is important to note
that the schema can be modified as needed to accommodate changes in
the data or business requirements.

Common types:

• Entity‐Relationship (ER) schema: This type of schema defines the

entities or objects in the database, as well as their attributes and
relationships.

• Relational schema: This type of schema defines the tables,

columns, and relationships in a relational database.

• Object‐oriented schema: This type of schema defines the objects,

classes, and inheritance relationships in an object‐oriented
database.

• Document schema: This type of schema defines the structure and

relationships of documents in a document‐oriented database.

131
Object‐Relational Mapper (ORM)
An Object‐Relational Mapper (ORM) is a programming technique that
allows developers to interact with a relational database using
object‐oriented programming (OOP) concepts. It provides a higher‐level
abstraction layer between the application code and the database,
eliminating the need for manual SQL queries and reducing the
complexity of data access.

Key aspects:

• Mapping Objects to Tables: With an ORM, developers can define

classes and objects in their application code that correspond to
tables and records in a relational database.

• Querying Language: ORMs often provide a querying language or a

query builder interface that allows developers to express database
queries using object‐oriented syntax. This abstracts away the
specifics of the underlying database language (e.g., SQL) and
provides a more developer‐friendly way to use data.

• CRUD Operations: ORMs often provide methods and APIs to

perform common database operations such as Create, Read,
Update, and Delete (CRUD). Instead of writing raw SQL queries,
developers can use the ORM’s API methods to interact with the
database.

• Data Relationships: ORMs facilitate the management of

relationships between database tables/entities. An ORM allows
developers to define relationships such as one‐to‐one, one‐to‐many,
and many‐to‐many, and handles the complexities of joins across
tables.

• Data Integrity: ORMs often include features for data validation

and integrity. An ORM allows developers to define constraints and
rules on the object model, ensuring that the data stored in the
database adheres to validation criteria and integrity constraints.

132
Internationalization and localization
Internationalization and localization are steps in the process of creating
software or a website that can be used by people in different regions of
the world, from different cultures, and speaking different languages.

Internationalization (often abbreviated as i18n) is the process of

designing software or a website so that it can be easily localized for
different languages, cultures, and regions.

• Process: Make sure that all user interface text is separate from the
code, that dates, times, and other regional settings are properly
handled, and that the software is designed to work with a wide
range of character sets and other language‐specific features.

• Goal: Make it easy to create localized versions of the software in

the future, without having to make significant changes to the
underlying code.

Localization (often abbreviated as l10n) is the process of translating

software or a website into different languages and adapting it for use in
different regions.

• Localization Translate all user interface text, adapting the software

to work with local date and time formats, currencies, and other
region‐specific settings, and making any other necessary changes
to make the software more appropriate for use in that region.

• Goal: Create a version of the software that is easy and natural for
users in that region to use, even if they do not speak the same
language as the original developers.

In short, internationalization is the process of making software ready for

localization, while localization is the process of adapting software to
work well in a particular region.

133
Internationalization and localization:
steps
Internationalization typical steps:

1. Plan and Analyze: Define the scope of the internationalization

effort, identify the target markets, and analyze the cultural and
linguistic requirements of those markets. Assess the existing
software or product design for potential internationalization
issues.

2. Design and Develop: Create the product or software using best

practices for internationalization. Ensuring that the product can
handle various character sets, date and time formats, and other
regional differences.

Localization typical steps:

1. Translate: Translate all text, audio, and video content must be

translated into the language of the target market.

2. Adapt: Adapt the content to the culture of the target market. This
includes adapting images, symbols, colors, and other visual
elements to be more appropriate for the target market.

3. Format: Adjust text to accommodate different character sets or

writing systems. Dates, times, and other information may also
need to be presented in a different format.

Shared steps:

1. Test: Verify the software’s internationalization and localization, in

each target market.

2. Maintain: Offer maintenance and support, to ensure that the

product continues to meet the needs of each target market.

134
Locale
In the context of UI/UX design, a locale refers to the specific linguistic
and cultural settings used to adapt a user interface for different regions
or languages. It involves designing and implementing UI elements,
content, and interactions that cater to the preferences and expectations
of users in specific locales.

Key aspects:

• Languages: Support multiple languages based on the user’s locale.

Translate user interface elements, labels, menus, messages, and
other text into target languages. Handle text expansion, text
contraction, or text direction changes that may occur.

• Formats: Respect the date, time, and number formatting

conventions of the target locale, including the order of date
components, time representation, and numeric separators.

• Icons, Symbols, and Imagery: Be mindful of using culturally

appropriate icons, symbols, and imagery that resonate with the
target audience.

• Units: Adapt units of measurement based on the locale. Use

appropriate systems such as metric or imperial units.

• User Research: Conduct user research to gain insights into the

preferences, expectations, symbolisms, gestures, and behaviors of
users in different locales.

• Testing: Validate the UI in different locales. Test the translated

content, text truncation, text expansion, formatting, and the
overall user experience.

135
Locale codes
In the context of localization and internationalization, a locale is a
combination of language code, country code, script code, region code,
and variant code. This defines a specific linguistic and cultural context.
For example, “en‐US” represents English in the United States.

Key aspects:

• Language Code: Represents a specific language. It is typically

represented by a two‐letter or three‐letter code defined by
international standards, such as ISO 639‐1 or ISO 639‐3. For
example, “en” represents English.

• Country Code: Represents a specific country. It is usually

represented by a two‐letter code defined by ISO 3166‐1 alpha‐2. For
example, “US” represents the United States.

• Script Code: Represents a writing script or system used for a

specific language. It identifies the characters and writing
conventions employed in a particular writing system. Some
common script codes include Latin (Latn), Arabic (Arab), Cyrillic
(Cyrl), and Devanagari (Deva).

• Region Code: Represents a specific geographical region or

territory within a country. It is defined by ISO 3166‐2 or UN M.49
standards. Region codes can help define region‐specific variations
or preferences within a country. For example, “US‐CA” represents
the United States ‐ California.

• Variant Code: Represents additional variations or dialects within a

language or region. It can be used to identify specific linguistic or
cultural variations. Variant codes are not standardized and can
vary depending on the context.

136
Bidirectional text (bidi)
Bidirectional (bidi) text refers to text that combines both left‐to‐right
(LTR) and right‐to‐left (RTL) scripts within the same line or paragraph.
This is commonly found in languages such as Arabic, Hebrew, Persian,
and Urdu, where the writing direction alternates between RTL and LTR
scripts.

Designing user interfaces (UI) and user experiences (UX) that

accommodate bidirectional text requires special considerations to
ensure readability and proper alignment.

Key aspects:

• Text Direction: Ensure that LTR scripts and RTR are aligned and
displayed correctly. The text direction should follow the natural
reading order of the respective languages.

• Layout and Alignment: Adapt the layout and alignment of UI

elements to support bidirectional text. For example, in RTL,
element alignment may be mirrored compared to LTR.

• Typography and Font Selection: Choose fonts that support

bidirectional text rendering. Ensure the fonts handle both LTR and
RTL scripts effectively and maintain readability.

• Interaction and Navigation: Consider the impact of bidirectional

text on interaction and navigation elements. For example, ensure
that indicators are positioned correctly based on the text direction.

• Text Editing and Input: Provide a text input and editing experience
that accommodates bidirectional text. Allow users to switch
between LTR and RTL input modes as necessary. Ensure that the
cursor and text selection behavior follows the directionality.

• Testing: When designing for bidirectional text, involve native

speakers or experts of the target languages in the testing and
feedback process.

137
UI/UX testing
UI/UX testing is a process of evaluating and assessing the usability,
effectiveness, and user satisfaction of a user interface (UI) or user
experience (UX) design. The primary goal is to identify any usability
issues, such as pain points or areas for improvement in the design.

Typical approaches:

• User Testing: Give users specific tasks to perform. Observe their

interactions, behaviors, and feedback.

• Split Testing a.k.a. A/B Testing: Show different versions of the

UI/UX design to separate user groups to determine which version
performs better in terms of user engagement, conversions, or
other metrics.

• Surveys and Questionnaires: Ask users to provide feedback

through structured surveys or questionnaires to gather their
opinions, preferences, and suggestions for improvement.

• Heatmaps and Click Tracking: Track and visualize user

interactions, such as mouse movements, clicks, and scrolling
behavior, to identify patterns, popular features, or areas that users
struggle with.

• Eye‐Tracking: Use specialized hardware or software to track users’

eye movements, to understand where their attention is focused.

• Expert Evaluation: Enlist experienced UI/UX professionals to

review the design and provide their expert analysis, identifying
potential issues or suggesting improvements based on industry
practices.

138
Split testing
Split testing, also known as A/B testing, is a method used to compare two
or more variations of a webpage, interface, or marketing element to
determine which one performs better in achieving a specific goal. It is a
data‐driven approach that helps optimize and improve the effectiveness
of digital experiences by systematically testing different design, content,
or functionality options.

General steps:

1. Goal Identification: Define the specific goal or metric that you

want to improve or optimize. This could be increasing
click‐through rates, conversion rates, engagement, or any other
measurable outcome.

2. Variations Creation: Create two or more versions of the element

being tested, with each version representing a different variation.

3. Random Allocation: Randomly assign users or a subset of users to

each variation. This helps ensure a fair distribution of users across
the different variations and minimizes bias.

4. User Exposure: Expose each user to one of the variations when

they interact with the webpage, interface, or marketing element.

5. Data Collection: Collect data on user interactions and behaviors

for each variation. This can include metrics such as click‐through
rates, conversion rates, engagement time, or any other relevant
data point.

6. Statistical Analysis: Analyze the collected data to determine if

there is a statistically significant difference between the variations
in terms of the goal metric.

139
End‐to‐end testing
End‐to‐end testing is a type of software testing that is designed to verify
that an application or system is functioning as expected from beginning
to end. This testing method is used to test the functionality of an
application or system as it would be used by a real user. It involves
testing the application’s user interface, all the different components and
modules of the system, and the integration between these components.

End‐to‐end testing is performed to ensure that the application or system

is functioning properly and meeting the user’s needs. The testing is done
from the user’s perspective, meaning that it is designed to simulate how
a user would interact with the application or system. The testing is
typically performed after unit testing and integration testing have been
completed.

End‐to‐end testing can be performed manually or using automated

testing tools. Automated testing tools are often used because they can
perform the tests faster and more accurately than manual testing. These
tools can simulate user interactions with the application or system, and
they can verify that the system is behaving as expected.

The goal of end‐to‐end testing is to catch defects early in the software

development life cycle, before they can affect the end user. It can help to
identify issues with the application or system, such as broken links,
performance problems, and functional issues. By testing the entire
system, end‐to‐end testing can ensure that all the different components
of the system are working together as expected and delivering the
desired results.

140
Acceptance testing
Acceptance testing is a type of software testing that evaluates whether a
software application meets the requirements and specifications of the
client or user. This type of testing is conducted to ensure that the
software application is ready for deployment and use by end‐users.

The goal of acceptance testing is to verify that the software meets the
client’s requirements and performs as expected. The testing process is
typically conducted by end‐users, business analysts, or quality
assurance professionals, who evaluate the application’s functionality,
usability, and performance.

Two main types:

• Functional acceptance testing: Assess the software’s functionality,

including its features, behavior, and compliance with the client’s
requirements.

• Non‐functional acceptance testing: Assess the application’s

performance, scalability, security, and other non‐functional
aspects.

The acceptance testing process generally involves creating test cases,

scenarios, and scripts that replicate real‐world scenarios and user
interactions. Testers may also use automated testing tools to streamline
the testing process and ensure that the software is tested thoroughly.

The acceptance testing process usually occurs after the completion of

integration testing and system testing. Successful completion of
acceptance testing is a critical milestone for software development,
indicating that the software is ready for release to end‐users.

141
Localization testing
Localization testing is a type of software testing that focuses on ensuring
that the software or application can be adapted to different languages,
cultures, and regions without losing functionality or usability.
Localization testing is typically carried out by a team of testers who are
familiar with the target regions and languages.

Key aspects:

• User Interface (UI) and User Experience (UX): The UI/UX of the
application should be tested to ensure that it can handle different
languages and scripts without breaking the design or functionality.

• Content: The content of the application, including text, images,

and videos, should be tested to ensure that they can be translated
and localized without losing the intended meaning.

• Functionality: The functionality of the application should be

tested to ensure that it can handle different date and time formats,
currencies, and other local settings.

• Cultural differences: Localization testing should also take into

account the cultural differences between different regions, such as
different symbols, customs, and social norms.

• Legal compliance: Localization testing should ensure that the

application complies with local laws and regulations. This may
involves guidance from legal experts in the region.

142
Accessibility testing
Accessibility testing is the process of evaluating a website, application,
or program to ensure it is usable by people with disabilities. The goal is
to ensure that everyone, regardless of their ability, can use the
application or website without any barriers.

Accessibility testing helps to ensure that people with disabilities have

equal access to digital services and content, and it can also help
businesses avoid potential legal issues related to accessibility.

Key aspects:

• Compliance with Accessibility Standards: Accessibility standards

are a set of guidelines and rules that are designed to ensure that
digital content and services are accessible to people with
disabilities. Common accessibility standards include the Web
Content Accessibility Guidelines (WCAG), the Americans with
Disabilities Act (ADA), and the Rehabilitation Act.

• User Testing: User testing involves working with people with

disabilities to evaluate the accessibility of an application or
website. This can help identify potential barriers or issues that
may not be apparent during other types of testing.

• Automated Testing: Automated testing involves using software

tools to test an application or website for accessibility issues.
These tools can help identify issues related to color contrast, font
size, and other factors that may impact accessibility.

• Manual Testing: Manual testing involves evaluating an application

or website for accessibility issues using a combination of human
expertise and software tools. Manual testing is often used in
conjunction with other types of testing to ensure that all potential
accessibility issues are identified and addressed.

143
Screen reader testing
Screen reader testing is the process of evaluating the accessibility and
usability of a digital interface for individuals who rely on screen readers
to access content. It involves assessing how well a website, application,
or other digital product can be perceived, navigated, and interacted with
using a screen reader.

Key aspects:

• Screen Reader Selection: There are several screen readers

available, such as JAWS, NVDA, and VoiceOver. Choose the screen
reader(s) that align with your target audience and platform
requirements.

• Interaction: Use the screen reader to navigate through the system.

Ensure that all elements, such as headings, links, buttons, form
controls, input prompts, error messages, and landmarks, are
properly recognized and announced. Verify that users can interact
with the interface using keyboard commands or voice commands,
and that interactive elements respond as expected.

• Alternative Content: Assess the accessibility of multimedia

content, such as videos, audio players, and interactive components.
Check if the screen reader provides information about the
presence of multimedia, offers controls for playback, and conveys
relevant details or alternatives.

• Usability: Evaluate the overall usability and user experience for

screen reader users. Note of any usability issues, navigation
challenges, or difficulties. Plan to make necessary improvements.

• Assistive Technology Compatibility: In addition to screen readers,

consider testing compatibility with other assistive technologies
that users may rely on, such as screen magnifiers, speech
recognition software, or alternative input devices.

144
Benchmark testing
Benchmark testing, also known as benchmarking, is the process of
comparing the performance of a computer system, software application,
or other technology against a standard or reference point. The goal of
benchmark testing is to evaluate the speed, efficiency, and overall
performance of a system or application, and to identify areas for
improvement. It is important to choose appropriate benchmarks and
testing methods and to interpret the results carefully, as they may not
always be directly comparable or indicative of real‐world performance.

Common types:

• Performance testing: This involves testing the performance of a

system or application under different conditions and workloads.

• Performance regression testing: This involves testing the

performance of a system or application after changes or updates
have been made.

• Load testing: This involves testing the ability of a system or

application to handle a large amount of traffic or activity.

• Stress testing: This involves testing the ability of a system or

application to handle extreme conditions or situations.

• Compatibility testing: This involves testing the compatibility of a

system or application with different operating systems, devices, or
software environments.

145
Shift‐left testing
Shift‐left testing is an approach to software quality assurance that
involves identifying and fixing defects early in the development process.
The goal of shift‐left testing is to move testing activities earlier in the
software development lifecycle, rather than waiting until the end of the
development cycle to test the code. This approach enables developers to
identify and fix defects before they become more costly and
time‐consuming to fix later in the development process.

The term “shift‐left” refers to the idea of shifting the testing process to
the left on a timeline of the software development process. In traditional
software development, testing is often performed after development is
complete, or “shifted right” on the timeline. However, shift‐left testing
involves testing the code as it is being written, ensuring that defects are
detected and corrected as soon as possible.

Shift‐left testing can include a variety of techniques, such as unit testing,

integration testing, acceptance testing, UI/UX testing, localization
testing, and more.

Shift‐left testing also involves using tools and techniques that support
early detection of defects. For example, code reviews and static analysis
tools can help identify defects in the code before it is tested. Continuous
integration and continuous testing can help detect defects early in the
development process, ensuring that they are fixed before they impact
the quality of the final product.

Overall, shift‐left testing is a powerful approach to software quality

assurance that can help reduce the cost and time associated with fixing
defects later in the development process. By focusing on detecting and
fixing defects early, shift‐left testing can help ensure that the final
product meets the desired quality standards.

146
Heatmap
In the context of UI/UX design, a heatmap is a visual representation of
data that illustrates the areas of a user interface where users focus their
attention or interact the most. It provides valuable insights into user
behavior, helping designers understand which elements of a design are
engaging, effective, or potentially problematic. Heatmaps can track
UI/UX interactions such as clicks, taps, and cursor movement. With
more‐advanced setups, heatmaps can track biometrics such as eye
movement and attention.

General steps:

1. • Collection: User interaction data is collected during usability

testing, user research, or actual user sessions. This data can
include mouse movements, clicks, scrolls, or touch gestures,
depending on the platform or device being used.

2. Visualization: The collected data is processed and visualized in the

form of a heatmap. Typically, heatmaps use a color spectrum,
ranging from cool colors (e.g., blue) to warm colors (e.g., red), to
represent the intensity or frequency of user interactions. Hotspots
with more user activity appear as areas with warmer colors, while
less active or ignored areas appear as cooler colors.

3. Analysis and Insights: Designers analyze the heatmap data to gain

insights into user behavior. They can identify patterns, areas of
high or low engagement, potential usability issues, or
opportunities for improvement. Heatmaps can inform decisions
regarding content placement, call‐to‐action buttons, visual
hierarchy, and other aspects of the user interface. e user interface.

147
Artificial Intelligence (AI)
Artificial Intelligence (AI) is a branch of computer science that focuses
on creating machines that can perform tasks that typically require
human intelligence. AI involves the development of algorithms and
computer programs that can learn and make decisions based on data. It
aims to create intelligent agents, which are systems that can perceive
their environment, reason about it, and take actions to achieve specific
goals.

AI has many subfields, including machine learning, natural language

processing, robotics, computer vision, and expert systems. Machine
learning is a subset of AI that focuses on the development of algorithms
that enable computers to learn from data and improve their
performance over time. Natural language processing involves teaching
computers to understand and interpret human language. Robotics
focuses on the development of intelligent machines that can perform
physical tasks. Computer vision involves teaching computers to
interpret and analyze images and videos, while expert systems involve
creating systems that can make decisions based on expert knowledge in
a specific domain.

AI has many real‐world applications, including speech recognition,

image recognition, natural language processing, autonomous vehicles,
and predictive analytics. AI has the potential to revolutionize many
industries, including healthcare, finance, transportation, and
manufacturing. However, AI also raises many ethical and societal
concerns, including job displacement, bias, privacy, and security.
Therefore, it is important to ensure that AI is developed and used
responsibly and ethically.

148
AI UI/UX
AI UI/UX (Artificial Intelligence for User Interfaces and User
Experiences) refers to the application of artificial intelligence
technologies to enhance and improve the user interface and user
experience of digital products or services.

Examples:

• Personalization: AI can analyze user data and behavior to provide

personalized experiences. It can adapt the user interface, content,
and recommendations, improving engagement and satisfaction.

• Natural Language Processing (NLP): NLP allows AI systems to

understand and interpret human language. It enables chatbots,
voice assistants, and other conversational interfaces.

• Intelligent Search and Recommendations: AI algorithms can

analyze user data to provide more accurate and relevant search
results, product recommendations, or content suggestions.

• Predictive Analytics: AI can analyze user behavior and patterns to

predict user preferences, needs, or actions. This enables
anticipatory design, where the UI can proactively provide relevant
options.

• Automation and Smart Assistants: AI‐powered automation can

streamline and simplify complex tasks, such as for scheduling,
reminders, completing forms, and even complex workflows.

• Emotion Recognition: AI algorithms can be used to analyze user

facial expressions, voice tone, writing sentiment, or other
biometric data, to adapt the user experience to be more
empathetic and helpful.

149
AI form fill
AI form fill, also known as form autofill or autocomplete, refers to the
functionality provided by artificial intelligence systems to automatically
populate form fields with relevant information, reducing the effort
required for users to enter data manually.

When enabled, AI form fill utilizes various techniques to recognize and

extract relevant information from a user’s previous interactions, stored
data, or external sources. This information may include personal details
like name, address, email, phone number, and other commonly
requested data points.

Typical steps:

• Data Collection: The AI system collects and stores relevant data

from various sources, such as user inputs, previous form
submissions, user profiles, or external data providers.

• Data Analysis and Prediction: The system analyzes the collected

data, identifies patterns and relationships, and predicts the most
likely values for each form field based on the context and user
history.

• Autofill Suggestions: Based on the predictions, the AI system

generates autofill suggestions or recommendations for each form
field. These suggestions are usually displayed as dropdown menus
or overlays near the respective form fields.

• User Confirmation: The user reviews the autofill suggestions and

selects the appropriate values for each field. They can accept the
suggestions as‐is or make changes if necessary.

• Form Field Population: Once the user confirms the autofill

selections, the AI system populates the corresponding form fields
with the chosen values automatically.

150
AI for product development
AI for product development refers to the process of creating and
enhancing products that incorporate artificial intelligence (AI)
technologies. It involves leveraging AI algorithms, machine learning
techniques, and data analysis to develop intelligent and innovative
solutions. AI can be integrated into various aspects of the product
development lifecycle, from ideation and design to implementation and
improvement.

Examples:

• Ideation: Begin by identifying a market need, or customer use

case, that can be addressed using AI capabilities.

• Data Collection: Identify relevant AI model training data, then

collect it, clean it, process it, and secure it.

• Model Development: Create the AI model using machine learning

algorithms. Select appropriate algorithms, design the model
architecture, and train it on data.

• Implementation: Add the AI model into software applications,

hardware systems, or cloud service. Consider system quality
attributes such as security and scalability.

• User Experience: Design user interfaces and user experiences that

incorporate AI capabilities, where the AI is intuitive, seamless, and
provides value.

• Testing: Ensure the AI product and model perform as expected,

and includes tests for accuracy, robustness, and reliability.

• Continuous Improvement: Collect user data and feedback, and

monitor product performance, to identify areas for enhancement.

• Ethical Considerations: Ensure fairness, avoid biases, manage

privacy, and maintain transparency in how AI is used in the
product.

151
AI content generators
AI content generators, also known as AI writing tools or AI text
generators, are software applications that use artificial intelligence (AI)
algorithms to automatically generate human‐like written content. These
tools leverage natural language processing (NLP) and machine learning
techniques to analyze and understand text data, and then generate new
content based on that understanding.

Benefits include increased efficiency, increased consistency, brand

alignment, and idea generation. Limitations include quality control
issues, ethical and legal considerations, lack of creativity and nuance,
and dependencies on training data.

Key steps:

• Data Analysis: AI content generators are trained on vast amounts

of existing text data to learn patterns, grammar, language
structures, and writing styles. This training helps the AI model
develop a contextual understanding of different topics and writing
genres.

• Language Generation: When provided with a prompt or topic, the

AI content generator uses its trained model to generate text that is
coherent, relevant, and resembles human‐written content. The
generator can produce various types of content, such as articles,
blog posts, product descriptions, social media posts, and more.

• Customization and Control: Users can often customize certain

parameters of the generated content, such as the tone, style,
length, or specific keywords to be included. This allows for some
level of control over the output to align it with specific
requirements or brand guidelines.

152
AI image generation
AI image generation refers to the process of using artificial intelligence
techniques to create new and original images. AI image generation has a
wide range of applications, including computer graphics, art, design,
and entertainment.

Key aspects:

• Data: AI models for image generation require a large diverse

dataset of images to learn from. This dataset can include various
types of images, such as photographs, paintings, or illustrations.

• Learning: During the training process, the AI model learns to

generate images by adjusting its internal parameters based on the
comparison and feedback provided by the discriminator network.
This can involve optimizing the model’s parameters to minimize
the difference between the generated images and real images from
the training dataset.

• Style Transfer and Variation: AI image generation techniques can

also incorporate style transfer, where the model learns to generate
images in a particular artistic style based on training data that
includes various artistic styles. This allows for the creation of
images that resemble specific visual styles.

• Control and Manipulation: Advanced AI image generation

techniques allow for control and manipulation of generated
images. For example, by modifying the input parameters or
vectors that represent certain features of the image, users can
influence the generated image’s characteristics, such as its color,
shape, or content.

153
AI internationalization/localization
Artificial Intelligence (AI) can play a significant role in the processes of
internationalization and localization, which involve adapting products
or services to different languages, cultures, and regions.

Key areas:

• Language Translation: AI‐powered language translation tools can

facilitate the translation of content, making it easier to localize
products or services for different markets.

• Natural Language Processing (NLP): NLP is a subfield of AI that

focuses on the interaction between computers and human
language, to extract meaning from text, such as to provide AI
chatbots.

• Content Adaptation: AI can analyze data related to user behavior,

preferences, and cultural nuances to customize content and user
interfaces to align with cultural preferences and sensitivities.

• Voice and Speech Recognition: AI‐powered voice recognition

technology can enable localization of voice‐based interactions,
such as for different languages and accents.

• User Behavior Analysis: AI can analyze user behavior data to

identify regional preferences and adapt the user experience
accordingly, such as for specific target groups or entire countries.

• Cultural Sensitivity: AI can help identify and avoid cultural biases

or inappropriate content that may arise during the localization
process, such as by flaggin potentially insensitive language or
imagery.

154
Books about UI/UX
Some popular and highly recommended books in the field…

“The Design of Everyday Things” by Don Norman: Exploring the

principles of design and usability, this book delves into the psychology
behind human‐centered design and provides insights into creating
intuitive and functional user experiences.

“Designing Interfaces” by Jenifer Tidwell: Covering a wide range of

interface design patterns and techniques, this book serves as a
comprehensive guide to designing effective and aesthetically pleasing
user interfaces.

“Universal Principles of Design” by William Lidwell, Kritina Holden, and

Jill Butler: Although not specifically focused on UI/UX design, this book
provides a collection of 125 design principles that can be applied to
various design disciplines, including user experience design.

“The Elements of User Experience” by Jesse James Garrett: Providing a

holistic view of the user experience design process, this book covers
various aspects, including strategy, scope, structure, and surface.

“Interaction Design: Beyond Human‐Computer Interaction” by Helen

Sharp, Yvonne Rogers, and Jenny Preece: Offering a comprehensive
overview of interaction design principles and methods, this book covers
topics such as user research, prototyping, and evaluation.

“Designing for Interaction” by Dan Saffer: This book covers a range of

topics, including interaction design principles, patterns, and techniques,
and provides practical advice for designing interactive experiences.

“Information Architecture: For the Web and Beyond” by Louis Rosenfeld

and Peter Morville: Focusing on information architecture, this book
explores how to organize and structure information in a way that
enhances usability and findability.

155
Universal Principles of Design by
William Lidwell et al.
The book “Universal Principles of Design” is written by William Lidwell,
Kritina Holden, and Jill Butler. It is a reference guide that explores 125
fundamental principles of design that can be applied across various
disciplines, including graphic design, product design, user experience
design, architecture, and more. The boo provides explanations,
examples, and practical applications of each principle.

Key aspects:

• Aesthetic‐Usability Effect: Aesthetically pleasing designs are

perceived as more usable and effective.

• Feedback: Provide clear immediate feedback to users to confirm

their actions or inform them about the system’s status.

• Fitts’s Law: The time required to reach a target is based on the

target’s size and distance, helping inform the placement and sizing
of interactive elements.

• Hierarchy: Design visual elements to create a clear hierarchy of

importance, guiding users’ attention and understanding.

• Mapping: The relationship between controls and their effects

should be intuitive and closely aligned to the user’s mental model.

• Progressive Disclosure: Present information and functionality in

a way that reveals complexity gradually, allowing users to focus on
the most relevant information first.

• Simplicity: Strive for simplicity in design by removing

unnecessary complexity and clutter. Make the user experience
more intuitive and efficient.

• Error Prevention: Design to minimize the occurrence of errors.

Provide safeguards or warnings when errors may occur.

156
The Design of Everyday Things by
Donald Norman
“The Design of Everyday Things” is a book written by Donald Norman, a
cognitive scientist and usability engineer. It explores the fundamental
principles of design and usability, focusing on how the design of
everyday objects and systems can either enhance or hinder user
experience.

Key aspects:

• Discoverability: The ease with which users can understand and

discover the functions and features of an object or system. Norman
emphasizes the importance of providing clear and intuitive cues.

• Affordances: The provision of feedback to users about the status

and outcomes of their actions. Norman explains how
well‐designed feedback and affordances can guide users and their
interactions.

• Conceptual Models: The mental representations that users

develop to understand how a system or object works. Norman
explores the importance of aligning the conceptual model with the
system’s actual behavior.

• Error Handling: Norman discusses the significance of designing

error messages that provide meaningful information, as well as
implementing systems that minimize the likelihood of errors in
the first place.

• Human‐Centered Design: The approach of designing products and

systems that prioritize the needs, capabilities, and limitations of
users. Norman emphasizes the importance of empathy and
understanding user behavior and mental models when designing
for usability.

157
Envisioning Information by Edward R.
Tufte
“Envisioning Information” is a book written by Edward R. Tufte, a
professor emeritus of statistics and information design. The book
explores the effective visual representation of data and information,
emphasizing the principles and techniques for presenting complex
information in a clear and engaging manner, such as via charts, graphs,
maps, diagrams, and illustrations.

Key aspects:

• Data‐Ink Ratio: Maximize the proportion of ink or graphical

elements that directly represent the data, while minimizing
non‐essential decoration or “chartjunk.”

• Graphical Integrity: Maintain the integrity of the data when

creating visual representations. Tufte discusses methods to avoid
distortion, misleading scales, or inappropriate visual encodings.

• Visualizing Relationships: Represent relationships and

comparisons between variables, such as through scatter plots, bar
charts, and line graphs. Highlight patterns and insights.

• Multivariate Data: Visualize and communicate data with multiple

variables or dimensions, such as by using small multiples, parallel
coordinate plots, and color mapping.

• Narratives and Explanatory Graphics: Use visual storytelling and

explanatory graphics to communicate complex concepts or
processes. Guide the viewer through a narrative by carefully
designing the flow and sequence of information.

• Typography and Information Design: Leverage typography in

information design and its impact on legibility, hierarchy, and
visual coherence. Choose appropriate typefaces, font sizes, and
text formatting, to enhance clarity and readability.

158
Don’t Make Me Think by Steve Krug
“Don’t Make Me Think” is a book written by Steve Krug that focuses on
web usability and user experience design. It offers practical advice and
insights for creating intuitive and user‐friendly websites, so users don’t
need to think too much or make unnecessary decisions.

Key aspects:

• Usability Testing: Conduct usability testing to gather feedback

from real users, to identify usability issues. Krug emphasizes the
value of observing users interacting with a website.

• Clear Concise Communication: Provide clear and concise content

that effectively communicates the purpose, functionality, and
relevance of a website. Use straightforward language.

• Visual Hierarchy and Navigation: Establish a clear visual

hierarchy and intuitive navigation structure. Use visual cues,
consistent conventions, and easily identifiable links and buttons.

• Scannability and Readability: Design content that is easy to scan

and read. Use headings, subheadings, bullet points, and concise
paragraphs to make text more digestible for users.

• Eliminating Unnecessary Clutter: Simplify the interface by

removing unnecessary elements, distractions, or information
overload. A clean and focused design helps users find what they
need.

• Form Design and User Input: Design user‐friendly forms and

minimize friction during the input process. Streamline form fields.
Provide clear instructions. Utilize input validation to minimize
errors.

• Mobile and Responsive Design: Consider mobile users and

implement responsive design principles. Design websites that
adapt to different screen sizes and devices.

159
Forms that Work by Caroline Jarrett et
al.
“Forms that Work: Designing Web Forms for Usability” is a book written
by Caroline Jarrett and Gerry Gaffney. It focuses on the design and
usability of web forms, providing practical guidance and best practices
for creating forms that are user‐friendly and effective.

Key aspects:

• User‐Centered Design: The book emphasizes the need to

understand the goals, expectations, and behaviors of users and
align form design decisions with their needs and preferences.

• Form Structure and Flow: The book explores techniques for

structuring forms in a logical and intuitive manner, minimizing
cognitive load, and guiding users through the form completion
process.

• Labels and Instructions: The book discusses strategies for crafting

clear concise labels and instructional text, to help users
understand the purpose of form fields and how to complete them
accurately.

• Error Handling: Techniques for preventing errors and providing

effective error messages and validation feedback. Jarrett discusses
how to design forms that minimize the likelihood of user errors
and how to communicate errors in helpful and friendly ways.

• Accessibility: Considerations for designing web forms that are

accessible to users with disabilities. The book provides guidance
on designing for keyboard accessibility, using proper markup, and
addressing the needs of users with visual impairments.

• Mobile‐Friendly Forms: Strategies for designing forms that work

well on mobile devices. Jarrett explores techniques such as
responsive design, touch‐friendly input controls, and simplified
layouts to optimize the form experience on small screens.

160
The Humane Interface by Jef Raskin
“The Humane Interface: New Directions for Designing Interactive
Systems” is a book written by Jef Raskin, an American human‐computer
interaction expert. The book explores Raskin’s vision for designing user
interfaces that are more intuitive, efficient, and user‐friendly.

Key aspects:

• User‐Centered Design: Prioritize the needs, goals, and mental

models of the users. Understanding user behavior and cognitive
processes is crucial for creating interfaces.

• Direct Manipulation: Ensure users can interact with objects and

actions in a natural and intuitive way, because this reduces the
cognitive load and improves user engagement.

• Modeless Interfaces: Use modeless interfaces, where the system’s

behavior is consistent across contexts, because mode‐switching
causes confusion and errors.

• Simplification: Simplify complex tasks and interactions to make

them more manageable for users. Reducing unnecessary steps.
Automate repetitive actions.

• Information Retrieval: Emphasis useful search algorithms,

browsing interfaces, and information hierarchies.

• Error Prevention and Recovery: Designing systems that minimize

the likelihood of errors, provide clear feedback, and offer intuitive
recovery mechanisms.

161
UI/UX quotations
These quotes highlight the importance of user experience, simplicity,
attention to detail, and the integration of form and function in design.
They serve as reminders of the fundamental principles and mindset
required for effective UI/UX design.

“Design is not just what it looks like and feels like. Design is how it
works.” ‐ Steve Jobs

“User experience is everything. It always has been, but it’s still

undervalued and under‐invested in.” ‐ Evan Williams

“Simplicity is the ultimate sophistication.” ‐ Leonardo da Vinci

“The details are not the details. They make the design.” ‐ Charles Eames

“The best design is the one you don’t notice.” ‐ William Gibson

“Design is not just about making things look good; it’s about making
things work better.” ‐ Sahil Lavingia

“The user’s perception is your reality.” ‐ Kate Zabriskie

“Design is where science and art break even.” ‐ Robin Mathew

“The future of UX design lies in embracing technology while keeping the

human element at the forefront.” ‐ Whitney Hess

“Design adds value faster than it adds costs.” ‐ Joel Spolsky

“The best designs come from observing people, understanding their

needs, and finding elegant solutions.” ‐ Metin Can Siper

“The user experience is everything. It’s the difference between a

delighted customer and a lost opportunity.” ‐ Pamela Pavliscak

“Design is the intermediary between information and understanding.” ‐

Hans Hoffman

162
Learn early, learn often
“Learn early, learn often” is a quotation by Drew Houston, co‐founder of
Dropbox . The phrase is popular in the startup community because it
emphasizes the importance of continuous learning and experimentation.
It suggests that it is better to start learning and experimenting early on
in the development of a product or service, rather than waiting until
later when it may be more difficult and expensive to make changes.

The concept behind “Learn early, learn often” is closely tied to the lean
startup methodology, which emphasizes rapid experimentation and
iteration to quickly validate or invalidate assumptions about a product or
service. By learning early and often, startups can quickly identify and
correct errors in their assumptions, refine their products or services,
and make data‐driven decisions.

The “learn” part of the phrase refers to the importance of acquiring

knowledge and insights through experimentation, feedback, and data
analysis. This learning can come from a variety of sources, such as user
feedback, market research, customer behavior analysis, and product
usage metrics.

The “early” part of the phrase refers to the importance of starting the
learning process as soon as possible, even before a product or service is
fully developed or launched.

The “often” part of the phrase emphasizes the importance of continuous

learning and iteration throughout the product development process.
This means that startups should be constantly testing and experimenting
with new ideas, features, and improvements, and using data to inform
their decisions.

The quotation effectively encourages startups to adopt a culture of

continuous learning and experimentation, and to be agile and
responsive to feedback and data. By doing so, they can increase their
chances of success, avoid costly mistakes, and ultimately create products
or services that better meet the needs and desires of their customers.

163
Make mistakes faster
“Make mistakes faster” is a quote from Andy Grove, the former CEO of
Intel and a renowned business leader. The quote is often used to
emphasize the importance of taking risks and being willing to fail in
order to achieve success.

The idea behind “make mistakes faster” is that the faster you can make
mistakes, the faster you can learn from them and make improvements.
In other words, it’s better to learn from a mistake quickly and move on,
rather than dwelling on it and wasting time.

For entrepreneurs and innovators, this quote is particularly relevant. In

order to develop new ideas and products, it’s important to be willing to
take risks and try new approaches. However, not all of these experiments
will be successful. By embracing the idea of making mistakes faster,
individuals and organizations can iterate more quickly, test new ideas
more effectively, and ultimately achieve success more rapidly.

The concept of “making mistakes faster” is closely related to the idea of

“fail fast, fail often.” Both concepts encourage individuals and
organizations to take risks, experiment, and learn from failures in order
to improve and ultimately achieve success. By making mistakes faster
and learning from them more quickly, individuals and organizations can
accelerate their growth and achieve their goals more efficiently.

164
Perfect is the enemy of good
“Perfect is the enemy of good” is an aphorism that emphasizes the
potential negative impact of striving for perfection in various aspects of
life. This suggests that pursuing perfection can hinder progress and
prevent the achievement of satisfactory results.

One interpretation of this aphorism is that the quest for perfection often
sets unrealistic standards that are difficult, if not impossible, to meet.
Perfectionism can become a self‐imposed barrier to success and
satisfaction. Instead of embracing incremental progress or accepting
good outcomes, perfectionism can breed dissatisfaction and create a
cycle of never‐ending refinement.

Furthermore, the pursuit of perfection can consume valuable time,

resources, and energy. In many situations, investing excessive effort into
achieving flawless results may yield diminishing returns and prevent
one from moving forward. By fixating on minute details or endlessly
seeking improvements, individuals may miss opportunities for growth,
learning, or the completion of important tasks.

The aphorism also suggests that there is value in recognizing and

appreciating the goodness in what is already achieved. It encourages a
pragmatic approach that acknowledges the limitations of perfection and
celebrates the accomplishments that are already present. Embracing the
“good” rather than obsessing over perfection can lead to greater
satisfaction, increased productivity, and the ability to adapt and evolve.

165
Data beats emotions
“Data beats emotions” is a quotation by Sean Rad, founder of Tinder. The
quotation suggests that data‐driven decision making is superior to
relying on emotions or gut feelings when making important decisions.
This means that leaders and organizations should prioritize the
collection, analysis, and use of data to inform their decisions, rather
than relying solely on intuition or emotional reactions.

There are several reasons why data‐driven decision making is important.

First, data provides an objective basis for decision making. By analyzing
relevant data, leaders can gain a clearer understanding of the situation,
identify patterns or trends, and make more informed decisions. This is
particularly important in complex or uncertain situations, where
emotions or biases may cloud judgment.

Second, data can help to mitigate risk. By analyzing past performance

data and industry trends, leaders can make more accurate predictions
about the future, and identify potential risks or opportunities. This
allows organizations to take proactive steps to mitigate risks, rather than
simply reacting to them.

Finally, data‐driven decision making can lead to better outcomes. By

relying on data to guide decisions, organizations can make more
informed choices that are backed up by evidence. This can lead to better
outcomes, higher efficiency, and improved performance.

166
Idioms
Idioms are phrases or expressions that have a meaning that is different
from the literal meaning of the words used. These expressions are
commonly used in everyday language and are often used to add color or
emphasis to a statement.

Idioms can be difficult to understand for non‐native speakers or those

who are not familiar with the language or culture. The meaning of
idioms cannot be understood by simply translating the individual words
that make up the expression. Instead, idioms are often understood
through their usage and context.

For example, the idiom “the ball is in your court” means that it is now
someone’s turn or responsibility to take action. This idiom is often used
in situations where someone has made a proposal or suggestion, and it is
up to the other person to respond.

For example, the idiom “barking up the wrong tree” means that
someone is pursuing a mistaken or misguided course of action. The
literal meaning of the words “barking” and “tree” does not convey the
same meaning as the idiom.

Idioms can add color and nuance to language, but they can also be
confusing or difficult for non‐native speakers or those who are not
familiar with the language and culture.

167
Quick wins
“Quick wins” is a term commonly used in business to describe projects
or actions that can be completed quickly, usually within a short time
frame of a few weeks to a few months. These are initiatives that require
minimal resources, time, and effort but can yield significant, tangible
results.

The idea behind quick wins is to build momentum and show progress,
which can help gain buy‐in from stakeholders and build enthusiasm
among team members. This approach can be particularly useful in
situations where a larger project or long‐term strategy is being
developed or implemented.

Examples of quick wins may include:

• Implementing small process improvements that can improve

productivity or efficiency.

• Conducting a small‐scale customer survey to identify areas for

improvement.

• Upgrading or updating software or hardware to improve

performance.

• Launching a small‐scale marketing campaign to test a new strategy

or target audience.

The key to identifying quick wins is to focus on areas where small

changes can lead to significant improvements. It’s important to keep in
mind that quick wins are not meant to be a substitute for a
comprehensive strategy or long‐term planning. Rather, they should be
used to complement these efforts and help organizations move closer to
their overall goals.

168
Think outside of the box
“Think outside of the box” is a common phrase used to describe the act
of approaching a problem or situation in an unconventional, creative, or
innovative way. It refers to thinking beyond the limitations of traditional
or established ideas, methods, and processes, and exploring new
possibilities and perspectives.

The phrase originated from a popular puzzle in the 1960s called the
“nine dots puzzle,” where nine dots were arranged in a square, and the
challenge was to connect all nine dots with four straight lines without
lifting the pen. The solution required drawing lines outside of the
perceived boundary of the square, and this led to the term “thinking
outside of the box” to describe unconventional thinking.

The concept of thinking outside of the box is often associated with

creativity, innovation, and problem‐solving. It encourages individuals to
challenge assumptions, break free from conventional thinking patterns,
and generate new ideas and solutions. This type of thinking is
particularly important in today’s rapidly changing business
environment, where organizations are facing complex challenges and
disruptive technologies.

To think outside of the box, individuals need to cultivate a mindset that

embraces creativity, curiosity, and risk‐taking. They need to be
open‐minded, flexible, and willing to consider alternative perspectives
and approaches. They should also be willing to experiment, learn from
failures, and iterate until they arrive at a solution that works.

169
Out of scope
“Out of scope” is a phrase commonly used in project management,
business analysis, and other fields to indicate that a particular task or
activity is not within the bounds of the current project or assignment.

When someone says that a task or activity is “out of scope,” they are
essentially saying that it is not something that they are currently
responsible for, or that it is not something that they can work on within
the context of their current project or assignment.

For example, suppose a software development team is working on a

project to create a new e‐commerce platform for a client. If the client
were to request additional features that were not part of the original
scope of the project, the project manager might respond by saying that
the new features are “out of scope.” This means that the team will not be
able to work on the new features as part of the current project, and that
the client will need to initiate a new project or change request to address
them.

In other contexts, the phrase “out of scope” can also be used to indicate
that a particular problem or issue is not relevant to a particular
discussion or debate. For example, if two people are having a
conversation about the best way to market a new product, and one
person starts talking about the technical details of how the product was
designed, the other person might say that the technical details are “out
of scope” for the current discussion. This would indicate that they
believe the technical details are not relevant to the discussion about
marketing the product.

170
Over the horizon
“Over the horizon” is an idiomatic expression that refers to events,
situations, or possibilities that are not currently visible or known but are
anticipated or expected to occur in the future. It implies that something
lies beyond the current range of perception or understanding.

The phrase draws its metaphorical meaning from the visual concept of
the horizon, which represents the farthest point that can be seen or
known from a particular vantage point. Anything beyond that point is
beyond the observer’s current field of vision.

In various contexts, “over the horizon” is used to convey the idea of

looking or thinking ahead, anticipating future developments, or
preparing for potential challenges or opportunities. It suggests that one
should consider possibilities and plan beyond the immediate present.

For example, in strategic planning, “over the horizon” thinking involves

considering long‐term trends, technological advancements, and
potential disruptions that may affect an organization’s future. It
encourages a forward‐looking perspective and proactive
decision‐making to stay ahead of the curve.

In military and defense contexts, “over the horizon” refers to activities,

threats, or operations that occur beyond the visible range of radar or
surveillance. It involves monitoring and preparing for potential risks
that may emerge from unknown or distant sources.

In everyday conversations, “over the horizon” can be used

metaphorically to indicate future plans, aspirations, or changes that are
not yet visible but are expected to materialize at some point.

Overall, “over the horizon” captures the notion of looking beyond the
present and considering the possibilities that lie ahead, whether they
are related to strategic planning, risk management, or personal
aspirations. It emphasizes the importance of forward‐thinking and
being prepared for the future.

171
Aphorisms
Aphorisms are concise, memorable, and often witty statements that
convey a general truth or principle. They are succinct expressions of
wisdom, offering insights into human nature, life, and various aspects of
the human experience. Aphorisms are typically presented in a pithy and
memorable form, making them easily quotable and shareable.

The term “aphorism” originates from the Greek word “aphorismos,”

which means “definition” or “distinction.” Throughout history,
philosophers, writers, and thinkers from various cultures have used
aphorisms to encapsulate their observations, beliefs, and moral or
philosophical teachings.

The characteristics of aphorisms include brevity, clarity, and an element

of universality. They are often expressed in a concise manner, using
simple and straightforward language. Aphorisms distill complex ideas or
observations into a few memorable words, making them easy to
understand and remember.

Aphorisms serve multiple purposes. They can provide guidance, inspire

reflection, provoke thought, or offer practical advice. They are often
seen as nuggets of wisdom, offering concise and profound insights into
the human condition. Aphorisms can encapsulate moral principles,
highlight common human foibles, or provide commentary on societal
issues. They have the power to stimulate intellectual and emotional
responses, encouraging contemplation and discussion.

While aphorisms are valuable for their succinctness and impact, they
can also be subject to interpretation and contextual understanding.
Their brevity can leave room for multiple interpretations, allowing
individuals to apply them to their own experiences and perspectives. As
a result, aphorisms often provoke discussions and debates, as different
individuals may interpret them in different ways.

172
The Law of Demos
The Law of Demos, also known as Kapor’s Law, is a principle that states
that any technology demo will eventually fail if it is demonstrated often
enough. This law was first formulated by Mitch Kapor, co‐founder of
Lotus Development Corporation, in 1983.

The idea behind the Law of Demos is that demos are essentially fake,
controlled environments that do not accurately represent the real world.
Demos are designed to showcase the best features of a product or
technology, and they often ignore or gloss over any flaws or limitations
that may exist. As a result, demos can create unrealistic expectations in
the minds of the audience.

According to the Law of Demos, the more times a technology demo is

shown, the more likely it is that the flaws and limitations of the
technology will become apparent. The audience may become skeptical
or disillusioned, and the technology may lose its appeal. This can be
particularly problematic for startups or new technologies that rely on
hype and buzz to attract investors and users.

One solution to the problem of the Law of Demos is to be transparent

about the limitations and challenges of a technology, even during a
demo. By acknowledging the flaws and limitations upfront, a company
can build trust with its audience and demonstrate that it is committed to
addressing any issues that may arise.

The Law of Demos is a reminder that technology demos are not a

substitute for real‐world testing and that startups and companies should
be honest and transparent about the capabilities and limitations of their
products and technologies.

173
The Law of Conservation of Complexity
The Law of Conservation of Complexity, also known as Tesler’s Law, is a
design principle that was formulated by Larry Tesler, a computer
scientist who worked for Xerox PARC and Apple. The Law states that
complexity is a finite resource that must be conserved, and that every
increase in complexity in one part of a system must be offset by a
corresponding decrease in complexity elsewhere.

In other words, the Law is a call for simplicity in design. It suggests that
designers and developers should strive to make their products as simple
and easy to use as possible, by minimizing unnecessary complexity and
focusing on the most important features and functions. This is
particularly important in today’s technology landscape, where users are
inundated with a vast array of products and services, many of which are
needlessly complex and difficult to use.

The Law is particularly relevant in the field of user experience (UX)

design, where the goal is to create interfaces and interactions that are
intuitive, efficient, and satisfying for users. By following this principle,
designers can create products that are not only easier to use, but also
more accessible to a wider range of users, including those with
disabilities or other special needs.

In practice, the Law can be applied in a variety of ways. For example,

designers can use it to simplify interfaces by removing unnecessary
buttons, menus, or other elements that can confuse or overwhelm users.
They can also use it to streamline workflows and reduce the number of
steps required to complete a task, making it easier for users to achieve
their goals.

174
The Pareto Principle (The 80/20 Rule)
The Pareto Principle, also known as the 80/20 rule, is a principle named
after Italian economist Vilfredo Pareto. It suggests that roughly 80% of
the effects come from 20% of the causes. This principle has been applied
to a wide range of fields, including economics, business, management,
and personal productivity.

The Pareto Principle can be applied in various ways. For example, in

economics, it can be used to describe the distribution of income, where
a small percentage of the population holds a large percentage of the
wealth. In business, it can be used to analyze customer profitability,
where a small percentage of customers may account for a large
percentage of revenue.

In management, the Pareto Principle can be used to identify the most

important tasks or activities. By focusing on the 20% of activities that are
likely to have the greatest impact, managers can prioritize their efforts
and achieve more efficient use of time and resources.

In personal productivity, the Pareto Principle can be used to focus on the

most important tasks or activities, rather than trying to do everything at
once. By identifying the 20% of activities that are likely to produce 80%
of the results, individuals can prioritize their efforts and achieve greater
productivity.

It’s important to note that the 80/20 split is not a hard and fast rule, and
the actual percentages may vary depending on the context.
Nevertheless, the Pareto Principle remains a useful tool for analyzing
and prioritizing tasks, resources, and activities in various fields.

175
Chesterton’s fence
Chesterton’s fence is a principle of cautionary conservatism that states
that before changing or removing something, it’s important to first
understand why it exists in the first place. The idea is that even if a
particular practice or object may seem pointless or unnecessary to us, it
likely served some purpose in the past that we may not be aware of.

The principle is named after the writer and philosopher G.K. Chesterton,
who wrote about it in his 1929 book “The Thing: Why I Am a Catholic.”
In the book, Chesterton uses the metaphor of a fence to illustrate the
principle: imagine that you come across a fence in a field and don’t
understand why it’s there. Rather than immediately tearing it down, it’s
important to investigate the purpose of the fence first. It could be there
to keep animals from escaping, to prevent people from falling into a pit,
or to mark the boundary of a property.

The principle is often invoked in fields such as engineering, law, and

public policy, where it’s important to take a cautious and deliberate
approach to change. By understanding why things are the way they are,
we can avoid unintended consequences and make more informed
decisions about how to move forward. It encourages critical thinking
and reflection before making any changes, and is a reminder that just
because something doesn’t make sense to us doesn’t mean it doesn’t have
a purpose or history.

176
Soft skills
Soft skills, also known as interpersonal skills or people skills, refer to the
personal attributes and qualities that enable individuals to effectively
interact with others and navigate various social and professional
situations.

Important soft skills:

• Communication: The ability to articulate ideas, thoughts, and

information effectively, both verbally and in writing. This involves
active listening, clarity, empathy, and adaptability.

• Collaboration: The capacity to work well with others, contribute to

a team, and build positive relationships. Collaboration entails
cooperation, compromise, and constructive conflict handling.

• Leadership: The skill to guide, motivate, and inspire others

towards a common goal. Leaders exhibit vision, integrity, empathy,
decision‐making, and the ability to empower others.

• Adaptability: The flexibility and willingness to adjust to changing

circumstances, environments, or tasks. This includes openness to
new ideas, learning from experiences, and embracing change.

• Emotional intelligence: The capacity to understand and manage

one’s own emotions, as well as empathize with the emotions of
others.

• Time management: The skill to prioritize tasks, set goals, and

manage one’s time efficiently. This includes planning, organizing,
and maintaining focus on important activities.

• Creativity: The ability to think creatively, generate innovative

ideas, problem‐solve from different perspectives, and take creative
risks.

177
How to create a UI/UX portfolio
Your UI/UX portfolio should showcase your skills, and also tell a
compelling story of your design journey, and demonstrate your ability to
solve real‐world problems through effective UI/UX design. Before
finalizing your portfolio, seek feedback from peers, mentors, or
professionals in the field.

• Showcase Your Best Work: Select your most impressive and

diverse projects to showcase in your portfolio. Include a variety of
design styles, platforms, devices, and industries.

• Provide Case Studies: For each project, include detailed case

studies that outline the problem, your design process, and the
solutions you implemented. Explain your design decisions.

• Highlight Your Role: Clearly mention your role and contributions

in each project, whether it was UI design, UX research, interaction
design, or any other specific area of expertise.

• Include Visual Assets: Showcase your designs using high‐quality

visuals, including screenshots, mockups, and prototypes,
interactive elements, and animations.

• Demonstrate User‐Centered Design: Emphasize your

understanding of user‐centered design principles. Explain how
you conducted user research, gathered user feedback, and iterated
on your designs.

• Display Your Design Process: Provide glimpses of your design

process, including sketches, wireframes, and iterations. This
demonstrates your ability to think critically, iterate on designs, and
solve complex design problems.

• Highlight Collaboration: If you have worked in a team setting,

highlight your collaboration skills and experience working with
developers, product managers, or other designers.

178
How to sketch a user interface
Sketching a user interface can be an effective way to quickly explore and
visualize design ideas.

• Gather Requirements: Understand the purpose and goals of the

user interface you’re designing. Clarify the functionality, target
audience, key elements for the UI, and any specific requirements
or constraints.

• Start Rough: Begin by creating rough sketches of the overall layout

and structure of the user interface. Use simple shapes and lines.
Focus on capturing the basic arrangement and flow of information.

• Consider Attention: Ensure a balanced layout with clear grouping

and spacing between different components. Create various user
flows or scenarios to ensure a seamless and intuitive experience.

• Get Feedback: Seek feedback from colleagues, stakeholders, or

potential users. Share your sketches. Gather insights and
suggestions. Generate ideas and explore possibilities.

• Iterate: Iterate on your initial sketches, refining and adding more

detail to each iteration. Experiment with different variations and
explore multiple design options. Don’t worry about making it
perfect.

• Use Annotations: Add annotations or notes alongside your

sketches to provide explanations or descriptions of certain
elements or interactions. This can help clarify your ideas to others.

• Transition: Once you’re satisfied with your sketched concepts, you

can move to more‐thorough digital design tools, to create more
refined wireframes or prototypes.

179
How to run a focus group
Running a focus group involves gathering a small group of individuals
with similar characteristics or experiences to gather insights, opinions,
and feedback on a specific topic or product.

• Define the Purpose: Clarify the objectives and purpose of the

focus group. Identify the specific research questions or areas of
interest that you want to explore with the participants.

• Recruit Participants: Decide on the characteristics of the

participants that align with your objectives. Reach out to potential
participants, and communicate the purpose, time commitment,
and incentives.

• Plan Logistics: Determine the date, time, and location for the
focus group. Choose a comfortable and quiet environment that
encourages open discussion. Ensure you have all the necessary
equipment.

• Develop a Guide: Create a structured discussion guide that

outlines the key topics, questions, or activities you want. Use a
logical flow and allow for flexibility to explore.

• Facilitate Focus: Start the focus group by introducing yourself and

explaining the purpose and guidelines of the session. Encourage
participants to share their opinions and experiences openly.
Actively listen.

• Manage Group Dynamics: Foster interaction. Ensure all

participants have opportunities to contribute. Keep the group
respectful and focused. Manage dominant individuals or overly
quiet participants.

• Report Findings: Analyze the results to extract key findings,

relevant quotes, anecdotes, and observations. Create a report or
presentation and share it with stakeholders to inform future work.

180
How to give a demo
Giving a demo involves showcasing a product, service, or concept to an
audience, whether it’s in‐person, through a virtual presentation, or a
combination of both.

• Know Your Audience: Determine your audience’s needs, interests,

and goals are. Tailor your demo to address their pain points.

• Set Objectives: Structure your demo to achieve your goals, such as

to generate interest, educate the audience, or make a sale.

• Plan and Prepare: Organize your content, messages, and visuals.

Create a storyboard or outline to guide your presentation. Practice.

• Be Engaging: Begin the demo with an attention‐grabbing

introduction to captivate the audience’s interest. Then explain the
purpose of the demo. Then focus on the unique aspects, key
features, and key benefits.

• Be Dynamic: Maintain a dynamic and engaging delivery

throughout the demo. Vary your tone, pace, and gestures.
Consider interactivity like quizzes, polls, or hands‐on exercises.

• Use Visuals: Utilize slides, videos, walkthroughs, or

demonstrations to showcase the value of your offering.

• Tell Stories: Use real‐life examples, case studies, or testimonials to

illustrate your key points and the value of your offering.

• Address Concerns: Encourage audience participation by inviting

questions during or after specific sections of your demo. Be
prepared to address concerns and provide clarifications.

• End with a Call to Action: Wrap up by summarizing the key points

and reinforcing the benefits of your solution. Clearly state the
desired actions you want the audience to take.

• Follow‐Up: After the demo, encourage the audience to provide

feedback. Send personalized messages to nurture the relationship.

181
How to interview a user
Interviewing users is a valuable method for gathering insights,
understanding their needs, and gaining feedback.

• Define: Determine the objectives of the interview. Create a

structured interview discussion guide. Determine the logistics.
Prepare any necessary materials.

• Establish Rapport: Begin the interview by introducing yourself

and explaining the purpose of the interview. Create a friendly and
comfortable environment to put the user at ease.

• Ask Open‐Ended Questions: Use open‐ended non‐biased

questions to encourage the user to provide detailed responses and
share their experiences, thoughts, and preferences.

• Listen Actively: Practice active listening. Pay attention to the

user’s verbal and non‐verbal cues, such as tone of voice, facial
expressions, or body language.

• Dig Deeper: Probe further into the user’s responses to gain deeper
insights. Ask follow‐up questions to encourage the user to
elaborate on their thoughts and experiences.

• Empathize and Seek Context: Put yourself in the user’s shoes. Ask
questions that explore their background, goals, challenges, and
specific situations.

• Respect Silence and Pauses: Sometimes users need time to gather

their thoughts or reflect on a question. Avoid rushing or
interrupting them.

• Conclusion: Summarize the insights you have gathered. Confirm

you have captured the user’s perspective. Thank the user. Offer the
opportunity for further follow‐up if needed.

182
How to collaborate
Collaboration is essential for successful teamwork and achieving
common goals. Here are some tips…

• Establish Expectations: Define clear goals, guidelines, and

objectives for the collaboration. Ensure that everyone understands
their roles, responsibilities, and the expected outcomes.

• Foster Open Communication: Maintain open and transparent

communication throughout the collaboration process. Encourage
all team members to share their ideas, opinions, and concerns.

• Build Trust: Create a supportive and inclusive environment where

team members feel safe to express their thoughts and take risks.
Encourage trust‐building activities and promote respect.

• Embrace Diversity: Recognize and appreciate the diverse

perspectives, experiences, and skills that each team member
brings to the collaboration. Embrace different ideas and
encourage innovation.

• Establish Clear Communication Channels: Determine the most

effective communication channels for your collaboration, such as
in‐person meetings, video conferences, email, or project
management tools.

• Foster Collaboration: Encourage a culture that promotes

collaboration, teamwork, and sharing. Create opportunities for
brainstorming, collaborative problem‐solving, and
cross‐functional interactions.

• Use Tools: Utilize collaboration tools to enhance productivity and

streamline communication, such as project management software,
shared document repositories, and messaging.

• Learn: Encourage open honest feedback from team members to

learn more and make adjustments for future collaborations.

183
How to lead a meeting
Leading a meeting effectively involves careful planning, facilitation
skills, and the ability to keep participants engaged and focused.

• Define the Purpose: Determine the meeting objectives, and an

agenda that outlines the topics to be discussed, along with times
for each topic. Share the agenda with participants in advance.

• Prepare Meeting Materials: Gather and prepare any necessary

materials, documents, or presentations that will be used during
the meeting. Ensure these materials are organized and accessible.

• Start with an Introduction: Begin the meeting by welcoming

participants and providing a brief overview of the agenda and
meeting objectives. Introduce any new attendees.

• Facilitate Discussion: As the meeting progresses, guide the

discussion and ensure that everyone has an opportunity to
contribute. Encourage active participation.

• Encourage Collaboration: Foster a environment where

participants feel comfortable sharing their ideas and perspectives.

• Manage Time: Start on time. End on time. Focus on the agenda.

Defer/delegate aspects as needed. Schedule follow‐ups as needed.

• Manage Conflict: If disagreements arise, address them calmly and

respectfully. Encourage dialogue, seek common ground, and find
solutions or compromises.

• Close the Meeting: Summarize the outcomes and action items.

Thank participants. Do follow‐up communication to all
participants with the summary and any relevant resources.

184
How to work with stakeholders
Working with stakeholders is crucial for successful project execution
and achieving desired outcomes. This requires active engagement,
effective communication, and a genuine commitment to understanding
and addressing their needs.

• Prioritize Stakeholders: Identify all stakeholders: internal,

external, clients, sponsors, end‐users, regulators, etc. Prioritize
them based on their level of impact.

• Understand Expectations: Conduct stakeholder analysis to gather

information about their goals, motivations, and potential risks.

• Communicate Regularly: Maintain open transparent

communication with stakeholders throughout the project. Clearly
convey expectations, updates, progress, challenges, and decisions.

• Build Relationships: Foster trust and build positive relationships

with stakeholders. Be reliable, responsive, and follow through on
your commitments.

• Involve Stakeholders: Include stakeholders in decision‐making

processes when possible, such as through workshops, focus groups,
or collaborations. Seek their input, opinions, and feedback.

• Resolve Conflicts: Act as a mediator when conflicts arise,

facilitating constructive discussions and finding win‐win solutions.
Address conflicts early before they escalate.

• Provide Value: Demonstrate the value and benefits of the project

to stakeholders, such as via showcases, demos, and updates.
Clearly communicate how the project aligns with their objectives

• Be Adaptable: Recognize that stakeholder needs and priorities

may evolve throughout the project. Be flexible and adaptable in
response to changing stakeholder requirements.

185
How to get feedback
Getting feedback is essential for personal and professional growth.

• Be Open and Approachable: Be approachable, open‐minded, and

receptive to different perspectives. Encourage others to share their
thoughts and opinions with you.

• Ask Different Sources: Seek feedback from a variety of sources,

such as supervisors, colleagues, mentors, peers, customers, or
clients.

• Be Specific: When seeking feedback, be clear about the specific

areas or aspects you want feedback on. This helps others focus
their feedback and provide more targeted insights.

• Ask Open‐Ended Questions: Instead of asking simple yes/no

questions, ask open‐ended questions that encourage detailed
responses.

• Listen Actively: When receiving feedback, listen without

interrupting or becoming defensive. Give the person your full
attention and try to understand their perspective.

• Respond Graciously: Express appreciation for the feedback,

regardless of whether it’s positive or constructive. Thank the
person for taking the time to provide their insights.

• Reflect and Apply the Feedback: Take time to reflect on the

feedback you receive. Consider how it aligns with your own
self‐assessment and goals. Identify areas where you can improve.

• Follow Up: If there are any areas of feedback that you don’t fully
understand or need further clarification on, reach out to the
person for more information.

186
How to give feedback
Giving feedback effectively is an important skill that can contribute to
personal and professional growth.

• Choose the Right Time and Place: Find a time and place for a
private uninterrupted conversation. Ensure that the recipient is
open and receptive to receiving feedback.

• Use “I” Statements: Frame your feedback using “I” statements to

express your perspective and observations. Don’t be accusatory.

• Be Objective: Focus on facts and your own feelings, rather than

assumptions. This helps the recipient understand the context.

• Be Constructive: Provide suggestions or examples on how the

person can improve or address the issue. Offer actionable
recommendations.

• Balance Feedback: Whenever possible, start with positive

feedback to recognize the person’s strengths or achievements. This
sets a supportive tone.

• Be Respectful: Approach the feedback conversation with empathy

and respect. Use a calm and non‐confrontational tone. Show
genuine care and interest in the recipient’s growth and
development.

• Encourage Dialogue and Active Listening: Give the recipient an

opportunity to respond, ask questions, or seek clarification. Be
open to their perspective and actively listen to their point of view.

• Follow up and Offer Support: After providing feedback, follow up

with the person to check their progress, offer additional support,
or address any questions or concerns they may have.

• Lead by Example: Demonstrate openness to receiving feedback

yourself. When you seek feedback and use it to improve, you
create an environment that encourages others to do the same.

187
Conclusion
Thank you for reading UI/UX Guide. I hope it can be helpful to you and
your project.

Your feedback and suggestions are very much appreciated, because this
helps the guide improve and evolve.

Repository

The repository URL is:

https://github.com/sixarm/ui‐ux‐guide

You can open any issue you like on the repository. For example, you can
use the issue link to ask any question, suggest any improvement, point
out any error, and the like.

Email

If you prefer to use email, my email address is:

[email protected]

188
Thanks
Thanks to many hundreds of people and organizations who helped with
the ideas leading to this guide.

Consultancies:

• ThoughtWorks
• Accenture
• Deloitte
• Ernst & Young

Venture funders:

• Y Combinator
• Menlo Ventures
• 500 Global
• Andreessen Horowitz
• Union Square Ventures

Universities:

• Berkeley
• Brown
• MIT
• Harvard

Foundations:

• Electronic Frontier Foundation

• Apache Software Foundation
• The Rust Foundation
Special thanks to Pragmatic Bookshelf and O’Reilly Media for excellent
books.

Special thanks to all the mentors, managers, teams, and stakeholders

who have worked with me and taught me so much.

189
About the editor
I’m Joel Parker Henderson. I’m a software developer and writer.

https://linkedin.com/in/joelparkerhenderson

https://github.com/joelparkerhenderson

https://linktr.ee/joelparkerhenderson

Professional

For work, I consult for companies that seek to leverage technology

capabilities and business capabilities, such as hands‐on coding and
growth leadership. Clients range from venture capital startups to
Fortune 500 enterprises to nonprofit organizations.

For technology capabilities, I provide repositories for developers who

work with architecture decision records, functional specifications,
system quality attributes, git workflow recommendations, monorepo
versus polyrepo guidance, and hands‐on code demonstrations.

For business capabilities, I provide repositories for managers who work

with objectives and key results (OKRs), key performance indicators
(KPIs), strategic balanced scorecards (SBS), value stream mappings
(VSMs), statements of work (SOWs), and similar practices.

Personal

I advocate for charitable donations to help improve our world. Some of

my favorite charities are Apache Software Foundation (ASF), Electronic
Frontier Foundation (EFF), Free Software Foundation (FSF), Amnesty
International (AI), Center for Environmental Health (CEH), Médecins
Sans Frontières (MSF), and Human Rights Watch (HRW).

I write free libre open source software (FLOSS). I’m an avid traveler and
enjoy getting to know new people, new places, and new cultures. I love
music and play guitar.

190
About the AI
OpenAI ChatGPT generated text for this book. The editor provided
direction to generate prototype text for each topic, then edited all of it by
hand for clarity, correctness, coherence, fitness, and the like.

What is OpenAI ChatGPT?

OpenAI ChatGPT is a large language model based on “Generative

Pre‐trained Transformer” architecture, which is a type of neural network
that is especially good at processing and generating natural language.

The model was trained on a massive amount of text data, including

books, articles, and websites, enabling the model to generate responses
that are contextually relevant and grammatically correct.

The model can be used for a variety of tasks, including answering

questions, generating text, translating languages, and writing code.

Can ChatGPT generate text and write a book?

Yes, ChatGPT has the capability to generate text. However, the quality
and coherence of the generated text may vary depending on the topic
and the specific requirements.

Generating a book from scratch would require a significant amount of

guidance and direction, as ChatGPT does not have its own thoughts or
ideas. It can only generate text based on the patterns and structure of
the data it was trained on.

So while ChatGPT can be a useful tool for generating content and ideas,
it would still require a human author to provide direction, editing, and
oversight to ensure the final product meets the standards of a book.

191
About the ebook PDF
This ebook PDF is generated from the repository markdown files. The
process uses custom book build tools, fonts thanks to Adobe, our open
source tools, and the program pandoc.

Book build tools

The book build tools are in the repository, in the directory book/build.
The tools select all the documentation links, merge all the markdown
files, then process everything into a PDF file.

Fonts

https://github.com/sixarm/sixarm‐fonts

The book fonts are Source Serif Pro, Source Sans Pro, and Source Code
Pro. The fonts are by Adobe and free open source. THe book can also be
built with Bitstream Vera fonts or Liberation fonts.

markdown‐text‐to‐link‐urls

https://github.com/sixarm/markdown‐text‐to‐link‐urls

This is a command‐line parsing tool that we maintain. The tool reads

markdown text, and outputs all markdown link URLs. We use this to
parse the top‐level file README.md, to get all the links. We filter these
results to get the links to individual guidepost markdown files, then we
merge all these files into one markdown file.

pandoc‐from‐markdown‐to‐pdf

https://github.com/sixarm/pandoc‐from‐markdown‐to‐pdf

This is a command‐line tool that uses our preferred pandoc settings to

convert from an input markdown text file to an output PDF file. The tool
adds a table of contents, fonts, highlighting, sizing, and more.

192
About related projects
These projects by the author describe more about startup strategy,
tactics, and tools. These are links to git repostories that are free libre
open source.

• Architecture Decision Record (ADR)

• Business model canvas (BMC)
• Code of conduct guidelines
• Company culture
• Coordinated disclosure
• Crucial conversations
• Decision Record (DR) template
• Functional specifications tutorial
• Icebreaker questions
• Intent plan
• Key Performance Indicator (KPI)
• Key Risk Indicator (KRI)
• Maturity models (MMs)
• Objectives & Key Results (OKR)
• Oblique strategies for creative thinking
• OODA loop: Observe Orient Decide Act
• Outputs vs. outcomes (OVO)
• Pitch deck quick start
• Queueing theory
• Responsibility assignment matrix (RAM)
• SMART criteria
• Social value orientation (SVO)
• Statement Of Work (SOW) template
• Strategic Balanced Scorecard (SBS)
• System quality attributes (SQAs)
• TEAM FOCUS teamwork framework
• Value Stream Mapping (VSM)
• Ways of Working (WOW)

193