Tags: input

52

sparkline

Friday, April 6th, 2018

Starability - Accessible rating system demo

Accessible star ratings (progressively enhanced from radio buttons) with lots of animation options. The code is on Github.

Thursday, March 29th, 2018

UX In Contact Forms: Essentials To Turn Leads Into Conversions — Smashing Magazine

The answers to these questions about forms are useful for just about any website:

  1. Is It OK To Place A Form In Two Columns?
  2. Where Should Labels Be Placed?
  3. Can We Use Placeholder Text Instead Of A Label?
  4. How To Lessen The Cognitive Load Of A Form?
  5. Are Buttons Considered Part Of A Form’s UX?
  6. Is It Possible To Ease The Process Of Filling A Form?
  7. Does The User’s Location Influence A Form’s UX?

Wednesday, March 28th, 2018

Nobody Said CSS Is Easy

One thing I gained a stronger awareness of (simply from working with checkboxes) is that it’s important to progressively enhance UI components, so that a fancy custom one is able to fall back to the default browser styles and functionality. This way, a user can still access the UI if JavaScript or CSS fail.

Saturday, January 6th, 2018

A Sliding Nightmare: Understanding the Range Input | CSS-Tricks

Ana goes into exhaustive detail on all the differences in the shadow DOM and styling of input type="range" across browsers.

I’m totally fine with browsers providing different styling for complex UI elements like this, but I wish they’d at least provide a consistent internal structure and therefore a consistent way of over-riding the default styles. Maybe then people wouldn’t be so quick to abandon native elements like this in favour building their own UI components from scratch—the kind of over-engineering that inevitably ends up being under-engineered.

Wednesday, November 29th, 2017

Accessible custom styled form elements - Rian Rietveld

An excellent level-headed evaluation of styling and scripting form controls, weighing up the benefits and trade-offs. The more tightly you control the appearance, the less you get to benefit from the functionality (and accessibility) that the browser gives you for free …meaning you’ve now to got to work harder to replace it.

HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible?

Monday, November 20th, 2017

Happier HTML5 Form Validation - daverupert.com

Dave uses just a smidgen of JavaScript to whip HTML5’s native form validation into shape.

Instead of being prescriptive about error messaging, we use what the browser natively gives us.

Wednesday, November 1st, 2017

Web Form Conundrum: disabled or readonly? | Aaron Gustafson

Good question! And a good answer:

If you really need it, which you probably don’t, readonly is what you want.

Wednesday, September 6th, 2017

Form Validation with Web Audio | CSS-Tricks

An interesting idea from Ruth—using subtle sounds to augment inline form validation.

There aren’t any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.

Thursday, July 20th, 2017

Designing The Perfect Slider – Smashing Magazine

If you thought Vitaly’s roundup of date pickers was in-depth, wait ‘till you get a load of this exhaustive examination of slider controls.

It pairs nicely with this link.

Sunday, June 25th, 2017

Implementing a slider well

A look at the feedback needed for a slider control that feels “right”.

You can get most of the behavioural (though not styling) suggestions in HTML by doing this:

<form>
  <input type="range" min="0" max="100" value="50"
   onchange="amount.value=this.value"
   onmousemove="amount.value=this.value">
  <output name="amount">50</output>
</form>

Tuesday, May 30th, 2017

Under-Engineered Custom Radio Buttons and Checkboxen | Adrian Roselli

Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.

No images were harmed in the making of these form controls.

Wednesday, March 22nd, 2017

Improve Your Billing Form’s UX In One Day – Smashing Magazine

A few straightforward steps for improving the usability of credit card forms. The later steps involve JavaScript but the first step uses nothing more than straight-up HTML.

WTF, forms?

Here’s a CSS file that will give you a bit more control over styling some form elements. The thinking behind the CSS for each element is explained nice and clearly.

Tuesday, January 31st, 2017

The ‘Credit Card Number’ Field Must Allow and Auto-Format Spaces (80% Don’t) - Articles - Baymard Institute

A deep dive into formatting credit card numbers with spaces in online forms.

Thursday, January 19th, 2017

Improving accessibility in Co-op wills – Digital blogs

Some interesting insights from usability and accessibility testing at the Co-op.

We used ‘nesting’ to reduce the amount of information on the page when the user first reaches it. When the user chooses an option, we ask for any other details at that point rather than having all the questions on the page at once.

Let them paste passwords - NCSC Site

Ever been on one of those websites that doesn’t allow you to paste into the password field? Frustrating, isn’t it? (Especially if you use a password manager.)

It turns out that nobody knows how this ever started. It’s like a cargo cult without any cargo.

Making input type=date complicated – Samsung Internet Developers – Medium

PPK has posted some excellent thinking on calendar widgets to Ev’s blog.

Monday, December 5th, 2016

We’ve updated the radios and checkboxes on GOV.UK | GDS design notes

I always loved the way that Gov.uk styled their radio buttns and checkboxes with nice big visible labels, but it turns out that users never used the label area. And because it’s still so frickin’ hard to style native form elements, custom controls with generated content is the only way to go if you want nice big hit areas.

Monday, November 21st, 2016

FormLinter—Detect common issues that hurt conversions

A little tool for testing common form issues.

  • Did we remember to give every input a label? (No, placeholders are not an adequate replacement)?
  • Do our labels’ for attributes match our inputs’ ids?
  • Did we take advantage of the url, email, and password input types, or did we forget and just use text?
  • Are our required fields marked as such?

Wednesday, November 16th, 2016

Usability Testing of Inline Form Validation: 40% Don’t Have It, 20% Get It Wrong - Articles - Baymard Institute

I saw Christian speak on this topic at Smashing Conference in Barcelona. Here, he takes a long hard look at some of the little things that sites get wrong when doing validating forms on the fly. It’s all good sensible stuff, although it sounds a bit medical when he takes about “Premature Inline Validation.”