downvote buttons, here's a UI idea on how to merge it into one unified voting system. App animation + web block moc

fearout@kbin.social to /kbin meta@kbin.social – 1 points – 12 months ago

I heard that votes have been changed to behave closer to how people would expect, and boost is staying here as well. So I had an idea how to bring it all together in the interface.

Sidenote: you don't have to click the links here, the images are also posted inline in the comments below.

An app (either Artemis or an official one) might use a swipe gesture to visually hint at the relation between upvoting and boosting, as shown in the attached animation. Here's a static app mockup with both swipe levels displayed. I'd also imagine that there should be a setting that auto-upvotes posts when boosting.

And on the web, it's probably a good idea to consolidate all the voting buttons into a single block by adding an additional button at the top.

Edit: I’m disappointed in you guys. How come no one noticed the memes? :)

I like the overal effect but it's hiding the true nature of boosting.

Boosting shares a piece of content with your followers. Favouriting does not. Kbin does not yet contain a follower feed, but it is planned. This is what that looks like on Mastodon:

I know, but you probably won't be able to explain it to the whole user base, in my opinion. Making it somewhat visual might add to the general understanding. And probably increase boosting without extra incentives.

Web block mockup with both clicked and unclicked buttons.

Love the animation so much, I'd be tempted to boost everything just to see it again. Completely nitpicking here but maybe a version with the boost-arrow centered might look even more clean? I get the idea of having the arrow "evolve" but maybe can save that effect by having it "evolve" and slide to the right at the same time

Idk, both ways are used in iOS apps, but centering is usually done when opening a slider with several actions. Centering just one icon adds unnecessary movement in my opinion. The way I've done it makes your eye easily lock on an icon, since it doesn't move about once revealed. Remember, you're sliding this with your finger, so it's not going to be fixed in one or two places, but it'll move to recenter itself with every tiny movement.

Paging @ernest, I'd love to hear your opinion on this. I know it’s not really a super-upvote and has a separate function, but bringing it all together in a fun way might help people get the relation without extra explanations. So just a visual change.

It's very pretty, those are some nice colour choices, and the transitions are great.

The main content shrinking horizontally may cause some layout and overflow issues. Especially for smaller screen devices, users who rely on browser zoom, and as more functionality is added. But there's pretty some spacing to still work with, it might be flexible enough.

The mega-like icon could also stand to be more visually distinct from the regular like. The difference gets a bit lost in small sizes. Maybe a megaphone or broadcast/share icon to help communicate the retweet-like functionality? I'm not sure how activitypub and boost relate (is it a follow action?), but that should probably guide the icon choice there.

I also wonder, if they are 2 distinct actions, does the mobile version prevent people from boosting but not also liking a post?

The animation should be limited to maximum 5 seconds too for people with ADHD and other issues.

They're super nice mock-ups! It's great there are designers like you on board with the FOSS train.

Thanks. The content isn't shrinking horizontally, the whole block slides to the right. It's been an iOS interface element for years now and is used in native apps as well. As for the icon distinction, it really looks different on my phone. As for the smaller web icons, yeah, boost can be reworked into something more different, like a rocket or something. And when adding animations like this to an app, it's common practice to add a setting to turn them off. So the app would just have static icons with no movement in that case.

And nothing prevents you from both upvoting and boosting. I'd say its even encouraged :)

Ah, it does move, my mistake. Should the image link then be removed from screen-reader output when it is no longer on the screen? Would I have to unboost a post to be able to expand the image preview again, and then reboost?

A setting to turn off animations would be lovely, I hope someone is able to build that in if they implement this.

The icon distinction for the third image with the three in a column is the one I think isn't quite distinct. I see a different version is diagonal though, which helps a lot. If i understand correctly. I am viewing from a small screen with sight problems though.

And I wasn't clear with my both like / boost question, I apologise. Is it still possible for me to boost a post without also liking it?

Edit: it would be good to check if Apple has patented this design interaction too, they love to patent everything and then sue.