Design Patterns of Web 2.0. Ajax
and more!
Michael Curry
Designer/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 nonstandard 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 success
Layout/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”
“Muttons” are a display element that give great contextual navigation
while keeping interface clean, simple, and unintimidating.
1.Initial View
3. Action Initiated
2. Action Invitation
4. Action Results and Sub-actions reveal
Inline Editing
Inline Editing uses Ajax to accomplish binary page goals (display and edit)
in one streamlined dynamic page.
1.Initial View
2.Invitation to Action
3.Quick Same Page Inline Edit
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