Tag Info

New answers tagged

0

If you want people to read them, minimize them. Reduce them into the smallest possible number of steps. Distill them into the shortest possible sentences, then cut them shorter. If you think they're too complex, they probably are. Simplify your application so they don't need as many instructions.


0

I think solution 1 is a good one and I've seen it used in practice frequently. As long as there aren't a huge number of steps the user has to click through to get to "I got it", this is a great way to demonstrate functionality of the application and ensure they understand what they're doing. As long as you provide a way to exit the tutorial (small X button ...


0

In your example, you should first consider how your users will most often be interacting with these buttons. A user who is interacting with a mouse will likely want the 'Approve' button on the left, where it is closer to the content. On the other hand, if your users are all interacting with your form via mobile touch screen, putting the 'Approve' button on ...


2

Considering your screenshot, as long as buttons for all rows are aligned and all positive buttons appear together in a column, having positive buttons first works best in english and other languages that are read left-to-right. One logical reason for this would be conformance to Fitt's Law by keeping the positive actions first and closer to rest of the ...


2

I think placing "positive" buttons on right side is better choice since it gives you: faster visual flow scanning is easier Very important is also visual weight of "positive" and "negative" buttons.


11

A common problem, where we have the answer at Norman Nielsen Group article OK-Cancel or Cancel-OK?: TL;DR Summary: Should the OK button come before or after the Cancel button? Following platform conventions is more important than suboptimizing an individual dialog box. The long story We get countless questions about small details in UI design that ...


4

Usually the primary active element (in this case a 'Submit' verb button) affords the user a clue about what to do. A disabled button is encoded with two dimensions: what do do and that you cannot do it yet. While this might also be confusing it does not leave as much to mystery. It also might not appear as a mistake. The big question to ask is: Why? I do ...


1

I always do this manually as it is hard to find a balance between something that has enough tonal and visual contrast, but still is WCAG 2.0 level AA color contrast compliant. The bootstrap buttons are always a good starting point for getting a feel for tonal differences http://getbootstrap.com/css/#buttons Color wheel is a useful tool ...


0

The "best practice" today is to provide keyboard shortcuts, but really design the UX so it is fully operable without shortcuts. Reasons: Cross platform - Most people want web apps to work on tablets and phones, where mouse-keyboard combinations don't exist. Even if you have a dedicated apps for tablets and phones, you still have a problem because users ...


0

Foregoing any visual controls in your interface has numerous issues. Such an approach breaks 3 of Nielsen's 10 heuristics most obviously. First, this breaks the concept of Graphical User Interface and user expectations of interaction. People are used to manipulating objects on the screen directly, meaning most people will expect to be able to use their ...


1

If you're prepared to put the work in to make it happen (it's not always an out-of-the-box control option), a combo-box is your friend here. The user can do any of the following: Type a whole new entry as if it was a text box Type a few characters and get an autocomplete dropdown for common/preset values Click the dropdown arrow & select from ...


0

When you use a button for make an action Its important define and show the context of this button and its consecuences if the user submit it. Buttons by itself not show anything, only the text in the box. Asked youurself: What is the option enabled or disabled this button? (on, off) What is the action of these buttons and your consecuences? (turn on/off ...


0

Is there a compelling reason to use English text rather than the ubiquitous power on/off symbol? This could be rendered in such a way as to indicate power on or off. You've then reduced the button set to a single button with 2 states.


1

It's not very clear to me. It doesn't tell me the state, or even that it's a button.


0

PaRaP briefly touched on a really important point "In traditional touch interfaces, like [kiosks], targets are usually a lot larger than in mobile phones" There's not going to be a single optimum size in px or mm, as it depends on how the user is interacting with the interface. If they're liking going to be sitting still, such as a news reader app, ...


0

I will keep this short and to the point as most answers are already covering a lot of valid and good areas. Does it add value? I am not able to think of a case where the user will/should look at the continue button to know whether he has finished filling in a form. Whenever a user wishes to click the button he believes he has finished the form and ...


-2

ONLY disable the button if required data is missing or is not entered in a valid way - but still, even if you choose to do that, make sure you easily notify the user that some fields are correct.


1

One solution would be to set a max-width on the content area. If your application is not designed to fully utilize the extra space in landscape mode it might be best to add extra padding or a max width to the content wrapper itself. In addition you could also consider setting a max-width on the button for landscape mode if setting a max-width on the ...


0

Portrait mode: stretch buttons across screen to fit Landscape: pick a side of the screen and make a menu that holds the buttons. Bonus points if the menu is hide-able.


0

In my opinion you should trust your users and let them mark something as complete themselves. In our learning platform we have something called Space with several chapters, chapters can be just markdown text, quiz or assignment. The quiz is completed when you get a 100% score and the assignment needs to be peer reviewed. But the markdown chapter can be ...


0

I believe there is a middle-ground. A visually disabled button doesn't have to mean that clicking it does "nothing" as suggested. It will logically prevent the user from advancing in the absence of whatever is required to enable that primary action, but there is no reason that clicking it could not present an alert message to the user explaining why it is ...


6

One should not disable the button Consider the situation from the user's perspective. Divide users into two groups Those that do not currently believe they can proceed, so are not looking for a way to continue Those who believe they are ready to proceed, and are looking for a way to do so. For the former group, disabling the "continue" button is merely ...


0

Several factors will play a role in the decision. From a usability standpoint, with regard to Fitts's Law, buttons should be reasonably large and at the edge of the screen to take advantage of the "infinite edge", the idea that a cursor cannot go beyond the bounds of the monitor. In a mobile setting, however, the cursor is your fingertip and moves through ...


0

As a general principle which can help find a solution to this sort of problem, allowing your content and interaction requirements to define when elements break, rather than arbitrary pixel counts or assumed devices is the best. Applying that principle to this problem I would say that your buttons should have a size defined by two things: What they ...


0

I don't like stretching buttons either. I think this pattern is left over from the early days of trying to handle a new responsive territory. Mobile is definitely starting to take over and is here to stay but it is still a relatively new space to design for so expect more changes going forward. Any design you decide to go with will need to be tested with ...


3

This is a meta answer drawing from the diverse opinions expressed. If you want to disable the button, you should still check for clicks and give reason why it is disabled. This has two advantages: fewer errors are displayed, and if you for some reason did not previously communicate why the form can not be submitted, you can explicitly do so.


0

In a bookmarking system for unordered sets, users only really have two things they need in order to orient themselves: What have I already seen / Have I already seen this? What was I looking at last. Focusing on the problem: "What have I already learned?" is probably a step too far. So long as you tell the user this is content they've already been ...


1

Buttons are meant to be clicked. If user sees a button, he would want to click. Disabled button becoming active only when all the data is filled in that specific form is not a good experience. I would rather tell user ( which i do with the forms i design ) right at the beginning that all the fields are mandatory and you cannot sign up if any of these fields ...


0

A Form's 'Continue' button should be disabled until all required fields have been filled out and have passed validation. Why? Well it's common sense, really: Imagine you are a Bank. And you have a simple form setup which allows the transfer of monies from one party to another. You have a 'From which account would you like to transfer money?' field, a ...


0

From what I've seen, switches are used more for persistent system settings, whereas toggles are more contextual. So a switch might turn a service on or off, accessed from a settings panel but taking effect everywhere, while a toggle will act on the content that is currently in focus. Toggles do not need to be offered in groups. There are several valid ...


0

I'm going to give you the simple and correct answer : You NEVER disable a button unless it is performing a server-side, behind-the-scenes call, often referred to as AJAX, where you don't want that server-side action performed multiple times due to multiple clicks. It would also re-enable itself upon return providing you with the information needed to ...


0

Yes the "Continue" button should be disabled until all required fields are filled out with at least some text (this assumes that the required fields are designated as such to the user in some way). The affordance here is that the system cannot even attempt to continue until it has the required input from the user. Once the required fields have been filled ...


10

we often see the 'continue' button inactive I think this may be false. Read on! For what it's worth, I'm updating some old research on sign up forms for popular websites at the moment, and have found that quite a small percentage - around 5% or less - disable the Submit button (whether that's the final sign up or a continue type button) until the data ...


50

Type of the information captured and number of fields required It really depends on the type and scope of the information you are asking for and the number of fields that need to be filled: I have tested and used this pattern sucessfuly in login and and password creation. I think because the interface is so simple and the number of fields required ...


16

I would have to say that this behavior hinders user experience. If you've ever read Don't Make Me Think by Steve Krug then you will quickly realize that this pattern is breaking the rule stated in the title. One might ask, Why is this disabled? There is no benefit to make a user jump through this hoop. Basically what I am implying is that the user is ...


1

I think you could display both if the user typed the main category and dispaly sub-catgories if the user started with a subcategory: Winter > Display: Winter, Snow, Freezing Rain,Sleet,Slush Freezing Rain> Display: Sleet,Slush, Snow It is also helpful to visually indicate structure when user are selecting, perhaps using a variation of colour to indicate ...


0

The answer is not entirely black-and-white. It depends on other factors besides the action type, so the action type just might become a bit more irrelevant. Page actions may be a little bit more obvious to be clickable once the user hovers them and you have assigned page action a title that tells to click on it. Also you may try to design the icon to be ...


3

"Are you sure" type of confirmation messages are typically shown after button clicks for potentially destructive actions (e.g. irreversibly delete an item) or other actions that can have side effects the user may not know about (e.g. this item will no longer be searchable once its hidden). Most friend requests and invitation processes are single step ...


1

"Get a Free Quote" and "Buy Online" are absolutely different things, so can't even imagine how is it up for discussion. Anyways, the point is: is this button going to be used to complete a BUY action or just to GET A QUOTE? There you have the first part of the answer. Once you define what action do you want to perform, you can worry about wording. If you ...


2

You could A/B test it to see what actually happens... Or you could point your boss at some existing 'Behavioural Economics' research: http://www.uxmatters.com/mt/archives/2011/05/how-the-power-of-free-and-scarcity-influence-decision-making.php Dan Ariely, in his book Predictably Irrational, says free ”is an emotional hot button—a source of irrational ...


1

Buttons should always start with a Verb Let's begin where both options agree. Buttons that start with a Verb improve the user/computer interaction over a text description followed by an OK button. The problem here is that the verb your boss hopes users will perform -- "Buy" -- isn't what actually happens when the button is clicked. Would you use a button ...


0

Tape players had parallel motors, which, when excited, displayed anti - clockwise motion. The 'arrow' can be visualised as a force tangential to the motion / displacement. And so, it has come to pass that motion is symbolised by arrow pointing to right, no matter western world perception. From then on, it seems a matter of adopting the 'right' ward motion to ...


1

One approach to try is to visualize the instructions. A good example is how Ikea does this: This is print only and Ikea uses no text so it is suitable for multiple countries. In the digital world you can of course translate and some text could support the images. You should test with different images to tell which one is best understood by it's audience.


1

You might try adding iconography (Ear for "listen", talking profile face for "say") to see if that changes the attention of the learner.


0

A "sketchy screen" would be a good idea because you can differentiate layers and you won't lose your "learner" attention. To close this layer a close button under the instructions it's easier to find. You could implement this by putting a big circled button right under your statement so they can clearly see it. Also you could put a tooltip to show a tiny ...


0

I'd suggest that while it doesn't matter for mobile touch devices, that it does matter for traditional desktop devices. If the hover and the active styles for a button are the same, then you've removed any visual feedback for the user when they click the button with a mouse. You need to carefully choose your :active style, as that'll be used for taps, ...


0

A driver may need to roll his window down to Access an ATM pay for parking or access a parking lot by card swipe pass money and food while going through a drive through pass registration information to a police officer allow outside air inside. All but the last one will necessitates rolling the window competently down. In the last use-case, rolling the ...


0

The normal reason for opening a window fully is to allow someone inside the car to interact with someone or something outside the car (windows are often opened partially for ventilation). In most cases where passengers would need windows fully open, they could handle the job themselves--even while the vehicle is in motion--without demanding any attention ...


0

Top left on mobile phones is awful. For some reason, it is a standard now in iOS and Android (phones without physical "back"). Though it makes it very awkward to use with one hand. Assuming you use right hand, in order to reach the top left corner with your thumb is a pain, especially on 5+ inch phones. The only logical place for the "back" button is bottom ...


1

There's often an argument over whether the top right or top left is more intuitive, but I've always found that people used to the close button on the top left find that more intuitive, and people used to the close button on the top right find that more intuitive. Historically the top left option came first with the Apple Lisa (1983), and windows then ...



Top 50 recent answers are included