Menu
  • UX Trending
  • UX PODCASTS
    • DESIGN UNTANGLED
    • UX CAKE
  • UX Reading Room
  • UX Portfolio Building
  • UX JOBS
    • Atlanta
    • Dallas
    • Los Angeles
UXShareLab… everything you need to know about UX and more…
for the user experience design community

Search

Browse: Home   /   How do you deal with long labels using material design text fields?

How do you deal with long labels using material design text fields?

by UXStackExchange on December 17, 2015 in Devices, E-Commerce, Forms, General, gui-design, Information Architecture, input-fields, Interaction Design, Interfaces, JavaScript, LA UX Jobs, labels, Marketing, Material Design, Mobile, Personas, Product Strategy, Prototyping, Resources, Responsive Web Design, Stakeholder interviews, Testing, UI, Usability, User Experience, User Interaction, User Research, User testing, UX Design, UX Rockstars, UX Toolbox, Visual Design

enter image description here

I need to convert a form to material design guidelines but I don't think MD has considered how to deal with long labels on narrow forms. As you can see in my example I have 3 pairs of dropdowns that are well presented in the original form but runs into problems with MD. How would you deal with this? I'm leaning toward option 2, or not using MD at all for this form.

Tags: ux stack

Sign Up for the latest in UX News...

Enter your email address to subscribe to UXShareLab and receive notifications of new posts by email.

Join 834 other subscribers

Related Posts

How to Handle Indescribable Uniqueness in Design
How to Handle Indescribable Uniqueness in Design
conceptual, semantic, syntactic, and lexical levels
conceptual, semantic, syntactic, and lexical levels
what is a guerrilla testing? when to use this and what is the benefit of doing this testing?
what is a guerrilla testing? when to use this and what is the benefit of doing this testing?
What is the better way to show these icons selected?
What is the better way to show these icons selected?

How do you deal with long labels using material design text fields?

by UXStackExchange on December 17, 2015 in Devices, E-Commerce, Forms, General, gui-design, Information Architecture, input-fields, Interaction Design, Interfaces, JavaScript, LA UX Jobs, labels, Marketing, Material Design, Mobile, Personas, Product Strategy, Prototyping, Resources, Responsive Web Design, Stakeholder interviews, Testing, UI, Usability, User Experience, User Interaction, User Research, User testing, UX Design, UX Rockstars, UX Toolbox, Visual Design

enter image description here

I need to convert a form to material design guidelines but I don't think MD has considered how to deal with long labels on narrow forms. As you can see in my example I have 3 pairs of dropdowns that are well presented in the original form but runs into problems with MD. How would you deal with this? I'm leaning toward option 2, or not using MD at all for this form.

Tags: ux stack

Related Posts

Weekly News for Designers № 683
Weekly News for Designers № 683
Does the user want a notification when an action is performed successfully?
Does the user want a notification when an action is performed successfully?
Ui/Ux and graphic designer [closed]
Ui/Ux and graphic designer [closed]
How to design a form with many options?
How to design a form with many options?
← Would this approach to prompting the user to be added to a mailing list be received well?
Senior Creative Technologist →

Topics

uxstackexchange UX Jobs in Atlanta UX Rockstars UX UI design wordpress User Experience Visual Design WordPress Gutenberg UX Jobs Atlanta User Interaction user-behavior UX Jobs Los Angeles uxbooth Web Design WordPress Plugins UX Jobs Dallas UX Design Universal Design & Accessibility User Research UI User testing UX Toolbox web-app Usability

Feeds

UI UI design Universal Design & Accessibility Usability user-behavior User Experience User Interaction User Research User testing UX uxbooth UX Design UX Jobs Atlanta UX Jobs Dallas UX Jobs in Atlanta UX Jobs Los Angeles UX Rockstars uxstackexchange UX Toolbox Visual Design web-app Web Design wordpress WordPress Gutenberg WordPress Plugins

<span>recent posts</span>

  • UX in 2018: The human element

    • Anywhere
  • Three Takeaways from the Hawai’i Missile False Alarm

    • Anywhere
  • UX in 2018: Content

    • Anywhere
  • UX in 2018: Design, Development, and Accessibility

    • Anywhere
  • The Power and Danger of Persuasive Design

    • Anywhere

connect to uxsharelab

Enter your email address to subscribe to receive notifications of new posts by email.

UXShareLab. Copyright © 2018. All rights reserved.

  • Contact UXShareLab
  • UXShareLab Community
  • UX PROCESS
  • Recommended Reading
  • UX StackExchange