Ask HN: あなたの経験では、e-ink UI開発の健全な慣行は何ですか?
Ask HN: In your experience, what are sound conventions for e-ink UI development?
私はReMarkable Pro向けにExcalidrawの移植に取り組んでおり、30Hz以上の画面とゴーストが最小限であることを前提としたUIインタラクションの多くを当たり前と思っていることに気づきました。レイアウトは、特にユーザー操作がない場合には、できるだけ単調にする必要があります。つまり、アプリ自体が、ページ全体をクリアしない限り、以前のレンダリングを独自に妨害することをしてはなりません。ユーザーがアプリと対話するときは、その操作が生成する中間状態の数を最小限に抑えるようにしてください。これは「中間状態をレンダリングしない」という意味ではなく、操作自体に中間フィードバックを必要としないようにすることを意味します。本質的に、ユーザー(および開発者)は副作用なしに物事を操作できることに慣れすぎているため、すべての可能な操作をできるだけ意図的にし、リフレッシュを見たときにフラストレーションを軽減する必要があります。リフレッシュを引き起こす操作は、ユーザーが意味的な境界として理解している瞬間に行われるべきです。これを常に回避できるわけではないので、継続的なフィードバックが必須の場合には、劣化した/安価な一時表現を使用し、そのアクションのコミット時にリフレッシュします。E-Inkでは、すべての操作がゴーストとレイテンシのトレードオフになります。私がよく戻ってきた一般的なパターンは、UIアクションが「完了」するまでゴーストを犠牲にしてレイテンシを最適化する中間状態です。これにより、リフレッシュが最終性の満足感と関連付けられるようになります。
私が見つけたら教えてください!ReMarkable Pro向けのExcalidrawの移植に取り組んでいて、30Hz以上の画面でゴーストが最小限であることを前提としたUIインタラクションの多くを当たり前と思っていることに気づきました。レイアウトは、特にユーザー操作がない場合には、できるだけ単調にする必要があります。つまり、アプリ自体が、ページ全体をクリアしない限り、以前のレンダリングを独自に妨害することをしてはなりません。ユーザーがアプリと対話するときは、その操作が生成する中間状態の数を最小限に抑えるようにしてください。これは「中間状態をレンダリングしない」という意味ではなく、操作自体に中間フィードバックを必要としないようにすることを意味します。本質的に、ユーザー(および開発者)は副作用なしに物事を操作できることに慣れすぎているため、すべての可能な操作をできるだけ意図的にし、リフレッシュを見たときにフラストレーションを軽減する必要があります。リフレッシュを引き起こす操作は、ユーザーが意味的な境界として理解している瞬間に行われるべきです。これを常に回避できるわけではないので、継続的なフィードバックが必須の場合には、劣化した/安価な一時表現を使用し、そのアクションのコミット時にリフレッシュします。E-Inkでは、すべての操作がゴーストとレイテンシのトレードオフになります。私がよく戻ってきた一般的なパターンは、UIアクションが「完了」するまでゴーストを犠牲にしてレイテンシを最適化する中間状態です。これにより、リフレッシュが最終性の満足感と関連付けられるようになります。
リサイズ時には、高速更新モードでシェイプの輪郭を描画し、ゴーストを許容しつつ、ユーザーが指やスタイラスを離すまで待ちます。その後、少しのラグ(「ああ、もう少し大きい/小さい」という微調整のため)の後、古い領域と新しい領域の和集合のローカルリフレッシュを行います。輪郭は意図的に薄く描画されるため、デルタが小さい場合、リフレッシュの強度を抑えることができます。
ストリーミングLLMのケースでは、チャンク単位で行うことをお勧めします。送信時に、入力ボックス以外のすべてをハードリフレッシュし、最後に送信したメッセージの末尾とストリームの先頭を上部に移動します。もちろん、これはレスポンスの長さを正確に知っていることを前提としていますが、実際にはわかりません。レスポンスが画面の途中までしか届かない場合に見苦しくならないUIパラダイムを考案し、オーバーフローして上部に移動する必要があることが明らかな場合に、事前にクリーンなリフレッシュを適切に行うことが課題です。前者の場合、部分的な表示が見苦しくならない方法を見つけ、ユーザーが次の返信を入力するために入力ボックスをクリックしたときに、チャット履歴エリアをリフレッシュして適切な位置に移動します。後者の場合、下部に残りスペースメーターを埋め込んで、この移動+リフレッシュアクションが必要なタイミングを示す(直接ラベル付けしない)ことで、ユーザーが予測しやすくなり、突然のフラッシュに驚かず、フラストレーションが軽減されます。
実際のストリーミングでは、テキストの配置が、行が画面にレンダリングされたらその配置が最終的であるように機能することを確認する必要があります(つまり、単語内ストリーミングは避けます。単語が行の残りスペースに収まるかどうかをレンダリング前に知る必要があるため)。基本的に、PDF文書のような固定レイアウトで、右下にリサイズハンドルがあるこのテキストボックスのような遡及的なリフローを避けてください。また、生成中のスクロールも無効にするか、少なくとも前後に移動するための離散的なページネーションメカニズムを作ることをお勧めします。
HNでの議論
74- dredmorbius
よく聞いてくれましたね、これは私の長年の悩みの種です:
1. 永続性はタダ。
2. ピクセルは安い。
3. 描画は高い。
4. リフレッシュは遅い。
5. 色は限りなくゼロに近い。
6. スクロールよりページネーション。
7. パンより(ページまたは部分の)フルリフレッシュ。
8. 発光型ではなく反射型。
9. アニメーションは最小限に。
10. シェードグラデーション(画像)より線画かハーフトーン。
<https://news.ycombinator.com/item?id=31396797>
このリストは何度か繰り返し(時には改訂も)述べています。以下を参照:
「WebとアプリケーションのためのE-Inkデザイン原則」
<https://diaspora.glasswings.com/posts/638a8d10e041013afba844...>
これが上記リストの出典で、各選択肢についてもう少し説明と根拠が書かれています。自分でUI/UX開発ガイドラインを見つけられなかった後に書いたもので、いくつか好意的な反応ももらっています。
そしてHNでは、私による「pixels are cheap」を検索してみてください:<https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu...>(このコメントを含め約15件の結果があります)。
- freeone3000
私はコンピュータのガイドラインよりも、印刷のユーザビリティと可読性のガイドラインに焦点を当てるべきだと思います。5Hzのe-inkは、遅いコンピュータというより動く新聞に近いです。
https://www.mediapoint.com.au/design-tips/composition-layout... は多少役立つかもしれません。
しかし私のアドバイスは:何かがリフレッシュされることを決して当てにするな。アニメーションやトランジションは持たせるな。正しいスペースに事前に読み込んでから、埋めよ。出力用に固定の白い領域を確保し、それを黒で埋めよ。(これは逆よりもはるかにうまくいく!)
かなり長時間実行されるプロセスについては、2回目のページロードの背後に置く価値があるかもしれない。
- ronakjain90
TRMNLは最近、ePaperディスプレイ専用に作られたCSSフレームワークをオープンソース化しました[1]。オープンソースのファームウェア[2]を使って、既製のコンポーネントで手早く良いソリューションをハックできます。
開示:私はTRMNLで働いています。
- philosopherNoob
アイデアを思いつくままに。私はe-ink機器は使っていませんが、パーソナルリーダーが市場に出たばかりの頃に触ったことがあります。
コンピュータでキーボードを使って任意のテキストをスクロールするとき、Spacebar、PageUp、PageDownを押すと、読んでいる内容との連続性を失うので、たいてい少しイライラします。(おそらく一瞬の60Hzのぼやけが悪化させる?)それは、前回どこまで読んだかを特定するのが難しいからだと思います。
スクロール専用のボタンがあるなら、調整可能な距離を検討してください。例:画面高さの100%下、画面幅の95%下(前のページの細片を残す)、または画面幅の80%下(前のページのかなりの部分を残す)。
タッチディスプレイを扱っているなら、長押ししてドラッグしてスクロールする機能が使えるかもしれません?押している間はインジケータを出さず、ユーザーが指を離したときにだけ画面をリフレッシュする。(使用中であるというフィードバックを一切提供しないのは確かに理想的ではありません。しかし、その仕組みを理解しているユーザーには役立つかもしれません。昔のオペレーティングシステムのように、デバイス内でのトレーニングデモンストレーションが必要でしょう。)
スクロール専用のアンドゥボタンも?誤入力して元の位置に戻したいときに。デスクトップやスマホではすぐ直せるのに、祖母がそういうことでイライラしているのを見たことがあります。
- FabCH
私はeInkをメインデバイスとして使っていて、tmuxにsshしてvimでコードを書くなど、何でもeInkでやっています。
UIはすべてRustとRatatuiで作っています。とてもうまく機能します。
なのでWebなら、次のように翻訳できると思います:
0) アニメーション禁止。フレームレートは0.3fps程度。アニメーションさせたら誰かの目を突いてしまうかもしれません。
1) スクロール禁止。ページネーションのみ。
2) ユーザーの入力コントロール/カーソル/選択位置を示すには、実際に追加された視覚要素を使うこと。色やフォントの太さなどに頼らない。アスタリスクやUnicodeの矢印などを置く。
3) 直接的なアクションコントロール。ボタンは何かを実行すべき。ドロップダウンを開いてメニューを開いて何かをするボタンはやめてほしい。
4) 画面全体を使う!ピクセルをオン/オフに保つコストはゼロ。変わることだけがコスト。だから空白は画面領域を犠牲にして、より頻繁な変更を強いているだけ。