Application Design I | Task 3
Application Design I
21/11/2025 - 12/12/2025| Week 09 - Week 11
Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honors) in Creative Media
Application Design I / Taylor's University
Lecture 11: Usability Testing & UI Kit
Usability Testing (What & Why)
Usability testing = testing your app with real users, not guessing.
Users are given specific tasks, while designers observe silently.
Goal is to spot usability issues, understand confusion, and gauge satisfaction.
Focuses on quality insights, not big data like surveys.
How to Conduct Usability Testing
Prepare a low-fidelity prototype (wireframes are enough).
Create 3 clear user scenarios with written instructions.
Recruit 3 participants (each does 1 scenario).
Conduct testing remotely (e.g. Zoom) and share the Figma link.
Ask follow-up questions → analyze patterns → refine the design.
Task Design (Examples)
Account tasks: sign up, log in, edit profile.
Navigation tasks: find menu, settings, or key features.
Core actions: search, transfer money, purchase items.
Tasks should feel realistic and goal-oriented, not step-by-step tutorials.
UI Kit (Why It Matters)
A UI kit is a pre-packaged system of reusable UI components.
Saves time — no need to design everything from scratch.
Helps maintain visual consistency across the app.
Often used as a starting point, then customized for brand needs.
What’s Inside a UI Kit
Color palette (primary, secondary, states).
Typography system (fonts, sizes, hierarchy).
Components (buttons, inputs, cards, modals).
Layouts & grids to keep screens aligned and stable.
Iconography that matches the overall style.
Lecture 12: Usability Heuristics
What Are Usability Heuristics?
General rules of thumb for good UI/UX.
Created to help designers identify problems early.
Based on Jakob Nielsen’s research (industry standard).
Jakob Nielsen’s 10 Heuristics (Key Takeaways)
1. Visibility of System Status
Always tell users what’s happening.
Use loading states, confirmations, progress bars.
2. Match Between System & Real World
Use familiar language and icons.
Avoid technical jargon — speak like a human.
3. User Control & Freedom
Let users undo, cancel, or go back easily.
No dead ends or forced paths.
4. Consistency & Standards
Same actions should behave the same everywhere.
Buttons, icons, and layouts shouldn’t “jump around”.
5. Error Prevention
Prevent mistakes before they happen.
Confirm destructive actions (delete, pay, submit).
6. Recognition Rather Than Recall
Don’t make users remember things.
Show options, history, and visible navigation.
7. Flexibility & Efficiency of Use
Support both beginners and power users.
Shortcuts and customization improve efficiency.
8. Aesthetic & Minimalist Design
Keep it clean and focused.
Remove anything that doesn’t serve a purpose.
9. Help Users Recover from Errors
Clear error messages that explain what went wrong.
Tell users how to fix the problem.
10. Help & Documentation
Tooltips, tutorials, FAQs matter.
Help should be easy to find, not hidden.
Lecture 13: User Interface Visual Elements
Core Visual Elements
Line & Shape: define structure, icons, and grouping.
Color: builds hierarchy, mood, and brand identity.
Space (White Space): improves focus and readability.
Texture & Form: adds depth, but don’t overdo it.
Text & Typography
Clear hierarchy: headings vs body text must be obvious.
Avoid long text blocks — break content into chunks.
Font choice affects tone, readability, and trust.
Color Usage
Avoid pure black (#000000) — too harsh on eyes.
Ensure good contrast (WCAG readability standards).
Color should guide attention, not overwhelm.
Buttons & Interactions
Button height: 40–60pt (never smaller).
Primary buttons = main action.
Secondary buttons = edit or go back.
Tertiary buttons = optional actions (share, save).
Only clickable elements should look clickable (shadows matter).
Icons & Images
Icons should live in a consistent bounding box.
Icons can support text — not always replace it.
Photos should have one clear focal point.
Use overlays to keep text readable on images.
Cards & Layout
Cards = condensed versions of full pages.
Only include essential information.
Use grids to prevent layouts from feeling messy.
White space helps content breathe and feel intentional.
Navigation Components
Search bars, sliders, tags, carousels = guide exploration.
Carousels are good for featured content, not everything.
Navigation should feel predictable and familiar.
II. INSTRUCTION
Comments
Post a Comment