1–10: UI Basics
- What does UI stand for?
a) User Interaction
b) User Interface ✅
c) User Input
d) Uniform Integration - Which color is often associated with trust in UI design?
a) Red
b) Blue ✅
c) Yellow
d) Orange - What is the main purpose of a button in UI?
a) Decoration
b) Navigation & actions ✅
c) Color selection
d) Text formatting - Which is a serif font?
a) Arial
b) Times New Roman ✅
c) Helvetica
d) Roboto - Spacing between lines of text is called:
a) Kerning
b) Tracking
c) Leading ✅
d) Margin - Which UI component is used to select multiple options?
a) Radio button
b) Checkbox ✅
c) Dropdown
d) Slider - Which principle helps users notice important UI elements first?
a) Contrast ✅
b) Opacity
c) Padding
d) Alignment - Material Design is a design system created by:
a) Apple
b) Google ✅
c) Microsoft
d) IBM - What is a common icon for a menu?
a) ⚙️
b) ☰ ✅
c) 🔔
d) ✉️ - What does a card component usually contain?
a) Text & media ✅
b) Only text
c) Only buttons
d) Only images
11–20: UX Basics
- What does UX stand for?
a) User Experience ✅
b) User Exploration
c) User Exchange
d) User Extension - UX design focuses on:
a) Aesthetics only
b) User satisfaction & usability ✅
c) Colors and fonts
d) Animations - A “persona” in UX is:
a) A fictional user representation ✅
b) A real team member
c) A type of UI component
d) A design system - The first step in UX design process is usually:
a) Prototyping
b) Testing
c) Research ✅
d) Wireframing - What is a user flow?
a) Color scheme
b) Sequence of steps a user takes ✅
c) Layout guideline
d) Design tool - Which is a usability testing method?
a) Surveys ✅
b) Photoshop
c) Wireframing
d) Figma - UX design is mainly about:
a) Making interfaces pretty
b) Solving user problems ✅
c) Adding animations
d) Writing code - Information architecture in UX deals with:
a) Organizing content ✅
b) Choosing colors
c) Creating buttons
d) Animations - Heuristic evaluation refers to:
a) Coding a website
b) Expert review of usability ✅
c) Creating icons
d) Writing content - What is a wireframe?
a) A full-color mockup
b) A low-fidelity layout of a page ✅
c) An interactive prototype
d) A brand guideline
21–30: UI/UX Terminology
- What is “responsive design”?
a) Design that reacts to user emotions
b) Design that adapts to screen size ✅
c) Design that changes color
d) Design that changes fonts - What does “CTA” stand for?
a) Call To Action ✅
b) Click Through Animation
c) Color Typography Alignment
d) Component Template Asset - Which is an example of microinteraction?
a) Button hover animation ✅
b) Full website layout
c) Logo design
d) Font choice - “Affordance” in UI means:
a) How much it costs
b) How a UI element suggests its function ✅
c) Button color
d) Font size - What is “cognitive load”?
a) Number of colors used
b) Mental effort required to use a product ✅
c) Number of buttons on a screen
d) Image size - A modal is:
a) A type of button
b) A pop-up window that interrupts workflow ✅
c) A font style
d) A layout pattern - What is the difference between UX and UI?
a) UI = User Experience, UX = User Interface
b) UI = Visual design, UX = User experience ✅
c) They are the same
d) UX = Only coding - Which color combination is good for readability?
a) Red text on red background
b) Black text on white background ✅
c) Yellow text on white background
d) Pink text on yellow background - “Heuristic principles” were introduced by:
a) Don Norman
b) Jakob Nielsen ✅
c) Steve Jobs
d) Alan Turing - Which is a common UX deliverable?
a) Wireframes ✅
b) HTML code
c) Icons
d) Logos
31–40: Practical UI/UX
- Which is considered bad UX?
a) Clear navigation
b) Slow load times ✅
c) Readable fonts
d) Consistent colors - What is the main goal of usability testing?
a) Make things pretty
b) Identify user problems ✅
c) Write content
d) Animate elements - What is “A/B testing”?
a) Comparing two versions to see which performs better ✅
b) Choosing font size
c) Selecting colors
d) Checking spelling - Which device requires special responsive consideration?
a) Desktop
b) Mobile ✅
c) Laptop
d) Printer - Which is NOT a UX method?
a) Card sorting
b) Wireframing
c) Heuristic evaluation
d) Image compression ✅ - Which is a poor UI design choice?
a) Using consistent button styles
b) Overloading the screen with too many elements ✅
c) High contrast text
d) Grouping similar items - What is a “prototype”?
a) Final product
b) Interactive version of a design ✅
c) User research document
d) Typography guide - Which is an example of inclusive design?
a) Color contrast for readability ✅
b) Small font size
c) Only visual cues
d) Hidden navigation - Which UX principle helps reduce errors?
a) Feedback ✅
b) White space
c) Bold fonts
d) Dark mode - Which is a primary UX metric?
a) Time on task ✅
b) Color palette
c) Font family
d) Button size
41–50: Fun & Knowledge Check
- Hamburger menu is used for:
a) Navigation ✅
b) Typography
c) Images
d) Animations - Dark mode improves:
a) Battery life & readability ✅
b) Color contrast
c) Font choice
d) Spacing - What is a “touch target” in mobile UI?
a) Minimum interactive area for fingers ✅
b) Image size
c) Font size
d) Margin - UX writing focuses on:
a) Layout
b) Text that guides the user ✅
c) Fonts
d) Icons - Which is a common UX research method?
a) Prototyping
b) Interviews ✅
c) Button design
d) Color palette - The term “above the fold” comes from:
a) Web design ✅
b) Printing ✅
c) UX writing
d) Typography - Which is NOT a UX design tool?
a) Figma
b) Sketch
c) Illustrator ✅
d) Adobe XD - Visual hierarchy helps users:
a) Understand which elements are important ✅
b) Navigate keyboard shortcuts
c) Install apps
d) Choose colors - Which is a usability heuristic?
a) Minimalism ✅
b) Visibility of system status ✅
c) Font choice
d) Button color - The ultimate goal of UI/UX design is:
a) To make things look pretty
b) To improve user satisfaction & usability ✅
c) To create complex animations
d) To use the latest technology
Conclusion
Congratulations on completing the quiz!
UI/UX design is a blend of creativity, psychology, and problem-solving. Whether you got every question right or discovered a few gaps in your knowledge, this quiz is a step toward understanding the fundamentals of designing user-friendly and visually appealing digital experiences.
Remember:
- UI (User Interface) focuses on how things look – colors, typography, buttons, and layouts.
- UX (User Experience) focuses on how things work – usability, accessibility, and overall user satisfaction.
The best way to improve your skills is to practice, observe, and iterate:
- Study real-world apps and websites.
- Try creating wireframes and prototypes.
- Test your designs with real users whenever possible.
Keep learning, stay curious, and continue exploring the fascinating world of UI/UX design. Your journey from beginner to expert starts with small steps and quizzes like this are a fun way to measure your progress!
Tip: Revisit areas you found tricky, try redesign exercises, and soon you’ll see your UI/UX intuition grow stronger.
