Extjs

1,188 views

Published on

Presentation from April 15, 2009 at the ExtJS 2009 conference

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,188
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
88
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Extjs

  1. 1. User Experience Design with Ext JS Ext JS Conference 2009 presented by Glen Lipka April 15, 2009
  2. 2. The Plan  UX Principles: 25 min  ExtJS App Demo: 25 min  Discussion: 10 min
  3. 3. User Experience  Psychology  Pre-conceived Ideas  Mental Models  Visual Design  User Interface  Information Architecture  Interaction Design  Support  Perception
  4. 4. What is Design? Design is not just  Decisions what it looks like and feels like.  Processes Design is how it works.  Conflict Resolution  Assumptions  Constraints  Vision of the future
  5. 5. Design is not Art  Cause/Effect  Practice  Training  Experimenting  Measuring  Talent For further reading see: Don Norman (http://www.jnd.org/books.html )
  6. 6. Pretend to be your App
  7. 7. Observing Users
  8. 8. Halloween Principle
  9. 9. 3 Travelers
  10. 10. Flow
  11. 11. Architecture
  12. 12. 5 pennies or 1 dime?
  13. 13. The Circus (WTF/m)
  14. 14. Refactoring
  15. 15. Don’t Bend Users
  16. 16. Example: Printing Menus Icons Keyboard shortcuts Control-P Right Click Drag and drop
  17. 17. Balance
  18. 18. Matched Colors
  19. 19. Swiss Alignment
  20. 20. Three Dimensional AB
  21. 21. Case Study
  22. 22. Inspiration
  23. 23. Sketch on Napkin
  24. 24. Quick Jump Lead Nurturing My Marketo Programs Email Blast Paid Search Lead Nurturing Interaction Flows Campaigns Email Blasts New Interaction Flow Nurture Activities Free Trial Scenario Edit Drag to Right (Paused) What do we do when people fill out the form? • Send Email • Send an Alert # Detail • Create SFDC Task 1 When a lead enters the “Free Trial Web Leads” group: • Other SFDC Action • Trigger a campaign • Change Score • Add Contact to Group Drag nurture activity from the tree • Custom Activity • Wait • Schedule a meeting • Conditional (Simple) • Conditional (Advanced) Save Flow Baskets 25
  25. 25. Admin | Logged in as: Demo User | Logout QuickJump… Marketing Activities My Marketo Design Studio Lead Database Analytics Free Trial Scenario Budget Schedule Flow Campaign Log Smart List Drag Items to Create Smart List Campaign Menu Run Flow test Smart List Rules Smart List Triggers Define who is part of this campaign • Fills out form • Visits Page • Opens Email • Clicks on Email • Registers for Event • Data Value Changes Filters Drag action from the left User History • Filled Out Form • Filled Out Form • Visited Page • Opened Email Important. This will help • Clicked on Email users understand the • Was sent email inline editing paradigm • Field Changed Personal Attributes Auto-save ON Done Last Saved: Aug 12, 12:42pm Company Attributes
  26. 26. Real World Analogy
  27. 27. See it in action
  28. 28. Glen Lipka http://www.commadot.com Dir, UX and Product Management Marketo glen@kokopop.com

×