All the product owners I have interacted with have called this either a fly-out nav or, less formally, a hamburger menu. Although w3 considers fly-outs to be more akin to header drop-down menus: W3 Fly-out Menus
It's usually punctuated with the hamburger looking menu icon and supports slide gestures when available as you described.
Consider this gallery ...
I would go ahead and assume this donut chart wouldn't be the only one displayed, but will be part of a row(s) full of charts and visual graphs.
In this case, I would absolutely organize the text in a readable data structure - Label top, Data bottom.
When visualizing data as such, it is better practice to first give them the key for the data(which normally ...
Don't require your users to learn 'jargon' like a numbered ratings system or stars. Use plain language to allow them to assess their progress.
If the goal is learning and memorization, inform users of when they'll see content again with spaced repetition hints.
Because the goal is familiarity and fluidity ('I know this!'), you can use some info in the ...
The first thing I have to mention is that there are so many circles on this page that users may be difficult to distinguish them. Better redesign the functions layout.
For your question, I don't think it's suitable to overlapping chat icons on others. You can see now users cannot click "paper pattern" icon and it seems your screen is non-scrollable.
It depends on the frequency of use and the context. Is the user going to see this on a daily basis in a dedicated setting, or a couple times a year in the context of a larger report?
As grmmph already said, having the label on top makes it easier to parse what the number is, so it's more helpful for first time users. However, if users will be seeing this ...
There is no denying that Facebook works best in its own environment (not truncated as a widget). FB has invested billions of dollars to optimize the use of their website. Then why offer widgets?
I have had success with widgets on websites that need to impress NEW, UNDECIDED visitors. If a visitor is "checking out" your website and weighing the value of "...
Depending on your target locale, ' and " may be understood as abbreviations for seconds and minutes, but that can make h for hour look out of place:
Perhaps use : as a separator for hours and minutes, and ' as a separator for minutes and seconds? Like this:
00'01 1 second
01:00 1 hour
Try showing the 5 top total counts by make, and allow them a drilldown (or expand the chart in place) for further examination.
There comes a point of overload where you're showing everything, but they're seeing very little.
Since this is a dashboard, a common pattern is to show the top 3 -7 of a category.
You can start with top 5, so the chart is uncluttered,...
There are a few ways you can handle this.
The first is to add captions. While it might feel redundant you have to bear in mind that there are people who are both blind and deaf using braille keyboards and braille screens to read your content. Their screen reader software can get these captions, convert them to braille and they have the same ...
Your choice of widget(s) will really depend on the actual data that you are manipulating and the precision required.
Based on the basic requirements you mentioned of 2-12 parts (it is probably too many to work well ideally, but again it depends on what you are trying to do), and the fact that you are probably not going to need very precise adjustments, I ...
I’ve built this using bootstraps grid, the card component, col classes, and divisions of 12 in a row. So a 1/3 user selected widget gets a col-4 class applied. (4*3=12) Then we did the math by scraping the widgets currently in the bootstrap row. The user could then only select the amount left available in that row. For example you then could have combos like ...
The first wireframe you present is confusing, as it's not clear at first that the right part (stores) is dependent on left part (companies).
The issue you mention at the end (selection of multiple companies) exists for both design.
All the options seem to be structured as a tree (with unique hierarchical relationship between station > store > company). ...
Try a dropdown, so only one choice is visible, but explicit to the user. Offer a preview of the form before they commit actions so they can double check that the 'levels' they want are correct.
You could use a dropdown, with the default state selected. This you can get from research. A dropdown will take less room if that's a constraint you have to deal with....
Either of your solutions are workable, and you can combine them by adding arrow buttons to the ends of the sliders. Now the user can slide the slider for gross adjustments, and tap the buttons for fine/incremental adjustments. However, neither solution is a true 2-D control -they each have separate 1-D controls.
What about allowing the user to click/tap ...
Do some thorough research across your user base (your own employees) and find out what features they would request if they had a personal dashboard which helped them be more effective at their jobs.
It's noble to try to design considerate software, and add a useful or friendly touch, but I would put the question the other way: Are users missing having the ...
There are horizontal scrolling UI elements used in mobile apps and websites, which were popularly implemented as 'carousels' (although many would caution against using them because of usability issues that often crop up), but since then has also been used in other parts of the user interface.
I don't think you can give it a specific name because it is partly ...
Option 2 since in that instance the value is clearly mapped to the handle.
And I don't think you need to worry about the value being covered by the finger or thumb. In the scenario of setting the range the interaction is totally focused to this task, which means that you can let the value take up quite a generous bit of space, meaning it can be displayed ...
If you want to go with the sliders shown in your question, I will suggest you go with Option 2
Additionally, I guess this will work perfectly on mobiles as the track sliders would be a little difficult for precision with fingers.
This page has some more options and the code too http://www.jqueryrain.com/?ot4e1H_o
I understood the question now,
As per my experience, the drop down menu is not a good practice.
In order to remove dropdown we can use a modal.
Modal will consists of all widgets, user have to select widget which he wants to show on dashboard. and Click Save.
On Dashboard page, Give a link or a button as Personalize, Whenever user click on this button ...
Data visualisation is statistics with a pretty face (statistics is mathematics) and fundamentally this is how we've always measured anything,
Label. Value. Unit.
Force of 48N
Gravity is 9.8m/s
and in your case, Contacts Left, 6689 Humans or Contacts Left, 6689 Androids or Contacts Left, 6689 Aliens
Without a Label, a user would no idea ...