UID 07 - Introduzione al corso
Source: transcript Part 1 + Part 2
Course: User Interface Design - POLI.design
Related: UID 07 - Course Map, UID 07 - Intro alla user interface con Mirko Santangelo, UID 07 - Case studies and best practices con Elisabetta Balconi
One Sentence
This opening lesson frames the whole course: User Interface Design is the discipline that translates strategy, UX, business goals, technology, and visual culture into an interface that people can understand, trust, and use.
Why This Lesson Matters
This is not only a logistical introduction. It defines the way the course understands UI:
- UI is not the final “pretty layer” of a product.
- UI is a translation layer between complex systems and people.
- UI is connected to User Experience Design, but it has its own depth.
- UI needs visual quality, interaction logic, accessibility, and technological awareness.
- UI designers need arguments, principles, and methods to defend choices.
The course starts from the idea that interface design is a professional practice, not only a software skill.
Course Positioning
The course belongs to the POLI.design ecosystem, connected with the Politecnico di Milano design system. The important point is the bridge between:
| Side | Meaning in the course |
|---|---|
| Academic culture | design history, method, theory, research, critical thinking |
| Professional practice | real clients, business constraints, tools, delivery, collaboration |
| UI foundations | visual design, interaction, components, accessibility |
| Product reality | stakeholders, development, metrics, project scope |
The course is built as a practical path: theory is useful only if it helps to design better interfaces.
Course Structure
The course moves from foundations to high-fidelity project work.
| Phase | Focus | Output / Skill |
|---|---|---|
| Opening | Course alignment and expectations | shared language |
| Foundations | UI culture, history, branding, visual language | design awareness |
| Project brief | Understanding the real client/product context | problem framing |
| UX-to-UI transition | Taking UX outputs and turning them into interface decisions | UX-driven UI |
| Visual concept | Direction, exploration, style | concept proposal |
| High-fidelity design | Detailed screens, flows, components | polished UI |
| Figma practice | Working inside Figma | executable design files |
| Micro UI | Small interaction details and states | interaction clarity |
| AI and code | New tools and hybrid workflows | experimentation |
| Validation | Usability, A/B testing, eye tracking | evidence-based refinement |
Course Mindset
The faculty frames the course as a place to develop a professional mindset. The student should not only ask “how do I make this look better?”, but:
- What problem is this interface solving?
- Who is the user?
- What is the business goal?
- What information must become visible?
- What complexity can be reduced?
- What complexity must remain?
- How can I justify this design choice?
- What can be tested or validated?
Design as Translation
One of the strongest ideas in the introduction is that design translates complexity.
The designer is positioned like a translator between worlds that do not naturally speak the same language:
- business goals and user needs
- technical systems and human expectations
- complex information and simple interaction
- UX structure and visual interface
- brand identity and product behavior
In this sense, the interface is not just a screen. It is a communication device.
UI and UX Relationship
UI and UX are different but complementary disciplines.
| Discipline | Main concern | Typical questions |
|---|---|---|
| User Experience Design | structure, flow, research, user needs, service logic | What should happen? Why? For whom? |
| User Interface Design | visible interaction, hierarchy, style, components, feedback | How does the user see, understand, and act? |
The course uses the expression UX-driven UI. This means UI should not start from decoration, but from the underlying experience.
UX-Driven UI
UX-driven UI means that interface decisions are guided by user needs, flows, tasks, and constraints.
It does not mean that UI has no creative autonomy. It means that creativity must respond to the experience logic.
Practical translation:
| UX input | UI decision |
|---|---|
| User goal | visual priority and call to action |
| Flow | screen sequence and navigation |
| Task complexity | progressive disclosure |
| User uncertainty | feedback, help, reassurance |
| Business goal | conversion path and emphasis |
| Content hierarchy | typography, layout, spacing |
| Error risk | confirmations, undo, clear states |
What Students Are Expected to Learn
The student introductions show that people enter the course from different backgrounds:
- communication design
- information design
- dashboards and data visualization
- web design
- marketing and digital strategy
- industrial/automation interfaces
- 3D and game-related design
- UX design
- visual design
Common learning needs:
- improve UI competence
- connect UI with UX
- collaborate with developers
- defend design choices
- build a clearer method
- communicate design reasoning
- understand professional design language
Interaction Design Concepts
Gulf of Execution
The gulf of execution is the gap between what the user wants to do and what the interface lets them understand.
The interface should answer:
- What can I do here?
- Where should I click?
- How do I start?
- What control is available?
- What is the next step?
If the gulf is too wide, users feel blocked.
Gulf of Evaluation
The gulf of evaluation is the gap between the action and the user’s ability to understand what happened.
The interface should answer:
- Did the system receive my action?
- What changed?
- Was the action successful?
- What does the result mean?
- Can I correct it?
This becomes more important in AI interfaces because the system may act behind the scenes.
AI Changes the Interface Problem
Traditional interfaces often work like this:
- User chooses an action.
- User performs the action.
- Interface shows a result.
- User evaluates the result.
AI interfaces often work like this:
- User expresses an intent.
- System interprets the intent.
- System generates or suggests something.
- User evaluates, corrects, or chooses.
The designer must therefore design not only controls, but also:
- intent expression
- system transparency
- intermediate feedback
- correction loops
- trust moments
- result evaluation
Related: AI for Design, Generative UI
Trust Calibration
Trust calibration means helping the user trust the system at the right level.
Bad trust calibration can happen in two directions:
| Problem | Result |
|---|---|
| Too much trust | user accepts wrong output blindly |
| Too little trust | user avoids useful automation |
UI can calibrate trust by:
- showing what the system is doing
- showing why a recommendation appears
- making uncertainty visible
- offering alternatives
- allowing edits and corrections
- showing system status clearly
The autonomous vehicle example is useful: users feel safer when the car interface shows that the system sees the same cars they see outside.
UX Checkpoints
UX checkpoints are intentional moments where the interface makes the process visible.
They are useful when:
- the system makes an important decision
- the user needs control
- AI output may need review
- the action has consequences
- trust is necessary
Important: not all friction is bad. Some friction helps users understand, decide, and trust.
Generative UI
Generative UI means the interface can be generated dynamically by AI according to context, task, or user.
Potential value:
- personalization
- faster task completion
- adaptive layouts
- reduced manual configuration
Risks:
- inconsistent behavior
- accessibility problems
- unpredictable patterns
- loss of user control
- weak mental models
- difficult testing
The lesson warns against assuming that AI automatically solves interface problems.
Accessibility
Accessibility is framed as a core UI responsibility.
AI may help, but it cannot replace accessibility expertise. Good accessibility comes from:
- standards
- semantic structure
- readable contrast
- keyboard navigation
- clear labels
- predictable focus states
- tested interaction patterns
- expert review
Related: Accessibility
Usability Principles
Classic usability principles remain useful because they help designers explain choices.
Important principles:
- visibility of system status
- match between system and real world
- user control and freedom
- consistency and standards
- recognition rather than recall
- error prevention
- clear recovery paths
- reduction of unnecessary complexity
These principles give the designer a stronger argument than “I like this better”.
Netflix Example
Netflix is used as an example of an interface where content dominates, but UI decisions are highly deliberate.
Observed patterns:
- content rows
- horizontal scroll
- hover previews
- consistent navigation
- large visual assets
- progressive access to details
Why it works:
- users can evaluate content quickly
- users do not need to open every detail page
- the interface reduces cognitive effort
- familiar patterns help people browse
Tesler’s Law
Tesler’s Law: every system has a certain amount of complexity that cannot completely disappear.
The designer can:
- reduce complexity
- delay complexity
- hide complexity
- distribute complexity
- explain complexity
But the designer cannot magically erase all complexity.
In UI work, this matters because complex products cannot be made simple only by hiding information. UI should organize complexity instead of pretending it does not exist.
Familiarity vs Innovation
Familiar patterns help adoption. For example, chat interfaces work partly because people already understand messaging apps and search bars.
But too much familiarity can make interfaces generic.
The design tension:
| Familiarity | Innovation |
|---|---|
| easier to learn | more distinctive |
| lower cognitive load | stronger brand identity |
| predictable | memorable |
| safer | riskier |
Good UI balances both.
Skeuomorphism
Skeuomorphism means using real-world visual metaphors in a digital interface.
Example: GarageBand simulates musical equipment so users understand complex audio controls through familiar objects.
Skeuomorphism is useful when the real-world metaphor genuinely helps understanding.
Command-Based Interaction
AI interfaces often use command-based interaction:
- User gives a command or prompt.
- System produces a result.
- User refines or corrects.
This requires UI support for:
- constraints
- feedback
- correction
- versioning
- undo
- result comparison
- transparency
The interface should prevent the system from feeling like a black box.
My Study Notes
For my own UI learning, this lesson gives me a foundation:
- UI must be connected to UX logic.
- UI choices must be defensible with principles.
- Complex interfaces are often complexity-management problems.
- AI makes feedback, transparency, and trust more important.
- Design systems are useful, but they need critical interpretation.
Questions for Myself
- What is the main complexity in the interface I am studying?
- Which screen needs the strongest hierarchy?
- Which user archetype should I prioritize first?
- Where does the interface need trust-building feedback?
- Which usability principle can I use to defend each design choice?
- How can I avoid making UI only a visual layer over UX?
Key Vocabulary
| Term | Meaning |
|---|---|
| UX-driven UI | UI guided by user needs, flows, and experience logic |
| Gulf of Execution | gap between user goal and available action |
| Gulf of Evaluation | gap between action and understandable result |
| Trust Calibration | designing the right level of user trust |
| UX Checkpoint | useful friction that makes the system understandable |
| Generative UI | dynamically generated interface behavior or layout |
| Tesler’s Law | complexity can be managed but not erased |
Related Notes
- UID 07 - Course Map
- UID 07 - Intro alla user interface con Mirko Santangelo
- UID 07 - Case studies and best practices con Elisabetta Balconi
- User Interface Design
- User Experience Design
- Design System
- Accessibility
- Usability Testing
- A-B Testing
- Eye Tracking
- AI for Design
- Generative UI
- Front web development