[UX/UI Improvements] Grand List of UX/UI Improvements Suggestions
On behalf of furry-ai gen community I would like to present a list of UX/UI improvements suggestions, which I hope users of other gens will find useful too.
Prompting
Introduce copy button in prompt and anti prompt fields for better UX on mobile (click to copy)
Change anti-prompt field to be textarea (the one you can drag to expand)
Fix bug that makes it impossible to save a landscape-oriented image to the gallery without resorting to changing phone's screen orientation (heart button is out of bounds, and I'm not the only one experiencing this)
Gallery Plugin
On mobile, thumbs up and thumbs down buttons on images in the gallery should show up without having to tap on an image to reveal these buttons to make it easier for people to upvote or downvote
Introduce double tap gestures for mobile users on images in gallery to make voting even easier. Double tap to upvote, double tap on upvoted picture to remove the upvote. Downvote could be without a gesture.
Implement tagging an image with user ID to prove identity of a poster, which may show up as a flair akin to one that the chat box has as an opt-in (by default all posts to the gallery are anonymous). Currently people tag their work with saveTitle and saveDescription, which is easy to impersonate. It would introduce some complexity for blocking though, then it could be treated in the following manner: blocking anonymous post of user A will block all all further anonymous posts of user A from the gallery, blocking non-anonymous post of user A will block further both anonymous and non-anonymous posts of user A from the gallery.
Introduce public/private galleries, public galleries being an opt-in (that is, by default gallery is private). It would be nice to have public galleries show up in a dropdown list when posting an image to the gallery or when browsing a gallery. At the very least, it would be nice for perchance to store the galleries that the user visited earlier in local storage, so it is easier to switch between them when saving or browsing, again KISS implementation could be just a simple dropdown list.
If public/private galleries end up being implemented, consider adding a description field to them.
Add the ability for the user to delete the images that they upload to the gallery. It's quite weird that this functionality does not exist.
Blocking button 🚫 and hide image button with crossed eye icon are currently too far apart from one another, which makes it difficult to use because they both represent a form of blocking yet they are visually too far away from one another. From my experience people just go straight up blocking the poster and not the image. Perhaps the concept of blocking could be implemented by a click of a blocking button, and pop up being displayed afterwards asking what the user wants to do (block the user or block the image), or at least group the "hide image" and "block poster" together.
Implement grid view of images on mobile (similar to what Instagram has). On click, the view could change back to the 1-image-per-row view (again, like on Insta)
Implement search/filter in galleries (at least most simplistic, regex-based search by prompt and saveTitle/saveDescription)
Comments Plugin
Make all https://generated-images.perchance.org URLs to appear as hyperlinks in chat so that they are clickable, many times it gets annoying having to copy URL manually, even if its within perchance.
Add the ability to upvote (and possibly downvote) the messages in chatbox
Add the ability to edit your own messages in chatbox
Other
Add the ability to talk other people's generated characters found in gallery, not only your own during generation (possibly only with permission of the person who generated the character? Technically prompt is public to everyone, and given that the AI deduces the personality from prompt, it shouldn't be an issue)
Textarea anti-prompt field. They just need to change the HTML of that input. You should tell the generator's creator this directly, using the "Feedback" button in the corner. Should be easily changeable by them if they know what they're doing.
Gallery
"Private" galleries are currently possible by sending to a uniquely-named gallery which only you know. Like "my-gallery-98479" or something. Then keep a note of that (which is the part you'd want a dropdown for, or maybe tabs like it works for chat rooms). I know that's not technically "private" but it's pretty close--and how they recommend we do such things. Still, an actual "private" feature could be good.
The gallery does look grid-like. But this depends on the screen size. If your screen is only wide enough to show one until it runs out of room, it'll continue on the next line. Sounds like you mainly (or only) use the site from your phone--which of course has a far smaller screen, which is why you're seeing it as always "one per row." This isn't something the site is enforcing, it's just how it works when you look at a load of images on a small phone screen. If you looked at the same thing on a larger screen you'd see a "grid" of many images per "row"/line.
Chat
What would up/down voting do?
Chat from image
Could be good, but as you say, this is doable just by copy-pasting the prompt in, right? I've not used the chat extensively, but that's how I gather it works. The thing is, the character chat is not part of the gallery or anything, it's just its own thing. The buttons you see under generated images are added by the generator to take you to the chat. I'm not sure they can add such buttons to gallery images. And on the other side, I'm not sure the dev who made the gallery would want to add such a super-specific feature to work with another specific generator. Perhaps a feature to allow gen creators to add such features to images in the gallery would cover this.
re UI:
Ok, noted. Since we got the room 3 renamed by the staff in here, that would be appreciated for anti-prompt field to be changed to textarea too.
re private/public galleries: Yes, that I understand and I don't mind it being like that. What I had in mind is the concept of public/private also affecting whether the gallery would show up on dropdown list when saving generated image (instead of only having to manually type the name of the gallery). You know, it gets tedious having to manually type in the name of the gallery (don't get me started on having them remembered), and a way to organize generated images would be very nice, so that people don't dump everything into public all the time and can have easier time finding what they want.
re grid like images:
Indeed, I use perchance from the mobile often. What I had in mind for a grid like that is a grid that resizes images to very small squares that gives you a gist of what's on an image so that you can navigate the gallery faster, kinda like on Insta: https://imgur.com/a/8ZXb3k1 (Insta shows this kind of grid view regardless of screen size). This is doable with CSS tweaks.
re chat upvote/downvote:
It could be seen as a way for people to make some very simple polls that requires a yes or no answer for instance, instead of polluting a chat.
re chatting with other people generations:
It is doable by copy pasting a prompt indeed. But a very simple change in the UX (people are generally lazy, and they want to be catered to their laziness) can have significant improvement on quality of life, IMO. Many times people were showing interest to chat with characters they see in the gallery, but not many bother manually changing a prompt to do so.
The tricky part with a "thumbnail" gallery isn't making the images small; it's making it big again when you click on it or something--so that the user can actually see the full image. And also have all those buttons working in a nice way (not sure how that would work on a little thumbnail).
Maybe perchance could add this mode to the gallery, and just have it open the image itself in a new tab, but not sure about the buttons in that case.
Yep, I see what you're getting at. The grid view like that could be an opt-in which will hide the buttons until clicked/tapped on an image (and thus getting brought back to normal view). The purpose is just getting rid of the need of extensive scrolling when browsing. I am not very strong with front-end so I apologize for my ignorance, but I think that dynamically adding and removing a class grid-view or something on a gallery container when grid view is active can do the trick. We force the container to apply flexbox with three small squares in a row. Buttons can simply enter into hidden visibility - or only upvote/downvote buttons can be present for convenience - when grid view like that is active and a tap/click on an image removes said class, bringing back the usual view along with the buttons. I could do a small POC when I have a minute, just sharing my thoughts for now. :)
That would work if it was all just on the page. But each generated image and each gallery image is an iframe. The image you're seeing is in a whole other window, effectively. So styles won't get in there. You can style the iframe itself, resize it and such and the contents do adjust. (Though they just scale the image to fit, they don't "cover" such that it cuts off the top and bottom if necessary, so forcing them to be square would warp a lot of images.) But to change stuff inside the iframe I think there's only a limited amount of stuff you can do. You can give it a line of styles, but not give it classes and selectors and all that.