I’m kind of a nerd when it comes to HTML forms. I love creating them and coming up with ways to organize them that make it easy to use. But I consistently come across a lot of forms during checkout processes, or signing up for a service, that do things that don’t make much sense to me, and annoy the hell out of me.
One common thing I see is bad usability in dropdown lists of countries. Today I bought tickets to the Rilo Kiley show at the Crystal Ballroom from TicketsWest.com. I didn’t have an account so I had to create one. I filled out my shipping information and when I got to the country selection, I was presented with this:
Why do I have to scroll all the way down to select United States when there’s a 99% chance I’m probably FROM the US and ordering tickets? It’s really frustrating to have to hunt for my country in a huge list.
Solution: Group most likely countries at the top
Chances are someone from the US or Canada are ordering tickets to a concert in the US, not someone from Armenia or Algeria. So put the most common countries at the top of the list, then separate them with a visual indicator. Get rid of ‘Select One’, since it’s a really good bet your customer is in the US (or the country your site is most popular in). Also, be sure to leave the countries in the list as well, in case someone is used to having to scroll and find their country.
Little tweaks like this to forms will not only make your users happy, but it leaves less room for abandoned purchases. The easier you make it for your users to buy, the more likely they will follow through. Every little bit helps.
What do you think? What are other usability issues you see when you fill out forms?
Finally HTML is going to get an update to version 5. With the update comes a big set of new tags that are more relevant to today’s Internet content. Some highlights:
- Section, Header, Footer, Nav, Article tags that replace all those divs we typically use for the same purpose
- The Aside tag, which is similar to a blockquote tag, but used for pullquotes, notes or sidebars of information
- Progress tag, with value and max attributes that can be used as a progress bar for processes in your page
- Video and Audio tags, to replace those messy object and embed tags
I’m excited to see how browsers implement the new spec, and how Javascript will be used to interact with the new elements (especially the progress bar).
Before the iPhone came out there was the announcement: the official SDK to make applications on the iPhone was HTML and Javascript, displayed in a web browser. I read a lot of comments complaining about that, programmers that wanted real hooks into the iPhone system. For instance, you can’t access the phone’s address book, voice mail, or photos with a web browser.
But I think Apple made a smart move. Making a web browser the official software platform allowed many more applications to be developed in a really short amount of time, since a lot more people can make web apps than can create native applications for OS X. And since a web browser is already the defacto communications conductor on the Internet, integrating the phone with information on the Internet is already done.
Why do I love developing for the iPhone?
- I get a fixed screen size. It’s almost like designing for print again. I get 320×480 to work with on my web app, and I can bet that won’t change for quite a long time. No more designing to work within a range of resolutions, I know my app will fit in the screen as I intended. It also forces me to be creative with the space I have, which is a refreshing coming from developing for desktop browsers.
- I only have to code for one browser. Actually, the best part is I don’t have to code for Internet Explorer. I know my site will render exactly as I wanted it to when I originally made it. The CSS will render predictably, and the Javascript will work like I planned. Also, Safari on the iPhone is a full-fledged browser that can do just about everything a desktop browser can do, not some crippled smartphone browser.
- It makes me think differently about user interfaces. The only time I’ve developed for a touch screen was for a small kiosk project that lived in a museum. Most people don’t have the opportunity to develop a site that will be used with your fingers. It changes your perspective on designing web applications when you don’t have the typical mouse and keyboard setup. It gave me ideas and inspiration to take with me back to the desktop world.
- It opens up a whole new range of applications. Ideas that were pretty good on the desktop are now more useful than ever. Location-based searching and apps like to-do lists and mileage logs make a lot more sense when the user can have it with them all the time, and not tied down to a desktop.
I have a feeling Apple will eventually open up the iPhone to allow developers to create native applications, but the web browser based SDK will probably stay the most popular. If I could develop iPhone web apps exclusively, I would. It would be so much more fun.
I was put in charge of going through an entire site to validate every HTML page, and the first thing I thought of was “how do I automate this?”. I noticed they had a Google sitemap, which makes it easier for Google to find and index content on a web site. Immediately I realized I could write a script to parse the sitemap file and go out and validate each page at the W3C Validator. As usual, someone has already thought about it and made a pretty web interface for it. Check out the Google Sitemap HTML Validator Tool that will open your Google sitemap and validate each page it finds and report the errors back to you. I love the Internet!