large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://medium.com/tomyum/our-redesign-of-mediums-claps-and-why-they-may-not-have-chosen-to-do-it-this-way-edc9ff6b586e">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div>
<p>Designer, Toronto. http://tomyum.design</p>
<p>Aug 29</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*6p88Qr70JrweEN90m4U-vg.png" alt="1*6p88Qr70JrweEN90m4U-vg.png"></div>
</div>
</div>
<div>
<p>By now you’ve probably heard of or tried Medium’s new feedback metric, <a href="https://blog.medium.com/show-authors-more-%EF%B8%8F-with-s-c1652279ba01">Claps</a> . There’s already been a lot of good discussion on why the previous <a href="https://medium.com/@lucasnantonio/why-%EF%B8%8F-trumps-8766ddc0c0e6">Recommend system is better</a> than Claps, and vise-versa. This post will not be adding to that.</p>
<p>Instead, we want to look at how Claps is currently implemented on mobile and share our thoughts on how the interaction can be improved. And then we’ll critique our own solution.</p>
<p>This is how Clapping currently works:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*MQpRklSBSa_MLkiPbZP9VA.gif" alt="1*MQpRklSBSa_MLkiPbZP9VA.gif"></div>
</div>
<h4>Our Feedback</h4>
<p>1) Giving claps take way too long. To give the maximum 50 Claps, a reader needs to hold down the button for 25 seconds. That’s 2 claps per second. Compared Medium’s web version, which increases at a rate of ~5 claps per second, it’s 2.5x slower on mobile.</p>
<p>2) Claps go up by increments of 1, which is too granular. The chances a reader wants to give precisely 17 Claps is probably much lower than giving 15 or 20.</p>
<p>3) Undoing Claps is not intuitive. The button is hidden within the share menu:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*Wqhvhsn84tqeej_PwNDNZA.png" alt="1*Wqhvhsn84tqeej_PwNDNZA.png"></div>
</div>
<h4>Our Solution</h4>
</div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*zLWo5lJ_Sbrg3F-lTjEuxQ.png" alt="1*zLWo5lJ_Sbrg3F-lTjEuxQ.png"></div>
</div>
</div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*lbVeVJbugXjCPCyxADGc3w.gif" alt="1*lbVeVJbugXjCPCyxADGc3w.gif"></div>
</div>
<p>Relating back to our feedback above:</p>
<p>1) By introducing a slider, readers can show their appreciation much quicker. They can also edit how many Claps they want to give before confirming the action. Readers can still give +1 Claps by tapping on the icon.</p>
<p>2) After +1, Claps snap to multiples of 5 on the slider. (At least that’s what we wanted…but weren’t able to show it in the animation)</p>
<p>3) Undoing Claps is more discoverable. Simply drag left on the icon to undo it, like so:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*uGPry3O10DI-B2kd5Zp4NA.gif" alt="1*uGPry3O10DI-B2kd5Zp4NA.gif"></div>
</div>
<h3>So why may our solution not work?</h3>
<h4>“Satisfaction”</h4>
<p>There’s a lot of smart people working at Medium, so it’s highly likely that the product team considered our solution. After all, their new business model revolves around Claps so this change was not made blindly. We’re mindful of this. So let’s critique our own work:</p>
<p>In <a href="https://blog.medium.com/show-authors-more-%EF%B8%8F-with-s-c1652279ba01">Medium’s announcement post</a>, they said they wanted to give readers a more satisfying way to give feedback to writers. So they must believe the current experience is the most satisfying. Our slider does indeed feel less satisfying but we believe there are ways to remedy that with sprinkles of animation.</p>
<h4>Resemble Clapping in Real Life</h4>
<p>Currently, appreciation is directly correlated to the amount of effort a reader puts into showing it (the duration in which they hold down the Clap button). If someone is spending 25 seconds of their life to give 50 Claps, they must <strong>really </strong>like the post. Just like in real life, the longer we applaud, the more appreciation we are showing. But just get nit-picky, if appreciation is a factor of the effort a reader puts in to applauding, then the rate at which claps increment per second should be standardized between mobile and web. Right now, me showing 5 seconds of appreciation on mobile translates to 10 Claps compared to the 25 if I were to be reacting to the same post on my laptop.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*40-XJY6EqILDMXM7Q299pA.gif" alt="1*40-XJY6EqILDMXM7Q299pA.gif"></div>
</div>
<p><a href="https://giphy.com/gifs/party-how-i-met-your-mother-applause-6nuiJjOOQBBn2">https://giphy.com/gifs/party-how-i-met-your-mother-applause-6nuiJjOOQBBn2</a></p>
<p>Next, maybe they expected users to not consider in advance how many Claps they want to give, but instead just hold down the button until they feel like stopping. Hence the +1 increments. After all, we don’t decide ahead of time that we will give precisely 15 claps after a live performance. We just clap. Again, Medium’s current implementation is more reflective of how we applaud in real life. But does it have to be though?</p>
<h4>Purposeful Friction</h4>
<p>Again, if somebody takes the time to give 50 Claps, they must <strong>really </strong>like a post. Medium introduced applauding as a non-boolean way to show reaction. Our design, which makes clapping easier, perhaps takes away that signal of value to the writer.</p>
<h4>Web Constraints</h4>
<p>Our solution may also not translate well onto web because of the layout. The slider interaction could work using mouse hover though, just like how Facebook does their <a href="https://www.facebook.com/zuck/videos/10102412343501081/">Reactions</a>. We may update this post later on with prototypes of how we see our design being implemented on web.</p>
<h4>Money</h4>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*Wt-60X78q8XKtZOPO8jcAg.gif" alt="1*Wt-60X78q8XKtZOPO8jcAg.gif"></div>
</div>
<p>Image from Medium’s Post, <a href="https://blog.medium.com/expanding-the-medium-partner-program-3be09dd146e4">“Expanding The Medium Partner Program”</a></p>
<p>And finally, maybe Medium purposely wanted undoing a Clap to be difficult to discover. If <a href="https://blog.medium.com/expanding-the-medium-partner-program-3be09dd146e4">writers are now making money as a result of the number of Claps they receive</a>, this should not be something easily undone. Undoing a Clap is difficult to discover on web too (you need to hover over the Clap icon), so we wouldn’t be surprised if this was a conscious decision. Taking back an applaud is also an uncommon occurrence.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p>Perhaps this post shed new light to Medium’s product team on how to iterate on Claps. Or perhaps this just validated what they already knew. It’s easy to criticize or redesign other people’s work. But it’s only effective if you look at the problem and solution from both sides of the table.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*DnztmVqVgmCmQmxA9TdfqA.png" alt="1*DnztmVqVgmCmQmxA9TdfqA.png"></div>
</div>
<p><a href="http://tomyum.design/"><strong>TomYum</strong></a> is a Toronto-based Digital Product Design and Branding Company. <a href="http://tomyum.design/#contactus">Get in touch</a> with us to discuss your next project.</p>
</div>
</div>
</div>
</div>
<div><a href="https://medium.com/tomyum/our-redesign-of-mediums-claps-and-why-they-may-not-have-chosen-to-do-it-this-way-edc9ff6b586e">https://medium.com/tomyum/our-redesign-of-mediums-claps-and-why-they-may-not-have-chosen-to-do-it-this-way-edc9ff6b586e</a></div>


Our redesign of Medium’s Claps…and why they may not have chosen to do it this way.

Our redesign of Medium’s Claps…and why they may not have chosen to do it this way.

Top Stories