UIが嘘をつく？ ユーザ体験における「楽観的な更新」とSPAでの作り方

こんにちは、株式会社カミナシでデザインエンジニアをしているショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果を待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更

[bebit]

処理に時間がかかりそうな場合は「300ミリ秒以内にレスポンスがない場合は、お待ちください」を表示するようにしている。常にお待ちくださいにすると0.3秒の残像が残って画面がうるさくなるので。

[bxmcr]

はてなブックマークのアプリ、これもやってないし、エラー時の処理も不十分で、通信エラー多い環境だと、かなりユーザー体験が悪い……

[kachikachi2]

逆に、本当は一瞬で終わる処理だけど一瞬すぎて分からんからちょっと待たせることもある

[ys0000]

プログレスバーよりも進んだユーザー体験。放って置いても2秒以内に完了するものじゃないとダメだろうなぁ。タイムアウトを5秒くらいにしても大丈夫な処理に実装するべきだろう。

[fuyu77]

サーバーからのレスポンスを待たずにUI更新する手法、選択肢として持っておくとUI構想の幅が広がりそうだ。

[skyfox_xxx]

楽観的な更新をしたほうが良いところとしないほうが良いところがあるが、何にしてもユーザのアクションにはすぐにリアクションを返したい。（その上で場合によっては待たせてもストレスにならない作りにするなど

[tkmkg8m]

なるほど、成功する前提でUIは更新しておいて、万が一失敗したらUIの状態を戻すと。下手にやるとバグの温床になるの確実だけど、使い勝手突き詰めると欲しくなるね。

[tonzurah2]

はてなのスターがまさしく。

[deztecjp]

一般ユーザーでしかないので、積極的に勉強する意欲がなく、たまにこうした記事に出会って言葉を知るだけで満足している。へー、こういうの、「楽観的な更新」というのか。いい言葉を覚えた。

[sc3wp06ga]

楽観的な更新でないパターンに数種類あると思ってて、1.処理完了まで一切表示変化なし、2.処理開始表示に時間かかる、3.すぐ処理開始表示されその他操作受け付けない、4.即座に処理開始表示され完了まで他のことできる

[rararoro-ryo]

信頼性が必ずしも高くなくてもやって良いUIだと思う。後でエラーを出せば。 トランザクションなどのクリティカルアクションじゃないことをベースに切り分けた方が良さそう。

[pmint]

分けなくていい。「ローディング」と「UIに反映」の外観が同じで区別できないだけ。エラー時のフィードバックは「楽観的」もそうでないのも同じ。

[rokuzeudon]

👀