Designing mobile experiences
Upcoming SlideShare
Loading in...5
×
 

Designing mobile experiences

on

  • 3,669 views

In this talk I talk about what it takes to create an amazing mobile experience, be innovative and include some tips and tricks we've learned at pinch/zoom to be successful.

In this talk I talk about what it takes to create an amazing mobile experience, be innovative and include some tips and tricks we've learned at pinch/zoom to be successful.

Statistics

Views

Total Views
3,669
Views on SlideShare
3,638
Embed Views
31

Actions

Likes
25
Downloads
225
Comments
0

8 Embeds 31

http://alphaomegalib.blogspot.com 11
http://a0.twimg.com 4
http://choisel.biz 4
http://localhost 4
http://paper.li 3
http://lanyrd.com 2
http://us-w1.rockmelt.com 2
http://twitter.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing mobile experiences Designing mobile experiences Presentation Transcript

    • designing mobile experiences by Brian Fling MADE WITH LOVE IN SEATTLE BY
    • what does it take tocreate an amazingmobile experience? MADE WITH LOVE IN SEATTLE BY
    • these experiences arenot made in Photoshop MADE WITH LOVE IN SEATTLE BY
    • 1965 MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • He never made anymoney from it. MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • FAIL MADE WITH LOVE IN SEATTLE BY
    • why didmy father fail? MADE WITH LOVE IN SEATTLE BY
    • 2000 MADE WITH LOVE IN SEATTLE BY
    • 3DEF MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • 2Ways ofMakingMoney inMobile MADE WITH LOVE IN SEATTLE BY
    • Ringtones. MADE WITH LOVE IN SEATTLE BY
    • CarrierLogos. MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • Lost ourbacking & failed. MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • why does innovativetechnology fail, whileothers succeed? MADE WITH LOVE IN SEATTLE BY
    • a mobile design & developmentfirm located in Fremonta few of our clients...
    • “We could build the best mobile app ever made, but if our customers don’t know why it’s good, then it could bea mobile design & developmentfirm located in Fremont the worst app ever made. —Scott Dierdorfa few of our clients... @sdierdorf
    • mobile is reallydamn hard... ... it always has been MADE WITH LOVE IN SEATTLE BY
    • the craft of just creatinggreat mobile design isnot enough MADE WITH LOVE IN SEATTLE BY
    • ls tec oa hn sg ica es lg sweetsin spot oabu ls user goals
    • increases dispenses ls tec oaproductivity soda hn sg ica es lg sweet sin spot oa bu ls user goals as easy to use
    • mobile is reallydamn hard. MADE WITH LOVE IN SEATTLE BY
    • examples MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • Creating Amazing Experiences for all Mobile DevicesCLIENTAutomatic Data ProcessingPROJECTSADP iPhone App, Mobile Web App, Content ProxySERVICES ScreenshotConcept, Strategy, Design & DevelopmentDESCRIPTION PlaceholderWe designed and developed an application for ADP customers tocomplete common tasks related to HR, payroll, and benefits in amobile context. This document contains confidential information and is provided for private review only. Do not distribute without permission.
    • disrupt ls tec oabusiness hn sg ica es lg sweet sin spot oa bu ls user goals
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • example MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • refresh product lines before they become tired.happy with just 50%
    • a bold vision empowerspeople to cross thechasm together. MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • “As long as a function is confined toa small area on a wafer, the amountof capacitance which must be drivenis distinctly limited.” —Gordon E. Moore April 19, 1965 MADE WITH LOVE IN SEATTLE BY
    • + 9 years = MADE WITH LOVE IN SEATTLE BY
    • 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY
    • 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY
    • 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devicesweb MADE WITH LOVE IN SEATTLE BY
    • 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb MADE WITH LOVE IN SEATTLE BY
    • 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
    • 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
    • 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
    • MOBILE BOOTCAMP MADE WITH LOVE IN SEATTLE BY
    • ‣ designed to get brands on the mobile path quickly‣ it lasts from 1-5 days depending on the size and scope of the project‣ we create a shared vision of how mobile is meant to improve your business‣ we discover what you do well‣ we uncover areas where you can improve‣ we define what success will look like‣ we define how mobile will improve your bottom line‣ the result is a mobile strategy that you can start on today that will take you into tomorrow MADE WITH LOVE IN SEATTLE BY
    • disrupt ls tec oabusiness hn sg ica es lg sweet sin spot oa bu ls user goals empower users
    • mobile is anentirely new breed. MADE WITH LOVE IN SEATTLE BY
    • ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids ‣ Typography‣ Perspective ‣ Iconography‣ Dimension
    • 6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls9x Animations & Transitions
    • Phones areabout makingthe most ofthe moment,simple tasks,& context.
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • think of your app as a great book. with a great beginning, middle and end MADE WITH LOVE IN SEATTLE BY
    • Tablets areabout focus,consumption,simple tasks& portability.
    • examples MADE WITH LOVE IN SEATTLE BY
    • JOINT VENTURE MADE WITH LOVE IN SEATTLE BY
    • us themmobile experts customer experts the product MADE WITH LOVE IN SEATTLE BY
    • ‣ The BBC app was designed by pinch/zoom‣ BBC hired pinch/zoom based on their deep knowledge and over a decade’s experience of creating mobile experiences‣ pinch/zoom & BBC designed the iPad app as a new means to connect people to the wealth of BBC content‣ We worked with BBC to define strategy, pricing, wording, content, design, interactions and more‣ pinch/zoom created an interaction concept to test with 32 users between Dec 2010 and Feb 2011 in New York‣ New York-based usability firm, Creative Good facilitated the usability tests‣ We did rapid design iteration based on real-time user and client feedback
    • ‣ iPad users are incredibly sophisticated‣ Users have an expectation of the “Apple Aesthetic” when it comes to interaction and user experience. Pixel perfection is important.‣ Users prefer Need-driven over Marketing-driven Design‣ Users are in control of their iPad experience, and will remove, close, delete or leave anything they perceive as marketing or advertising activity.‣ Less is more‣ This is true when talking about animations or content on each screen. Users have an expectation of interactions but are impatient with too much animation.‣ Gestures Matter‣ Web metaphors, like scrolling are considered “cheap” or “lower quality.” Users prefer “native” metaphors like swiping.
    • disrupt device ls tec oabusiness constraints hn sg ica es lg sweet sin spot oa bu ls user goals empower users
    • Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
    • example MADE WITH LOVE IN SEATTLE BY
    • p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone Desktop magazine web app website
    • MADE WITH LOVE IN SEATTLE BY
    • 1x HTML5 Markup1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts1x Hexadecimal CSS Framework
    • a hexadecimal what? MADE WITH LOVE IN SEATTLE BY
    • the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units.
    • the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as well ashorizontally.
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • MADE WITH LOVE IN SEATTLE BY
    • Asset Library App Flow Reference Design Comps Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Define Data Interaction Design Process
    • CARMEN agile product management MADE WITH LOVE IN SEATTLE BY
    • A Fully Agile Agency From Start to FinishThis document contains confidential information and is provided for private review only. Do not distribute without permission.
    • you can createinnovative technologythat succeeds. MADE WITH LOVE IN SEATTLE BY
    • you can design mobileexperiences thatempower. MADE WITH LOVE IN SEATTLE BY
    • ls tec oa hn sg ica es lg sweetsin spot oabu ls user goals MADE WITH LOVE IN SEATTLE BY
    • ls tec oa hn sg ica esTrust the Triangle! lg sweet sin spot oa bu ls user goals MADE WITH LOVE IN SEATTLE BY
    • mobiledesign.org
    • Get in TouchTHANK YOU! Find Out How We Can Help You. Brian Fling Founder & CEO@fling brian@pinchzoom.com +1 206 351-6060book mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling