21 ms·

Juice

663 points by ilt 4y ago

popcalc 4y ago
Apple Pay does this very well.
- mromanuk 4y ago
  I would say, Apple in general does this very well.
doomlaser 4y ago
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 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 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.
- wcarss 4y ago
  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.
- mananaysiempre 4y ago
  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 https://www.andy.works/words/the-most-satisfying-checkbox [2] https://lab.hakim.se/progress-nav/ https://lab.hakim.se/progress-nav/ [3] https://www.youtube.com/watch?v=o0NtjY17v5w https://www.youtube.com/watch?v=o0NtjY17v5w
jannes 4y ago
> 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.
hhh 4y ago
This website crashes in Safari for me every time.
- wildrhythms 4y ago
  I'm on Mac Safari Version 16.3 (18614.4.6.1.6) and no crashing, seems to operate fine.
mromanuk 4y ago
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.
trentgreene 4y ago
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!)
jacknews 4y ago
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?
- MattRix 4y ago
  The name comes from wanting to make things “juicy”.
  - jacknews 4y ago
    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.
    - MattRix 4y ago
      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 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.
skavi 4y ago
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.
- kevincox 4y ago
  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.
Edd314159 4y ago
Seems similar to what the software UX industry calls Microinteractions: https://www.nngroup.com/articles/microinteractions/ https://www.nngroup.com/articles/microinteractions/
apankrat 4y ago
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
amelius 4y ago
Hmm, I can't see the button while my finger is on it.
PaulHoule 4y ago
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.
- Semaphor 4y ago
  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.
azhenley 4y ago
Great great video on juice applied to games: https://www.gdcvault.com/play/1016487/Juice-It-or-Lose https://www.gdcvault.com/play/1016487/Juice-It-or-Lose
- bentcorner 4y ago
  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.
MattRix 4y ago
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 https://youtu.be/sXqXpwyBI1k
- tomng 4y ago
  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!
  - MattRix 4y ago
    Thanks for the comment, I appreciate it!
- david422 4y ago
  That's really awesome!
bennysonething 4y ago
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!
- illegalsmile 4y ago
  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.
  - bennysonething 4y ago
    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!
  - hbn 4y ago
    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.
kevinwang 4y ago
> 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!
crazygringo 4y ago
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.
- hbn 4y ago
  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"
- notduncansmith 4y ago
  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.
- jkaptur 4y ago
  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-got-a-500-million-lesson-in-the-importance-of-ui-design/ https://arstechnica.com/tech-policy/2021/02/citibank-just-go...
jacobyoder 4y ago
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.
albert_e 4y ago
That section about "Game of Thrones" -- surely there was a precedent : The Expanse TV series?
- thinkingemote 4y ago
  Expanse started 4 years after Game of Thrones did
  - albert_e 4y ago
    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.
doctorhandshake 4y ago
My term for this is ‘squish’ and I always try to set aside time on any project for a ‘squish pass’.
hn_throwaway_99 4y ago
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.
- cwillu 4y ago
  And the zero-juice still had juice: the button changes on click, which isn't strictly necessary.
  - bqmjjx0kac 4y ago
    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.
    - ok_dad 4y ago
      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.
deleted 4y ago
[deleted]
deleted 4y ago
[deleted]
flanbiscuit 4y ago
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 https://syntax.fm/show/430/creator-of-wordle-josh-wardle 1. https://www.youtube.com/watch?v=Fy0aCDmgnxg https://www.youtube.com/watch?v=Fy0aCDmgnxg
pphysch 4y ago
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.
- Invictus0 4y ago
  The page is clearly oriented towards building games, not web products.
  - pphysch 4y ago
    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).
    - hbn 4y ago
      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.
    - Invictus0 4y ago
      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?
      - pphysch 4y ago
        You omitted the key sentence in that introductory section: > It originated in games but can be used in other types of software.
        4y ago
mark242 4y ago
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.
mdcrowcroft 4y ago
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.
- kridsdale1 4y ago
  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.
truculent 4y ago
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.
notShabu 4y ago
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.
voz_ 4y ago
> Juice' was our wet little term for constant & bountiful user feedback Eew dude what is going on at your job?
swah 4y ago
Related experiment: https://ash-k.itch.io/textreme-2 https://ash-k.itch.io/textreme-2
pugworthy 4y ago
I have clicked on that heart more times than I want to admit...
uptownfunk 4y ago
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.
smaudet 4y ago
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.
erickhill 4y ago
It has the juice. I can't imagine a more beautiful thing.
- thebigspacefuck 4y ago
  This is so corny
killthebuddha 4y ago
> '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.
thebigspacefuck 4y ago
Be excited! Be Be Excited!
notSupplied 4y ago
Adding hold-delays to anything is the opposite of juicy.

Juice

663 points by ilt 4y ago

popcalc 4y ago

Apple Pay does this very well.

mromanuk 4y ago
I would say, Apple in general does this very well.

doomlaser 4y ago

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

wcarss 4y ago
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.
mananaysiempre 4y ago
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 https://www.andy.works/words/the-most-satisfying-checkbox [2] https://lab.hakim.se/progress-nav/ https://lab.hakim.se/progress-nav/ [3] https://www.youtube.com/watch?v=o0NtjY17v5w https://www.youtube.com/watch?v=o0NtjY17v5w

jannes 4y ago

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

hhh 4y ago

This website crashes in Safari for me every time.

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

mromanuk 4y ago

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.

trentgreene 4y ago

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

jacknews 4y ago

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?

MattRix 4y ago
The name comes from wanting to make things “juicy”.
- jacknews 4y ago
  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.
  - MattRix 4y ago
    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 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.

skavi 4y ago

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.

kevincox 4y ago
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.

Edd314159 4y ago

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

apankrat 4y ago

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

amelius 4y ago

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

PaulHoule 4y ago

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.

Semaphor 4y ago
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.

azhenley 4y ago

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

bentcorner 4y ago
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.

MattRix 4y ago

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 https://youtu.be/sXqXpwyBI1k

tomng 4y ago
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!
- MattRix 4y ago
  Thanks for the comment, I appreciate it!
david422 4y ago
That's really awesome!

bennysonething 4y ago

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!

illegalsmile 4y ago
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.
- bennysonething 4y ago
  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!
- hbn 4y ago
  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.

kevinwang 4y ago

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

crazygringo 4y ago

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.

hbn 4y ago
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"
notduncansmith 4y ago
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.
jkaptur 4y ago
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-got-a-500-million-lesson-in-the-importance-of-ui-design/ https://arstechnica.com/tech-policy/2021/02/citibank-just-go...

jacobyoder 4y ago

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.

albert_e 4y ago

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

thinkingemote 4y ago
Expanse started 4 years after Game of Thrones did
- albert_e 4y ago
  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.

doctorhandshake 4y ago

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

hn_throwaway_99 4y ago

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.

cwillu 4y ago
And the zero-juice still had juice: the button changes on click, which isn't strictly necessary.
- bqmjjx0kac 4y ago
  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.
  - ok_dad 4y ago
    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.

deleted 4y ago

[deleted]

deleted 4y ago

[deleted]

flanbiscuit 4y ago

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 https://syntax.fm/show/430/creator-of-wordle-josh-wardle 1. https://www.youtube.com/watch?v=Fy0aCDmgnxg https://www.youtube.com/watch?v=Fy0aCDmgnxg

pphysch 4y ago

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.

Invictus0 4y ago
The page is clearly oriented towards building games, not web products.
- pphysch 4y ago
  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).
  - hbn 4y ago
    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.
  - Invictus0 4y ago
    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?
    - pphysch 4y ago
      You omitted the key sentence in that introductory section: > It originated in games but can be used in other types of software.
      - 4y ago

mark242 4y ago

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.

mdcrowcroft 4y ago

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.

kridsdale1 4y ago
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.

truculent 4y ago

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.

notShabu 4y ago

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.

voz_ 4y ago

> Juice' was our wet little term for constant & bountiful user feedback Eew dude what is going on at your job?

swah 4y ago

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

pugworthy 4y ago

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

uptownfunk 4y ago

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.

smaudet 4y ago

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.

erickhill 4y ago

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

thebigspacefuck 4y ago
This is so corny

killthebuddha 4y ago

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

thebigspacefuck 4y ago

Be excited! Be Be Excited!

notSupplied 4y ago

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