SlideShare a Scribd company logo
1 of 22
Download to read offline
Giles Phillips - @gilesphillips
Notes on mobile UX
Web pages are clickable newspapers
The concepts map,
but the design isn’t
optimized
Newspapers have
pretty large viewports
You can fit lots of content
HEADER
HEADER + LOGO
PAGE HEADLINE
IMAGE AND CAPTION
COLUMN
COLUMN
COLUMN
COLUMN
important messaging
HEADER + LOGO + GLOBAL NAV
PAGE HEADLINE
IMAGE AND CAPTION
SECONDARYNAV
COLUMN
COLUMN
SIDEBARNAV
important annoying message
HEADER + GLOBAL NAV
PAGE HEADLINE
SECONDARYNAV
SIDEBARNAV
annoying message!!
Newspapers are also highly mobile
But sort of hard to read this way...
Too bad this doesn’t fold up
mobile devices have created a
revolutionary new medium
KVM (Keyboard, Video, Mouse)
is a transitional interface
Somewhere between dials and knobs...
...and
natural
human
interaction
Mobile is more natural: touch & voice inputs
Carried on the body, mobile extends us
We’ve become Cyborgs
mobile is disrupting the user experience:
design paradigms,
constraints,
metaphors
Design is creation for use
Design has intent
Expressing intent as simply as possible
is good design
OPTIMIZE
OPTIMIZING MOBILE UX - FORM FACTOR
• Small viewport = limited screen real estate
- Old nav paradigms not efficient, use new lighter models
- Shorten content for affordances and headings
• Make your affordances big (40x40px +10 px)
• Hovers = fail
• Popups stink
• Reference the platform interface guidelines
OPTIMIZING MOBILE UX - PERFORMANCE
• Load times are just as important as ever
• Minimize payload - including using the UX to
break up requests
• Perceived performance as an element
of your user experience
OPTIMIZING MOBILE UX - CONTEXT OF USE
• Map your user scenario & touchpoint
• Design for a 1-minute timebox
• Divided attention, not sustained attention
• Mobile usage is not about engagement
- Usage tends to be destination-driven
- The completion of a specific task
- Responding to an alert or checking update
OPTIMIZING MOBILE UX - CONTENT
• Different labels work better on mobile
• Always be succinct
• Map or storyboard your content along a linear
sequence

More Related Content

Viewers also liked

Georgia Caddick - Visual Influences - The Tempest
Georgia Caddick - Visual Influences - The TempestGeorgia Caddick - Visual Influences - The Tempest
Georgia Caddick - Visual Influences - The Tempestgeorgiacaddick
 
Business communication
Business communicationBusiness communication
Business communicationNurul Faziemah
 
Microsoft word mengurus perubahan
Microsoft word   mengurus perubahanMicrosoft word   mengurus perubahan
Microsoft word mengurus perubahanFaizzah Izam
 
Internet fr summit_march2014
Internet fr summit_march2014Internet fr summit_march2014
Internet fr summit_march2014Ashley Donald
 
Uas praktikum jarkom 3_Dynamic Routing (RIP), HTTP, DNS, & Mail Server
Uas praktikum jarkom 3_Dynamic Routing (RIP), HTTP, DNS, & Mail ServerUas praktikum jarkom 3_Dynamic Routing (RIP), HTTP, DNS, & Mail Server
Uas praktikum jarkom 3_Dynamic Routing (RIP), HTTP, DNS, & Mail ServerJefri Fahrian
 
Building Distributed Systems Using Helix
Building Distributed Systems Using HelixBuilding Distributed Systems Using Helix
Building Distributed Systems Using HelixAmy W. Tang
 
프레젠테이션1
프레젠테이션1프레젠테이션1
프레젠테이션1daheelim
 
NCCU School of Business Year In Review
NCCU School of Business Year In ReviewNCCU School of Business Year In Review
NCCU School of Business Year In ReviewLadyKJ02
 
BIMobject® seminar 7th of may 2013 Denmark
BIMobject® seminar 7th of may 2013 DenmarkBIMobject® seminar 7th of may 2013 Denmark
BIMobject® seminar 7th of may 2013 DenmarkBIMobject
 
Darlena pagan dot com power point short version
Darlena pagan dot com power point short versionDarlena pagan dot com power point short version
Darlena pagan dot com power point short versionUSA Discussion Group
 

Viewers also liked (20)

Georgia Caddick - Visual Influences - The Tempest
Georgia Caddick - Visual Influences - The TempestGeorgia Caddick - Visual Influences - The Tempest
Georgia Caddick - Visual Influences - The Tempest
 
Business communication
Business communicationBusiness communication
Business communication
 
Marco Gelmetti
Marco GelmettiMarco Gelmetti
Marco Gelmetti
 
Pedologia
PedologiaPedologia
Pedologia
 
Cinquecento
CinquecentoCinquecento
Cinquecento
 
Microsoft word mengurus perubahan
Microsoft word   mengurus perubahanMicrosoft word   mengurus perubahan
Microsoft word mengurus perubahan
 
Internet fr summit_march2014
Internet fr summit_march2014Internet fr summit_march2014
Internet fr summit_march2014
 
Uas praktikum jarkom 3_Dynamic Routing (RIP), HTTP, DNS, & Mail Server
Uas praktikum jarkom 3_Dynamic Routing (RIP), HTTP, DNS, & Mail ServerUas praktikum jarkom 3_Dynamic Routing (RIP), HTTP, DNS, & Mail Server
Uas praktikum jarkom 3_Dynamic Routing (RIP), HTTP, DNS, & Mail Server
 
Building Distributed Systems Using Helix
Building Distributed Systems Using HelixBuilding Distributed Systems Using Helix
Building Distributed Systems Using Helix
 
Bark & Co
Bark & CoBark & Co
Bark & Co
 
British Council #Ecologyofwaters
British Council #EcologyofwatersBritish Council #Ecologyofwaters
British Council #Ecologyofwaters
 
нам год
нам годнам год
нам год
 
프레젠테이션1
프레젠테이션1프레젠테이션1
프레젠테이션1
 
практика информатика
практика информатикапрактика информатика
практика информатика
 
NCCU School of Business Year In Review
NCCU School of Business Year In ReviewNCCU School of Business Year In Review
NCCU School of Business Year In Review
 
GEOGRAFIA AGRARIA
GEOGRAFIA AGRARIAGEOGRAFIA AGRARIA
GEOGRAFIA AGRARIA
 
BIMobject® seminar 7th of may 2013 Denmark
BIMobject® seminar 7th of may 2013 DenmarkBIMobject® seminar 7th of may 2013 Denmark
BIMobject® seminar 7th of may 2013 Denmark
 
50058334 informatica
50058334 informatica50058334 informatica
50058334 informatica
 
Darlena pagan dot com power point short version
Darlena pagan dot com power point short versionDarlena pagan dot com power point short version
Darlena pagan dot com power point short version
 
Memòria
MemòriaMemòria
Memòria
 

Similar to Notes on Mobile UX

Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introductionJelle Desramaults
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraJonathan Stark
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 
How to build a kick-ass mobile experience
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experienceMichael Dick
 
20 FINE Slides: The Future of Responsive Type On The Web
20 FINE Slides: The Future of Responsive Type On The Web20 FINE Slides: The Future of Responsive Type On The Web
20 FINE Slides: The Future of Responsive Type On The WebFINE Design Group
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!Jonathan Stark
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 The Browser is Dead, Long Live the Web! (Jonathan Stark) The Browser is Dead, Long Live the Web! (Jonathan Stark)
The Browser is Dead, Long Live the Web! (Jonathan Stark)Future Insights
 
ASBPE Webinar: 10 Trends That Could Make (or Break) Our Editorial Careers
ASBPE Webinar: 10 Trends That Could Make (or Break) Our Editorial CareersASBPE Webinar: 10 Trends That Could Make (or Break) Our Editorial Careers
ASBPE Webinar: 10 Trends That Could Make (or Break) Our Editorial Careersasbpe
 
10 Trends That Could Make (or Break) Our Editorial Careers
10 Trends That Could Make (or Break) Our Editorial Careers10 Trends That Could Make (or Break) Our Editorial Careers
10 Trends That Could Make (or Break) Our Editorial CareersJim Sulecki
 
Building web apps for a multiscreen world
Building web apps for a multiscreen worldBuilding web apps for a multiscreen world
Building web apps for a multiscreen worldAussie
 
User Interfaces beyond the screen
User Interfaces beyond the screenUser Interfaces beyond the screen
User Interfaces beyond the screenJason Mesut
 
It's All About Context
It's All About ContextIt's All About Context
It's All About ContextKevin Suttle
 
Going Mobile in Africa - PROPERLY (Mobi, Apps and USSD) 2011
Going Mobile in Africa - PROPERLY (Mobi, Apps and USSD) 2011Going Mobile in Africa - PROPERLY (Mobi, Apps and USSD) 2011
Going Mobile in Africa - PROPERLY (Mobi, Apps and USSD) 2011Tim Bishop
 
Mobiletrender 2014
Mobiletrender 2014Mobiletrender 2014
Mobiletrender 2014allerhed
 
Metro Metro Metro
Metro Metro MetroMetro Metro Metro
Metro Metro MetroSam Basu
 
Create Conversion-Friendly Mobile Landing Pages (Webinar)
Create Conversion-Friendly Mobile Landing Pages (Webinar)Create Conversion-Friendly Mobile Landing Pages (Webinar)
Create Conversion-Friendly Mobile Landing Pages (Webinar)Monetate
 
Heavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef
 

Similar to Notes on Mobile UX (20)

Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
 
Coinvite talk
Coinvite talkCoinvite talk
Coinvite talk
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
How to build a kick-ass mobile experience
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experience
 
20 FINE Slides: The Future of Responsive Type On The Web
20 FINE Slides: The Future of Responsive Type On The Web20 FINE Slides: The Future of Responsive Type On The Web
20 FINE Slides: The Future of Responsive Type On The Web
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 The Browser is Dead, Long Live the Web! (Jonathan Stark) The Browser is Dead, Long Live the Web! (Jonathan Stark)
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 
ASBPE Webinar: 10 Trends That Could Make (or Break) Our Editorial Careers
ASBPE Webinar: 10 Trends That Could Make (or Break) Our Editorial CareersASBPE Webinar: 10 Trends That Could Make (or Break) Our Editorial Careers
ASBPE Webinar: 10 Trends That Could Make (or Break) Our Editorial Careers
 
10 Trends That Could Make (or Break) Our Editorial Careers
10 Trends That Could Make (or Break) Our Editorial Careers10 Trends That Could Make (or Break) Our Editorial Careers
10 Trends That Could Make (or Break) Our Editorial Careers
 
Building web apps for a multiscreen world
Building web apps for a multiscreen worldBuilding web apps for a multiscreen world
Building web apps for a multiscreen world
 
User Interfaces beyond the screen
User Interfaces beyond the screenUser Interfaces beyond the screen
User Interfaces beyond the screen
 
It's All About Context
It's All About ContextIt's All About Context
It's All About Context
 
Going Mobile in Africa - PROPERLY (Mobi, Apps and USSD) 2011
Going Mobile in Africa - PROPERLY (Mobi, Apps and USSD) 2011Going Mobile in Africa - PROPERLY (Mobi, Apps and USSD) 2011
Going Mobile in Africa - PROPERLY (Mobi, Apps and USSD) 2011
 
Mobiletrender 2014
Mobiletrender 2014Mobiletrender 2014
Mobiletrender 2014
 
User Experience
User ExperienceUser Experience
User Experience
 
Metro Metro Metro
Metro Metro MetroMetro Metro Metro
Metro Metro Metro
 
Create Conversion-Friendly Mobile Landing Pages (Webinar)
Create Conversion-Friendly Mobile Landing Pages (Webinar)Create Conversion-Friendly Mobile Landing Pages (Webinar)
Create Conversion-Friendly Mobile Landing Pages (Webinar)
 
Heavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great Mobisites
 
5 Web Design Trends for 2015
5 Web Design Trends for 20155 Web Design Trends for 2015
5 Web Design Trends for 2015
 

Recently uploaded

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 

Recently uploaded (20)

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 

Notes on Mobile UX

  • 1. Giles Phillips - @gilesphillips Notes on mobile UX
  • 2. Web pages are clickable newspapers
  • 3. The concepts map, but the design isn’t optimized
  • 4. Newspapers have pretty large viewports You can fit lots of content
  • 6. HEADER + LOGO PAGE HEADLINE IMAGE AND CAPTION COLUMN COLUMN COLUMN COLUMN important messaging
  • 7. HEADER + LOGO + GLOBAL NAV PAGE HEADLINE IMAGE AND CAPTION SECONDARYNAV COLUMN COLUMN SIDEBARNAV important annoying message
  • 8. HEADER + GLOBAL NAV PAGE HEADLINE SECONDARYNAV SIDEBARNAV annoying message!!
  • 9.
  • 10. Newspapers are also highly mobile But sort of hard to read this way...
  • 11. Too bad this doesn’t fold up
  • 12. mobile devices have created a revolutionary new medium
  • 13. KVM (Keyboard, Video, Mouse) is a transitional interface
  • 14. Somewhere between dials and knobs...
  • 16. Mobile is more natural: touch & voice inputs Carried on the body, mobile extends us We’ve become Cyborgs
  • 17. mobile is disrupting the user experience: design paradigms, constraints, metaphors
  • 18. Design is creation for use Design has intent Expressing intent as simply as possible is good design OPTIMIZE
  • 19. OPTIMIZING MOBILE UX - FORM FACTOR • Small viewport = limited screen real estate - Old nav paradigms not efficient, use new lighter models - Shorten content for affordances and headings • Make your affordances big (40x40px +10 px) • Hovers = fail • Popups stink • Reference the platform interface guidelines
  • 20. OPTIMIZING MOBILE UX - PERFORMANCE • Load times are just as important as ever • Minimize payload - including using the UX to break up requests • Perceived performance as an element of your user experience
  • 21. OPTIMIZING MOBILE UX - CONTEXT OF USE • Map your user scenario & touchpoint • Design for a 1-minute timebox • Divided attention, not sustained attention • Mobile usage is not about engagement - Usage tends to be destination-driven - The completion of a specific task - Responding to an alert or checking update
  • 22. OPTIMIZING MOBILE UX - CONTENT • Different labels work better on mobile • Always be succinct • Map or storyboard your content along a linear sequence