SlideShare una empresa de Scribd logo
1 de 26
Design & UsabilityPrinciples Mobile. Design. Create. Namics. C. Medvesek 10-2010
EnhanceInteractivity “The best iPadapplicationsgivepeople innovative ways to interactwithcontentwhiletheyperform a clearlydefined, finite task. Resistthetemptation to fillthe large screenwithfeaturesthatarenotdirectlyrelated to themaintask.”  iPad Human Interface Guidelines p.19 10-2010 Mobile. Create. Basics.
Mobile. Create. Basics. Workshop. DE. 29.10.2010
Stayconsistent “Themoreusers’ expectationsprove right, themorethey will feel in control of thesystem and themorethey will like it.”  Ten UsabilityHeuristicsby Jakob Nielsen Mobile. Create. Basics. 10-2010
Simplicityispowerful Simplicityfuelsmanyelements of good design, includingease of use, speed, visualappeal, and accessibility. Butsimplicitystartswiththedesign of a product‘s fundamental functions.  Googleyuserexperience Mobile. Create. Basics. 10-2010
Makeitself-explanatory Good designmakes a productunderstandable. Itclarifiestheproduct’sstructure. Better still, itcanmaketheproducttalk. At best, itisself-explanatory. Dieter Rams: ten principlesfor good design. Mobile. Create. Basics. 10-2010
Payattention to patterns Users spend themajority of their time on interfacesotherthanyourown. Thereis no need to reinventthewheel. Thoseinterfacesmaysolvesome of thesameproblemsthatusersperceivewithintheoneyouarecreating. Byusingfamiliar UI patterns, you will helpyourusersfeel at home. Think Vitamin – 10 User Interface Guidelines Mobile. Create. Basics. 10-2010
«Users shouldnothave to wonderwhether different words, situations, oractionsmeanthesamething. Followplatformconventions.» Jacob Nielsen copyright
Delight People “Delight People withStunning Graphics – One way to increasetheperceivedvalue of yourapplicationis to replicatethelook of high- qualityorpreciousmaterials. For example, iftheeffect of wood, leather, or metal isappropriate in yourapplication, takethe time to makesurethe material looksrealistic and valuable.”  iPad Human Interface Guidelines p.24 Mobile. Create. Basics. 10-2010
“A graphically rich look at a wide variety of trips.”
- New York Times
Books oder Lonley Planet
“Wonderful. Grab it now.” 
- Gizmodo
Provide Feedback “Thesystemshouldalwayskeepusersinformedaboutwhatisgoing on, throughappropriatefeedbackwithinreasonable time.”  Ten UsabilityHeuristicsby Jakob Nielsen Mobile. Create. Basics. 10-2010
Allowmistakes Your UI shouldallowfor and tolerateusererror. Design waysforusers to undoactions, and beforgivingwithvariedinputs.  Think Vitamin – 10 User Interface Guidelines Mobile. Create. Basics. 10-2010
Every detail counts Good designisthorough, down to the last detail. Nothingmustbearbitraryorleft to chance. Care and accuracy in thedesignprocessshowrespecttowardstheconsumer. Dieter Rams: ten principlesfor good design. Mobile. Create. Basics. 10-2010
Design. Usability. Prinzipien. iPad User Experience Guidelines (Apple) http://www.lukew.com/ff/entry.asp?995 10 User Interface Design Fundamentals (Think Vitamin) http://thinkvitamin.com/design/10-user-interface-design-fundamentals/ 10 Heuristicsfor User Interface Design (Jakob Nielsen) http://www.useit.com/papers/heuristic/heuristic_list.html TheGoogley User Experience Principles (Google) http://www.google.com/corporate/ux.html Ten Principles of Good Design (Dieter Rams) http://www.vitsoe.com/en/re/about/dieterrams/gooddesign Design PrinciplesGlossary http://www.usabilityfirst.com/glossary/design-principles/ Quellen 10-2010 Mobile. Create. Basics.
claus.medvesek@namics.com© Namics Mobile. Create. Basics. 10-2010

Más contenido relacionado

La actualidad más candente

User interface design for the Web Engineering Psychology
User interface design for the Web Engineering PsychologyUser interface design for the Web Engineering Psychology
User interface design for the Web Engineering PsychologyLawrenceNajjar
 
Usability Heuristics
Usability HeuristicsUsability Heuristics
Usability HeuristicsOvidiu Von M
 
6 Rules of User Interface Design
6 Rules of User Interface Design6 Rules of User Interface Design
6 Rules of User Interface DesignDeepak Sahni
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User ExperienceGrant Robinson
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft WordAbdullah Shiam
 
Design Principles
Design PrinciplesDesign Principles
Design PrinciplesDavid Gelb
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentationjsokohl
 
UX Coaching - helping developers become better generalists
UX Coaching - helping developers become better generalistsUX Coaching - helping developers become better generalists
UX Coaching - helping developers become better generalistsChris Nodder
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction DesignGraeme Smith
 
Interaction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignInteraction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignDave Malouf
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityMarc Miquel
 

La actualidad más candente (20)

User interface design for the Web Engineering Psychology
User interface design for the Web Engineering PsychologyUser interface design for the Web Engineering Psychology
User interface design for the Web Engineering Psychology
 
Usability Heuristics
Usability HeuristicsUsability Heuristics
Usability Heuristics
 
6 Rules of User Interface Design
6 Rules of User Interface Design6 Rules of User Interface Design
6 Rules of User Interface Design
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User Experience
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft Word
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Ui design
Ui designUi design
Ui design
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
 
Ux
Ux Ux
Ux
 
UX Coaching - helping developers become better generalists
UX Coaching - helping developers become better generalistsUX Coaching - helping developers become better generalists
UX Coaching - helping developers become better generalists
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Interaction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignInteraction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction Design
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
 

Similar a Mobile Design & Usability Principles

Interaction Design Guest Lecture - UVA CS 3240
Interaction Design Guest Lecture - UVA CS 3240Interaction Design Guest Lecture - UVA CS 3240
Interaction Design Guest Lecture - UVA CS 3240Colin Butler
 
The Internet of Things: Designing for a new dimension in user experience
The Internet of Things: Designing for a new dimension in user experienceThe Internet of Things: Designing for a new dimension in user experience
The Internet of Things: Designing for a new dimension in user experienceMegan Ellis
 
Multi-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentMulti-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentJazmi Jamal
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?DariaPersell
 
Ipad seminar 20110608
Ipad seminar 20110608Ipad seminar 20110608
Ipad seminar 20110608Exove
 
What I've Learned about UX Design
What I've Learned about UX DesignWhat I've Learned about UX Design
What I've Learned about UX DesignAli Rushdan Tariq
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivityjylee6977
 
Mobile App Design @ ITU 2012
Mobile App Design @ ITU 2012Mobile App Design @ ITU 2012
Mobile App Design @ ITU 2012Henrik Hedegaard
 
Adaptive design: what is it and why should I be using it?
Adaptive design: what is it and why should I be using it?Adaptive design: what is it and why should I be using it?
Adaptive design: what is it and why should I be using it?Muhamad Izwan
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicitymStoner, Inc.
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesDoug Gapinski
 
Remixing Mobile User Experience
Remixing Mobile User ExperienceRemixing Mobile User Experience
Remixing Mobile User ExperienceJason Mesut
 
Digital Publishing: What to take away
Digital Publishing: What to take awayDigital Publishing: What to take away
Digital Publishing: What to take awayJohannes Henseler
 
The artificiality of natural user interfaces alessio malizia
The artificiality of natural user interfaces   alessio maliziaThe artificiality of natural user interfaces   alessio malizia
The artificiality of natural user interfaces alessio maliziaMarco Ajovalasit
 

Similar a Mobile Design & Usability Principles (20)

Interaction Design Guest Lecture - UVA CS 3240
Interaction Design Guest Lecture - UVA CS 3240Interaction Design Guest Lecture - UVA CS 3240
Interaction Design Guest Lecture - UVA CS 3240
 
The Internet of Things: Designing for a new dimension in user experience
The Internet of Things: Designing for a new dimension in user experienceThe Internet of Things: Designing for a new dimension in user experience
The Internet of Things: Designing for a new dimension in user experience
 
Multi-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and developmentMulti-Touch Tangible Interface; HCI trends, projects, and development
Multi-Touch Tangible Interface; HCI trends, projects, and development
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?
 
Ipad seminar 20110608
Ipad seminar 20110608Ipad seminar 20110608
Ipad seminar 20110608
 
User Experience
User ExperienceUser Experience
User Experience
 
Roi of ux-brazil
Roi of ux-brazilRoi of ux-brazil
Roi of ux-brazil
 
What I've Learned about UX Design
What I've Learned about UX DesignWhat I've Learned about UX Design
What I've Learned about UX Design
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivity
 
Mobile App Design @ ITU 2012
Mobile App Design @ ITU 2012Mobile App Design @ ITU 2012
Mobile App Design @ ITU 2012
 
Adaptive design: what is it and why should I be using it?
Adaptive design: what is it and why should I be using it?Adaptive design: what is it and why should I be using it?
Adaptive design: what is it and why should I be using it?
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Remixing Mobile User Experience
Remixing Mobile User ExperienceRemixing Mobile User Experience
Remixing Mobile User Experience
 
Digital Publishing: What to take away
Digital Publishing: What to take awayDigital Publishing: What to take away
Digital Publishing: What to take away
 
Summ11 useinterx
Summ11 useinterxSumm11 useinterx
Summ11 useinterx
 
IXDA_2009
IXDA_2009IXDA_2009
IXDA_2009
 
The artificiality of natural user interfaces alessio malizia
The artificiality of natural user interfaces   alessio maliziaThe artificiality of natural user interfaces   alessio malizia
The artificiality of natural user interfaces alessio malizia
 

Mobile Design & Usability Principles

  • 1. Design & UsabilityPrinciples Mobile. Design. Create. Namics. C. Medvesek 10-2010
  • 2. EnhanceInteractivity “The best iPadapplicationsgivepeople innovative ways to interactwithcontentwhiletheyperform a clearlydefined, finite task. Resistthetemptation to fillthe large screenwithfeaturesthatarenotdirectlyrelated to themaintask.” iPad Human Interface Guidelines p.19 10-2010 Mobile. Create. Basics.
  • 3. Mobile. Create. Basics. Workshop. DE. 29.10.2010
  • 4. Stayconsistent “Themoreusers’ expectationsprove right, themorethey will feel in control of thesystem and themorethey will like it.” Ten UsabilityHeuristicsby Jakob Nielsen Mobile. Create. Basics. 10-2010
  • 5.
  • 6. Simplicityispowerful Simplicityfuelsmanyelements of good design, includingease of use, speed, visualappeal, and accessibility. Butsimplicitystartswiththedesign of a product‘s fundamental functions. Googleyuserexperience Mobile. Create. Basics. 10-2010
  • 7.
  • 8.
  • 9. Makeitself-explanatory Good designmakes a productunderstandable. Itclarifiestheproduct’sstructure. Better still, itcanmaketheproducttalk. At best, itisself-explanatory. Dieter Rams: ten principlesfor good design. Mobile. Create. Basics. 10-2010
  • 10.
  • 11.
  • 12. Payattention to patterns Users spend themajority of their time on interfacesotherthanyourown. Thereis no need to reinventthewheel. Thoseinterfacesmaysolvesome of thesameproblemsthatusersperceivewithintheoneyouarecreating. Byusingfamiliar UI patterns, you will helpyourusersfeel at home. Think Vitamin – 10 User Interface Guidelines Mobile. Create. Basics. 10-2010
  • 13.
  • 14. «Users shouldnothave to wonderwhether different words, situations, oractionsmeanthesamething. Followplatformconventions.» Jacob Nielsen copyright
  • 15. Delight People “Delight People withStunning Graphics – One way to increasetheperceivedvalue of yourapplicationis to replicatethelook of high- qualityorpreciousmaterials. For example, iftheeffect of wood, leather, or metal isappropriate in yourapplication, takethe time to makesurethe material looksrealistic and valuable.” iPad Human Interface Guidelines p.24 Mobile. Create. Basics. 10-2010
  • 16. “A graphically rich look at a wide variety of trips.”
- New York Times
  • 18. “Wonderful. Grab it now.” 
- Gizmodo
  • 19. Provide Feedback “Thesystemshouldalwayskeepusersinformedaboutwhatisgoing on, throughappropriatefeedbackwithinreasonable time.” Ten UsabilityHeuristicsby Jakob Nielsen Mobile. Create. Basics. 10-2010
  • 20.
  • 21. Allowmistakes Your UI shouldallowfor and tolerateusererror. Design waysforusers to undoactions, and beforgivingwithvariedinputs. Think Vitamin – 10 User Interface Guidelines Mobile. Create. Basics. 10-2010
  • 22.
  • 23. Every detail counts Good designisthorough, down to the last detail. Nothingmustbearbitraryorleft to chance. Care and accuracy in thedesignprocessshowrespecttowardstheconsumer. Dieter Rams: ten principlesfor good design. Mobile. Create. Basics. 10-2010
  • 24.
  • 25. Design. Usability. Prinzipien. iPad User Experience Guidelines (Apple) http://www.lukew.com/ff/entry.asp?995 10 User Interface Design Fundamentals (Think Vitamin) http://thinkvitamin.com/design/10-user-interface-design-fundamentals/ 10 Heuristicsfor User Interface Design (Jakob Nielsen) http://www.useit.com/papers/heuristic/heuristic_list.html TheGoogley User Experience Principles (Google) http://www.google.com/corporate/ux.html Ten Principles of Good Design (Dieter Rams) http://www.vitsoe.com/en/re/about/dieterrams/gooddesign Design PrinciplesGlossary http://www.usabilityfirst.com/glossary/design-principles/ Quellen 10-2010 Mobile. Create. Basics.

Notas del editor

  1. UI ofAmpliTubeiPad App