1. UX / UI
The 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
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
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
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
28. A Well Thought out Plan
• Create An Application Defination
Statement.
• Tailor Customization to the Task
• Prototype and Iterate
29. 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.
30. 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.
31. 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.
32. Thank you
Marc Cain
marc.cain@bolderimage.com
#BolderImage
