SlideShare a Scribd company logo
1 of 59
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
Suzanne Ginsburg
USED FOR

• Content view

• Settings

• May have ability to swipe to see more content
• Doesn’t scale well
• Less effective on iPad
• Ensure info is easy to grasp at a glance
Suzanne Ginsburg
USED FOR

• Canvas & Palettes

• Way to access creations
• Real estate can become an issue for content
  creation
• Maximum real estate for content creation

• Ensure that tools are discoverable

• Progressive disclosure of palette options

• Customize palette placement for each device
Suzanne Ginsburg
USED FOR

• Category & Detail Views
• In some cases may have minimal user delight
• Bubble up content

• As shallow as possible
Suzanne Ginsburg
USED FOR

• Elements with hot spots for more details
• Scalability
• Focus on content, not chrome

• Beware of info overload
Suzanne Ginsburg
USED FOR

• Search box, results, saved searches
• Provide suggestions when you can

• Provide voice option when possible

• Ensure that box & text are large enough
Suzanne Ginsburg
USED FOR

• Feedbacks

• Wide variations in content
• Keep user well informed of app status, yet be
  concise

• Use infographic to illustrate interactions with
  outside world and/or devices when necessary
• Skeumorphism
• Hybrid
• Games
• Custom
• Tools
A SKEUOMORPH IS “AN OBJECT OR
FEATURE WHICH IMITATES THE DESIGN OF
A SIMILAR ARTEFACT IN ANOTHER
MATERIAL”.
SKEUOMORPHISM MAKES
INTERFACE OR DESIGN THINGS LOOK
AND BEHAVE THE SAME WAY AS THE
REAL-LIFE OBJECT THEY ARE BASED
UPON.
• 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
MOST COMMON PATTERN OF
ALL WHICH COMBINES
DIFFERENT INTERACTION
PATTERNS
A GAME IS STRUCTURED
PLAYING, USUALLY UNDERTAKEN
FOR ENJOYMENT AND
SOMETIMES USED AS AN
EDUCATIONAL TOOL.
CREATING SOMETHING
FRESH AND NEW OUT OF
THE BOX, MOVING AWAY
FROM REGULAR PATTERNS.
THE INTERACTION PATTERNS WITHIN
MANY PRODUCTIVITY TOOLS ARE
LARGELY BASED ON USER’S MENTAL
MODELS THAT HAVE DEVELOPED AND
EVOLVED OVER TIME
• Use caution when trying to improve on these
  interaction design patterns
QUESTIONS

More Related Content

Viewers also liked

Game Design Thinking for the Enterprise
Game Design Thinking for the EnterpriseGame Design Thinking for the Enterprise
Game Design Thinking for the Enterprise
Ann DeMarle
 
Running Research Communities in Asian markets
Running Research Communities in Asian marketsRunning Research Communities in Asian markets
Running Research Communities in Asian markets
InSites Consulting
 

Viewers also liked (20)

Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
 
Game Design Thinking for the Enterprise
Game Design Thinking for the EnterpriseGame Design Thinking for the Enterprise
Game Design Thinking for the Enterprise
 
Always-on research
Always-on researchAlways-on research
Always-on research
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015
 
Inspirational customer dialogues
Inspirational customer dialoguesInspirational customer dialogues
Inspirational customer dialogues
 
Running Research Communities in Asian markets
Running Research Communities in Asian marketsRunning Research Communities in Asian markets
Running Research Communities in Asian markets
 
Design thinking innovation training course outline - building a co-design app...
Design thinking innovation training course outline - building a co-design app...Design thinking innovation training course outline - building a co-design app...
Design thinking innovation training course outline - building a co-design app...
 
Research that sparks
Research that sparksResearch that sparks
Research that sparks
 
Exploring the world of water - The conversation revolution: brands & people d...
Exploring the world of water - The conversation revolution: brands & people d...Exploring the world of water - The conversation revolution: brands & people d...
Exploring the world of water - The conversation revolution: brands & people d...
 
ARGs and The Magic Circle
ARGs and The Magic CircleARGs and The Magic Circle
ARGs and The Magic Circle
 
10 rules to avoid a Collaboration Hangover
10 rules to avoid a Collaboration Hangover10 rules to avoid a Collaboration Hangover
10 rules to avoid a Collaboration Hangover
 
Co-everything: The itch of users in innovation
Co-everything: The itch of users in innovationCo-everything: The itch of users in innovation
Co-everything: The itch of users in innovation
 
Evangelizing Yourself
Evangelizing YourselfEvangelizing Yourself
Evangelizing Yourself
 
DIY UX: Give Your Users an Upgrade (Without Calling In a Pro)
DIY UX: Give Your Users an Upgrade (Without Calling In a Pro)DIY UX: Give Your Users an Upgrade (Without Calling In a Pro)
DIY UX: Give Your Users an Upgrade (Without Calling In a Pro)
 
Heuristic Usability Evaluation
Heuristic Usability Evaluation Heuristic Usability Evaluation
Heuristic Usability Evaluation
 
Finding your edge at the edges
Finding your edge at the edgesFinding your edge at the edges
Finding your edge at the edges
 
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UX
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UXMaximizing the impact of UX in an agile environment: Mixing agile and Lean UX
Maximizing the impact of UX in an agile environment: Mixing agile and Lean UX
 
Heuristic Evaluation - UX Approach
Heuristic Evaluation - UX ApproachHeuristic Evaluation - UX Approach
Heuristic Evaluation - UX Approach
 
UX Tools, Tips, and Tricks
UX Tools, Tips, and TricksUX Tools, Tips, and Tricks
UX Tools, Tips, and Tricks
 
Introduction to usability heuristics
Introduction to usability heuristicsIntroduction to usability heuristics
Introduction to usability heuristics
 

Similar to MOBILE INTERACTION PATTERNS AND NON PATTERNS

Experience Mapping Workshop Interaction South America 2014
Experience Mapping Workshop Interaction South America 2014Experience Mapping Workshop Interaction South America 2014
Experience Mapping Workshop Interaction South America 2014
John Labriola
 

Similar to MOBILE INTERACTION PATTERNS AND NON PATTERNS (20)

體驗劇場_1050503_W11_原型設計_楊政達
體驗劇場_1050503_W11_原型設計_楊政達體驗劇場_1050503_W11_原型設計_楊政達
體驗劇場_1050503_W11_原型設計_楊政達
 
Storyboarding
StoryboardingStoryboarding
Storyboarding
 
Papercasting User Experience in Interactive Ebooks - ebookcraft 2016 - John R...
Papercasting User Experience in Interactive Ebooks - ebookcraft 2016 - John R...Papercasting User Experience in Interactive Ebooks - ebookcraft 2016 - John R...
Papercasting User Experience in Interactive Ebooks - ebookcraft 2016 - John R...
 
Content Marketing - In Pursuit of Audience Love
Content Marketing - In Pursuit of Audience LoveContent Marketing - In Pursuit of Audience Love
Content Marketing - In Pursuit of Audience Love
 
Prototyping 2013.12.12.
Prototyping 2013.12.12.Prototyping 2013.12.12.
Prototyping 2013.12.12.
 
Revised 3 11-13 self directed program
Revised 3 11-13 self directed programRevised 3 11-13 self directed program
Revised 3 11-13 self directed program
 
How to Put the Library in STEM
How to Put the Library in STEMHow to Put the Library in STEM
How to Put the Library in STEM
 
Present Like an Impactful Leader
Present Like an Impactful LeaderPresent Like an Impactful Leader
Present Like an Impactful Leader
 
7. fmp evaluation
7. fmp evaluation7. fmp evaluation
7. fmp evaluation
 
Intro to game design
Intro to game designIntro to game design
Intro to game design
 
Experience Mapping Workshop Interaction South America 2014
Experience Mapping Workshop Interaction South America 2014Experience Mapping Workshop Interaction South America 2014
Experience Mapping Workshop Interaction South America 2014
 
How Great Content Jumps from Page to Platform
How Great Content Jumps from Page to Platform How Great Content Jumps from Page to Platform
How Great Content Jumps from Page to Platform
 
7. fmp evaluation
7. fmp evaluation7. fmp evaluation
7. fmp evaluation
 
7. fmp evaluation
7. fmp evaluation7. fmp evaluation
7. fmp evaluation
 
NEFLIN 13: Engaging the Next Generation of Library Users Through Innovative T...
NEFLIN 13: Engaging the Next Generation of Library Users Through Innovative T...NEFLIN 13: Engaging the Next Generation of Library Users Through Innovative T...
NEFLIN 13: Engaging the Next Generation of Library Users Through Innovative T...
 
Adam Jerrett, Theo Bothma and Koos de Beer - Navigating the Information Lands...
Adam Jerrett, Theo Bothma and Koos de Beer - Navigating the Information Lands...Adam Jerrett, Theo Bothma and Koos de Beer - Navigating the Information Lands...
Adam Jerrett, Theo Bothma and Koos de Beer - Navigating the Information Lands...
 
Research and the art of doing what you want !!
Research and the art of doing what you want !!Research and the art of doing what you want !!
Research and the art of doing what you want !!
 
What is Storyboard That.pptx
What is Storyboard That.pptxWhat is Storyboard That.pptx
What is Storyboard That.pptx
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly Workflow
 
Power of power point outline_fall2013
Power of power point outline_fall2013Power of power point outline_fall2013
Power of power point outline_fall2013
 

More from Shyamala Prayaga

Interaction design workshop
Interaction design workshopInteraction design workshop
Interaction design workshop
Shyamala Prayaga
 
Mobile accessibility challenges and best practices v2
Mobile accessibility   challenges and best practices v2Mobile accessibility   challenges and best practices v2
Mobile accessibility challenges and best practices v2
Shyamala Prayaga
 
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Shyamala Prayaga
 
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Shyamala Prayaga
 
iPhone application development training day 1
iPhone application development training day 1iPhone application development training day 1
iPhone application development training day 1
Shyamala Prayaga
 
Improving Site Performace Using Css Sprite
Improving Site Performace Using Css SpriteImproving Site Performace Using Css Sprite
Improving Site Performace Using Css Sprite
Shyamala Prayaga
 

More from Shyamala Prayaga (20)

HealthyCodeMay2014
HealthyCodeMay2014HealthyCodeMay2014
HealthyCodeMay2014
 
Leveraging Augmented Reality Capability for enhancing the shopping experience
Leveraging Augmented Reality Capability for enhancing the shopping experienceLeveraging Augmented Reality Capability for enhancing the shopping experience
Leveraging Augmented Reality Capability for enhancing the shopping experience
 
My Interview with Healthy code Magazine: Future of Android Design
My Interview with Healthy code Magazine: Future of Android DesignMy Interview with Healthy code Magazine: Future of Android Design
My Interview with Healthy code Magazine: Future of Android Design
 
Ticketing Application
Ticketing ApplicationTicketing Application
Ticketing Application
 
Interaction design workshop
Interaction design workshopInteraction design workshop
Interaction design workshop
 
Android design in action
Android design in actionAndroid design in action
Android design in action
 
Mobile accessibility challenges and best practices v2
Mobile accessibility   challenges and best practices v2Mobile accessibility   challenges and best practices v2
Mobile accessibility challenges and best practices v2
 
Mobile Prototyping
Mobile PrototypingMobile Prototyping
Mobile Prototyping
 
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
 
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
 
Accessibility and ucd
Accessibility and ucdAccessibility and ucd
Accessibility and ucd
 
Android Design
Android DesignAndroid Design
Android Design
 
Mobile UI and Usability Guidelines V1
Mobile UI and Usability Guidelines V1Mobile UI and Usability Guidelines V1
Mobile UI and Usability Guidelines V1
 
Mobile Web Frameworks
Mobile Web FrameworksMobile Web Frameworks
Mobile Web Frameworks
 
iPhone application development training day 1
iPhone application development training day 1iPhone application development training day 1
iPhone application development training day 1
 
Usability Testing
Usability TestingUsability Testing
Usability Testing
 
Json
JsonJson
Json
 
Ethenographic research
Ethenographic researchEthenographic research
Ethenographic research
 
Improving Site Performace Using Css Sprite
Improving Site Performace Using Css SpriteImproving Site Performace Using Css Sprite
Improving Site Performace Using Css Sprite
 
Universal Design
Universal DesignUniversal Design
Universal Design
 

Recently uploaded

Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
UK Journal
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 

MOBILE INTERACTION PATTERNS AND NON PATTERNS