SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
Experience & Design in the Mobile World
User Interface and Experience Design
Nathan Freitas, Oliver+Coady
nathan@olivercoady.com
When developing software for the web or a
desktop computer, you only need to consider the
mouse and the keyboard.

With a mobile device, you must take into account
the entire world around you (and your users).
Possible User Input Sources for a Mobile Device

• Keyboard                            • Vibration


• “Click” Tap via Touch (or Stylus)   • Sound / Music


• Wheel or Trackball                  • Wireless Network Coverage


• GPS or Network Location             • Environment Lighting


• Accelerometer Motion                • Multitouch and Gestures


• Orientation / Compass / Altitude    • Device Security / Loss
Three Device Classes




   Mobile devices can be categorized by their
   physical dimensions, network connectivity,
         software capabilities and more
Low: WAP / SMS
text NATHANF to 41411


   (my SMS business card)
Medium: Java / J2ME / Symbian
High: Apple iPhone, Android, Windows Mobile
User Experience, Desires & Dreams
Think about the “60 second” use case...

and then think about the “60 minute” use case.
60 second = quick reference, lookup or message
directions, scores, stocks, weather...

60 minute = long, in-depth interaction while
relaxing, wasting time or on a train or plane
networked game, writing / reading / browsing, movies, podcasts,
project / finance management
Casual
   Dice             Flashlight




Game                    Utility




   RPG              Banking
          Serious
What Would Fisher Price Do?




  Easy, Fun, Instant Feedback, Limited Choices
12 Myths of Mobile User-Interface Design

• Users want power and aesthetics.                                • Mobile devices will essentially be
  Features are everything                                           phones, organizers, or combinations,
                                                                    with maybe music/video added on
• What we really need is a Swiss army
  knife                                                           • The industry is converging on a UI
                                                                    standard
• 3G is here!
                                                                  • Highly usable systems are just
• Focus groups and other traditional                                around the corner
  market analysis tools are the best
  way to determine user needs                                     • One underlying operating system will
                                                                    dominate
• If it works in New York, it will work
  anywhere                                                        • Mobile devices will be free-or nearly
                                                                    free
• The killer app will be games, --er, no,
  I mean, nightlife, or gps.... uh...                             • Advanced data-oriented services are
                                                                    just around the corner

                 http://nickcowie.com/2008/revisited-12-myths-of-mobile-user-interface-design/
Create Your User Stories

I want to be able to find all the     While I am shopping at a store,
open happy hours nearby so I         I want to be able to find out if I
       can save money                   can get it cheaper online




      I want to be able to poll my     I am walking to get fast food
  friends for advice at any moment     and I’d really like my lunch to
                                         be ready when I get there


 As I go for a run, I want to
                                       The camera should wait until
   know how my pace is
                                      my hand is still and the shot is
compared to others my age.
                                     level before the picture is taken.
Think About Where & When

• At the office, during a meeting   • At a sales meeting, for a $$$ deal


• By a parent, during breakfast    • By a single parent, making dinner


• In the backseat of a taxi        • In the drivers seat of a semi-truck


• By a doctor in a hospital        • By a doctor in Rwanda


• By a soldier at a base           • By a soldier, under fire
Simple Wireframing
Iterating with Paper
At some point, ink turns into pixels
Apple iPhone Human Interface Guidelines




      http://developer.apple.com/iphone
Use Standard Buttons / Icons / Assets
Tools to Discuss & Download
Better Design through Stenciling
LWUIT: Make J2ME Sexier




  Lightweight UI Toolkit aka “Swing for Mobile”
Xcode Interface Builder
DroidDraw
Application Case Studies
Web Portal -> Mobile Application
Browser-based / Multi-Device




 Opera /
 XHTML


                         Android


                                   iPhone
           Blackberry
Browser-based / Multi-Device




 Opera /
 XHTML


                         Android


                                   iPhone
           Blackberry
Geo Reporting Application




   Form-based application with Multimedia Capture
Mobile Apps Connect to the Web




Also accessible via SMS, Twitter, VOIP/Telephone
http://coovents.com
Mobile Content Management System (CMS)




                  Content     Drop-down Menu
Splash Screen
In Summary

• Spend at least half your time thinking, drawing, designing and planning


• Don’t just design for the lowest common denominator


• Mouse Click != Finger Tap


• For Web -> Mobile, extract just the most useful bits of functionality


• Connectivity is Your Enemy


• and more?
Links

• Apple iPhone HIG: http://developer.apple.com/iphone


• Inauguration Report: http://npr.org/inaugurationreport


• Ultimate iPhone Stencil: http://graffletopia.com/stencils/413


• DroidDraw: http://www.droiddraw.org/


• J2ME LWUIT: https://lwuit.dev.java.net/
Thank You!

email: nathan@olivercoady.com
blog: http://openideals.com

Mais conteúdo relacionado

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 

Destaque

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
 
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)
 

Destaque (20)

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
 
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
 
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
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
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
 
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)
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
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
 
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...
 
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...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 

Oliver Coady Columbia Mobile Ux Talk Feb2009

  • 1. Experience & Design in the Mobile World User Interface and Experience Design Nathan Freitas, Oliver+Coady nathan@olivercoady.com
  • 2. When developing software for the web or a desktop computer, you only need to consider the mouse and the keyboard. With a mobile device, you must take into account the entire world around you (and your users).
  • 3. Possible User Input Sources for a Mobile Device • Keyboard • Vibration • “Click” Tap via Touch (or Stylus) • Sound / Music • Wheel or Trackball • Wireless Network Coverage • GPS or Network Location • Environment Lighting • Accelerometer Motion • Multitouch and Gestures • Orientation / Compass / Altitude • Device Security / Loss
  • 4. Three Device Classes Mobile devices can be categorized by their physical dimensions, network connectivity, software capabilities and more
  • 6. text NATHANF to 41411 (my SMS business card)
  • 7. Medium: Java / J2ME / Symbian
  • 8. High: Apple iPhone, Android, Windows Mobile
  • 10. Think about the “60 second” use case... and then think about the “60 minute” use case.
  • 11. 60 second = quick reference, lookup or message directions, scores, stocks, weather... 60 minute = long, in-depth interaction while relaxing, wasting time or on a train or plane networked game, writing / reading / browsing, movies, podcasts, project / finance management
  • 12. Casual Dice Flashlight Game Utility RPG Banking Serious
  • 13. What Would Fisher Price Do? Easy, Fun, Instant Feedback, Limited Choices
  • 14. 12 Myths of Mobile User-Interface Design • Users want power and aesthetics. • Mobile devices will essentially be Features are everything phones, organizers, or combinations, with maybe music/video added on • What we really need is a Swiss army knife • The industry is converging on a UI standard • 3G is here! • Highly usable systems are just • Focus groups and other traditional around the corner market analysis tools are the best way to determine user needs • One underlying operating system will dominate • If it works in New York, it will work anywhere • Mobile devices will be free-or nearly free • The killer app will be games, --er, no, I mean, nightlife, or gps.... uh... • Advanced data-oriented services are just around the corner http://nickcowie.com/2008/revisited-12-myths-of-mobile-user-interface-design/
  • 15. Create Your User Stories I want to be able to find all the While I am shopping at a store, open happy hours nearby so I I want to be able to find out if I can save money can get it cheaper online I want to be able to poll my I am walking to get fast food friends for advice at any moment and I’d really like my lunch to be ready when I get there As I go for a run, I want to The camera should wait until know how my pace is my hand is still and the shot is compared to others my age. level before the picture is taken.
  • 16. Think About Where & When • At the office, during a meeting • At a sales meeting, for a $$$ deal • By a parent, during breakfast • By a single parent, making dinner • In the backseat of a taxi • In the drivers seat of a semi-truck • By a doctor in a hospital • By a doctor in Rwanda • By a soldier at a base • By a soldier, under fire
  • 19. At some point, ink turns into pixels
  • 20. Apple iPhone Human Interface Guidelines http://developer.apple.com/iphone
  • 21. Use Standard Buttons / Icons / Assets
  • 22. Tools to Discuss & Download
  • 23. Better Design through Stenciling
  • 24. LWUIT: Make J2ME Sexier Lightweight UI Toolkit aka “Swing for Mobile”
  • 28. Web Portal -> Mobile Application
  • 29. Browser-based / Multi-Device Opera / XHTML Android iPhone Blackberry
  • 30. Browser-based / Multi-Device Opera / XHTML Android iPhone Blackberry
  • 31. Geo Reporting Application Form-based application with Multimedia Capture
  • 32. Mobile Apps Connect to the Web Also accessible via SMS, Twitter, VOIP/Telephone
  • 33.
  • 35. Mobile Content Management System (CMS) Content Drop-down Menu Splash Screen
  • 36. In Summary • Spend at least half your time thinking, drawing, designing and planning • Don’t just design for the lowest common denominator • Mouse Click != Finger Tap • For Web -> Mobile, extract just the most useful bits of functionality • Connectivity is Your Enemy • and more?
  • 37. Links • Apple iPhone HIG: http://developer.apple.com/iphone • Inauguration Report: http://npr.org/inaugurationreport • Ultimate iPhone Stencil: http://graffletopia.com/stencils/413 • DroidDraw: http://www.droiddraw.org/ • J2ME LWUIT: https://lwuit.dev.java.net/