Glossary
It’s important to use the same words, spelling, and capitalisation consistently, otherwise things start looking messy and confusing for users.
Use British English spelling for all user-facing content. When in doubt, check the Macmillan dictionary for the preferred spelling of specific terms not found in this list.
WIP: This section is a work in progress.
General
App
An abbreviation for application. A software program designed to perform a specific function directly for the user or another app.
Login
log in (verb)
The act of entering a username and password to securely use Payroll and authenticate yourself.
Example: Install and log in to the Payroll app.
login (noun)
User credentials, such as a username and password.
Example: As a user with full access, you can see the login history of other users.
Technical
API
Application Programming Interfaces, or APIs, are pieces of software that help different applications communicate with each other. Products develop APIs to let you access and read information on their server easily.
npm
npm is a package manager for the JavaScript programming language.
pnpm
pnpm is an alternative package manager for Node. js. It is a drop-in replacement for npm, but faster and more efficient.
Package
A package is a file or directory that is described by a package.json file. A
package must contain a package.json file in order to be published to the npm
registry.
Module
A module is any file or directory that can be loaded by the Node.js require()
or import utilities.
GraphQL
GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.
Design System
Design systems can be tricky if you don’t know what certain words mean! Here’s a quick primer to help you get acclimated.
Accessibility
Accessibility or accessible design is a design process that enables people with disabilities to interact with a product. This means designing for people who are color blind, blind, deaf, and people with cognitive or muscular disabilities, among others.
Affordance
A situation where an object’s sensory characteristics intuitively imply its functionality and use. Affordances are clues that tell us how we can interact with an element. Think of a door: the handle is an affordance designed to tell us it can be turned and pulled.
In user interfaces, affordances help clearly communicate to users what can and cannot be done on a screen. Buttons, for example, afford being pressed to trigger an action.
Components
Perhaps the most used term, components are individual units (such as buttons, inputs, tabs) that have defined appearances and interaction paradigms. Components can have different variations and be customised through APIs (Application Programming Interfaces).
Elements
Elements are all the individual parts of an interface we view or interact with
as part of a website or application. A component may be a single element (e.g.
TextInput), or composed of many elements (e.g. DataTable).
Information architecture
Information architecture (IA) is the practice of arranging content in a product in an understandable manner. It involves organising the content we interact with, as well as the different structures, such as the application's navigation, we need in order to interact with it.
Patterns
Patterns define how different components can be combined in a certain way to serve specific user goals that are often repeated across screens or applications. For example, input fields, icons and buttons can be combined in a certain way to serve the goal of signing into an application. Examples of patterns are forms, navigation and filters.
Note: UX patterns should not be mistaken with "design patterns" in software engineering, which are also common ways of solving problems but specifically related to the context of engineering.
Properties
Components can be modified through the use of properties (or "props", for short). In the example of a button component, the text label, icon and disabled state can all be set through properties and combined to define a variation of that element.
Properties have types. For example, label can be set as a string,
allowing any character to be entered, while disabled has a boolean type,
allowing only true or false as its value.
State
State describes a modification to an element or component that indicates a
change in affordance. You can think
of it like "What state is this component in?". Common states include
loading, disabled, checked, and selected.
You may also use the term state to describe interaction states, like
"hovered", "focused", and "pressed".
User flow
A user flow (or user journey) describes the intended series of steps a user needs to take to complete a goal within an application.
Balance
Terms specific to this design system.
Reckon
Terms specific to Reckon and applications
Account
Client
Entity
Ledger
Status
Note
While the explanations and terminologies listed in this article are based on the most common practices, you should be aware that they can differ across teams or institutions.