Patttterns
A catalog of 200+ interaction design patterns.
āĻ¸ā§āĻā§āĻ°
82
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻ°ā§āĻāĻŋāĻ
4.2
āĻŦāĻŋāĻ¨āĻžāĻŽā§āĻ˛ā§āĻ¯ā§/āĻā§āĻ°āĻžāĻ¯āĻŧāĻžāĻ˛ āĻ¸āĻšāĻžāĻ¯āĻŧāĻ¤āĻž
āĻ¸āĻŽāĻ°ā§āĻĨāĻŋāĻ¤
āĻļā§āĻ°ā§āĻ° āĻŽā§āĻ˛ā§āĻ¯
--
āĻ¸āĻ°ā§āĻŦāĻļā§āĻˇ āĻāĻĒāĻĄā§āĻ
āĻāĻĒā§āĻ°āĻŋāĻ˛ 27, 2026
āĻ¸āĻāĻā§āĻˇāĻŋāĻĒā§āĻ¤āĻ¸āĻžāĻ°
Patttterns āĻā§?
āĻĒā§āĻ¯āĻžāĻāĻāĻžāĻ°ā§āĻ¨āĻ¸ āĻšāĻ˛ āĻāĻāĻāĻŋ āĻĄāĻŋāĻāĻžāĻāĻ¨ āĻā§āĻ˛ āĻ¯āĻž āĻ ā§āĻ¯āĻžāĻā§āĻ¸ā§āĻ¸āĻ¯ā§āĻā§āĻ¯āĻ¤āĻž, āĻŦā§āĻ¯āĻā§āĻ¤āĻŋāĻāĻ¤āĻāĻ°āĻŖ āĻāĻŦāĻ āĻ ā§āĻ¯āĻžāĻ¨āĻŋāĻŽā§āĻļāĻ¨ā§āĻ° āĻŽāĻ¤ā§ āĻŦā§āĻļāĻŋāĻˇā§āĻā§āĻ¯ āĻ¸āĻš āĻāĻžāĻ°ā§āĻ¯āĻāĻ° āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻ āĻāĻŋāĻā§āĻāĻ¤āĻž āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻ¤ā§ āĻ¸āĻžāĻšāĻžāĻ¯ā§āĻ¯ āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ UX āĻĢā§āĻ˛ā§ āĻāĻŦāĻ UI āĻāĻĒāĻžāĻĻāĻžāĻ¨ āĻ¸āĻ°āĻŦāĻ°āĻžāĻš āĻāĻ°ā§āĨ¤
Patttterns āĻā§ āĻāĻžāĻā§ āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧ?
āĻā§āĻ¯āĻžāĻ
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§ āĻā§āĻ°ā§āĻĒ
āĻļā§āĻ°ā§āĻˇ āĻŦā§āĻļāĻŋāĻˇā§āĻā§āĻ¯
- āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻ āĻāĻŋāĻā§āĻāĻ¤āĻž āĻ āĻĒā§āĻāĻŋāĻŽāĻžāĻāĻā§āĻļāĻžāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ UX āĻĒā§āĻ°āĻŦāĻžāĻš
- āĻĒāĻ°āĻŋāĻˇā§āĻāĻžāĻ° āĻāĻ¨ā§āĻāĻžāĻ°āĻĢā§āĻ¸ āĻĄāĻŋāĻāĻžāĻāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ UI āĻāĻĒāĻžāĻĻāĻžāĻ¨
- āĻ ā§āĻ¯āĻžāĻā§āĻ¸ā§āĻ¸āĻ¯ā§āĻā§āĻ¯āĻ¤āĻž āĻāĻŦāĻ āĻŦā§āĻ¯āĻā§āĻ¤āĻŋāĻāĻ¤āĻāĻ°āĻŖ āĻŦā§āĻļāĻŋāĻˇā§āĻā§āĻ¯
- āĻŦāĻ°ā§āĻ§āĻŋāĻ¤ āĻŽāĻŋāĻĨāĻ¸ā§āĻā§āĻ°āĻŋāĻ¯āĻŧāĻž āĻāĻ¨ā§āĻ¯ āĻ ā§āĻ¯āĻžāĻ¨āĻŋāĻŽā§āĻļāĻ¨ āĻāĻŦāĻ āĻ°ā§āĻĒāĻžāĻ¨ā§āĻ¤āĻ°
- āĻĢāĻ°ā§āĻŽ āĻā§āĻˇā§āĻ¤ā§āĻ° āĻāĻŦāĻ āĻ¨ā§āĻāĻŋāĻā§āĻļāĻ¨ āĻāĻĒāĻžāĻĻāĻžāĻ¨
Patttterns āĻā§āĻāĻžāĻŦā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻŦā§āĻ¨?
UX Flows āĻāĻŦāĻ UI āĻāĻĒāĻžāĻĻāĻžāĻ¨āĻā§āĻ˛āĻŋāĻ° āĻŽāĻ¤ā§ āĻŦāĻŋāĻāĻžāĻāĻā§āĻ˛āĻŋ āĻĨā§āĻā§ āĻ¨āĻŋāĻ°ā§āĻŦāĻžāĻāĻ¨ āĻāĻ°āĻ¤ā§ āĻā§āĻ˛āĻāĻŋ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨, āĻāĻĒāĻžāĻĻāĻžāĻ¨āĻā§āĻ˛āĻŋāĻā§ āĻāĻžāĻ¸ā§āĻāĻŽāĻžāĻāĻ āĻāĻ°ā§āĻ¨ āĻāĻŦāĻ āĻāĻ¨ā§āĻ¨āĻ¤ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻāĻ¨ā§āĻāĻžāĻ°āĻ ā§āĻ¯āĻžāĻāĻļāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻāĻĒāĻ¨āĻžāĻ° āĻĄāĻŋāĻāĻžāĻāĻ¨ āĻĒā§āĻ°āĻāĻ˛ā§āĻĒāĻā§āĻ˛āĻŋāĻ¤ā§ āĻ¸ā§āĻā§āĻ˛āĻŋāĻā§ āĻāĻā§āĻā§āĻ¤ āĻāĻ°ā§āĻ¨ā§ˇ
āĻŦāĻŋāĻāĻ˛ā§āĻĒ āĻā§āĻ˛
āĻā§āĻ¨ āĻŦāĻŋāĻāĻ˛ā§āĻĒ āĻā§āĻ˛ āĻĒāĻžāĻāĻ¯āĻŧāĻž āĻ¯āĻžāĻ¯āĻŧāĻ¨āĻŋ
āĻ¸ā§āĻŦāĻŋāĻ§āĻž & āĻ āĻ¸ā§āĻŦāĻŋāĻ§āĻž
āĻ¸ā§āĻŦāĻŋāĻ§āĻž
- āĻĄāĻŋāĻāĻžāĻāĻ¨ āĻĒā§āĻ¯āĻžāĻāĻžāĻ°ā§āĻ¨ā§āĻ° āĻŦā§āĻ¯āĻžāĻĒāĻ āĻ˛āĻžāĻāĻŦā§āĻ°ā§āĻ°āĻŋ
- āĻ ā§āĻ¯āĻžāĻā§āĻ¸ā§āĻ¸āĻ¯ā§āĻā§āĻ¯āĻ¤āĻž āĻāĻŦāĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻ āĻāĻŋāĻā§āĻāĻ¤āĻžāĻ° āĻāĻĒāĻ° āĻĢā§āĻāĻžāĻ¸ āĻāĻ°ā§āĻ¨
- āĻĄāĻŋāĻāĻžāĻāĻ¨āĻžāĻ° āĻāĻŦāĻ āĻĄā§āĻā§āĻ˛āĻĒāĻžāĻ°āĻĻā§āĻ° āĻāĻ¨ā§āĻ¯ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¸āĻšāĻ
- āĻŦāĻŋāĻāĻŋāĻ¨ā§āĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§ āĻĒā§āĻ°āĻŦāĻžāĻš āĻŦāĻŋāĻāĻžāĻ āĻ¸āĻŽāĻ°ā§āĻĨāĻ¨ āĻāĻ°ā§
āĻ āĻ¸ā§āĻŦāĻŋāĻ§āĻž
- āĻŽā§āĻ˛ā§āĻ¯ āĻāĻŦāĻ āĻāĻ¨ā§āĻ¨āĻ¤ āĻŦā§āĻļāĻŋāĻˇā§āĻā§āĻ¯ āĻ¸ā§āĻŽāĻŋāĻ¤ āĻ¤āĻĨā§āĻ¯
- āĻ¸āĻšāĻ¯ā§āĻāĻŋāĻ¤āĻž āĻŦāĻž āĻ°āĻĒā§āĻ¤āĻžāĻ¨āĻŋ āĻŦāĻŋāĻāĻ˛ā§āĻĒā§āĻ° āĻā§āĻ¨ āĻŦāĻŋāĻŦāĻ°āĻŖ āĻ¨ā§āĻ
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°ā§āĻ° āĻā§āĻˇā§āĻ¤ā§āĻ°ā§
- āĻŦāĻŋāĻĒāĻŖāĻ¨ āĻĒā§āĻ°āĻāĻžāĻ°āĻžāĻāĻŋāĻ¯āĻžāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻ˛ā§āĻ¯āĻžāĻ¨ā§āĻĄāĻŋāĻ āĻĒā§āĻ āĻĄāĻŋāĻāĻžāĻāĻ¨ āĻāĻ°āĻž
- āĻ¨āĻ¤ā§āĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻĻā§āĻ° āĻāĻ¨ā§āĻ¯ āĻ āĻ¨āĻŦā§āĻ°ā§āĻĄāĻŋāĻ āĻĒā§āĻ°āĻŦāĻžāĻš āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻž
- āĻ ā§āĻ¯āĻžāĻā§āĻ¸ā§āĻ¸āĻ¯ā§āĻā§āĻ¯ āĻĢāĻ°ā§āĻŽ āĻāĻŦāĻ āĻ¨ā§āĻāĻŋāĻā§āĻļāĻ¨ āĻ¸āĻŋāĻ¸ā§āĻā§āĻŽ āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻž
- āĻ ā§āĻ¯āĻžāĻ¨āĻŋāĻŽā§āĻļāĻ¨ āĻāĻŦāĻ āĻā§āĻ°āĻžāĻ¨āĻāĻŋāĻļāĻ¨ āĻ¸āĻš UI āĻāĻ¨ā§āĻ¨āĻ¤ āĻāĻ°āĻž
Patttterns āĻŽā§āĻ˛ā§āĻ¯
āĻŦāĻŋāĻ¨āĻžāĻŽā§āĻ˛ā§āĻ¯ā§ āĻĒāĻ°āĻŋāĻāĻ˛ā§āĻĒāĻ¨āĻžāĻ¸āĻžāĻŦāĻ¸ā§āĻā§āĻ°āĻŋāĻĒāĻļāĻ¨ āĻĒāĻ°āĻŋāĻāĻ˛ā§āĻĒāĻ¨āĻž
āĻā§āĻ¨ āĻŦāĻŋāĻļāĻĻ āĻŽā§āĻ˛ā§āĻ¯ āĻ¤āĻĨā§āĻ¯ āĻāĻĒāĻ˛āĻŦā§āĻ§ āĻ¨ā§āĻ
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻĒāĻ°ā§āĻ¯āĻžāĻ˛ā§āĻāĻ¨āĻž
4.2
ā§Ģ āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§
4.2
āĻāĻāĻ¨āĻ āĻā§āĻ¨ āĻĒāĻ°ā§āĻ¯āĻžāĻ˛ā§āĻāĻ¨āĻž āĻ¨ā§āĻ
āĻāĻ āĻā§āĻ˛ā§āĻ° āĻĒā§āĻ°āĻĨāĻŽ āĻĒāĻ°ā§āĻ¯āĻžāĻ˛ā§āĻāĻ¨āĻžāĻāĻžāĻ°ā§ āĻšāĻ¨!