Presentation from April 15, 2009 at the ExtJS 2009 conference

1. User Experience Design
with Ext JS
Ext JS Conference 2009
presented by Glen Lipka
April 15, 2009

2. The Plan
 UX Principles: 25 min
 ExtJS App Demo: 25 min
 Discussion: 10 min

3. User Experience
 Psychology
 Pre-conceived Ideas
 Mental Models
 Visual Design
 User Interface
 Information Architecture
 Interaction Design
 Support
 Perception

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. Design is not Art
 Cause/Effect
 Practice
 Training
 Experimenting
 Measuring
 Talent
For further reading see: Don Norman (http://www.jnd.org/books.html )

7. Pretend to be your App

8. Observing Users

9. Halloween Principle

10. 3 Travelers

11. Flow

12. Architecture

13. 5 pennies or 1 dime?

14. The Circus (WTF/m)

15. Refactoring

16. Don’t Bend Users

17. Example: Printing
Menus
Icons
Keyboard shortcuts Control-P
Right Click
Drag and drop

18. Balance

19. Matched Colors

20. Swiss Alignment

21. Three Dimensional
AB

22. Case Study

23. Inspiration

24. Sketch on Napkin

25. 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

26. 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

27. Real World Analogy

28. See it in action

29. Glen Lipka
http://www.commadot.com
Dir, UX and Product Management
Marketo
glen@kokopop.com