mobile user experience - @irajlal

24
Rajesh Lal Senior UI/UX Engineer On designing Mobile User Interfaces

Upload: raj-lal

Post on 16-Apr-2017

4.922 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Mobile User Experience - @iRajLal

Rajesh LalSenior UI/UX Engineer

On designing Mobile User Interfaces

Page 2: Mobile User Experience - @iRajLal

Mobile Device

Fundamentals User Experience User Interface Design Web Usability

User Experience for Mobile Device Best Practices 6 Lessons from iPhone

Page 3: Mobile User Experience - @iRajLal

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

Page 4: Mobile User Experience - @iRajLal

User Interface Design

Process of designing the interaction between User & Product

Interact UI Design Process

Identify the users

Ask the users Design accordingly

Page 5: Mobile User Experience - @iRajLal

Web UsabilityFirst Principle: Make it Easy for the Average user

Easy to Look at Easy to Understand Easy to Use

Website User Psychology

Page 6: Mobile User Experience - @iRajLal

- Barbara Ballard

Mobile Device User Experience

“Fundamentally, ‘mobile’ refers to the user, and not the device”

Page 7: Mobile User Experience - @iRajLal

Mobile Device Best Practices

Page 8: Mobile User Experience - @iRajLal

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

Page 9: Mobile User Experience - @iRajLal

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

Page 10: Mobile User Experience - @iRajLal

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

Page 11: Mobile User Experience - @iRajLal

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

Page 12: Mobile User Experience - @iRajLal

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

Page 13: Mobile User Experience - @iRajLal

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

Page 14: Mobile User Experience - @iRajLal

6 Lessons from IPhone

IPhone User Interface

“Designed for the Device”

Page 15: Mobile User Experience - @iRajLal

Question for You

What is the unique selling point of IPhone ?

Page 16: Mobile User Experience - @iRajLal

Consistent Interaction Favor Better User Experience to

Features Make Applications reachable Big Buttons Symmetry Absence of abruptness

6 Lessons from IPhone

Page 17: Mobile User Experience - @iRajLal

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

Page 18: Mobile User Experience - @iRajLal

Lessons 1: Common controls and Consistency

Page 19: Mobile User Experience - @iRajLal

Lessons 2 Keeping better ‘experience’

Ahead of more Feature (4 main apps) – Phone– Mail– Browser– Music

Page 20: Mobile User Experience - @iRajLal

Lessons 3 Every thing reachable in 3-4 taps

– Application– Choice

– Action

Page 21: Mobile User Experience - @iRajLal

Lessons 4 Big buttons For thumb / finger Interaction

Page 22: Mobile User Experience - @iRajLal

Lessons 5 Symmetry Give perfect interaction for both hands

Page 23: Mobile User Experience - @iRajLal

Lessons 6 Absence of abruptness – Fluidity

Page 24: Mobile User Experience - @iRajLal

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]