A better way to favorite on a mobile device

October 11, 2018 8:39 AM

When I'm using a mobile device, I'd love a better way to favorite (or flag) items, so that I can engage with MetaFilter more. The goal here would be increased usability, accessibility, engagement and enjoyment.

I find that I read MetaFilter more than ever, but I interact with it less than I ever have. The former has to do with my increased use of mobile devices, the latter with the effort it takes to do simple tasks like favoriting, flagging, or tapping into a timestamp on a device. The buttons are tiny, oddly placed and sometimes accidentally take me into large threads that I don't want to load on my phone.

This would be an opportunity to improve…

• usability, as the effort/reward ratio is currently too high to use the byline features.
• accessibility and inclusivity, as these features are difficult for people with large hands, dexterity or vision issues.
• engagement on MetaFilter, as the collective effect of the current state may be disincentivising people engage with the site, e.g., if fewer people are favoriting, flagging, etc. then fewer people are receiving interactive feedback, which increases the effort/reward ratio.
• enjoyment on the site, as it's fun to interact with others here, to give favorites as well as get them.

I'd like to propose we consider solutions to make it easier to interact with MeFi on mobile devices please?

One idea might be to allow press and hold on any comment to bring up a bigger version of the byline elements (favorite, flag, go to comment) which can be more easily selected. Another would be to rearrange the byline for mobile versions of the site. There are lots of ways we could do this and many existing patterns that work well for other sites, which we could consider implementing in a way that doesn't compromise the MeFi ethos.

posted by iamkimiam to Feature Requests at 8:39 AM (28 comments total)

Hey cool, someone else wants this.

I mis-tap on the byline what feels like half a dozen times a day, and would really like to change it up so that this is less likely to happen. Also, I've been doing some refactoring of the front-end javascript to make changes, generally, more feasable.

My thought on how to do it is as follows:

Replace

posted by frimble at 1:59 on October 11 [edit] [x] [note] [IP:whois|search] [user info] [22 favorites +] [!]

(that's the admin version: I used that to show just how much stuff is included in what I and the mods see). With:

posted by frimble at 1:59 on October 11 (*)

where the (*) is not literal, but rather represents a button that opens up a menu with various options.

I'd be inclined away from relying on a long press because it's a form of interaction that's invisible until you're told that it's even there, but all in all, this is a good time and place to have this discussion, so let's talk it over.
posted by frimble (staff) at 8:39 AM on October 11, 2018 [12 favorites]

A menu would not solve a problem for me personally, I don't think (without knowing the UI you're considering). I sort of like what New Gmail (which I otherwise hate) has done where there's a larger "target" for the clickable things. So instead of clicking the exclamation point, you can click the whole bracketed thing which maybe makes sense for 2018 MeFi anyhow?

Mods could have a second line or something else?
posted by jessamyn (retired) at 9:08 AM on October 11, 2018 [6 favorites]

Swiping still works for me.
posted by Melismata at 9:27 AM on October 11, 2018

Swiping doesn’t work for me anymore (iOS 12, iPhone 8 Plus). I too would like a bigger, or more separate, favorite-button, preferably one that doesn’t require an extra step like a menu.
posted by Etrigan at 10:07 AM on October 11, 2018 [3 favorites]

I have (poorly and halfassedly) solved this for myself by setting the default text size on my phone to TREMENDOUS but I realize this is not everyone's favourite option.
posted by poffin boffin at 10:29 AM on October 11, 2018 [3 favorites]

I always have to zoom in to reliably hit the + character, and half of the time the header overspills and takes me elsewhere. Which is a shame because there are lots of comments I would like to favourite, but it's really frictiony.
posted by Wrinkled Stumpskin at 12:14 PM on October 11, 2018 [10 favorites]

I don't really want a menu but the ! and + buttons are tiny and I often miss them on my phone, so consider this an enthusiastic endorsement of an update!
posted by smoke at 2:21 PM on October 11, 2018 [1 favorite]

I like that on occasion I mis-flag a message. I imagine cortex and the rest of the admins looking over a comment scratching their heads and wondering how it breaks the guidelines...

...even though I've also favorites the comment after the fact. Thank you random smartphone screen freezes and fat fingering.
posted by Nanukthedog at 3:38 PM on October 11, 2018 [3 favorites]

I would support some improvement in this area (though it's not a big problem for me personally) but I definitely don't want to deal with a menu. No graphical buttons either please—I like my MeFi text-based. But if some kind of relatively minor formatting change can be made so as to improve usability in this area, I'm for it.

Perhaps a user-adjustable byline whitespace variable?
posted by Anticipation Of A New Lover's Arrival, The at 5:01 PM on October 11, 2018

I’d love something like this. I still miss swiping.
posted by rtha at 6:18 PM on October 11, 2018 [2 favorites]

Double tap to favorite?

Your phone may well differ, but that action is already mapped to zoom in my mobile browser.
posted by Dysk at 6:47 PM on October 11, 2018 [1 favorite]

I find it very easy to mis-flag comments whilst trying to favorite, so moving those two apart or making it a combined menu that’s a little less prone to fat fingers would be good.
posted by Artw at 8:02 PM on October 11, 2018 [2 favorites]

(I think they mostly get mis-flagged as fantastic, sorry to anyone I’ve done that to by accident)
posted by Artw at 8:03 PM on October 11, 2018

Maybe adding another characters and making them clickable would help? For example: [_+_] and [_!_] instead? Just a little bit bigger?

I have this problem too, but I use the desktop version on my phone because I hate the mobile UI for no reason.
posted by AlexiaSky at 11:20 PM on October 11, 2018 [4 favorites]

Favoriting and flagging involve javascript which sends out some little ajaxy request, right? For which I'd assume you just need the comment ID.

So how about an easier way to select the comment-bookmark on mobile (currently the link on the timestamp; maybe make the entire comment clickable, though that would complicate links within comments... or maybe restoring the swiping behavior but make it select the comment too?) and then provide larger or gesture-accessible favoriting and flagging buttons which depend on the “power user” understanding that they're going to flag or favorite whatever the currently-selected comment is, the comment ID that's in the address bar.
posted by XMLicious at 5:43 AM on October 12, 2018

My biggest mobile issue is accidentally clicking usernames and time stamps. I get why they're links but it's rare that I actually want to follow them. Increasing their size would only make the problem worse.

How about this: the byline is inactive by default; a single tap anywhere in the comment makes it active, and a second tap on the flag, favorite, etc. will register that action (it could even large-ify them). Avoids menus, avoids mis-taps.
posted by dbx at 5:46 AM on October 12, 2018 [2 favorites]

Swiping doesn’t work for me anymore (iOS 12, iPhone 8 Plus)

You have to re-enable it anytime you save your Preferences, I believe. There is a link in my profile to the comment where you can re-enable it. Swipe to favorite does not work at all in Modern theme, IIRC.
posted by Rock Steady at 5:54 AM on October 12, 2018

One of the big things about the article action links is that the size and spacing is troublesome for fingers

Add to Activity[+]Add to Favorites[+]Flag[!]

which is also a thing with comment actions. In my dream world, there is a media query for mobile that turns the action lines for posts (not comments) into full-width button bars, like

[ Add to Activity | Add to Favorites | Flag ]

Comments have a similar problem with some different issues

posted by some_nick at 3:29 PM on October 
21 [1 favorite +]   [!]

The split date is just cosmetic, but the wrap causes some finger-sized link problems. If you want to favorite, you might hit the name link or the time link. The extra space for the flag link looks new and something I just noticed. Cool! But sadly, the vertical line spacing steals a bit of its thunder. /complaintz, but at least these are just CSS tweaks!
posted by rhizome at 9:45 AM on October 12, 2018 [3 favorites]

The extra space between the favorite and the flag was added a while ago as a partial solution to this (the word "favorite" in [1 favorite +] was also changed so it no longer links to the "People who have favorited this" page). But yes, it is still a problem when the byline wraps around.
posted by Rock Steady at 10:35 AM on October 12, 2018

Swiping doesn’t work for me anymore (iOS 12, iPhone 8 Plus)

You have to re-enable it anytime you save your Preferences, I believe. There is a link in my profile to the comment where you can re-enable it.

Really?? Fuckin’ A! That’s awesome.
(Enables it)
(Adds the link to profile for future use)
(Tests it)
Ummmm.... nothing.

Swipe to favorite does not work at all in Modern theme, IIRC.

Goddam it.
posted by greermahoney at 8:01 PM on October 12, 2018 [2 favorites]

Swipe to favorite does not work at all in Modern theme, IIRC.

So here’s a funny thing I just discovered: I can’t see theme names in portrait orientation. (iOS 12, iPhone 8S, Safari)
posted by Etrigan at 4:05 AM on October 13, 2018

I don’t much favorite things, and when I do I zoom to reach the favorite button, but I use the timestamp extensively to save my place in long threads so that when mobile safari randomly reloads the page/freaks out, I can get back to where I was. So please don’t get rid of the timestamp link.
posted by leahwrenn at 10:03 AM on October 14, 2018 [3 favorites]

The fact that there isn't the extra space between the favourite, flag and timestamp links on the recent activity page have also caught me out a few times - is there a reason it's not the same as elsewhere?
posted by Dysk at 3:14 AM on October 15, 2018

I like rhizome's idea.

[##][ADD TO FAVORITES|REMOVE FROM FAVORITES] [FLAG|FLAGGED]

Make the entire word/phrase clickable, maybe use an image rather than text so you can more effectively utilize the small amount of real estate available. I mean ideally you could just click on the body of the comment to favorite, but since hyperlinks are allowed that won't work.
posted by grumpybear69 at 11:40 AM on October 16, 2018 [4 favorites]

As long as the Professional White Background plain theme stays completely as it is, I don't care how badly you crazy kids wreck up the MeFi experience on your personal digital prostheses.
posted by flabdablet at 8:07 AM on October 17, 2018

I just switched to the modern design, the issue persists.
posted by grumpybear69 at 8:31 AM on October 17, 2018

Another issue that could be fixed by letting us design and share our own CSS (which will be overlaid on the default MeFi CSS). The + can be made larger with font-size.
posted by Tehhund at 6:39 PM on October 18, 2018

I think you can already do that with Grease/whateverMonkey, at least via javascript.
posted by rhizome at 7:44 PM on October 18, 2018