Say I have some state which the user can toggle, for example [ON] | [OFF] .
Typically, I use ONE switch (BUTTON) and when the thing is ON, the user sees:
LIGHT IS [ON]
When it is OFF they see
LIGHT IS [OFF]
My question is: is it obvious (sensible) that one should click [ON] to turn the light [OFF]?
How do you do it? Any thoughts or ideas appreciated.
I would use a label and an button to show the action.
Light is On - Switch Off?
Clicking that would change both the label and the button to:
Light is Off - Switch On?
This solution clearly states the status and the action available.
I would definitely include the notion of a checkbox-like control if clarity is your concern. This is a widely accepted interface component, that most people understand.
In any case you can make the entire line clickable, so that it toggles when I click the text as well (just like an HTML Label element).
Showing a button with just the text 'ON' might confuse users whether it toggles the light on, or if the current state is 'on'.
An image speaks a thousand words...
Depending on the type of application, displaying a light switch image that you can click
to set the state of the field might be more intuitive?
You could then have a lightbulb-on and lightbulb-off image to show state.
Not everyone knows what a checkbox is ;)
You could use radio boxes, which are fairly standard controls and should not be confusing to most people.
<input type="radio">Light on<br>
<input type="radio">Light off
Another option is to try and implement some sort of switch button, something like this one that is used on the iPhone:
Switch button in iPhone - off http://www.poolworksbvi.com/POOL_CONTROL/Pool1_files/iphone_switch.png
Switch button on iPhone - on http://www.poolworksbvi.com/POOL_CONTROL/Pool1_files/iphone_switch+on%20copy.png
Related
I have a button that cycles through states on click: {off, red, blue, green}
Desired behavior would be:
When first focusing the button it announces something like: "My button, Green"
When clicking the button it announces only the state, like: "Red"
Any advice on how to achieve this?
It can be difficult to make a user interface that isn't "common" to be accessible. For sighted users, is there a visual clue that the button has four states and that clicking on it, rather than performing an action, actually changes the state of the button?
This is often done with a "segmented button" that shows all the states possible and you click on the appropriate state you want. Very similar to a radio group. (The URL links to Apple's Human Interface Guidelines but the same concept can be used for web.)
You can potentially use aria-roledescription to describe how your widget will function rather than having a basic "button" role announced.
To manage what is actually announced, you could have complete control of what is spoken by the screen reader by having an aria-live region. I've posted on live regions several times recently so I'll just point to one of my previous answers (which in turn has links to a few other answers on live regions).
Lets say, you have an image button at the UI that represents a switchable feature (i.e. tooltips on/off). What should it show according to the status (on/off). I believe, the user is expecting to see a hint for what is going to happen, when he click the button. In this case, the button displays just the opposite of the current status. For example: the two images are lightbulbs, one grey for OFF, one yellow for ON. Now, if the feature status is OFF, the button shows the yellow one, signaling that, if you click on it, the feature will be switched to ON, and vice versa. A colleague said, that this is misleading. If the feature is OFF the button should reflect this, thus displaying a grey lightbulb. I couldn't find any best practice rules for that. Anybody knows some?
Please see this gist to see what I am trying to achieve: https://gist.github.com/d9e22915234e6ea34d20
The code is heavily cut down on the problem I face. As you can see when running the code there is a "miss" detected on the label or the text area (if you miss it by 5em or whatever). Unfortunately this does not work for the Dialog's own buttons OK and Cancel (Please run the code and you will see immediately what i am talking about). If you click near an FX-Node it should detect wheter you missed it or not.
Does anybody know if it is possible to detect clicks in the Dialogs button area?
And if it is possible, how to link them to the node like the label and the area?
Thank you in advance.
From what you're seeing, I would guess that the Dialog consumes click events in the button bar, so they don't make it to the Window (which is where you added the EventHandler). If you really want to do this, you can change addEventHandler to addEventFilter. This works for me.
Read this tutorial if you want to find out why this works:
http://docs.oracle.com/javase/8/javafx/events-tutorial/processing.htm#CEGJAAFD
I have two options. I need 48 of a certain type control; it needs to respond to clicks and taps (for touch devices).
I could use Buttons, using the TextButtonStyle, and the Click event. Or I could use TextBlock, with the Tapped event.
I reckon buttons may be more "expensive" to create. OTOH, although I believe "Tapped" is also called when the user clicks the component, this makes me a little nervous due to its nomenclature, I guess.
Another difference is that a button takes up only the width necessary, whereas a TextBlock takes everything; and I want the underlying Grid to be tappable, so the TextBlock is kind of a problem that way. Is there a property that will make it more modest like the button?
There is design guidance for Windows Store apps on when and how to use buttons at http://msdn.microsoft.com/en-US/library/windows/apps/hh465470. Based on your description and this guidance, it sounds like buttons are the way to go. Responding to click events is what they were made for, and TextBlocks add the extra issues that you describe.
I created qpushbuttons with qtdesigner and as a default I want to make them disabled without clicking them in other words before the dialog screen comes they should already have been disabled.I ask that because I write a cinema seat reservation and when somebody buy the seat I make it disabled and the color red but after closing and re-running the program they disappear and they turn to default. I want to do is; when I re-run the program they should be seen disabled and color red. How can I do that. Thank you.
You can do that from QtDesigner, the advantage being you don't need to code anything.
Select your QPushButton, and make sure the enabled property is not checked.
Before you call yourDialog->show(), execute yourDialog->yourPushButton->setDisabled().