MOBILE INTERACTIONPATTERNS AND NON PATTERNS

Shyamala Prayaga

WHAT ARE PATTERNS?

PATTERNS ARE

“KNOWN

SOLUTIONS TO

COMMON DESIGN

PROBLEMS”

PROVIDE AN

IDEAL STARTING

POINT FOR

NEWCOMERS TO

DESIGN.

A EXCELLENT

REFERENCE

FOR

EXPERIENCED

DESIGNERS.

• Trading Card

• Palette

• Hub & Spoke

• Bento box

• Search

• Conversational

PATTERNS

TRADING CARD

Suzanne Ginsburg

TRADING CARD

• Content view

• Settings

• May have ability to swipe to see more content

USED FOR

TRADING CARD EXAMPLE

TRADING CARD EXAMPLE

TRADING CARD LIMITATIONS

• Doesn’t scale well

• Less effective on iPad

TRADING CARD BEST PRACTICE

• Ensure info is easy to grasp at a glance

PALETTE

Suzanne Ginsburg

PALETTE

USED FOR

• Canvas & Palettes

• Way to access creations

PALETTE EXAMPLE

PALETTE EXAMPLE

PALETTE LIMITATIONS

• Real estate can become an issue for content creation

PALETTE BEST PRACTICES

• Maximum real estate for content creation • Ensure that tools are discoverable

• Progressive disclosure of palette options

• Customize palette placement for each device

HUB AND SPOKE

Suzanne Ginsburg

HUB AND SPOKE

USED FOR

• Category & Detail Views

HUB AND SPOKE EXAMPLES

HUB AND SPOKE EXAMPLES

HUB AND SPOKE LIMITATIONS

• In some cases may have minimal user delight

HUB AND SPOKE BEST PRACTICE

• Bubble up content

• As shallow as possible

BENTO BOX

Suzanne Ginsburg

BENTO BOX

USED FOR

• Elements with hot spots for more details

BENTO BOX EXAMPLES

BENTO BOX EXAMPLES

BENTO BOX LIMITATIONS

• Scalability

BENTO BOX BEST PRACTICE

• Focus on content, not chrome

• Beware of info overload

SEARCH

Suzanne Ginsburg

SEARCH

USED FOR

• Search box, results, saved searches

SEARCH EXAMPLES

SEARCH BEST PRACTICE

• Provide suggestions when you can

• Provide voice option when possible

• Ensure that box & text are large enough

CONVERSATION

Suzanne Ginsburg

CONVERSATION

USED FOR

• Feedbacks

• Wide variations in content

CONVERSATION EXAMPLE

CONVERSATION EXAMPLE

CONVERSATION BEST PRACTICES

• Keep user well informed of app status, yet be concise

• Use infographic to illustrate interactions with outside world and/or devices when necessary

NON PATTERNS

• Skeumorphism

• Hybrid

• Games

• Custom

• Tools

SKEUMORPHISM

A SKEUOMORPH IS “AN OBJECT OR

FEATURE WHICH IMITATES THE DESIGN OF

A SIMILAR ARTEFACT IN ANOTHER

MATERIAL”.

SKEUMORPHISM

SKEUOMORPHISM MAKES

INTERFACE OR DESIGN THINGS LOOK

AND BEHAVE THE SAME WAY AS THE

REAL-LIFE OBJECT THEY ARE BASED

UPON.

SKEUMORPHISM EXAMPLE

SKEUMORPHISM EXAMPLE

SKEUMORPHISM EXAMPLE

SKEUMORPHISM EXAMPLE

SKEUMORPHISM BEST PRACTICES

• 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

HYBRID

MOST COMMON PATTERN OF

ALL WHICH COMBINES

DIFFERENT INTERACTION

PATTERNS

HYBRID EXAMPLES

HYBRID EXAMPLES

GAMES

A GAME IS STRUCTURED

PLAYING, USUALLY UNDERTAKEN

FOR ENJOYMENT AND

SOMETIMES USED AS AN

EDUCATIONAL TOOL.

GAMES EXAMPLES

GAMES EXAMPLES

CUSTOM

CREATING SOMETHING

FRESH AND NEW OUT OF

THE BOX, MOVING AWAY

FROM REGULAR PATTERNS.

CUSTOM EXAMPLES

TOOLS

THE INTERACTION PATTERNS WITHIN

MANY PRODUCTIVITY TOOLS ARE

LARGELY BASED ON USER’S MENTAL

MODELS THAT HAVE DEVELOPED AND

EVOLVED OVER TIME

TOOLS EXAMPLES

TOOLS BEST PRACTICE

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

QUESTIONS