Usually you see what works on desktop scaled down to mobile but, less frequently, you see mobile design patterns being ported back to the desktop. Someone took Square’s simple and intuitive credit card process and made it work on the web. Luke Wroblewski covers this story and walks through the concept of input masks. Of the three benefits he identifies, I am most interested in the latter:
Input masks constrain text entries to help people avoid mistakes… Input masks don’t just prevent errors, they can also guide people by presenting and maintaining input hints like specific formatting requirements. And last but not least, input masks can integrate multiple questions into logical sequences, keeping people from having to move between multiple input fields in a form.
Logical sequences are a concept that applies to mobile and desktop. At uShip, we extensively tested several versions of the shipment listing process, including one we called the Interview Listing Process. Our regular process was a “normal” form with a couple dozen questions spaced out over three to four pages. In contrast, the Interview Process spread out those same questions (1-2 per page) and used a more conversational question-and-answer style (e.g. instead of “shipment title,” we asked: what is the name of your shipment?).
Perhaps counterintuitively, the multi-page approach increased conversion rate in several important verticals. While the gains were not game-changing, it was an important incremental addition that paid dividends over time and across channels.