Tag Info

Hot answers tagged

7

How you choose to mark fields as required input is not a part of material design. You've already noticed that some applications choose to use the validation error "This field is required" after the fact while others choose to do it another way. Regardless of how you choose to indicate required fields be sure to give some sort of immediate feedback to the ...


5

User experience is different from data design Developers who move into UX often forget this important perspective change. Users don't think in terms of CRUD. They usually think in terms of what they want to get done. Some examples: For a micro blog, an author might want to create, update, and delete posts from the same convenient interface. For a ...


5

Material design is silent on required fields. However, the Material Design documentation shows this interaction example for a required field: Additional suggestions: I am not a fan of the asterisk because it doesn't communicate 'required' clearly and can cause anxiety or frustration with users, especially if no tooltip or legend is provided. Material ...


3

You can add an overlay on the graph if the data and filters mismatch prompting user to refresh / reload / load the graph again. However it does not end there. I wonder if users are expecting the graph to refresh when they select the second value. How your application behaves in other similar scenarios? Are actions auto triggered on selection or there are ...


3

Navigating as a side effect of some other action is not a good idea, I feel. Similar to pushing the user around... Why not show an empty Topic page where some stuff looks like it will look after approval, such as title and creator link (if any), while the content area (where posts will appear after approval) shows a message saying "Topic is waiting for ...


3

Three dependent values got me thinking about electricity and the rules of thumb for calculating power, current and voltage or current, voltage and resistance. In this Ohm's law calculator (at the end of the page) user has to enter two and only two values and click "Calculate" to get the third one. It's easy to click reset and to enter new values but if the ...


3

The Material Design documents are very well written, but one of the surprising omissions is the lack of examples for forms. That said, your issue is easily answered: Submit buttons are the same as other buttons in material design The choice between flat, raised, and floating styles for a submit button depends on the context of the form. For example, if ...


3

In most cases, dismissing the modal keyboard on a non-modal (or "click outside") tap provides a better user experience. Here's why: Slide-in keyboards are very intrusive. They occupy an enormous amount of the screen, even on tablets, and even if the form isn't occluded by the keyboard, user perceive a physical sense of intrusion when the keyboard shows ...


3

One relevant study that springs to mind is described by Luke Wroblewski in Inline Validation in Web Forms. It found that validating inputs prematurely can be harmful and that validating fields after input helps users to complete forms more quickly and accurately. To better understand when to show inline validation messages, we tested a few variations ...


3

Hiding the submit button is not part of progressive disclosure. The only case where a submit button is not available upfront is probably within a Staged disclosure where there are a number of interdependent steps displayed in a wizard or similar pattern and submission taking place as part of the last task in the process: see below for distinction between ...


3

In most cases this is not a good idea. It comes down to UX goals: The main goal of a credit card form is usually to get the user to complete a purchase. Error correction and validation is only useful if it helps you accomplish that goal. The Buy it now, Purchase it, or Complete purchase buttons are usually excellent opportunities to display a clear ...


3

By auto-selecting if there's just one option you make things significantly easier for your user. Consider the comparison (which focus on one selection): No Pre-selection, text box User clicks checkbox Moves across to text box Enters some value Validation passes / fails Form is submitted No Pre-selection, dropdown User clicks checkbox Moves across to ...


2

There are expectations at play — users have an idea of the form and would want to see button there, otherwise the whole component would seem incomplete/broken. Disabled button implies visually that user has to complete the form (correctly) before it can be submitted. By hiding the button, you are hinting that there is no such condition. As users know from ...


2

According to me and based on the mistakes i have made in the past, putting any kind of condition for the user is not a good idea. Instead of showing countdown, you could tell them more about advantages of opening an account with your service. They should find value in opening an account at first place. People would die to open an account only if you are ...


2

Let focus the user on a single task, the registration. Then ask the user to invite others – colleagues and friends – in order to share the same experience. The onboarding is a very critical step and if you add too many features the risk is that the final user experience get complicated.


1

Modal boxes are helpful for quick tasks or small notices where it is too cumbersome to load a new screen, and the user will want to return to the main screen after processing the modal. It's sometimes okay for modals to overflow a window (see pinterest for example). The form you are describing seems like the opposite of this situation: It has a lot of ...


1

This start/end dates problem is quite common in UX. With accounting, for instance, there is often the invoice date and (payment) due date - but there users are often interested in days (period) rather than due date. Anyhow, your solution is not bad at all. You could add lines to create a better visual grouping between the fields and the icon. The obvious ...


1

What about simply swapping the icon for a button with the text "Update chart" ?


1

First and foremost: You should think about satisfying the needs of your users. No SEO argument should stand in the way of providing them with the tools they need. With that in mind: Breadcrumbs do highlight important keywords for search engines but most importantly they act as secondary navigation and help users know where they are within a website ...


1

I believe I had a project that had a similar requirement. I think what I did was require a minimum WIDTH/HEIGHT in this case 350px by 500px and I set a max so people didn't upload crazy sizes (5mb for example) Then I used CSS and set the max-width and max-height on the image to make it stay within the proportions I required. Kind of like this: ...


1

A few thoughts: Given the layout you provide, 500x530 seems much bigger than would be needed. Something closer to 300x210 would seem more appropriate. For very wide browsers, you could always go more than 4 across and cap the image size at 300px wide. With regard to image size requirements, I see a few possibilities: Don't require a specific size, but do ...


1

Feedback If your entity creation process has "serious" implications for your users, and especially if it may involve them taking actions outside your app (booking a ticket somewhere, buying something and retrieving a tracking number), you may want to print a summary page where they get key information about how you identify the entity they've created and ...


1

This is a common problem, not only with Material Design but also with broader responsive design. In responsive layouts one cannot depend on screen sizes and scaling can only take you so far, so layouts tend to involve a lot of open space to allow for sizing tolerance. The good news is, Material Design recognizes this issue and incorporates a set of design ...


1

If the users know what they are looking for I would use a typeahead box. You can let both the technical name and the human readable name be searchable. Example of a typeahead input field: https://twitter.github.io/typeahead.js/


1

Consider yourself to be a very rich man. So rich that there's a fridge attendant in your house whose only role is to open and close the fridge: You come home one day and approach the fridge, saying loudly "Oh, I'm starving". The attendant picks the cue and opens the fridge. At this point you may pick something from inside. Regardless, you perform an ...


1

The idea of showing the item in your list is good - having it disappear or not labeled as "Discontinued" would be jarring and confusing. Using the disabled style sounds fine. The product selector should be easily found from looking at the discontinued line item, and the discontinued item shouldn't be listed in the product selector.


1

In all other cases, when the product is discontinued, do you plan to show it in the selector? I would advise against it. You are talking about a case where use has an un-submitted order of a product that is discontinued. I am assuming the errors are shown to the user when user goes to interact with that particular order (either save/submit it). I would go ...



Only top voted, non community-wiki answers of a minimum length are eligible