Coding the UI: Lessons Learned from Orbitz and ebookers

AJAX*World* October,'2008 Mark*Meeker* CODING THE UI: LEARNED FROM ORBITZ &
EBOOKERS LESSONS

Dozens of apps, hundreds of VMs, thousands of services. UI

webapp (controller layer) JSP (page templating) JavaScript JSP 2.0 XHTML
1.0 CSS CSS 2.1

“As far as the customer is concerned, the interface is
the product.” - Jef Raskin

“Browsers are the most hostile software development environments possible.” -
Douglas Crockford

1,971 Revisions to 1 .css ﬁle since Oct. 2006 2.9
edits per day (if working weekends)

2007 - updates.orbitz.com 2008 - ebookers.com 2005 - CheapTickets.com 2006
- mobile.orbitz.com 2001 - Orbitz.com 2002 - OrbitzForBusiness.com

Single JSP ﬁles measuring in thousands of lines Massive amounts
of repeated markup 561 ﬁles with <html> tag Minimal re-use 66 tables on one page Experience

“Good judgement is the result of experience … Experience is
the result of bad judgement.” —Fred Brooks

Fresh start? http://ﬂickr.com/photos/jeremybrooks/833157523/

Wishlist Internationalization Universality Maintain High Quality Code Promote Code Re-Use
Consistent Experience http://ﬂickr.com/photos/litandmore/2664900676/

Internationalization http://www.ﬂickr.com/photos/nickjacksonza/256651959/

6:50pm versus 18:50

14/11/07 versus 11/14/07

miles versus kilometers

3,000+ Labels, strings, paragraphs of text.

Traveler vs. Traveller vs. Passengers

1,500+ Images

Images Remove text as much as possible Consider cultural differences
in images choices

English

French

Japanese

Translation Small words can expand 200-300% Rule of thumb: 40%
Watch for wrapping issues (or lack thereof) Consider during design comp stage

Universality

Follow Web Standards

Follow Web Standards P.O.S.H. plain old semantic HTML Constant balancing
act Reduces display defects Reset Styles Validate CSS Reminder that it is an evolving code base

IE6 Support

Firefox 3, OSX

IE 5.2, OSX

Amazon Kindle

Progressive Enhancement Content is KING! Start with semantic markup Get
working functionality with HTML only Enhance display with CSS Enhance behavior with JavaScript

Separation of Layers No in-line styles or in-line JavaScript If
it only works with JavaScript, create it with JavaScript

Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/ Varying levels of support Isn’t required
to be identical Not all or nothing

Graded Browser Support A-Grade White-list (well-known, measurable market share) Tested
by QA Team C-Grade Blacklist (incapable browsers, call drivers) X-Grade Everyone else

Maintain High Quality http://www.ﬂickr.com/photos/harvypascua/46114061

High Quality Validation Build time tests (automated) static code analysis
CSS validation JSP compile Constant developer vigilance Sometimes constraints are good

Constraints Custom tags for some HTML elements anchors, images, form
elements Only allow subset of attributes no: onclick, id required: various content Able to enforce all inputs have labels Free CSS and JS support Free shared functionality

Debug Tools Logging Runtime in-application debugging Expose data to testers
Debug various types of modules Content Error message placement

File Structure Developer ﬁrst Build for deploy later move ﬁles
around combine them reformat them strip comments

CSS Files Split between multiple ﬁles Typography Color Layout Modules
Nav Each declaration on its own line

Promote Re-Use (DRY) http://ﬂickr.com/photos/kingdesmond/477389196

Composite View Separates “layout” of page from content Allows to
plug in different modules into page Used in Apache Tiles Leverage in-house framework Try and gain as much re-use of JSP code

Layout Header Footer Rail Body

Module

Page Deﬁnition header.jsp --> Header results.jsp --> Body sortbar.jsp -->
Rail footer.jsp --> Footer

Page Composition Page Def B/E Magic Browser

DRY Avoid targeting IDs for CSS or JS Custom attribute
for JavaScript Data Separation of Layers Helper code for small “controls” with the CSS to go with them Take advantage of lazy developers

Consistent Experience http://www.ﬂickr.com/photos/kiad/491754035/

Consistent Experience Make learning how to use the site easier
for users. Reduce the number of patterns. Stick with the ones that work best. Meet users expectations on... messaging error placements interfaces

Consistent Experience Review the site for common patterns Introduce a
Pattern Library Build common “controls”

Follow the 80/20 Rule

“Simple things should be simple and complex things should be
possible.” —Alan Kay

80/20 Rule Make it easy to do the the common
task for 80% of your users Make it possible to do everything for the other 20% that need to

Hide/Reveal

Micro-content

80/20 Rule Patterns: Hide Reveal Tabs Pattern Pulling in content
via Ajax “Micro-content” bubbles

What’s Next? http://ﬂickr.com/photos/reinvented/179863733/

Slides: http://markmeeker.com/events/ajaxworld2008 Email: [email protected] Blog: http://markmeeker.com Orbitz Jobs: http://www.orbitz.com/startmycareer Questions?

Coding the UI: Lessons Learned from Orbitz and ...

Coding the UI: Lessons Learned from Orbitz and ebookers

More Decks by Mark Meeker

Other Decks in Technology

Featured

Transcript