Your SlideShare is downloading. ×
0
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Ux ui presentation2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ux ui presentation2

497

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
497
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UX / UIThe User Experience Marc Cain marc.cain@bolderimage.com #BolderImage
  • 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. UX / UI Makes the Difference
  • 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. Engage the User with Great UX/UI
  • 6. Engage the User with Great UX/UI
  • 7. Engage the User with Great UX/UI
  • 8. Engage the User with Great UX/UI
  • 9. Engage the User with Great UX/UI
  • 10. Engage the User with Great UX/UI
  • 11. Engage the User with Great UX/UI
  • 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. 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. Embrace the PlatformAnd the Human Interface Principles
  • 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. 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. • 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. 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. 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. 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. • 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. Great Artwork
  • 23. Great Artwork
  • 24. Great Artwork
  • 25. A Well Thought Out Plan
  • 26. A Well Thought out Plan• Create An Application Defination Statement.• Tailor Customization to the Task• Prototype and Iterate
  • 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. 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. 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. Thank you Marc Cainmarc.cain@bolderimage.com #BolderImage

×