User Interface (UI) and UX Design
UI/UX fundamentals, contemporary design trends, and mobile interface design.
UI vs UX
UI Design
- Building interfaces in software/computerised devices, focusing on looks or style.
- UI are the access points where users interact, in three formats:
- Graphical user interfaces (GUIs) — visual representations on digital control panels (a computer's desktop).
- Voice-controlled interfaces (VUIs) — interaction through voice (Siri, Alexa).
- Gesture-based interfaces — engagement with 3D design spaces through bodily motion (VR games).
UX Design
- The process design teams use to create products that provide meaningful and relevant experiences to users — including branding, design, usability, and function across the entire process of acquiring and integrating the product.
- UX vs UI: not interchangeable but overlapping; separate disciplines. Usability and UI design are subsets of UX. A UX designer worries about the whole journey (before the device is even in the user's hands); they also address pleasure, efficiency, and fun — not just usability.
- Quote: "One cannot design a user experience, only design for a user experience. In particular, one cannot design a sensual experience, but only create the design features that can evoke it."
Designers' Control
- UX definition has two aspects: (1) a person's perceptions and responses; (2) the use of a product/system/service.
- Designers have little control over (1), but can control (2) — how the product behaves and looks.
How to Design Great UIs
- Users judge designs quickly and care about usability and likeability. They don't care about your design — they care about getting their tasks done easily with minimum effort. So the design should be "invisible": users focus on the task, not the interface (e.g. Domino's Zero Click app). Understand users' contexts and task flows (customer journey maps) to fine-tune intuitive UIs.
- UIs should also be enjoyable (or at least satisfying/frustration-free); predict needs for personalisation/immersion; use gamification where appropriate; communicate brand values and build trust.
10 basic principles of UI design:
- Make buttons/common elements behave predictably (use unconsciously everywhere).
- Maintain high discoverability.
- Keep interfaces simple; create an "invisible" feel.
- Respect the user's eye and attention in layout.
- Minimise actions to perform tasks; focus on one chief function per page.
- Put controls near the objects they control.
- Keep users informed with feedback on system responses/actions.
- Use appropriate UI design patterns to guide users and reduce burden.
- Maintain brand consistency.
- Always provide natural next steps whatever the context.
UI Design Trends
Skeuomorphism (拟真)
- Interface objects that mimic real-world counterparts in appearance and/or interaction. Its familiarity made early computing/mobile interfaces easier to use.
Neumorphism (新拟真 / "soft UI")
- Combines skeuomorphism and minimalism to create soft, almost-3D, tactile, visually appealing interfaces that enhance engagement.
Glassmorphism
- A frosted-glass effect: backgrounds blurred behind semi-transparent panels, mimicking glass to create depth/dimensionality while staying sleek/modern.
- Characteristics: transparency, blur effects, vivid colours, light and shadow, border highlights, minimalist/clean, overlaying of elements.
- Investigate these trends to see whether they enhance your design — don't follow fashion blindly.
UX Design — Process and Discipline
Who, Why, What, How
- UX designers consider the who (users), why (motivation), what (the product does), and how (interaction) of product use.
User-Centered Design
- Encompasses the entire user journey; a multidisciplinary field (visual design, programming, psychology, interaction design).
- User-centered design is an iterative process that takes understanding of users and their context as the starting point for all design/development.
How UX Design Works (Design Thinking / Double Diamond)
- Empathize — through user research.
- Define — through data analysis and synthesis.
- Ideate — through brainstorming.
- Prototype — using analog and digital tools.
- Test — with real users.
AI and UX
- AI can automate tasks and help UX designers, but will not completely replace them — AI lacks the creativity and empathy humans bring.
Why UX Matters
- UX focuses on fulfilling user needs, which improves brand reputation and loyalty — benefiting the business.
Mobile Interfaces
The Mobile UI is the graphical layout of an app: buttons, text, images, sliders, text-entry fields, screen layout, transitions, interface animations, and every micro-interaction. It is the gateway through which users interact with mobile applications.
Challenges
- Tiny screen sizes and variable screen widths.
- Touch screens and difficulty of typing text.
- Challenging physical environments: bright sun, dark theaters, cars/buses/trains/planes, stores, bathrooms, bed. Ambient light differences (gray-on-gray fails in direct sun). Motion: tiny text hard to read; tiny hit targets hard to tap.
Opportunities
- Location awareness: devices know exactly where they are, so location-specific info can be served and situations inferred to anticipate needs.
- Social influences and limited attention: mobile users won't give lots of attention while walking/riding/talking. Design for distracted users — easy, quick, reentrant, self-explanatory task sequences. Assume many users are in social situations; design to behave well and support graceful social interaction.
Mobile Design Principles
- Clarity — self-explanatory; icons/buttons clearly visible with obvious functions; familiar symbols, clear labels, intuitive design.
- Simplicity — focus on essential features; minimal steps/effort; minimise elements; group related; clear concise language.
- Consistency — uniform design elements/interaction patterns (colour, typography, icons, buttons) throughout.
- Responsiveness — adapt to different screen sizes, orientations, devices (flexible layouts, adaptive images, media queries).
Mobile UI Patterns
- Vertical Stack — content in a single scrolling column with little side-by-side; text wraps; most important on top.
- Filmstrip — swipe back/forth, one screen at a time; each item occupies the full screen (no tabs); swiping is satisfying.
- Bottom Navigation — global navigation at the bottom (low-priority paths); top shows fresh, interesting content (e.g. Amazon mobile).
- Collections and Cards — collections = thumbnail photo lists; cards = content + functionality; invite tapping to view articles/videos/apps.
- Infinite List — loads more as the user scrolls; fast chunk loading; under user control.
- Generous Borders — touch targets must be large enough; surround each with enough margin/border/whitespace to make a sufficient hit target.
- Richly Connected Apps — data shown as "connectable" (phone numbers, links); intelligent cross-app paths (Calendar ↔ phone, maps, contacts, email).
Emerging Mobile Trends
- Gesture-Based Interface — giants abandoned buttons for edgeless glass screens manipulated by swipe/pinch/slide; gesture systems attract and engage users.
- Facial Recognition — unlocking phones; banking security; travel/passport confirmation.
- AI Assistant — tell the phone what to do; daily-capacity helpers; UI design should embrace AI integration.
- Augmented Reality (AR) — overlays virtual elements onto the real world. Core principles: Overlay (virtual on real), Registration (align virtual with physical), Interaction (engage with virtual elements in real time); creates the depth designers seek.
UI vs UX at a Glance
| Dimension | UI | UX |
|---|---|---|
| Concern | look, style, access points | whole experience (brand, usability, function) |
| Question | "how does it look/feel to click?" | "is the whole journey intuitive, smooth, pleasant?" |
| Discipline | visual/interaction design | multidisciplinary (research, design, psychology) |
| Scope | screens, controls, micro-interactions | acquire → integrate → use → remember |
| Relation | a subset of UX | the enclosing practice |
A UI Design Checklist
Before shipping, verify each:
- [ ] Common elements behave predictably everywhere (principle 1).
- [ ] Key functions are discoverable without training (principle 2).
- [ ] The interface feels "invisible" — task, not chrome (principle 3).
- [ ] Layout respects the eye's natural attention (principle 4).
- [ ] Fewest possible actions; one chief function per page (principles 5, 8).
- [ ] Controls sit next to what they control (principle 6).
- [ ] Every action gives feedback (principle 7).
- [ ] Brand look-and-feel is consistent (principle 9).
- [ ] A natural next step is always offered (principle 10).
HCI – UI – UX: Conclusion
- UI is the access point (look/style); UX is the whole experience (branding, usability, function).
- Great UI is invisible, predictable, simple, and feedback-rich; trends (skeuomorphism, neumorphism, glassmorphism) are tools, not goals.
- Mobile design demands clarity, simplicity, consistency, responsiveness, and patterns suited to small, touch, distracted, location-aware contexts — with gesture, facial recognition, AI, and AR shaping the future.