mobile user experience - @irajlal
TRANSCRIPT
Rajesh LalSenior UI/UX Engineer
On designing Mobile User Interfaces
Mobile Device
Fundamentals User Experience User Interface Design Web Usability
User Experience for Mobile Device Best Practices 6 Lessons from iPhone
User Experience
The level of satisfaction an average user gets from a product
bad good
Context and Typical User define the User Experience, not design and functionality
User Interface Design
Process of designing the interaction between User & Product
Interact UI Design Process
Identify the users
Ask the users Design accordingly
Web UsabilityFirst Principle: Make it Easy for the Average user
Easy to Look at Easy to Understand Easy to Use
Website User Psychology
- Barbara Ballard
Mobile Device User Experience
“Fundamentally, ‘mobile’ refers to the user, and not the device”
Mobile Device Best Practices
Mobile Device Best PracticesDevelopment
Consistency– For multiple devices – Between applications
Wireframes– Different than desktop /web application
Capabilities– Exploit the capabilities of device– Choose Top 5 resolutions –
– Resolution 240 X 320 for WM 6– Resolution 480 x 800 for WM 7
Resources– Create reusable components– Create reusable assets
– Reuse images/ style sheets / status messages Testing
– Always Test on actual device
Mobile Device Best PracticesDesign
One page should display one Idea Content density
– Trade Off between functionality– Too Many links on a page / Following Too many
links Essentiality
– Limit user to content which is requested Spatial organization
– Organize– Use a Grid with no more than 2 columns/rows
OrganizeOrganize
Mobile Device Best PracticesDesign
Functional areas Notification / Content / Input
Visual flow– Align related objects
Typography Standard Size(For resolution = 240x320)
Menu – 10 to 12px Content –12 to 14px Header – 14 – 16px
Colors for Mobile device Consider Sun, screen contrast, reflex, brightness Use color for both style and function
(Red color = Stop)
Notification
Input
Content
Mobile Device Best PracticesInteraction
Likelihood to reach a Target– Directly proportional to the distance of the
target More Choice = More time for decisions
– Usage of functionality is directly proportional to the number of choices user have to make to get there
Categorize in 7 sets– Human mind is able to remember information in
chunks of 7 ± 2 Always provide feedback
– Acknowledgment for every action– Feed forward– Mobile device can be slow in performance so
immediate feedback is a must
Mobile Device Best PracticesInteraction
Consistent navigation Define dimensions (example)
– Left-right: Time– Up-down: Space
Focus on User Needs Remember User Preference Avoid Scrolling Rotating, Full Screen and Scaling
Mobile Device Best PracticesInput
Design for Multiple Modes– Finger Touch (includes Stylus)– Left Hand users– Soft Keys– Keyboards – Projected keyboards
Cross-Device Touch and Non-Touch Device
6 Lessons from IPhone
IPhone User Interface
“Designed for the Device”
Question for You
What is the unique selling point of IPhone ?
Consistent Interaction Favor Better User Experience to
Features Make Applications reachable Big Buttons Symmetry Absence of abruptness
6 Lessons from IPhone
Lessons 1 Consistency
IPhone have a small set of Interactions which uses common controls and is consistent among all the applications
– List View– Touch– Update buttons at the top BAR– Categories in the bottom
Lessons 1: Common controls and Consistency
Lessons 2 Keeping better ‘experience’
Ahead of more Feature (4 main apps) – Phone– Mail– Browser– Music
Lessons 3 Every thing reachable in 3-4 taps
– Application– Choice
– Action
Lessons 4 Big buttons For thumb / finger Interaction
Lessons 5 Symmetry Give perfect interaction for both hands
Lessons 6 Absence of abruptness – Fluidity
References– www.w3.org/tr/mobile-bp– Designing the Mobile User Experience - Barbara Ballard– Using Microsoft Silverlight for Creating Rich Mobile User
Experience - Giorgio Sardo
www.abcofdesign.comcontact: [email protected]