Just a couple of thoughts we've  come to realize over the past year working with the iPhone platform.

1. Every person on your team should use an iPhone or iTouch everyday.

I've talked with quite a few "offshore" teams and they only use the simulator to develop their projects. I've asked them how they can possibly put together a user experience without using the device every day. If you develop on the iPhone platform then we suggest you put a device in every members hands. It can be expensive but our experience has shown that we make better design decisions throughout the organization. For example, we're working on a project now that contains a bunch of touch buttons. We can't possibly determine the size of a button or spacing without trying a whole bunch of different size thumbs and index fingers on them

2. If you haven't, Read the Apple User Interface Specifications

Ug, I was evaluating a competitors product last night and it felt like I was using a web application that was squeezed into a mobile device. It just didn't feel right. There was even a help item which explained that I should "click" the Go button. Apple has spent lots of big money on user experience and when they claim that a button with round corners has a higher touch rate then my money will go with this type of element if it makes sense in the overall design.

Today we released the iHwy listmenu plugin, which allows a web developer or designer to convert a basic 'list' of HTML elements (UL, OL or any set of child elements) into a snazzy dropdown menu with letter-based navigation (ie: A | B | C | etc).

The plugin is very easy to use. In most cases all a web developer will have to do is create the list of elements and then use one line of jQuery code to convert the list into the navigation menu. When a user hovers over a navigation letter in the menu a submenu appears containing all of the items from the list that start with that letter.

The items in the submenu are arranged in nicely balanced columns. If the list was an ordered (OL) list, numbering starts at 1 for each letter and is maintained across the columns (top to bottom, left to right) for that letter. There are options to control the number of columns and the 'gutter' space between them, among other things.

The HTML generated by the plugin is designed with CSS styling in mind and a starter css file is included to help implement the plugin.

We tuned this plugin for speed and tested it in FF 3.x (Win/Mac), IE 6/7/8rc, Opera (latest), Safari (Mac 3.2.1, Win 4beta) and Google Chrome (Win) using jQuery 1.3.2 and 1.2.6 (1.3.2 is faster, probably because of sizzle).

This is great plugin for big product lists, address books, contact lists, etc. It makes a hard to navigate plain old list into something really compact and very easy to visually skim that's only visible when you need it.

Full documentation:

    http://www.ihwy.com/Labs/jquery-listmenu-plugin.aspx

Multiple demos:

    http://www.ihwy.com/Labs/demos/current/jquery-listmenu-plugin.aspx


This project grew out of the jquery listnav plugin that we released in late 2008 (and released a new version of today). It's been exciting to work on these contributions to the open source world. We hope you enjoy them!

Today we've released a new version of the jQuery ListNav plugin that we released in late 2008. This plugin creates a letter-based navigation bar (ie: A | B | C | etc.) for any UL or OL list. Clicking a letter in the navigation bar filters the list to show only items that start with the letter. When a user hovers over a navigation letter, an optional 'count' appears above the letter, signifying how many items are under that letter. Letters that have no items under them appear as "disabled" (via a CSS class you can set).

Full info is here:

    http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx

And here's a direct link to the demos:

    http://www.ihwy.com/Labs/demos/current/jquery-listnav-plugin.aspx

New features in this version:

1. By default, the nav bar now includes a [0-9] navigation button to show items that start with numbers. There's an option to hide that if you don't need it.

2. If you include the jquery.cookie plugin in your page, you can use the new ListNav cookieName option to have the listnav control remember the last letter your user clicked, then reload the list automatically to that letter when they return to the page.

3. Added optional onClick handler: you can fire a custom function after a navigation letter is clicked. The letter that was clicked is available as an arg for your custom function.

4. Dropped a few options that had to do with forcing CSS class names on the list: all styling is now handled purely via CSS.

5. Modified some class names used in the HTML that the plugin generates, to provide more a more unique naming convention and additional handles to style elements.

We enjoyed creating this new rev. There are still a few requests on our plate, including handling of DL lists and the ability to work with any 'list' of child elements. We've got those things on our radar for future releases.

Happy navving!