User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have a set of inputs whose type can be changed, and one of the input types is read-only. What's the best way to represent this in a cross-platform manner?
Right now I went with a disabled button which looks like the following:
Ubuntu:
macOS:
Windows:
I understand a disabled button is a bit misleading as the semantics imply it could be enabled and interacted with. I'm abusing it for it's aesthetics.
For reference I'm using the Qt framework.
You're asking a very specific question, and for that question, your current way of solving the problem is definitely abusive of the button control (for example I'm not sure it'll look as good in all themes). I'd also consider:
set (match on the prompt line) as the value of the text input control and disable input.
put a plain text label with match on the prompt line centered on the line.
But, even though this isn't your question, I think you may benefit from looking at the design one level up, thinking about the tasks that need to be accomplished and overall design.
One of the things that jumps at me here is that the layout feels wrong, as in, shouldn't the two columns be swapped? The current order invites users to type in text in the text input control first and then choose the drop-down value. What if users put text in the input control and then change the drop-down value to "prompt"? Their text goes away — was that intentional? Is it still there? Maybe you can still save it so that they don't lose it if that was unintentional, but then in some cases it was intentional and the user didn't want you to save it even as a backup.
So it feels like you should try to orient the flow towards choosing the drop-down value first, and only then to fill out the text control for drop-down values that require one.
It'd also be interesting to understand whether you need the grid. Note for example how things like QueryBuilder do to handle exactly this problem. I'd suggest some research on similar query-building UIs to take inspiration.
You can use simple text. If it not possible then apply style which it looks like text. Other things that you need to change a position of control. First, show selection and then show a reaction.
