少し前、Denis Mishunovの記事がSmashing MagazineのWebサイトに登場し、 Habréで見つけられるコードの翻訳が掲載されました 。
この記事に続いて、イゴール・マンドリギンが書いた「 1000語未満の楽観的UI 」という別の記事があり、同じトピックに触れ、それを補足し、多数の例で説明しています。 翻訳に注意を向けます。
楽観的なUIについて簡単に説明します。 写真の楽観的なインターフェイス。
今日は楽観的なUIデザインについて話しましょう。
どのような意味で楽観的ですか?
楽観的なインターフェイスは、操作が完了するまで待機しません。 すぐに最終状態に移行し、操作の進行中に偽の情報を表示します。 言葉で言えば、これはすべてややこしく聞こえるので、最初の例を見てみましょう。 明確にするために、架空のメッセンジャーを取り、それを綿菓子と呼びます。 メッセージを送信するプロセスを提示するには、2つのアプローチがあります。
楽観的ではない(左)対楽観的(右)
そのため、楽観的なUIデザインは、アプリケーションが実際に操作を完了する(または開始する)前の最終状態を示します。
つまり、それは単なるトリックです。 なぜそれが必要なのですか?
複雑な名前の背後にある考え方は非常に単純です。 ただし、これはユーザーのエクスペリエンスに大きな影響を与える可能性があります(Appleの場合は「顧客満足」)。 まず、あたかもアプリケーションを「高速化」するかのように、アプリケーションがより速く実行されているという感覚を作り出します。 アプリケーションが猫と一緒に面白い写真をアップロードしたり、ディスカッションに皮肉なコメントを送信している間、ユーザーは別のことを行うことができます。 第二に、それはインターフェースとの相互作用を単純化し、不必要な状態と注意散漫を取り除きます。 アプリケーションはよりシンプルで手頃な価格に見えます。 はい。UIデザイナーは、より少ない画面をPixel-Perfectの状態にする必要があります。
人生の例
楽観的なインターフェイスは、インスタントメッセンジャーやソーシャルアプリケーションでよく使用されます。 iOSまたはMacOSのメッセージは、ユーザーがメッセージを送信するときにこの概念に頼ります。
Macのメッセージの即時インターフェース更新。
Instagramは同様のソリューションを使用してコメントを追加します。
Instagramに関するコメント。 右側の進行状況インジケータに注意してください。
別のプランの例を見てみましょう。AudibleアプリはiOS用のオーディオブックプレーヤーです。 録音の小さな断片がロードされるとすぐに、ユーザーはすぐにリスニングを開始でき、残りのトラックはロードされます。
本の一部が読み込まれるとすぐに、「再生準備完了」が表示されます。 最も純粋な形の楽観主義。
もう1つの例はTrelloです。ユーザーがマップを移動すると、すぐに移動しますが、インターフェイスはサーバーが作業を完了するまで待機しません。
楽観的なUIはTrelloの流さの鍵です
楽観的なインターフェイスはTrelloの便利さの重要な機能です
ユーザーが写真を投稿に添付するときに、メディアは同様の技術を使用します。
確かに、そのようなチップは製品に適用されます。
進捗状況
最終状態をすぐに表示するだけでは不十分な場合があります。 プロセスが進行中であることを繊細に伝えると、ユーザーはそれほど困惑しなくなります。 これは、エラーが発生した場合に特に重要です。 ただし、エラーメッセージは別のトピックなので、後で説明します。
もちろん、操作に時間がかかるほど表示は顕著になりますが、ユーザーがいいね! 一部のアプリケーションでは、インターフェースのすでに更新された部分の横に進行状況インジケーターが表示されます。
メッセージの横に進行状況を表示する
別の方法は、横にメッセージを送信するステータスを示す小さなアイコンまたはショートカットを追加することです。
ステータスアイコン(Facebook Messenger)
iOSのメッセージでは、ウィンドウの上部にステータスインジケーターも表示されます。 特に、猫(1つまたは複数)で面白い写真をアップロードすると、目を引きます。
iOSのメッセージアプリケーションの進行状況の表示
エラーメッセージ
そして、何かがうまくいかなかったら? エラーメッセージを設計するときは、次のことに注意してください。
1. 可視性 。 通知は、ユーザーが何らかの方法で(特にデータをダウンロードする場合に)見逃さないように、はっきりと見えるようにする必要があります。
2. 因果関係 。 ユーザーは、自分のアクションのどれがエラーを引き起こしたかを明確にする必要があります。 結局、インターフェイスは既に更新されているため、操作は完了したと認識されます。
エラーメッセージは、楽観的なインターフェイス設計者にとって最も難しいタスクです。
もちろん、最も簡単な解決策は、古き良きブロックエラーメッセージ(GOLEM)です。
GOLEMのアクション!
それは最初の点でうまくいきます。 画面の中央にあるダイアログウィンドウは、気付かないことは非常に困難ですが、アプリケーションとのすべての対話をほぼブロックします。 しかし、この決定は2番目のポイントに対応していません。ユーザーは、エラーを以前に実行したことと関連付けません。 ダイアログボックスが画面に完全に予期せず表示されます。
別の一般的な解決策は、送信できなかったメッセージの横にボタンまたはアイコンを表示することです。
Whatsapp、しないでください!
ユーザーがクリックすると、GOLEMダイアログを表示するか、ダイアログなしでアクションを繰り返します。
GOLEMダイアログは、エラーインジケーターをクリックすると呼び出されます(iOSのメッセージアプリケーション)
ここでは、逆に、すべてが原因と結果の関係で整然としています(ポイント2)が、残念ながら、それは十分に目立ちません。 ユーザーがすでに別の画面に切り替えているか、画面の外側にメッセージを残して通信をスクロールしている場合、アラートは表示されません。
iOSのメッセージアプリは、インジケータを追加してエラーのステータスをより強引に報告することにより、この問題を解決します。 インジケーターはアプリケーションアイコンに直接表示されるため、メッセンジャーを完全に終了してもユーザーは気づくでしょう。
メッセージは、何かがうまくいかなかったことを示唆しています
エラー状態を表示し、ユーザーを怖がらせないようにするために、操作を数回繰り返すだけで十分な場合があります。
おわりに
楽観的なUIにより、ユーザーはアプリケーションをより速く、より簡単に、より楽しく操作できます。 これは、サーバーがかなり遅い場合(および管理者が先週終了した場合)の優れた方法でもあります。 しかし同時に、楽観的なインターフェイスでの楽観主義は正当化されるべきです。
サーバーが完全に信頼できない場合(この管理者を非難)、楽観的なインターフェイスは多くの害を及ぼす可能性があります。 エラーメッセージの無限のキューはユーザーを困らせ、時間通りに通知された通知は入力されたデータの損失につながる可能性があります。
したがって、これらすべての考慮事項を考慮し、このソリューションを賢く使用してください!