Your SlideShare is downloading. ×
Mobile User Experience - @iRajLal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile User Experience - @iRajLal

4,428
views

Published on

Introduction to Mobile User Experience, the fourth part of the User Experience Series presentation. - Rajesh Lal

Introduction to Mobile User Experience, the fourth part of the User Experience Series presentation. - Rajesh Lal

Published in: Technology, Design

1 Comment
17 Likes
Statistics
Notes
  • Get my book on Mobile User Interface design guidelines and best practices here http://www.designuserinterface.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,428
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
251
Comments
1
Likes
17
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Rajesh Lal Senior UI/UX Engineer On designing Mobile User Interfaces
  • 2. Mobile Device
    • Fundamentals
      • User Experience
      • User Interface Design
      • Web Usability
    • User Experience for Mobile Device
    • Best Practices
    • 6 Lessons from iPhone
  • 3. 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
  • 4. User Interface Design
    • Process of designing the interaction between User & Product
        • Interact
        • UI Design Process
        • Identify the users
        • Ask the users
        • Design accordingly
  • 5. Web Usability
        • First Principle : Make it Easy for the Average user
      • Easy to Look at
      • Easy to Understand
      • Easy to Use
    Website User Psychology
  • 6. - Barbara Ballard Mobile Device User Experience “ Fundamentally, ‘mobile’ refers to the user, and not the device”
  • 7. Mobile Device Best Practices
  • 8. Mobile Device Best Practices
    • Development
      • 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
  • 9. Mobile Device Best Practices
    • Design
      • 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
    Organize
  • 10. Mobile Device Best Practices
    • Design
      • 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
  • 11. Mobile Device Best Practices
    • Interaction
      • 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
  • 12. Mobile Device Best Practices
    • Interaction
      • 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
  • 13. Mobile Device Best Practices
    • Input
      • Design for Multiple Modes
        • Finger Touch ( includes Stylus)
        • Left Hand users
        • Soft Keys
        • Keyboards
        • Projected keyboards
    • Cross-Device
      • Touch and Non-Touch Device
  • 14. 6 Lessons from IPhone
        • IPhone User Interface
        • “ Designed for the Device”
  • 15. Question for You
        • What is the unique selling point of IPhone ?
  • 16.
    • Consistent Interaction
    • Favor Better User Experience to Features
    • Make Applications reachable
    • Big Buttons
    • Symmetry
    • Absence of abruptness
    6 Lessons from IPhone
  • 17. 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
  • 18. Lessons 1: Common controls and Consistency
  • 19. Lessons 2
      • Keeping better ‘experience’
        • Ahead of more Feature (4 main apps)
      • Phone
      • Mail
      • Browser
      • Music
  • 20. Lessons 3
    • Every thing reachable in 3-4 taps
      • Application
        • Choice
          • Action
  • 21. Lessons 4
    • Big buttons
    • For thumb / finger Interaction
  • 22. Lessons 5
    • Symmetry
    • Give perfect interaction for both hands
  • 23. Lessons 6
    • Absence of abruptness – Fluidity
  • 24.
    • 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.com contact: [email_address]

×