Design Patterns of Web 2.0. Ajax and more!

Michael CurryDesigner/Developer of

PushHandle, Inc.

About Me

• I am a UI designer and internet enthusiast

– NYU grad. B.A. in Media Studies and Visual Comm.– 6 years working interactive design positions from

Retail to Analytics and Optimization– Currently I work for my own startup design

company: PushHandle Inc.

Overview

• What is Ajax? • What are Design Patterns? • Recent successes in modern UI design• “PushHandle Messenger” Walkthrough• Q & A

What is Ajax?

• Term coined by Jesse James Garret of Adaptive Path in 2005.

• Main idea/goal is to achieve uninterrupted interaction between the browser and servers for a better user experience.

• Main interruption defeated by Ajax is the unnecessary page refresh. An action now can occur with out the wait time of same page loading again after retrieving server information.

What are Design Patterns?

• Design patterns are generally considered common problems found in a specific type of design.

• With Ajax being practiced for a few years now – new design patterns of Web Design have surfaced.

• In this discussion, I want to point out some of these patterns but more importantly some of great solutions have been created.

Modern UI Success!

• JavaScript Libraries: YUI, Jquery, & Prototype• Script.aculo.us Sites

• Jquery Sites

• YUI Sites

Javascript Libraries: YUI, Jquery, & Prototype

• A JavaScript library has the motto: “…make JavaScript suck less”. – mochikit.com

• No, Cross browser handling sucks and non-standard browsers suck! (Less than 15% of web users use IE6: hooray!) – http://www.w3schools.com/browsers/browsers_stats.asp

• Still, it’s true they provide less typing which leads to condensed file sizes and usually less problems.

• No matter which you pick – necessary tool.

Javascript Libraries…

• For Starters: YUI • For Designers: Prototype and Script.aculo.us• For Devs: JQuery

YUI successLayout/Element Oriented improvements. • “Muttons” - Contextual/Assoc. Navigation • Inline Editor – No repetition, or space hog• Both are not exactly form elements• If you are not aware of YUI-reset.css - get it!• * YUI 3 coming soon…

“Muttons”

1.Initial View

2. Action Invitation

3. Action Initiated

4. Action Results and Sub-actions reveal

“Muttons” are a display element that give great contextual navigation while keeping interface clean, simple, and unintimidating.

Inline Editing

1.Initial View 2.Invitation to Action 3.Quick Same Page Inline Edit

Inline Editing uses Ajax to accomplish binary page goals (display and edit)in one streamlined dynamic page.

Jquery Success

• Most Popular Library now. Dev favorite.• FriendFeed : “real-time” twitter, mail, blog,

communication mashup.• WundrBar and Tripeedo – amazing RegExp

project. Although still needing some additions built for future of web.

• Both incredible projects that take idea of Ajax to a new level.

Scripty Notes

• Technically is an extension of Prototype.js – one of oldest js libaries. But packages it in its releases.

• Started as a way to do cool animations without having to add flash to a page.

• Is the default lib. for Ruby on Rails dev: Basecamp - 37 great UI design ref

• *http://scripty2.com*

Script.acul.ous Success

• Freckle Time Tracking: Created by same folks who created the library: Thomas Fuchs and Amy Hoy

• How do we use inputs? Why so many? When we can do tags & descriptions in same box.

• More… http://letsfreckle.com/blog/

PushHandle Messenger

• Inspired by various sites we talked about – I have started a webapp for “smart-chatting”

• “Smart-chatting” means a lot of things. But essentially it is about taking known conventions of an instant messenger and improving the performance.

Twitter, Google, and IM• These 3 services are among the most used and

known in internet and modern communication.• What is most interesting about this is they are all

interacted in the same way. The main differences are results and expectations.

• To use anyone of these – you simply type into an input and submit. SO SIMPLE – BUT SATISFYING!

• IM is the oldest & yet not much has changed since the days of AOL member chat.

• But so much more is available today…

Thanks For the Time

Feel Free to contact me:mcurry@pushhandle.com