I've recently switched to a black-and-white e-ink smartphone with the motivation of withdrawing from the attention economy somewhat and it's a genuinely cool piece of hardware. While the majority of my needs are met by this device there are a few things I'd like to have which don't work terribly well with the e-ink screen. I'm planning to implement a couple of projects to fill these gaps, at the moment I'm planning a Lemmy frontend and an OpenRouter frontend specifically for e-ink. Both are to be browser-based rather than native, to maximise compatibility and because I'm much more familiar with the web than Android development.
I would like to study the principles of sound e-ink UI design before approaching these projects to avoid creating unusable slop, in particular I am not entirely sure how to approach treating the refreshes as a first-class aspect of the design when I can't control them from the browser, and how to apply comprehensible UI conventions when a greyscale, high-contrast display is the target.
Some specific problems I have out of the gate are:
* Streaming LLM output to the screen is basically the worst-case scenario for e-ink, I need to buffer it and paint it in chunks without this becoming horrible to use.
* Ghosting is a serious problem, browsing HN on the device is a particularly obvious example. Ideally I want to avoid scrolling as far as possible and rely on pagination instead, which I feel has the potential to become annoying if not done well.
* Given I must rely exclusively on layout and type to carry the UI, what design languages emphasise these qualities best? My gut says the early Mac OS versions wouldn't be a bad place to start, this seems relevant given the display constraints of the early macs.
I would greatly appreciate any advice on the design and implementation of e-ink UIs from people with practical experience in this area. This is purely to scratch a personal itch, once they're nailed down I'll put them out in the wild under the GPL.
1. Persistence is free.
2. Pixels are cheap
3. Paints are expensive
4. Refreshes are slow
5. Colour is limited to nonexistent.
6. Pagination over scroll.
7. Full refresh (of page or portion) over pan.
8. Reflective rather than emissive.
9. Minimise animation.
10. Line-art or halftones over shade gradients (images).
<https://news.ycombinator.com/item?id=31396797>
I've reiterated (and occasionally revised) that a few times, see:
"E-Ink Design Principles for Web and Applications" <https://diaspora.glasswings.com/posts/638a8d10e041013afba844...>
That's source of the above list, gives a bit more explanation and rationale for each choice. I wrote it after failing to find any UI/UX development guidelines myself, and have had some positive responses from it.
And on HN, search for "pixels are cheap" by me: <https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu...> (about 15 results, this comment included).
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.
I would ammend to this that if you have an operation that can't complete quickly, it's better to have some kind of animation, even if it's notably slower than the already-slow screen refresh so that the user can tell that there's something happening.
The only advice that doesn't improve all UIs is the bit about filling in with white and adding black after.
This is also complicated by the fact that _all UX changes are bad_ until the users get used to them. So if you genuinely believe you're providing a better UX you do need to ignore the initial wave of negativity - which makes it difficult to tell knee-jerk reactions from genuine criticism if you're glossing over the results.
But yes, I can understand the desire to remove them, or at minimum drastically reduce their visual impact for e-ink
Animations are one of the things that I dread about using modern UIs. There are others too, no doubt.
I build all my UIs with Rust and Ratatui. It works very well.
So for web, I think it would translate to:
0) NO ANIMATION. You have like, 0.3 fps. You might poke somebody’s eye out if you animate something.
1) NO SCROLLING. Pagination only.
2) Use actual added visual element to tell the user where their input control / cursor / selection is. Don’t rely on color, font weight etc. Put an asterisk, Unicode arrow or something.
3) Direct(?) action controls. A button should DO something. Don’t give me a button that opens a drop-down that opens a menu to do something.
4) Use the whole screen! Keeping a pixel on/off costs nothing. Only changes do. So any whitespace is just sacrificing screen real estate and forcing more frequent changes.
Disclosure: I work at TRMNL.
[1] https://github.com/usetrmnl/trmnl-framework
[2] https://github.com/usetrmnl/trmnl-firmware
See the modos for what a clean sheet eink design would look like.
https://www.crowdsupply.com/modos-tech/modos-flow#products
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.
It could work well with e-ink because it's basically not interactive; you don't press and hold and move around to adjust it just right, instead you can confidently get an exact scroll position with one tap.
[1] https://en.wikipedia.org/wiki/Oberon_(operating_system)
I like this idea, definitely going to test it out.
There can be also a configurable wait time for refreshing the screen (like top) instead of assuming 60hz
[0]: https://inka.page
https://github.com/marcomattes/epaper-components/tree/main
The Bigme is a pretty high quality eink display, but some core properties of eink are present here so I’ll offer some generic guidance:
The contrast on any epaper display is lower than on a modern lcd/oled display. So you want to avoid or modify ui systems that try to diminish contrast for stylistic reasons. Or more explicitly: maximize the contrast wherever legibility matters. It is pretty common in pretty much every modern design system for web/mobile to diminish contrast so you may just need to go in and tweak things yourself.
Second: you cannot rely on color as an accent. A lot of UI does this (submit buttons). Defining a consistent accent pattern is necessary to replace patterns that rely on color. This can be outlines/borders or inversions.
Stylistically I think that sharper content looks better on eink than smoother content, but on a 300 dpi display with 16 grays this is less of a hard point.
>you cannot rely on color as an accent
Yeah definitely found this using some 'normal' webapps, default dark mode makes it worse too.
Additive inking works pretty well. As long as I am adding black ink to the page, everything is responsive. But if I want to push other updates asynchronously, or (god forbid) erase something, then there is the danger of clobbering the user's inkwork. I don't have any deep insights here, beyond waiting for human confirmation before updating anything.
I wonder if it is possible to detect when the pen tip has "left" the proximity of the page? If I knew this, I'd know when it was safe to update the UI.
I have decided not to use any scrolling at all. I am paginating everything and positioning input areas near the vertical middle of the device for comfort.
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.
The key differences:
- LCD was far lower resolution, often element-based rather than pixel-based displays (though the latter also existed).
- Screen response is far faster, with no ghosting. Electropheretic refreshes tend to take time, particularly at higher-quality or colour settings. Modern LCDs are used in high-performance displays at 60--120 Hz refresh or greater. By comparison, a fast EP/e-ink display might reach a few herz, and many require a substantial fraction, if not more than a second, to fully paint.
- Contrast was low. LCD relies on polarisation filters which greatly reduces foreground/background distinction.
That's not to say that some lessons cannot be learned, but the media do differ.
Not browser based. Not sure why it would matter.
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.
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!
Not kidding.