Hot answers tagged

31

All the information in the other answer about colors, contrast, etc. is valid from a general design perspective. But words matter a lot. In particular, users may get very confused about "this dialog". The original "Edit content" box is a dialog. But so is the popup "You have unsaved changes" box. The popup needs to be clear what ...


23

How about a combination of a slider and a spinner (number stepper)? How does this work? I am glad you asked... Your list of values is effectively an array. So rather than the slider having a list of values, it just works on the indices of the array. So if you have 10 values in array, then slider handles values 0-9. This solves your technical issue because ...


21

It's not a matter of better, it's what is the problem trying to be solved. I don't have any real details about your use case, but you can see some logic applied across a range of domains. A: Open in application tab This allows for a feeling of continuity inside the application. These tabs are usually located in subnavigation, so they provide specific ...


18

Actually, the content of the question should be understandable just by looking at the two images and without any explanation. But, personally, it took me a while to understand the images were related and then I understood their content. Why? In the first instance there is too much visual information in just two windows: Highly saturated colors Too many ...


16

As others have noted, we don't know what the actual use case is here. The OP has asked an isolated question out of context of the environment in which it's intended for use, and that's absolutely the wrong way to design an interaction. I highly suspect that this is an X-Y problem in that the question has been posed to solve a secondary problem Y, which is ...


13

How about a slider connected to a listbox (please be advised, the following imagery is garish and not for the faint of heart :) ) Or It allows a coarse selection with a slider and fine-tuning with the listbox. Bonus points if you make the selected value editable and the change will slide the slider and move to appropriate rounded value in listbox (In other ...


7

The dialog isn't using proper wording. When the dialog has text saying "close this dialog" in it, it's referring to the dialog, not the Edit Content screen. The buttons say "don't close" and "close" which sound like window controls. The dialog asks about closing while the Edit Content window says cancel. The buttons on the ...


5

The reason you see that on the Material UI website is due to it's sheer scale across the world. Showcasing that they have a RTL version is in their best interests as they reach an even bigger audience. Don't be fooled though, most of the frameworks include RTL options, for example Bootstrap has a RTL version, foundation also has a RTL version they just don't ...


5

It is better to go with a simple input field that only accepts numeric values to min and max of 0 and 1000 respectively. i.e Letting the user enter the numbers from the keyboard. Use JavaScript to only allow divisible by 5 numbers. Show proper validation color codes to guide the user. To make UX better on Mobile and tablet, we can use HTML attributes like ...


5

The tabs belong to the application, not the browser, a browser is a different application. Answer: A – Tabs that open directly on the application page


5

Overall my opinion is that using browser tabs would be the more familiar experience for the user and easier for them to work with. Absent compelling reasons to use in-app tabs, the overhead of implementing them and the potential confusion to the user seem like good reasons to avoid them. Some thoughts on preferring browser tabs: the user is already familiar ...


4

That depends on how tabs/pages are related in your application; but speaking of a more general scenario: Are the tabs related amongst them i.e. different parts of the same information? Or are them different instances of the same page with different information? In the former, tabs inside the app make sense, while in the latter navigator tabs (or "...


4

Another option here is to modify the original cancel button in some way (I’ve had success in the past with turning it red, and replacing the text with “Are you sure?”), and requiring a second click for confirmation. You’d probably also want a timeout so a double click doesn’t accidentally trigger the confirmation.


3

Yes indeed. This is known as the Principle of Intentionality. You can learn about it in a psychology oriented article A Principle of Intentionality, and the UX-focused article Intentionality in User Experience (disclaimer: I wrote it). Simply put: your user will want to perform a single action, or a limited set of actions. Let's say your documentation's ...


3

Application Tab If you need some special/specific behaviors that can't be (easily) replicated using browser tab. i.e. Code comparison, search in all tabs/files,... like in web IDEs. Detach/Attach, show/hide, lock/unlock tabs/windows positions in image editor. If you need to synchronize data between tabs. i.e. When I click Save, I want to save the data in ...


3

See each button as a stack of buttons of the same kind. When you drag an instance from the stack, the next one appears. But when it is the last one there is no next button underneath.


3

I like (and have personally implemented) the type of control described in musefan's answer. Such controls have their upsides and downsides, which need to be carefully considered. Here is an alternative worth presenting: Would the user be good with the website matching the nearest acceptable value (rounding up or down, depending on which provides better UX)? ...


3

For me the combobox is the control for "a set list of allowed values". Use a combobox that filters the values based on the typed in value in such a way that the nearest values above and below the input are shown. That way you dont have a bazzilion things in the drop down except when the user wants to. If you want to you could combine it with a ...


2

Just let them type it in and do input validation. Save yourself a whole lotta headaches.


2

I think the technique in your Picture A, disabling the button and showing a tooltip when you can place no more, looks fine. It is very similar to how the video game Super Mario Maker 2 handles this same problem. Super Mario Maker 2’s UI for parts with limits Super Mario Maker 2 is a game that lets you build custom levels by adding parts to your level from ...


2

It doesn't matter. First of all, remember Material is a set of suggested guidelines. You don't have to follow them to the A (although it's a good idea in some cases, especially if you need to slap something fast). However, Material is quite flexible when it comes to desktop. You can see that in Material's site: Dense Desktop Example Prominent Dense Desktop ...


2

Yes of course. Backgrounds (and colors in general) are used for different purposes, including highlighting elements and whole sections. A completey different background will create a sense of alert and users will pay special attention to that. However, if all backgrounds are different, or if they follow some kind of pattern, this sense of alert ceases and ...


2

Creating 2 on-boarding experiences will add complexity. When I have gone though an boarding, similar to what you have described, the entire environment is in a playground (new and empty). Once the user has 'graduated' from the tutorial, they are then placed inside their production environment with the shared files present. In some cases the user can just ...


2

What you are asking can also be categorised as "User Consent". As per GDPR, it is mandatory to take the Consent of the user to collect data and use the data for push notification. However, in-app messaging, which is considered as part of the app experience, does not actually require an opt-in from the user. Although, be careful, as not all in-app ...


2

Try to work with a single window. Have the buttons say: Save edited content Discard changed content Or something like that. Much less thought required. You could add additional hover info on the button if someone can't figure it out, stating "You will discard all changed made on the content" and "You will save the changes to the content"...


2

Try to minimize unexpected popups Since a Popup will stop the user in their tracks and breaks their train of thought, you can try to minimize these dialogs. Alternatively you could immediately close the editor, but diplay a small notification: Your changes will be discarded. [Reopen Editor] So the user has a way to get back to the editor if he closed the ...


1

Try offloading the action to a single label (a text button) at the end of the statement, and have an input to select the quantity as a separate control. This way a user can select the quantity from a combo text input / dropdown (and you can use a tab index, so users can navigate into the field via the keyboard), where there's an 'ALL' selection, or user can ...


1

A visually hidden label is generally only used to benefit screen readers where there is something visual on the page that isn't conveyed. That is, if the design of the page implies a label is associated with an element through some visual connection but there isn't really a "programmatic" connection between the two elements, then adding a hidden ...


1

So, I'm wondering... Is the time frame (eg 07:00-10:00) more important than the length of the session (3 hours)? I've prepared another concept of time tracking, in which the user's task is to report how long an action took, as opposed to when it was.


1

The most important thing about your interface is not even how, but just the fact that something is happening during the waiting time. We all know systems where you press a button and then it says "Please wait" - and you don't know if you should still wait or if the thing has been stuck for half an hour. (To make a mockery of it, an animated GIF is ...


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