Material Design – Form Tabbing on "Switch" checkbox?
I have a form that a user typically uses tab index to navigate throughout. I’ve updated most of the forms from standard checkboxes to “switches” with either a yes/no.
label changed for IP…
With Material Design I haven’…
How can we help users to allow webcam access?
Assume a web application requires access to webcam and microphone. Browser compatibility has been checked and the required hardware is definitely present. When the app enters “chat mode,” the user will be presented with a con…
Filtering in Datatables
Currently we are having issues with filters on our datagrids and the space they take in the screen.
I think the way they are used right now they take a lot of space that’s not needed.
I would personally do something else….
In RTL mode do icons need to be mirrored?
I am working on a website that has both an English and Arabic version, and the site has a lot of icons. Can I flip all images in right to left direction for the Arabic version as shown below?
I can’t properly design UI to get better user experience [on hold]
I am working on a project for that I design a screen (see above screen).
On the top progress bar has 5 sections and every section has ‘n’ number of questions where user will give inputs.
When all the section will get filled then next thing is to review the sections so, in the review all the sections are in read only format where, if user wants to edit some part of the section 1 then he can click on edit
button and it will redirect to top progress bar section 1.
Main thing is I am repeating same thing in review (i.e naming convention–> section 1, section 2)because of that design is not looking so good. I am unable to figure out how to represent review part sections.
Any better Idea to represent review sections?
Button versus symbol
This is for a document management application
This is thick client (WPF) not a browser application
The button line and image / icon line are two options
Search, browse history back, browse history forward, snapshot
I like the…
Word suggestion – "empty" vs "blank"
Have a question as to what makes more sense… we have a “visual search” component which allows users to type in a category (column header) and then type in what they are looking for (e.g. First Name: John) and it would spit …
Word suggestion – "empty" vs "blank"
Have a question as to what makes more sense… we have a “visual search” component which allows users to type in a category (column header) and then type in what they are looking for (e.g. First Name: John) and it would spit …
What is the best way to segment multiple ranges from a single range?
I’m building an application that requires individual accounts to be segmented by revenue. I’m trying to find the easiest way for the User to create these segments. This task involves breaking a single range of revenue — in this example $1-$10,000 — into multiple smaller ranges.
The relationships:
– The application has a revenue range (the larger one).
– Each segment has a revenue range within the application revenue range.
– Each Account has a monthly recurring revenue number.
Above is my current solution—a table with the name of the segment and fields for the user to enter low and high ranges for the segment. I’m concerned that this will come off as confusing and it doesn’t show where those ranges fall within the total range within the application.
I’ve considered moving to a series of sliders within a slider—perhaps how Photoshop handles gradients, but am worried that it is going to come off more confusing.
Has anybody tackled this problem before or have thoughts on the best way to solve it?
Selecting Multiple Ranges From a Single Range
I’m building an application that requires individual accounts to be segmented by revenue. I’m trying to find the easiest way for the User to create these segments. This task involves breaking a single range of revenue — in this example $1-$10,000 — into multiple smaller ranges.
The relationships:
– The application has a revenue range (the larger one).
– Each segment has a revenue range within the application revenue range.
– Each Account has a monthly recurring revenue number.
Above is my current solution—a table with the name of the segment and fields for the user to enter low and high ranges for the segment. I’m concerned that this will come off as confusing and it doesn’t show where those ranges fall within the total range within the application.
I’ve considered moving to a series of sliders within a slider—perhaps how Photoshop handles gradients, but am worried that it is going to come off more confusing.
Overlap of these ranges is acceptable, but not preferred.
Has anybody tackled this problem before or have thoughts on the best way to solve it?
UPDATE 10.7.2016
I might have found a better solution for this problem. There is a library called Elessar, which attempts to do something like Photoshop’s gradient picker.
The library presents a slider with a range. Hovering over an area allows you to create a new range within the larger range. Once a new range is created The edges can be dragged to expand and contract in either direction. The tool does not allow for overlapping ranges.
Out of the box it does not appear there is a way to delete a segment. I think the easy solution would be to have an X that appears when hovering. Hover, click the X, Are you sure? dialog and then the segment is deleted. I am a bit worried about how this might look on the smaller segment.
Some other possible issues with this solution:
- The sliders are not as accurate as inputing in exact numbers. For example, getting the slider to hit exactly at $499 could be difficult.
- Very large ranges may make it difficult to be exact.
UPDATE 10.10.2016
I think Madalina’s approach is probably the best one to take with this feature—keep the slider as a representation of the data but confine editing to the table.
By using the bar graph to represent the applications revenue range and the smaller ranges within it, the user has an easier time visualizing the size of the segments.
Additionally, this will take much less time to develop than with a slider.