UX / UIThe User Experience Marc Cain firstname.lastname@example.org #BolderImage
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
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
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.
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
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 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.
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.
• 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.
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.
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
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
• 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
A Well Thought out Plan• Create An Application Defination Statement.• Tailor Customization to the Task• Prototype and Iterate
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.
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.
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.
Thank you Marc Cainmarc.email@example.com #BolderImage