際際滷

際際滷Share a Scribd company logo
Mobile User Experience
       Principles

            Mark Lieberwitz
 Mobile Product Manager at Tagged, Inc.
Tagged Mobile UX & Design
1024 x 768




             320 x 480
Tagged Mobile UX & Design
Tagged Mobile UX & Design
Where are we using?




      Anywhere & Everywhere

84% at home
80% misc. times
74% waiting in lines   Mobile is Personal
64% at work
Mobile UX Tips & Tricks

Its about trade-offs
 Focus on speed
 Reduce the amount of content
 Simple & focused UX / UI
 Minimize text entry
 The fat finger use case
 Create an experience (make navigation easy)
Tagged Mobile UX & Design
Tagged Mobile UX & Design
Tagged Mobile UX & Design
Responsive Web Design
Progressive Enhancement
Rather than hoping for graceful
degradation, progressive enhancement builds
documents for the least capable or differently
capable devices first, then moves on to enhance
those documents with separate logic for
presentation, in ways that dont place an undue
burden on baseline devices but which allow a
richer experience for those users with modern
graphical browser software.

                     - Nick Finck & Steven Champeon
                               coined the term in 2003
Mobile First

If you design mobile first, you create agreement on
what matters most. You can then apply the same
rationale to the desktop/laptop version of the
website. We agreed that these were the most
important features and content for our customers
and business  why should that change with more
screen space?

                                   - Luke Wroblewski
Tagged Mobile UX & Design
Ad

Recommended

Practical UX
Practical UX
Ahmed Hussam
Mornington Peninsula responsive design
Mornington Peninsula responsive design
SeamlessCMS
Website redesign
Website redesign
OptfinITy
Mobile Information Architecture
Mobile Information Architecture
Andy Fitzgerald
Wireframing for Mobile App Developers
Wireframing for Mobile App Developers
Veiko Raime
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
UX Riga
Introduction to ui ux
Introduction to ui ux
Wycliff1
Natural User Interfases (NUIs) - Android TO Conference 2012
Natural User Interfases (NUIs) - Android TO Conference 2012
Peter O'Blenis
Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
Dan Moriarty
Mobile-first, a quick introduction
Mobile-first, a quick introduction
Jelle Desramaults
Mobile-First Design
Mobile-First Design
Katelyn Sessions
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Kevin Powell
Mobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface design
Vivek Parihar
Designing for mobile devices
Designing for mobile devices
Fahd Alhazmi
Mobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
Doralin Kelly
Going Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product design
Ezekiel Binion
Communication Design for the Mobile Experience
Communication Design for the Mobile Experience
David Drucker
Mobile first web principles
Mobile first web principles
Patrick McMullen
Designing for Mobility
Designing for Mobility
Kelly Page
UX & Responsive Design
UX & Responsive Design
Clarissa Peterson
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
WebExpo
What is Mobile First Design Strategy.pdf
What is Mobile First Design Strategy.pdf
Integrated IT Solutions
How to build a kick-ass mobile experience
How to build a kick-ass mobile experience
Michael Dick
3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive Design
ZURB
BBDO WhitepaperResponsive & Adaptive Design
BBDO WhitepaperResponsive & Adaptive Design
JaneMuder
TMPGov_WhitePaper_ResponsiveDesign
TMPGov_WhitePaper_ResponsiveDesign
John Bersentes
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Anna Dahlstr旦m
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan
MPU+: A Transformative Solution for Next-Gen AI at the Edge, a Presentation...
MPU+: A Transformative Solution for Next-Gen AI at the Edge, a Presentation...
Edge AI and Vision Alliance
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash

More Related Content

Similar to Tagged Mobile UX & Design (20)

Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
Dan Moriarty
Mobile-first, a quick introduction
Mobile-first, a quick introduction
Jelle Desramaults
Mobile-First Design
Mobile-First Design
Katelyn Sessions
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Kevin Powell
Mobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface design
Vivek Parihar
Designing for mobile devices
Designing for mobile devices
Fahd Alhazmi
Mobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
Doralin Kelly
Going Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product design
Ezekiel Binion
Communication Design for the Mobile Experience
Communication Design for the Mobile Experience
David Drucker
Mobile first web principles
Mobile first web principles
Patrick McMullen
Designing for Mobility
Designing for Mobility
Kelly Page
UX & Responsive Design
UX & Responsive Design
Clarissa Peterson
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
WebExpo
What is Mobile First Design Strategy.pdf
What is Mobile First Design Strategy.pdf
Integrated IT Solutions
How to build a kick-ass mobile experience
How to build a kick-ass mobile experience
Michael Dick
3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive Design
ZURB
BBDO WhitepaperResponsive & Adaptive Design
BBDO WhitepaperResponsive & Adaptive Design
JaneMuder
TMPGov_WhitePaper_ResponsiveDesign
TMPGov_WhitePaper_ResponsiveDesign
John Bersentes
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Anna Dahlstr旦m
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan
Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
Dan Moriarty
Mobile-first, a quick introduction
Mobile-first, a quick introduction
Jelle Desramaults
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Kevin Powell
Mobile First Approach - The key to cross platform interface design
Mobile First Approach - The key to cross platform interface design
Vivek Parihar
Designing for mobile devices
Designing for mobile devices
Fahd Alhazmi
Mobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
Doralin Kelly
Going Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product design
Ezekiel Binion
Communication Design for the Mobile Experience
Communication Design for the Mobile Experience
David Drucker
Mobile first web principles
Mobile first web principles
Patrick McMullen
Designing for Mobility
Designing for Mobility
Kelly Page
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
WebExpo
What is Mobile First Design Strategy.pdf
What is Mobile First Design Strategy.pdf
Integrated IT Solutions
How to build a kick-ass mobile experience
How to build a kick-ass mobile experience
Michael Dick
3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive Design
ZURB
BBDO WhitepaperResponsive & Adaptive Design
BBDO WhitepaperResponsive & Adaptive Design
JaneMuder
TMPGov_WhitePaper_ResponsiveDesign
TMPGov_WhitePaper_ResponsiveDesign
John Bersentes
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Anna Dahlstr旦m
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan

Recently uploaded (20)

MPU+: A Transformative Solution for Next-Gen AI at the Edge, a Presentation...
MPU+: A Transformative Solution for Next-Gen AI at the Edge, a Presentation...
Edge AI and Vision Alliance
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
digitaljignect
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
Safe Software
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
revolcs10
Wenn alles versagt - IBM Tape sch端tzt, was z辰hlt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape sch端tzt, was z辰hlt! Und besonders mit dem neust...
Josef Weingand
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
MPU+: A Transformative Solution for Next-Gen AI at the Edge, a Presentation...
MPU+: A Transformative Solution for Next-Gen AI at the Edge, a Presentation...
Edge AI and Vision Alliance
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
digitaljignect
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
AI Agents and FME: A How-to Guide on Generating Synthetic Metadata
Safe Software
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
revolcs10
Wenn alles versagt - IBM Tape sch端tzt, was z辰hlt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape sch端tzt, was z辰hlt! Und besonders mit dem neust...
Josef Weingand
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
Ad

Tagged Mobile UX & Design

  • 1. Mobile User Experience Principles Mark Lieberwitz Mobile Product Manager at Tagged, Inc.
  • 3. 1024 x 768 320 x 480
  • 6. Where are we using? Anywhere & Everywhere 84% at home 80% misc. times 74% waiting in lines Mobile is Personal 64% at work
  • 7. Mobile UX Tips & Tricks Its about trade-offs Focus on speed Reduce the amount of content Simple & focused UX / UI Minimize text entry The fat finger use case Create an experience (make navigation easy)
  • 12. Progressive Enhancement Rather than hoping for graceful degradation, progressive enhancement builds documents for the least capable or differently capable devices first, then moves on to enhance those documents with separate logic for presentation, in ways that dont place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software. - Nick Finck & Steven Champeon coined the term in 2003
  • 13. Mobile First If you design mobile first, you create agreement on what matters most. You can then apply the same rationale to the desktop/laptop version of the website. We agreed that these were the most important features and content for our customers and business why should that change with more screen space? - Luke Wroblewski

Editor's Notes

  • #4: For years the tech industry struggled for a standard size to design for and we finally settled here. Everyone is familiar with this, we all design in 960, yes? This was fine for a while, although it ignores most other screen resolutions and doesnt represent the real world. Jeremy Keith calls this the consensual hallucination.Design is the art of applying constraints until an elegant solution is created. 80% of the screen we designed for is GONE. This creates FOCUS.So lets talk about focus and User Experience.
  • #5: SW is focused on what customers want.Has anyone studied visual perception? Has anyone heard of change blindness?When two things are similar and only 1 or 2 things change people cant tell the difference. So be aware of that concept when I make this transition, cause you might not see the difference. Let me do that again.
  • #6: Whats on here?How does the airline make money? They sell reservations.Customers want to buy that stuff, they want to check their flight and manage their rewards.thats it!Business goals + user needs nothing else. There is no room, they had to get rid of all the crap and focus on what customers want, what the business is for. This is not, every single marketing initiativeits what is NEEDED.Know your audience: what are they doing and why? What is important.make it EASY.This deisng isnt exactly viasually appealing, but it gets the job done and it has focus. So what else do we need to be aware of in designing for mobile?
  • #7: Home In between cooking dinner or watching TVPeople use these devices anywhere and everywhere.-Very distinct factor of mobile. Whens the last time you saw someone in line with their laptop? New Usage begets new UX.Because we can use anywhere, we have partial attention. Youre not sitting their for hours using these devices like a PC. Its a one thumb one eyeball experiencefocus on designing for a simple user experience. (think angry birds)This means we have to think about mobile design differently, theres a short attention span for people using mobile. Think about going to see a movie you really were looking forward to on a huge IMAX screen and youre sitting next to a guy with a really terrible laugh.Mobile is personal.youve got all these things that are specific to mobile. Device is ALWAYS with youSmall ScreenBattery is going to dieNetwork is inconsistentIncreasingly use fingersEnvironmental SensorsLocationDirectionAmbient Light SensorCan call / text everyone you knowThese things together make the device much more personal:It changes the equation when we design for stuff based on these agronomical factors.
  • #8: Mobile is about speed Things are generally slower on mobile. Give the user an indication something is happeninga spinning wheel, blinking loading iconthis makes it feel like the app/site is faster than it actually is.Speed is one of the top concerns in mobile designTry to design for a slow-medium connection speed (strike a balance)Design for 3G, not necessarily WiFi connectivityCalls to the serverImage sizeReduce the amount of contentMobile web: Reduce number of new page loadsSimple & focused UX (KISS)Single column layouts tend to work wellMinimize text entryAuto-fill, dropdowns, pinwheels, lists, calendar picker, etc. If you want the user to type something bring up the keyboard right away, dont make them click for it.Copy Paste This is painful on mobile (describe experience), use a mail-to instead and allow the user to use the mail client to post the linkthis pops an overlay over the browser and is a great experience everyone is used too. This may be bad on the desktop, but its great on mobile.Quotes:Design is the method of putting form to content.- Paul Rand Design is the stuff around the end result.- Mark Boulton
  • #12: What we need to realize as designers is that we dont have control. This is hard for designerswe LOVE control.But users can access our content in any amount of ways; RSS, Print, desktop, laptop, mobile devices, aggregate websites that use iframes, twitter, facebook, tablets, the list goes on and onand we dont always have control over how our content displays or is consumed. Once we admit this to ourselves its easy to see why responsive design offers a great answer to the question of How our content is consumed on the three major platforms. When talking about mobile many people use the term mobile web. But I ask you, is there such a thing as mobile web? Stephen Hay wrote an essay titled There is no Mobile Web in which he stated.Most sites on the web are not built with specific mobile use-cases in mind. However, millions of people access these sites every day through mobile devices. They access a normal (whatever that means) website through their mobile device.Stephen HayWhat makes a design responsive?Flexible GridsFlexible Images / MediaMedia Queries (CSS3) but design isnt just about layout.Design is the method of putting form to content.- Paul Rand Design is the stuff around the end result.- Mark Boulton
  • #13: This way of thinking has been around for some time, but we need to adapt it to todays world. This means designing for the base use case and then adding to the experience as the device the user is accessing our content on becomes better enabled.we can then layer on more and better tools and experiences where they add value to the user. This way of thinking brings us to my last point.
  • #14: Luke has written a book called Mobile First and has also given numerous presentations which are available online. I highly recommend you read his book or look into these presentations as they can be eye-opening. Especially for friends of ours in the industry who still arent convinced that mobile is the future or dont know how to react to the new paradigm were in.Mobile first allows us to design for the base use case and add more value to the user experience as we design upward for devices that are more enabled by screen size or JavaScript or CSS capabilities. It also allows us to design specific use cases for mobile and tablet devices which have capabilities that desktops simply dont have. Its a new, potentially scary, way of thinking (especially for a successful business that has been web driven from the outset). But we as an industry need to change with the times and design for how users want and need to interact with our content. That means changing the way we think and design to provide a better, broader and adaptable experience that responds to any use case users might have.So how do we tie this all together?
  • #15: Any questions?