Tags: forms

147

sparkline

Saturday, August 3rd, 2019

Form design: from zero to hero all in one blog post by Adam Silver

This is about designing forms that everyone can use and complete as quickly as possible. Because nobody actually wants to use your form. They just want the outcome of having used it.

LukeW | “Mad Libs” Style Form Increased Conversion by 25-40%

I was chatting with Rachel at work the other day about conversational forms, and I mentioned that I kicked that whole thing off with the mad libs style form on Huffduffer. Here’s the research that Luke later did on whether this style of form could increase conversion.

Sunday, July 21st, 2019

Maybe You Don’t Need a Date Picker | Adrian Roselli

In some situations, a date picker is overkill:

I have relied on plain text inputs as date fields with custom validation for the site, typically using the same logic on the client and the server. For known dates — birthdays, holidays, anniversaries, etc — it has tested well.

Tuesday, July 16th, 2019

Initial thoughts on standardizing form controls | Greg Whitworth

Greg has done a lot of research into developer frustrations with customising form controls.

My current thinking in this space, and I know some folks will find this controversial, but I think we should completely standardize in-page form controls with no limitations on their styling capabilities. What do I mean by in-page controls? I am referring to any form control or component that is rendered within the content process. This standardization would include the sub-parts and their related states and how these are exposed (probably through CSS psuedo classes or HTML attributes). This will enable the shadow-dom to be encapsulated while providing web developers with a consistent experience to adjust to match their brand and needs of their site/application.

Thursday, July 4th, 2019

User Inyerface - A worst-practice UI experiment

It’s all fun and games until you realise that everything in here was inspired by actual interfaces out there on the web.

Monday, April 29th, 2019

Naming things to improve accessibility

Some good advice from Hidde, based on his recent talk Six ways to make your site more accessible.

Monday, April 8th, 2019

User interfaces: hiding stuff should be a last resort by Adam Silver

When we hide content, there’s a greater risk the user won’t see it. There’s a higher reliance on digital literacy and it’s generally more labour intensive for the user.

Worse still, sometimes we kill off essential content.

Sunday, April 7th, 2019

Drag’n’drop revisited

I got a message from a screen-reader user of The Session recently, letting me know of a problem they were having. I love getting any kind of feedback around accessibility, so this was like gold dust to me.

They pointed out that the drag’n’drop interface for rearranging the order of tunes in a set was inaccessible.

Drag and drop

Of course! I slapped my forehead. How could I have missed this?

It had been a while since I had implemented that functionality, so before even looking at the existing code, I started to think about how I could improve the situation. Maybe I could capture keystroke events from the arrow keys and announce changes via ARIA values? That sounded a bit heavy-handed though: mess with people’s native keyboard functionality at your peril.

Then I looked at the code. That was when I realised that the fix was going to be much, much easier than I thought.

I documented my process of adding the drag’n’drop functionality back in 2016. Past me had his progressive enhancement hat on:

One of the interfaces needed for this feature was a form to re-order items in a list. So I thought to myself, “what’s the simplest technology to enable this functionality?” I came up with a series of select elements within a form.

Reordering

The problem was in my feature detection:

There’s a little bit of mustard-cutting going on: does the dragula object exist, and does the browser understand querySelector? If so, the select elements are hidden and the drag’n’drop is enabled.

The logic was fine, but the execution was flawed. I was being lazy and hiding the select elements with display: none. That hides them visually, but it also hides them from screen readers. I swapped out that style declaration for one that visually hides the elements, but keeps them accessible and focusable.

It was a very quick fix. I had the odd sensation of wanting to thank Past Me for making things easy for Present Me. But I don’t want to talk about time travel because if we start talking about it then we’re going to be here all day talking about it, making diagrams with straws.

I pushed the fix, told the screen-reader user who originally contacted me, and got a reply back saying that everything was working great now. Success!

Sunday, March 24th, 2019

Always Own Your Platform

Stop giving away your work to people who don’t care about it. Host it yourself. Distribute it via methods you control. Build your audience deliberately and on your own terms.

Tuesday, March 5th, 2019

An exercise in progressive enhancement - DEV Community 👩‍💻👨‍💻

Hui-Jing talks through her process of building a to-do app on Glitch using a progressive enhancement mindset:

I found that HTML out-of-the-box takes care of a lot of things when it comes to collecting user inputs from the front-end, which resulted in much less code required. This is not to say client-side Javascript is bad, because the experience was smoother (and faster) when I used it for updating content.

Friday, February 22nd, 2019

Don’t Get Clever with Login Forms | Brad Frost

  1. Have a dedicated page for login
  2. Expose all required fields
  3. Keep all fields on one page
  4. Don’t get fancy

Saturday, February 9th, 2019

Oh God, It’s Raining Newsletters — by Craig Mod

After musing on newsletters, Craig shares how he’s feeling about Instagram and its ilk:

Instagram will only get more complex, less knowable, more algorithmic, more engagement-hungry in 2019.

I’ve found this cycle has fomented another emotion beyond distrust, one I’ve felt most acutely in 2018: Disdain? (Feels too loaded.) Disappointment? (Too moralistic.) Wariness? (Yes!) Yes — wariness over the way social networks and the publishing platforms they provide shift and shimmy beneath our feet, how the algorithms now show posts of X quality first, or then Y quality first, or how, for example, Instagram seems to randomly show you the first image of a multi-image sequence or, no wait, the second.8

I try to be deliberate, and social networks seem more and more to say: You don’t know what you want, but we do. Which, to someone who, you know, gives a shit, is pretty dang insulting.

Wariness is insidious because it breeds weariness. A person can get tired just opening an app these days. Unpredictable is the last thing a publishing platform should be but is exactly what these social networks become. Which can make them great marketing tools, but perhaps less-than-ideal for publishing.

Wednesday, January 16th, 2019

Signal v Noise exits Medium – Signal v. Noise

Traditional blogs might have swung out of favor, as we all discovered the benefits of social media and aggregating platforms, but we think they’re about to swing back in style, as we all discover the real costs and problems brought by such centralization.

Monday, January 7th, 2019

CSS-only multiple choice quizzing - Matthew Somerville

In which Matthew disects a multiple choice quiz that uses CSS to do some clever logic, using the :checked pseudo-class and counter-increment.

Oh, and this is how he realised it wasn’t using JavaScript:

I have JavaScript disabled on my phone because a) it cuts out most of the ads, b) it cuts out lots of bandwidth and I have a limited data plan, and c) my battery lasts longer because it’s not processing tons of code to show me some text (cough, Medium).

Wednesday, December 19th, 2018

ANDI - Accessibility Testing Tool - Install

Another bookmarklet for checking accessibility—kind of like tota11y—that allows to preview how screen readers will handle images, focusable elements, and more.

Tuesday, October 2nd, 2018

Form Design Patterns Book by Adam Silver

Oh, this will be good! Adam has been working on, thinking and writing about forms for quite a while and he has distilled that down into ten patterns. You just know that progressive enhancement will be at the heart of this book.

By the end of the book, you’ll have a close-to exhaustive list of ready-to-go components, delivered as a design system that you can fork, contribute to and use immediately on your projects. But more than that, you’ll have the mindset and rationale behind when or when not to use each solution, which is just as important as the solution itself.

Friday, September 28th, 2018

Jongert

Nick demonstrates the responsive power of variable fonts by recreating a lovely design from Jacob Jongert.

Grab that browser window and get squishin’!

Tuesday, August 21st, 2018

Monotype restored the font Walbaum, a 200-year-old serif typeface — Quartzy

The history and restoratin of a neglected typeface, complete with this great explanation of optical sizing:

Nix illustrated the point with an analogy: “Imagine if we all decided that 10-year-old boys would be the optimal human form,” he says. “Rather than having babies, we just shrunk 10-year-old boys to baby size, and enlarge them to the size of a full grown man. That’s kind of what we’re combatting.”

Tuesday, June 26th, 2018

The Layouts of Tomorrow | Max Böck - Frontend Web Developer

A walkthrough of the process of creating a futuristic interface with CSS (grid and animation).

While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today.

Friday, June 22nd, 2018

Offline-Friendly Forms by Max Böck

A clever use of localStorage to stop data from being lost when your visitors are offline.