Resources . Articles . UI UX and more

UI/UX

Designing Perfect Text Field: Clarity, Accessibility and User Effort

• Clarity
  • Clear Text Label
    • in most cases you should provide clear, always visible labels for each input field.
  • Short Text Label
    • Labels are not help texts.
    • You should use succinct, short and descriptive labels (a word or two) so users can quickly scan it.
  • Proper Field Size
    • If input fields are sized according to their expected input they are both easier to read and to interpret for users. Your field should be big enough so that most possible field values are visible.
  • Focus for Input Field
    • You should provide a clear visual notification that the focus has moved to the input field when user click/tap on it
  • Input Hints
    • For example, a simple phone number can be written with a ‘+’, a country code, an area code, or without any of these. You can solve this problem by showing instructions, examples or hints to help users figure out what format they should use for this field.
    • The phone number field can be auto-formatted. This eliminates any formatting ambiguity the customer might have had.
    • Input field placeholder text can also be used for short descriptions and formatting examples, although they have the inherent drawback of disappearing as the customer types.
  • Helpful Information
    • Helpful information (or accompanying text) should be used only where needed, such as to explain why credit card data is being requested or how a birth date will be used or to link to the “Terms and conditions.”
    • As a rule of thumb, do not exceed 100 words of explanation.
  • Mobile-only: Match the Keyboard With the Required Text Inputs
    • Users appreciate apps that provide an appropriate keyboard for text entry.
  • Accessibility
    • Goal: Make input field easier to scan/fill out for users of all abilities
    • Avoid Caps Labels
      • You should never use all caps, or else the labels would be difficult to read and much harder to quickly scan, as there are no differences in character height any more.
    • Font Size
      • Your fonts have to be big enough to be legible. A safe bet is to use 16 pixels for body copy. When in doubt, bigger is better.
    • Label Color
      • The label’s color should reflect your app’s color palette, while also meeting appropriate contrast ratios
        • Small text should have a contrast ratio of at least 4.5:1 against its background.
        • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.
    • Provide Easily Tappable Areas
      • Make your targets big enough so that they’re easy for users to tap.
      • A rule of thumb is 45–57px for a touch target, but for mobile that often result in fields which look obnoxiously large.
      • Sizing input fields between 32px and 40px in height makes your field finger-friendly and not very large at the same time.
    • Desktop-only: Make Input Field Keyboard-friendly
      • Users should be able to trigger and edit every field using only the keyboard.
      • People who use keyboards heavily or exclusively, should be able to easily tab through the fields and make necessary edits, with only the keyboard.
    • User Effort
      • Goal: Minimize user input
      • Smart Defaults
        • Entering data into fields is a chore and not a fun activity.
        • Thus, you should anticipate frequently selected items and make data entry easier for the user by providing fields with pre-populated smart default values 
      • Autocomplete and Autosuggestion
        • It’s especially valuable for users with limited text literacy or who have difficulty with spelling, especially if they are using a non-native language.
        • Proper autocomplete and autosuggestion functionalities significantly speeds up the user’s actions.

Badger Accordion — An accessible light weight, vanilla JavaScript accordion with an extensible API
On Designing and Building Toggle Switches ARIA Switch Demo
Building a fully-accessible help tooltip
Enter The Dragon (Drop): Accessible List Reordering
How To Use Underlined Text To Improve User Experience
Accessibility: Improving The UX For Color-Blind Users
Designing A Dementia-Friendly Website
"It's Alive!": Apps That Feed Back Accessibly

Emoji

'Loudly Crying Face': Your cute emojis are spoiling social media for blind users

Navigation

I Used The Web For A Day With Just A Keyboard
Designing Accessible Navigations
Building Accessible Menu Systems