世界を動かす技術を、日本語で。

ボタンであれば、あなたには一つの仕事がある

概要

  • 古いデスクトップ例 の提示が時代遅れに見える懸念
  • 回転操作UI の現代スマホでの比較
  • アクセシビリティ の重要性と「状況的障害」の概念
  • カジュアル利用 でも発生するパワーユーザー的ニーズ
  • UI設計の原則 として「アニメーション終了待ちを強制しない」必要性

スマホ写真編集における画像回転操作のUX課題

  • iPhoneNothing Phone/Android での画像回転UIの比較
    • iPhone:タップをバッファし、アニメーション完了後に順次反映
    • Nothing Phone/Android:アニメーション中の追加タップは無視、ハプティクスと音でタップ受付済みを通知
  • 90度回転を8回連続タップ した場合
    • iPhone:2回転して元の位置に戻る(期待通りの挙動)
    • Nothing Phone/Android:アニメーション中のタップは無効、回転が途中で止まる可能性

なぜこの違いが重要か

  • 状況的障害 のフレームワーク
    • 障害は一部の人だけのものではなく、誰もが一時的に直面する可能性
    • アクセシビリティは全ユーザーのための設計指針
  • カジュアル用途 でも発生する「パワーユーザー的状況」
    • 例:多数の書類写真を撮影・回転編集する作業
    • 連続タップによる効率的操作が求められる場面
    • アニメーション完了待ちが作業効率を大きく損なう

UI設計における考慮点

  • タップバッファリング だけが唯一の解決策ではない
    • アニメーションの 中断・加速 によるレスポンス向上も有効
  • 基本原則 :ユーザーにアニメーション終了待ちを強制しない
    • どのような状況でも 予測可能で快適な操作体験 の提供が重要
    • 「カジュアル」なUIでも 高度な期待値 に応える必要性

結論:時代や用途を超えたUIの普遍的課題

  • デスクトップ時代の課題 は現代スマホでも繰り返される
  • 全てのユーザー が一時的なパワーユーザーとなる可能性
  • アクセシビリティと操作効率 を両立するUI設計の重要性

Hackerたちの意見

簡単じゃないよね。意図してタップしたものとは別のものが、指の下に瞬時に現れることもあるから、レイアウトをレンダリングしている時は、入力を受け付けないようにしたい時もあるんだ。

じゃあ、UIと触覚フィードバックを与えなければいいじゃん。

それって、ブログの記事で言ってたこととは別の問題じゃない?UX要素が何らかの理由で動かされるのを許す人たちを責めることで簡単に解決できると思うけど。

それは別の悪いUXパターンだね。ボタンが特定の位置にすでに表示されているなら、新しいボタンがそれを置き換える前に、ユーザーに十分な警告を与えないとダメだよ。

これって例にどう関係してるの?

そうそう、Apple Mapsにはその問題があるよね。道順をタップして、ルートを読み込んでる時に交通手段を変更しようとタップすると、最初のルートを選んだと勘違いしちゃうんだ。最初のルートをリストに表示するために交通手段のパネルを上に押し上げるから。最初から最初のルートの高さを考慮しておけばいいのに、ほんとイライラするよ。

最初の比較を見て、正直言って、問題はiPhoneの例だと思った。画像の下にあるボタンとスライダーが消えて、回転ボタンを押すたびにフェードインするのは、iOSの多くのアプリで見かける挙動で、ほんとイライラする。特にスクリーンショットアプリが嫌いだな。インタラクションの前後で触れることができるUX要素があるなら、その変化の間は見えるようにしておいてほしい。iPhoneの回転中にこれらのボタンを隠すことで得られるUXのメリットって何?見た目も良くならないし、最近のAppleソフトウェアは実際のUXの向上を犠牲にして見た目を重視してる気がするけど、著者には同意するよ。このタップはアニメーションとは独立して処理されるべきだね。

ソフトウェアアプリにも、コンピュータチップの「テープアウトルール」があればいいのに。基本的に、コンピュータチップを設計する時、プログラムがデザインをレビューして、300ページくらいのルールと照らし合わせるんだ。「X金属とY金属のワイヤーはZ距離以内に近づけちゃダメ」とかね。UXにも似たようなものを作れたらいいな。確立されたUXの欠点があるものを出そうとしたらフラグを立てるようなデザインパターンの制約をたくさん作る感じ。

ユーザーがうっかりクリックしすぎたり、最初のクリックが登録されてないと思った時はどうするの?スティーブ・ジョブズが新しいmacOSでPDFがどれだけ速く表示されるかデモしてた時のことを思い出すよ。エンジニアにボタンを用意させて、PDFをスクロールさせるためにクリックしたら、うっかり何度もクリックしちゃったんだ。スティーブは「これ、二回もスクロールしちゃうかな?」って言ってたら、ちゃんとバッファリングされちゃった!彼は全部戻ってもう一度スクロールするのを待たなきゃいけなかったんだ。スティーブは、二回目に文書を移動させても、結局は前のOSのバージョンよりも速かったって観客に伝えて、なんとか体裁を保ったよ。

昔みたいにApple/Mac/Jobsのファンボーイではなくなったけど、やっぱり人間らしくてクールなものを見せたいって感じのAppleのプレゼンテーションが恋しいな。最近のAppleのプレゼンは、すごく堅苦しくて無機質で、スーツを着たロボットが聖なるスクリプトから外れるのを恐れているみたいで、感情や人間らしさを見せたらクビになるんじゃないかって感じ。話が逸れちゃったけど、ジョブズのちょっと雑なアドホックなプレゼンがどれだけ楽しかったか思い出したよ。

ボタンはボタンじゃない。みんな同じだと思いたがるけど、実際にはそうじゃないんだ。物理キーボードにはすでに3種類のボタンがあるよね:普通のボタン、修飾キー(シフトとか)、トグルキー(キャップスロック)。高リスクのアクションには特別なボタンデザインが必要なこともある。例えば、ブラックマジックシネマカメラでは、メモリーカードをフォーマットするボタンは、3秒間押し続ける必要があって、その間にカウントダウンが表示される。これによって、ユーザーは「やべ、これ間違ったメモリーカードだ!」ってキャンセルする余裕ができる。一方で、カメラをSSDのスタックをフォーマットするためだけに使うような想像上のパワーユーザーには不便になるかもしれない。どちらが一般的かを判断して決める必要があるね。

デバウンスには理由があるんだ。ボタンが2回クリックされたとき、2回実行したい場合もあれば、そうじゃない場合もある。どの状況でどちらが良いかを見極めるのは簡単じゃないよね。少なくとも、どの状況に適しているかを考慮するべきだよ。もし、あなたのUIで、あるボタンには明らかに一つの選択肢が、他のボタンには別の選択肢があって、でも一部はどちらがいいかはっきりしない場合、両方の挙動が正当化できるとしたら?それじゃあ、一貫性のないUIになっちゃうよね。これに対する良い解決策は思いつかないな。

Hacker Newsで議論の続きを見る