June 25
Taking interfaces beyond the usable
by Paul Irish
Stephen Anderson (aka poetpainter) recently shared an inspiring presentation on elevating interfaces beyond the functional, reliable and usable… to the convenient, pleasurable and meaningful.
Paul Irish
Paul is a Consultant with the Emerging Interactions practice and a black beret operative of the Delta Force, Molecular's rag-tag team of front-end developers.
Posts written by Paul Irish
April 16
HumanaOne PlanPointer built with MS Ajax
by Paul Irish
We developed a very dynamic, responsive, and adaptive UI for a health insurance plan selection tool for Humana One. The original prototype for this application was developed in Flash and our stakeholders expected the sort of responsiveness and richness that Flash delivers, except developed in ajax (with MS Ajax, specifically).
One of the more major shifts in our development came when we no longer could make use of the MS AJAX Control Toolkit widgets as designed, by writing XML and C#; instead we reverse-engineering the generated javascript so we could maintain more control over the execution inside our application. Once we had on-the-ground control over the javascript, we were able to bend it to do things we never thought were possible at the outset of this project.
We’re pleased at the results and I’d love to share with you some of details.
Overview Video:
Some more highlights of what we did in our development effort:
- Heavy use of MS Ajax as a transport layer
- All product data retrieved over WebMethod web service calls, and sent to client over JSON
- Extensive (ab)use of MS Ajax Control Toolkit: Animation, Autocomplete, ModalPopup, HoverMenu (for tooltips), Slider
- Client-side instantiation, manipulation, and triggering of Control Toolkit controls
- Custom extended Collapsible Panel control with simultaneous x/y movement, and more callbacks.
- Browser History Management for permalinks and backbutton, using ASP.NET Futures
- Serverside JavaScript exception logging using Ajax.Logging.ExceptionManager.js
- CombineScriptsHandler to concatenate and compress the javascript files for delivery
- Coremetrics integration into all major app events
- Serious DOM manipulation and animation
- Templating engine using commented HTML to reconstruct DOM elements with XHR’d JSON data, instead of pushing all HTML in the ajax response. 7x smaller response size.
- Large performance gains using replaceHTML and setHTML
- Here’s more on our experience with UpdatePanels, ScriptMethods, delivery optimization, a critique of documentation, support, and developer tools from our enginner Craig Andrews.
Demo:
To test the site, visit https://www.humana-one.com/, select Lousiana on the right, hit the Plan Pointer button in the right column, and use zip code 70001.
March 7
SXSW: We’ve landed!
by Paul Irish
The molecules have landed in Austin and we’re excited. Brandon also scored his first parking ticket so far, but compared to Boston, these Austin fines are a bargain!
Before the trip we used Sched.org to pick and organize the panels we wanted to see. It’s a clever ajax application that pulls in all the festival info and helps you get your agenda straight.
Here is the combined schedule of all of us. We’ll be employing divide and conquer to cover as much ground as possible.
Stay tuned…
February 5
Site Review: Zecco.com
by Paul Irish
Zecco.com is an online brokerage and investment community embracing the Web 2.0 mindset. The company (whose name is a clever abbreviation of zero commission) first embraced one of the major tenets of the open Web — making it free! Once customer fears were assuaged that their free trades came with no catch, Zecco combined that offer with a rich interface, and they grew steadily in customers.
Often, sites will rush to adopt new interaction techniques without heavy consideration of the impact on customer experience. Zecco has made many improvements to speed and performance, but some fundamental interactions within the application can languish. The trading platform is a legacy user interface with an inconsistent visual design and many usability problems and design flaws that can make interaction frustrating at times.
For instance, when a first-time customer goes to the “Move Cash” screen to transfer funds into their account, of the eight possible controls, only one of them initiates a new transfer. (Furthermore, that singular button has now been obstructed by a recent redesign–see edge of button in right side of screenshot). The first step required of all new users is incredibly challenging.
Zecco has also implemented a rich user community featuring standard social features of friends, groups, and forums and more clever features like personal blogs, news feeds, and performance metrics. They’ve done well in balancing privacy with publicly sharing personal data. For example, customers can opt-in to share their trading data. Customers can then be ranked on performance, and others can follow their buys and sells, leading to more engaged customers.
I consider Zecco a leader of bringing practical rich interactivity to financial services online. They’ve made mistakes, but earned much customer trust by reacting quickly to suggestions and concerns. While other complementary Web 2.0 money properties like Mint, Wesabe, and Billmonk continue to innovate, Zecco has affirmed its position as the trading home for the 2008 online investor.
January 31
The best front-end development RSS feeds
by Paul Irish
I’ve put together all the feeds and blogs that I follow that cover front-end development. (That’s HTML, CSS, and JavaScript!)
Here is the OPML file: front-end-development-feeds.xml.opml
All the classics like Ajaxian and A List Apart are in here.. but also more technical ninja developers like John Resig, Hedgerwow and Peter Michaux. I think there are 55 feeds in total.
If you currently use a RSS aggregator (like Bloglines, Google Reader, or Netvibes) you can import this file right in.
iGoogle won’t take an OPML file but you can do each RSS feed individiually.
You can also preview what’s in it here: http://www.bloglines.com/public/molecular-frontend-feeds
