BitWithBite
UI/UX Worksheet
💻 Common UI Patterns
SCORE___ / 20
NameClassDate
After this worksheet you can
Name common UI patternsChoose modal vs toastExplain breadcrumb useExplain pattern familiarity📚 Quick Recap
🎯 What you'll practice: Navigation, cards, modals, and toast notifications.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A modal is used when a decision:
2A toast notification is best for:
3Cards are used to:
4Breadcrumbs should be used when:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Using recognized patterns is a because users already know them.
6A bar gives persistent access to primary destinations.
7Should a "delete this account" confirmation use a modal or a toast? Why?
8Should a "message sent" confirmation use a modal or a toast? Why?
9Why does using a recognized pattern reduce a product's learning curve?
🚀 Section C · Challenge ● CHALLENGE 5
10Design the navigation pattern for an e-commerce app with 4 top-level sections. Justify your choice of pattern.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-A 4-B | 5 = feature 6 = navigation 7 = A modal, because the action is destructive and irreversible and requires explicit confirmation 8 = A toast, because it's low-stakes and doesn't require the user to act 9 = Users already carry expectations from other apps, so a familiar pattern doesn't need to be relearned | 10 = Answers vary — e.g. a bottom tab bar with 4 icons (Home, Search, Cart, Profile), justified because it's always visible and standard for e-commerce apps with a handful of top-level sections.