• Save
Mobile UI Design – User Centered Design and UI Best Practices
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile UI Design – User Centered Design and UI Best Practices

on

  • 65,048 views

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.

Statistics

Views

Total Views
65,048
Views on SlideShare
61,181
Embed Views
3,867

Actions

Likes
237
Downloads
0
Comments
14

66 Embeds 3,867

http://iwanbinanto.com 860
http://blog.dreamcss.com 567
http://www.6w2h.org 523
http://iggymoodle.dreamhosters.com 312
http://www.openroad.ca 297
http://www.somethingdigital.com 246
http://www.slideshare.net 201
http://mylearn.hct.ac.ae 181
http://thanh.tv 126
http://amobileui.tumblr.com 93
http://mariawebsitedesign.blogspot.co.uk 72
http://rblack-design.tumblr.com 43
http://6w2h.blogspot.com 32
http://www.prometod.eu 32
https://tasks.crowdflower.com 29
http://moodle.waketech.edu 26
http://translate.googleusercontent.com 24
http://6w2h.blogspot.in 23
http://6w2h.blogspot.com.br 16
http://mariawebsitedesign.blogspot.com 14
http://ucddesign.blogspot.com 13
http://nearmyth.com 11
http://kedaiteh.collected.info 10
http://steveyuen.org 8
http://www.pinterest.com 8
http://6w2h.blogspot.sg 8
http://pinterest.com 7
http://nowlab.isobarkorea.co.kr 6
url_unknown 6
http://5806534163755501281_fc2bcbba8f5f87f65c688c3ff4f8a252aab6c8ad.blogspot.com 5
http://iaabkj210.wordpress.com 5
http://6w2h.blogspot.mx 5
http://www.techgig.com 4
http://core.traackr.com 4
http://paper.li 3
http://127.0.0.1 3
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 3
http://mobilenthu.tumblr.com 3
http://zhang.collected.info 3
http://nowlab.isobar.co.kr 2
http://storify.com 2
http://www.plurk.com 2
http://6w2h.blogspot.jp 2
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 2
http://6w2h.blogspot.ie 2
https://twitter.com 2
http://us-w1.rockmelt.com 2
http://localhost 1
http://mariawebsitedesign.blogspot.de 1
http://ucddesign.blogspot.kr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 14 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile UI Design – User Centered Design and UI Best Practices Presentation Transcript

  • 1. Introduction to Mobile User Interface Design
    Selma Zafar
    OpenRoad Communications
    selma@openroad.ca
  • 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:
    Nokia
    Microsoft
    YVR
    Mountain Equipment Co-op
    Ronald McDonald House Charities
    Telus
    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
    Surveys
    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:
    Environment
    Time
    Device
    Culture
  • 14. Interaction Design Principles
  • 15. Interaction Design Principles
    Learnability
    Efficiency
    Memorability
    Error Recovery
    Simplicity
    Mapping
    Visibility
    Feedback
    Consistency
    Satisfaction
  • 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
    http://www.flickr.com/photos/jamescridland/346988504/
  • 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
    http://www.flickr.com/photos/adunne/286285676/
    http://www.flickr.com/photos/cmbellman/2349786756/
    http://www.flickr.com/photos/hamster95/2178602835/
    http://www.flickr.com/photos/torquil/3609784146/
  • 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
    http://www.giantant.com/publications/mobile_context_model.pdf
  • 34. Mobile UI Standards
    Apple iPhone
    http://tuvix.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
    Nokia
    http://www.forum.nokia.com/Tools_Docs_and_Code/Documentation/Usability/UI_Style_and_Visual_Guidelines.xhtml
  • 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
    Benefits
    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)