Ux ui presentation2

32
UX / UI The User Experience Marc Cain [email protected] #BolderImage

Transcript of Ux ui presentation2

Page 1: Ux ui presentation2

UX / UIThe User Experience

Marc [email protected]

#BolderImage

Page 2: Ux ui presentation2

What Makes A Great App?

The difference between an app and aGreat app is the UX / UI

Great Apps Embrace the Platform and the HumanInterface 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

Page 3: Ux ui presentation2

UX / UI Makes the Difference

Page 4: Ux ui presentation2

• 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/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

UX / UI Makes the Difference

Page 5: Ux ui presentation2

Engage the User with Great UX/UI

Page 6: Ux ui presentation2

Engage the User with Great UX/UI

Page 7: Ux ui presentation2

Engage the User with Great UX/UI

Page 8: Ux ui presentation2

Engage the User with Great UX/UI

Page 9: Ux ui presentation2

Engage the User with Great UX/UI

Page 10: Ux ui presentation2

Engage the User with Great UX/UI

Page 11: Ux ui presentation2

Engage the User with Great UX/UI

Page 12: Ux ui presentation2

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.

Page 13: Ux ui presentation2

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 resourcehttp://developer.apple.com/library/

ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Page 14: Ux ui presentation2

Embrace the PlatformAnd the Human Interface

Principles

Page 15: Ux ui presentation2

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.

Page 16: Ux ui presentation2

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.

Page 17: Ux ui presentation2

• 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.

Page 18: Ux ui presentation2

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.

Page 19: Ux ui presentation2

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

Page 20: Ux ui presentation2

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

Page 21: Ux ui presentation2

• 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

Page 22: Ux ui presentation2

Great Artwork

Page 23: Ux ui presentation2

Great Artwork

Page 24: Ux ui presentation2

Great Artwork

Page 25: Ux ui presentation2
Page 26: Ux ui presentation2
Page 27: Ux ui presentation2

A Well Thought Out Plan

Page 28: Ux ui presentation2

A Well Thought out Plan

• Create An Application Defination Statement.

• Tailor Customization to the Task

• Prototype and Iterate

Page 29: Ux ui presentation2

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.

Page 30: Ux ui presentation2

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.

Page 31: Ux ui presentation2

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.

Page 32: Ux ui presentation2

Thank you

Marc [email protected]

#BolderImage