際際滷

際際滷Share a Scribd company logo
Giles Phillips - @gilesphillips
Notes on mobile UX
Web pages are clickable newspapers
The concepts map,
but the design isnt
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!!
Notes on Mobile UX
Newspapers are also highly mobile
But sort of hard to read this way...
Too bad this doesnt 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
Weve 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 a鍖ordances 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
 Di鍖erent labels work better on mobile
 Always be succinct
 Map or storyboard your content along a linear
sequence

More Related Content

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
georgiacaddick
Business communication
Business communicationBusiness communication
Business communication
Nurul Faziemah
Marco Gelmetti
Marco GelmettiMarco Gelmetti
Marco Gelmetti
pedagogiaglobale
PedologiaPedologia
Pedologia
Girleno Oliveira
Cinquecento
CinquecentoCinquecento
Cinquecento
crisjuditarnaugerard
Microsoft word mengurus perubahan
Microsoft word   mengurus perubahanMicrosoft word   mengurus perubahan
Microsoft word mengurus perubahan
Faizzah Izam
Internet fr summit_march2014
Internet fr summit_march2014Internet fr summit_march2014
Internet fr summit_march2014
Ashley 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 Server
Jefri Fahrian
Building Distributed Systems Using Helix
Building Distributed Systems Using HelixBuilding Distributed Systems Using Helix
Building Distributed Systems Using Helix
Amy W. Tang
Bark & Co
Bark & CoBark & Co
Bark & Co
Amirah Morss
British Council #Ecologyofwaters
British Council #EcologyofwatersBritish Council #Ecologyofwaters
British Council #Ecologyofwaters
Lancaster University
仆舒仄 亞仂亟
仆舒仄 亞仂亟仆舒仄 亞仂亟
仆舒仄 亞仂亟
Liubov Zhizhina
競伎1
競伎1競伎1
競伎1
daheelim
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
LadyKJ02
GEOGRAFIA AGRARIAGEOGRAFIA AGRARIA
GEOGRAFIA AGRARIA
Girleno Oliveira
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
BIMobject
50058334 informatica
50058334 informatica50058334 informatica
50058334 informatica
Nagesh Khandare
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
USA Discussion Group
Georgia Caddick - Visual Influences - The Tempest
Georgia Caddick - Visual Influences - The TempestGeorgia Caddick - Visual Influences - The Tempest
Georgia Caddick - Visual Influences - The Tempest
georgiacaddick
Business communication
Business communicationBusiness communication
Business communication
Nurul Faziemah
PedologiaPedologia
Pedologia
Girleno Oliveira
Microsoft word mengurus perubahan
Microsoft word   mengurus perubahanMicrosoft word   mengurus perubahan
Microsoft word mengurus perubahan
Faizzah Izam
Internet fr summit_march2014
Internet fr summit_march2014Internet fr summit_march2014
Internet fr summit_march2014
Ashley 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 Server
Jefri Fahrian
Building Distributed Systems Using Helix
Building Distributed Systems Using HelixBuilding Distributed Systems Using Helix
Building Distributed Systems Using Helix
Amy W. Tang
British Council #Ecologyofwaters
British Council #EcologyofwatersBritish Council #Ecologyofwaters
British Council #Ecologyofwaters
Lancaster University
競伎1
競伎1競伎1
競伎1
daheelim
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
LadyKJ02
GEOGRAFIA AGRARIAGEOGRAFIA AGRARIA
GEOGRAFIA AGRARIA
Girleno Oliveira
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
BIMobject
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
USA Discussion Group

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
Jelle 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 Era
Jonathan Stark
Coinvite talk
Coinvite talkCoinvite talk
Coinvite talk
David Cohn
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
InVision 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 experience
Michael Dick
20 FINE 際際滷s: The Future of Responsive Type On The Web
20 FINE 際際滷s: The Future of Responsive Type On The Web20 FINE 際際滷s: The Future of Responsive Type On The Web
20 FINE 際際滷s: The Future of Responsive Type On The Web
FINE 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 Careers
asbpe
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
Jim 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 world
Aussie
User Interfaces beyond the screen
User Interfaces beyond the screenUser Interfaces beyond the screen
User Interfaces beyond the screen
Jason Mesut
It's All About Context
It's All About ContextIt's All About Context
It's All About Context
Kevin 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) 2011
Tim Bishop
Mobiletrender 2014
Mobiletrender 2014Mobiletrender 2014
Mobiletrender 2014
allerhed
User Experience
User ExperienceUser Experience
User Experience
Miles Price
Metro Metro Metro
Metro Metro MetroMetro Metro Metro
Metro Metro Metro
Sam 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 Mobisites
Heavy Chef
5 Web Design Trends for 2015
5 Web Design Trends for 20155 Web Design Trends for 2015
5 Web Design Trends for 2015
OregonianMediaGroup
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
Jelle 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 Era
Jonathan Stark
Coinvite talk
Coinvite talkCoinvite talk
Coinvite talk
David Cohn
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
InVision 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 experience
Michael Dick
20 FINE 際際滷s: The Future of Responsive Type On The Web
20 FINE 際際滷s: The Future of Responsive Type On The Web20 FINE 際際滷s: The Future of Responsive Type On The Web
20 FINE 際際滷s: The Future of Responsive Type On The Web
FINE 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 Careers
asbpe
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
Jim 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 world
Aussie
User Interfaces beyond the screen
User Interfaces beyond the screenUser Interfaces beyond the screen
User Interfaces beyond the screen
Jason Mesut
It's All About Context
It's All About ContextIt's All About Context
It's All About Context
Kevin 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) 2011
Tim Bishop
Mobiletrender 2014
Mobiletrender 2014Mobiletrender 2014
Mobiletrender 2014
allerhed
User Experience
User ExperienceUser Experience
User Experience
Miles Price
Metro Metro Metro
Metro Metro MetroMetro Metro Metro
Metro Metro Metro
Sam 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 Mobisites
Heavy Chef

Recently uploaded (20)

"Constructive Interaction During Emotional Burnout: With Local and Internatio...
"Constructive Interaction During Emotional Burnout: With Local and Internatio..."Constructive Interaction During Emotional Burnout: With Local and Internatio...
"Constructive Interaction During Emotional Burnout: With Local and Internatio...
Fwdays
Software-Engineering-and-Best-Practices.
Software-Engineering-and-Best-Practices.Software-Engineering-and-Best-Practices.
Software-Engineering-and-Best-Practices.
oziasrondonc
[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...
[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...
[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...
Fwdays
Comprehensive Guide to Ansible Application Roles.pdf
Comprehensive Guide to Ansible Application Roles.pdfComprehensive Guide to Ansible Application Roles.pdf
Comprehensive Guide to Ansible Application Roles.pdf
RHCSA Guru
CSUN 2025 - Personalization of Accessible Charts and Graphs.pptx
CSUN 2025 - Personalization of Accessible Charts and Graphs.pptxCSUN 2025 - Personalization of Accessible Charts and Graphs.pptx
CSUN 2025 - Personalization of Accessible Charts and Graphs.pptx
ystein Moseng
Digital Twins Transforming Logistics with AI & Cloud
Digital Twins  Transforming Logistics  with AI & CloudDigital Twins  Transforming Logistics  with AI & Cloud
Digital Twins Transforming Logistics with AI & Cloud
yashakhandelwal2
"Scaling Product Mindset: From Individual Ideas to Team Culture", Oksana Holu...
"Scaling Product Mindset: From Individual Ideas to Team Culture", Oksana Holu..."Scaling Product Mindset: From Individual Ideas to Team Culture", Oksana Holu...
"Scaling Product Mindset: From Individual Ideas to Team Culture", Oksana Holu...
Fwdays
Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...
Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...
Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...
Charles Martin
Salesforce Welly March 2025User Group Meeting
Salesforce Welly March 2025User Group MeetingSalesforce Welly March 2025User Group Meeting
Salesforce Welly March 2025User Group Meeting
Anna Loughnan Colquhoun
"Conflicts within a Team: Not an Enemy, But an Opportunity for Growth", Orest...
"Conflicts within a Team: Not an Enemy, But an Opportunity for Growth", Orest..."Conflicts within a Team: Not an Enemy, But an Opportunity for Growth", Orest...
"Conflicts within a Team: Not an Enemy, But an Opportunity for Growth", Orest...
Fwdays
Benefits of Using Ultrasonic Level Transmitters for Control
Benefits of Using Ultrasonic Level Transmitters for ControlBenefits of Using Ultrasonic Level Transmitters for Control
Benefits of Using Ultrasonic Level Transmitters for Control
nikeson80
Best Crane Manufacturers in India Industry Leaders & Innovations.pdf
Best Crane Manufacturers in India Industry Leaders & Innovations.pdfBest Crane Manufacturers in India Industry Leaders & Innovations.pdf
Best Crane Manufacturers in India Industry Leaders & Innovations.pdf
Hercules Hoists
Blending AI in Enterprise Architecture.pdf
Blending AI in Enterprise Architecture.pdfBlending AI in Enterprise Architecture.pdf
Blending AI in Enterprise Architecture.pdf
Calvin Hendryx-Parker
UiPath Automation Developer Associate Training Series 2025 - Session 5
UiPath Automation Developer Associate Training Series 2025 - Session 5UiPath Automation Developer Associate Training Series 2025 - Session 5
UiPath Automation Developer Associate Training Series 2025 - Session 5
DianaGray10
CSUN 2025 - Interactive Charts for Everyone.pptx
CSUN 2025 - Interactive Charts for Everyone.pptxCSUN 2025 - Interactive Charts for Everyone.pptx
CSUN 2025 - Interactive Charts for Everyone.pptx
ystein Moseng
[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...
[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...
[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...
Fwdays
UiPath Automation Developer Associate Training Series 2025 - Session 6
UiPath Automation Developer Associate Training Series 2025 - Session 6UiPath Automation Developer Associate Training Series 2025 - Session 6
UiPath Automation Developer Associate Training Series 2025 - Session 6
DianaGray10
Google News Consideration for SEO | Google Search NYC
Google News Consideration for SEO | Google Search NYCGoogle News Consideration for SEO | Google Search NYC
Google News Consideration for SEO | Google Search NYC
Primary Position
Multi Agent Systems | PPT | Presentation
Multi Agent Systems |  PPT | PresentationMulti Agent Systems |  PPT | Presentation
Multi Agent Systems | PPT | Presentation
Codiste
The nature of technolog and Computer networks.pptx
The nature of technolog and Computer networks.pptxThe nature of technolog and Computer networks.pptx
The nature of technolog and Computer networks.pptx
vallidevi6
"Constructive Interaction During Emotional Burnout: With Local and Internatio...
"Constructive Interaction During Emotional Burnout: With Local and Internatio..."Constructive Interaction During Emotional Burnout: With Local and Internatio...
"Constructive Interaction During Emotional Burnout: With Local and Internatio...
Fwdays
Software-Engineering-and-Best-Practices.
Software-Engineering-and-Best-Practices.Software-Engineering-and-Best-Practices.
Software-Engineering-and-Best-Practices.
oziasrondonc
[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...
[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...
[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...
Fwdays
Comprehensive Guide to Ansible Application Roles.pdf
Comprehensive Guide to Ansible Application Roles.pdfComprehensive Guide to Ansible Application Roles.pdf
Comprehensive Guide to Ansible Application Roles.pdf
RHCSA Guru
CSUN 2025 - Personalization of Accessible Charts and Graphs.pptx
CSUN 2025 - Personalization of Accessible Charts and Graphs.pptxCSUN 2025 - Personalization of Accessible Charts and Graphs.pptx
CSUN 2025 - Personalization of Accessible Charts and Graphs.pptx
ystein Moseng
Digital Twins Transforming Logistics with AI & Cloud
Digital Twins  Transforming Logistics  with AI & CloudDigital Twins  Transforming Logistics  with AI & Cloud
Digital Twins Transforming Logistics with AI & Cloud
yashakhandelwal2
"Scaling Product Mindset: From Individual Ideas to Team Culture", Oksana Holu...
"Scaling Product Mindset: From Individual Ideas to Team Culture", Oksana Holu..."Scaling Product Mindset: From Individual Ideas to Team Culture", Oksana Holu...
"Scaling Product Mindset: From Individual Ideas to Team Culture", Oksana Holu...
Fwdays
Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...
Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...
Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...
Charles Martin
Salesforce Welly March 2025User Group Meeting
Salesforce Welly March 2025User Group MeetingSalesforce Welly March 2025User Group Meeting
Salesforce Welly March 2025User Group Meeting
Anna Loughnan Colquhoun
"Conflicts within a Team: Not an Enemy, But an Opportunity for Growth", Orest...
"Conflicts within a Team: Not an Enemy, But an Opportunity for Growth", Orest..."Conflicts within a Team: Not an Enemy, But an Opportunity for Growth", Orest...
"Conflicts within a Team: Not an Enemy, But an Opportunity for Growth", Orest...
Fwdays
Benefits of Using Ultrasonic Level Transmitters for Control
Benefits of Using Ultrasonic Level Transmitters for ControlBenefits of Using Ultrasonic Level Transmitters for Control
Benefits of Using Ultrasonic Level Transmitters for Control
nikeson80
Best Crane Manufacturers in India Industry Leaders & Innovations.pdf
Best Crane Manufacturers in India Industry Leaders & Innovations.pdfBest Crane Manufacturers in India Industry Leaders & Innovations.pdf
Best Crane Manufacturers in India Industry Leaders & Innovations.pdf
Hercules Hoists
Blending AI in Enterprise Architecture.pdf
Blending AI in Enterprise Architecture.pdfBlending AI in Enterprise Architecture.pdf
Blending AI in Enterprise Architecture.pdf
Calvin Hendryx-Parker
UiPath Automation Developer Associate Training Series 2025 - Session 5
UiPath Automation Developer Associate Training Series 2025 - Session 5UiPath Automation Developer Associate Training Series 2025 - Session 5
UiPath Automation Developer Associate Training Series 2025 - Session 5
DianaGray10
CSUN 2025 - Interactive Charts for Everyone.pptx
CSUN 2025 - Interactive Charts for Everyone.pptxCSUN 2025 - Interactive Charts for Everyone.pptx
CSUN 2025 - Interactive Charts for Everyone.pptx
ystein Moseng
[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...
[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...
[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...
Fwdays
UiPath Automation Developer Associate Training Series 2025 - Session 6
UiPath Automation Developer Associate Training Series 2025 - Session 6UiPath Automation Developer Associate Training Series 2025 - Session 6
UiPath Automation Developer Associate Training Series 2025 - Session 6
DianaGray10
Google News Consideration for SEO | Google Search NYC
Google News Consideration for SEO | Google Search NYCGoogle News Consideration for SEO | Google Search NYC
Google News Consideration for SEO | Google Search NYC
Primary Position
Multi Agent Systems | PPT | Presentation
Multi Agent Systems |  PPT | PresentationMulti Agent Systems |  PPT | Presentation
Multi Agent Systems | PPT | Presentation
Codiste
The nature of technolog and Computer networks.pptx
The nature of technolog and Computer networks.pptxThe nature of technolog and Computer networks.pptx
The nature of technolog and Computer networks.pptx
vallidevi6

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 isnt 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!!
  • 10. Newspapers are also highly mobile But sort of hard to read this way...
  • 11. Too bad this doesnt 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 Weve 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 a鍖ordances 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 Di鍖erent labels work better on mobile Always be succinct Map or storyboard your content along a linear sequence