Conservative Design Patterns for Form Elements
Have you ever been to a web site that looks as though it has been built exclusively using pre-made bulky widgets cookie cuttered right onto the page? Lovely grid components, sweet over-featured WYSIWYG editors, maybe a Google or Yahoo map thrown in on the page for good measure. Conformist web sites using the conditioning forced upon them by time, executive, or work-ethic based constraints. The widgets on these websites either seem too bulky, reinventing the wheel with avant-garde user interaction for a confusing user experience, or they are just too lightweight to justify using at all.
What I’m proposing is a standard set of Design Patterns for form input, as an extension to already existing HTML form elements. By describing the best practices for certain use cases of input, we can form a set of building blocks that can be used to enhance existing forms, instead of replacing them with totally new ways of user interaction.
So keeping away from the spirit of inventing names for things that are already being done, I won’t be trivializing this idea with a catch phrase. Instead I hope you will realize the value of BUILDING BLOCKS over cookie cutters.
Spectrum of GUI Elements
Raw HTML Inputs (Text, Password, Select…) -> Smidgets -> Full Blown Widgets (Editable Grid, Rich Text Editor)
- Toggle Option On or Off (Toggle)
- Select 0-1 Options From a List (Select1)
- Select 0 Options From a List (Select )
- Input 0 Characters into an Element (InputX)
- Input is obfuscated to prevent from being read (Obfuscated)
To describe what we want, let’s first see what we have.
Existing HTML Elements
- Buttons (clicking performs a data altering action or form submission action)
- Push (without attached behavior)
- Checkbox (Toggle)
- Checkbox Group (Select )
- Radio Group (Select1)
- Select Single (Select1)
- Select Multiple (Select )
- Text (InputX)
- Textarea (antiquated due to CSS styled word wrapping multi line Text input) (InputX)
- Password (InputX, Obfuscated)
And because this is going to be a series, I’ll continue with my first case of a Conservative Design Form Element in a new post.