TL;DR Farcaster mini-apps have a lot of design constraints to deal with, and I think that modals (and tooltips) are a really useful design element for mini-apps in light of those constraints.

I've been trying out a lot of mini-apps on Farcaster lately, just noticing things and hoping to discover something of value somewhere along the way.

One takeaway from my mini-app hopping so far is that modals (and tooltips, which are small modals to me) are my favourite design element in mini-apps at the moment. I'd like to expand a bit on why I think that is.

But first, if by some miracle you're not familiar with mini-apps on Farcaster, then here is a short explainer video before you go on.

Okay, now, I think there are two reasons why modals (and tooltips) come in very handy when designing mini-apps.

The first reason is the nature of the mini-apps themselves. They're meant to be simple, lightweight user interfaces centered around a specific action. Buy a colour on Basecolors, Bid for a QR code on QRCoin, Buy likes and recasts on Amps, and so on. Mini-Apps are not like websites with their complex navigation menus, multiple page spreads, and numerous options for numerous user goals. When I open a mini-app, I'm immediately trying to find out two things:

1. What is this mini-app for?

2. How can I use it for what it's for?

This is where a nice modal comes in. Websites can afford to have the luxury of fully functional, sprawling about pages; mini-apps cannot. Therefore, one of the most common uses for modals in mini-apps is to immediately tell the new user what the mini-app is all about, without disrupting the flow for a user who already knows what they want to do.

A good example of this is the Bracket mini-app shown below. When a user who already knows their way around opens it, they can proceed without interruption. However, if you know nothing about the mini-app, then there's a nice little info button which opens a modal to get you up to speed.

The second reason is something I realised while browsing the Checkr mini-app. Let me put it like this: there are a number of terms that need explaining in these web3 mini-apps, and you typically want a way for the user to get the information they need without disrupting their experience too much.

Checkr is a social analytics tool that tracks "token attention" across Farcaster and Twitter. Already, "token attention" is a term that needs to be explained. What does it mean? How is it calculated? And once you start going down that road, you come across the metrics Checkr measures — metrics like "mindshare," "pulse," "attention," and "influence."

These terms are not hidden away either. A cursory glance at the first page you see when you open Checkr shows that these terms greet you immediately you arrive. And they're everywhere as you explore the mini-app, which makes sense; they're the foundations on which Checkr is built.

But of course, these terms are not limited to the homepage; they're everywhere, and expectedly so.

That leaves us with the question: when a user arrives at Checkr's homepage, a total noob, what is the easiest way to provide them with more knowledge about these terms, thereby empowering them to use Checkr effectively? And how do you do this without interrupting them as they browse the mini-app?

The answer, in my humble opinion, is tooltips. And as you might recall, tooltips are just tiny modals to me.

Thank you for coming to my TED Talk. I hope I have been able to convince and not confuse you with these few arguments of mine that modals (and tooltips) are wonderful when designing mini-apps on Farcaster. And now, some random screenshots of modals in mini-apps.