SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Downloaden Sie, um offline zu lesen
Applying Patterns to
Mobile Design
Designing Mobile Interfaces:
Patterns for Interaction Design



                                  1
Why mobile patterns?
To fill a gap in the literature:
• Platform agnostic, without being technical.
• Interface agnostic.
• Structured and organized.
• Researched and scientifically-founded.




                                                2
How to use patterns
•   Understand the interaction and interface.
•   Understand the reasoning and use.
•   Know when not to use it.
•   Determine how to apply it to your design.
•   Codify it as a standard for your project or organization.



This is what we’ll talk about today.




                                                                3
How to use patterns
Apply the right information at the right level
• Grid: Viewport, scale, type, gutters,
   margins and columns.
• Wrapper:
• Templates:
• Pages:




                                                 4
Knowing history is knowing design
•   We always prefer the next big thing, and follow the winners.
•   But this has all happened before, and it will all happen again.
•   Know where ideas and technologies come from, why they work, and what failed
    about them in the past.

With a good grasp of history, you can predict the future.




                                                                                  5
Patterns are not scrapbooks
•   Collection is not enough.
•   Curation is better.
•   Analysis and comprehension is the key.




                                             6
Patterns are universal
Mobile devices all share key attributes. Understand them all to understand any one.




                                                                                      7
Patterns are universal




                         8
Patterns are universal
Live a mobile lifestyle:
• Believe in your users, and your product.
• Try out the competition.
• Use mobile, even when you don’t have to.
• Browse, share, tweet, photograph.
• Try new things.




                                             9
Patterns are generalized
•   Illustrative & explanatory.
•   Focused.
•   Examples can be confusing.




                                  10
Patterns are organized




                         11
Patterns are organized




                         12
Patterns are explained




                         13
Patterns are explained




                         14
Patterns are explained




                         15
Patterns are best practices
•   Not necessarily common practice.
•   Not necessarily popular or fashionable.

You have to know enough about why design works, and how your users work, to avoid
trendy solutions and worst practices.




                                                                                    16
Patterns are misunderstood
•   Reactionary.                          •   Rote solutions.
•   Single view.                          •   Too high level.
•   First solutions.

Avoid these traps to make good design decisions.




                                                                17
Learn more
•   Buy the book: Designing Mobile Interfaces available now as an eBook, soon in print.
•   Visit the Wiki: Basically the whole book is up on 4ourth.com/wiki. Check back for
    updates.
•   Listen more:
     • Next month, right here, Avoiding the Heuristic Solution – How to take your design
         from functional and correct to joyful and inspiring.
     • In January, User Centered Execution – How to get your well-intended, well-
         designed systems built as you want and, and promised.




                                                                                           18
Steven Hoober

shoobe01@gmail.com

816 210 0455

@shoobe01

shoobe01 on:

www.donttouchme.com

www.4ourth.com




                      19

Weitere ähnliche Inhalte

Was ist angesagt?

Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...Steven Hoober
 
Design process week 1
Design process week 1Design process week 1
Design process week 1Julia Powles
 
Architectural Thinking
Architectural ThinkingArchitectural Thinking
Architectural ThinkingIvan Ruchkin
 
A road to awesomeness
A road to awesomenessA road to awesomeness
A road to awesomenessHuib Schoots
 
Designer + Entrepreneur
Designer + Entrepreneur Designer + Entrepreneur
Designer + Entrepreneur UXDXConf
 
Esri User Conference 2016 - UX & UI activities
Esri User Conference 2016 - UX & UI activitiesEsri User Conference 2016 - UX & UI activities
Esri User Conference 2016 - UX & UI activitiesFrank Garofalo
 

Was ist angesagt? (13)

Hammock Driven Design
Hammock Driven DesignHammock Driven Design
Hammock Driven Design
 
Working on ideas
Working on ideasWorking on ideas
Working on ideas
 
Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...
 
Design process week 1
Design process week 1Design process week 1
Design process week 1
 
Portfolio
PortfolioPortfolio
Portfolio
 
Architectural Thinking
Architectural ThinkingArchitectural Thinking
Architectural Thinking
 
Operation organize
Operation organizeOperation organize
Operation organize
 
Pbl rubric 2
Pbl rubric 2Pbl rubric 2
Pbl rubric 2
 
A road to awesomeness
A road to awesomenessA road to awesomeness
A road to awesomeness
 
Designer + Entrepreneur
Designer + Entrepreneur Designer + Entrepreneur
Designer + Entrepreneur
 
Global
GlobalGlobal
Global
 
Railsfactory delivering presentations
Railsfactory delivering presentationsRailsfactory delivering presentations
Railsfactory delivering presentations
 
Esri User Conference 2016 - UX & UI activities
Esri User Conference 2016 - UX & UI activitiesEsri User Conference 2016 - UX & UI activities
Esri User Conference 2016 - UX & UI activities
 

Ähnlich wie Applying Patterns to Mobile Design

Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober
Nov. 8, 2011 webcast   desiging mobile interfaces by steven hooberNov. 8, 2011 webcast   desiging mobile interfaces by steven hoober
Nov. 8, 2011 webcast desiging mobile interfaces by steven hooberO'Reilly Media
 
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...Steven Hoober
 
GHAMAS Design Principles
GHAMAS Design PrinciplesGHAMAS Design Principles
GHAMAS Design PrinciplesMichael Rawlins
 
MagmaRails - Passionate Programmer
MagmaRails - Passionate ProgrammerMagmaRails - Passionate Programmer
MagmaRails - Passionate ProgrammerEdwin Cruz
 
Becoming a Web Design Champion
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design ChampionMeagan Fisher
 
User Centered Execution for Mobile UX Designers
User Centered Execution for Mobile UX DesignersUser Centered Execution for Mobile UX Designers
User Centered Execution for Mobile UX DesignersSteven Hoober
 
Passionate Programmer
Passionate ProgrammerPassionate Programmer
Passionate ProgrammerMagmaConf
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through PrototypingChris Risdon
 
The 360 Developer
The 360 DeveloperThe 360 Developer
The 360 Developerenteritos
 
Mobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemMobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemSteven Hoober
 
Guerilla Design
Guerilla DesignGuerilla Design
Guerilla DesignJoyce Chou
 
Xianhang Zhang: Lessons from Social Software: From Facebook to Face to Face D...
Xianhang Zhang: Lessons from Social Software: From Facebook to Face to Face D...Xianhang Zhang: Lessons from Social Software: From Facebook to Face to Face D...
Xianhang Zhang: Lessons from Social Software: From Facebook to Face to Face D...BayCHI
 
[SIGGRAPH ASIA 2011 Course]How to write a siggraph paper
[SIGGRAPH ASIA 2011 Course]How to write a siggraph paper[SIGGRAPH ASIA 2011 Course]How to write a siggraph paper
[SIGGRAPH ASIA 2011 Course]How to write a siggraph paperI-Chao Shen
 
Slides for Norman Chap 1
Slides for Norman Chap 1 Slides for Norman Chap 1
Slides for Norman Chap 1 drewmargolin
 
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr PresentationRich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr PresentationLee Stott
 
the_pragmatic_programmer_ch.1.pptx
the_pragmatic_programmer_ch.1.pptxthe_pragmatic_programmer_ch.1.pptx
the_pragmatic_programmer_ch.1.pptxOguzDuman
 
Contextual user research handout part 2
Contextual user research handout part 2Contextual user research handout part 2
Contextual user research handout part 2Kai Chun Cheng
 
EST 200, Design Thinking
EST 200, Design ThinkingEST 200, Design Thinking
EST 200, Design ThinkingCKSunith1
 

Ähnlich wie Applying Patterns to Mobile Design (20)

Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober
Nov. 8, 2011 webcast   desiging mobile interfaces by steven hooberNov. 8, 2011 webcast   desiging mobile interfaces by steven hoober
Nov. 8, 2011 webcast desiging mobile interfaces by steven hoober
 
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
Avoiding the Heuristic Solution: Moving past functional and correct to joyful...
 
GHAMAS Design Principles
GHAMAS Design PrinciplesGHAMAS Design Principles
GHAMAS Design Principles
 
MagmaRails - Passionate Programmer
MagmaRails - Passionate ProgrammerMagmaRails - Passionate Programmer
MagmaRails - Passionate Programmer
 
Intro Design Principles
Intro Design PrinciplesIntro Design Principles
Intro Design Principles
 
Becoming a Web Design Champion
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design Champion
 
User Centered Execution for Mobile UX Designers
User Centered Execution for Mobile UX DesignersUser Centered Execution for Mobile UX Designers
User Centered Execution for Mobile UX Designers
 
Passionate Programmer
Passionate ProgrammerPassionate Programmer
Passionate Programmer
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through Prototyping
 
The 360 Developer
The 360 DeveloperThe 360 Developer
The 360 Developer
 
Mobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemMobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning Ecosystem
 
Guerilla Design
Guerilla DesignGuerilla Design
Guerilla Design
 
Xianhang Zhang: Lessons from Social Software: From Facebook to Face to Face D...
Xianhang Zhang: Lessons from Social Software: From Facebook to Face to Face D...Xianhang Zhang: Lessons from Social Software: From Facebook to Face to Face D...
Xianhang Zhang: Lessons from Social Software: From Facebook to Face to Face D...
 
Change Management
Change ManagementChange Management
Change Management
 
[SIGGRAPH ASIA 2011 Course]How to write a siggraph paper
[SIGGRAPH ASIA 2011 Course]How to write a siggraph paper[SIGGRAPH ASIA 2011 Course]How to write a siggraph paper
[SIGGRAPH ASIA 2011 Course]How to write a siggraph paper
 
Slides for Norman Chap 1
Slides for Norman Chap 1 Slides for Norman Chap 1
Slides for Norman Chap 1
 
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr PresentationRich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
 
the_pragmatic_programmer_ch.1.pptx
the_pragmatic_programmer_ch.1.pptxthe_pragmatic_programmer_ch.1.pptx
the_pragmatic_programmer_ch.1.pptx
 
Contextual user research handout part 2
Contextual user research handout part 2Contextual user research handout part 2
Contextual user research handout part 2
 
EST 200, Design Thinking
EST 200, Design ThinkingEST 200, Design Thinking
EST 200, Design Thinking
 

Mehr von Steven Hoober

Mobile Usability and User Experience
Mobile Usability and User ExperienceMobile Usability and User Experience
Mobile Usability and User ExperienceSteven Hoober
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile DesignSteven Hoober
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile DesignSteven Hoober
 
UX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademyUX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademySteven Hoober
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsSteven Hoober
 
Flatly Authentic Digital Design
Flatly Authentic Digital DesignFlatly Authentic Digital Design
Flatly Authentic Digital DesignSteven Hoober
 
Phones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsPhones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsSteven Hoober
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsSteven Hoober
 
Fingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionFingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionSteven Hoober
 
Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Steven Hoober
 
API First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsAPI First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsSteven Hoober
 
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Steven Hoober
 
How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)Steven Hoober
 
Tools for Mobile UX Design
Tools for Mobile UX DesignTools for Mobile UX Design
Tools for Mobile UX DesignSteven Hoober
 
Getting Good UX Into Mobile
Getting Good UX Into MobileGetting Good UX Into Mobile
Getting Good UX Into MobileSteven Hoober
 
Entrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringEntrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringSteven Hoober
 
Design for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleDesign for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleSteven Hoober
 
How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)Steven Hoober
 
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensThe Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensSteven Hoober
 
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...Steven Hoober
 

Mehr von Steven Hoober (20)

Mobile Usability and User Experience
Mobile Usability and User ExperienceMobile Usability and User Experience
Mobile Usability and User Experience
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design
 
UX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademyUX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks Academy
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just Apps
 
Flatly Authentic Digital Design
Flatly Authentic Digital DesignFlatly Authentic Digital Design
Flatly Authentic Digital Design
 
Phones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsPhones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & Ecosystems
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just Apps
 
Fingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionFingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute version
 
Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...
 
API First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsAPI First: Creating ecosystems instead of products
API First: Creating ecosystems instead of products
 
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
 
How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)
 
Tools for Mobile UX Design
Tools for Mobile UX DesignTools for Mobile UX Design
Tools for Mobile UX Design
 
Getting Good UX Into Mobile
Getting Good UX Into MobileGetting Good UX Into Mobile
Getting Good UX Into Mobile
 
Entrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringEntrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestring
 
Design for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleDesign for Fingers, Thumbs & People
Design for Fingers, Thumbs & People
 
How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)
 
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensThe Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
 
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
 

Kürzlich hochgeladen

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 

Kürzlich hochgeladen (20)

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 

Applying Patterns to Mobile Design

  • 1. Applying Patterns to Mobile Design Designing Mobile Interfaces: Patterns for Interaction Design 1
  • 2. Why mobile patterns? To fill a gap in the literature: • Platform agnostic, without being technical. • Interface agnostic. • Structured and organized. • Researched and scientifically-founded. 2
  • 3. How to use patterns • Understand the interaction and interface. • Understand the reasoning and use. • Know when not to use it. • Determine how to apply it to your design. • Codify it as a standard for your project or organization. This is what we’ll talk about today. 3
  • 4. How to use patterns Apply the right information at the right level • Grid: Viewport, scale, type, gutters, margins and columns. • Wrapper: • Templates: • Pages: 4
  • 5. Knowing history is knowing design • We always prefer the next big thing, and follow the winners. • But this has all happened before, and it will all happen again. • Know where ideas and technologies come from, why they work, and what failed about them in the past. With a good grasp of history, you can predict the future. 5
  • 6. Patterns are not scrapbooks • Collection is not enough. • Curation is better. • Analysis and comprehension is the key. 6
  • 7. Patterns are universal Mobile devices all share key attributes. Understand them all to understand any one. 7
  • 9. Patterns are universal Live a mobile lifestyle: • Believe in your users, and your product. • Try out the competition. • Use mobile, even when you don’t have to. • Browse, share, tweet, photograph. • Try new things. 9
  • 10. Patterns are generalized • Illustrative & explanatory. • Focused. • Examples can be confusing. 10
  • 16. Patterns are best practices • Not necessarily common practice. • Not necessarily popular or fashionable. You have to know enough about why design works, and how your users work, to avoid trendy solutions and worst practices. 16
  • 17. Patterns are misunderstood • Reactionary. • Rote solutions. • Single view. • Too high level. • First solutions. Avoid these traps to make good design decisions. 17
  • 18. Learn more • Buy the book: Designing Mobile Interfaces available now as an eBook, soon in print. • Visit the Wiki: Basically the whole book is up on 4ourth.com/wiki. Check back for updates. • Listen more: • Next month, right here, Avoiding the Heuristic Solution – How to take your design from functional and correct to joyful and inspiring. • In January, User Centered Execution – How to get your well-intended, well- designed systems built as you want and, and promised. 18
  • 19. Steven Hoober shoobe01@gmail.com 816 210 0455 @shoobe01 shoobe01 on: www.donttouchme.com www.4ourth.com 19

Hinweis der Redaktion

  1. TEASER DESCIPTION: Applying Patterns to Mobile DesignGood mobile designs share many features in common, regardless of the fidelity of the device type, the OS or the user. Almost two decades of interactive design experience, as well as the creation of almost 76 mobile patterns for Designing Mobile Interfaces have led to some very specific and actionable insights into their use. Covers the intent of mobile patterns, and how to use them correctly in your design. Designed to be especially helpful for those migrating from other platforms, such as desktop web design.
  2. Conception/history of our effort (collecting for years, process, documenting by patterns, etc.) – Copied from architectural and CS classics, but even just Apple and Microsoft guidelines are like this (SHOW SOME?)What ORT asked for (so, iPhone only or also Android?), what we did instead… I assume confuses ORT a bit, as it’s more about design and psychology than technology and implementation.(had to add in implementation details at the end to satisfy all you guys)… ----- Meeting Notes (11/8/11 12:54) -----Why mobile patterns. First, because I wrote a book about it. Well, with a friend of mine, who is now in Australia, which is why he's not joining us today. And the book is from our history of collecting process, design artifacts and documenting design. So we were excited to make this even larger and more formal, so we could be part of the history of architecture and CS classics, or even the Apple and Microsoft HF guidelines.RIGHT!!!!I assume this confused our publisher a little, as it's more about design and psychology than technology and implementation, but judging by the interest, I think we made the right choice. And, I added a few implementation details at the end to satisfy all the developers listening in.
  3. That’s why you care about this: not how to read my book, but how to use principles of patterns to make your own work better and faster.Patterns are applied heuristics. You need to not just pick patterns to use, but be able to understand them enough you can bend them to your will. Then you are not constrained by patterns, but can use them for your needs, and customize and codify for your products, instead of just absorbing and re-using everyone else’s ideas.
  4. Patterns can be applied at various levels. I will assume everyone has the time to design in a reasoned manner, though sometimes it’s not that simple I know. When you start work, you set the grid, and not just the columns and margins, but you start setting standards you will use for type sizes, you have to set all this by knowing the viewport size (and physical size or scale) of the device or set of devices you will design for. Class-based design is crucial for multi-device design. At the wrapper level you start deciding which access methods to meet the IA. Do you use tabs? What kind? Where is the title, and how does it relate to navigational labels? Templates apply more of these, and assure that general rules decided above work for all the content types.
  5. We like to loose history; Apple didn’t invent almost anything, and it’s not to be an anti-fanboi, it’s that you need to know where things came from, what caused them to develop, what was abandoned and why.With a grasp of history, you also get a chance to predict the future. When we get to antipatterns this will make more sense, but basically, if a product failed for good reason, like good cognitive psych reasons (people’s brains don’t work like that) then you know not to try it again, without a sensible change.Here I have as examples:Palm IIIc - I have one of these that still works (I did not own one at the time) and glancing at it, it’s got all sorts of very modern interactions. With a wireless connection and a browser, it would be a pretty reasonable device today. The middle device is an early camera phone. I am pretty sure there were real embedded cameras in phones in Japan, but this was another way to do it. Didn’t take off. You might ask why? You might be able to come up with good reasons that most things which bolt on are not a great idea. Even Square went through a serious hardware iteration very early in their life, partly to fight the friction of Not-In-The-Phone.To the right is something I worked on, and which my wife carried diligently for years. The first MP3 phone in the world. Which had most of all no memory and a terrible way to get music onto it. But it worked, and there’s nothing radically different from even the use of iTunes as a management tool to synch music to an iPhone.
  6. This is gonna look like I am picking on Mari Sheibley. And yes, the image is from http://mobile-patterns.com/. But before that existed I had the same basic slide in other presentations.Actually, I’ve had much the same opinion for around 30 years. From the time I started acting like a designer, I collected interesting things. Mostly print things, so I had a whole file drawer full of magazine clippings. Which I eventually sorted into categories. But it took a long time to find a good image. And just having that file didn’t make me a better designer. It took decades of school and work to get there. Collection is not enough. Selective keeping and organizing is a bit better. But as I just said, you need to know a bit of why, how, and what came before, so you can predict how it will work in the future, for you. You have to analyze, and be able to do so in a coherent, repeatable manner.
  7. These are just some of the devices I actually own. A common question, right after “why a lovebird,” is what phone I carry.Doesn’t matter. Right now, a Droid 2 Global. But in the last 3 years I have carried -- full time, porting my number and everything -- 7 different devices with 4 different OSs. Part-time, a lot more than that.You need to keep your hand in the market, and not just stick to your favorite device. Because design is not about one device, or browser, and even if /your design/ is, you are missing out on other good ideas, and will miss the historical context these ideas came from, and misunderstand why they got this way.TACTIC: Image comparing same thing on a couple devices? Wording from “live a mobile lifestyle.” Use everything, and do not get locked into a platform. I haven’t carried an iPhone for years because I always work places where /everyone/ has one. I can borrow, ask, observe. Instead, I try other stuff and bring unique insights to the game. Switch it up. Image of my browser screen: Even on one device, try new software, and use the mobile for stuff you don’t absolutely have to. I have SEVENTEEN browsers on my handset now. I have a contract to do some browser design, but the principle applies to whatever interface you are working on. Don’t just look at the best case, or the most popular one in the Appstore. Look at all solutions.
  8. You can learn from anything, and be exposed to different solutions. There’s no iOS device here, because you know those, but here’s four other devices, on four different OS’s, showing four different ways to provide access to other screens via a tab paradigm (these are all covered in the Tab pattern in the book, yes). I found them -- and not just for the book, I’ve known many of these for years – because I find something to learn from every device.
  9. Use everything, and do not get locked into a platform. I haven’t carried an iPhone for years because I always work places where /everyone/ has one. I can borrow, ask, observe. Instead, I try other stuff and bring unique insights to the game. Switch it up. Image of my browser screen: Even on one device, try new software, and use the mobile for stuff you don’t absolutely have to. I have SEVENTEEN browsers on my handset now; they don’t even all fit on one screen anymore (this is just 16 of them). I have a contract to do some browser design, but the principle applies to whatever interface you are working on. Don’t just look at the best case, or the most popular one in the Appstore. Look at all solutions.
  10. Patterns are very non-specifc. Even talking about specific examples sometimes bothers me; just like when showing off your design everyone gets hung up in details of what color things are. I use illustrations. Not just in the book, but for all high level documentation and concepts. To the left is a typical illustration as used in the book. This one is explaining menu that reveals on gesture. To the right is a real one. A real finger obscures the image so much you cannot see anything, so I had to include two shots to show the action. And, what are you supposed to be looking at, anyway? The screen is full of stuff. On the right, the trash can sticks out to me. Fine in reality, as it’s deliberately obscured by the user, making it lower priority, but here it’s very obvious. Exemplars are useful, and experiencing real interfaces is key, but explaining interfaces requires illustration and explanation. Higher fidelity is used only as needed, such as when designing the actual interface. But that’s when you get people asking if you can change the color. Which is fine, if you have
  11. Part of the analysis of the patterns is grouping, and not just by immediate relations, but by higher level categories, and related tasks in other categories.Building a taxonomy of patterns helps understand them (it certainly helped me) and is designed to help you find them and use them correctly.They also cross-link a lot. Blue is the color used to mean “Pattern” throughout the book. Might be a bit hard to see, but there’s blue words all over the place on the right.
  12. I also want to be clear, this is not an easy thing. Weagnonized for a long time to get this right. And by “agonized” I mean we went back and forth a lot. I was bucking for a fairly different organization along a more functional taxonomy. Others wanted storytelling, or an approach by meaning to the end user. And even once settled, we spent time staring at the Google Spreadsheet this was organized in, working out what is included, and where, and how much it’s included.The number of patterns only settled down because we had to get the book out. I could have spent ten more years doing this, easily. Yes, the cat helped a lot.
  13. Similarly, we built an organizational structure to each pattern, which we strictly followed. Every one can be compared pretty much straight across. I am going to go ahead and go over each section, but not the way they are explained in the preface to the book, but why we did them, and how you can use them yourself. Titles were a pain. All too often, people have pet names. We had to avoid those, or OS specific names, or anything which could be confused with another. Some are a bit… clunky. Some seem jargony. “Annunicator Row” bugs some people, but annunciators are old-school and generic. Notifications are something else, so we couldn’t use that. Yes, really, we spent this much time thinking about (and changing) names. Problem is how we start each one. I like problem statements. This bugs a lot of people, especially in marketing and product development, who maybe want them to be “opportunity statements” or something. I say own up to your problems. Realy, here, it’s part one of the introduction. At the end, after feedback from others, we added the implementation-focused bit to the Problem section. Web, specific OS, or whatever domain it could be.The second real part of the introduction is the Solution. This summarizes the problem, often with a generalized illustration of a common version of it. If you don’t get the gist of the pattern after reading the title, problem and solution, we’ve failed.
  14. The next section is probably the most important one. More than even the title. Variations also caused a lot of heartburn. Because sometimes, a variation is worthy of being a pattern. Sometimes, two patterns start getting too close, and we end up merging them. Sometimes, there is not A and B, but a range of options between A and B. And also a range of options between C and D. Pick which you want along these two axes. Variations is sometimes very, very long, and it was easy to drift into speculation and possibilities. Interaction details is both the first of the two really tactical sections, and exemplifies a key distinction in design of interactive systems. There are interactions, and interfaces…
  15. … both that and the Presentation Details are basically lists of features, or requirements. Be sure to do things, and do them in certain ways. I’d rather have called this “Interface Details” but it sounds too close to ‘interaction” as well as the issue with people confusing the two. This does fine. Presentation details basically covers all the bits that just sit there, or which the user cannot control directly. Wording, color, shadow, spacing, even how words are read back in voice interfaces. My favorite section is the last, Antipatterns. Ideally, an antipattern is a complete pattern that you don’t do. But that’s not super-useful, and the name is catchy. So I use it here. There’s more to the reasoning, but don’t worry about it. Suffice it to say, if you do something in the antipattern list, your implementation will generally not go well. Read these, more than any other section. When building custom implementations, you will find your own pitfalls, or violations of other principles of your design, faster than good uses. Document them like this.
  16. The antipatterns we listed are also very often quite common and popular. But patterns are not just collections of popular themes in the world of design, or what I have taken to calling “common practice.” Fashion and interior design work differently, but UX is evidence-based. Just because it’s popular doesn’t make it right, and if there is clear evidence (from research, generally) that this is wrong, I say so.Many patterns are improperly implemented in the majority of devices. Now, I didn’t buck the trend completely; this example is simply that you need to hide pointlessly repeating avatar stand-ins. But that’s an easy fix, and there are several ways to do it. To the right is another solution, using the icon to denote the type of primary phone more clearly.
  17. Obviously, this is not a key attribute of patterns that we want to have. But it’s true. Patterns are misunderstood, and therefore mis-used.Design solutions are Reactionary and solve for point problems, instead of considering the entire system.Even when larger solutions are found, they are Single view or only for one screen, one device or one platform.The first satisfactory solution is accepted, and rapidly becomes entrenched. There should always be incentives to find the best possible solution.There is likewise no incentive to find unique, interesting or differentiable solutions. The Rote solution, or the published pattern, is used without modification (another reason I don’t like to give examples).Patterns that do consider solutions generally sometimes lead to excessively High-level design, with no reasoning (or an incomprehensible one). VizDs and developers won’t understand what part is important so will modify it and miss the point.I tend to call all of this the “heuristic solution.” It’s not /bad/ per se, in fact it checks all the boxes, but it’s not inspired, and is never truly satisfactory. It might even pass CSAT measures, and show improvement. But it levels off and you never get up to that really top-tier, no matter what you do. The example is an okay site. Each decision is at least marginally acceptable, but not great and only in isolation. As a system, it falls down.
  18. I’ll be talking more about that next month, with a whole presentation right here on avoiding the heuristic solution, while still applying patterns and other good principles. Buy the book now? Check the wiki out regardless.Example that we added the gesture library stuff after the book was completed.
  19. QUESTION TIME.