SlideShare uma empresa Scribd logo
1 de 55
Usability in Practice



       User Interface Design in Practice
           Justine Sanderson| Userfaction Ltd | 3 May 2007




                                                 © 2007 Justine Sanderson
Today

1. You are not the user
2. Design for the user model
3. Involve users – not just
   stakeholders
4. Prototype
5. Learn about good design principles
6. Know your Usability Heuristics
7. Read some books
8. Remember these axioms
You are not the user
architect                 cleaner
waitress             policeman
teacher     gardener      farmer
midwife receptionist musician
builder marine     biologist
nurse florist     photographer
sales assistant nanny
plumber     sharetrader     banana
ripener accountant        journalist
coach politician student machine
operator
hang out with
Hang out withwho don’t
people people
 use a computer 8
     hours a day
Design for the user model
System Model
User’s Mental Model

         The internet is a
          series of tubes
Involve Users
Create Personas
• Archetypal
  representation of your
  target audience

• Based on user research
  (ideally)

• Aggregation of your
  users’ goals, attitudes,
  and behaviours

• Presented as a vivid,
  narrative description
  of a single “person” who
  represents a user
  segment
Create Personas
Prototype
Test Early & Often
The cost of changes
Prototyping Redux
Never be satisfied with the first idea
Most developers tend to adopt a "satisficing" strategy that
focuses on initial, satisfactory, but less than optimal, solutions.
Never be satisfied with a single opinion or the first idea. It is
                                             best to "saturate the
                                             design space" with ideas
                                             before making decisions
                                             and to consider
                                             alternatives (i.e., better
                                             design solutions,
                                             throughout the design
                                             process).

Ball, L.J., Evans, J.B.T. And Dennis, I. (1994), Cognitive processes in engineering design: A longitudinal study,
Ergonomics, 37(11), 1753-1786.
Screen Description Diagram
1. ‘Bits’ for an account page
 2. Company info
 3. Insurance info for company
 4. My (current user) info
 5. Other users on this account
 6. My sales rep contact info
 7. Current account plan
 8. Link to change search preferences
 9. Date account was created
 10.People rarely view or change insurance info
 11.Any user can edit anything except other users' info
 12.Changing password is the most likely action
 13.People might come here to change search preferences
    (which are on a separate page)

                     http://37signals.com/papers/introtopatterns/
2. Group related bits together
A
     1. Company info
    10. Any user can edit anything except other users' info

   2. Insurance info for company
B  9. People rarely view or change insurance info
  10. Any user can edit anything except other users' info


   3. My (current user) info
C 11. Changing password is the most likely action
  10. Any user can edit anything except other users' info


     4. Other users on this account
D
    10. Any user can edit anything except other users' info


E    5.   My sales rep contact info

     6. Current account plan
F   10. Any user can edit anything except other users' info
3. Prioritize
Most important:
        3. My (current user) info
     C 11. Changing password is the most likely action
       10. Any user can edit anything except other users' info

     A
           1. Company info
          10. Any user can edit anything except other users' info

     G      8.   Date account was created

     E      5.   My sales rep contact info
                               Necessary:
                                   2. Insurance info for company
                                B  9. People rarely view or change insurance info
                                  10. Any user can edit anything except other users' info
                                     4. Other users on this account
                                D
                                    10. Any user can edit anything except other users' info
                                     6. Current account plan
                                F   10. Any user can edit anything except other users' info
Nice to have:
 H
          7. Link to change search preferences
         12. People might come here to change search preferences (which are on a separate page)
4. Design each bit individually
A                B




C




                      E
G
5. Put the chunks together
6. Build in software of choice
Create Scenarios/Storyboards
Prototype with Powerpoint
  Login

          e-asTTle                                                                                                Welcome, username   Log Out




                         News
              e-asTTle   8-Feb- 2006: e-asTTle will be unavailable on Saturday 8th February due to maintenance.

                logo     6-Feb-2006: New resources have been added to What’s Next




                         Sign-In

                         Please sign in to your e
                                                -asTTle account:


                                     Username:                                 ex.myname@myschool.co.nz

                                      Password:                                Forgot Password?

                                                          Remember me on this computer


                                                                                                  Sign-In




          Footer
Learn about design principles
8. Aesthetics & Minimalist Design
8. Aesthetics & Minimalist Design
8. Aesthetics & Minimalist Design




http://dev.uxmatters.com/MT/archives/000015.php
8. Aesthetics & Minimalist Design
Patterns
Doing Heuristics Evaluations
Jacob Nielsen’s Heuristics
1.  Visibility of system status
2.  Match between system and the real world
3.  User control and freedom
4.  Consistency and standards
5.  Error prevention
6.  Recognition rather than recall
7.  Flexibility and efficiency of use
8.  Aesthetic and minimalist design
9.  Help users recognize, diagnose, and recover
    from errors
10. Help and documentation
Match between the system
    and the real world
2. Match the system and real
            world
2. Match the system and the real
              world
Be Consistent
2. Match the system and the real world
Prevent Errors
5. Error Prevention
Encourage recognition rather
        than recall
6. Recognition rather than recall
Provide Help
10. Help & Documentation
Other Guidelines

• Bruce Tognazzini’s First Principles of
  Interaction Design
  http://www.asktog.com/basics/firstPrinciples.html


• A good introductory summary from a
  fellow student
  http://www.charlieguo.com/web_design_readings.php
Recommended Books
Donald Norman
Steve Krug
Alan Cooper
Alan Cooper
Jenifer Tidwell
Axioms
• Interaction Design is not guesswork
• Imagine users as very intelligent but very busy
• No matter how cool your interface is, less
  would be better
• Software should behave like a considerate
  human

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Creating an Online Community for User Research
Creating an Online Community for User ResearchCreating an Online Community for User Research
Creating an Online Community for User Research
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
6 Rules of User Interface Design
6 Rules of User Interface Design6 Rules of User Interface Design
6 Rules of User Interface Design
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
GHAMAS Design Principles
GHAMAS Design PrinciplesGHAMAS Design Principles
GHAMAS Design Principles
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco system
 
User Centered Design in short
User Centered Design in shortUser Centered Design in short
User Centered Design in short
 
Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...
Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...
Know Thy User: The Missing Element in SharePoint Solutions (User Centered Des...
 
User Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & GoalsUser Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & Goals
 
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
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Usability and User Experience Training Seminar
Usability and User Experience Training SeminarUsability and User Experience Training Seminar
Usability and User Experience Training Seminar
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping TodayUser Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
 
Interaction design patterns
Interaction design patternsInteraction design patterns
Interaction design patterns
 
Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive Design
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft Word
 
Usability basics
Usability basicsUsability basics
Usability basics
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
 

Destaque

Exams Oct10 Timetable
Exams Oct10 TimetableExams Oct10 Timetable
Exams Oct10 Timetable
migrain2010
 
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 (20)

User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
User Interface Design Best Practices
User Interface Design Best PracticesUser Interface Design Best Practices
User Interface Design Best Practices
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
Mädchenorientiertes Interaktionsdesign – Fallstricke und Chancen
Mädchenorientiertes Interaktionsdesign – Fallstricke und ChancenMädchenorientiertes Interaktionsdesign – Fallstricke und Chancen
Mädchenorientiertes Interaktionsdesign – Fallstricke und Chancen
 
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...
 
Mobile User Experience - @iRajLal
Mobile User Experience - @iRajLalMobile User Experience - @iRajLal
Mobile User Experience - @iRajLal
 
Establishing best practices to improve usefulness and usability of web interf...
Establishing best practices to improve usefulness and usability of web interf...Establishing best practices to improve usefulness and usability of web interf...
Establishing best practices to improve usefulness and usability of web interf...
 
Usability Best Practices for Adopting Responsive Design
Usability Best Practices for Adopting Responsive DesignUsability Best Practices for Adopting Responsive Design
Usability Best Practices for Adopting Responsive Design
 
Exams Oct10 Timetable
Exams Oct10 TimetableExams Oct10 Timetable
Exams Oct10 Timetable
 
From Use to User Interface
From Use     to User InterfaceFrom Use     to User Interface
From Use to User Interface
 
User Interface Design Principles
User Interface Design PrinciplesUser Interface Design Principles
User Interface Design Principles
 
ADDIE - The Analyze Phase
ADDIE - The Analyze PhaseADDIE - The Analyze Phase
ADDIE - The Analyze Phase
 
User interface design
User interface designUser interface design
User interface design
 
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
 
Usability & User Experience 101 - #UX101
Usability & User Experience 101 - #UX101Usability & User Experience 101 - #UX101
Usability & User Experience 101 - #UX101
 
Technical Excellence - OOP Munich 2015
Technical Excellence - OOP Munich 2015Technical Excellence - OOP Munich 2015
Technical Excellence - OOP Munich 2015
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
 
User Interface Testing | Best Practices
User Interface Testing | Best Practices User Interface Testing | Best Practices
User Interface Testing | Best Practices
 
Forms usability design best practices experience dynamics web seminar
Forms usability design best practices  experience dynamics web seminarForms usability design best practices  experience dynamics web seminar
Forms usability design best practices experience dynamics web seminar
 
Automotive User Interface Design: Innovative UI design in a slow moving indus...
Automotive User Interface Design: Innovative UI design in a slow moving indus...Automotive User Interface Design: Innovative UI design in a slow moving indus...
Automotive User Interface Design: Innovative UI design in a slow moving indus...
 

Semelhante a User Interface Design in Practice

Idean_LeanResearch_Jan2014_FINAL
Idean_LeanResearch_Jan2014_FINALIdean_LeanResearch_Jan2014_FINAL
Idean_LeanResearch_Jan2014_FINAL
Liya James
 
Flotree requirements interview mistakes
Flotree   requirements interview mistakesFlotree   requirements interview mistakes
Flotree requirements interview mistakes
Dave Flotree
 
25 march introducing design methods
25 march introducing design methods25 march introducing design methods
25 march introducing design methods
Abhishek Sagar
 
Introductiontousability 090407053727-phpapp02
Introductiontousability 090407053727-phpapp02Introductiontousability 090407053727-phpapp02
Introductiontousability 090407053727-phpapp02
Techved Consulting
 
Patton user modeling
Patton user modelingPatton user modeling
Patton user modeling
idplay
 
Ucd Techniques - Shad MUN 2008
Ucd Techniques - Shad MUN 2008Ucd Techniques - Shad MUN 2008
Ucd Techniques - Shad MUN 2008
Patañjali Chary
 

Semelhante a User Interface Design in Practice (20)

Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense Process
 
Interview preparation full_stack_java
Interview preparation full_stack_javaInterview preparation full_stack_java
Interview preparation full_stack_java
 
Idean_LeanResearch_Jan2014_FINAL
Idean_LeanResearch_Jan2014_FINALIdean_LeanResearch_Jan2014_FINAL
Idean_LeanResearch_Jan2014_FINAL
 
Flotree requirements interview mistakes
Flotree   requirements interview mistakesFlotree   requirements interview mistakes
Flotree requirements interview mistakes
 
Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco Marcellino
 
Uxportfolio
UxportfolioUxportfolio
Uxportfolio
 
Dennis Lee UX Portfolio
Dennis Lee UX PortfolioDennis Lee UX Portfolio
Dennis Lee UX Portfolio
 
Usability testing in the open
Usability testing in the openUsability testing in the open
Usability testing in the open
 
25 march introducing design methods
25 march introducing design methods25 march introducing design methods
25 march introducing design methods
 
25 march introducing design methods
25 march introducing design methods25 march introducing design methods
25 march introducing design methods
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
Requirements Engineering for the Humanities
Requirements Engineering for the HumanitiesRequirements Engineering for the Humanities
Requirements Engineering for the Humanities
 
8 Tips for Designing Dashboards Your People Will Actually Use_.pptx
8 Tips  for Designing Dashboards Your People Will Actually Use_.pptx8 Tips  for Designing Dashboards Your People Will Actually Use_.pptx
8 Tips for Designing Dashboards Your People Will Actually Use_.pptx
 
Modular Web Design With Components
Modular Web Design With ComponentsModular Web Design With Components
Modular Web Design With Components
 
Introductiontousability 090407053727-phpapp02
Introductiontousability 090407053727-phpapp02Introductiontousability 090407053727-phpapp02
Introductiontousability 090407053727-phpapp02
 
Patton user modeling
Patton user modelingPatton user modeling
Patton user modeling
 
Ucd Techniques - Shad MUN 2008
Ucd Techniques - Shad MUN 2008Ucd Techniques - Shad MUN 2008
Ucd Techniques - Shad MUN 2008
 
UCD Workshop - Shad MUN 2008
UCD Workshop - Shad MUN 2008UCD Workshop - Shad MUN 2008
UCD Workshop - Shad MUN 2008
 
Design process design rules
Design process  design rulesDesign process  design rules
Design process design rules
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
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...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 

User Interface Design in Practice

  • 1. Usability in Practice User Interface Design in Practice Justine Sanderson| Userfaction Ltd | 3 May 2007 © 2007 Justine Sanderson
  • 2. Today 1. You are not the user 2. Design for the user model 3. Involve users – not just stakeholders 4. Prototype 5. Learn about good design principles 6. Know your Usability Heuristics 7. Read some books 8. Remember these axioms
  • 3. You are not the user
  • 4. architect cleaner waitress policeman teacher gardener farmer midwife receptionist musician builder marine biologist nurse florist photographer sales assistant nanny plumber sharetrader banana ripener accountant journalist coach politician student machine operator
  • 5. hang out with Hang out withwho don’t people people use a computer 8 hours a day
  • 6.
  • 7.
  • 8.
  • 9. Design for the user model
  • 11. User’s Mental Model The internet is a series of tubes
  • 13. Create Personas • Archetypal representation of your target audience • Based on user research (ideally) • Aggregation of your users’ goals, attitudes, and behaviours • Presented as a vivid, narrative description of a single “person” who represents a user segment
  • 16. Test Early & Often
  • 17. The cost of changes
  • 19. Never be satisfied with the first idea Most developers tend to adopt a "satisficing" strategy that focuses on initial, satisfactory, but less than optimal, solutions. Never be satisfied with a single opinion or the first idea. It is best to "saturate the design space" with ideas before making decisions and to consider alternatives (i.e., better design solutions, throughout the design process). Ball, L.J., Evans, J.B.T. And Dennis, I. (1994), Cognitive processes in engineering design: A longitudinal study, Ergonomics, 37(11), 1753-1786.
  • 21. 1. ‘Bits’ for an account page 2. Company info 3. Insurance info for company 4. My (current user) info 5. Other users on this account 6. My sales rep contact info 7. Current account plan 8. Link to change search preferences 9. Date account was created 10.People rarely view or change insurance info 11.Any user can edit anything except other users' info 12.Changing password is the most likely action 13.People might come here to change search preferences (which are on a separate page) http://37signals.com/papers/introtopatterns/
  • 22. 2. Group related bits together A 1. Company info 10. Any user can edit anything except other users' info 2. Insurance info for company B 9. People rarely view or change insurance info 10. Any user can edit anything except other users' info 3. My (current user) info C 11. Changing password is the most likely action 10. Any user can edit anything except other users' info 4. Other users on this account D 10. Any user can edit anything except other users' info E 5. My sales rep contact info 6. Current account plan F 10. Any user can edit anything except other users' info
  • 23. 3. Prioritize Most important: 3. My (current user) info C 11. Changing password is the most likely action 10. Any user can edit anything except other users' info A 1. Company info 10. Any user can edit anything except other users' info G 8. Date account was created E 5. My sales rep contact info Necessary: 2. Insurance info for company B 9. People rarely view or change insurance info 10. Any user can edit anything except other users' info 4. Other users on this account D 10. Any user can edit anything except other users' info 6. Current account plan F 10. Any user can edit anything except other users' info Nice to have: H 7. Link to change search preferences 12. People might come here to change search preferences (which are on a separate page)
  • 24. 4. Design each bit individually A B C E G
  • 25. 5. Put the chunks together
  • 26. 6. Build in software of choice
  • 28. Prototype with Powerpoint Login e-asTTle Welcome, username Log Out News e-asTTle 8-Feb- 2006: e-asTTle will be unavailable on Saturday 8th February due to maintenance. logo 6-Feb-2006: New resources have been added to What’s Next Sign-In Please sign in to your e -asTTle account: Username: ex.myname@myschool.co.nz Password: Forgot Password? Remember me on this computer Sign-In Footer
  • 29. Learn about design principles
  • 30. 8. Aesthetics & Minimalist Design
  • 31. 8. Aesthetics & Minimalist Design
  • 32. 8. Aesthetics & Minimalist Design http://dev.uxmatters.com/MT/archives/000015.php
  • 33. 8. Aesthetics & Minimalist Design
  • 36. Jacob Nielsen’s Heuristics 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
  • 37. Match between the system and the real world
  • 38. 2. Match the system and real world
  • 39. 2. Match the system and the real world
  • 41. 2. Match the system and the real world
  • 45. 6. Recognition rather than recall
  • 47. 10. Help & Documentation
  • 48. Other Guidelines • Bruce Tognazzini’s First Principles of Interaction Design http://www.asktog.com/basics/firstPrinciples.html • A good introductory summary from a fellow student http://www.charlieguo.com/web_design_readings.php
  • 55. Axioms • Interaction Design is not guesswork • Imagine users as very intelligent but very busy • No matter how cool your interface is, less would be better • Software should behave like a considerate human