Hysteresis (1997)

http://www.mackido.com/Interface/hysteresis.html

by pcr910303 • 4 years ago

65 21 4 years ago

mackido.com

TylerE• 4 years ago

(1999)

spacemanmatt2• 4 years ago

Still relevant in 2022.

plank• 4 years ago

I have always understood hysteresis as that the response is depended on the way the current situation is reached, e.g. a memory effect of a magnet (knowing whether it came from a high or a low field). This might be something useful in UI as well, but I would not categorise the delay mentioned in the article as such.

tuukkah• 4 years ago

I found the first example clear: the response (which sub-menu is showing) depends on the way the current situation was reached (whether another sub-menu was showing above when you moved the mouse down and over this sub-menu).

Wikipedia defines two terms taking the possible lag into account: "Hysteresis can be a dynamic lag between an input and an output that disappears if the input is varied more slowly; this is known as rate-dependent hysteresis. However, phenomena such as the magnetic hysteresis loops are mainly rate-independent, which makes a durable memory possible." https://en.wikipedia.org/wiki/Hysteresis

asmithmd1• 4 years ago

That is my understanding. A good example is a light switch. if you hold a switch in the middle between on and off, you don't know which way it will snap unless you know which way the switch was moved to get to the middle.

DeathArrow• 4 years ago

This is a delay or added latency, not hysteresis.

nmstoker• 4 years ago

To me, it seems consistent with the definition/origin of the word, ie lagging behind

https://en.m.wikipedia.org/wiki/Hysteresis#Etymology_and_his...

Maybe you are deriving your sense of the word from examples in physics and engineering where hysteresis is referred to that do not look quite like the situation described in UIs here?

overlisted• 4 years ago

It's neither of those terms. I'm not sure if anyone knows this word outside of web dev, but I would call that "debouncing", because all that effect does is ignore input states that haven't stuck for long enough. There's no latency, no lag and no "behind". Only a threshold.

spacemanmatt2• 4 years ago

Debouncing is exactly hysteresis. We often implement it with a very poor digital method but the analog inspiration is a capacitor that must fill before current flows through a closed switch, effecting hysteresis.

elromulous• 4 years ago

Fyi debouncing predates web development by many decades E.g. your keyboard almost certainly has debounce logic implemented on the microcontroller in it. And long before digital circuits existed, it was implemented with capacitors.

cturtle• 4 years ago

This is great. There are so many nuances in UI design and I hadn’t considered this before.

Does anyone know of other resources like this that explain easily missed UI best practices?

oneplane• 4 years ago

This is so much more important than people realise. The same applies to things like: what happens if you click a button, but change your mind, move your cursor off the button before you release?

This is a nuance that has to be implemented by the UI developer, otherwise you're essentially stuck in a multi-step process you cannot get out of, no matter how many steps you have left to change your mind about. This is mostly implemented in a bad way in custom non-native-UIs like browser JavaScript where a button mouse event might be scoped to a click regardless of when the mouse down event and the mouse up event happens.

Native elements have (usually trough decades of legacy development) this down to perfection (in my current OS at least), even here on HN where the "add comment" button really is just the native button, it works flawlessly. But as soon as someone tried to 're-implement' it, things go horribly wrong, and something that looks like a familiar UI element suddenly behaves completely wrong.

With so much time spent interacting with UI widgets, any time you have to take a moment and think about how some new thing might work differently from the millions of other times you have used it is just painful.

Jensson• 4 years ago

It is a bit harder than that, some clicks you want to happen on mouse down, other clicks you want to happen on mouse up if the button was first primed with a mouse down. Exactly what you want to happen with one or the other is mostly about expectations, some things feels better one way others the other. For example, when you click a file you select it on mouse down, not on mouse up, selecting on mouse up just feels strange so it shouldn't behave like a button it should fire the action on mouse down instantly.

Edit: Just tested in windows and realized that it switches between select on mouse down and select on mouse up depending on if you click on the text or if you click on the whitespace part of the file, whitespace it selects on up... Anyway, yeah, few people do this correctly, even Microsoft has many strange things.

wongarsu• 4 years ago

Just tested in windows and realized that it switches between select on mouse down and select on mouse up depending on if you click on the text or if you click on the whitespace part of the file, whitespace it selects on up

This is because the drag action changes.

In the whitespace part, if you do mouse-down, the file gains a faint selection. If you "commit" with a mouse-up, it's selected. But you can instead move the mouse, turning it into an area selection (you draw a square and everything in that square is selected on mouse-up).

If you click on the text, the selection is committed right away on mouse-down. If you move your mouse after mouse-down, you start a drag-and-drop action; which you can in turn abort by dragging the file to its original position and doing mouse-up, leaving you with the selection.

Few people could describe this if asked, but on an intuitive level it seems to work, and it follows the principle of giving you rich visual feedback and letting you back out of an unintended action (just like aborting a button click before the mouse-down)

aasasd• 4 years ago

I vaguely think that Win9x did have a parameter in the control panel for how much the mouse is allowed to move during a double-click. I made way more than one excursion to the control panel, and I remember thinking that thankfully I didn't have to adjust this kind of parameters. They likely resided in the accessibility group. But I may be mistaken altogether.

zasdffaa• 4 years ago

Pretty sure x-windows did.

balsam2• 4 years ago

People complaining that the hysteresis used in the article is different from the one they learned in school are incorrect.

To begin with, in its introduction the wikipedia page on hysteresis already says: “Hysteresis can be a dynamic lag between an input and an output that disappears if the input is varied more slowly; this is known as rate-dependent hysteresis.”

Thats what the article covers— rate dependent hysteresis.

But the equivalence goes actually deeper!

Even the “magnetic” hysteresis you learnt of (but not about, or else you would not have thought to complain) is in essence a time lag phenomenon..

This goes quite deep, but basically its the converse of the Noether theorem that time (not just reversal, not just a sign change) invariance leads to energy conservation—- in magnetic hysteresis energy is not conserved.

Here is a 2011 article linked from the wikipedia that takes quite a bit of effort to try explaining magnetic hysteresis in a time dependent way.

http://vincent.francois-l.be/VINCH_model.pdf

adrian_b• 4 years ago

You are right that according to the original definition of the word by J. A. Ewing ("When there are two qualities M and N such that cyclic variations of N cause cyclic variations of M, then if the changes of M lag behind those of N, we may say that there is hysteresis in the relation of M to N", Phil. Trans., 1885, 176, p. 524), the "rate dependent hysteresis" is a kind of hysteresis.

Nevertheless, this kind of hysteresis is not interesting, it is just the phase difference between an output and an input of a linear network, a.k.a. the phase of the transfer function between that input and that output.

This kind of hysteresis, i.e. such a phase difference between 2 variations, is ubiquitous, it appears in any system described by linear differential equations and also in any system described by non-linear differential equations when only small variations are applied to it.

So there is no advantage in calling it hysteresis instead of using alternative terms, which had been used much earlier than "hysteresis", e.g. "phase difference" or "phase lag" or just "lag".

The interesting forms of hysteresis, for which a new word was useful, because they could not be described using the older theories of linear systems, are those encountered in non-linear systems, e.g. ferromagnetic materials, ferroelectric materials, bistable electrical circuits, bistable mechanical switches, and so on.

In all kinds of hysteresis, an output is a function not only of inputs but also of an internal state (which is determined by the past inputs of the system).

However, in the case of the periodic steady-state analysis of a linear system, the internal state of the system is not considered explicitly, because the trick of replacing a system of linear differential equations in real variables with a system of algebraic equations in complex variables takes into account the internal state implicitly (i.e. the energy stored e.g. in electrical devices like capacitors and inductors, or in mechanical devices like springs and flywheels).

So in the analysis of a linear system, the "rate-dependent hysteresis" does not need any special treatment.

On the other hand, in the case of non-linear systems there is no trick allowing to ignore the hysteresis, it must be handled explicitly, using a state that depends non-linearly on the past inputs.

In conclusion, it is true that the use of "hysteresis" in the parent article and in the Apple GUI is not incorrect from the point of view of the meaning of "hysteresis" in physics, but this is nonetheless a non-recommendable use of the word.

Much less confusing and also shorter would be to say "Menu lag" or "Menu delay", instead of "Menu hysteresis".

balsam2• 4 years ago

Its a subtle point but I wanted to point out that all that nonlinearity, yes even in magnets, is due time lag. Apologies for not fleshing out the details but the “path-dependent internal state” is shorthand for saying that the magnet hasnt really reached thermal equilibrium at any point along the cycle. If you could wait for that to happen there would be no hysteresis. The internal state would then only depend on the temperature (and external fields etc) but not on “the history”. Of course, this kind of consistent physics isnt really relevant for engineering and so people have to add in easier to digest (but ultimately inconsistent and vacuous) ideas like path-dependence.

continuational• 4 years ago

I'd much rather click my way through menus than constantly be waiting for arbitrary delays.

Hysteresis (1997)

Related Stories