Patterns are solutions to common design problems that provide an ideal starting point for newcomers to design and an excellent reference for experienced designers. Some common patterns include trading cards, palettes, hub and spoke, bento boxes, search, and conversational. Patterns are used for things like content views, settings, canvas and palettes for content creation, category and detail views, elements with hot spots, and search boxes. Considerations for using patterns effectively include ensuring information is easy to grasp, focusing on content over chrome, avoiding information overload, and keeping users informed without being wordy.

1. Shyamala Prayaga

2. WHAT ARE PATTERNS?

3. PATTERNS ARE
“KNOWN
SOLUTIONS TO
COMMON DESIGN
PROBLEMS”

4. PROVIDE AN
IDEAL STARTING
POINT FOR
NEWCOMERS TO
DESIGN.

5. A EXCELLENT
REFERENCE
FOR
EXPERIENCED
DESIGNERS.

6. • Trading Card
• Palette
• Hub & Spoke
• Bento box
• Search
• Conversational

7. Suzanne Ginsburg

8. USED FOR
• Content view
• Settings
• May have ability to swipe to see more content

11. • Doesn’t scale well
• Less effective on iPad

12. • Ensure info is easy to grasp at a glance

13. Suzanne Ginsburg

14. USED FOR
• Canvas & Palettes
• Way to access creations

17. • Real estate can become an issue for content
creation

18. • Maximum real estate for content creation
• Ensure that tools are discoverable
• Progressive disclosure of palette options
• Customize palette placement for each device

19. Suzanne Ginsburg

20. USED FOR
• Category & Detail Views

23. • In some cases may have minimal user delight

24. • Bubble up content
• As shallow as possible

25. Suzanne Ginsburg

26. USED FOR
• Elements with hot spots for more details

29. • Scalability

30. • Focus on content, not chrome
• Beware of info overload

31. Suzanne Ginsburg

32. USED FOR
• Search box, results, saved searches

34. • Provide suggestions when you can
• Provide voice option when possible
• Ensure that box & text are large enough

35. Suzanne Ginsburg

36. USED FOR
• Feedbacks
• Wide variations in content

39. • Keep user well informed of app status, yet be
concise
• Use infographic to illustrate interactions with
outside world and/or devices when necessary

40. • Skeumorphism
• Hybrid
• Games
• Custom
• Tools

41. A SKEUOMORPH IS “AN OBJECT OR
FEATURE WHICH IMITATES THE DESIGN OF
A SIMILAR ARTEFACT IN ANOTHER
MATERIAL”.

42. SKEUOMORPHISM MAKES
INTERFACE OR DESIGN THINGS LOOK
AND BEHAVE THE SAME WAY AS THE
REAL-LIFE OBJECT THEY ARE BASED
UPON.

47. • Make design better than reality
• User interactions should match mental
model
• Hire a very skilled graphic designer if that isn’t
your area of expertise

48. MOST COMMON PATTERN OF
ALL WHICH COMBINES
DIFFERENT INTERACTION
PATTERNS

51. A GAME IS STRUCTURED
PLAYING, USUALLY UNDERTAKEN
FOR ENJOYMENT AND
SOMETIMES USED AS AN
EDUCATIONAL TOOL.

54. CREATING SOMETHING
FRESH AND NEW OUT OF
THE BOX, MOVING AWAY
FROM REGULAR PATTERNS.

56. THE INTERACTION PATTERNS WITHIN
MANY PRODUCTIVITY TOOLS ARE
LARGELY BASED ON USER’S MENTAL
MODELS THAT HAVE DEVELOPED AND
EVOLVED OVER TIME

58. • Use caution when trying to improve on these
interaction design patterns

59. QUESTIONS