[apankrat]

I make a boring Windows software that uses this sort of juicing in its UI.

Had some doubts if it would go well with, you know, your good old sysadmin types, but it did! A bit of embellishment that doesn't deviate too far from the native look and feel goes a long way. As per some guy here on HN - "delight your users" and all that.

Examples of what I'm referring to - https://bvckup2.com/wip/r82-preferences.gif, https://bvckup2.com/wip/r82-backup-settings.gif, https://bvckup2.com/wip/r82-rabbit-hole.gif, https://bvckup2.com/wip/r82-backup-verification-dialog-r2.gi...

[Dalewyn]

>https://bvckup2.com/wip/r82-preferences.gif

>https://bvckup2.com/wip/r82-backup-settings.gif

>https://bvckup2.com/wip/r82-backup-verification-dialog-r2.gi...

UI elements jumping and moving around like that are absolute hell for usability. It denies muscle memory, demands eye tracking (and good eyesight and situational awareness in general), and keeps users on edge because things keep changing.

>https://bvckup2.com/wip/r82-rabbit-hole.gif

I'm failing to see the point of that dropdown (well, dropup) menu. The space is there from the beginning, but as unused and wasted whitespace. Why the unnecessary button and associated UI movements?

Also, why is that button called pi?

[apankrat]

Yes, hell, hell, I'll tell 'ya! Especially horrible the muscle memory aspect for the UI parts that are accessed once a year, if ever. And don't get me started on the situational awareness. Needing to pay attention to the contents of the screen? What an unrealistic burden.

Seriously though, feel free to offer your version of the same that would cleanly separate secondary options and sub-options so not to overwhelm the user with a laundry list of settings.

> I'm failing to see the point of that dropdown (well, dropup) menu.

The point of all that "hell" is the layering and progressive refinement of the UI.

[martyvis]

My 89 year old mother-in-law doesn't have great vision but also poor situational awareness around web sites for government and financial services. For someone that is used to paper forms, it is extremely difficult to navigate your way around these places. Not intuitively knowing that a "profile" section will be somewhere to adjust account information, or when autocomplete and drop down menus make things jump around makes many of these experiences exhausting and frustrating (and even dangerous)

[nailer]

> Also, why is that button called pi?

The pi permits access to a commonly used computer security system called "Gatekeeper" sold by Gregg Microsystems, a software company led by CEO Jeff Gregg.

Gregg is connected to with the "Praetorians", a notorious group of cyberterrorists linked to recent computer failures around the country.

Once the Praetorians sabotage an organization's computer system, Gregg sells Gatekeeper to it and gains unlimited access through the backdoor.

https://youtu.be/pXPXMxsXT28?t=14

[nvrspyx]

I really like the animations. Well done.

> https://bvckup2.com/wip/r82-rabbit-hole.gif

This one does confuse me though. Why not have the sidebar display permanently instead of hiding it within a drop-down? There already appears to be white space and a column header ("More options...") dedicated to it already. Also, why is the button label pi? It's all just really confusing and feels unintuitive. I imagine some thought went into it though, so I'm curious as to the reasoning behind it.

Other than that one particular case, I like what you've done with the rest.

[apankrat]

The sidebar is an index of several additional option pages, shown to the right of it. The first one is "Common" and it is shown by default.

This design didn't actually make it into the production release, it was replaced with https://bvckup2.com/wip/r82-rabbit-hole-x.gif.

Pi is a reference to a (really corny) "hacker" movie from the 90s called The Net. Same thing as the Pi at the bottom right of every page on Reddit.

[MattRix]

These are nice! I’d recommend making the animations even faster. You only need a couple frames of animation to give the feeling of moment, otherwise the UI starts to feel sluggish.

[Kwpolska]

> https://bvckup2.com/wip/r82-preferences.gif

This seems pointless to me. The "More…" button adds three options and some help buttons. Wouldn’t it be less confusing to just have the options on the screen at all times?

> https://bvckup2.com/wip/r82-backup-settings.gif

Wouldn’t it be easier (and faster) to just show a modal dialog box? Or instead of shuffling items around, expand the window to fit the options?

[emptysea]

These are great! how tricky is it to add these effects? I’m mostly stuck in the html/css/js world and implementing anything like you have here would be a pain

[apankrat]

All of them are using a custom framework.

Most transitions are trivial to implement - you have a state A of your dialog that looks like this and a start B with your target look/layout - so the framework figures out what needs to move where, what needs to be hidden/shown and then animates that in a quick loop.

The complicated part is the fading of controls. There's no fine-grained control over when Windows repaints controls exactly, so unpainted parts of the background showing through is a nasty issue. Requires basically per-Windows version voodoo, because what works for W8, doesn't work for W10 and vice versa.

[efields]

This is pretty standard stuff for your stack. Mostly can be done with CSS these days.

[JusticeJuice]

Hey! I've been following Bvckup2 for years, not because I need it but becuase I've always loved the UI - big fan!

[karlshea]

I've been using Bvckup2 on my PC forever and it's been amazing, thanks for all of your work on it!

[sergiotapia]

Really tasteful animations. They allow me to see what changes when I do something, infinitely better than just popping things in and out of existence. Thanks for sharing examples.

[inatreecrown2]

your animations look very smooth!

[sdwr]

That's hot! Well done!

[mromanuk]

fantastic job! love how the animations, adds a nice touch to the UX.