[HN Gopher] Juice
___________________________________________________________________
Juice
Author : ilt
Score : 547 points
Date : 2023-03-23 11:36 UTC (1 days ago)
(HTM) web link (garden.bradwoods.io)
(TXT) w3m dump (garden.bradwoods.io)
| jacknews wrote:
| 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 wrote:
| The name comes from wanting to make things "juicy".
| jacknews wrote:
| 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.
| skavi wrote:
| 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 wrote:
| 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.
| uptownfunk wrote:
| 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.
| PaulHoule wrote:
| 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 wrote:
| 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.
| albert_e wrote:
| That section about "Game of Thrones" -- surely there was a
| precedent : The Expanse TV series?
| thinkingemote wrote:
| Expanse started 4 years after Game of Thrones did
| mdcrowcroft wrote:
| 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 wrote:
| 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 wrote:
| 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.
| popcalc wrote:
| Apple Pay does this very well.
| mromanuk wrote:
| I would say, Apple in general does this very well.
| azhenley wrote:
| Great great video on juice applied to games:
| https://www.gdcvault.com/play/1016487/Juice-It-or-Lose
| bentcorner wrote:
| 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.
| Edd314159 wrote:
| Seems similar to what the software UX industry calls
| Microinteractions:
| https://www.nngroup.com/articles/microinteractions/
| notShabu wrote:
| 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.
| smaudet wrote:
| 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.
| pugworthy wrote:
| I have clicked on that heart more times than I want to admit...
| voz_ wrote:
| > Juice' was our wet little term for constant & bountiful user
| feedback
|
| Eew dude what is going on at your job?
| killthebuddha wrote:
| > '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.
| mark242 wrote:
| 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.
| erickhill wrote:
| It has the juice. I can't imagine a more beautiful thing.
| jacobyoder wrote:
| 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.
| doomlaser wrote:
| 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.
| mananaysiempre wrote:
| 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
| wcarss wrote:
| 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.
| jannes wrote:
| > 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 wrote:
| This website crashes in Safari for me every time.
| wildrhythms wrote:
| I'm on Mac Safari Version 16.3 (18614.4.6.1.6) and no crashing,
| seems to operate fine.
| MattRix wrote:
| 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
| tomng wrote:
| 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!
| [deleted]
| flanbiscuit wrote:
| 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
| swah wrote:
| Related experiment: https://ash-k.itch.io/textreme-2
| mromanuk wrote:
| 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.
| amelius wrote:
| Hmm, I can't see the button while my finger is on it.
| apankrat wrote:
| 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...
| sergiotapia wrote:
| Really tasteful animations. They allow me to see what changes
| when I do something, infinitely better than just popping things
| in and out of existence. Thanks for sharing examples.
| inatreecrown2 wrote:
| your animations look very smooth!
| Dalewyn wrote:
| >https://bvckup2.com/wip/r82-preferences.gif
|
| >https://bvckup2.com/wip/r82-backup-settings.gif
|
| >https://bvckup2.com/wip/r82-backup-verification-
| dialog-r2.gi...
|
| UI elements jumping and moving around like that are _absolute
| hell_ for usability. It denies muscle memory, demands eye
| tracking (and good eyesight and situational awareness in
| general), and keeps users on edge because things keep changing.
|
| >https://bvckup2.com/wip/r82-rabbit-hole.gif
|
| I'm failing to see the point of that dropdown (well, dropup)
| menu. The space is there from the beginning, but as unused and
| wasted whitespace. Why the unnecessary button and associated UI
| movements?
|
| Also, why is that button called pi?
| apankrat wrote:
| 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.
| jbstack wrote:
| 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.
| mananaysiempre wrote:
| > 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?)
| apankrat wrote:
| > _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.
| Rychard wrote:
| 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.
| apankrat wrote:
| 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.
| Dalewyn wrote:
| >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.
| MrGilbert wrote:
| Tbf, the initial comment already set the direction
| ("absolute hell"?). It provides mere rambling and no real
| benefit to the OP.
|
| Not that I encourage the tone in this thread, but...
| There is another perspective to it.
| Dalewyn wrote:
| I did specify why it's "absolute hell": The UI moves. UI
| elements that move around are bad for usability because
| of factors I already mentioned.
|
| The best UIs are those that keep movements and other
| dynamic facets to the absolute minimum. A boring UI is a
| good UI.
| carlosjobim wrote:
| 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.
| 1-more wrote:
| > 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.
| Dalewyn wrote:
| 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
| [deleted]
| Dalewyn wrote:
| >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.
| martyvis wrote:
| Very frustrating for older people when web sites become
| adventure games with hidden doors and changing maps
| martyvis wrote:
| My 89 year old mother-in-law doesn't have great vision but
| also poor situational awareness around web sites for
| government and financial services. For someone that is used
| to paper forms, it is extremely difficult to navigate your
| way around these places. Not intuitively knowing that a
| "profile" section will be somewhere to adjust account
| information, or when autocomplete and drop down menus make
| things jump around makes many of these experiences exhausting
| and frustrating (and even dangerous)
| nailer wrote:
| > 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
| mromanuk wrote:
| fantastic job! love how the animations, adds a nice touch to
| the UX.
| sdwr wrote:
| That's hot! Well done!
| karlshea wrote:
| I've been using Bvckup2 on my PC forever and it's been amazing,
| thanks for all of your work on it!
| MattRix wrote:
| 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.
| emptysea wrote:
| These are great! how tricky is it to add these effects? I'm
| mostly stuck in the html/css/js world and implementing anything
| like you have here would be a pain
| efields wrote:
| This is pretty standard stuff for your stack. Mostly can be
| done with CSS these days.
| apankrat wrote:
| 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.
| Kwpolska wrote:
| > 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?
| nvrspyx wrote:
| I really like the animations. Well done.
|
| > https://bvckup2.com/wip/r82-rabbit-hole.gif
|
| This one does confuse me though. Why not have the sidebar
| display permanently instead of hiding it within a drop-down?
| There already appears to be white space and a column header
| ("More options...") dedicated to it already. Also, why is the
| button label pi? It's all just really confusing and feels
| unintuitive. I imagine some thought went into it though, so I'm
| curious as to the reasoning behind it.
|
| Other than that one particular case, I like what you've done
| with the rest.
| apankrat wrote:
| 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.
| nvrspyx wrote:
| 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!
| [deleted]
| JusticeJuice wrote:
| Hey! I've been following Bvckup2 for years, not because I need
| it but becuase I've always loved the UI - big fan!
| trentgreene wrote:
| 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!)
| hn_throwaway_99 wrote:
| 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 wrote:
| And the zero-juice still had juice: the button changes on
| click, which isn't strictly necessary.
| bqmjjx0kac wrote:
| 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 wrote:
| 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.
| magic_hamster wrote:
| Absolutely agree with this.
| mhink wrote:
| > 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.
| hiccuphippo wrote:
| 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.
| ok_dad wrote:
| 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.
| ixmerof wrote:
| 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.
| heywhatupboys wrote:
| the delete button example is clearly in jest as a way of
| exemplifying through exaggeration what they author meant
| Lorin wrote:
| It also isn't very mobile friendly. Your finger covers the
| majority of effects and status changes.
| doctorhandshake wrote:
| My term for this is 'squish' and I always try to set aside time
| on any project for a 'squish pass'.
| kevinwang wrote:
| > 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!
| pphysch wrote:
| _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 wrote:
| The page is clearly oriented towards building games, not web
| products.
| pphysch wrote:
| 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).
| Invictus0 wrote:
| 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 wrote:
| You omitted the key sentence in that introductory
| section:
|
| > It originated in games but can be used in other types
| of software.
| hbn wrote:
| 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.
| crazygringo wrote:
| 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.
| jkaptur wrote:
| 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...
| JoeyJoJoJr wrote:
| 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.
| hbn wrote:
| 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 wrote:
| 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.
| bennysonething wrote:
| 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!
| hbn wrote:
| > 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.
| illegalsmile wrote:
| 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.
| hbn wrote:
| 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.
| bennysonething wrote:
| 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!
| kube-system wrote:
| 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.
| Cthulhu_ wrote:
| 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
| [deleted]
___________________________________________________________________
(page generated 2023-03-24 23:00 UTC)