A Better Popup

Arguably the most im­por­tant part of any Harper in­te­gra­tion is the popup win­dow. You know, this thing:

The popup you see above is the one we had avail­able pre­vi­ously for the Chrome Extension. It worked, but it never felt as pol­ished as the un­der­ly­ing op­er­at­ing sys­tem’s con­text menu. In an ideal world, we would sur­pass the op­er­at­ing sys­tem with taste­ful flair and func­tion­al­ity. This week, I ripped out that old con­text menu and re­placed it with a bet­ter one (see be­low).

Today, I plan to dis­cuss the evo­lu­tion of the popup win­dow and why it looks the way it does to­day. I am a de­signer in the sense that I oc­ca­sion­ally de­sign things, but I do not iden­tify as one nor do I have the real train­ing to be la­beled as one. Designing things is re­ally hard. I hold an enor­mous amount of re­spect to the peo­ple who do it pro­fes­sion­ally. I must ad­mit that this new de­sign would not have been pos­si­ble with­out Claude Design. Part of my in­ten­tion with this blog post is to do an in­ves­ti­ga­tion on what it does so that I might not need to rely on an LLM next time.

The Original Popup and What Came After

The orig­i­nal sug­ges­tion popup for Harper was ex­tremely min­i­mal. It only con­tained three things af­ter all:

• The sug­ges­tion type.
• The de­scrip­tion of the sug­ges­tion.
• The sug­gested ed­its to be made.

It had lim­ited func­tion­al­ity, but it worked. From there, I added but­tons to add words to a user’s dic­tio­nary and to ig­nore the sug­ges­tion.

At this point, we re­al­ized that the most com­mon but­tons to press (the ac­tual sug­ges­tions) were be­ing placed in the cor­ner of the popup fur­thest from the user’s cur­sor. That can­not do! So we moved it around and im­proved the styling of the text. That brought us to the popup you saw at the be­gin­ning of this post.

And that is where we left it for sev­eral months. It was not good enough to be a truly sat­is­fy­ing ex­pe­ri­ence, but it also was not bad enough to war­rant chang­ing. Until this week, that is.

So, I de­cided to make three dis­tinct changes:

I first placed the most ac­tion­able but­tons clos­est to the user’s cur­sor. That meant the top-left of the win­dow, with­out any bor­der or padding.

Next, I stacked those most ac­tion­able but­tons ver­ti­cally, so as to mimic the op­er­at­ing sys­tem’s con­text menu and to al­low the least amount of mouse move­ment to choose an op­tion.

Finally, I de­cided that all the least used op­tions and in­for­ma­tion should be made avail­able via a fly­out win­dow to the right of the main “context” popup.

After ar­riv­ing at a rough sketch, I took it to Claude Design. From there, Claude sketched out a few op­tions with vary­ing styles. I chose the one that was clos­est to the “canonical” de­sign of the Harper ma­cOS app.

And that is how we got to the popup avail­able in the most re­cent re­lease of Harper:

What “Style” Means

In this con­text, style means a few things.

For one, it means us­ing a con­sis­tent bor­der color, that is nei­ther too light nor too dark, and ra­dius. It should di­vide the el­e­ment from its sur­round­ings with­out de­mand­ing more at­ten­tion than the el­e­men­t’s con­tents.

For two, it means cor­rectly em­ploy­ing vary­ing de­grees of mar­gin and padding to con­vey a hi­er­ar­chy within the el­e­ment. It also means ad­just­ing font weight and size to the same aim.