Two search bars or one?

Quick SketchWe’re designing search for a machine learning model, where users are shown a table of clusters with details. In this, users have a search for all the fields within the cluster. However, we want to include a search for users to search for clusters based on their members – so if a user wants to see if a certain member is a part of how many/which clusters.

Currently, I’ve positioned the two search separately. The cluster search in the table, and the members within cluster search next to advanced filters. Having multiple searches looks odd though, any advice? Thanks.

Why do most interfaces rely on sticky top bars instead of sidebars?

Most web interfaces have the classic sticky topbar + 2-3 columns layout (just like StackExchange).

Stack Exchange User Experience

Some but few websites use a different approach and, instead, have a collapsable sidebar (i.e. BitBucket):

BitBucket layout

While the first approach is surely the most familiar one to pretty much everyone who’s ever used the Internet (including the 50+ generation) and I can imagine it will work better for them just because they’re familiar with it, I don’t quite understand why sticky top bars have become the Times New Roman of layouts and are almost a standard for any modern UI.

Sidebars allow you to:

  • save vertical space, which is limited (compared to horizontal)
  • have a more responsive/consistent UI (and more easily achievable)
  • can show you more content and be more readable (top bars tend to be thin to save more space)

so it feels like they should be preferred over top bars.

Do you know of any studies on this and what do you think it’s best?

Are scroll bars dead in 2019?

I recently heard a designer say something to the effect that modern web designs don’t use visual scrollbars – or at least they’re only visible when scrolling. I’m a front-end developer and hadn’t really heard this. Is there any truth to this? Specifically my question is:

For a web app, when content is scrollable:

  1. Should there ever be visible scroll bars (and why)?
  2. Should there ever not be visible scroll bars (and why not)?

Two scroll bars

I am having this same issue on a website I am trying to update for a Minecraft server. The problem is I am having two scroll bars on the side. I did find in this site coding to fix this problem but looking at my .css I cannot figure out where to put the coding in to fix the issue. Can someone look at my coding and show me where exactly I have to add the rules to remove the extra scroll bar? Thank you.

Window Title Bars Differ in Height

I am delving a little into theming and css styling.

It mostly works well, but I am having trouble with the styling of the title bars. They all accept well gradient, background color and such, but not all applications adopt the title bar height.

I tried to code

.titlebar and   .headerbar  

in all forms I can imagine, but still the height of the title bars remains incoherent. Some applications adopt the title bar height, others totally ignore it.

This apparently happens all across themes.

I wonder what the reason for this is, and how I can achieve equal height of all title/ header bars.

I am using Ubuntu Budgie 19.05, on a Dell laptop.

enter image description here

How to hide progress bars in PCManFM 1.2.5?

I am having some problem with the PCManFM on my Lubuntu 18.04LTS. The “Copying Files” progress bar always appears on top of the viewer so everytime I want to navigate through the files I need to move it out the way, it won’t let me hide it without hiding the viewer. I have my own reason that I need to search through the files while transfering files via FTP.

Since I don’t have much experience with linux I don’t know if there is any command or scripts that can do the job eventhough I would like to learn more about it. If it is just the nature of this FM I might consider changing to another lightweight one.

States and behaviour for progress bars embedded in tables

These days it is not uncommon for data tables to contain more complex UI elements (i.e. not just data), with things like pills (or tags), call-to-action buttons, icons, and even graphs & charts (e.g. sparklines) to be embedded.

However, I haven’t actually seen the specific behaviour for these embedded UI elements specified in the context of an child element in a table cell.

So the question is, what happens to a progress bar (and other UI elements) when the table row cycles through different states (e.g. hover-over, active, selected, etc.) and how does the styling and behaviour change compared to when they are outside of a table?

enter image description here

A specific example of this is to consider what happens to a table cell containing a progress bar (which is actually not an uncommon thing to see) if it is selected. Should it be:

  1. Unchanged (even though there might be some contrast issues with the table cell’s selected state).
  2. Modified by making changes to the colour or styling
  3. A custom rule to the behaviour of the table to accommodate the interaction

If you can include any screenshots of actual examples of applications (rather than CodePen or design concepts) that would be very useful for illustrating the answer.

Why do progress bars animate backwards?

Gmail’s new loading bar drew my attention to this today:

Gmail loading bar

The colored pattern inside the bar animates from right to left.

The Mac OS progress bars do the same:

Mac OS progress bar

Is there a reason for this? If I was asked to animate a progress bar I’d automatically do it the other way, so I’m assuming it must have been a conscious decision.


I recently read an article that included other ways of making a progress bar appear faster to users:

  1. Increase the Number of Pulsations – “The progress bar with increasing pulsation was more likely to be perceived as having a shorter duration”

  2. Accelerate the Progress and Avoid Pauses at the End – Progress bars “with the fastest progress occurring near the end of the process” were perceived faster than progress bars “with pauses near the process conclusion”