SlideShare una empresa de Scribd logo
1 de 59
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Creating Compelling Mobile User Experiences:
What You Need to Know
Chris Griffith
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Disclaimer
2
These opinions and thoughts are my own,
and may or may not reflect the opinions of
the company that I work for.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
About Me
6
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile is Everywhere
8
 [photo from last year’s MAX before the sneaks with everyone holding up
their devices]
Mobile is Everywhere
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Mobile First
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What is prototype?
12
…incomplete versions of the software program being
developed. A prototype typically implements only a
small subset of the features of the eventual program,
and the implementation may be completely different
from that of the eventual product.
(http://en.wikipedia.org/wiki/Software_prototyping)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
Technical Prototype
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Prototype Spectrum
21
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Low Fidelity Prototyping Tools
22
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Low Fidelity Prototyping
 Quick to develop
 Allows for explorations of ideas
 Can be more difficult to conduct user
studies
 Zero coding!
23
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
Source: http://usereccentric.com/entries/000333.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Device Central
25
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
Emulator Device
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe on Android
27
Flash Player 10.1 for Android
AIR for Android
Available onothe Android Market
(for selected devices)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Medium Fidelity Prototyping Tools
28
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Medium Fidelity Prototyping
 More “real” user experience
 Longer design time
 Longer development time
 Some level of programming
 “Golden Path” / Slideshow
29
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Fireworks Prototype Demo
31
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Add a little <meta> to your life
32
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
High Fidelity Prototyping Tools
33
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
High Fidelity Prototyping
 Closer to reality
 Greater design requirements
 More development time
 Can serve as a reference platform for
other groups (Engineering, QA, Marketing)
34
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Prototyping Demo
35
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
So what can
Prototyping solve?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
Data based on respective products published technical specifications
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Pixels Per Inch (PPI)
Device Resolution PPI Physical
Nexus One/ HTC Incredible/
HTC Desire
800x480 254 3.7’
HTC EVO/ HTC Desire HD 800x480 217 4.3’
Droid/ Droid 2 854x480 265 3.7’
Droid X 854x480 240 4.3’
Samsung Galaxy S Vibrant 800x480 232 4.0’
iPhone 3GS and lower 480x320 163 3.5’
iPhone 4 960x640 326 3.5’
iPad 1024x768 132 9.7’
Galaxy Tab 1024x600 170 7’
38
Data based on respective products published technical specifications
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Bitmaps vs. Vectors
39
Bitmap Vector
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Touch Targets
40
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Touch Targets
41
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Screen Orientation
42
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Ergonomics
43
You are holding it
wrong ;)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Ergonomics
44
How will they touch it?
 One Thumb?
 Two Thumbs?
 Pointer Finger?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
“Hero” – Flex Mobile
45
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hero in a Nutshell: Mobile Application Development
Allow developers to create a single mobile project
that will run on multiple mobile environments
 UI components supporting touchscreen
interaction
 Application framework fitted with common
mobile UI patterns
 Interactive performance tuned for mobile
devices
46
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
Prototyping
Pitfalls
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
“It is a Fidelity
Trap”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
“Looks Done to me!
Ship IT!”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Prototyping: A Practitioner's Guide
50
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Resources
51
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
A few guidelines
for better
mobile experiences…
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Design Tips
 Very short learning curve
 Fast
 Look beautiful
 Entertain the user
 Design In Context
53
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Layout Tips
 Use screen space efficiently
 Condense information
 Mobilize, don't miniaturize
54
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Content Tips
 Optimize lists
 Minimize scrolling
 Minimize Typing
 Large hit areas
 Simple images
 Readable text
55
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Hardware Tips
 Varied screen sizes
 Conform to the platform
 Varied input hardware
 Conserve power
56
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58
Q&A
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Contact Me
chris.griffith@gmail.com
Twitter: @chrisgriffith
Blog: http://chrisgriffith.wordpress.com/
59
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60
Turn in your Surveys for a chance to WIN!
 Hand in your surveys to the room
monitors
 One survey will be selected as a
winner of the Adobe Press e-book
Adobe Flash Platform from
Start to Finish: Working
Collaboratively Using Adobe
Creative Suite 5
 Winners will be notified via e-mail
at the end of each day
60
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Más contenido relacionado

La actualidad más candente

How Software Creates the Sizzle on Mobile Silicon
How Software Creates the Sizzle on Mobile SiliconHow Software Creates the Sizzle on Mobile Silicon
How Software Creates the Sizzle on Mobile SiliconIntel® Software
 
Android presentation
Android presentationAndroid presentation
Android presentationDipesh Shome
 
ANDROID TECHNOLOGY
ANDROID TECHNOLOGYANDROID TECHNOLOGY
ANDROID TECHNOLOGYshakil2604
 
Presentation On Android
Presentation On AndroidPresentation On Android
Presentation On AndroidTeachMission
 
Divya Jain at AI Frontiers : Video Summarization
Divya Jain at AI Frontiers : Video SummarizationDivya Jain at AI Frontiers : Video Summarization
Divya Jain at AI Frontiers : Video SummarizationAI Frontiers
 
Future technology trends and gadgets
Future technology trends and gadgetsFuture technology trends and gadgets
Future technology trends and gadgetsHITESH Kumawat
 

La actualidad más candente (8)

How Software Creates the Sizzle on Mobile Silicon
How Software Creates the Sizzle on Mobile SiliconHow Software Creates the Sizzle on Mobile Silicon
How Software Creates the Sizzle on Mobile Silicon
 
Android presentation
Android presentationAndroid presentation
Android presentation
 
ANDROID TECHNOLOGY
ANDROID TECHNOLOGYANDROID TECHNOLOGY
ANDROID TECHNOLOGY
 
ANDROID.SREE
ANDROID.SREEANDROID.SREE
ANDROID.SREE
 
Android ppt
Android pptAndroid ppt
Android ppt
 
Presentation On Android
Presentation On AndroidPresentation On Android
Presentation On Android
 
Divya Jain at AI Frontiers : Video Summarization
Divya Jain at AI Frontiers : Video SummarizationDivya Jain at AI Frontiers : Video Summarization
Divya Jain at AI Frontiers : Video Summarization
 
Future technology trends and gadgets
Future technology trends and gadgetsFuture technology trends and gadgets
Future technology trends and gadgets
 

Destacado

User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience ExplainedSameer dwivedi
 
UX Approach - hollywood.com
UX Approach - hollywood.comUX Approach - hollywood.com
UX Approach - hollywood.comtondwalkaramol
 
Modeling in the Real World Convey UX
Modeling in the Real World   Convey UXModeling in the Real World   Convey UX
Modeling in the Real World Convey UXBram Wessel
 
UX Explained and Exposed for DMD 16
UX Explained and Exposed for DMD 16UX Explained and Exposed for DMD 16
UX Explained and Exposed for DMD 16chriskonings
 
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile StrategyReal World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile StrategyGreg Zapar
 
User centred design (UCD) and the connected home
User centred design (UCD) and the connected homeUser centred design (UCD) and the connected home
User centred design (UCD) and the connected homeCyber-Duck
 
Discount User Experience Design
Discount User Experience DesignDiscount User Experience Design
Discount User Experience Designjdelabar
 
The Design Leaders Playbook UX Australia 2015
The Design Leaders Playbook UX Australia 2015The Design Leaders Playbook UX Australia 2015
The Design Leaders Playbook UX Australia 2015Anthony Quinn
 
What is UX? Where user experience begins and ends.
What is UX? Where user experience begins and ends.What is UX? Where user experience begins and ends.
What is UX? Where user experience begins and ends.100 Shapes
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildChris Griffith
 
UOW Week Nine Presentaiton
UOW Week Nine PresentaitonUOW Week Nine Presentaiton
UOW Week Nine Presentaitonchriskonings
 
What Can Design Bring to Strategy?
What Can Design Bring to Strategy?What Can Design Bring to Strategy?
What Can Design Bring to Strategy?Kathryn Best
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 SlidesJordan Julien
 
Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Chris Feix
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Anna Dahlström
 
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014Melissa Perri
 

Destacado (20)

User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience Explained
 
UX Approach - hollywood.com
UX Approach - hollywood.comUX Approach - hollywood.com
UX Approach - hollywood.com
 
Modeling in the Real World Convey UX
Modeling in the Real World   Convey UXModeling in the Real World   Convey UX
Modeling in the Real World Convey UX
 
UX Explained and Exposed for DMD 16
UX Explained and Exposed for DMD 16UX Explained and Exposed for DMD 16
UX Explained and Exposed for DMD 16
 
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile StrategyReal World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
 
UX and Design Thinking for Startups
UX and Design Thinking for StartupsUX and Design Thinking for Startups
UX and Design Thinking for Startups
 
User centred design (UCD) and the connected home
User centred design (UCD) and the connected homeUser centred design (UCD) and the connected home
User centred design (UCD) and the connected home
 
Discount User Experience Design
Discount User Experience DesignDiscount User Experience Design
Discount User Experience Design
 
The Design Leaders Playbook UX Australia 2015
The Design Leaders Playbook UX Australia 2015The Design Leaders Playbook UX Australia 2015
The Design Leaders Playbook UX Australia 2015
 
What is UX? Where user experience begins and ends.
What is UX? Where user experience begins and ends.What is UX? Where user experience begins and ends.
What is UX? Where user experience begins and ends.
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
 
UX Presentation 02/05/16
UX Presentation 02/05/16UX Presentation 02/05/16
UX Presentation 02/05/16
 
UOW Week Nine Presentaiton
UOW Week Nine PresentaitonUOW Week Nine Presentaiton
UOW Week Nine Presentaiton
 
What Can Design Bring to Strategy?
What Can Design Bring to Strategy?What Can Design Bring to Strategy?
What Can Design Bring to Strategy?
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 Slides
 
Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Why UX #FAILS (with notes)
Why UX #FAILS (with notes)
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
 
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
 

Similar a Creating Compelling Mobile User Experiences

Progressing beyond the Desktop at Universities with Adobe AIR
Progressing beyond the Desktop at Universities with Adobe AIRProgressing beyond the Desktop at Universities with Adobe AIR
Progressing beyond the Desktop at Universities with Adobe AIRJoseph Labrecque
 
Oop2012 keynote Design Driven Development
Oop2012 keynote Design Driven DevelopmentOop2012 keynote Design Driven Development
Oop2012 keynote Design Driven DevelopmentMichael Chaize
 
SAP TechEd 2010 Rich Internet Applications for the Enterprise
SAP TechEd 2010 Rich Internet Applications for the EnterpriseSAP TechEd 2010 Rich Internet Applications for the Enterprise
SAP TechEd 2010 Rich Internet Applications for the EnterpriseAnne Kathrine Petterøe
 
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidOver the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidMichael Chaize
 
Soirée Flex/RIA au Nantes jug
Soirée Flex/RIA au Nantes jugSoirée Flex/RIA au Nantes jug
Soirée Flex/RIA au Nantes jugFrançois Le Droff
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devicespaultrani
 
Innovation and the Adobe Flash Platform
Innovation and the Adobe Flash PlatformInnovation and the Adobe Flash Platform
Innovation and the Adobe Flash PlatformMichael Chaize
 
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesBest practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesMichael Chaize
 
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetUsing Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetJoseph Labrecque
 
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメプロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメKeisuke Todoroki
 
#STC13: The Future of Tech Comm is Here. Are you ready for it?
#STC13: The Future of Tech Comm is Here. Are you ready for it?#STC13: The Future of Tech Comm is Here. Are you ready for it?
#STC13: The Future of Tech Comm is Here. Are you ready for it?Maxwell Hoffmann
 
Devoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexDevoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexMichael Chaize
 
Flash/AIRの最新情報及びARMとの協業
Flash/AIRの最新情報及びARMとの協業Flash/AIRの最新情報及びARMとの協業
Flash/AIRの最新情報及びARMとの協業Andy Hall
 
Improving Adobe Experience Cloud Services Dependability with Machine Learning
Improving Adobe Experience Cloud Services Dependability with Machine LearningImproving Adobe Experience Cloud Services Dependability with Machine Learning
Improving Adobe Experience Cloud Services Dependability with Machine LearningNicolas Brousse
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applicationsMichael Chaize
 
09 09-2013 android-introduction p_pt
09 09-2013 android-introduction p_pt09 09-2013 android-introduction p_pt
09 09-2013 android-introduction p_ptTOPS Technologies
 
Adobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another LookAdobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another LookJoseph Labrecque
 

Similar a Creating Compelling Mobile User Experiences (20)

W-JAX Keynote 2010
W-JAX Keynote 2010W-JAX Keynote 2010
W-JAX Keynote 2010
 
Progressing beyond the Desktop at Universities with Adobe AIR
Progressing beyond the Desktop at Universities with Adobe AIRProgressing beyond the Desktop at Universities with Adobe AIR
Progressing beyond the Desktop at Universities with Adobe AIR
 
AIR for Higher Education
AIR for Higher EducationAIR for Higher Education
AIR for Higher Education
 
Oop2012 keynote Design Driven Development
Oop2012 keynote Design Driven DevelopmentOop2012 keynote Design Driven Development
Oop2012 keynote Design Driven Development
 
SAP TechEd 2010 Rich Internet Applications for the Enterprise
SAP TechEd 2010 Rich Internet Applications for the EnterpriseSAP TechEd 2010 Rich Internet Applications for the Enterprise
SAP TechEd 2010 Rich Internet Applications for the Enterprise
 
Adobe Flash Platform Summit 2010
Adobe Flash Platform Summit 2010Adobe Flash Platform Summit 2010
Adobe Flash Platform Summit 2010
 
Over the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for AndroidOver the air 2.5 - Adobe AIR for Android
Over the air 2.5 - Adobe AIR for Android
 
Soirée Flex/RIA au Nantes jug
Soirée Flex/RIA au Nantes jugSoirée Flex/RIA au Nantes jug
Soirée Flex/RIA au Nantes jug
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devices
 
Innovation and the Adobe Flash Platform
Innovation and the Adobe Flash PlatformInnovation and the Adobe Flash Platform
Innovation and the Adobe Flash Platform
 
Best practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devicesBest practices for Flash applications on mobile devices
Best practices for Flash applications on mobile devices
 
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetUsing Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component Set
 
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメプロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
プロトタイプでWeb制作の手戻りを減らせ!アドビ初のUI/UXデザインツール、Adobe XDのススメ
 
#STC13: The Future of Tech Comm is Here. Are you ready for it?
#STC13: The Future of Tech Comm is Here. Are you ready for it?#STC13: The Future of Tech Comm is Here. Are you ready for it?
#STC13: The Future of Tech Comm is Here. Are you ready for it?
 
Devoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexDevoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with Flex
 
Flash/AIRの最新情報及びARMとの協業
Flash/AIRの最新情報及びARMとの協業Flash/AIRの最新情報及びARMとの協業
Flash/AIRの最新情報及びARMとの協業
 
Improving Adobe Experience Cloud Services Dependability with Machine Learning
Improving Adobe Experience Cloud Services Dependability with Machine LearningImproving Adobe Experience Cloud Services Dependability with Machine Learning
Improving Adobe Experience Cloud Services Dependability with Machine Learning
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applications
 
09 09-2013 android-introduction p_pt
09 09-2013 android-introduction p_pt09 09-2013 android-introduction p_pt
09 09-2013 android-introduction p_pt
 
Adobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another LookAdobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another Look
 

Más de Chris Griffith

Intro to Ionic Framework
Intro to Ionic FrameworkIntro to Ionic Framework
Intro to Ionic FrameworkChris Griffith
 
Electron: From Beginner to Pro
Electron: From Beginner to ProElectron: From Beginner to Pro
Electron: From Beginner to ProChris Griffith
 
Real World ionic Development
Real World ionic DevelopmentReal World ionic Development
Real World ionic DevelopmentChris Griffith
 
Essentials of Adobe Experience Design
Essentials of Adobe Experience DesignEssentials of Adobe Experience Design
Essentials of Adobe Experience DesignChris Griffith
 
What is the Ionic Framework?
What is the Ionic Framework?What is the Ionic Framework?
What is the Ionic Framework?Chris Griffith
 
Choosing the Right Mobile Development Platform (Part 1)
Choosing the Right Mobile Development Platform (Part 1)Choosing the Right Mobile Development Platform (Part 1)
Choosing the Right Mobile Development Platform (Part 1)Chris Griffith
 
Choosing the Right Mobile Development Platform (Part 6)
Choosing the Right Mobile Development Platform (Part 6)Choosing the Right Mobile Development Platform (Part 6)
Choosing the Right Mobile Development Platform (Part 6)Chris Griffith
 
Choosing the Right Mobile Development Platform (Part 5)
Choosing the Right Mobile Development Platform (Part 5)Choosing the Right Mobile Development Platform (Part 5)
Choosing the Right Mobile Development Platform (Part 5)Chris Griffith
 
Choosing the Right Mobile Development Platform (Part 4)
Choosing the Right Mobile Development Platform (Part 4)Choosing the Right Mobile Development Platform (Part 4)
Choosing the Right Mobile Development Platform (Part 4)Chris Griffith
 
Choosing the Right Mobile Development Platform (Part 3)
Choosing the Right Mobile Development Platform (Part 3)Choosing the Right Mobile Development Platform (Part 3)
Choosing the Right Mobile Development Platform (Part 3)Chris Griffith
 
Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)Chris Griffith
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Chris Griffith
 
Prototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for DesignersPrototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for DesignersChris Griffith
 
Designing Great Mobile Apps
Designing Great Mobile AppsDesigning Great Mobile Apps
Designing Great Mobile AppsChris Griffith
 
Designing Great Mobile Apps
Designing Great Mobile AppsDesigning Great Mobile Apps
Designing Great Mobile AppsChris Griffith
 
Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5Chris Griffith
 
Developing AIR for Android with Flash Professional
Developing AIR for Android with Flash ProfessionalDeveloping AIR for Android with Flash Professional
Developing AIR for Android with Flash ProfessionalChris Griffith
 

Más de Chris Griffith (20)

Intro to Ionic Framework
Intro to Ionic FrameworkIntro to Ionic Framework
Intro to Ionic Framework
 
Electron: From Beginner to Pro
Electron: From Beginner to ProElectron: From Beginner to Pro
Electron: From Beginner to Pro
 
Real World ionic Development
Real World ionic DevelopmentReal World ionic Development
Real World ionic Development
 
Announcing StencilJS
Announcing StencilJSAnnouncing StencilJS
Announcing StencilJS
 
Beyond Ionic
Beyond IonicBeyond Ionic
Beyond Ionic
 
Essentials of Adobe Experience Design
Essentials of Adobe Experience DesignEssentials of Adobe Experience Design
Essentials of Adobe Experience Design
 
What is the Ionic Framework?
What is the Ionic Framework?What is the Ionic Framework?
What is the Ionic Framework?
 
Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
Choosing the Right Mobile Development Platform (Part 1)
Choosing the Right Mobile Development Platform (Part 1)Choosing the Right Mobile Development Platform (Part 1)
Choosing the Right Mobile Development Platform (Part 1)
 
Choosing the Right Mobile Development Platform (Part 6)
Choosing the Right Mobile Development Platform (Part 6)Choosing the Right Mobile Development Platform (Part 6)
Choosing the Right Mobile Development Platform (Part 6)
 
Choosing the Right Mobile Development Platform (Part 5)
Choosing the Right Mobile Development Platform (Part 5)Choosing the Right Mobile Development Platform (Part 5)
Choosing the Right Mobile Development Platform (Part 5)
 
Choosing the Right Mobile Development Platform (Part 4)
Choosing the Right Mobile Development Platform (Part 4)Choosing the Right Mobile Development Platform (Part 4)
Choosing the Right Mobile Development Platform (Part 4)
 
Choosing the Right Mobile Development Platform (Part 3)
Choosing the Right Mobile Development Platform (Part 3)Choosing the Right Mobile Development Platform (Part 3)
Choosing the Right Mobile Development Platform (Part 3)
 
Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)Choosing the Right Mobile Development Platform (Part 2)
Choosing the Right Mobile Development Platform (Part 2)
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5
 
Prototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for DesignersPrototyping Mobile Applications with Flash for Designers
Prototyping Mobile Applications with Flash for Designers
 
Designing Great Mobile Apps
Designing Great Mobile AppsDesigning Great Mobile Apps
Designing Great Mobile Apps
 
Designing Great Mobile Apps
Designing Great Mobile AppsDesigning Great Mobile Apps
Designing Great Mobile Apps
 
Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5
 
Developing AIR for Android with Flash Professional
Developing AIR for Android with Flash ProfessionalDeveloping AIR for Android with Flash Professional
Developing AIR for Android with Flash Professional
 

Último

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
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 2024The Digital Insurer
 
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
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
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...Martijn de Jong
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
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...Enterprise Knowledge
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
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 Scriptwesley chun
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
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)wesley chun
 
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
 
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
 

Último (20)

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
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
 
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
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
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...
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
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...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
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
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
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)
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
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
 

Creating Compelling Mobile User Experiences

  • 1. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Creating Compelling Mobile User Experiences: What You Need to Know Chris Griffith
  • 2. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Disclaimer 2 These opinions and thoughts are my own, and may or may not reflect the opinions of the company that I work for.
  • 3. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  • 4. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  • 5. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
  • 6. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. About Me 6
  • 7. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Mobile is Everywhere 8  [photo from last year’s MAX before the sneaks with everyone holding up their devices] Mobile is Everywhere
  • 8. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9 Mobile First
  • 9. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
  • 10. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
  • 11. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. What is prototype? 12 …incomplete versions of the software program being developed. A prototype typically implements only a small subset of the features of the eventual program, and the implementation may be completely different from that of the eventual product. (http://en.wikipedia.org/wiki/Software_prototyping)
  • 12. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
  • 13. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  • 14. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15 Technical Prototype
  • 15. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  • 16. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
  • 17. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  • 18. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
  • 19. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 20. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Prototype Spectrum 21
  • 21. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Low Fidelity Prototyping Tools 22
  • 22. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Low Fidelity Prototyping  Quick to develop  Allows for explorations of ideas  Can be more difficult to conduct user studies  Zero coding! 23
  • 23. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24 Source: http://usereccentric.com/entries/000333.html
  • 24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Device Central 25
  • 25. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26 Emulator Device
  • 26. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Adobe on Android 27 Flash Player 10.1 for Android AIR for Android Available onothe Android Market (for selected devices)
  • 27. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Medium Fidelity Prototyping Tools 28
  • 28. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Medium Fidelity Prototyping  More “real” user experience  Longer design time  Longer development time  Some level of programming  “Golden Path” / Slideshow 29
  • 29. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
  • 30. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Fireworks Prototype Demo 31
  • 31. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Add a little <meta> to your life 32
  • 32. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Fidelity Prototyping Tools 33
  • 33. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Fidelity Prototyping  Closer to reality  Greater design requirements  More development time  Can serve as a reference platform for other groups (Engineering, QA, Marketing) 34
  • 34. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Flash Prototyping Demo 35
  • 35. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36 So what can Prototyping solve?
  • 36. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37 Data based on respective products published technical specifications
  • 37. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Pixels Per Inch (PPI) Device Resolution PPI Physical Nexus One/ HTC Incredible/ HTC Desire 800x480 254 3.7’ HTC EVO/ HTC Desire HD 800x480 217 4.3’ Droid/ Droid 2 854x480 265 3.7’ Droid X 854x480 240 4.3’ Samsung Galaxy S Vibrant 800x480 232 4.0’ iPhone 3GS and lower 480x320 163 3.5’ iPhone 4 960x640 326 3.5’ iPad 1024x768 132 9.7’ Galaxy Tab 1024x600 170 7’ 38 Data based on respective products published technical specifications
  • 38. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Bitmaps vs. Vectors 39 Bitmap Vector
  • 39. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Touch Targets 40
  • 40. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Touch Targets 41
  • 41. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Screen Orientation 42
  • 42. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Ergonomics 43 You are holding it wrong ;)
  • 43. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Ergonomics 44 How will they touch it?  One Thumb?  Two Thumbs?  Pointer Finger?
  • 44. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. “Hero” – Flex Mobile 45
  • 45. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hero in a Nutshell: Mobile Application Development Allow developers to create a single mobile project that will run on multiple mobile environments  UI components supporting touchscreen interaction  Application framework fitted with common mobile UI patterns  Interactive performance tuned for mobile devices 46
  • 46. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47 Prototyping Pitfalls
  • 47. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48 “It is a Fidelity Trap”
  • 48. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49 “Looks Done to me! Ship IT!”
  • 49. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Prototyping: A Practitioner's Guide 50
  • 50. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Resources 51
  • 51. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52 A few guidelines for better mobile experiences…
  • 52. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Design Tips  Very short learning curve  Fast  Look beautiful  Entertain the user  Design In Context 53
  • 53. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Layout Tips  Use screen space efficiently  Condense information  Mobilize, don't miniaturize 54
  • 54. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Content Tips  Optimize lists  Minimize scrolling  Minimize Typing  Large hit areas  Simple images  Readable text 55
  • 55. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Hardware Tips  Varied screen sizes  Conform to the platform  Varied input hardware  Conserve power 56
  • 56. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58 Q&A
  • 57. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Contact Me chris.griffith@gmail.com Twitter: @chrisgriffith Blog: http://chrisgriffith.wordpress.com/ 59
  • 58. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60 Turn in your Surveys for a chance to WIN!  Hand in your surveys to the room monitors  One survey will be selected as a winner of the Adobe Press e-book Adobe Flash Platform from Start to Finish: Working Collaboratively Using Adobe Creative Suite 5  Winners will be notified via e-mail at the end of each day 60
  • 59. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Notas del editor

  1. Full of constraints: Memory Processor Screen size Screen orientation Environment Network Time of Use Interaction models As designers & developers have to overcome these challenges, best designs learn to embrace them
  2. Source: http://www.whattofix.com/blog/archives/2008/05/peace_for_pachy.php
  3. But in the end it is really the Power of Show and Tell that a prototype can give over more traditional forms of communication.
  4. Bring more fidelity to your designs <meta> tag tricks On device browser demo