Refresh Cambridge July - eCommerce and JavaScript User Experience
Last night saw another successful presentation evening at Refresh Cambridge. 15 attendees, many new, turned out to see sessions on user experience in the eCommerce sphere, and enhancing the user experience with JavaScript and jQuery.
eCommerce user experience
(Just what is the correct capitalisation of eCommerce? Wikipedia hyphenates it, but that just makes it feel old-fashioned, like the newspapers that hyphenate ‘e-mail’. Ho hum.)
Simon Jones of Studio 24 covered many aspects of user experience as they apply to eCommerce:
- Providing full information on prices and other costs such as delivery and VAT (another attendee with experience of large eCommerce sites claimed that adding VAT to item prices could make as much as a 20% difference to the bottom line, so the decision is perhaps not as simple as one might expect)
- Design as it relates to user experience and usability—a discussion ensued over the design or lack thereof of Amazon’s product pages; Andy Rutledge’s Amazon.com redesign and Khoi Vinh’s Yeeaahh! work were both mentioned
- Online stores need to provide supporting information such as telephone numbers, addresses, contact forms, policy information, etc. (an interesting point was raised about where small hobbyist traders get their Terms and Conditions from)
Play.com have a nicely designed ‘Sign In’ form, with the primary action (create a new account) subtly enhanced through stronger colour use- Ideally, an online store shouldn’t force customers to register with the site, although in practice this very rarely happens
- We discussed OpenID a little, including a demonstration of actually using it to register on a site, and there was some discussion of whether it would actually be preferable to have OpenID handle things like transmittal of credit card information rather than have your card details stored by every single site you buy from
- The checkout process should remove non-critical navigation options from the page template; it shouldn’t just use the same template as the rest of the site
- Checkout should be an easy-to-understand step-based process, with forgiving forms (i.e. don’t use overly fussy validation) and nice error messages
- Design for zero content like empty search result sets
- Clearly indicate when a page has updated—this is equally valid whether you’re using Ajax or not; try adding a product to your basket on Play.com to see how small the page change is
- Give accurate delivery dates, particularly when they may be unpredictable (i.e. Christmas)
Enhancing the user experience with JavaScript and jQuery
I was planning to do a longer demonstration on how to make simple enhancements to a site using the jQuery JavaScript library, but unfortunately time was running short so I whipped through the brief presentation and demonstrated some of the concepts and the small amount of code needed to create quite advanced effects:
- Accessibility is always a consideration
- JavaScript can allow you to add many helpful enhancements: animation, notification of changes (the Yellow Fade Technique), auto-complete, in-place editing, drag and drop, Ajax, form validation, modal windows, activity indicators (Yay, animated gifs!)
- All these things can make your site or application feel more responsive, faster (no page reloads), and provide valuable feedback to your users
- jQuery is a JavaScript framework with a small footprint (20KB compressed) and pre-packages commonly used functionality to reduce cross-browser issues and let you write less code
- It has great documentation and lots of plugins
- jQuery code uses CSS selectors (so it is easy to explain to non-scripters) and natural language:
$(‘#mydiv a’).addClass(‘warning’).hide(‘slow’);
Hopefully everyone got something out of the evening and might consider volunteering to give a presentation of their own next time; it looks like the 5th of September will be our next event, so plenty of time to prepare… ;)
Filed under: Refresh-Cambridge, Usability.
Technorati tags: refresh
Bookmark this article with del.icio.us
Previously: Simple Photoshop tricks: Creating interesting drop shadows
Next: What's on your clean machine?
Comments
- simon r jones
- 398 days ago
good write up Matthew. The jQuery stuff was expecially interesting, am going to start playing with it today.
You showed an example site you’d built with some jQuery functionality at the talk. Can you provide a link to that?
- #2
- Matthew Pennell
- 398 days ago
Simon: I’ve uploaded the demo page now—note that I haven’t actually testing it very thoroughly, or looked at it in anything other than Firefox, so it may be less than perfect!
All the relevant stuff is in the functions.js file.
- #4
Sadly, i wasn’t back in Cambridge n time to make this, will try to make sure i’m at the next one