SlideShare a Scribd company logo
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  ,[object Object]
Apply style and look and feel to design
Create the user interface using standards-compliant code
Design for accessibility,[object Object]
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

More Related Content

What's hot

UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Joan Lumanauw
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
Michał Aleksander
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
Emerentiana Meicy
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
Dignitas Digital Pvt. Ltd.
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
Sabaragamuwa University
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Ravi Bhadauria
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
Kamil Zieba
 
User centered Design
User centered DesignUser centered Design
User centered Design
Shalini Shingari
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
Shweta Joshi
 
User Centered Design 101
User Centered Design 101User Centered Design 101
User Centered Design 101
Experience Dynamics
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
Jasmine Phan
 
Ux & ui
Ux & uiUx & ui
Ux & ui
Fisher Liao
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
Madhuri Garg
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
Graeme Smith
 
Usable psychology for UX/UI Designers
Usable psychology for UX/UI DesignersUsable psychology for UX/UI Designers
Usable psychology for UX/UI Designers
Maor Shabbat
 
What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)
iFactory Digital
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual Hierarchy
Joan Lumanauw
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
 

What's hot (20)

UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
 
User centered Design
User centered DesignUser centered Design
User centered Design
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
User Centered Design 101
User Centered Design 101User Centered Design 101
User Centered Design 101
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
Usable psychology for UX/UI Designers
Usable psychology for UX/UI DesignersUsable psychology for UX/UI Designers
Usable psychology for UX/UI Designers
 
What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual Hierarchy
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 

Similar to Mobile UI Design – User Centered Design and UI Best Practices

Usability
UsabilityUsability
Usability
Roxy Pilly
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
Empatika
 
Universal usability engineering
Universal usability engineeringUniversal usability engineering
Universal usability engineering
Aswathi Shankar
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
Sameer Chavan
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
Preeti Chopra
 
Ijetr021224
Ijetr021224Ijetr021224
Ijetr021224
ER Publication.org
 
Ijetr021224
Ijetr021224Ijetr021224
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rules
Preeti Mishra
 
Standards Based Approach to User Interface Development
Standards Based Approach to User Interface DevelopmentStandards Based Approach to User Interface Development
Standards Based Approach to User Interface Development
Sameer Chavan
 
Sw User Interface Design Evaluation
Sw User Interface Design EvaluationSw User Interface Design Evaluation
Sw User Interface Design Evaluation
jonathan077070
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
Saqib Raza
 
Maintaining UI Standard in an Agile Team
Maintaining UI Standard in an Agile TeamMaintaining UI Standard in an Agile Team
Maintaining UI Standard in an Agile Team
Awalin Sopan
 
Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014
Gonçalo Veiga
 
Software engineering
Software engineeringSoftware engineering
Software engineering
Ishucs
 
Integrating User Centered Design with Agile Development
Integrating User Centered Design with Agile DevelopmentIntegrating User Centered Design with Agile Development
Integrating User Centered Design with Agile Development
Julia Borkenhagen
 
Usability methods to improve EMRs
Usability methods to improve EMRsUsability methods to improve EMRs
Usability methods to improve EMRs
Jeffery Belden
 
Optimizing Mobile UX Design Webinar Presentation Slides
Optimizing Mobile UX Design Webinar Presentation SlidesOptimizing Mobile UX Design Webinar Presentation Slides
Optimizing Mobile UX Design Webinar Presentation Slides
UserZoom
 
User Experience Design - Designing for others
User Experience Design - Designing for othersUser Experience Design - Designing for others
User Experience Design - Designing for others
BART RADKA
 
What I Learned In Pr Writing
What I Learned In Pr WritingWhat I Learned In Pr Writing
What I Learned In Pr Writing
cwhitin4
 

Similar to Mobile UI Design – User Centered Design and UI Best Practices (20)

Usability
UsabilityUsability
Usability
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
 
Universal usability engineering
Universal usability engineeringUniversal usability engineering
Universal usability engineering
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
Ijetr021224
Ijetr021224Ijetr021224
Ijetr021224
 
Ijetr021224
Ijetr021224Ijetr021224
Ijetr021224
 
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rules
 
Standards Based Approach to User Interface Development
Standards Based Approach to User Interface DevelopmentStandards Based Approach to User Interface Development
Standards Based Approach to User Interface Development
 
Sw User Interface Design Evaluation
Sw User Interface Design EvaluationSw User Interface Design Evaluation
Sw User Interface Design Evaluation
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
Maintaining UI Standard in an Agile Team
Maintaining UI Standard in an Agile TeamMaintaining UI Standard in an Agile Team
Maintaining UI Standard in an Agile Team
 
Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014
 
Software engineering
Software engineeringSoftware engineering
Software engineering
 
Integrating User Centered Design with Agile Development
Integrating User Centered Design with Agile DevelopmentIntegrating User Centered Design with Agile Development
Integrating User Centered Design with Agile Development
 
Usability methods to improve EMRs
Usability methods to improve EMRsUsability methods to improve EMRs
Usability methods to improve EMRs
 
Optimizing Mobile UX Design Webinar Presentation Slides
Optimizing Mobile UX Design Webinar Presentation SlidesOptimizing Mobile UX Design Webinar Presentation Slides
Optimizing Mobile UX Design Webinar Presentation Slides
 
User Experience Design - Designing for others
User Experience Design - Designing for othersUser Experience Design - Designing for others
User Experience Design - Designing for others
 
What I Learned In Pr Writing
What I Learned In Pr WritingWhat I Learned In Pr Writing
What I Learned In Pr Writing
 

Recently uploaded

Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 

Recently uploaded (20)

Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 

Mobile UI Design – User Centered Design and UI Best Practices

  • 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
  • 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.
  • 8. Apply style and look and feel to design
  • 9. Create the user interface using standards-compliant code
  • 10.
  • 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
  • 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/
  • 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
  • 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)