8 ms·

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, bu

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-preferences.gif, https://bvckup2.com/wip/r82-backup-settings.gif https://bvckup2.com/wip/r82-backup-settings.gif, https://bvckup2.com/wip/r82-rabbit-hole.gif https://bvckup2.com/wip/r82-rabbit-hole.gif, https://bvckup2.com/wip/r82-backup-verification-dialog-r2.gif https://bvckup2.com/wip/r82-backup-verification-dialog-r2.gi...

MattRix 4y ago
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.
inatreecrown2 4y ago
your animations look very smooth!
Dalewyn 4y ago
>https://bvckup2.com/wip/r82-preferences.gif https://bvckup2.com/wip/r82-preferences.gif >https://bvckup2.com/wip/r82-backup-settings.gif https://bvckup2.com/wip/r82-backup-settings.gif >https://bvckup2.com/wip/r82-backup-verification-dialog-r2.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 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 4y ago
  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.
  - Rychard 4y ago
    What you've basically said is "I don't agree with your opinion, therefore you are wrong". While you may have provided justifications for your beliefs, your delivery was unnecessarily aggressive and only served to further alienate yourself from the discussion. I would encourage you to try and engage in more constructive conversation in the future. For what it's worth, I also despise this sort of needless UI fluff for essentially the same reason they do; it reduces usability. But that's just like, my opinion, man.
    - MrGilbert 4y ago
      Tbf, the initial comment already set the direction ("absolute hell"?). It provides mere rambling and no real benefit to the OP. Not that I encourage the tone in this thread, but... There is another perspective to it.
      - Dalewyn 4y ago
        I did specify why it's "absolute hell": The UI moves. UI elements that move around are bad for usability because of factors I already mentioned. The best UIs are those that keep movements and other dynamic facets to the absolute minimum. A boring UI is a good UI.
        carlosjobim 4y ago
mromanuk 4y ago
fantastic job! love how the animations, adds a nice touch to the UX.
nvrspyx 4y ago
I really like the animations. Well done. > https://bvckup2.com/wip/r82-rabbit-hole.gif 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.
- deleted 4y ago
  [deleted]
- apankrat 4y ago
  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 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.
  - nvrspyx 4y ago
    The replacement makes much more sense to me. Thank you for the explanation. > Same thing as the Pi at the bottom right of every page on Reddit I'm always on Reddit and never noticed the Pi. Thanks for the trivia as well!
emptysea 4y ago
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
- efields 4y ago
  This is pretty standard stuff for your stack. Mostly can be done with CSS these days.
- apankrat 4y ago
  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.
sergiotapia 4y ago
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.
sdwr 4y ago
That's hot! Well done!
karlshea 4y ago
I've been using Bvckup2 on my PC forever and it's been amazing, thanks for all of your work on it!
Kwpolska 4y ago
> https://bvckup2.com/wip/r82-preferences.gif 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 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?
JusticeJuice 4y ago
Hey! I've been following Bvckup2 for years, not because I need it but becuase I've always loved the UI - big fan!

MattRix 4y ago

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.

inatreecrown2 4y ago

your animations look very smooth!

Dalewyn 4y ago

>https://bvckup2.com/wip/r82-preferences.gif https://bvckup2.com/wip/r82-preferences.gif >https://bvckup2.com/wip/r82-backup-settings.gif https://bvckup2.com/wip/r82-backup-settings.gif >https://bvckup2.com/wip/r82-backup-verification-dialog-r2.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 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 4y ago
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.
- Rychard 4y ago
  What you've basically said is "I don't agree with your opinion, therefore you are wrong". While you may have provided justifications for your beliefs, your delivery was unnecessarily aggressive and only served to further alienate yourself from the discussion. I would encourage you to try and engage in more constructive conversation in the future. For what it's worth, I also despise this sort of needless UI fluff for essentially the same reason they do; it reduces usability. But that's just like, my opinion, man.
  - MrGilbert 4y ago
    Tbf, the initial comment already set the direction ("absolute hell"?). It provides mere rambling and no real benefit to the OP. Not that I encourage the tone in this thread, but... There is another perspective to it.
    - Dalewyn 4y ago
      I did specify why it's "absolute hell": The UI moves. UI elements that move around are bad for usability because of factors I already mentioned. The best UIs are those that keep movements and other dynamic facets to the absolute minimum. A boring UI is a good UI.
      - carlosjobim 4y ago

mromanuk 4y ago

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

nvrspyx 4y ago

I really like the animations. Well done. > https://bvckup2.com/wip/r82-rabbit-hole.gif 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.

deleted 4y ago
[deleted]
apankrat 4y ago
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 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.
- nvrspyx 4y ago
  The replacement makes much more sense to me. Thank you for the explanation. > Same thing as the Pi at the bottom right of every page on Reddit I'm always on Reddit and never noticed the Pi. Thanks for the trivia as well!

emptysea 4y ago

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

efields 4y ago
This is pretty standard stuff for your stack. Mostly can be done with CSS these days.
apankrat 4y ago
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.

sergiotapia 4y ago

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.

sdwr 4y ago

That's hot! Well done!

karlshea 4y ago

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

Kwpolska 4y ago

> https://bvckup2.com/wip/r82-preferences.gif 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 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?

JusticeJuice 4y ago

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