UX Playbook: Forms
•Download as PPTX, PDF•
1 like•308 views
Make a difference tomorrow. Make minor changes in your forms to increase conversion.
Recommended
Recommended
More Related Content
Similar to UX Playbook: Forms
Similar to UX Playbook: Forms (20)
Recently uploaded
Recently uploaded (20)
UX Playbook: Forms
- 2. Make a Difference Tomorrow Part 2: Form Design
- 3. Make a Difference Tomorrow Part 2: Form Design
- 6. culturespirit.com ● Vision (blindness, color blindness, low vision) ● Auditory (various levels of deafness) ● Cognition (ADD, ADHD, dyslexia, etc.) ● Translation (language, illiteracy) ● Mobility (dexterity, arthritis, paralysis, injury) Accessibility.
- 7. culturespirit.com Old UX Awesome Chart Accessibility. Circa 2004
- 8. culturespirit.com New UX Awesome Chart What good is a design… if it’s not accessible? Accessibility. Circa 2015
- 9. culturespirit.com “Think before you link.” ~ Neil Milliken @NeilMilliken This is what your “click here” links look like to a screen reader. Accessibility.
- 10. culturespirit.com Accessibility.Forms Forms are the most overlooked, under-scrutinized part of many digital products. Forms are CRITICAL for: • Participation • Retention • Conversion INCOME DUMMY
- 11. culturespirit.com Accessibility.Forms Inputs (text, select, dropdowns…) Email Address john.smith@emailaddress.com Email Address Email Address EX: john.smith@emailaddress.com BAD BETTER BEST
- 12. culturespirit.com Tappable… PADDING MARGIN Tappable Area Bad Idea Accessibility.Forms
- 13. culturespirit.com Tappable… chris.feix.71@gmail.com Email Address EX: john.smith@emailaddress.com chris.feix.71@gmail.com Email Address EX: john.smith@emailaddress.com Accessibility.Forms
- 14. culturespirit.com Obfuscation •••••••• Password Must contain at least 8 characters comprised of letters, numbers, and at least one symbol. •••••••• Password Must contain at least 8 characters comprised of letters, numbers, and at least one symbol. SHOW Accessibility.Forms
- 15. culturespirit.com Obfuscation 5oftT@c0! Password Must contain at least 8 characters comprised of letters, numbers, and at least one symbol. X HIDE PASSWORD Accessibility.Forms
- 16. culturespirit.com 5 Password HINT: 7 more characters A number A symbol HIDE 5oftT@ Password HINT: 2 more characters A number A symbol HIDE 5oftT@c0 Password HINT: 8 characters A number A symbol HIDE Expectation… Accessibility.Forms
- 18. culturespirit.com Conversion If it can’t convert a user into a customer, what good is it?
- 19. culturespirit.com Conversion.Forms HTML Attributes Standard Keyboard Numeric Keyboard Web Keyboard
- 20. culturespirit.com HTML Attributes .com .net .org . Conversion.Forms
- 21. culturespirit.com HTML Attributes gmail.com yahoo.com hotmail.com chris@ .com .net .org . Conversion.Forms
- 23. culturespirit.com Buttons… CancelNext × Cancel Next › Conversion.Buttons
- 24. culturespirit.com Buttons… × Cancel Next › × Cancel Login I forgot my password.? Conversion.Buttons
- 27. culturespirit.com Rule 1: Use Action Verbs Conversion.Buttons
- 28. culturespirit.com “Don’t tell me what to think, tell me HOW to think.” ~AP Gov Conversion.Buttons
- 29. culturespirit.com Rule 2: Use Precise Diction Conversion.Buttons
- 30. culturespirit.com Rule 3: Use Task-Specific Language Conversion.Buttons
- 31. culturespirit.com Rule 4: Use the Active Imperative Form Conversion.Buttons
- 32. culturespirit.com Rule 4: Use the Active Imperative Form Conversion.Buttons
- 33. culturespirit.com Rule 5: Use Sentence- Style Capitalization Conversion.Buttons
- 34. culturespirit.com Rule 6: Order Buttons in Scanning Order Conversion.Buttons
Editor's Notes
- (Tell story of Stockholm “Funka Nu” Conference.)
- Now more than ever, as product designers, we need to be focused on accessibility. Late in 2014 I designed this UX chart I call “Is it awesome?”
- As you can see the foundation of “Is it awesome?” is accessibility.
- As you can see the foundation of “Is it awesome?” is accessibility.
- As the founding Designer for MonsterCommerce (now Network Solutions Commerce), I learned fast how important conversion was.
- Luke Wroblewski writes of a study that determined top-aligned labels result in the shortest completion times, due to the reduced amount of eye movement needed. Placeholder text (a.k.a. hint text), on the other hand, is generally agreed to be the opposite of helpful. Including the label as placeholder causes it to disappear once the field gains focus, meaning the user can no longer view it. This causes strain on short-term memory and increases the chances of error.
- Actually, with any tappable area you design, (when able) use padding over margins.
- Make sure your forms are “tappable” even with fat fingers like mine. Also make sure your forms are Tab tested. Mean each field can be tabbed through.
- I have 300 accounts scattered all over the web. And they make it so you can’t remember them. Numbers, lowercase, uppercase, symbols… Now let’s make it even harder by hiding what I’m typing, right? Unless I’m at an ATM or checkout, or on a giant screen in a public place - show me what I’m struggling to type.
- Better yet, make the default as shown and give me the option to hide it.
- Even better still… SHOW ME HINTS ALONG THE WAY.
- A mask only appears once a user focuses on a field, preventing the scanning issue. Masks format the text automatically, while the field is being filled out, allowing users to focus on the required data and more easily notice errors.
- And let’s start with mobile keypad displays. If I’m being asked to fill out an email field, I don’t want to be shown the standard keyboard. But also, I feel like the Web keyboard is missing a few things...
- Some devices will give you a few URL suffixes and a dot. But some don’t.
- You can fix this for the user by adding an (at) sign trigger.
- I LOVE prefills and typeaheads. It saves my from typing everything, tabbing between address, address 2, city, state, zip.
- How many of you have clicked the wrong button? Everyone. It’s not your fault.
- Come up with a solid button standard and follow it throughout your product. I have my own formula that work well for me.
- First it’s colors. I use blue for “finalizing”. Like a submit button, or post, send, anything that is NOT going to show me another step, or a verification. I use green for those. Next, Verify, “On to Step 2”. Then use a muted color (light grey) for Cancel, Browse, Upload.
- Second I have placement rules I follow. Cancel to the left, next or submit to the right. If there is a submit AND next style button, I put the next-style button to the far right.
- 5 Rules for Choosing the Right Words on Button Labels by UX Movement
- 5 Rules for Choosing the Right Words on Button Labels by UX Movement
- “Delete” implies that the button will erase the item from the system. “Remove” implies that the button will separate the item from a group.
- Users need to know the end result of their actions and only task-specific language can do this.
- Too many words on a button label makes users read more. When you use the imperative form in an active voice, you minimize the number of words and make the button label easier to scan.
- Users trust commands on button labels more. It gives them certainty that the button will perform the intended action, which helps their decision-making.
- Users are most familiar with sentence case because they’re used to reading sentences. When they read it on your buttons, it feels like someone is speaking to them in a natural voice.
- Users are most familiar with sentence case because they’re used to reading sentences. When they read it on your buttons, it feels like someone is speaking to them in a natural voice.