Ask HN: In your experience, what are sound conventions for e-ink UI development?

If you find out, let me know! I have been working on a port of Excalidraw to my ReMarkable Pro and it's opened my eyes to how much we take for granted in terms of UI interactions when we assume we have a 30+hz screen with no to minimal ghosting. Layout has to become as monotonic as possible, especially in the absence of user interaction; in other words, the app itself should never be doing anything to disrupt prior renders on its own unless you are clearing the whole page. When it is the user interacting with the app, try to minimize the number of intermediate states their interactions produce. This does NOT mean "just don't render those intermediate states", however. It means make the interactions themselves not require intermediate feedback. Essentially, users (and developers) are so accustomed to just being able to manipulate things with no side effects that you have to make every possible interaction as intentional as possible, leaving them less frustrated when they do see a refresh. If an operation is going to cause a refresh, it should happen at a moment the user already understands as a semantic boundary.

You obviously cannot always avoid this, so when there is a hard requirement for continuous feedback, use a degraded/cheap transient representation and refresh at commit of that action. With E-Ink, every interaction has to be a trade off between ghosting and latency. One common pattern I ended up coming back to is intermediate states that optimize for latency at the expense of ghosting until the UI action is 'complete'. This will allow refreshes to be associated with the satisfaction of finality. Funny enough, many of them harken back to old UI paradigms from when computer graphics weren't as powerful as today. When resizing, I simply draw the outline of the shape with a fast update mode that tolerates more ghosting until the user releases their finger or stylus, at which point, after a small lag to account for an 'oops, just a tiny bit bigger/smaller', I do a localized refresh of the union of the old + new area.

The outline itself is deliberately faint, so the refresh doesn't have to be as intense if its a small delta.

For your streaming LLM case, I would recommend doing it in chunks, like you said, perhaps doing a hard refresh of everything but the input box + moving the tail of last sent message + beginning of stream to the top upon send. Of course, this implies that you know exactly how long the response will be, which you don't. The challenge will be coming up with a UI paradigm that doesn't make it look awkward if the response only goes down to the middle of the screen while also nicely doing a clean refresh pre-emptively if it's clear it will overflow and need to move to the top. For the former case, find some way where it looks not completely awkward if it's partial and then do refresh of the chat history area and move it to its proper fitted position once the user clicks on the input box again to type their next reply. For the latter, perhaps embedding some kind of remaining space meter at the bottom that indicates when you'd need to do this move + refresh action (don't directly label it that way) would enable the user to anticipate it more and be less frustrated when it happens, as they are psychologically awaiting the next part of the answer/reasoning, not surprised at a sudden flash.

For the actual streaming, you'll have to ensure that your text alignment works in such a way that once a line is rendered to the screen, its placement is final (in other words, no streaming intra-word, as you need to know if the word will fit in remaining space on the line before rendering it). Basically, avoid retroactive reflow like a PDF document with a fixed layout, not like this text box I am typing in with a resize handle at the lower right. You'll also probably want to disable scrolling during generation as well, or at least make some sort of discrete pagination mechanism for going back and forth.

In any event, I look forward to seeing whatever it is you're building!

I’d focus more on print usability and readability guidelines than computer guidelines. 5Hz eink is closer to a moving newspaper than a slow computer.

https://www.mediapoint.com.au/design-tips/composition-layout... might be moderately helpful.

But my advice: do not count on anything refreshing ever. Do not have animations, or transitions. Preload things to the correct spaces, then fill in. Reserve fixed white areas for output, and then fill in with black. (This works much better than the reverse!)

For quite long running processes, it might be worth having it behind a second page load.

Not a web UI, but I recently built this[0] for my Boox Note Air 5c tablet. You may find it useful (check the source code in GitHub)

[0]: https://inka.page

Spitballing an idea. I don’t use e-ink stuff but had my hands on it back when personal readers were new to the market.

When scrolling arbitrary text on a computer via keyboard, I generally become mildly frustrated hitting Spacebar, PageUp, and/or PageDown because I lose continuity with what I’m reading. (Perhaps the momentary 60hz blur makes it worse?) I attribute that to having a hard time identifying where I last read.

If there’s a dedicated button to scrolling, consider having an adjustable distance. EX: 100% screen height down, 95% screen width down (keeps a sliver of the last page), or 80% screen width down (keeps a chunk of the last page).

If you’re working with a touch display, perhaps a hold-and-drag-to-scroll feature could work? Have no indicator when pressed and only refresh the screen when the user lifts their finger. (It’s certainly not ideal to provide no feedback that it’s being used. But it may be useful to a user aware of how it works. Would probably need a training demonstration in-device like what older operating systems had.)

Perhaps a dedicated scroll undo button? For when one makes a mis-input and wants it back where it was. I know I’ve seen my grandma get frustrated at that sort of thing on desktop/phone where it’s quick to fix.

    ┌───────────────┐ 
    │               │ 
    │         drag  │ 
    │          ┌┐ │ │ 
    │ │        └┘ │ │ 
    │ └┐          │ │ 
    │  └┐         │ │ 
    │   └┐        │ │ 
    │    │     ┌┐ │ │ 
    │    └─    └┘ ▼ │ 
    │               │ 
    │               │ 
    └───────────────┘ 

Beyond the early MacOS UI/UX, I would look at pre-smartphone devices as well. Palm pilot, phones, etc. These will give you ideas on what you can accomplish with lower resolution UI screens.

For that matter, look at good TUI applications... (not the render path, but the result as a whole) ... blocking/spacing and clear controls, etc... though you'll be more touch, less tab/enter, etc. A TUI App renders by characters, but you can still learn from the overall layouts. Simplified menu lists with fewer items in a hierarchy, etc.

If you can and have physical buttons, think long and hard about their functions, especially if you have a limited number... these should do your most important things.

Look back to the olden days of "drag proxies" or outline/wireframe drags.

Specifically for your example of maps, I would stick mostly to border buttons or UDLR gestures to "page" around rather than than trying to show a smoothly refreshing drag area.

Since you can _see_ the screen refreshing/drawing, and assuming you're using +/- buttons instead of "pinch to zoom", try drawing animations "in layers", ie: spend 100-300ms slapping "zoom tunnel boxes" trying to keep the user oriented while interacting.

Break the tiles into "thick => thin => letters => detail" and wait for them to quiesce before stacking more layers.

Rule #1 of optimization, you can never do something faster, you can only "do less"!

Rule #2 of optimization (amdahls law?)- optimize the slowest parts before you optimize the faster parts (and there's a limit to each!).

...from an end-user perspective, I would love if you respected my time and concentration when doing something "interactive".

Imagine scrolling through an e-ink address book. Imagine you spam only the (properly placed / laid out) first letter of first name and first letter of last name, and then after ~500ms of no movement, only THEN write out the remaining letters, phone numbers, icons, etc.

For e-ink interactive: every (slow, expensive) pixel that you write that gets scrolled off the screen is wasted time.

#1 - do less. In interactive cases, draw less pixels.

#2 - keep context. Use proxies/wireframes, "first letters", and "bold strokes".

#3 - fill in layers. Think "iterative Mona Lisa" and "progressive jpeg"

#4 - actually being slower is okay if you end up "feeling faster" or "seeming cooler"

Lean in to the defects and quirks of e-ink, make them feel intentional rather than trying to duplicate 60fps 16M colors.

Just buy a Palm Pilot, and/or review old PalmOS screenshots.

Not kidding.

TRMNL recently open sourced a CSS framework made specifically for ePaper display [1], you can use the opensource firmware[2] and quickly hack together a good solution using off the self components.

Disclosure: I work at TRMNL.

[1] https://github.com/usetrmnl/trmnl-framework

[2] https://github.com/usetrmnl/trmnl-firmware

    def next_card(handle):
        if handle.time.hour == "12:00":
            return ( "Lunch Break", "30m" )
        elif handle.time % 60 == 0:
            return ( "Calendar", "15m" )
        else:
            return ( handle.plugins.shuffle()[0], "5m" )
        ...etc...