Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UX / UIThe User Experience              Marc Cain    marc.cain@bolderimage.com            #BolderImage
What Makes A Great App?     The difference between an app and a     Great app is the UX / UI     Great Apps Embrace the Pl...
UX / UI Makes the Difference
UX / UI Makes the Difference• Anyone can make an app – but to enage    the user you need a great UX /UI•   Off Shore Can m...
Engage the User with Great UX/UI
Engage the User with Great UX/UI
Engage the User with Great UX/UI
Engage the User with Great UX/UI
Engage the User with Great UX/UI
Engage the User with Great UX/UI
Engage the User with Great UX/UI
Offshore Can Miss the Boat• Offshore can office great advantages for    technical development but also have    challenges....
Apple is the Leader in UX / UI• Apple builds their products from a User    Experience standpoint•   Apple micro-manages ev...
Embrace the PlatformAnd the Human Interface       Principles
Platform and HIG• The most successful apps embrace the    characteristics of the platform and    provides a UX that integr...
Characteristic of the Platform• The display of the device is key – not just    for viewing but you physically interact    ...
• Onscreen user help is minimal – the app    should be intuitive enough that help    pages are minimal.•   Most apps have ...
iOS and Android are Different• The characters of the UX on iOS and    Android differ.•   Android provides a back button an...
An App Is Not a Web Site• You interact with an app differenlty than a    web site because of the platform•   Gestures are ...
Human Interface Principles• Aesthetic Integrity – does the design fit    the task? A Utility vs. A Game•   Consistency    ...
• Metaphors help users grasp how to use  an app – onscreen objects can be  physically interacted with. Examples:  •   Tapp...
Great Artwork
Great Artwork
Great Artwork
A Well Thought Out Plan
A Well Thought out Plan• Create An Application Defination  Statement.• Tailor Customization to the Task• Prototype and Ite...
Application Defination Statement• Write a concise declaration of the app’s    main purpose and it intended audience.•   Li...
Tailor Customization to the task• Balance UI customizations with clarity of    purpose – Form follows function or does    ...
Prototype and Iterate• Create wireframes and mock ups to    review with peers. Start with paper and    walk colleagues thr...
Thank you         Marc Cainmarc.cain@bolderimage.com       #BolderImage
Ux ui presentation2
Ux ui presentation2
Upcoming SlideShare
Loading in …5
×

Ux ui presentation2

692 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ux ui presentation2

  1. 1. UX / UIThe User Experience Marc Cain marc.cain@bolderimage.com #BolderImage
  2. 2. What Makes A Great App? The difference between an app and a Great app is the UX / UI Great Apps Embrace the Platform and the Human Interface Principles – Each Platform is different. A Great App Starts with a Custom UX / UI and Great Artwork A Great App has Well Thought Out Goals and Features
  3. 3. UX / UI Makes the Difference
  4. 4. UX / UI Makes the Difference• Anyone can make an app – but to enage the user you need a great UX /UI• Off Shore Can miss the Boat• Apple has Perfected the Concept of User Experience and User Interface• Follow their Guidelines in the HIG• http://developer.apple.com/library/ios/#documentation/Us erExperience/Conceptual/MobileHIG/Introduction/Introduc tion.html
  5. 5. Engage the User with Great UX/UI
  6. 6. Engage the User with Great UX/UI
  7. 7. Engage the User with Great UX/UI
  8. 8. Engage the User with Great UX/UI
  9. 9. Engage the User with Great UX/UI
  10. 10. Engage the User with Great UX/UI
  11. 11. Engage the User with Great UX/UI
  12. 12. Offshore Can Miss the Boat• Offshore can office great advantages for technical development but also have challenges.• Cultural and life experiences effect UX / UI development.
  13. 13. Apple is the Leader in UX / UI• Apple builds their products from a User Experience standpoint• Apple micro-manages every small detail eg. App approval process• HIG – Excellent resource http://developer.apple.com/library/ios/#d ocumentation/UserExperience/Conce ptual/MobileHIG/Introduction/Introduct ion.html
  14. 14. Embrace the PlatformAnd the Human Interface Principles
  15. 15. Platform and HIG• The most successful apps embrace the characteristics of the platform and provides a UX that integrates with the device they are running on.• iOS and Android offer different UX.• An App is not a web site.• Great UX follows HI design principles based on the way people think and work.
  16. 16. Characteristic of the Platform• The display of the device is key – not just for viewing but you physically interact with the multi-touch screen.• Consider the size of the items that are tappable.• The quality of the artwork is very noticable.• The screen orientation can change and so should the content.
  17. 17. • Onscreen user help is minimal – the app should be intuitive enough that help pages are minimal.• Most apps have a single window – Views that scroll are seen as one view regardless of length and the data attached to each entry as a separate view eg. the user contacts.
  18. 18. iOS and Android are Different• The characters of the UX on iOS and Android differ.• Android provides a back button and apps should be designed around that.• Navigation bars and tool bars differ between Android and iOS.
  19. 19. An App Is Not a Web Site• You interact with an app differenlty than a web site because of the platform• Gestures are key to the interaction • Tap – analogous to a mouse click • Drag – used to scroll or pan • Flick – used to scroll or pan quickly • Swipe – used to reveal the delete button • Double tap – used to zoom • Pinch – used to zoom in or out • Touch and hold – used to edit
  20. 20. Human Interface Principles• Aesthetic Integrity – does the design fit the task? A Utility vs. A Game• Consistency • Does the app use system-provided controls, views, and icons correctly • Is the app consistent with itself from screen to screen and version to version• Feedback acknowledges peoples actions and assures them that processing is occuring eg. UIActivityIndicator
  21. 21. • Metaphors help users grasp how to use an app – onscreen objects can be physically interacted with. Examples: • Tapping Music playback controls • Sliding On/Off switches • Flicking through pages of photos • Spinning Picker Wheels • Selecting Alphabetical tabs like in a phonebook
  22. 22. Great Artwork
  23. 23. Great Artwork
  24. 24. Great Artwork
  25. 25. A Well Thought Out Plan
  26. 26. A Well Thought out Plan• Create An Application Defination Statement.• Tailor Customization to the Task• Prototype and Iterate
  27. 27. Application Defination Statement• Write a concise declaration of the app’s main purpose and it intended audience.• List all the features you think users might like. Brainstorm.• Determine who your users are and what would be most important to them. Filter the list by them.
  28. 28. Tailor Customization to the task• Balance UI customizations with clarity of purpose – Form follows function or does function follow form?• Consider how users will perform the function that you are customizing.• Ideally, UI customization facilitates the task people want to perform.• Avoid increasing the users cognative burden.
  29. 29. Prototype and Iterate• Create wireframes and mock ups to review with peers. Start with paper and walk colleagues through your UX / UI.• Create a fleshed-out prototype on a device.• Genexus can help with a rapid prototype development process.
  30. 30. Thank you Marc Cainmarc.cain@bolderimage.com #BolderImage

×