際際滷

際際滷Share a Scribd company logo
INTERFACE TRANSITIONS
#UIFLOW
Corey Chandler
Jorge Furuya
Monday, March 11, 13
Introductions
What are interface transitions
Why use interface transitions
Transition types
When transitions go wrong
Guidelines
Q&A
Monday, March 11, 13
Corey Principal Ixd @ deep dive design
@cchandler
Jorge Lead UX designer @ htc innovation
@somasdf1
Monday, March 11, 13
...Let me tell you a story...
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
What about transitions in other disciplines?
Monday, March 11, 13
Opening
Theme
Transition
Beethoven 3, 1st Movement
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
TRANSITIONS IN INTERFACE DESIGN
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Interface transitions are an event that takes
place between two states of an interface
Monday, March 11, 13
Interface
State 1
Interface
State 2
Monday, March 11, 13
Interface
State 2
Interface
State 1
Transition
Monday, March 11, 13
Why use Interface Transitions?
Monday, March 11, 13
Interfaces are meant to be tools to support activities
and just like the tools we use in the physical world a
polished transition adds perceived value to
these tools.
Monday, March 11, 13
Monday, March 11, 13
Motion -perhaps the most used tool for establishing transitions in interfaces- is a
fundamental component of our reality and it helps us understand when something
works, when something is normal or broken, when something is responsive
or laggy
Monday, March 11, 13
Motion -perhaps the most used tool for establishing transitions in interfaces- is a
fundamental component of our reality and it helps us understand when something
is normal or broken, when something is responsive or laggy
Akinetopsia or the inability to perceive motion in our field of view actually is a
neuropsychological disorder
Monday, March 11, 13
Monday, March 11, 13
Interface Transitions help us immerse people into the
digital experiences we craft for them by reinforcing
their suspension of disbelief
Monday, March 11, 13
Monday, March 11, 13
What kind of transitions are out there?
Monday, March 11, 13
Creates a subtle effect that enhances the overall
experience of an application subconsciously
[Discreet]
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Introduces a recognizable effect for the user to
perceive and enjoy
[Showcase]
Creates a subtle effect that enhances the overall
experience of an application subconsciously
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Educates the user as to how a system works
[Educational]
Creates a subtle effect that enhances the overall
experience of an application subconsciously
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Masks the processing time
[Processing]
Introduces a recognizable effect for the user to
perceive and enjoy
Educates the user as to how a system works
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Discreet
Showcase
Educational
Processing
Monday, March 11, 13
Often times transitions are used and they combine
different values
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
but some times transitions are used and...
...They go wrong
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Guidelines. Or how to keep transitions useful
and enjoyable
Monday, March 11, 13
PROTOTYPE !
Monday, March 11, 13
Consider introducing a discreet transition any time an
experience suddenly changes
Monday, March 11, 13
The more often an interface transition is triggered,
the more likely it should be discreet
Monday, March 11, 13
When adding showcase transitions make sure they are
not accidentally introducing false educational elements
Monday, March 11, 13
...and keep your canvas in mind
Monday, March 11, 13
Q&A
Monday, March 11, 13

More Related Content

Recently uploaded (20)

Planning Unit No.9 Kharadi Development Plan for Kharadi
Planning Unit No.9 Kharadi Development Plan for KharadiPlanning Unit No.9 Kharadi Development Plan for Kharadi
Planning Unit No.9 Kharadi Development Plan for Kharadi
DanishPathan7
20240409 Stop Work Authority Toolbox Talk.pptx
20240409 Stop Work Authority Toolbox Talk.pptx20240409 Stop Work Authority Toolbox Talk.pptx
20240409 Stop Work Authority Toolbox Talk.pptx
alfredrodgers116
Secrets of International Press Conferences. www.prsinternationalgroup.com, ww...
Secrets of International Press Conferences. www.prsinternationalgroup.com, ww...Secrets of International Press Conferences. www.prsinternationalgroup.com, ww...
Secrets of International Press Conferences. www.prsinternationalgroup.com, ww...
SanskarTiwari20
construction materials in concrete b.ppt
construction materials in concrete b.pptconstruction materials in concrete b.ppt
construction materials in concrete b.ppt
assefatekla5
Minimalist Korean Aesthetic Pitch Deck XL by 際際滷sgo.pptx
Minimalist Korean Aesthetic Pitch Deck XL by 際際滷sgo.pptxMinimalist Korean Aesthetic Pitch Deck XL by 際際滷sgo.pptx
Minimalist Korean Aesthetic Pitch Deck XL by 際際滷sgo.pptx
ChayrinaRamida
HARAYA CO EVENTS MANAGEMENT by FloBach 2
HARAYA CO EVENTS MANAGEMENT by FloBach 2HARAYA CO EVENTS MANAGEMENT by FloBach 2
HARAYA CO EVENTS MANAGEMENT by FloBach 2
Haraya Co by Florylyn
Smart Farming Technology Pitch Deck Presentation Template
Smart Farming Technology Pitch Deck Presentation TemplateSmart Farming Technology Pitch Deck Presentation Template
Smart Farming Technology Pitch Deck Presentation Template
際際滷sBrain
shankus health case study for hospitallity -AD
shankus health case study for hospitallity -ADshankus health case study for hospitallity -AD
shankus health case study for hospitallity -AD
IshaAwhalePatil
Cruella: a study of the title design, elements and animation
Cruella: a study of the title design, elements and animationCruella: a study of the title design, elements and animation
Cruella: a study of the title design, elements and animation
aishwarya20042010
activity quarter 4 for module 3 quarter 4 tle
activity quarter 4 for module 3 quarter 4 tleactivity quarter 4 for module 3 quarter 4 tle
activity quarter 4 for module 3 quarter 4 tle
ScarletFabio
home interior designers in sohna Road
home  interior  designers  in sohna Roadhome  interior  designers  in sohna Road
home interior designers in sohna Road
spacedeco9
Ugly Jewelry Bold and Unconventional Accessories for Unique Style
Ugly Jewelry Bold and Unconventional Accessories for Unique StyleUgly Jewelry Bold and Unconventional Accessories for Unique Style
Ugly Jewelry Bold and Unconventional Accessories for Unique Style
marketingclippingwor1
Beginner's Guide to Pilates Equipment.pdf
Beginner's Guide to Pilates Equipment.pdfBeginner's Guide to Pilates Equipment.pdf
Beginner's Guide to Pilates Equipment.pdf
methodalliancepilate
HARAYA CO EVENTS MANAGEMENT by FloBach 01
HARAYA CO EVENTS MANAGEMENT by FloBach 01HARAYA CO EVENTS MANAGEMENT by FloBach 01
HARAYA CO EVENTS MANAGEMENT by FloBach 01
Haraya Co by Florylyn
water_cycle.ppt vishana ppt 55555566666
water_cycle.ppt vishana ppt 55555566666water_cycle.ppt vishana ppt 55555566666
water_cycle.ppt vishana ppt 55555566666
patelvishana99
University of Melbourne degree, replica University of Melbourne diploma
University of Melbourne degree, replica University of Melbourne diplomaUniversity of Melbourne degree, replica University of Melbourne diploma
University of Melbourne degree, replica University of Melbourne diploma
Lisa Emerson
Adobe Photoshop 26.3 Crack with Activation key 2025 (AI Generated)
Adobe Photoshop 26.3 Crack with Activation key 2025 (AI Generated)Adobe Photoshop 26.3 Crack with Activation key 2025 (AI Generated)
Adobe Photoshop 26.3 Crack with Activation key 2025 (AI Generated)
resesa82772
Templates for Powerpoint Few of the Best for Free.pptx
Templates for Powerpoint Few of the Best for Free.pptxTemplates for Powerpoint Few of the Best for Free.pptx
Templates for Powerpoint Few of the Best for Free.pptx
HariswaroopGavva
Scaling Design Systems for Large Teams.pdf
Scaling Design Systems for Large Teams.pdfScaling Design Systems for Large Teams.pdf
Scaling Design Systems for Large Teams.pdf
msdelwarbd
Coconut_Fibre_on_Permeable_Concrete_Presentation.pptx
Coconut_Fibre_on_Permeable_Concrete_Presentation.pptxCoconut_Fibre_on_Permeable_Concrete_Presentation.pptx
Coconut_Fibre_on_Permeable_Concrete_Presentation.pptx
SabinChaudhary2
Planning Unit No.9 Kharadi Development Plan for Kharadi
Planning Unit No.9 Kharadi Development Plan for KharadiPlanning Unit No.9 Kharadi Development Plan for Kharadi
Planning Unit No.9 Kharadi Development Plan for Kharadi
DanishPathan7
20240409 Stop Work Authority Toolbox Talk.pptx
20240409 Stop Work Authority Toolbox Talk.pptx20240409 Stop Work Authority Toolbox Talk.pptx
20240409 Stop Work Authority Toolbox Talk.pptx
alfredrodgers116
Secrets of International Press Conferences. www.prsinternationalgroup.com, ww...
Secrets of International Press Conferences. www.prsinternationalgroup.com, ww...Secrets of International Press Conferences. www.prsinternationalgroup.com, ww...
Secrets of International Press Conferences. www.prsinternationalgroup.com, ww...
SanskarTiwari20
construction materials in concrete b.ppt
construction materials in concrete b.pptconstruction materials in concrete b.ppt
construction materials in concrete b.ppt
assefatekla5
Minimalist Korean Aesthetic Pitch Deck XL by 際際滷sgo.pptx
Minimalist Korean Aesthetic Pitch Deck XL by 際際滷sgo.pptxMinimalist Korean Aesthetic Pitch Deck XL by 際際滷sgo.pptx
Minimalist Korean Aesthetic Pitch Deck XL by 際際滷sgo.pptx
ChayrinaRamida
HARAYA CO EVENTS MANAGEMENT by FloBach 2
HARAYA CO EVENTS MANAGEMENT by FloBach 2HARAYA CO EVENTS MANAGEMENT by FloBach 2
HARAYA CO EVENTS MANAGEMENT by FloBach 2
Haraya Co by Florylyn
Smart Farming Technology Pitch Deck Presentation Template
Smart Farming Technology Pitch Deck Presentation TemplateSmart Farming Technology Pitch Deck Presentation Template
Smart Farming Technology Pitch Deck Presentation Template
際際滷sBrain
shankus health case study for hospitallity -AD
shankus health case study for hospitallity -ADshankus health case study for hospitallity -AD
shankus health case study for hospitallity -AD
IshaAwhalePatil
Cruella: a study of the title design, elements and animation
Cruella: a study of the title design, elements and animationCruella: a study of the title design, elements and animation
Cruella: a study of the title design, elements and animation
aishwarya20042010
activity quarter 4 for module 3 quarter 4 tle
activity quarter 4 for module 3 quarter 4 tleactivity quarter 4 for module 3 quarter 4 tle
activity quarter 4 for module 3 quarter 4 tle
ScarletFabio
home interior designers in sohna Road
home  interior  designers  in sohna Roadhome  interior  designers  in sohna Road
home interior designers in sohna Road
spacedeco9
Ugly Jewelry Bold and Unconventional Accessories for Unique Style
Ugly Jewelry Bold and Unconventional Accessories for Unique StyleUgly Jewelry Bold and Unconventional Accessories for Unique Style
Ugly Jewelry Bold and Unconventional Accessories for Unique Style
marketingclippingwor1
Beginner's Guide to Pilates Equipment.pdf
Beginner's Guide to Pilates Equipment.pdfBeginner's Guide to Pilates Equipment.pdf
Beginner's Guide to Pilates Equipment.pdf
methodalliancepilate
HARAYA CO EVENTS MANAGEMENT by FloBach 01
HARAYA CO EVENTS MANAGEMENT by FloBach 01HARAYA CO EVENTS MANAGEMENT by FloBach 01
HARAYA CO EVENTS MANAGEMENT by FloBach 01
Haraya Co by Florylyn
water_cycle.ppt vishana ppt 55555566666
water_cycle.ppt vishana ppt 55555566666water_cycle.ppt vishana ppt 55555566666
water_cycle.ppt vishana ppt 55555566666
patelvishana99
University of Melbourne degree, replica University of Melbourne diploma
University of Melbourne degree, replica University of Melbourne diplomaUniversity of Melbourne degree, replica University of Melbourne diploma
University of Melbourne degree, replica University of Melbourne diploma
Lisa Emerson
Adobe Photoshop 26.3 Crack with Activation key 2025 (AI Generated)
Adobe Photoshop 26.3 Crack with Activation key 2025 (AI Generated)Adobe Photoshop 26.3 Crack with Activation key 2025 (AI Generated)
Adobe Photoshop 26.3 Crack with Activation key 2025 (AI Generated)
resesa82772
Templates for Powerpoint Few of the Best for Free.pptx
Templates for Powerpoint Few of the Best for Free.pptxTemplates for Powerpoint Few of the Best for Free.pptx
Templates for Powerpoint Few of the Best for Free.pptx
HariswaroopGavva
Scaling Design Systems for Large Teams.pdf
Scaling Design Systems for Large Teams.pdfScaling Design Systems for Large Teams.pdf
Scaling Design Systems for Large Teams.pdf
msdelwarbd
Coconut_Fibre_on_Permeable_Concrete_Presentation.pptx
Coconut_Fibre_on_Permeable_Concrete_Presentation.pptxCoconut_Fibre_on_Permeable_Concrete_Presentation.pptx
Coconut_Fibre_on_Permeable_Concrete_Presentation.pptx
SabinChaudhary2

Featured (20)

Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools

Interface Transitions (South by Southwest 2013)