Juice | Hacker News Reader

Juice

garden.bradwoods.io

663 pointsilt119 comments

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.

And the zero-juice still had juice: the button changes on click, which isn't strictly necessary.

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.

Absolutely agree with this.

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.

In Returnal game they had to add an option for disabling hold for item pickup. In game you can easily die (from laser traps) while holding 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.

It also isn't very mobile friendly. Your finger covers the majority of effects and status changes.

On mobile you can also accidentally drag the button away when it's juiced. Be careful when you are juicing your buttons!

the delete button example is clearly in jest as a way of exemplifying through exaggeration what they author meant

Usability and prettiness are largely orthogonal though. Sites like Craigslist have always been praised for their usability, despite not being pretty.

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.

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...

your animations look very smooth!

>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?

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.

But that's just like, my opinion, man.

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.

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.

This is not stuff you'll be clicking every day. The desktop has always been interactive, with windows and dialogs popping up and disappearing etc.

> 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.

[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

The GP made generic dismissive remarks on a spherical cow in vacuum and under a blanket assumption that the other person is an idiot.

That's not how one starts a "constructive conversation".

But, yeah, that's just like my opinion too, man.

>The GP made generic dismissive remarks on a spherical cow in vacuum and under a blanket assumption that the other person is an idiot.

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.

>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.

Very frustrating for older people when web sites become adventure games with hidden doors and changing maps

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?)

> What’s the upside for the user of a nested sequence of modal dialogs anyway?

That's it. Allowing changing things in place is exactly one of the goals.

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.

> 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

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.

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

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

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

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.

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.

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.

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!

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.

That's hot! Well done!

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

> 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?

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

Most of this article is great; the delete button is terrible.

The majority of your users are likely accessing your site on their mobile device. We crossed the 50% threshold for mobile views a long, long time ago. Desktop web browsing is -- maybe not surprisingly -- becoming a generational gap. For people who grew up entertained by their parents phones and tablets, it's rare for them to casually browse on their laptop (if they even have one).

The entire demonstration falls flat on mobile. There are no hover states on mobile. The feedback animations don't work on mobile. Holding the button down causes weird text highlighting issues. Even just the button itself is too small on a phone. It's a real demonstration of "let me just graft on the mobile layout later" after going through the desktop song and dance, which is missing a large chunk of your userbase.

The other critique I would have is around "novel" UX on web. If you're making someone learn a new way to hold down a delete button, that's a cognitive load on your user that in reality only serves to drive your users away from your product. How many of us flubbed the hold-to-delete interaction the first time, because we expected a button on a webpage to behave like a button on a webpage? I'd venture almost 100% of us. Some of us picked up on the slider that indicated that we had to keep holding it down to make the button work, but a lot of us probably didn't, and certainly a good chunk of your users will abandon their task because they can't figure out that interaction.

The author is talking about the gaming paradigm; this is where you get those random, wacky "tap twice to double jump" weird modal dialogs in games, because the complexity is so high and a user literally has to learn how to control their character. Doing this on the web is a guaranteed ticket to a high abandonment rate.

Definitely add "juice" to your pages, but don't do it at the price of _predictability_. Let your website behave like a website. Your users will thank you.

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

Another 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.

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.

That checkbox has a story as well[1], and the author references gamedev explicitly. I still like the table-of-contents snake[2,3] best.

[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

This is a really interesting article.

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.

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.

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

Mario is the one visual element that you stare at the entire game. If you're going to put effort into anything, it's that.

> 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 is something that can be done tastefully. But that takes skill. A boring interface is far better than a poorly done “juiced” one.

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.

I think it depends a lot on the context.

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 usually work as a game dev, but I made a juicy app for the Blackberry Playbook (lol) a long time ago: https://youtu.be/sXqXpwyBI1k

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!

Thanks for the comment, I appreciate it!

That's really awesome!

Seems similar to what the software UX industry calls Microinteractions: https://www.nngroup.com/articles/microinteractions/

This is a really beautiful way to explain this kind of thing in software.

When I got to this bit "I work on multi-team task management software", it really made me think though. So much thoughtful design talent exists, and we're all just making B2B SaaS Productivity Software. Maybe I'm projecting my own insecurities though.

Gotta make money.

One day we’ll have Star Trek utopia where we are all free to pursue our art.

At least until then we can still blog about hobbies.

It seems like a bad name for the concept. It implies 'essence', rather than 'embellishments'.

Keeping with comestibles, maybe 'spice/spices', 'condiments', 'flavor', 'toppings', 'sauce', etc?

The name comes from wanting to make things “juicy”.

Fatter buttons?

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.

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.

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!)

Hmm, I can't see the button while my finger is on it.

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.

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.

0. https://syntax.fm/show/430/creator-of-wordle-josh-wardle

1. https://www.youtube.com/watch?v=Fy0aCDmgnxg

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.

> 'Juice' was our wet little term for constant & bountiful user feedback. A juicy game element will bounce & wiggle & squirt & make a little noise when you touch it. A juicy game feels alive & responds to everything you do - tons of cascading action & response for minimal user input. It makes the player feel powerful & in control of the world, & it coaches them through the rules of the game by constantly letting them know on a per-interaction basis how they are doing.

I feel like really high-quality software systems have this same feel, they allow a developer to dive in and splash around and get tons of salient feedback.

Cries in a11y

- 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.

The page is clearly oriented towards building games, not web products.

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.

The very first sentence is "Juice is the non-essential visual, audio & haptic effects that enhance the player's experience"

Would you ever refer to the user of a CRUD app as a player?

You omitted the key sentence in that introductory section:

> It originated in games but can be used in other types of software.

The last sentence is the key sentence? Come on.

I think if I encountered that in a UI I would actively seek another product...

'Juice' is not universally good. In the context of a game there is utility, but even then the audio etc becomes grating. People tend to start turning off the sound because it gets so bad.

Somewhere around the first couple levels in that slider is I think I would fall - most people would agree click acknowledgement is good, but I found the animation actively unuseful, distracting, agravating.

A small example that does this very well is the “Streaks” app on iOS.

I often wish that completing iOS/MacOS reminders had more “juice”, especially compared to dismissing them.

I think the concept of juice is great, though sometimes less-is-more. If a fruit is too juicy, it's like eating slime or biting a smoothie.

The "burstiness" of juice should contrast with the boringness of everything else. A delete button for e.g. is a very sterile interaction vs the mario coin so probably doesn't need maximum juice.

I love this concept. Let's forgive the delete button implementation. I get the spirit of what the author was trying to do. I am all for juicer UX. Problem is, UX is rarely a p0 item, and I've seen many products die a death of a thousand papercuts which have been depri'd to make room for the next shiny launch.

> At my day job, I work on multi-team task management software

I wonder if he works at Atlassian. The screenshot looks a lot like Jira.

Great great video on juice applied to games: https://www.gdcvault.com/play/1016487/Juice-It-or-Lose

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.

Apple Pay does this very well.

I would say, Apple in general does this very well.

> the best games are made with toys

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!

It has the juice. I can't imagine a more beautiful thing.

This is so corny

Related experiment: https://ash-k.itch.io/textreme-2

> Juice' was our wet little term for constant & bountiful user feedback

Eew dude what is going on at your job?

That section about "Game of Thrones" -- surely there was a precedent : The Expanse TV series?

Expanse started 4 years after Game of Thrones did

Thank you - I didnt know.

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.

My term for this is ‘squish’ and I always try to set aside time on any project for a ‘squish pass’.

Adding hold-delays to anything is the opposite of juicy.

I have clicked on that heart more times than I want to admit...

Be excited! Be Be Excited!

This website crashes in Safari for me every time.

I'm on Mac Safari Version 16.3 (18614.4.6.1.6) and no crashing, seems to operate fine.

Reply on news.ycombinator.com