The Naming Of Things

Slide 1

The Naming Of Things Ben Buchanan @200okpublic | designops.expert

Slide 2

The two hardest problems in computer science cache invalidation naming things off-by-one errors

Slide 3

Created by Sergey Patutin from the Noun Project

Slide 4

Maluma & Takete (1929)

Slide 5

Kiki & Bouba (2001)

Slide 6

Research suggests people alter their appearance to match cultural expectations about their name. eg. we imagine Bob has a rounder face than Tim.

Slide 7

Bob Tim

Slide 8

People react to names subconsciously …so if they are arguing about a name, they may struggle to express exactly why.

Slide 9

Our design system naming should match expectations. …but whose expecations?

Slide 10

All stakeholders? Business Designers Developers Users

Slide 11

Users don’t know or care Web applications, like sausages, cease to inspire respect in proportion as we know how they are made.

John Godfrey Saxe

Slide 12

Stakeholders Business Designers Developers

Slide 13

Things to name Design system UI library Components Patterns Design assets Code

Slide 14

Key Stakeholders Thing Business Design Development Design system ✓ ✓ ✓ UI library ✓ ✓ ✓ Components ✓ ✓ Patterns ✓ ✓ Design assets ✓ Code assets ✓

Slide 15

Two naming concerns 1. Brand 2. Implementation

Slide 16

Brand Thing Business Design Development Design system ✓ ✓ ✓ UI library ✓ ✓ ✓ Components ✓ ✓ Patterns ✓ ✓ Design assets ✓ Code assets ✓

Slide 17

Branding the system Reflect your culture Differentiate design and implementation Short and easy to say Beware of phonetics and pisstakes

Slide 18

Example: Quantium Quantium Design System (QDS) Library is Qbit Components are Qbits Patterns are Qpieces

Slide 19

Implementation Thing Business Design Development Design system ✓ ✓ ✓ UI library ✓ ✓ ✓ Components ✓ ✓ Patterns ✓ ✓ Design assets ✓ Code assets ✓

Slide 20

Naming for implementation

Naming for implementation Team names, wiki spaces Sketch/Figma projects, symbols, layers, mockups Code repos, builds, websites, deployment packages, file names, namespaces, templates, selectors, variables, props, functions, exports, imports, type definitions, test suites, test names, test props and selectors, page objects

Slide 21

Critical for communication Thing Business Design Development Design system ✓ ✓ ✓ UI library ✓ ✓ ✓ Components ✓ ✓ Patterns ✓ ✓ Design assets ✓ Code assets ✓

Slide 22

Designers & Developers Conflicting domain knowledge Both sides ‘know’ they are ‘right’

Slide 23

Collaboration beats ‘winning’

Slide 24

Common conundra Menu, Dropdown or Select? Dialog, Modal, Modal Dialog?

Slide 25

Menu? Dropdown? Picker?

Slide 26

Menu?

Slide 27

Menu?

Slide 28

Select Dropdown Nav

Slide 29

The conversation form semantics HCI concepts component as part of suite

Slide 30

Dialogs, pages and modal interaction

Slide 31

Dialog

Slide 32

Dialog

Slide 33

Dialog…?

Slide 34

Dialog Focused Task Page

Slide 35

Focused Page

Slide 36

Page Dialog

Slide 37

The conversation usability of code ‘dialog’ vs ‘modal’ modals over-used focusing user attention

Slide 38

Naming for design implementation

Slide 39

The design API zone Thing Business Design Development Design system ✓ ✓ ✓ UI library ✓ ✓ ✓ Components ✓ ✓ Patterns ✓ ✓ Design assets ✓ Code assets ✓

Slide 40

Design API (and versions!)

Slide 41

Naming for technical implementation

Slide 42

Code API zone Thing Business Design Development Design system ✓ ✓ ✓ UI library ✓ ✓ ✓ Components ✓ ✓ Patterns ✓ ✓ Design assets ✓ Code assets ✓

Slide 43

The goals functionality naming extensibility code usability longevity

Slide 44

Don’t Never use old and new Avoid unnecessary specifics, but… Beware inappropriate generalisation

Slide 45

Do Set naming basics early Be consistent Sketch out the whole suite of names Assume your design will change Use type systems to help

Slide 46

Basics Namespace Naming methodology Plurals Wrappers for element sets

Slide 47

Naming example .<ns>-<thing>-<variant>-<modifier> .q-button-primary .q-button-primary-disabled

Slide 48

Naming example import { Element, ElementVariant, ElementProp, ElementOtherprop, ElementWrapper, ElementWrapperProp, ElementTurtlesAllTheWayDown, } from ‘./element/’

Slide 49

Plurals Button component or Buttons component? It’s annoying when import s randomly switch!

Slide 50

Containers What do you call a container for a set of components? buttons button-set button-group button-wrapper …?

Slide 51

Tshirt sizing xxs , xs , s , m , l , xl , xxl Avoid specifics as they change Oh wait should that be LikeIt , LoveIt and GottaHaveIt ?

Slide 52

Dimensions width height - single dimensions size - all relevant dimensions

Slide 53

Semantics have limits Don’t give up too easily, but… Sometimes left is just left Some utilities are ok!

Slide 54

Schemes have limits

Slide 55

Be consistent and tidy, but don’t fight human nature.

Slide 56

API Longevity

Slide 57

Minimise the surface Be very clear about your API limits Keep as much behind the API as possible Create change buffers

Slide 58

Avoid breaking changes A breaking change simply means something that worked stops working.

Slide 59

Example Only support templates Only support what’s in the docs Provide page objects

Slide 60

If you must break something Deprecate the old Provide the new Name them separately so they co-exist

Slide 61

This is managed through SemVer Semantic Versioning (semver.org) lets you publish updates with meaningful numbers that alert people to breaking changes.

Slide 62

However SemVer is the numbering of things and a story for another day.

Slide 63

Tame the Naming Beast brand your design system for hearts and minds frame communication for collaboration set your API for implementation

Slide 64

Thank you! @200okpublic | designops.expert