Your SlideShare is downloading. ×
Mobile UI Design – User Centered Design and UI Best Practices
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 UI Design – User Centered Design and UI Best Practices


Published on

Overview on user-centered design, Interaction design best practices and design principles for mobile user interface design.

Overview on user-centered design, Interaction design best practices and design principles for mobile user interface design.

Published in: Technology, Business
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Introduction to Mobile User Interface Design
    Selma Zafar
    OpenRoad Communications
  • 2. About me
    Senior User Experience Designer, OpenRoad Communications
    Instructor: Human Factors and Information Design Classes
    Langara College – CID Program
    My background:
    Degree in Human Kinetics from University of Windsor
    Specializing in Movement Science (Human Factors & Cog Sci)
    Have worked with:
    Mountain Equipment Co-op
    Ronald McDonald House Charities
    Ontario Power Generation
  • 3. Topics Covered
    Introduction User Centered Design principles
    Interaction Design Principles
    Design Guidelines
    Usability testing
  • 4. User Centered Design
  • 5. User Requirements Analysis
    Decide on product goals
    Determine the user needs
    Conduct one of many usability evaluations:
    Heuristic evaluation
    Competitive analysis
    User interviews and surveys
  • 6. Conceptual Design, Prototypes, and Evaluation
    Sketch out a high-level product design
    Rapidly create visual representations (mockups) or interactive representations (prototypes) of the product.
    Evaluate usability through:
    Heuristic evaluation
    Focus groups
    Usability Testing
    Iterate design with evaluation results
  • 7. Design and Implementation
    • Revise user interface based on concept evaluation
    • 8. Apply style and look and feel to design
    • 9. Create the user interface using standards-compliant code
    • 10. Design for accessibility
  • Usability Evaluation
    Conduct usability evaluation on the final design
    Work with the design and development team to improve the product based on evaluation results
    Repeat this process (production iteration) until the organizational/business
    goals are met
  • 11. Launch and Maintenance
    Document everything
    Continue to collect feedback from users/customers to improve the product in future releases
    Focus Groups
  • 12. You have an idea! Now what?
    Two toughest questions:
    Who are you designing for?
    What do you want them to do?
  • 13. Understanding the Contexts of Use
    Think of the whole experience:
  • 14. Interaction Design Principles
  • 15. Interaction Design Principles
    Error Recovery
  • 16. Learnability
    An interface should be easy to use from the first time the user interacts with it.
    Amount of functionality presented to the user should be limited to exactly what the user requires to get to their goal
  • 17. Efficiency
    Number of steps it takes for a user to complete a task
    Key tasks should be made as efficient as possible
  • 18. Memorability
    Interface should be easier to use each time the user interacts with it.
    Frequency of use is the key factor in memorability
  • 19. Error Recovery
    In a perfect user interface, users should never be allowed to make a mistake
  • 20. Simplicity
    Usual tasks should be easy and less common tasks should be possible.
    Avoid unnecessary functionality and keep the visual design and layout uncluttered
  • 21. Mapping
    What the user expects to happen when they interact with the interface is exactly what should happen
  • 22. Visibility
    Important information should be the most visible and less important information should be less visible
    Understanding the users goals is critical
  • 23. Feedback
    User should always be in control of the interface and not the other way around
  • 24. Consistency
    Like-items should always be displayed and act the same way across the entire application (and even between applications).
    UI standards
  • 25. Satisfaction
    How much the user enjoys or dislikes using the software
  • 26. Design Guidelines
  • 27. 1. Design for Simplicity
    Relate visual precedence to task importance
    Reduce functionality
    Keep navigation narrow and shallow
    Avoid extraneous information on each screen
    Reduce or remove preferences
    Use Progressive Disclosure
  • 28. 2. Design with Small Screen in Mind
    Minimize user input
    Minimize vertical scrolling and avoid horizontal scrolling
    Use hyperlinking effectively
    Provide Useful Error Messages
    Prioritize the information on each screen
  • 29. 3. Provide Useful Feedback
    Identify critical feedback
    Employ alternative feedback modalities intelligently
    Ensure quick system response time
  • 30. 4. Maintain Existing Design Standards
    Use Existing Standards
    Use Real World Metaphors
  • 31. 5. Respect both the physical and mental effort
    Use wizards to simplify complex interactions
    Design for efficiency
  • 32. Meeting Universal Design Challenges
    Device Usability
    Discoverability of application
    Annoyances imposed on others
    Part of a larger system (that has higher priority functions)
  • 33. Context of Use
  • 34. Mobile UI Standards
    Apple iPhone
  • 35. Usability Testing
  • 36. Heuristic Evaluation
    Systematic evaluation of an interface against a standard set of usability rules (heuristics)
    Completed by one or more usability professionals
    Findings are given a severity ranking and recommendations
  • 37. Interface Design Heuristics
    Visibility of system status
    Match between system and the real world
    User control and freedom
    Consistency and standards
    Error prevention
    Recognition rather than recall
    Flexibility and efficiency of use
    Aesthetic and minimalist design
    Help users recognize, diagnose, and recover from errors
    Help and documentation
  • 38. Usability Testing in a Lab
    Scenario Based testing
    Participants are recruited (7 – 9)
    Up to 1.5 hours per session
    Observe sessions to get first hand feedback
    Helps to vet design concepts with target users
  • 39.
  • 40. Tour of Wavefront Usability Lab
    14th floor
  • 41. References
    Masterton, C; Mauney, D "Small Screen Interfaces" in Beyond The GUI edited by Philip Kortum (Morgan Kaufmann, 2008).
    Mayhew, D. The Usability Engineering Lifecycle: A Practitioner's Handbook for User Interface Design (Morgan Kaufmann, 1999)