SlideShare uma empresa Scribd logo
1 de 71
Jeff Patton [email_address] www.AgileProductDesign.com Please join a work group of 4-6 people – thanks. from Use   to User  Interface Collaboratively designing and testing user interface that help your users succeed Copyright is held by the author/owner(s). OOPSLA 2007, October 21–25, 2007, Montréal, Québec, Canada. ACM  07/0010. from Use   to User  Interface
© Alistair Cockburn 2005-6  PEOPLE Learn Skills in a 3-stage Progression: Follow / Break Away / Achieve Fluency Level 1:  following ( shu ) Learn “a technique that works” (Success = following the technique) Level 2:  breaking away (  ha ) Learn limits of the technique Learn to shift between techniques Level 3:  fluent ( ri ) Shift techniques at any moment Possibly unable to describe the shifts
We’ll be using a process miniature to explore and practice product design techniques ,[object Object],[object Object],[object Object],[object Object]
Section 1: Starting With Use ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
User Experience is Built From Dependent Layers ,[object Object]
The Surface Layer Describes Finished Visual Design Aspects Surface Skeleton Structure Scope Strategy
The Skeleton Describes Screen Layout and Functional Compartments in the Screen Surface Skeleton Structure Scope Strategy
Structure Defines Navigation from Place to Place in the User Interface task panes modal dialogs modal wizards Surface Skeleton Structure Scope Strategy
The Places in the User Interface are Built to Support User Tasks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Surface Skeleton Structure Scope Strategy
Business Goals Drive User Constituencies and Contexts Supported To Form Strategy ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Surface Skeleton Structure Scope Strategy
Garret’s Elements of Ux Stack Applies to the User Experience of Other Complex Products ,[object Object],[object Object]
Let’s Look At a Product We All Use:  The Place We Live ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Surface Skeleton Structure Scope Strategy
What might I do to reach my goals? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Surface Skeleton Structure Scope Strategy
Arranging tasks by affinity allows me to think about contexts that best support tasks.  Contexts in a home have common names we all know. Surface Skeleton Structure Scope Strategy
When designing a particular interaction context –  a kitchen for instance – I optimize layout and tool choices to support tasks I’ll do there. Surface Skeleton Structure Scope Strategy
I’m going to spend a lot of time here, I want my experience to be as pleasant as possible… Surface Skeleton Structure Scope Strategy
Understanding the relationship between goals, tasks, & tools is critical Software Product Goals Tasks Tools Features one or more users engaged in many tasks in support of a common high level goal is often referred to as  workpractice Surface Skeleton Structure Scope Strategy
Garrett’s model provides  helpful guidance for tool builders  Goals Tasks Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Surface Skeleton Structure Scope Strategy
Today we’ll place our focus on tool-building: the structure, skeleton, & surface  User Interface Prototyping Activities Surface Skeleton Structure Scope Strategy
Getting started with a UI design problem ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Barney’s
To design a tool, we first need to understand use – the preceding layer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Modeling Use ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
User Interface Designers Often Use “User Tasks” to Describe What People Do ,[object Object],[object Object],[object Object],[object Object],[object Object],activity task task task task task
Use Cockburn’s goal level to understand the abstraction level of a user task Start to think about user interface design at sea level or above. * from Cockburn’s Writing Effective Use Cases
A Agile User Story  Might   Model Use... It’s Easier to Design User Interface if it Does ,[object Object],[object Object],[object Object],[object Object],[achieve some  goal ] so that I can [perform some  task ] I want to [type of  user ] As a purchase it quickly, leave, and continue with my day. so that I can locate a specific CD in the store I want to harried shopper As a
User stories may describe user tasks  or the tool that supports them User Story Software Product Goals Tasks Tools More task-centric : More tool-centric : locate a specific CD in the store I want to harried shopper As a enter a CD title into the search box and initiate a search I want to harried shopper As a
Favor user task-centric stories to base UI design on ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Constantine & Lockwood’s Essential Use Case or “Task Case” is an easy way to begin to describe tool use ,[object Object],[object Object],[object Object],System response System response Step one Step two System Responsibility User Intention
Activity: Write an Essential Use Case ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Begin to envision a solution by writing a user scenario ,[object Object],[object Object],[object Object],[object Object],[object Object]
User scenario:  Field Manager enters daily shift performance reports  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Leveraging your task workflow model, write a user scenario for your focal user ,[object Object],[object Object],[object Object],[object Object],[object Object]
Identifying UI tools that allow the system to meet its responsibilities to its user as abstract UI components ,[object Object],[object Object],[object Object],Container : contains and presents information. Action : allows execution of an action. Actionable Container : contains and presents information and allows the information to be acted on through selection or manipulation.
Exercise: Identify the abstract components in your essential use case ,[object Object],[object Object],[object Object],Selectable List
Interaction Contexts Gather  Tools to Support Tasks ,[object Object],[object Object],[object Object],Starting Point:  give the user a clear starting point for starting a search for titles in the store. Search Return:  Evaluation: help the user decide if the searched for items were the items she was looking for or an easy way to reinitiate the search if not.  Also aid in the quick decision to buy any successfully found item.
Exercise: Build Up Interaction Contexts ,[object Object],[object Object],[object Object],[object Object],[object Object]
From  Use   to   User   Interface Jeff Patton [email_address] www.AgileProductDesign.com
Section 2: Designing &  Validating For Use ,[object Object],[object Object],[object Object],[object Object],[object Object]
Paper Prototyping Basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Paper Prototyping Kit Demonstration
Finished prototypes are pieced together from moveable and removable paper components
Exercise: Build Your Prototype ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Preparing to Testing Your Paper Prototype ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Run Your Usability Test ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Testing In Action
Exercise: Test Your Paper Prototype ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Exercise: Fix Issues ,[object Object],[object Object],[object Object]
Exercise: Re-test Your Prototype  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
This isn’t just the right way to test, it’s RITE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Unraveling Usability Concerns From Visual Design Concerns ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Layer in user interface concerns – like a layer cake ,[object Object],[object Object],[object Object],[object Object],[object Object],utility (does the software offer functionality to support my goals?) usability (can that functionality easily learned, and effectively used?) design esthetics (is the software fun, pleasant, exciting – what is my emotional response?) usefulness
Test First – Building Confidence into Software Development ,[object Object],[object Object],[object Object],[object Object]
William’s 4 Basic Design Principles Visual Design Basics Robin Williams’ The Non-Designer’s Design Book
Good Visual Design  Observes 4 Simple Principles ,[object Object],[object Object],[object Object],C R A P Contrast Repetition Alignment Proximity
Proximity ,[object Object],[object Object],[object Object]
Alignment ,[object Object],[object Object],[object Object],[object Object]
Repetition ,[object Object],[object Object],[object Object],[object Object]
Contrast ,[object Object],[object Object],[object Object]
 
 
 
 
 
From  Use   to   User Interface Jeff Patton [email_address] www.AgileProductDesign.com
User Experience Words ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
User Experience Words ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
User Experience Words ,[object Object],[object Object],[object Object],[object Object]
User Experience Words ,[object Object],[object Object],[object Object],[object Object],[object Object]
Usability Refers To The Ability of a User To Effectively Execute A Task Using a Tool ,[object Object],Don Norman’s The Design of Everyday Things
Nielsen’s 10 Usability Heuristics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Jakob Nielsen’s Usability Engineering
From  Use   to   User Interface Jeff Patton [email_address] www.AgileProductDesign.com

Mais conteúdo relacionado

Mais procurados

User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
koolkampus
 
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
David Little
 
UCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training EverywhereUCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training Everywhere
Timothy Adrian Lam
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
Empatika
 

Mais procurados (20)

Design Simple but Powerful application
Design Simple but Powerful applicationDesign Simple but Powerful application
Design Simple but Powerful application
 
Designing applications with web access capabilities
Designing applications with web access capabilitiesDesigning applications with web access capabilities
Designing applications with web access capabilities
 
Sketching - DoToday App
Sketching - DoToday AppSketching - DoToday App
Sketching - DoToday App
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
 
Insight into Application Design & Oracle Fusion
Insight into Application Design & Oracle Fusion Insight into Application Design & Oracle Fusion
Insight into Application Design & Oracle Fusion
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
WEB INTERFACE DESIGN
WEB INTERFACE DESIGNWEB INTERFACE DESIGN
WEB INTERFACE DESIGN
 
From Use case to User Story
From Use case to User StoryFrom Use case to User Story
From Use case to User Story
 
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rules
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile Applications
 
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
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
UCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training EverywhereUCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training Everywhere
 
Foundations understanding users and interactions
Foundations  understanding users and interactionsFoundations  understanding users and interactions
Foundations understanding users and interactions
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga Academy
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 

Destaque

Rational Unified Process for User Interface Design
Rational Unified Process for User Interface DesignRational Unified Process for User Interface Design
Rational Unified Process for User Interface Design
R A Akerkar
 

Destaque (14)

The ripple effect
The ripple effectThe ripple effect
The ripple effect
 
MBTA Customer Support Portal - User Interface & Design - Reccomendations & Su...
MBTA Customer Support Portal - User Interface & Design - Reccomendations & Su...MBTA Customer Support Portal - User Interface & Design - Reccomendations & Su...
MBTA Customer Support Portal - User Interface & Design - Reccomendations & Su...
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
User Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizUser Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 Galiz
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
 
User Interface Design in Practice
User Interface Design in PracticeUser Interface Design in Practice
User Interface Design in Practice
 
Rational Unified Process for User Interface Design
Rational Unified Process for User Interface DesignRational Unified Process for User Interface Design
Rational Unified Process for User Interface Design
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
AIME Proposition Environment (mockup - in progress)
AIME Proposition Environment (mockup - in progress)AIME Proposition Environment (mockup - in progress)
AIME Proposition Environment (mockup - in progress)
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
Human computer interaction
Human  computer interactionHuman  computer interaction
Human computer interaction
 
Affordances in Modern Web Design
Affordances in Modern Web DesignAffordances in Modern Web Design
Affordances in Modern Web Design
 
SlideShare 101
SlideShare 101SlideShare 101
SlideShare 101
 

Semelhante a From Use to User Interface

The Art and Science of Requirements Gathering
The Art and Science of Requirements GatheringThe Art and Science of Requirements Gathering
The Art and Science of Requirements Gathering
Vanessa Turke
 
Requirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial WebRequirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial Web
Michael Maclennan
 
CSCI-383 Lecture 5-6-7: Object-Oriented Design
CSCI-383 Lecture 5-6-7: Object-Oriented DesignCSCI-383 Lecture 5-6-7: Object-Oriented Design
CSCI-383 Lecture 5-6-7: Object-Oriented Design
JI Ruan
 
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
honey725342
 
Role of an Architect in Software Usability Engineering
Role of an Architect in Software Usability EngineeringRole of an Architect in Software Usability Engineering
Role of an Architect in Software Usability Engineering
thinakes
 

Semelhante a From Use to User Interface (20)

User Experience Distilled
User Experience DistilledUser Experience Distilled
User Experience Distilled
 
DIY Usability
DIY UsabilityDIY Usability
DIY Usability
 
The Art and Science of Requirements Gathering
The Art and Science of Requirements GatheringThe Art and Science of Requirements Gathering
The Art and Science of Requirements Gathering
 
UXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedUXBASIS – Getting UX integrated
UXBASIS – Getting UX integrated
 
UX (User Experience) Process, May 2017
UX (User Experience) Process, May 2017UX (User Experience) Process, May 2017
UX (User Experience) Process, May 2017
 
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
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
Requirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial WebRequirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial Web
 
Scrum introduc.ppt
Scrum introduc.pptScrum introduc.ppt
Scrum introduc.ppt
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
CSCI-383 Lecture 5-6-7: Object-Oriented Design
CSCI-383 Lecture 5-6-7: Object-Oriented DesignCSCI-383 Lecture 5-6-7: Object-Oriented Design
CSCI-383 Lecture 5-6-7: Object-Oriented Design
 
Chapter five HCI
Chapter five HCIChapter five HCI
Chapter five HCI
 
User Story Mapping (2008)
User Story Mapping (2008)User Story Mapping (2008)
User Story Mapping (2008)
 
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
1 PROGRAM ISEM RESEARCH PAPER FOR APPLIED.docx
 
Role of an Architect in Software Usability Engineering
Role of an Architect in Software Usability EngineeringRole of an Architect in Software Usability Engineering
Role of an Architect in Software Usability Engineering
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
Patton user modeling
Patton user modelingPatton user modeling
Patton user modeling
 
Art of Writing in Agile : STC Summit 2017
Art of Writing in Agile : STC Summit 2017Art of Writing in Agile : STC Summit 2017
Art of Writing in Agile : STC Summit 2017
 
Product Backlog Mapping
Product Backlog MappingProduct Backlog Mapping
Product Backlog Mapping
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Último (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 

From Use to User Interface

  • 1. Jeff Patton [email_address] www.AgileProductDesign.com Please join a work group of 4-6 people – thanks. from Use to User Interface Collaboratively designing and testing user interface that help your users succeed Copyright is held by the author/owner(s). OOPSLA 2007, October 21–25, 2007, Montréal, Québec, Canada. ACM 07/0010. from Use to User Interface
  • 2. © Alistair Cockburn 2005-6 PEOPLE Learn Skills in a 3-stage Progression: Follow / Break Away / Achieve Fluency Level 1: following ( shu ) Learn “a technique that works” (Success = following the technique) Level 2: breaking away ( ha ) Learn limits of the technique Learn to shift between techniques Level 3: fluent ( ri ) Shift techniques at any moment Possibly unable to describe the shifts
  • 3.
  • 4.
  • 5.
  • 6. The Surface Layer Describes Finished Visual Design Aspects Surface Skeleton Structure Scope Strategy
  • 7. The Skeleton Describes Screen Layout and Functional Compartments in the Screen Surface Skeleton Structure Scope Strategy
  • 8. Structure Defines Navigation from Place to Place in the User Interface task panes modal dialogs modal wizards Surface Skeleton Structure Scope Strategy
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. Arranging tasks by affinity allows me to think about contexts that best support tasks. Contexts in a home have common names we all know. Surface Skeleton Structure Scope Strategy
  • 15. When designing a particular interaction context – a kitchen for instance – I optimize layout and tool choices to support tasks I’ll do there. Surface Skeleton Structure Scope Strategy
  • 16. I’m going to spend a lot of time here, I want my experience to be as pleasant as possible… Surface Skeleton Structure Scope Strategy
  • 17. Understanding the relationship between goals, tasks, & tools is critical Software Product Goals Tasks Tools Features one or more users engaged in many tasks in support of a common high level goal is often referred to as workpractice Surface Skeleton Structure Scope Strategy
  • 18.
  • 19. Today we’ll place our focus on tool-building: the structure, skeleton, & surface User Interface Prototyping Activities Surface Skeleton Structure Scope Strategy
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. Use Cockburn’s goal level to understand the abstraction level of a user task Start to think about user interface design at sea level or above. * from Cockburn’s Writing Effective Use Cases
  • 25.
  • 26. User stories may describe user tasks or the tool that supports them User Story Software Product Goals Tasks Tools More task-centric : More tool-centric : locate a specific CD in the store I want to harried shopper As a enter a CD title into the search box and initiate a search I want to harried shopper As a
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37. From Use to User Interface Jeff Patton [email_address] www.AgileProductDesign.com
  • 38.
  • 39.
  • 40. Paper Prototyping Kit Demonstration
  • 41. Finished prototypes are pieced together from moveable and removable paper components
  • 42.
  • 43.
  • 44.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53. William’s 4 Basic Design Principles Visual Design Basics Robin Williams’ The Non-Designer’s Design Book
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.  
  • 60.  
  • 61.  
  • 62.  
  • 63.  
  • 64. From Use to User Interface Jeff Patton [email_address] www.AgileProductDesign.com
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71. From Use to User Interface Jeff Patton [email_address] www.AgileProductDesign.com