UX & UI Design
What is that actually called?
Interfaces are created as a team: design, development, copywriting, and clients all talking about the same building blocks. If you say "that thing that briefly pops up at the bottom", you waste time and risk misunderstandings. A shared vocabulary makes feedback, briefings, and handovers precise.
Learning objective: You will accurately identify common interface elements, states, and behaviours, distinguish between similar elements, and be able to explain the concepts behind good design. Each card includes an example to try out, with a quiz waiting for you at the end.
If you can name it, you can discuss it.
Where am I, where can I go?
Navigation elements show the structure of a product: which sections exist, where you currently are, and how to get back. On large screens, navigation is usually at the top, whereas in apps it is often at the bottom within thumb's reach.
Many terms get mixed up in everyday conversation. Tabs and the tab bar sound similar, but they serve different purposes: the tab bar switches between sections, while tabs switch between views within a page.
Navigation answers three questions: Where am I, where have I been, where can I go?
What do I enter something with?
Controls accept inputs: selecting, toggling, typing, sliding. Each has its own logic. A checkbox allows multiple answers, a radio button allows just one, and a toggle takes effect immediately.
Choosing the right element saves explanatory text. The shape itself already indicates what is permitted.
The shape of an element is already an instruction.
What appears above the page?
Some elements overlay the content to require a decision, offer options, or report something. What matters is how intrusive they are: a modal blocks everything, whilst a toast notification only appears briefly.
Rule of thumb: the more important and irreversible the decision, the more disruptive the interruption can be. For confirmations, a toast with an undo option is usually sufficient.
Interrupt only as much as the matter requires.
What does the element look like at the moment?
An element does not just have a single appearance, but multiple states: default, hover, focused, pressed, and disabled. On top of that, there are states for entire views: loading, empty, error, and success.
In design, it's common to only craft the ideal states. The others then happen by chance during development. A good handover showcases every state.
An element is only finished once all of its states have been designed.
What happens if I do something?
Behaviour describes how an interface responds to movement: swiping, dragging, scrolling, tapping. These patterns have names so that teams can describe them precisely, such as 'pull to refresh' instead of 'pull down, then it reloads'.
Gestures are invisible. What you can't see, you have to know. That's why every gesture needs a visible alternative.
Every gesture needs a visible twin.
Why does this work?
Some terms do not describe elements, but rather principles: how people recognise what they can do, how much they can process at the same time, and what they expect. Many originate from psychology and were brought into design by Don Norman, Jakob Nielsen, and others.
These terms can be used to justify feedback rather than just evaluate it: 'The button lacks affordance' is more helpful than 'I don't like it'.
Good concepts turn taste into an argument.
All terms from A to Z
All terms are listed here. Search by the German or English name.
If in doubt, look it up rather than rephrase.
Naming an interface
Task: Take an app you use every day, such as your banking or public transport app, and describe a process using only the terms from this course.
STEP 1
Take three to five screenshots of a process, such as buying a ticket.
STEP 2
Label each element with its name: Tab Bar, Segmented Control, Bottom Sheet, Toast.
STEP 3
Make a note of the state you see for each element and what happens when you interact with it.
STEP 4
Find an element that is used inappropriately, and justify what you would change using a term from Chapter 1.6.
Evaluation: Have someone recount the process using only your labels. Where they get stuck, a term was inaccurate.
Further reading
Norman, Don: The Design of Everyday Things. Revised and Expanded Edition. Basic Books, 2013.
Tidwell, Jenifer; Brewer, Charles; Valencia, Aynne: Designing Interfaces. 3rd edition. O’Reilly, 2020.
Saffer, Dan: Microinteractions: Designing with Details. O’Reilly, 2013.
Yablonski, Jon: Laws of UX. O’Reilly, 2020.
Nielsen, Jakob: 10 Usability Heuristics for User Interface Design. Nielsen Norman Group.
Brignull, Harry: Deceptive Patterns. Exposing the Tricks Tech Companies Use to Control You. Testimonium, 2023.