• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile UI Design – User Centered Design and UI Best Practices
 

Mobile UI Design – User Centered Design and UI Best Practices

on

  • 63,577 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
63,577
Views on SlideShare
59,790
Embed Views
3,787

Actions

Likes
232
Downloads
0
Comments
11

64 Embeds 3,787

http://iwanbinanto.com 805
http://blog.dreamcss.com 567
http://www.6w2h.org 522
http://iggymoodle.dreamhosters.com 312
http://www.openroad.ca 293
http://www.somethingdigital.com 246
http://www.slideshare.net 201
http://mylearn.hct.ac.ae 181
http://thanh.tv 126
http://amobileui.tumblr.com 89
http://mariawebsitedesign.blogspot.co.uk 72
http://rblack-design.tumblr.com 37
http://6w2h.blogspot.com 32
https://tasks.crowdflower.com 29
http://moodle.waketech.edu 26
http://www.prometod.eu 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://6w2h.blogspot.sg 8
http://www.pinterest.com 7
http://pinterest.com 7
http://nowlab.isobarkorea.co.kr 6
url_unknown 6
http://iaabkj210.wordpress.com 5
http://6w2h.blogspot.mx 5
http://5806534163755501281_fc2bcbba8f5f87f65c688c3ff4f8a252aab6c8ad.blogspot.com 5
http://core.traackr.com 4
http://www.techgig.com 4
http://127.0.0.1 3
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 3
http://paper.li 3
http://mobilenthu.tumblr.com 3
http://zhang.collected.info 3
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 2
http://storify.com 2
http://www.plurk.com 2
http://6w2h.blogspot.ie 2
http://6w2h.blogspot.jp 2
http://us-w1.rockmelt.com 2
http://nowlab.isobar.co.kr 2
http://mariawebsitedesign.blogspot.gr 1
http://6w2h.blogspot.com.au 1
http://ucddesign.blogspot.kr 1
http://mariawebsitedesign.blogspot.de 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

110 of 11 previous next Post a comment

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

110 of 11 previous next

Post Comment
Edit your comment

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

    • Introduction to Mobile User Interface Design
      Selma Zafar
      OpenRoad Communications
      selma@openroad.ca
    • 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
    • Topics Covered
      Introduction User Centered Design principles
      Interaction Design Principles
      Design Guidelines
      Usability testing
    • User Centered Design
    • 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
    • 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
    • Design and Implementation
      • Revise user interface based on concept evaluation
      • Apply style and look and feel to design
      • Create the user interface using standards-compliant code
      • 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
    • Launch and Maintenance
      Document everything
      Continue to collect feedback from users/customers to improve the product in future releases
      Surveys
      Focus Groups
    • You have an idea! Now what?
      Two toughest questions:
      Who are you designing for?
      What do you want them to do?
    • Understanding the Contexts of Use
      Think of the whole experience:
      Environment
      Time
      Device
      Culture
    • Interaction Design Principles
    • Interaction Design Principles
      Learnability
      Efficiency
      Memorability
      Error Recovery
      Simplicity
      Mapping
      Visibility
      Feedback
      Consistency
      Satisfaction
    • 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
    • Efficiency
      Number of steps it takes for a user to complete a task
      Key tasks should be made as efficient as possible
    • Memorability
      Interface should be easier to use each time the user interacts with it.
      Frequency of use is the key factor in memorability
    • Error Recovery
      In a perfect user interface, users should never be allowed to make a mistake
      http://www.flickr.com/photos/jamescridland/346988504/
    • Simplicity
      Usual tasks should be easy and less common tasks should be possible.
      Avoid unnecessary functionality and keep the visual design and layout uncluttered
    • Mapping
      What the user expects to happen when they interact with the interface is exactly what should happen
    • Visibility
      Important information should be the most visible and less important information should be less visible
      Understanding the users goals is critical
    • Feedback
      User should always be in control of the interface and not the other way around
    • Consistency
      Like-items should always be displayed and act the same way across the entire application (and even between applications).
      UI standards
    • 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/
    • Design Guidelines
    • 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
    • 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
    • 3. Provide Useful Feedback
      Identify critical feedback
      Employ alternative feedback modalities intelligently
      Ensure quick system response time
    • 4. Maintain Existing Design Standards
      Use Existing Standards
      Use Real World Metaphors
    • 5. Respect both the physical and mental effort
      Use wizards to simplify complex interactions
      Design for efficiency
    • Meeting Universal Design Challenges
      Device Usability
      Discoverability of application
      Annoyances imposed on others
      Part of a larger system (that has higher priority functions)
    • Context of Use
      http://www.giantant.com/publications/mobile_context_model.pdf
    • 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
    • Usability Testing
    • 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
    • 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
    • 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
    • Tour of Wavefront Usability Lab
      14th floor
    • 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)