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

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 Architecture
 Interaction Design
 Support
 Perception

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

Design is not Art
 Cause/Effect
 Practice
 Training
 Experimenting
 Measuring
 Talent
For further reading see: Don Norman (http://www.jnd.org/books.html )

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

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

Real World Analogy

See it in action

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