Your SlideShare is downloading. ×
0
User Experience Design
              with Ext JS




Ext JS Conference 2009
presented by Glen Lipka

             April 15...
The Plan
 UX Principles: 25 min
 ExtJS App Demo: 25 min
 Discussion: 10 min
User Experience
 Psychology
 Pre-conceived Ideas
 Mental Models
 Visual Design
 User Interface
 Information Architec...
What is Design?
                           Design is not just
   Decisions              what it looks like
              ...
Design is not Art

      Cause/Effect
      Practice
      Training
      Experimenting
      Measuring
      Talent...
Pretend to be your App
Observing Users
Halloween Principle
3 Travelers
Flow
Architecture
5 pennies or 1 dime?
The Circus (WTF/m)
Refactoring
Don’t Bend Users
Example: Printing

Menus


Icons

Keyboard shortcuts   Control-P


Right Click

Drag and drop
Balance
Matched Colors
Swiss Alignment
Three Dimensional




    AB
Case Study
Inspiration
Sketch on Napkin
Quick Jump
                                                  Lead Nurturing
                    My Marketo   Programs     ...
Admin | Logged in as: Demo User | Logout
                                                                                 ...
Real World Analogy
See it in action
Glen Lipka
       http://www.commadot.com
Dir, UX and Product Management
                       Marketo

            glen@...
Extjs
Upcoming SlideShare
Loading in...5
×

Extjs

967

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
967
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
86
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×