Topic: Opinions on the new UI buttons? (v. 25.08.13 - v. 25.08.27 Discussion)

assasswoahlolnice said:
That's a shame. I use hotkeys to favorite posts, and it gave me some feedback. Now on large images I need to scroll down to be absolutely sure the favorite went through.
Guess it's not a huge deal. I just need to get used to this new flow.

Same for me, but more precarious is that Shift+F was removed as a hotkey for favoriting, and F now toggles between Favorited and Unfavorited, so you could now accidentally remove images from your Favorites and not realize.

dont like it

i like the buttons idea. But yellow and red for faving seems odd. I associate these actions more with green and the color of the site.

newlifed said:
I'm really glad that catering to mobile users continues to cause the internet as a whole to be worse, as it has been since catering to mobile users became a thing websites decided to do. Keep up the good work, moving the website forward by making everything just that much worse on desktop because mobile users, or something. Also, never ever announce these things anywhere that the average user could see them (like the announcements banner at the top), and just drop them like this, especially with bugs (that will get fixed, of course, but it's just such an odd choice to do it like this.)

God e6 users are a miserable sort. Present company excluded of course

And here i was thinking i messed up my Browser with a DnD extension,

yeah i don't like the 3d effect, but whatever, the true crime is the colour change, red for a favorite? its a strange choice, turn that to green and make the button colours neutral again unless in accessibility mode and we have cash money, i get you wanna help vision impaired people but that should be something to opt in or at least out.

my 2 cent :) have a nice day

It's alright. Though I think yellow doesn't match the site.

And 'Fullscreen' isn't the correct name. Especially for type:swf

aacafah said:
We've been making the site more accessible to mobile users.

I understand y'all want the site to be accessible to mobile users but why do y'all make them so prominent on the desktop site... or why don't y'all add a legacy UI setting?

Also an odd thing I noticed is most of these updates brake up the design theme, like the 3d fave and fullscreen buttons while every other button on this site is flat? And the odd color scheme (for the buttons) that doesn't adhere to any other part of the site and takes focus away from the art.

Although I do enjoy that it's now full screen instead of download

Also also, it would cool if y'all had a poll on the news banner just so see what people think of the decisions so far.

Also also also, it would be really cool if y'all added the fav banner back bec8rhis site can be slow at time and it's nice to know a fav went through, or if you accidentally un faced.

aacafah said:
We've been making the site more accessible to mobile users.

Why don't you leave these changes in a mobile version of the site and not the default then?

Yet another dev team trying to fix things that aren't broken and reinvent the wheel resulting in strictly worse changes.

As an exclusively mobile user, I'll chime in that I prefer how it was before. I don't see how this improves accessibility for mobile, it just looks worse honestly.

The yellow button feels too in my face. Draws my attention a little too much. The green felt way more softer on my eyes.

aacafah said:
We've been making the site more accessible to mobile users.

So make those changes for the mobile site and not the desktop one.

before anyone says "oh but it's more to maintain" It's two buttons that worked fine for 15 years before this.

mindsofthelaw said:
I don't like the new favorite and unfavorite colors. Green and red seem like natural choices with generally "yea or nay" connotations that made sense, like how they're used with the upvotes and downvotes right now. The yellow looks too dark, almost like mustard, and the not-quite-red also looks worse.
Relatedly, thanks for the custom CSS code posted earlier that allows me to change it back! I appreciate the customization!

Changing the "Download" to "Fullscreen" is a change I like, since it didn't actually download anything before. Now it's clear that you need to do something yourself to download it. Good change!

This is exactly how I feel

nacre said:
So make those changes for the mobile site and not the desktop one.

before anyone says "oh but it's more to maintain" It's two buttons that worked fine for 15 years before this.

You're applying that logic to just this change when it really applies to the entire site, consider that mobile first changes are made in various places of the site, each may be just a few things on their own but combined it's a lot of things

donovan_dmc said:
Not saying that it's right (I'm not a fan of change because change, which a lot of ui changes feel to be), but mobile makes up the majority of users

I'd kinda prefer if the changes that were aimed at mobile users were actually some of the changes that mobile actually needs, though.

there are a lot of annoying things on the site on mobile that just don't exist on desktop; like how terrible page nav is on long pages since mobile dosn't have the Home or End keys, or how actual useful information like the current page of a pool or actual timestamps are title attributes, making them completely inaccessible on mobile, or how the several of the DText formatting buttons go past the end of their bar and don't show up. but making a couple UI buttons very slightly taller and making them pseudo-3D seems very unnecessary to me, it's solving a provlem that didn't really exist.

dba_afish said:
I'd kinda prefer if the changes that were aimed at mobile users were actually some of the changes that mobile actually needs, though.

there are a lot of annoying things on the site on mobile that just don't exist on desktop; like how terrible page nav is on long pages since mobile dosn't have the Home or End keys or how actual useful information like the current page of a pool or timestamps are title attributes, making them completely inaccessible on mobile, or how the several of the DText formatting buttons go past the end of their bar and don't show up. but making a couple UI buttons very slightly taller and making them pseudo-3D seems very unnecessary to me, it's solving a provlem that didn't really exist.

For what it's worth I am also not a fan of this change, it looks out of place and really doesnt help anything
I'd rather if cosmetics were worked on actual issues in styling be fixed, like the strike through on banned usernames or in dtext just not showing up at some zoom levels

It'd be better if it was a visibility mode that could be toggled off.

feels really out of place and inconsistent with the design of the rest of the site, especially feels weird that the size change isnt mobile exclusive as well when thats the only platform it would benefit from

also yeah they dont work very well in my experience either, cant tell if its the "adding favorite" popup being hidden or something else

I don't like the new look of the buttons, specifically the color, but that's already been fixed with some custom CSS.

My actual problem is the removal of the "post Favorited" message, and I think a change to the hotkeys? The hotkeys for Favoriting and Unfavoriting used to be different, but now "F" just toggles them. The "You already favorited this" message was very helpful for large images where you couldn't immediately see the favorite status, and I can see a lot of people going to favorite something they already did, and unfavoriting it unintentionally instead.

As for the mobile thing that's apparently the crux of this, the favorite messages worked perfectly fine there before too.

Not a fan of the new buttons either. The old ones worked perfectly fine (for me) and the new ones don't fit into the websites aesthetic very well.

Will I get used to them? Eh, at some point, probably. Humans are creatures of habit, after all.

But I don't really see what this change as achieved, other than annoying part of your user base.

I think they are good enough, I kinda dig the pseudo 3D look (rest in piss flat design).
The orange is fine? It does look kinda weird but faving the post makes it red, so it's still visual feedback that your action worked.

Since I saw people complaining about the size, I think it works on both my phone and desktop nicely, and it's a drastic improvement on my phone where it was a 50/50 if me hitting the star button would work, or count as a dislike.
As usual, I wish desktop only users a very "realize 70% of people only use smartphones to go online" moment, I think Cinder stated that 75% of total users here use phones, and so do 48% of uploaders (since hardcore desktop users trying to get changes reverted wanted to know about uploaders to validate that no one would ever do it on phones, so Cinder had the stats for it too)

I've warmed up to the new buttons, and I will say I thought the 3d element to them was weird at first and out of place, as others said, but the little animation when they are toggled is something I appreciate, just some visual feedback since I use a hotkey to fav rather than clicking the button. Also a fan of the new font on the votes counter, it looks nice.

Not sure if this is the result of my custom styling or something but for me the vote counter, favourite, and fullscreen buttons are using a different font than the rest of the site (looks like Roboto?) and it looks awful. Don't like the psuedo-3D effect either, gives the buttons too much visual emphasis and doesn't fit the rest of the site's style. If you want visual feedback for clicking them you could give them an "active" colour like links have. Other than those two things I think I'll live.

I've taken a crack at it, with Aacafah's CSS blurb as a base. It's not 100% right, but it does stop my lizard-brain from screaming that something looks wrong. A few disclaimers, though.

First, I don't really know what I'm doing. This could be handled more elegantly and correctly. I don't use mobile, and it looks right on my computer, but YMMV.
Second, I didn't have a tab before the change open to reference, so the colors might not be right. I did, however, have e6AI tabs open and borrowed heavily from there. The changes have been propagated over there as well now, so hopefully this is close enough.
Third, I don't make use of the favorites feature. This is glued together from vague memories of the few occasions I accidentally favorited and then unfavorited something. I would have no idea how to restore that popup people are talking about. Instead, it changes the button to "darker green/unfaved" & "lighter green/faved". Think of it as being a green LED that's off or on. Changing the unfav button to red is simple enough; Instead of "rgb(47, 157, 47)" use "rgb(128, 0, 0)"

As for what this all does: Changes the button colors/font/width to try to match the e6AI old UI tab I still had open, makes fav/unfav dark green/light green, removes the lighter background color from the favorites counter, removes all the drop shadows, and changes the "fullscreen" button text back to "download".

Edit: I'll leave this here for the sake of example, but others have redone it much better now. Also, there's been another wave of UI changes that this doesn't address at all.

/* Attempt to revert under-image button changes */
.st-button.kinetic {
  box-shadow: 0 0rem var(--color-section);
}

#ptbr-wrapper .ptbr-vote .ptbr-score {
  box-shadow: 0 0rem var(--color-section);
  background-color: inherit;
  font-family: Verdana,Geneva,sans-serif;
  font-size: inherit;
}

#ptbr-wrapper .ptbr-favorite-button[favorited="false"] {
  background-color: rgb(0, 100, 0);
  box-shadow: 0 0rem rgb(0, 100, 0);
  color: white;
  width: auto;
  border-radius: 6px;
  font-family: Verdana,Geneva,sans-serif;
}

#ptbr-wrapper .ptbr-favorite-button[favorited="true"] {
 /* use (128, 0, 0) for red unfav */
  background-color: rgb(47, 157, 47);
  box-shadow: 0 0rem rgb(47, 157, 47);
  color: white;
  width: auto;
  border-radius: 6px;
  font-family: Verdana,Geneva,sans-serif;
}

#ptbr-wrapper .ptbr-fullscreen-button::after {
  content: "Download";
  color: white;
  font-family: Verdana,Geneva,sans-serif;
}

#ptbr-wrapper .ptbr-fullscreen-button {
  background-color: rgb(160, 82, 45);
  width: auto;
  border-radius: 6px;
}

#ptbr-wrapper .ptbr-resize select {
  box-shadow: 0 0rem rgb(0, 0, 0);
  border-radius: 6px;
  width: auto;
  font-family: Verdana,Geneva,sans-serif;
}

Setting aside my discomforting surprise at opening up e6 and finding it changed, I think that the new buttons are worse than the originals, both on mobile and on a real computer. Ordinary users shouldn't have to muck about in CSS to get colors that don't strain the eye; the 3-D effect and the different font, though not bad on their own, clashes with the site design we know and love; and seeing a button that says "fullscreen" usually means "stay on this page but change the layout so the image is as big as it can get", not "open the original file in its own page, however big it is". I think that "download" was a more accurate label for the button than "fullscreen". Perhaps "original" or "original file" or "source" would be better than either -- maybe. This new button style feels to me like change for change's sake, and I much prefer the maxim "if it ain't broke, don't fix it".

I would also like to echo some of what dba afish said here a few posts above mine: how timestamps, page numbers in a pool, and voting ratios are title attributes that can't be seen on mobile. I personally have had little trouble with long scrolling or DText formatting on my device, however.

EDIT: opaquetopus just posted some CSS code that mostly brings things back to normal. Thank you, opaquetopus.

dynamitegrizzly said:
"mobile friendly mobile friendly mobile friendly" you know people still use computers

awful, change it back

Maybe the prevalence of extreme hyper endowments is because people are looking at the pictures on tiny phone screens and need to be able to actually see stuff ...

Not sure if I like the buttons being centered. Though them being 3D is not really fitting the site IMHO as the rest (e.g. tags) are still flat 2D (not saying these should be changed too).

cinder said:
I straight up forgot to color in the star. Will fix in the next patch.

That would have been my only big complaint so far, as the yellow is kinda wired. But good to know that it is getting fixed.

turns out that on my phone the "scale" button ends up on a different row because my phone screen is small and the buttons are big!! I couldn't figure out a way to scale them down so I removed the flex:wrap over the whole ptbr-wrapper to force it to stay on one row, but now the scale button goes a bit off screen...

edit: my screen resolution is 720x1600

my two cents being - it's distracting. orange for the download button looks off, especially when it doesn't correlate to the site's blue and yellow color palette. the rest of the site's text is light/white, and the buttons have black text comes off really ugly
green already blends well with the background without being overtly distracting, and is more familiar. also it synchronizes with upvote's green

aacafah said:
That was an intentional change; I liked it, but it was kinda redundant, and it's removal helped simplify an optimization.

How am I supposed to know if the favourite actually went through or not then? Nobody's internet is equally smooth and I want reassurance that my internet didn't trick me into THINKING it went through but it didn't.

Also, the orange favourite button is so tacky. Why not use a colour that compliments the site's blue colour palette?

opaquetopus said:
I've taken a crack at it, with Aacafah's CSS blurb as a base. It's not 100% right, but it does stop my lizard-brain from screaming that something looks wrong. A few disclaimers, though.

First, I don't really know what I'm doing. This could be handled more elegantly and correctly. I don't use mobile, and it looks right on my computer, but YMMV.
Second, I didn't have a tab before the change open to reference, so the colors might not be right. I did, however, have e6AI tabs open and borrowed heavily from there. The changes have been propagated over there as well now, so hopefully this is close enough.
Third, I don't make use of the favorites feature. This is glued together from vague memories of the few occasions I accidentally favorited and then unfavorited something. I would have no idea how to restore that popup people are talking about. Instead, it changes the button to "darker green/unfaved" & "lighter green/faved". Think of it as being a green LED that's off or on. Changing the unfav button to red is simple enough; Instead of "rgb(47, 157, 47)" use "rgb(128, 0, 0)"

As for what this all does: Changes the button colors/font/width to try to match the e6AI old UI tab I still had open, makes fav/unfav dark green/light green, removes the lighter background color from the favorites counter, removes all the drop shadows, and changes the "fullscreen" button text back to "download".

/* Attempt to revert under-image button changes */
[code cut for length..]

This makes it bearable but 100% hate the change.
Unlike the last UI change that just broke my installed user script,
this change just looks ugly and also doesn't give a good indicator of if it's working or not.

It's bad enough I came to the forums to see if it was intentional or if something broke and it reverted to some awful defaults.

Here's my 2 cents.

On mobile, the bigger fav button is a quality of life upgrade (faving while holding the phone one-handed can be a challenge '^w^).
Little bug: On desktop the scale buton is 3D while on mobile it's flat (on both FF & Safari).

I like the little 3D button animations but I get why some may find it distracting... especially if it's sandwitched between a flat bottom Navbar and a flat description.
(Maybe give those buttons the same style as the tags on mobiles instead of 3D ? I dig the rounded boxes with the little color streak on the left side :3)
But I have doubts on the 3D score number, it's not an interactive element and thus shouldn't be given the same highlight (also, on hover, there is a weird little "?" next to the cursor)

On board with 0f8c4c9d05154171ae8's idea to replace the "Fullscreen" text with "Open Raw" or "View Source File" (and maybe about the color too, but ¯\_(ツ)_/¯). The yellow fav gives me a nice coherent experience as I have re621 which puts yellow stars on my faved posts' thumbnail.

Overall +1 for this update :)

Edit: I also liked the banner notification, it was very useful.

opaquetopus said:
I've taken a crack at it

Praise be, CSS Wizard!
Looks good, the red still seems washed out or darker than it used to be though (before this update not the css), couldn't figure out how to make it look brighter either
EDIT: I f'ed up pasting the red code in so it was just using the new default red, woopsies. I think 100,0,0 looks a little better than 128 though

Alright, let's address this new feedback.
Just as a preface, in case it comes off that way, my goal here isn't to argue; I just wanna make it clear your disagreements aren't falling on deaf ears & aren't being discarded out of hand.

I hope this helped explain the thought process behind this, or at the very least helped quell the idea we're both asleep at the wheel & unwilling to engage w/ community feedback. We see you, & we hear you. We don't always respond because this took over 4 hours of time that could've been spent working on new features & fixing bugs.

I probably won't be responding after this; please do me a favor & redirect people who raise points adequately covered here (& my prior responses) back to them, thanks.

They look awful, why is every site update the past year or two just making e621 worse and worse???

aacafah said:
Let me just put this out here so I can link it the next time.

I am a huge proponent of user choice & freedom. I'd love to allow users (myself included) to customize changes to their heart's content; I think that's an ideal worthy of striving towards...

I'd say I'm not really a fan of the new icons, but I think that's already been reiterated enough. What I do want to say is this is probably the best explanation of this I've heard before. Most of the time when I've seen people try to explain this it comes off as dismissive to the people annoyed, but this sounds more human if that makes sense. Anyways, thanks 👍

I think this is a negative change, as well as a pointless change into something that didn't need to be messed with.
The drop shadow and overly saturated colors look very corporate and sanitized, in quite a bad way.
as for the green color:

It's for consistent UI behavior; it makes no sense why 2 buttons with the almost the exact same color to behave entirely differently.

I feel this is a very weak argument. labeled buttons being the same color is not an issue. If it were, then would it also not be an issue that unfavoriting and downvoting are the same color? Would this issue have not come up in any complaints in the YEARS it has been the case on the site? Wouldn't this issue also be resolved if the confirmation banner returned?
All seems like a solution to an issue that only arose from making changes to what was already in place, and assuming users would be confused about already established systems.

rekterthealebrije said:
Personally, i don't like them. they look good but i'm so used to the old buttons that seeing this update made me gasp in real life.

What do you people think of the new buttons? I liked it when the favorite button was green rather than yellow. it looked nice with the background in my opinion.

The actual shape and layout of them? I think they fit well, and they now look consistent shape-wise with the rest of the buttons. But the colors aren't appropriate for what they do IMO, the Favorite button could probably be green and the download button could be... not orange. I also feel like they could use some icons before the text.

I don't mind the button update for the most part, but the 3D effect is off-putting and my senses can't handle it

Little bit of CSS I wrote to make it a little nicer IMO (only tested on Firefox so far):

/* Make the favorites button green when a post isn't favorited. */
.ptbr-favorite-button[favorited="false"] {
    background-color: var(--palette-background-green);
    box-shadow: 0 .25rem var(--palette-background-green-d10);
    color: white;
}

/* Add hover color to the favorite button. */
.ptbr-favorite-button[favorited="false"]:hover {
    background-color: var(--palette-background-green-d5);
}

/* Make the favorites button a little wider for favorited posts.
   Fixes display of the star icon (at least in Firefox). */
@media (min-width: 800px) {
    .ptbr-favorite-button[favorited="true"] {
        width: 7rem;
    }
}

/* Displays the star icon like in mobile mode next to the
   favorite button text. */
.ptbr-favorite-button > svg {
    display: inline;
}

/* Makes the Download button blue like the vote UI and view mode
   selector. */
.ptbr-fullscreen-button {
    background-color: var(--color-section-lighten-5);
    box-shadow: 0 .25rem var(--color-section);
    color: white;
}

/* Makes the download button say "Download" and not "Fullscreen." */
.ptbr-fullscreen-button::after {
    content: "Download";
}

/* Add hover color to the download button. */
.ptbr-fullscreen-button:hover {
    background-color: var(--color-section-lighten-10);
}

/* Displays the download icon like in mobile mode next to the
   download button text. */
.ptbr-fullscreen-button > svg {
    display: inline;
}

/* This disables the 3D-nes of the buttons. Use this style if you
   don't like the 3D-nes. */
.st-button.kinetic, .ptbr-score, #ptbr-wrapper .ptbr-resize select {
    box-shadow: none;
}

/* Makes the margin on the score buttons a whole 2 pixels. */
.ptbr-score {
    margin: 0 2px;
}

The nice thing about my implementation is that it uses colors from the site palette instead of manually chosen hex codes in most cases so if you change your theme it doesn't look weird. If you don't like the mobile icons then remove those blocks of styles.

EDIT: Updated to remove the 3D-nes of the buttons for people who don't like that.
UPDATE 2: Fixed the vote UI spacing (from vanilla 1.5px to 2px), made the favorite button highlight color consistent with the upvoted-state upvote button's.

opaquetopus said:
I've taken a crack at it, with Aacafah's CSS blurb as a base. It's not 100% right, but it does stop my lizard-brain from screaming that something looks wrong. A few disclaimers, though.

First, I don't really know what I'm doing. This could be handled more elegantly and correctly. I don't use mobile, and it looks right on my computer, but YMMV.
Second, I didn't have a tab before the change open to reference, so the colors might not be right. I did, however, have e6AI tabs open and borrowed heavily from there. The changes have been propagated over there as well now, so hopefully this is close enough.
Third, I don't make use of the favorites feature. This is glued together from vague memories of the few occasions I accidentally favorited and then unfavorited something. I would have no idea how to restore that popup people are talking about. Instead, it changes the button to "darker green/unfaved" & "lighter green/faved". Think of it as being a green LED that's off or on. Changing the unfav button to red is simple enough; Instead of "rgb(47, 157, 47)" use "rgb(128, 0, 0)"

As for what this all does: Changes the button colors/font/width to try to match the e6AI old UI tab I still had open, makes fav/unfav dark green/light green, removes the lighter background color from the favorites counter, removes all the drop shadows, and changes the "fullscreen" button text back to "download".

/* Attempt to revert under-image button changes */
.st-button.kinetic {
  box-shadow: 0 0rem var(--color-section);
}

#ptbr-wrapper .ptbr-vote .ptbr-score {
  box-shadow: 0 0rem var(--color-section);
  background-color: inherit;
  font-family: Verdana,Geneva,sans-serif;
  font-size: inherit;
}

#ptbr-wrapper .ptbr-favorite-button[favorited="false"] {
  background-color: rgb(0, 100, 0);
  box-shadow: 0 0rem rgb(0, 100, 0);
  color: white;
  width: auto;
  border-radius: 6px;
  font-family: Verdana,Geneva,sans-serif;
}

#ptbr-wrapper .ptbr-favorite-button[favorited="true"] {
 /* use (128, 0, 0) for red unfav */
  background-color: rgb(47, 157, 47);
  box-shadow: 0 0rem rgb(47, 157, 47);
  color: white;
  width: auto;
  border-radius: 6px;
  font-family: Verdana,Geneva,sans-serif;
}

#ptbr-wrapper .ptbr-fullscreen-button::after {
  content: "Download";
  color: white;
  font-family: Verdana,Geneva,sans-serif;
}

#ptbr-wrapper .ptbr-fullscreen-button {
  background-color: rgb(160, 82, 45);
  width: auto;
  border-radius: 6px;
}

#ptbr-wrapper .ptbr-resize select {
  box-shadow: 0 0rem rgb(0, 0, 0);
  border-radius: 6px;
  width: auto;
  font-family: Verdana,Geneva,sans-serif;
}

Awesome, thanks!

Don't see why they had to be changed, never had a problem with these buttons on mobile. Now they look completely different from any other e621 UI.

Also weird decision to set margin on score counter ("ptbr-score") to 1.5px, because that makes it jump randomly between 1 and 2 pixels.

thine-dude said:
as for the green color:

It's for consistent UI behavior; it makes no sense why 2 buttons with the almost the exact same color to behave entirely differently.

I feel this is a very weak argument. labeled buttons being the same color is not an issue.

Perhaps I didn't make this clear enough originally; they are labelled... on desktop/a wide enough screen. On mobile, it's just icons. Hence:

aacafah said:
...it's a bit ambiguous for mobile users who just see an empty/filled star (i.e. "Is this post currently favorited, or does this button change the state to favorited?"); it's ambiguous if you don't have the text telling you it's describing the action & not the state (use this button to Favorite/Unfavorite vs this post is currently Favorited/Unfavorited).

Again, not to say it's objectively right, but it's worth highlighting that the labels aren't always there.

acebass said:
I'd say I'm not really a fan of the new icons, but I think that's already been reiterated enough. What I do want to say is this is probably the best explanation of this I've heard before. Most of the time when I've seen people try to explain this it comes off as dismissive to the people annoyed, but this sounds more human if that makes sense. Anyways, thanks 👍

I'm really glad I was able to get that across, thanks for easing my mind.

And finally, I forgot to properly thank the other users who've been creating, customizing, tweaking, & sharing their custom CSS, specifically opaquetopus & MkLXIV. We provide that field because we care about enabling users to customize their experience (again, as much as practically feasible), and this work enables our less technically-inclined users to do so as well; regardless of whether it's in response to contentious UI changes or not, this is great work that's worthy of being celebrated. If you want more custom CSS, dba afish has some on their profile & frequently posts some on the forums, so take a look at their stuff if you want more. If you want to learn how to make your own (or tweak theirs), the Mozilla Developer Network is a great resource for all things web development, including CSS.

aacafah said:
Perhaps I didn't make this clear enough originally; they are labelled... on desktop/a wide enough screen. On mobile, it's just icons.

you could also use some slightly improved shape language to seperate the favorite button from the rest rather than change its colour. we are using just straight SVG now rather than FontAwesome, so we can do whatever we want with icons.

maybe rather than just a "★" on its own, something like "★⁺" make it clear that the user's adding the post to something. _{also maybe "✶⁺", use a hexagonal star to keep with site theming.}

dba_afish said:
you could also use some slightly improved shape language to seperate the favorite button from the rest rather than change its colour. we are using just straight SVG now rather than FontAwesome, so we can do whatever we want with icons.

maybe rather than just a "★" on its own, something like "★⁺" make it clear that the user's adding the post to something. _{also maybe "✶⁺", use a hexagonal star to keep with site theming.}

We are (or at least are supposed to) be doing something like this; the star is empty/filled in depending on if it's being favorited/unfavorited. Still, I'd argue this doesn't do enough to eliminate the ambiguity; as said, the problem is discerning whether the visual information of the button is conveying the current state or the resultant state. Adding a +/- or emptying/filling the star doesn't resolve this. The labels being... I think imperfect future (???) tense instead of past tense does, & I'd argue contrasting any color but green w/ red would likely achieve the same effect (though it's still not as clear as I'd personally like it). If we were dead set on keeping the "3D" effect, I'd actually say leaving it "depressed" with non-changing colors would work (just like a locking push button or a pen that stays depressed when "active" & you push again to raise it to full height to "deactivate" it). Though that's just spitballing, & I'd rather not tie us down to the 3D style any more for now.

rekterthealebrije said:
Personally, i don't like them. they look good but i'm so used to the old buttons that seeing this update made me gasp in real life.

What do you people think of the new buttons? I liked it when the favorite button was green rather than yellow. it looked nice with the background in my opinion.

its clunky and makes it harder to use the site on mobile

embolgnan said:
its clunky and makes it harder to use the site on mobile

I’m sorry HUH?!?!?
Are seeing the same mobile layout? The layout is almost the exact same except the buttons are bigger.

aacafah said:
We are (or at least are supposed to) be doing something like this; the star is empty/filled in depending on if it's being favorited/unfavorited. Still, I'd argue this doesn't do enough to eliminate the ambiguity; as said, the problem is discerning whether the visual information of the button is conveying the current state or the resultant state. Adding a +/- or emptying/filling the star doesn't resolve this. The labels being... I think imperfect future (???) tense instead of past tense does, & I'd argue contrasting any color but green w/ red would likely achieve the same effect (though it's still not as clear as I'd personally like it). If we were dead set on keeping the "3D" effect, I'd actually say leaving it "depressed" with non-changing colors would work (just like a locking push button or a pen that stays depressed when "active" & you push again to raise it to full height to "deactivate" it). Though that's just spitballing, & I'd rather not tie us down to the 3D style any more for now.

I mean, having the skeuomorphic toggle buttons actually kinda function like actual toggle buttons would give them an actual reason to be skeuomorphic toggle buttons...

aacafah said:
If we were dead set on keeping the "3D" effect, I'd actually say leaving it "depressed" with non-changing colors would work (just like a locking push button or a pen that stays depressed when "active" & you push again to raise it to full height to "deactivate" it). Though that's just spitballing, & I'd rather not tie us down to the 3D style any more for now.

I really hope they stay, actually leaving them depressed (I think the color change can also stay as a more redundant "the thing you did happened" signaller) would definitely provide more feedback.
I just think 3D buttons are a great way to provide feedback compared to some text appearing/changing

I don't like them. At least we should get an option to switch back to the old UI like in Wikipedia.

0f8c4c9d05154171ae8 said:
May I suggest "Open Raw" or "View Source File" or something along those lines? Fullscreen implies some sort of fullscreen preview, not opening the image source.

I'd also recommend making that button non-chromatic, i.e. make it simply a ligher shade of the existing background, maybe a little brighter than the up/downvote buttons. This way the favourite button doesn't visually contend with the image source button for attention, but still highlights it as a major function.

Exactly my thoughts as well; I'm not 100% sure what I expected "Fullscreen" to do ("like a vignette preview but on the whole window? screen? what? why would I want that?") and only understood after clicking on it that it replaced the Download button. Not dramatic but still was weird, I think. "View source image/video" would feel much more intuitive, I think.

And I like how 3D the buttons look, I love that kind of quirky design, but I'm not too sure about the colors. Yellow is thematic but not really what I would associate with favouriting. Might work better if it didn't compete with "Fullscreen" at grabbing my attention.

weh.

[class*=ptbr],
[id*=ptbr],
.st-button,
.kinetic {
  border-radius: 0.35rem !important;
  box-shadow: none !important;
  font-family: Verdana, system-ui !important;
  translate: none !important;
}
#ptbr-wrapper .ptbr-fullscreen-button,
#ptbr-wrapper .ptbr-favorite-button {
  padding: 0 0.6rem !important;
  width: unset;
}
#ptbr-wrapper .ptbr-fullscreen-button:hover {
  background-color: var(--palette-background-orange-d5);
}
#ptbr-wrapper .ptbr-favorite-button[favorited=false] {
  background-color: var(--palette-background-green-d5);
  color: var(--palette-text-white);
}
#ptbr-wrapper .ptbr-favorite-button[favorited=false]:hover {
  background-color: var(--palette-background-green-d10);
}
#ptbr-wrapper .ptbr-favorite-button[favorited=true] {
  background-color: var(--palette-background-red-d5);
}
#ptbr-wrapper .ptbr-favorite-button[favorited=true] svg {
  stroke: var(--palette-text-white);
}
#ptbr-wrapper .ptbr-favorite-button[favorited=true]:hover {
  background-color: var(--palette-background-red-d10);
}
#ptbr-wrapper .ptbr-score {
  background-color: unset !important;
  font-size: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  height: unset !important;
}
#ptbr-wrapper .st-button,
#ptbr-wrapper .ptbr-resize-select {
  align-items: center;
}
@media (min-width: 700px) {
  #ptbr-wrapper .st-button,
  #ptbr-wrapper .ptbr-resize-select {
    height: 1.85rem !important;
  }
}

supina said:
I don't like them. At least we should get an option to switch back to the old UI like in Wikipedia.

See here for my thoughts on user customization.

We already enable users to customize the site's appearance through custom CSS, & there are a multitude of premade snippets that do what you want. If there's a compelling reason you find them insufficient, specify what they are & maybe other users (or myself, if I have the time) can address them.

wife said:
weh....

Thank you for putting your work here; hopefully more users will get a chance to benefit from it.

To users not familiar with CSS, the above snippet should also remove the 3D effect in addition to tweaking the colors.

not even sure where to use that CCS snipit.

windluck said:
not even sure where to use that CCS snipit.

Settings -> Advanced -> Customization -> Custom CSS

I personally miss the header that popped up to confirm that you favourited something. I've been having a lot of confusion about whether the red or the yellow button means "favourite" vs "unfavourite", and keep having to open new tabs and go and double check in my actual favourites. I thought this confusion would be temporary, but it hasn't been so far -- and other people I've spoken to have felt similarly. I think that filling in the star as was intended will help, but would still like to have the confirmation header make a return.

aacafah said:
Ahem.

Can we have anything that reverts the buttons shape and size to their previous form too, please? When will web developers learn to stop changing things for the sake of it, that change is bad by default?

azreal said:
Can we have anything that reverts the buttons shape and size to their previous form too, please? When will web developers learn to stop changing things for the sake of it, that change is bad by default?

"Change is bad by default"?
Teachers complained when pencils and paper started being introduced to the class.
A lot of horse breeders complained when automobiles were first being introduced.
Now, papers and pencils are an absolute necessity - sometimes a requirement - in classrooms. Automobiles are excellent at transporting things - especially horse trailers.

Change is not inherently bad - the reasoning behind them is what can be good or bad.

bird-tm said:
"Change is bad by default"?
Teachers complained when pencils and paper started being introduced to the class.
A lot of horse breeders complained when automobiles were first being introduced.
Now, papers and pencils are an absolute necessity - sometimes a requirement - in classrooms. Automobiles are excellent at transporting things - especially horse trailers.

Change is not inherently bad - the reasoning behind them is what can be good or bad.

There's a difference between "change is bad by default" and "change is inherently bad". Saying "change is bad by default" means, the default stance of changing something is it will create friction with users. At a bare minimum, with nothing extra, it will cause a negative result. This doesn't mean things shouldn't be changed, or that change can't be good, just that it should have a clear benefit to overcome that initial negative. Changing things for the sake of changing them, or because it's a change you prefer irrespective of others' preference, is generally bad. Again, this doesn't mean change can't be good or shouldn't be done, just that there should be an overall benefit to it. Of course, whether or not users can see or appreciate the intended benefit will always be an open question, and some friction is unavoidable, but it shouldn't be done for the sake of doing it.

FWIW, I'm not commenting on these most recent changes specifically; I can see the thought behind them and can understand what they were going for, and it's not something that I really interact with. Though I do have a bit of a tick in the "Fullscreen" link being changed to look like a button. The reason for the Favorite option being turned into a button was because it's considered good practice to avoid things that look like links which only create a change in the existing page, which is reasonable as you want to have a more consistent visual language to the page elements, but the Download/Fullscreen link is a normal link which opens a new page, so why does that look the same as the Favorite button? That's just reintroducing the inconsistency the change was trying to avoid. I also find the drop-shadow being completely vertical to be off-putting, causing the elements to look vertically stretched and take more vertical space than needed, and I didn't even register them as "it's a button". For things that can be pressed/depressed, I'm more used to seeing them at an angle, making them a bit more shallow while clearly indicating it's something that can be pressed in.

azreal said:
...When will web developers learn to stop changing things for the sake of it...

We've discussed the reasons behind these changes. You can disagree with them, & we encourage you to tell us why you don't like them, as many people have done here, but let's not say these changes were made for the sake of it because you either don't know or don't agree with the reasons behind them, or even think they don't achieve their goals. That's not productive.

azreal said:
Can we have anything that reverts the buttons shape and size to their previous form too, please?

If the following snippet doesn't look right, you're gonna have to play with it yourself (or hope someone else does & shares it) to get your desired results. I've already discussed resources to learn how to change these yourselves (I promise, it's not hard for changes like these), & I don't have the time to customize it for everyone, nor the time to find the exact way the old UI was laid out & translate that for the new HTML. I'll save you some time & tell you you're gonna wanna tweak the width, height, padding, margin, & box-shadow properties; what values to use are up to your tastes.
After review, I'm not sure the buttons themselves are actually bigger; I think the box shadow just makes them seem appear bigger. This snippet removes both the shadow & the animation of the button "sinking in" when pressed. You can keep one or the other or both; just remove the appropriate labelled region (denoted by #region & #endregion).

/* #region Remove box-shadow */
#ptbr-wrapper *,
#ptbr-wrapper .ptbr-vote * {
  box-shadow: unset !important;
}
#ptbr-wrapper *:active,
#ptbr-wrapper *[processing="true"] {
  box-shadow: unset !important;
}
/* #endregion Remove box-shadow */
/* #region Remove animation */
#ptbr-wrapper *:active,
#ptbr-wrapper *[processing="true"] {
  translate: unset !important;
}
/* #endregion Remove animation */

Someone asked earlier about changing the center alignment on narrow screens (although, upon further inspection, it appears it also used to do that before the update), so here's that.

/* Force left alignment */ #ptbr-wrapper {  justify-content: flex-start !important; }

Alternatively, if you've got the know-how & drive, you can download the prior version from the open-source repo (see my prior answers for links), compile the Sass styling yourself (or run the Docker container & analyze it live), & copy that into the custom CSS; it will require tweaking based on the new HTML layout, classes, & ids, but you can discern the intended resultant layout far better that way.

aacafah said:

#ptbr-wrapper *,
#ptbr-wrapper .ptbr-vote * {
  box-shadow: unset !important;
}
#ptbr-wrapper *:active,
#ptbr-wrapper *[processing="true"] {
  box-shadow: unset !important;
}

I don't think you need all that. just using

#ptbr-wrapper * { box-shadow: unset; }

should be enough.

simply putting a space between element selectors means that all descendants of the antecedent selector are included, not just direct children (which need a > to be selected for specifically). also, the user CSS has all of its stuff set to !important automatically.

I like the way it looks. I think it look clean and I'm glad the "Favourite" button is bigger, because I would always miss it on mobile. I don't mind the yellow as it fits with the site's theme.
I don't think "Fullscreen" is the right word for what used to be the "Download" button, because that's not what it does. I agree that "Download" also wasn't right, but I would say something like "View Raw".
I'm unhappy about the removal of the favorited alert banner because I utilise it all the time.
I also dislike that F changed to toggle favourite/unfavourite rather than just favourite, especially because It's harder to check without the banner.

Overall I'll be fine, but I have a few changes I'd like to see in the future.
I'd appreciate if users could turn the Favourited/Unfavourited/This Post has Already Been Favourited alert back on in their settings.
I would also like for users to be able to customise their keybinds if possible, but I imagine that's not easy to implement.

Now that I've favorited some stuff on mobile, I really don't get why they were changed at all. Mustard yellow turning deli mustard brown when something is favorited is not visually striking at all. The only thing I can think of why this would be changed would be for red/green colorblind users. But even then, wouldn't the yellow/brown still be just as visually confusing to them as people who aren't colorblind?

Why are there two buttons ("View" and "Download") that basically do the same thing? Why is the favorite button a "star" now that is harder to hit?

The previous layout, with medium-sized buttons, was much more user-friendly. Especially with the old bright, distinctive colors, which we had to bring back using custom CSS.

I think these blue buttons are much better than the colored ones

beepbep said:
The green 'favorited' button was clear as day when something had been favorited. Red is not a color I associate with successful website functions. I could maybe forgive the red one if it still filled in the star when favorited, but changing both is just straight-up bad UI.

newlifed said:
Is there any world in which a change to 'benefit' mobile would only be visible on mobile...? I haven't used mobile in ages but isn't that the point behind there being a desktop button on there to swap between the specifically mobile view and the way it looks on a desktop? You could say parity between the two versions but if that makes the desktop experience worse then having parity for parity's sake is just a bad decision.

I'm here on mobile I have to say, this is a mess. Its been changing every day for the last few days and now it's diffrent on every post! I have to check multiple times to see if I succeeded in favoriting something

beepbep said:
The green 'favorited' button was clear as day

Green is universally associated with 'Save/Confirm'. Red is universally associated with 'Delete/Cancel'. That logic works everywhere. And it just works here too.

Hi, thank you for taking our feedback into consideration, and making the button smaller and even more annoying for everyone, especially mobile users (mobile users being the ones you made this change for of course). Ideally, nothing would have changed at all, but now with the star I'd even prefer just going back to the 3D button.

Please bring back the banner confirming when I favorite something

rekuba said:
Why are there two buttons ("View" and "Download") that basically do the same thing? Why is the favorite button a "star" now that is harder to hit?

The previous layout, with medium-sized buttons, was much more user-friendly. Especially with the old bright, distinctive colors, which we had to bring back using custom CSS.

Not to mention said "Download" button is the only option behind another button with the 3 dots :P
The View/Download thing has been throwing me off- I share images with peeps by right clicking the uh..w/e the hell it's called button now and getting the url- I dunno if it's just my muscle memory being thrown off but the constant change is throwing me off lol

Maybe you could make the button itself be that yellow instead of the star and just keep the star as blue when you favorite something
Making it big like it was before could be a positive change

fuzzballfox said:
Not to mention said "Download" button is the only option behind another button with the 3 dots :P
The View/Download thing has been throwing me off- I share images with peeps by right clicking the uh..w/e the hell it's called button now and getting the url- I dunno if it's just my muscle memory being thrown off but the constant change is throwing me off lol

This is the worst kind of ui design

Why do designers think people want things people use constantly to be nested in a tiny little menu

See also: windows 11 in general

These updates suck!

why do both the "view" and "download" buttons do the same exact thing, and also why is the download one seemingly trapped in the ellipse menu regardless of viewport width?

deltagreen said:
Its been changing every day for the last few days...

Unless you've been using custom CSS, this is objectively untrue. The version number on the bottom of every page corresponds to the year, month, & day they were released; we update on Wednesday most every week. You can tap that link and see the prior updates. Please try to avoid injecting misinformation into this discussion, it's hard enough to manage as is.

deltagreen said:
...now it's diffrent on every post! I have to check multiple times to see if I succeeded in favoriting something

This was the fault of Cloudflare failing to properly update its cached contents with the contents of the update; it should be fixed by now.

rekuba said:
Why are there two buttons ("View" and "Download") that basically do the same thing?

dba_afish said:
why do both the "view" and "download" buttons do the same exact thing...

The Download button is intended to directly open the download prompt/trigger the download; although it worked during development, it's currently not working on site (believed to be due to being a cross-origin request; if it works for anyone else, please let us know). We're working on it.

rekuba said:
Why is the favorite button a "star" now that is harder to hit?

Users found the yellow color distasteful, so we decided to try using just a symbol with no button coloration.

rekuba said:
The previous layout, with medium-sized buttons, was much more user-friendly.

Multiple people complained about the buttons being too big; I'm planning on a proper scaling mode for mobile, but that's gonna take a while.

rekuba said:
Especially with the old bright, distinctive colors, which we had to bring back using custom CSS.

...half the people in this thread were complaining about the colors being eyesores & wanting to replace them with more muted colors. I'm gonna need you to specify what you mean, because the OG red when favorited was the only color that wasn't brighter (although I'll give you that 2 or 3 people did specify preferring the old red).

walkingspaghett said:
I think these blue buttons are much better than the colored ones

Additionally, these respond to your chosen theme; with Bloodlust, mine are dark grey.

rekuba said:
Green is universally associated with 'Save/Confirm'. Red is universally associated with 'Delete/Cancel'. That logic works everywhere. And it just works here too.

To their credit, they did acknowledge this prior.

rainbow_shoebill said:
Please bring back the banner confirming when I favorite something

That's in the works for the next update; adding configurable hotkeys ate up a lot of time for our lead dev, & with the hotkey improvements the banner is even more valuable.

fuzzballfox said:
Not to mention said "Download" button is the only option behind another button with the 3 dots :P

This is to provide separation from View. In the future, we'll likely have other options added to this menu, so now was as good a time as any to add it.

walkingspaghett said:
Maybe you could make the button itself be that yellow instead of the star and just keep the star as blue when you favorite something

Considering the outcry the last time that button was yellow, I doubt we're gonna do that until more people echo that sentiment.

walkingspaghett said:
Making it big like it was before could be a positive change

Again, considering how livid people were when we increased the button's size last week, we'll likely hold off until we hear from more users.

no-one-you-know said:
Why do designers think people want things people use constantly to be nested in a tiny little menu

Visual elements take up space, and space comes at a premium on small displays (plus, as said earlier, separation from View). And before my fellow desktop users jump down my throat, we'll likely add a hotkey for it down the line; you get your fast access, & mobile users get to have less of their screens taken up by buttons.

bolt-carrier said:
These updates suck!

If you've read the thread, you'll see people say the prior buttons were too big, and now they're to small; the colors were too jarring, now they're too muted. What, specifically, do you dislike? Bonus points if you can offer up a reason why. Again, if you've read the thread, you'll see I'm genuinely trying to work with you guys here, but there's only so much I can do with "Is bad, make good".