Entries Tagged 'Usability' ↓

New Yahoo! UI (YUI) library release! (2.4.0)

Yahoo! released yesterday a new version of the feature-rich, BSD licensed YUI (the Yahoo! User Interface library) implementing several improvements, some new controls and other innovative functionality. The components that quickly turned heads over here, are namely:

  • The charts control: finally we get those infamous pie charts for free (requires Flash like most of the web chart and graphing tools, but its quality is certainly higher than some of the competitors)
  • Improved performance for the rich text editor: apparently now you can select its components in a fine-grained manner, avoiding load of unnecessary functions
  • New fanciness for the button control…
  • Hell of a load of fixes, ranging from browser specific issues and compatibility changes

Their change-log contains a complete overview of the fixes and the new features. We are integrating this new release for the (Ruby on Rails powered) content management system engine we have developed for our corporate site, and recommend YUI for any serious web developer seeking a library providing solid controls and functionality. Besides, it comes with no strings attached ;)

Design-ish forms with live validation

One of the most important features of our content management system is its usability and careful design. We faced a complicated issue with forms: it’s not that uncommon to use tables for a fluid layout, easy to customize using CSS. The typical table-less solution involves using floating labels to the left, with fixed width, and input fields to the right. We’ve seen designs where a help text could be neatly displayed right next to the input, using tables.

Always perform server-side validation and don’t require JavaScript in forms!

This allows support in possibly every web browser out there, without compatibility issues. The code looks clean too.Another feature that boosts the usability of forms is live data input validation. For security reasons, you should never rely on client-side validation, but it comes as an extremely useful aid for showing the user if there’s anything wrongly formatted that requires fixing, before wasting time submitting the form.

A table layout based form with help

We came across LiveValidation (quite an appropriate name :-) ), a neat Prototype-compatible JavaScript library for automating data validation. It’s free (MIT license, for personal and commercial projects) and compatible with every major browser we’ve tested.

Continue reading →