Ux design for iPhone

1,724 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,724
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ux design for iPhone

  1. 1. UX DESIGN FOR IPHONE Paul Coulton
  2. 2. UX DESIGN FOR IPHONE Paul Coulton We have over 250,000 apps in the app store.We don’t need any more Fart apps. If your app doesn’t do something useful or provide some form of lasting entertainment, it may not be accepted.
  3. 3. MYTHS ABOUT UX DESIGN • Its about making ugly interfaces pretty • Its another name for usability • Its slows the development process
  4. 4. MYTHS ABOUT UX DESIGN • Its about making ugly interfaces pretty • Its another name for usability • Its slows the development process There was no Master Bates or Seaman Stains in Captain Pugwash
  5. 5. INTHE BEGINNING Japan Yawning about Iphone Apple's much anticipated iPhone is 'buisiness as usual, in a country where mobile features are already so advanced “when technology delivers basic needs, user experience dominates” Don Norman
  6. 6. INTHE BEGINNING Japan Yawning about Iphone Apple's much anticipated iPhone is 'buisiness as usual, in a country where mobile features are already so advanced “when technology delivers basic needs, user experience dominates” Don Norman
  7. 7. WHATS DOES IT INCLUDE ?
  8. 8. WHATS DOES IT INCLUDE ? Is the art of structuring data
  9. 9. WHATS DOES IT INCLUDE ? Is the art of structuring data examines embedded behaviours in physical and virtual spaces
  10. 10. WHATS DOES IT INCLUDE ? Is the art of structuring data examines embedded behaviours in physical and virtual spaces a measure of ease of use of a tool in order to achieve a particular goal
  11. 11. WHATS DOES IT INCLUDE ? Is the art of structuring data examines embedded behaviours in physical and virtual spaces a measure of ease of use of a tool in order to achieve a particular goal (Ergonmics) study of optimising the interface between human beings and designed objects
  12. 12. WHATS DOES IT INCLUDE ? Is the art of structuring data examines embedded behaviours in physical and virtual spaces a measure of ease of use of a tool in order to achieve a particular goal (Ergonmics) study of optimising the interface between human beings and designed objects uses a cognitive methodology relating to study, design, construction and implementation of human centric computer
  13. 13. WHATS DOES IT INCLUDE ? Is the art of structuring data examines embedded behaviours in physical and virtual spaces a measure of ease of use of a tool in order to achieve a particular goal (Ergonmics) study of optimising the interface between human beings and designed objects uses a cognitive methodology relating to study, design, construction and implementation of human centric computer designing the interaction between human and computer including graphic design
  14. 14. HOW DO WE EXPERIENCE? Positive Effectiveness Efficiency Pride Pleasure Joy Engagement Love Trust Fun Negative Anger Frustration Disappointment Shame Stupidity Indifference Hate There can be a large scale of emotions when using mobile applications
  15. 15. HOW DO WE EXPERIENCE? Positive Effectiveness Efficiency Pride Pleasure Joy Engagement Love Trust Fun Negative Anger Frustration Disappointment Shame Stupidity Indifference Hate There can be a large scale of emotions when using mobile applications
  16. 16. SW PRODUCT QUALITY ISO-9126 Functionality Reliability Efficiency Usability Portability Maintainability Suitability Maturity Time behaviour Operability Install-ability Testability Accuracy FaultTolerance Resource Utilisation Learnability Adaptability Stability ... ... ... ... ... ...
  17. 17. SW PRODUCT QUALITY ISO-9126 Functionality Reliability Efficiency Usability Portability Maintainability Suitability Maturity Time behaviour Operability Install-ability Testability Accuracy FaultTolerance Resource Utilisation Learnability Adaptability Stability ... ... ... ... ... ... Usability means ease-of-use “What is the required level of mental and physical effort to complete the tasks?”
  18. 18. SW PRODUCT QUALITY ISO-9126 Functionality Reliability Efficiency Usability Portability Maintainability Suitability Maturity Time behaviour Operability Install-ability Testability Accuracy FaultTolerance Resource Utilisation Learnability Adaptability Stability ... ... ... ... ... ... Usability means ease-of-use “What is the required level of mental and physical effort to complete the tasks?” UX: Expectations, motives, actions, interpretations, …
  19. 19. EXTENDING USABILITYTO UX OVERALL UX Pragmatic Hedonic Social Value Richer social life Image/Status Symbol Enjoyment Pleasure Stimulation Utility Feature set Reliabilty Usability Easy to fulfil a goal Easy to use Useful All I need No Clutter No malfunction Secure Robust Navigation Performance Intuitive Taking into use Anywhere Anytime Communicate Monitor Presentable Good Citizen Fits my image Look Behaviour Feel First use Novel behaviour New sensations New activities
  20. 20. UX ISTEMPORAL Expected User Experience User experience during interaction Overall user experience Brand image Advertisements Friends, Reports,... (before use) User, Context, System Brand image Advertisements Friends, Reports,... (outside interaction)
  21. 21. UX IN PRODUCT LIFECYCLE !  "#$%&'()'$ *+'&$ ,'-./0)$ !  1#$23+4&'$ -56(-)6$ !  7#$%&'()'$ 8'+.&'$)5$ 946$ !  :#$%();0$ ())'3).53$ <.&+)$ =>?&'++.53$ @4&;0(+'$ A05&)$)'&>$ 4+'$ B53/$)'&>$ 4+'$ Objective Catch Attention Create desire to buy Create/ Increase delight Ensure loyalty Desired response Context Direct design element Grab it Try it Explore it Stick to it 1st Exposure: shop, friend Demo use In use, short term In use, long term Industrial design, haptics, content, form factor, display keypad Start-up, idle, menu, graphics and animations, sounds, UE concepts Content, set-up, enhancements Quality of usability, localisation, implementation, consistency, support
  22. 22. LIFE ONTHE APP STORE • Most mobile applications have a relatively short “shelf life” with on average less than 25% of users returning to the app one day after download, dropping to around 5% after 30 days. • Pinch Media
  23. 23. LIFE ONTHE APP STORE • Most mobile applications have a relatively short “shelf life” with on average less than 25% of users returning to the app one day after download, dropping to around 5% after 30 days. • Pinch Media The category to which an application belongs seems to have a strong effect on return rate – applications that are typically more dynamic e.g. sports (results, league tables etc.) and entertainment apps fared better than games, utility, and lifestyle applications.
  24. 24. SHUFFLINGTHE DECK • By appearing on the Top 100 list, applications would receive 2.3x more downloads on average and often an order of magnitude higher for the Top 25 and Top 10 list. • Pinch Media
  25. 25. DOING A DEAL • ”We only did the first iPad/ iPhone integration with Chillingo and aside from that we’ve published everything ourselves.We will not use Chillingo again.” • “You don’t need publishers. • Angry Birds “Mighty Eagle” PeterVesterbacka
  26. 26. CONTEXT IS EVERYTHING IN MOBILE TOPIC ON THE MOVE AT HOME Light Weather Noise Usage Attention Movement Connections Power Flow Cost Senses Daylight, dark at night Stable indoor lighting Cold, heat, raining, snowing Warm and comfortable Traffic, people talking Air conditioning humming One handed use Two hands available Many distractions Family Device, hand and finger waving Sitting 3G connection lost, off-line use stable WLAN connection Flat Battery occasionally Having recharger available Many interruptions from context Potential system interruptions Charged by downloaded data Flat rate WLAN Easier to listen Time to view
  27. 27. !"#$%#&'()'*+,-*! "#$%&$'()*+!',-)&.,!/)*/01'!$*2!&+$3(%('4!'0+'(*.!5(',!$/'&$%!&+0-+!(+!$+!(*'0.-$%!6)-!20+(.*!$+!+5!'0+'(*.!(+!6)-!+)6'5$-0! 20#0%)170*'! ./'#&'()'*+,-(*0$%&+0-*! 8,(+!1$-'!)6!',0!1-)/0++!7$4!30!2)*0!(*!+'$.0+9!:;!/)*/01'!<=;*'0-$/'()*!>0+(.*!<=!?-$1,(/!>0+(.*@!A-)')'410+!$-0!20#0%)102! 1'2-'(&3'(45(.0-6'7&! B10/(64!:C!2-(#0-+!$*2!'$-.0'+@!;20*'(64!&+0-!0D10-(0*/0!2-(#0-+!',$'!7&+'!30!6&%E%%02!6)-!',0!1-)2&/'!')!30!+&//0++6&%@!F$G0! 70$+&-$3%0!'$-.0'+H!5,0*0#0-!1)++(3%0! 87'6+9:(&3'(-'')*(#-)(60-&';&(09(%*'! ;20*'(64!',0!10)1%0!5,)!5(%%!&+0!',0!1-)2&/'H!5,4!$*2!5,$'!',04!5(%%!&+0!('!6)-H!$*2!&*20-!5,$'!/)*2('()*+!',04!5(%%!&+0!('! UX DRIVEN DEVELOPMENT
  28. 28. UX CONCEPTING The concept can describe an existing or non-existing product
  29. 29. DEVILS INTHE DETAIL • The level of detail of the concept description detail can vary.This depends on • The target audience you are trying to impress :Investors / management / engineers / consumers / etc. • The next product decisions to make (management or development)
  30. 30. DESIGN APPS AS INFORMATION APPLIANCES • Design Axioms for an Information Appliance: • Simplicity • Versatility • Pleasurability • Don Norman
  31. 31. WHO ISYOUR APP FOR? The most popular phone in the world?
  32. 32. WHO ISYOUR APP FOR? The most popular phone in the world?
  33. 33. WHO ISYOUR APP FOR? The most popular phone in the world? ! !"# $"# %"# &# &# '# $# %$# ()*+,# -,./012# 34# 5)6)7)8,# -)19#:7+;//)1# <8,;*=>779# ?@@8># A6B>7#
  34. 34. THE GOOD NEWS =
  35. 35. PROFILING
  36. 36. INTERACTION DESIGN 1. Design the view level navigation map
  37. 37. INTERACTION DESIGN 2. Design each individual view, one-by-one
  38. 38. INTERACTION DESIGN 3. Select a used UI component for the view data
  39. 39. INTERACTION DESIGN 4. Design validation
  40. 40. INTERACTION DESIGN 5. Co-operation withVisual design
  41. 41. INTERACTION DESIGN 6. Design reviews √
  42. 42. FREE ALL MONSTERS Text
  43. 43. GRAPHICAL DESIGN Contents User‘s and service provider’s data UI Controls Menus, buttons, scroll bars, … Decoration Ornamental UI elements… Layout Colors Typography Graphics Composition, grids, spaces, … Hues, shades, tones,… Fonts, typefaces, … Icons, images, frames, borders, … Graphical and Visual Style UI’s visual appearance !"#$%&'&($%)
  44. 44. !"#$%"& '#("%& BENEFITS OF GRAPHICAL DESIGN Guides the user’s eye where you want it to be Highlighting critical elements on the screen Capable of communicating emotions, not only information
  45. 45. !"#$%"& '#("%& BENEFITS OF GRAPHICAL DESIGN Guides the user’s eye where you want it to be Highlighting critical elements on the screen Capable of communicating emotions, not only information In the perfect mobile application functionality, usability, and graphic design are intertwined and support one another
  46. 46. IMPACT OF GRAPHICAL DESIGN
  47. 47. IMPACT OF GRAPHICAL DESIGN
  48. 48. IMPACT OF GRAPHICAL DESIGN
  49. 49. IMPACT OF GRAPHICAL DESIGN You form your first impression in a few seconds (mostly subconscious activity) Graphical Design impacts users emotionally, even before they start thinking First impressions are important in relationships In this case, the “user-product” relationships You might change your choice after looking at the designs for a while (conscious)
  50. 50. Limited display space requires tough prioritization on what to present, and how Some desktop designs are directly applicable, others completely unacceptable REINVENTING THE WHEEL The universal graphical design rules apply also for mobile device UIs However consider carefully what metaphors or other design details can and should be adopted from the desktop designs
  51. 51. COLOUR Colour is a wide topic. It can cover aspects of science, art and psychology Wireframes are often black-and- white by purpose Colors can steal the attention from the interaction design A rule for mobile devices - keep it simple
  52. 52. PICKING COLOURS When selecting colours some designers rely on their personal experience, intuition and taste
  53. 53. CHECK IN CONTEXT
  54. 54. MAYTHE FORCE OF TYPOGRAPHY BE WITHYOU You might take typography for granted until it fails. What  was  normal  for  typewriting  in  the  past,   looks  now  outdated. Of  course  if  your  UX  is  to  look  old-­‐fashioned,   it  can  provide  the  effect  your  looking  for. There are many way to ruin a reading experience The text might look cool, but it can be hard to read Graphical Design is not the opposite to text, it is a part of it Typefaces alone can have an both emotional and practical impacts on the reader.
  55. 55. SIZE NOW MATTERS For three generations of the iPhone,Apple kept the screen consistent (320x480 pixels and 3.5 inches diagonal). But now Apple's new iPhone 4 boasts the highest resolution phone screen ever (960x640 pixels, 3.5 inches diagonal, & an 800:1 contrast ratio.
  56. 56. MOBILE CONTEXT CHARACTERISTICS !"#$%&'()"*#+&,( -&.+/"(0")+1"( )"*#+&,( 2"3%(&,/4()"*#+&,( !"#$%&'()"*(%"+$#',$&"-'./"01%2$%"&,%$$)&3" 1+#1),$+"4(5'0$"5%(-&$%&"1)+"67&8" !"&.1)+1%+"9:;<=>?" #$%&'()",1)"5$"(@.'4'A$+" .("-(%B"()"4(&."4(5'0$" +$#',$&8" !"0(-C2%1@/',&"#$%&'()" *$1.D%$&")("#'+$("(%"1D+'(" ,().$)."1)+"*$-"'412$&8" UI Designs, case BBC.com (Oct’09)
  57. 57. UTILITY IN MOBILE DEVICES If utility is important to the mobile application concept the graphical design should be Simple, clear and effective Use colours and layout to create clear and logical structures for the content. If you use images, minimise the size. Avoid decorative elements. Avoid horizontal scrolling
  58. 58. CHECKLIST • Check the desired company/product brand • Check what are the UX goals: will “standard” design be enough or is a “wow” desired • You can break the graphical design rules - but only if you know them • Check the target mobile UI platform: look, feel and components • Validate product concept, use cases, UX requirements • Do close cooperation with interaction design • Check the display technology where the application will be used
  59. 59. Twitter @MysticMobile

×