Imagine: Asseccible Signup Form

Imagine is my fictional brand created to showcase various projects, including personal, educational, or freelance ones that I cannot share due to NDAs or other restrictions.

I designed this sign-up/sign-in form mobile-first to ensure the same experience and visual hierarchy on different devices by:

• focusing on key inputs (email, password), there are no redundant entries
• placing input fields and buttons on the thumb zone of the screen
• arranging adequate white space, font sizes, and touch targets
• using a single-column layout
• providing visual consistency
• adding multiple cues - color, icons, heavy strokes, and helpful text

KEY DESIGN CONSIDERATIONS

Spacing:

• tappable/clickable area bigger than: 24 x 24 px
• button and input fields: 48 px height
• 16 px minimum spacing between interactive elements

Labels:

• clear and constantly visible
• more contrasting than the placeholder text
• always outside of the input

Text:

• short and helpful microcopy
• plain language without jargon or sophisticated technical language
• explaining what has gone wrong and how to fix it
• navigating what to do next
• following a concise and delicate manner
• presenting validation result below the input field

Lists:

• preventing errors from occurring and helping users fill out the form

Links:

• always underlined for easier identification

Colors:

• sufficient color contrast ratio, bigger than 4:5:1 between text and background
• the contrast between the input’s indicator (stroke) and background is bigger than 3:1, excluding inactive elements
• clear error states: red for failure, blue for success (in this case, green is a secondary brand color)
• providing other visual cues in addition to color

Modal:

• providing an option to autocomplete to help fill form field easily

I applied these considerations to comply with the WCAG’s requirements and to make a design inclusive for all users.

MORE TO BE DONE

• outline focus state with a relevant contrast ratio
• error summary with all input errors below the form
• adapting the flow for various technologies (mouse, keyboard, etc.)