I believe the term comes from the game development sphere originally. Martin Jonasson & Petri Purho (creator of Noita and Crayon Physics Deluxe) gave a famous talk about it in 2010, Juice it or lose it: https://www.youtube.com/watch?v=Fy0aCDmgnxg
It's nice to see these terms being adopted by the wider software development industry, though I doubt we'll be seeing much screenshake on websites or utility apps any time soon.
thanks for posting these! After checking to see if they might be sources referenced in this post, the first thing I did was look up _Juice it or lose it_ -- it's an excellent demonstration of these concepts.
I had never really paid attention to or understood tweening/lerping before watching their video, or that it's so tweakable, and it made the idea and uses slot perfectly into my mind.
This 'Juice' concept elevates mundane experiences, making them more enjoyable and satisfying. While similar to the 'bells and whistles' concept, which often adds superficial embellishments that distract from the core experience, 'Juice' integrates seamlessly with the essential elements of a product or service. It's the secret sauce that makes cool products stand out. Personally, I'm always on the lookout for 'Juiced' products that deliver exceptional experiences. Even I try myself to juice my own Apps.
All that juice on the delete button really plays poorly with iOS text selection. While I agree with the article in spirit, I’ll take this delete button dry (just rinse the glass please!)
I understand the idea is to 'juice up' the UI, but again, IMHO, it's not the right word for non-essential-but-nice additional behaviors. And I believe the original 'slang' usage comes from 'juicing' your engine, your portfolio, etc, ie squeezing extra performance out of it, which is almost the opposite meaning to here.
Just to be clear, the word has already been used for at least 11 years in the game industry. (ex see https://youtu.be/Fy0aCDmgnxg), and it is very frequently used. There is absolutely no sense in which it is the “not the right word”, especially not at this point, where it has a very clear meaning in that field.
I don’t know where the term originated, but I’ve always thought of it as having to do with fruit. An apple is good, a juicy apple is better. The two may have the exact same flavor, but the juiciness improves experience of eating the apple.
For example with the button cover and click animations are probably a good idea in most contexts. However the sounds would probably be unwelcome on a site that otherwise didn't make sound. However a sound may be a great addition in a video game that already has lots of sound.
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.
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.
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?
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.
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.
> UI elements that move around are bad for usability
Bit of a broad brush here. When the "next ->" button moves around of its own accord (in response to changing text content, say) and you need to click it to page through 10 screens of text, that's for sure bad. When elements move in response to a toggle the user clicked when they are nowhere close to the elements that move that's really not a big deal in my opinion. This is especially not-bad when the toggle will move everything back without the user moving their cursor.
Consider the "Backup verification" window[1]: The whole window is overwritten with a readme upon clicking "More on this...". This is bad, I've seen more than enough people X out of such windows (because they think it's not the window they were working with) and then wonder where the window they were working on went.
Why couldn't the readme open in a separate window? It's completely different contextual information to the window they were working in, and in fact most software do produce a new window when opening help documentation so users aren't confused. Different windows for different contexts, this has been standard design for windowed environments since forever.
Now consider the "Backup settings" window[2][3]: Why are the various dropdowns a button you click on which proceeds to resize and move the entire window?
Standard design for dropdowns have always been dropdown menus. Almost everyone knows how to use dropdown menus, both Windows and other programs use them. This is inconsistent design language for the environment the software operates in, and this is confusing for users.
What's more, there is no scroll bar to indicate there is information overflow in the window[2]. Can you tell there is more information above the "More options..." section in window[3]? I know I can't.
We need to take a page from Apple's playbook on this: Consistent design language is good design language. In this case, follow the design language of Win32 and Windows in general. Yes, this isn't as easy as it sounds since Microsoft themselves violate the rule of a consistent design language, but that's not an excuse for others to also violate it.
Not presenting a scroll bar to indicate information overflow is also inexcusable. A user interface exists to inform and guide a user, hiding or even lying to the user defeats the very purpose of a user interface. On that note, the window is being resized, why then isn't it being resized to show all of its contents? At least the resizing would then have a legitimate reason.
Now consider the "Preferences" window[4]: Why are the help texts for this window hidden behind "?" when the other windows either don't have them [1] or show the help text outright[2]?
Why is the "More..." text a hyperlink and the "Less..." button a button when they are the same interface element? This criticism also applies to the "Backup verification" window which exhibits the same problem.
This is all inconsistent design language within the software itself, let alone when compared with its operating environment. This is bad, again: Consistent design language is good design language.
>Needing to pay attention to the contents of the screen? What an unrealistic burden.
I know far too many people (read: common users) who quickly lose track of what's going on if their program keeps changing things. Hell, I find most people still can't keep track of tabs in a web browser (because each tab overwrites most of the window), let alone your stuff.
>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.
A singular, global button or toggle somewhere that permanently keeps the UI in either Simple or Advanced modes? Almost nobody needs to flick between the two back and forth. Common users only care for what will get their work done, power users always want (and can deal with) all the details.
>The point of all that "hell" is the layering and progressive refinement of the UI.
What you call "layering and progressive refinement" I call an unnecessary click and movement of UI elements that don't have to exist. The former is a waste of time, and the latter is a waste of screen real estate.
The "once a year" point goes both ways. If it's only going to be used once a year, then "juicing" (in the sense that the original article meant) is only going to give very negligible added value whichever way you look at it. The original example (mushrooms in Mario) is effective because of the frequency of the event which triggers it. If the player only heard the sound once per year, it would be irrelevant.
On the other hand, if we're talking about parts of the UI which will see regular use then I agree with the other comments about usability reduction, while also acknowledging that there are other opinions out there. The best approach with these sorts of controversial features (i.e. those which some users love and others hate) is to offer a toggle in the options with a default aimed at the non-power user.
> If it's only going to be used once a year, then "juicing" (in the sense that the original article meant) is only going to give very negligible added value whichever way you look at it.
Meh. The animations juice, maybe. The slightly non-standard UI, though, is probably worth it if it avoids the nested-modal-dialog hell the stock Windows UI is prone to having. Installed mouse and audio drivers on NT 4 recently and, well, I’m glad I forgot how bad it was. Making settings non-awful is important even if you only visit them once.
What’s the upside for the user of a nested sequence of modal dialogs anyway? Though I understand the technical convenience given how limited the bare Win32 toolkit is. And there definitely is a downside for the user: I can’t say how many times I’ve seen relatively sophisticated users fruitlessly smash the OK button on the wrong (not top-level) dialog, because they all look the same. (This is perhaps salvageable by more prominently shading disabled windows—something Win95 admittedly could not afford on contemporary hardware—instead of blinking the title bar, but is it worth it?)
For the first link I think it’s pretty bad as-is, but would be much better if you distinguished the new “more” items in some way. Eg different colored text (and make the “more” button match that formatting). That way you don’t need to re-scan every single option to find what’s changed, and keeps the visual shape of the sections of existing text there. I am also baffled by the menu hiding. But I think the other two examples are pretty nice.
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.
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)
These sort of over the top animations can also help folks like that, like how you see minimized windows shrink into the dock on a Mac, as opposed to just disappearing on Windows.
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.
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
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.
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.
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.
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?
Funny enough I touched the delete button on my iPad with the sound turned off and it didn’t seem any different no matter how much juice I was asking for until I realized I was supposed to hold down the delete button.
Yeah, The button was becoming better until it reached the hold-to-delete stage, that was when the UX got worse again. Surprising hold-to-delete was the biggest step, but I also disliked every step that followed.
I play a lot of Overwatch and the juice definitely makes a difference. Most specifically the headshot sounds are extremely satisfying in an inexplicable way.
The juiciest. Our group of friends still loves using the iOS version of your app on game night. I hadn’t been familiar with the term juicy, but I always hoped more non-game apps would take lessons from your brilliant design.
Win or lose, you’ve made keeping score such a playful delight for us all these years. Thank you!
Mario 64 has 209 mario animations. I think this is probably the reason other 3d platformers at the time felt stiff in comparison.
Also they realised at some point in development that mario just wasn't fun to control so they put a lot of effort into that. I feel games today seem to put a lot of effort into content instead.
My favourite games are all ones with deep satisfying controls that require practice to get good at, wave race 64, 1080 snowboarding, Tony hawk's 2, Goldeneye eye.
Or maybe I'm just old!
I grew up in the same era of N64 gaming and we're just old. I go back and play goldeneye now and it's fairly clunky. TH2 and M64 hold up pretty well though. All is not lost to the past though as newer Mario games are control strong that offer options not available in the past to a player, like Cappy. Gang Beasts is an interesting experiment in character control because it seems to be a game that is really difficult with regards to the controls. You can get around and have fun but if you want to be good there's a steep learning curve for the controls. Once you have a pretty good handle on how to manipulate your character and interact with others it's fairly satisfying.
I've been playing quite a bit of Goldeneye on retro arch same for 1080 and waverace, the higher res helps, but I think they are still great games that I don't think have been matched since :(
I've an everdrive and an n64, but it looks too awful on a modern even with an ossc upscaler. Well it's not an upscaler really, but a line doubler, the results are awful on n64 (and ps1). I even rgb modded my n64 to use the ossc. Waste of money!
Basically every Mario game after Mario 64 had some sort of mechanic to help you correct a badly aimed jump, which is very handy since platforming is a tricky thing in 3D. Mario Sunshine had FLUDD's hover nozzle, Mario Galaxy had the spin, Mario Odyssey has Cappy.
Going back to Mario 64 now does feel quite primitive and can feel frustrating at times.
> I go back and play goldeneye now and it's fairly clunky
Haha, yes, played so much multiplayer and after playing modern games you go back to golden eye and the controls are wacky, the speed is slow, can't jump or fall off of ledges ... it's just a different era.
There's a slew of games out there nowadays that have continued this trend, usually indie ones; I can definitely recommend Hollow Knight for great animations and feel, as well as Hades and Celeste; all of those also reward practice to get good at them.
> Also they realised at some point in development that mario just wasn't fun to control so they put a lot of effort into that.
The story I recall is that before they did anything else they worked on how Mario felt to control, having him jump around in an empty room until that alone was fun to play with.
This could be a good explanation for why super smash bros melee is still popular 20 years later. Moving in the game is fun like playing with a toy. Great read!
One thing is doesn't mention however, is when do you want a "juiced" emotional "soulful" interaction with your computer, and when you don't.
I think it's telling that most of the examples are coming from video games, where layered emotional experiences in a different world are the whole point.
In contrast, when I'm trying to be productive with a spreadsheet or a video editor or sending an email, juice/emotion/soul is the last thing I need. I'm focusing on my task and I want my tools to get out of the way, not draw emotional attention to themselves. Which is why flat design, the ultimate "anti-juice", has been so successful.
I always thought there was something weird about how the change they made to the BSoD in Windows 8, where instead of looking like an actual OS crash it's a giant :( sad face with some cutesy text saying something like "we're collecting some error info"
That is a valuable observation. Juice engages our senses and creates a more full-body experience. In a game, that level of immersion is desirable, because it puts us in a world we want to be in.
I think it’s important to respect that not every person using a software wants to be doing so, and we should minimize the literal amount of time and energy it takes to use.
Such apps can still be beautiful, of course (a job well done ought to look it) but with a quiet beauty that acknowledges their place in the hierarchy of importance to the user.
This is why sometimes, for me, the juiciest feeling an app can give is just doing the thing I wanted instantly. The “pop” of new UI into place within milliseconds is very satisfying, especially if the layout doesn’t shift as a result.
Clearly a Mario-style "cha-ching" sound would be really annoying, but Excel's cursor is animated, Sheets slides tabs around when you reorder the sheet tabs at the bottom, there are all sorts of hover states and previews, the ctrl-f highlight has a little bounce to it, etc.
I think you could even look at syntax highlighting, matching-paren-highlighting, and intellisense/autocomplete as a sort of juice - they're affordances that indicate that what you're doing is "good", and the app is "understanding you".
Even more than a spectrum (where "pro apps" need "less juice"), it seems like there's just different juice for different apps. For example, it seems like some kind of better-designed juice could have saved Citibank a lot of money: https://arstechnica.com/tech-policy/2021/02/citibank-just-go...
A good example of what you are talking about is usage of easing in UI animations. Good use of easing allows the animation to be perceived as natural, but if you apply the wrong kind of easing in the wrong context it causes the whole experience to feel clunky.
A repeating issue I'll face when trying to 'juice' a bit is... mobile vs desktop.
That 'project management setup' animation is a good example. That is kind slick - definitely useful, and I've found myself coming up with things like that over time. It's not trivial, and takes some time. Then... "but it doesn't work on mobile!". You end up needing to build an entirely different "experience" for mobile users. Or... say "no support for mobile" (and possibly disable it in some sense?) Or let people live with a really bad shrunk down experience.
I know it's all about setting expectations and such, but it's still annoying. The types of 'juice' you'd introduce are going to be somewhat device and screen-size dependent.
I liked this article, but I thought the Delete button example with "maximum juice" was a very poor user experience. When you just click the button (without holding), it feels like it's broken - you just see a teeny bit of red border to the left but nothing happens. It's totally non-obvious that you're supposed to hold the delete button.
That's what kinda gets me about UX/UI design articles - often times I think it's good advice, but then the examples on the page just seem obviously bad to me. It reminded me of Jakob Nielsen's website from about a decade or so ago. Here was one of the most famous UX researchers in the world, and I often thought he gave great advice, but his personal website was just god-awful ugly. And not ugly in a "lacking ornamentations but providing great usability" way (I'd probably put HN's design in that bucket), but just in a "this site is really ugly" way.
I’m getting increasingly confused with these modern, flat UIs on touch screens with near zero levels of juice. Most recently, I’ve noticed the HBO Max app gives no indication that the play button has been pressed. When using a Chromecast, the wait to see if the button press registered is interminable (okay, ~10 seconds). It’s enough to make me pine for the consistent, discoverable, butt-ugly UIs of Windows 95.
Yea, and those toggles with icons that when you click the button turn from "filled in" to "maybe filled in?" and then you can't tell if your toggle is on or off. Alternately, the background of the icon is like dark blue, then the "ON" color for the icon foreground is off-white, and the "OFF" color for it is light-grey. I can't always tell which is on and which is off!
Just give me a thing that looks like an actual switch that moves left/right or up/down and turns a bright color when it's ON (color can vary for cultural representation of ON or whatever) and becomes dark grey and clearly OFF when it's untoggled.
Yes, I hate that in games. I'd rather have a second button show up that I can quickly click again. And just personal feeling but the time you need to hold it for is always too long.
The sounds is also too much. I don't want sound from every button I click. The sound from the mouse or touchpad is already enough.
I don't mind that when they do it right and have a thing pop-up that says "HOLD X" and then a bar fills in around the X button. The problem really becomes when they want you to "HOLD X" but they don't give any indication that you need to hold it.
I hate any design that forces me to wait any amount of time. I could be another step forward if convenient enough, but no... I had to wait the hardcoded seconds. There's never a valid amount of seconds to wait to indicate something that will make everyone happy. Just skip the wait, let the user decide its own pace to consume the ui.
Same! However, popular platforms also have to account for older or disabled users, who often are unable to click buttons fast enough. Or when they do, hold them down for too long with unpleasant results.
I think waiting can be used effectively for actions that are not common and you want the user to take a little time to consider the choice. I think it’s used badly more often that well, but it sometimes is used well. In games for example, a destructive action like refunding a point that’s earned and the refund costs earning time. Something you do sometimes, costs a little effort, but doesn’t warrant a confirmation button.
> I liked this article, but I thought the Delete button example with "maximum juice" was a very poor user experience.
This is a fair point, but I got the impression that the Delete button in question wasn't meant to say "here's how to make a Delete button better", but rather "here's what I'm talking about when I use this term that might be unfamiliar". The elevator music on the "max juice" setting was pretty clearly tongue-in-cheek.
Having examples that start at 0% usage of the concept and go all the way to 200% usage makes it more clear what it actually is.
When you need to explain to the user how a UI element works with words, "hold to delete" in this particular example, you've already failed. Also, long-clicking isn't really a thing on desktop.
Related. Syntax.fm podcast interviewed the creator of Wordle[0]. In it he talked about seeing a talk[1] about adding "juice" and how it influenced some of the UX decisions for the game. I personally think that Wordle had the perfect amount a juice for what it was, a web game that involved text/reading.
I think it's nice to add some juice to website/apps but they are not games and I think should be kept at a minimum. Know your audience. I don't want any of my finance related apps full of unnecessary juice, but that doesn't mean I don't want feedback for any processes I'm waiting for. Sometimes apps try to be cool/edgy with fancy transitions and those things look cool the first few times I see it but get annoying after that because I'm having to wait for it every time. Anyways I am rambling but you get the gist, don't overuse juice and the level of juice depends on your audience and the nature of your product.
Are we looking at the same page? The first example is a confirm-to-delete button created with CSS+JS. That's a bread-and-butter CRUD app feature that rarely should appear in games (which opt for more immersive deletion mechanics, like dragging an object into a trash can).
I've definitely seen video games that have hold-to-delete buttons like that on a file select screen or something, where they want the action to be intentful so you don't accidentally delete your save.
It's implemented in CSS+JS because it's a web page.
123 comments
[ 30.1 ms ] story [ 316 ms ] threadAnother classic talk on the same topic comes from Jan Willem Nijman in 2013, The art of screenshake: https://www.youtube.com/watch?v=AJdEqssNZ-U
It's nice to see these terms being adopted by the wider software development industry, though I doubt we'll be seeing much screenshake on websites or utility apps any time soon.
I had never really paid attention to or understood tweening/lerping before watching their video, or that it's so tweakable, and it made the idea and uses slot perfectly into my mind.
[1] https://www.andy.works/words/the-most-satisfying-checkbox
[2] https://lab.hakim.se/progress-nav/
[3] https://www.youtube.com/watch?v=o0NtjY17v5w
I wonder if he works at Atlassian. The screenshot looks a lot like Jira.
Keeping with comestibles, maybe 'spice/spices', 'condiments', 'flavor', 'toppings', 'sauce', etc?
I understand the idea is to 'juice up' the UI, but again, IMHO, it's not the right word for non-essential-but-nice additional behaviors. And I believe the original 'slang' usage comes from 'juicing' your engine, your portfolio, etc, ie squeezing extra performance out of it, which is almost the opposite meaning to here.
I don’t know where the term originated, but I’ve always thought of it as having to do with fruit. An apple is good, a juicy apple is better. The two may have the exact same flavor, but the juiciness improves experience of eating the apple.
I think my favorite bit of juice is iOS’s rotation animations. Particularly when they have a bit of extra fun with it like you see in the calculator.
For example with the button cover and click animations are probably a good idea in most contexts. However the sounds would probably be unwelcome on a site that otherwise didn't make sound. However a sound may be a great addition in a video game that already has lots of sound.
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...
>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?
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.
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.
Not that I encourage the tone in this thread, but... There is another perspective to it.
The best UIs are those that keep movements and other dynamic facets to the absolute minimum. A boring UI is a good UI.
Bit of a broad brush here. When the "next ->" button moves around of its own accord (in response to changing text content, say) and you need to click it to page through 10 screens of text, that's for sure bad. When elements move in response to a toggle the user clicked when they are nowhere close to the elements that move that's really not a big deal in my opinion. This is especially not-bad when the toggle will move everything back without the user moving their cursor.
Why couldn't the readme open in a separate window? It's completely different contextual information to the window they were working in, and in fact most software do produce a new window when opening help documentation so users aren't confused. Different windows for different contexts, this has been standard design for windowed environments since forever.
[1]: https://bvckup2.com/wip/r82-backup-verification-dialog-r2.gi...
--------------------------
Now consider the "Backup settings" window[2][3]: Why are the various dropdowns a button you click on which proceeds to resize and move the entire window?
Standard design for dropdowns have always been dropdown menus. Almost everyone knows how to use dropdown menus, both Windows and other programs use them. This is inconsistent design language for the environment the software operates in, and this is confusing for users.
What's more, there is no scroll bar to indicate there is information overflow in the window[2]. Can you tell there is more information above the "More options..." section in window[3]? I know I can't.
We need to take a page from Apple's playbook on this: Consistent design language is good design language. In this case, follow the design language of Win32 and Windows in general. Yes, this isn't as easy as it sounds since Microsoft themselves violate the rule of a consistent design language, but that's not an excuse for others to also violate it.
Not presenting a scroll bar to indicate information overflow is also inexcusable. A user interface exists to inform and guide a user, hiding or even lying to the user defeats the very purpose of a user interface. On that note, the window is being resized, why then isn't it being resized to show all of its contents? At least the resizing would then have a legitimate reason.
[2]: https://bvckup2.com/wip/r82-backup-settings.gif
[3]: https://bvckup2.com/wip/r82-rabbit-hole.gif
--------------------------
Now consider the "Preferences" window[4]: Why are the help texts for this window hidden behind "?" when the other windows either don't have them [1] or show the help text outright[2]?
Why is the "More..." text a hyperlink and the "Less..." button a button when they are the same interface element? This criticism also applies to the "Backup verification" window which exhibits the same problem.
This is all inconsistent design language within the software itself, let alone when compared with its operating environment. This is bad, again: Consistent design language is good design language.
[4]: https://bvckup2.com/wip/r82-preferences.gif
That's not how one starts a "constructive conversation".
But, yeah, that's just like my opinion too, man.
I neither made "generic dismissive remarks" nor assumed you're "an idiot", but hey: If you want me to flame you to high heaven I can certainly oblige.
If you can't take constructive criticism, publishing stuff is probably not your alley.
I know far too many people (read: common users) who quickly lose track of what's going on if their program keeps changing things. Hell, I find most people still can't keep track of tabs in a web browser (because each tab overwrites most of the window), let alone your stuff.
>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.
A singular, global button or toggle somewhere that permanently keeps the UI in either Simple or Advanced modes? Almost nobody needs to flick between the two back and forth. Common users only care for what will get their work done, power users always want (and can deal with) all the details.
>The point of all that "hell" is the layering and progressive refinement of the UI.
What you call "layering and progressive refinement" I call an unnecessary click and movement of UI elements that don't have to exist. The former is a waste of time, and the latter is a waste of screen real estate.
On the other hand, if we're talking about parts of the UI which will see regular use then I agree with the other comments about usability reduction, while also acknowledging that there are other opinions out there. The best approach with these sorts of controversial features (i.e. those which some users love and others hate) is to offer a toggle in the options with a default aimed at the non-power user.
Meh. The animations juice, maybe. The slightly non-standard UI, though, is probably worth it if it avoids the nested-modal-dialog hell the stock Windows UI is prone to having. Installed mouse and audio drivers on NT 4 recently and, well, I’m glad I forgot how bad it was. Making settings non-awful is important even if you only visit them once.
What’s the upside for the user of a nested sequence of modal dialogs anyway? Though I understand the technical convenience given how limited the bare Win32 toolkit is. And there definitely is a downside for the user: I can’t say how many times I’ve seen relatively sophisticated users fruitlessly smash the OK button on the wrong (not top-level) dialog, because they all look the same. (This is perhaps salvageable by more prominently shading disabled windows—something Win95 admittedly could not afford on contemporary hardware—instead of blinking the title bar, but is it worth it?)
That's it. Allowing changing things in place is exactly one of the goals.
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
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.
> 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.
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.
> 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!
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?
Win or lose, you’ve made keeping score such a playful delight for us all these years. Thank you!
Also they realised at some point in development that mario just wasn't fun to control so they put a lot of effort into that. I feel games today seem to put a lot of effort into content instead.
My favourite games are all ones with deep satisfying controls that require practice to get good at, wave race 64, 1080 snowboarding, Tony hawk's 2, Goldeneye eye. Or maybe I'm just old!
I've an everdrive and an n64, but it looks too awful on a modern even with an ossc upscaler. Well it's not an upscaler really, but a line doubler, the results are awful on n64 (and ps1). I even rgb modded my n64 to use the ossc. Waste of money!
Going back to Mario 64 now does feel quite primitive and can feel frustrating at times.
Haha, yes, played so much multiplayer and after playing modern games you go back to golden eye and the controls are wacky, the speed is slow, can't jump or fall off of ledges ... it's just a different era.
If you're stuck in the office, have a go at the pico-8 version of Celeste at https://www.lexaloffle.com/bbs/?pid=11722
The story I recall is that before they did anything else they worked on how Mario felt to control, having him jump around in an empty room until that alone was fun to play with.
This could be a good explanation for why super smash bros melee is still popular 20 years later. Moving in the game is fun like playing with a toy. Great read!
One thing is doesn't mention however, is when do you want a "juiced" emotional "soulful" interaction with your computer, and when you don't.
I think it's telling that most of the examples are coming from video games, where layered emotional experiences in a different world are the whole point.
In contrast, when I'm trying to be productive with a spreadsheet or a video editor or sending an email, juice/emotion/soul is the last thing I need. I'm focusing on my task and I want my tools to get out of the way, not draw emotional attention to themselves. Which is why flat design, the ultimate "anti-juice", has been so successful.
I think it’s important to respect that not every person using a software wants to be doing so, and we should minimize the literal amount of time and energy it takes to use.
Such apps can still be beautiful, of course (a job well done ought to look it) but with a quiet beauty that acknowledges their place in the hierarchy of importance to the user.
This is why sometimes, for me, the juiciest feeling an app can give is just doing the thing I wanted instantly. The “pop” of new UI into place within milliseconds is very satisfying, especially if the layout doesn’t shift as a result.
I think you could even look at syntax highlighting, matching-paren-highlighting, and intellisense/autocomplete as a sort of juice - they're affordances that indicate that what you're doing is "good", and the app is "understanding you".
Even more than a spectrum (where "pro apps" need "less juice"), it seems like there's just different juice for different apps. For example, it seems like some kind of better-designed juice could have saved Citibank a lot of money: https://arstechnica.com/tech-policy/2021/02/citibank-just-go...
That 'project management setup' animation is a good example. That is kind slick - definitely useful, and I've found myself coming up with things like that over time. It's not trivial, and takes some time. Then... "but it doesn't work on mobile!". You end up needing to build an entirely different "experience" for mobile users. Or... say "no support for mobile" (and possibly disable it in some sense?) Or let people live with a really bad shrunk down experience.
I know it's all about setting expectations and such, but it's still annoying. The types of 'juice' you'd introduce are going to be somewhat device and screen-size dependent.
I only watched The Expanse and became aware of GoT later I think. So I had assumed it was the order in which they were produced too.
That's what kinda gets me about UX/UI design articles - often times I think it's good advice, but then the examples on the page just seem obviously bad to me. It reminded me of Jakob Nielsen's website from about a decade or so ago. Here was one of the most famous UX researchers in the world, and I often thought he gave great advice, but his personal website was just god-awful ugly. And not ugly in a "lacking ornamentations but providing great usability" way (I'd probably put HN's design in that bucket), but just in a "this site is really ugly" way.
Just give me a thing that looks like an actual switch that moves left/right or up/down and turns a bright color when it's ON (color can vary for cultural representation of ON or whatever) and becomes dark grey and clearly OFF when it's untoggled.
The sounds is also too much. I don't want sound from every button I click. The sound from the mouse or touchpad is already enough.
This is a fair point, but I got the impression that the Delete button in question wasn't meant to say "here's how to make a Delete button better", but rather "here's what I'm talking about when I use this term that might be unfamiliar". The elevator music on the "max juice" setting was pretty clearly tongue-in-cheek.
Having examples that start at 0% usage of the concept and go all the way to 200% usage makes it more clear what it actually is.
I think it's nice to add some juice to website/apps but they are not games and I think should be kept at a minimum. Know your audience. I don't want any of my finance related apps full of unnecessary juice, but that doesn't mean I don't want feedback for any processes I'm waiting for. Sometimes apps try to be cool/edgy with fancy transitions and those things look cool the first few times I see it but get annoying after that because I'm having to wait for it every time. Anyways I am rambling but you get the gist, don't overuse juice and the level of juice depends on your audience and the nature of your product.
0. https://syntax.fm/show/430/creator-of-wordle-josh-wardle
1. https://www.youtube.com/watch?v=Fy0aCDmgnxg
- Unnecessary & inaccessible interactivity (hold button down)
- Hiding critical information within animations
- Extra sounds competing with screen readers
Cute page but wholly impractical for building accessible web products.
It's implemented in CSS+JS because it's a web page.
Would you ever refer to the user of a CRUD app as a player?
> It originated in games but can be used in other types of software.