How to prototype selection-dependent inputs

28 May 2014 - 1:37am
27 weeks ago
5 replies
15682 reads
martinpolley
2007

Hi folks,

When you're designing a form, being able to change the inputs based on a user action is really powerful. It lets you hide complexity from the user and makes your form easier to complete.

My latest post on Boxes and Arrows shows you how to prototype this kind of behavior in HTML (with a little help from JavaScript). You should give it a look:

http://boxesandarrows.com/forms-the-complete-guide-part-4/

Cheers,

Martin

Comments

28 May 2014 - 8:06am
Victor Lombardi
2003

Very helpful -- thanks!

29 May 2014 - 2:30am
martinpolley
2007

@victor Glad you liked it!

28 May 2014 - 8:26am
apbitner
2009

HTML prototyping may be appropriate for some folks, but interactions such as these can be prototyped very quickly without writing a line of code using conditional logic and dynamic panels in Axure.

29 May 2014 - 2:38am
martinpolley
2007

@Adam For sure! If you already know Axure, you're going to be able to prototype stuff like this more quickly and easily than in HTML. (Conversely, if you already know HTML/CSS/JS and have never touched Axure, you're better off doing it in HTML/CSS/JS.)

But I'd argue that if you don't know either (and if the thing you're designing is for the web), there are advantages to learning enough HTML, CSS, and JS to be able to use it for prototyping. For one (and most importantly, IMHO), you'll have a better understanding of the constraints and opportunities of the medium. (Another: it also facilitates better/closer cooperation/collaboration with developers.)

But generally, the best tool is the one you know :)

29 May 2014 - 7:55am
DrWex
2006

Ah, where's that old "+1" button.  We all need to continue to grow our skills, but not when working on someone else's deadline.  Effective >> optimal pretty much all the time, I think.

Syndicate content Get the feed