UX Design Challenge: Accessible Form

Design challenges in the UX Techdegree allow you to improve your design skills through feedback and repetition

Jun 29 · 5 min read

The UX Techdegree is a bootcamp-style program that teaches you user research methods, wireframing, design patterns, prototyping, and more.

For me, it was a great way to modernize my existing design skills. It was self-paced enough to work with my schedule and structured enough so that I could get help and feedback when I needed it.

One of the benefits of any Techdegree is having access to a Slack group, and you don’t get kicked out once you finish.

After I graduated from the UX program, they began to offer design challenges. Even though I’m done with the Techdegree content, I jumped at the chance to continue sharpening my design skills.

The first design challenge:

Design an accessible form that uses accessibility standards and best practices. Research to learn more about accessibility for forms.

Sketch and think through your form design. Wireframe the design in any fidelity. Explain why your form is accessible so other students can learn.

I have a solid foundation of accessibility knowledge gained during my time in the Front-end Techdegree, so I didn’t have to do much research to get started. I moved right into sketching a couple of form designs with labels and placeholder text with my iPad, Apple Pencil, and the Procreate app.

Initial sketches of accessible form design created in Procreate on iPad

My Design Explanation

Header

Include a clear image with branding and page title so users know where they are and what to expect. Screen readers can’t see images, but they can see text. So it’s important to provide both in the page header.

Form Structure

Labels for each form field allow users to click the label text to be taken to the next field automatically. Labels also assist users with motor disabilities select small elements like radio buttons and checkboxes.

Form placeholder text lets users know which fields are required and what kind of information the field is expecting from them.

Form legends provide groups for form controls and let assistive devices know which form fields should be grouped and filled out together.

Navigation

The progress bar lets users know how many steps are in the process. It promotes information transparency and encourages users to finish filling out the form.

Buttons

The buttons were designed for priority. The submit button comes before the reset button because submitting the information is the user’s main goal.

The buttons are different colors because each one has a different functionality. One submits user information and one clears the form and lets the user start over.

While creating my low fidelity wireframe, I came across this awesome pirate-themed lorem ipsum generator. Not content to stop the fun there, I decided to add another layer to the project and design it as if my end user were a pirate.

I’m a huge fan of the Monkey Island pirate games from the ’90s, and once I got going with the pirate thing I just couldn’t stop. 🏴‍☠️🤣

Fictional pirates and real pirates throughout history would have significant challenges around accessibility if they were to use a website, so the theme seemed perfect for this project.

When thinking of pirates, the colors that came to my mind were ship and sand-like brown and treasure-esque gold tones.

Low and medium-fidelity wireframes created in Adobe XD

I shared my initial wireframes in the Slack group for feedback, and a fellow designer suggested I left-align my placeholder text:

“I would suggest having the placeholder text left-aligned to go with the labels and make it faster/easier to read. Right now my eyes go back and forth from label to placeholder, label to placeholder.”

With feedback in hand, it was back to the Adobe XD artboard for design iteration number 3.

While no one mentioned my color choices, I wasn’t happy with them. I love fictional pirates, but I’m also a history nerd. I know that the voyages of real pirates were often sponsored by a monarch. Think Sir Francis Drake and Elizabeth I of England. 👑

Purple is a color often associated with monarchy, and it’s also used a lot in modern web design. I thought it was a better choice than my initial gold and brown-toned color palette, as it gives a nod to history while pleasing a modern eye. So in design iteration 3, the color palette shifted from gold/brown to purple.

I could have stopped with the challenge at this point, but I’ve been itching to re-do the sign up form project from the Front-End Techdegree. So I decided to create the pirate form in code as well.

My initial code for the first sign up form I made was more div soup than semantic, and this design challenge seemed like the perfect opportunity to revisit semantic HTML concepts.

Also, the CSS I wrote was a mess and needed a good DRY-ing out. (DRY: Don’t repeat yourself) While Sass is definitely overkill for a project this small, I needed practice working with it. So Sass it was!

I’m happy to report that I used one div in the project to align the send and reset buttons side-by-side on larger screens. Which is a massive improvement on the last sign up form I coded. 👍🏼

<div class="buttons">          
<a class="btn--primary" href="#" role="button">SEND PARROT</a> <a class="btn--secondary" href="#" role="button">ARR! RESET</a> </div>

I also got a chance to work with some things outside my comfort zone, such as clip-path in CSS and for loops in Sass.

header {  
height: 85vh;
background-image: linear-gradient(to right bottom, #333333cf, #772dcbc9, #c871fabf), url('../images/compass.jpg');
background-size: cover;
background-position: center;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 70vh, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 70vh, 0 100%);
position: relative;
}

As I have more time to work on this project, I’m confident I can make further accessibility and layout improvements. First on my list are the position of the checkboxes on iPad screens and Google Pixel phones.

I’m looking forward to completing more design challenges and squeezing as much value from them as I did with this one. I love the chance to flex all my budding skills at once: design, sketching, wireframing, UX writing, and HTML/CSS. 🎉

Nicole Peery

Written by

Front-end web developer | Desert dweller | Tiny space live-r | I write about desert living, web development, productivity, & more.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade