User Experience Designwith Ext JS

Ext JS Conference 2009presented 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?

Decisions Processes Conflict Resolution Assumptions Constraints Vision of the future

Design is not just what it looks like

and feels like. Design is how it

works.

Design is not Art

Cause/Effect Practice Training Experimenting Measuring Talent

For further reading see: Don Norman (http://www.jnd.org/books.html )

DESIGN CONCEPTS

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

Boy: Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.

Neo: What truth?

Boy: There is no spoon.

Neo: There is no spoon?

Boy: Then you'll see, that it is not the spoon that bends, it is only yourself.

Example: Printing

Menus

Icons

Keyboard shortcuts Control-P

Right Click

Drag and drop

Balance

Matched Colors

Swiss Alignment

B

Three Dimensional

A

Case Study

Warning: Presenter is highly biased

Inspiration

Sketch on Napkin

Campaigns

Baskets

Interaction Flows

Free Trial Scenario (Paused)

What do we do when people fill out the form?

Quick Jump

25

My Marketo

Programs

Paid Search

Nurture Activities

Drag to Right

Lead Nurturing

Email BlastLead Nurturing

Email Blasts New Interaction Flow

# Detail

1 When a lead enters the “Free Trial Web Leads” group:

Drag nurture activity from the tree

•Send Email

•Send an Alert

•Create SFDC Task

•Other SFDC Action

•Trigger a campaign

•Change Score

•Add Contact to Group•Custom Activity

•Wait

•Schedule a meeting•Conditional (Simple)•Conditional (Advanced)

Edit

Save Flow

Smart List Rules

Drag Items to Create Smart List

•Filled Out Form

•Fills out form

•Visits Page

•Clicks on Email

•Registers for Event

•Opens Email

Filters

User History

Personal Attributes

Company Attributes

Triggers

•Visited Page

•Opened Email

•Clicked on Email

•Was sent email

•Field Changed

•Data Value Changes

Smart ListDefine who is part of this campaign

Drag action from the left

Admin | Logged in as: Demo User | Logout

My Marketo Lead Database

Design Studio

AnalyticsMarketing Activities

Campaign Menu

DoneAuto-save ONLast Saved: Aug 12, 12:42pm

QuickJump…

Run Flow test

Free Trial Scenario Budget Schedule Flow Campaign Log Smart List

Important. This will help users understand the inline editing paradigm

•Filled Out Form

Real World Analogy

See it in action

DISCUSSION

Glen Lipkahttp://www.commadot.com

Dir, UX and Product ManagementMarketo

glen@kokopop.com