ux ui presentation2

Download Ux ui presentation2

Post on 18-May-2015




1 download

Embed Size (px)


  • 1. UX / UIThe User ExperienceMarc Cainmarc.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 enagethe user you need a great UX /UI Off Shore Can miss the Boat Apple has Perfected the Concept of UserExperience and User Interface Follow their Guidelines in the HIG http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.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 fortechnical development but also havechallenges. Cultural and life experiences effect UX /UI development. 13. Apple is the Leader in UX / UI Apple builds their products from a UserExperience standpoint Apple micro-manages every small detaileg. 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 thecharacteristics of the platform andprovides a UX that integrates with thedevice they are running on. iOS and Android offer different UX. An App is not a web site. Great UX follows HI design principlesbased on the way people think and work. 16. Characteristic of the Platform The display of the device is key not justfor viewing but you physically interactwith the multi-touch screen. Consider the size of the items that aretappable. The quality of the artwork is verynoticable. The screen orientation can change andso should the content. 17. Onscreen user help is minimal the appshould be intuitive enough that helppages are minimal. Most apps have a single window Viewsthat scroll are seen as one viewregardless of length and the dataattached to each entry as a separateview eg. the user contacts. 18. iOS and Android are Different The characters of the UX on iOS andAndroid differ. Android provides a back button and appsshould be designed around that. Navigation bars and tool bars differbetween Android and iOS. 19. An App Is Not a Web Site You interact with an app differenlty than aweb 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 fitthe 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 screento screen and version to version Feedback acknowledges peoplesactions and assures them thatprocessing is occuring eg. UIActivityIndicator 21. Metaphors help users grasp how to usean app onscreen objects can bephysically interacted with. Examples: Tapping Music playback controls Sliding On/Off switches Flicking through pages of photos Spinning Picker Wheels Selecting Alphabetical tabs like in aphonebook 22. Great Artwork 23. Great Artwork 24. Great Artwork 25. A Well Thought Out Plan 26. A Well Thought out Plan Create An Application DefinationStatement. Tailor Customization to the Task Prototype and Iterate 27. Application Defination Statement Write a concise declaration of the appsmain purpose and it intended audience. List all the features you think users mightlike. Brainstorm. Determine who your users are and whatwould be most important to them. Filterthe list by them. 28. Tailor Customization to the task Balance UI customizations with clarity ofpurpose Form follows function or doesfunction follow form? Consider how users will perform thefunction that you are customizing. Ideally, UI customization facilitates thetask people want to perform. Avoid increasing the users cognativeburden. 29. Prototype and Iterate Create wireframes and mock ups toreview with peers. Start with paper andwalk colleagues through your UX / UI. Create a fleshed-out prototype on adevice. Genexus can help with a rapid prototypedevelopment process. 30. Thank you Marc Cainmarc.cain@bolderimage.com #BolderImage