楽観的なUIについて簡単に説明します。 写真の楽観的なインターフェイス

少し前、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により、ユーザーはアプリケーションをより速く、より簡単に、より楽しく操作できます。 これは、サーバーがかなり遅い場合(および管理者が先週終了した場合)の優れた方法でもあります。 しかし同時に、楽観的なインターフェイスでの楽観主義は正当化されるべきです。



サーバーが完全に信頼できない場合(この管理者を非難)、楽観的なインターフェイスは多くの害を及ぼす可能性があります。 エラーメッセージの無限のキューはユーザーを困らせ、時間通りに通知された通知は入力されたデータの損失につながる可能性があります。



したがって、これらすべての考慮事項を考慮し、このソリューションを賢く使用してください!



All Articles