インタラクションデザインで決める5項目|押した後を設計する

「押してから結果が出るまで、どのくらいなら待たせてよいのか」。この問いには、ずいぶん前から同じ答えが置かれています。ユーザビリティの研究者が1993年に整理した目安は3つで、0.1秒・1秒・10秒。0.1秒はシステムが即座に反応していると感じられる限界、1秒は考えていたことが途切れずにいられる限界、10秒はそのやりとりに注意を向け続けられる限界だとされています。しかも本人は、応答時間についての基本的な助言は当時から30年ほど同じだと書き、根拠として1968年の研究を挙げています。ところが実務で詰まるのは、この数字そのものではありません。「送信を押しても何も変わらないので、3回押してしまった」「エラーで戻ったら、入力した内容が全部消えていた」。——画面の制作を発注する側からは、この2つが毎回ちがう言い方で届きます。インタラクションデザインは、画面に動きを付ける作業ではありません。本当は、操作したあとに何が返るのかを、返ってこないときまで含めて先に決めておく作業です。この記事では、押した後に決める5項目を軸に、待ち時間の見せ方、二重送信が起きる仕組み、生成AIに任せてよい範囲までを、公開されている基準にあたって整理します。
カメ先生インタラクションデザインというと、ボタンがふわっと動くとか、画面がなめらかに切り替わるとか、見た目の演出のことだと思われがちなんだ。でも実際に基準を読むと、決めているのは演出ではなくて、いま何が起きているかを知らせることと、間違えたときに戻れるようにすること。この2つがほとんどを占めているんだよ。
カメ子動きを付けることではなくて、状態を伝えることが本体だ、ということですか。
カメ先生そうだね。しかも伝える相手には、音を切っている人も、色の差が見えにくい人も、画面を目で追っていない人もいる。だから合図を1つの手段に載せると、必ず届かない人が出る。国際基準が、色だけで情報を伝えてはいけないと決めているのも、同じ理由からなんだ。
カメ子速さや見栄えを整える話だと思っていましたが、伝わり方をどう確保するかの話なのですね。手段が1つだと、そこから漏れる人が出てしまうと。
- 待たせてよい時間には公表された目安がある。0.1秒で即座に反応していると感じ、1秒までは思考が途切れず、10秒を超えると注意が離れる。境目をまたぐたびに見せ方を切り替える
- 決めるのは5項目。押した合図、待ちの見せ方、終わりの伝え方、失敗からの戻し方、取り消しと確認。試作で抜けるのは待ちと失敗の2つに偏る
- 取り返しのつかない操作について、国際基準は取り消し・検査・確認のいずれか1つを求めている。後から取り消せるなら、確認画面は必須ではない
コンテンツ制作にAIを活かす第一歩、まずは導入から始めませんか?
デボノはアカウント開設・初期設定など「そもそものAI導入」から社内定着まで伴走支援。マーケティング活用など一歩進んだご相談にも対応します。
待たせてよい時間には、30年変わっていない目安がある
先に数字から確認します。ユーザビリティの研究者が示した限界値は、用途によって前後するものの、おおよそ0.1秒・1秒・10秒に置かれています。0.1秒は、システムが即座に反応していると利用者が感じられる限界です。ここを超えると、操作した感覚と画面の変化が少しずつ切り離されていきます。1秒は、待たされたことに気づきはするものの、考えていたことが途切れずに続く限界。10秒は、そのやりとりに注意を向け続けられる限界で、これを超えると人は別のことを考え始めます。
目安には続きがあります。0.1秒から1秒のあいだは、特別な合図はふつう要りません。ただし利用者は、データを直接操作しているという感覚を失う、と書かれています。1秒を超える遅れについては、機械が処理していることを利用者に示すべきだとされ、その例としてカーソルの形を変えることが挙げられています。10秒より遅いものには、進み具合を数値で示す表示に加えて、操作を中断する手段をはっきり示しておくことが求められます。
注意したいのは、これが速度の目標ではないことです。ここでは表示を速くする手立ては扱いません。扱うのは、同じ待ち時間でも、境目をまたぐたびに見せ方を切り替えるという決め方のほうです。3秒かかる処理を1秒に縮めるのは技術の仕事ですが、3秒かかると分かっている処理に何を出すかは設計の仕事で、こちらは明日から決められます。しかもこの助言は1993年の時点ですでに30年ほど変わっていないと書かれ、根拠は1968年の研究にさかのぼります。流行り廃りの外にある数字だと考えて差し支えありません。
反応がないのは、遅いことではなく合図がないこと
同じ10秒でも、何も出ない10秒と、進み具合が動いている10秒では、受け取られ方がまったく違います。ユーザビリティの調査機関が2014年に公開した解説には、進行中の表示に関する実験が紹介されています。動いている進行バーを見た人は満足度が高く、何も表示されなかった人に比べて平均して3倍長く待つ意思を示したという結果です。同じ解説は、進行中の表示が時間の感じ方そのものを縮めるとも書いています。利用者は表示のほうにも意識を割くため、待つこと自体に向ける注意が減るからだ、という説明です。
出し分けの目安も具体的です。進行中の表示は、およそ1秒を超える操作に対して使う。1秒未満の操作に出すと、助けるどころか気を散らします。ぐるぐる回る形の表示は、2秒から10秒のあいだの操作に限って使う。10秒以上かかる処理には、進み具合を数値で示す表示を使う。前者は動いていることしか伝えられませんが、後者はどこまで進んだかと、あとどれだけ残っているかを伝えられるからです。
ここで見落とされがちなのが、その表示が目で見ている人にしか届いていないという点です。ウェブアクセシビリティの国際基準2.2版には、状態を知らせるメッセージについての達成基準があり、等級はAAです。原文は、状態メッセージが役割または動的領域の属性によってプログラム的に判別できることを求めています。画面の隅に小さく出しただけでは、この基準を満たしません。読み上げで使っている人に、焦点を移さずに伝わる形になっているかどうかが問われます。
決める5項目を、先に1枚にまとめておく
ここまでを踏まえると、押した後について決めるべきことは5つに整理できます。押したことが分かる合図、待っているあいだの見せ方、終わったことの伝え方、失敗したときの戻し方、そして取り消しと確認です。この5つは、どれか1つでも空欄のままだと実装の段階で埋められます。埋めるのは開発者ですが、決めたのは誰でもないので、後から直したいときに根拠がありません。
| 決める項目 | 決めておくこと | 決めないと起きること |
|---|---|---|
| 1 押した合図 | 押した瞬間に何が変わるか。色以外の何で示すか | 押せたのか分からず、同じ操作を繰り返される |
| 2 待ちの見せ方 | 何秒から表示を出すか。ぐるぐるか、進み具合か | 無反応に見えて離脱する。中断もできない |
| 3 終わりの伝え方 | 成功をどこに出すか。いつ消えるか。読み上げに届くか | 成功したか分からず、同じ手続きをやり直される |
| 4 失敗の戻し方 | 入力をどこまで残すか。何が悪いかを文章で示すか | 入力が全部消え、二度と同じ操作をされない |
| 5 取り消しと確認 | 先に確認を出すか、後から取り消せるようにするか | 取り返しのつかない操作が、一度の押下で通る |
5項目のうち、実際の試作で抜けているのはほぼ2番と4番です。試作は成功した後の画面から作られるため、通信が遅いときの画面と、失敗したときの画面が存在しないまま実装に進みます。レビューで「読み込み中はどう見えますか」「通信に失敗したらどうなりますか」と2つ聞くだけで、この抜けはその場で見つかります。
1枚にまとめる価値は、決めごとを画面ごとにばらけさせないところにあります。同じ製品の中で、ある操作は押すと見た目が変わり、別の操作は何も変わらない、という状態は設計の失敗というより、決めごとが1か所に無かった結果です。以降で、この5項目を1つずつ、公開されている基準に照らして具体化していきます。
項目1:押したことが分かる合図を、押した瞬間に返す
1つ目は、押したこと自体の合図です。ここに使える時間は0.1秒しかありません。押した瞬間に画面のどこかが変わっていなければ、利用者は押せていないと判断します。その時点で判断の材料になるのは、押した指の下で何かが変わったかどうかだけです。処理が始まったかどうかは、まだ分かりません。
ユーザビリティの10原則の1番目が、この話をしています。1990年に作られ1994年に整えられ、内容が変わらないまま解説の見直しが2024年1月まで続いている経験則です。原文は、設計は常に利用者に何が起きているかを知らせるべきであり、それは適切な時間内の適切なフィードバックによる、と述べています。付記された助言はさらに踏み込んでいて、利用者に影響が及ぶ操作を、知らせずに実行してはならない、と書かれています。
実務では、押した合図を1つの手段に頼らないことが要点になります。国際基準の等級Aには、色を、情報を伝える手段、操作を示す手段、反応を促す手段、視覚的要素を区別する手段として、唯一の視覚的な手段にしてはならない、という達成基準があります。押したときに色が濃くなるだけの設計は、色の差が見えにくい人にとって何も起きていないのと同じです。形が沈む、枠が付く、文言が変わる、といった色以外の変化を必ず1つ足す。二度押しを防ぐために押した直後から操作を受け付けなくするなら、受け付けていないことも見た目で分かるようにします。
項目2:待っているあいだを、1秒と10秒で作り分ける
2つ目は待ちの見せ方です。境目は2か所しかないので、決めること自体は難しくありません。1秒までは何も出さない。1秒から10秒はぐるぐる回る表示。10秒を超えたら進み具合の表示と中断の手段。この3段だけです。境目を細かく刻む必要はなく、むしろ刻むほど実装でばらつきます。
| 待ちの長さ | 出すもの | 同時に決めておくこと |
|---|---|---|
| 0.1秒まで | 何も出さない。結果をそのまま表示する | 押した合図だけは0.1秒以内に返す |
| 0.1秒から1秒 | 原則として特別な合図は要らない | 直接操作している感覚は薄れる前提で文言を書く |
| 1秒から10秒 | 処理中であることが分かる表示 | 同じ操作を受け付けないようにし、その状態も見せる |
| 10秒を超える | 進み具合を数値で示す表示 | 中断する手段を置く。読み上げにも届かせる |
10秒を超えるものについては、進み具合の表示だけでなく、中断できる道をはっきり示しておくのが元の助言です。ここが抜けると、利用者は待つか、画面を閉じるかの二択になります。閉じられた場合、処理が途中まで進んでいるのかどうかが分からないまま残るので、失敗の扱いが一気に難しくなります。中断は親切のためではなく、後始末を軽くするための仕掛けです。
もう1つ、10秒を大きく超える処理には別の選択肢があります。画面の前で待たせずに、終わったら知らせる形に変えるという決め方です。この場合に決めるのは秒数ではなく、受け付けたことを伝える文言と、どこに結果が出るかの2つになります。どちらを選ぶかは、利用者がその場を離れてよい処理かどうかで決まります。離れてよいなら待たせない、離れられないなら進み具合を見せる、という切り分けです。
項目3:終わったことを、どこに出して、いつ消すか
3つ目は成功の伝え方です。決めるのは出す場所と消える条件の2つ。場所は、操作した箇所の近くが原則です。画面の反対側に小さく出ても、押した人の目はそこにありません。押した箇所の近くで、押す前と後の違いが見える形にします。
消える条件のほうが難しく、事故もこちらで起きます。数秒で自動的に消える表示は、読むのが遅い人、目を離していた人、読み上げで聞いている人には届かないことがあります。国際基準の状態メッセージの基準が等級AAで求めているのは、焦点を動かさずに、役割や動的領域の属性で状態が判別できることでした。見た目だけ整えても、この条件は満たされません。消えたら二度と確認できない情報を、自動で消える表示に載せない、という線引きが要ります。
自動的に消える表示は、内容の側が時間制限を設けている状態でもあります。国際基準の等級Aには、内容が設定した時間制限について、解除できるか、調整できるか、延長できるか、あるいは実時間の行事・不可欠・20時間超のいずれかの例外に当たることを求める達成基準があります。受付番号や控えのように後から必要になる情報は、消える表示ではなく残る場所に置くのが安全です。消える表示は、操作が通ったことの合図に限ります。
項目4:失敗したときに、どこまで戻すか
4つ目は失敗です。ここで決めることは3つあります。入力をどこまで残すか、何が起きたかをどう伝えるか、次に何をすればよいかをどこに書くか。3つとも決めていないと、失敗した瞬間に真っ白な画面に戻る、という最悪の形になります。
伝え方には基準があります。国際基準の等級Aには、入力の誤りが自動的に検出された場合、誤っている箇所を特定し、その誤りを文章で利用者に説明することを求める達成基準があります。等級AAには、訂正の候補が分かるなら提案を示すことを求める基準が続きます。ユーザビリティの10原則の9番目も同じ方向で、エラーの表示は、符号ではなく平易な言葉で、問題を正確に指し示し、解決策を建設的に示すべきだと述べています。
入力の保持は、基準というより実装の判断ですが、決めておかないとまず消えます。決め方は単純で、利用者が打ち込んだものは、失敗しても消さない。ここで言う失敗には、通信の失敗、こちら側の不具合、権限切れが含まれます。加えて、やり直しの導線を失敗の表示と同じ場所に置きます。戻るために画面を1つ前に戻す操作を要求すると、その時点で入力は失われます。同じ位置でもう一度送れる形にしておくのが、いちばん短い戻し方です。
項目5:先に確認を出すか、後から取り消せるようにするか
5つ目は、取り返しのつかない操作の扱いです。国際基準は、法的な約束や金銭の取引を生じさせる場合、利用者が管理するデータを変更または削除する場合、試験の解答を送信する場合について、等級AAで3つのうち少なくとも1つを求めています。送信を取り消せること、入力の誤りを検査して訂正の機会を与えること、送信前に内容を確認して訂正できる仕組みがあることの3つです。
つまり、確認画面を必ず挟めという要求ではありません。後から取り消せるなら、先に確認を出さなくてもよいという選択肢が、基準の側に用意されています。ユーザビリティの10原則の3番目も、利用者は操作を誤るものであり、望まない操作から抜け出すための、はっきり示された非常口が必要だと述べ、取り消しとやり直しへの対応を助言に挙げています。5番目の原則は、誤りが起きやすい条件を取り除くか、実行前に確認の選択肢を示すか、のどちらかだとしています。
実務での決め方はこうなります。取り消せる操作には確認を出さない。取り消せない操作にだけ確認を出す。確認を出すと決めたら、その文面には何が起きるかを具体的に書きます。本当によろしいですか、という文面は、何が起きるかを説明していないので読まずに押されます。消す対象の名前と件数を出し、押した後にどうなるかまで書けば、確認は形式ではなく判断の材料になります。
反応が返らないと、人は同じ操作を繰り返す
押しても何も変わらない画面の前で、人は必ずもう一度押します。行儀の問題ではなく、押せたかどうかを判断する材料が、画面の変化しかないからです。1回目の押下が受け付けられていた場合、2回目と3回目は同じ処理をもう一度依頼することになります。申し込みが3件登録される、同じ金額が3回引かれる、といった事故はこの形で起きます。
起きる順番を分解すると、防ぎどころが見えます。押す、合図が返らない、押せていないと判断する、もう一度押す。この連鎖は2番目で切れます。押した瞬間に見た目が変わり、その直後から同じ操作を受け付けなくなっていれば、3番目の判断は生まれません。逆に、受け付けを止めただけで見た目を変えないと、利用者からは無反応と区別がつかず、連打はむしろ増えます。
- 押した瞬間に見た目を変える。色だけでなく、沈む・枠が付く・文言が変わるのいずれかを足す
- 受け付けを止めたことを、押せない見た目として出す。止めているのに押せそうに見える状態を作らない
- 1秒を超えるなら処理中の表示に切り替え、10秒を超えるなら進み具合と中断の手段を出す
- 画面側の対策だけに頼らない。同じ依頼が二重に届いた場合の扱いを、受け取る側でも決めておく
- 失敗して戻ったとき、押せる状態に戻っていることを確かめる。押せないまま固まると別の問い合わせになる
最後の2つは、画面だけでは閉じない話です。通信が途中で切れた場合、利用者の画面には失敗と見えていても、依頼のほうは届いていることがあります。同じ依頼が二重に届いたときにどちらを採用するかは、画面の外で決めておく必要があります。この決めごとが無いまま画面側の連打防止だけを足すと、通信が不安定な環境で二重登録が残り続けます。
合図は、必ず2つ以上の手段で出す
合図の手段は、視覚、聴覚、触覚の3つに分かれます。どれか1つに頼った設計は、必ず届かない人を生みます。音を切っている人、通知の振動を止めている人、色の差が見えにくい人、画面を目で追っていない人が、それぞれ別の理由で取りこぼされます。
基準の側でも、単一の手段は否定されています。等級Aの達成基準は、色を、情報を伝えたり、操作を示したり、反応を促したり、視覚的要素を区別したりするための唯一の視覚的手段として使ってはならない、としています。等級AAの状態メッセージの基準は、状態の変化が役割や動的領域の属性で判別できることを求めており、こちらは見た目以外の経路を確保しろという要求です。2つを合わせると、色以外の視覚的な変化と、読み上げに届く経路の両方が要る、という結論になります。
決め方を1行にすると、同じ出来事を、色以外の見た目と、文字と、読み上げに届く形の3つで出す。成功なら、印が付き、文言が変わり、状態メッセージとして通知される。失敗なら、該当箇所が示され、何が悪いかが文章で書かれ、同じ内容が読み上げにも届く。音や振動は、この3つの上に足すもので、代わりにはなりません。会議中や移動中に最初に切られる手段だからです。
動きの速さは、好みではなく目的で決める
動きに何秒かけるかは、感覚で決められがちなところです。判断の軸を1つ置くとすれば、その動きが何のためにあるかです。注意を引くための動きと、位置の関係を伝えるための動きでは、必要な長さが違います。前者は短く強く、後者は目で追える速さで、というのが基本の分け方になります。
上限のほうには基準があります。国際基準の等級Aには、1秒間に3回を超えて明滅するものを置いてはならない、または一般的な明滅と赤色の明滅の閾値を下回ること、という達成基準があります。もう1つ、自動的に始まり、5秒を超えて続き、他の内容と並んで表示される動き・明滅・スクロールについては、一時停止・停止・非表示のいずれかができる仕組みを用意することが等級Aで求められています。その動きが活動に不可欠な場合だけが除かれます。
実務では、この2つを守ったうえで、動きを外しても意味が通るかを確かめます。動きでしか状態の変化を伝えていない画面は、動きを止めた瞬間に何も伝わらなくなります。動きは、すでに伝わっている変化を分かりやすくする補助であって、変化そのものではない。この順番を守れば、長さの議論が好みの応酬になりません。何秒がちょうどよいかを話す前に、動きを止めた状態で成立しているかを見ます。
時間切れを、こちらの都合だけで決めない
入力の途中で時間切れになり、書いたものが消える。これは待ち時間の裏側にある問題です。国際基準の等級Aは、内容の側が設けた時間制限について、次のいずれかが成り立つことを求めています。制限に遭遇する前に解除できること。制限に遭遇する前に、既定値の少なくとも10倍という広い範囲で調整できること。時間切れの前に警告され、簡単な操作で延長するための時間が少なくとも20秒与えられ、しかも延長を少なくとも10回行えること。
例外も3つ書かれています。実時間の行事に必要な制限である場合、制限が不可欠で延長すると活動そのものが成り立たなくなる場合、そして制限が20時間より長い場合です。もう1段階上の等級には別の基準があり、利用者が操作しない状態が続いてデータを失う可能性があるとき、その継続時間について警告することを求めています。ただし、データが20時間を超えて保存される場合はその限りではないとされています。
この2つを読み替えると、実装の選択肢は2つに絞られます。時間切れの前に警告して延長させるか、時間切れになっても入力を保存しておくかです。前者を選ぶなら、警告から少なくとも20秒という数字がそのまま要件になります。後者を選ぶなら、20時間という数字が判断の目安になります。黙って切って黙って捨てる、という選択肢は基準の側に存在しません。
触っただけで結果が変わる設計にしない
押した後だけでなく、押す前の挙動にも決めごとがあります。国際基準の等級Aは、利用者が操作する部品の設定を変えただけで、予期しない文脈の変化が自動的に起きてはならないとしています。選択肢を選んだ瞬間に画面が切り替わる、項目を選んだ瞬間に送信される、といった設計がこれに当たります。
この基準が守る場面は具体的です。選択肢を上から順に確かめていく人は、途中の選択肢に一度触れます。触れた瞬間に送信されると、確かめるという行為自体ができなくなります。決めるべきなのは、変更を確定させる操作を別に置くかどうかです。置かないと決めるなら、変更が即座に反映されることを、操作する前に文言で伝えておく必要があります。
重ねて表示される補助的な内容にも、等級AAの基準があります。指を乗せる、あるいは焦点を当てることで追加の内容が出る場合、その内容は、消せること、その上に指を移せること、意図せず消えないことの3つを満たす必要があります。説明の吹き出しが、読もうとして近づいた瞬間に消えるという現象は、この3つ目に反しています。押した後の設計と同じで、出す条件だけを決めて消える条件を決めていないと起きる事故です。
生成AIに画面を作らせると、待ちと失敗の状態が抜ける
画面の案を生成AIに作らせると、多くの場合は成功した後の画面が返ってきます。指示に書かれていない状態は、返ってこないと考えたほうが正確です。押した瞬間の見た目、通信中の見た目、失敗した後の見た目、取り消した後の見た目は、こちらが列挙しない限り出てきません。見た目が整っているぶん、抜けていることに気づきにくいのが厄介なところです。
手当ては単純で、先に返ってこないときを書いて渡すことです。作らせる前に、その操作で起こりうる状態を並べます。押した直後、1秒以上かかっているとき、10秒以上かかっているとき、成功したとき、入力の誤りで失敗したとき、通信で失敗したとき、取り消したとき。この7つを箇条書きで渡すだけで、返ってくるものの中身が変わります。
- 起こりうる7つの状態を列挙して渡し、それぞれの見た目と文言を出させる
- 書かせた文言を全部抜き出させ、何が起きたかと次に何をすべきかの2つが書かれていないものを挙げさせる
- 待ち時間の表示について、何秒から出す想定かを明記させ、根拠にした目安と一緒に書かせる
- 失敗の表示について、入力が残るかどうかと、やり直しの導線をどこに置いたかを説明させる
- 色以外の変化で状態を区別している箇所を挙げさせ、色だけで区別している箇所を洗い出させる
出てきたものは、そのまま使わずに状態の抜けを数える道具として使います。7つの状態のうち、いくつ埋まったか。埋まっていない状態は、こちらが決めるべきところが残っている印です。AIが埋めた空欄を採用するのではなく、空欄が残っていることを見つけるために使う、という順番にしておくと、決めごとが人の側に残ります。
AIに決めさせない範囲を、先に線引きする
任せてよい範囲には線があります。線を引く基準は単純で、間違えたときに誰が損をするかです。文言の候補を出す、抜けている状態を挙げる、色以外の区別があるかを確かめる。ここまでは、間違えても人が直せます。一方、どこまで待たせてよいか、どの操作に確認を挟むか、どこまで取り消しを認めるかは、間違えると利用者が損をします。
- どこまで待たせてよいかをAIに決めさせる——その場を離れてよい業務かどうかは、画面の外にある事情で決まる
- 取り消しを認める範囲をAIに決めさせる——金銭や契約が絡む操作の取り消しは、法務と経理の判断が要る
- 確認を挟むかどうかをAIに決めさせる——国際基準は取り消し・検査・確認の3択を認めており、どれを選ぶかは事業側の判断
- AIが出した秒数をそのまま採用する——出どころを確かめずに書かれた数字は、後から根拠を説明できない
- 失敗したときに入力を残すかどうかをAIに決めさせる——残す範囲は個人情報の取り扱い方針と結びついている
運用に落とすなら3つです。第一に、数字を書かせたら必ず出どころも書かせる。1秒、10秒、20秒、20時間といった数字は、どの基準のどの項目から来たのかまで書けるはずのものです。書けない数字は採用しません。第二に、判定させずに候補を出させる。この画面は良いか悪いかではなく、5項目のうちどれが空欄かを挙げさせるところまでにします。
第三に、人が必ず決める項目を先に名指ししておく。待たせてよい上限、確認を挟む操作の一覧、取り消しを認める範囲と期限。この3つは画面の外の事情で決まるので、AIには材料そのものが渡っていません。渡っていない材料で出された答えは、もっともらしく見えるほど危険です。線引きを先に書いておけば、出力を見てから迷うことがなくなります。
決めたことを、どう残して制作会社に渡すか
決めた5項目は、口頭では渡りません。渡すのは画面の絵ではなく、状態の一覧と、その状態でどう見えるかの対応表です。絵だけを渡すと、絵になっていない状態は実装者の判断で埋まります。埋め方が画面ごとに違えば、後から統一するほうが高くつきます。
その操作で起こりうる状態を並べます。押した直後、1秒以上かかっているとき、10秒以上かかっているとき、成功、入力の誤り、通信の失敗、取り消した後。ここは絵を描く前の作業です。
状態の名前、どこがどう変わるか、出す文言、読み上げに届く形かどうか。この4列の表にすると、決めていないところが空欄として見えます。
1秒を超えたら処理中の表示、10秒を超えたら進み具合と中断、という切り替えの根拠を1行で書きます。根拠が書いてあれば、後から同じ議論をやり直さずに済みます。
取り消せる操作、取り消せない操作、取り消せる期限の3つを決めます。取り消せない操作にだけ確認を挟む、という原則もここに書きます。
同じ依頼が二重に届いた場合にどちらを採用するか、受け取る側の扱いを決めます。画面側の連打防止だけでは、通信の切断に対応できません。
納品時に見るのは、絵と実装が合っているかではなく、状態の一覧が全部再現できるかどうかです。表がそのまま確認項目になります。
この形にしておく利点は、言った言わないが起きないことです。処理中の表示が無い、という指摘は、表に処理中の行があれば欠陥の指摘になり、表が無ければ追加の要望になります。同じ内容でも、費用の負担先が変わります。状態の一覧は、品質の道具であると同時に、費用の線引きの道具です。
運用が始まった後も、この表は残します。新しい操作を足すときは、同じ7つの状態を埋めるところから始めれば、決め方が画面ごとにばらけません。表を1枚維持するほうが、そのつど議論をやり直すより安いという判断です。
まとめ
押した後に何が返るかは、感覚で決める領域ではありません。待たせてよい時間には、1993年に整理され、その時点ですでに30年ほど変わっていないと書かれた目安があります。0.1秒で即座に反応していると感じられ、1秒までは考えていたことが途切れず、10秒を超えると注意が離れる。この3つの境目を、見せ方を切り替える合図として使うのが出発点です。
決めるのは5項目です。押したことが分かる合図、待っているあいだの見せ方、終わったことの伝え方、失敗したときの戻し方、取り消しと確認。試作で抜けるのは、待ちと失敗の2つに偏ります。読み込み中はどう見えるか、通信に失敗したらどうなるか、の2問で見つかります。
基準の側にある数字も押さえておきます。進行中の表示はおよそ1秒を超える操作から、ぐるぐる回る形は2秒から10秒、進み具合を数値で示す形は10秒以上。時間切れの警告からは少なくとも20秒、延長は少なくとも10回、制限が20時間を超えるなら例外。明滅は1秒間に3回まで、自動的に始まり5秒を超える動きには停止の手段。取り返しのつかない操作には、取り消し・検査・確認のいずれか1つが等級AAで求められています。
AIには、状態の列挙と文言の点検を渡します。数字を書かせたら出どころも書かせ、判定はさせません。待たせてよい上限、確認を挟む操作、取り消しを認める範囲の3つは、画面の外の事情で決まるので人が決めます。渡すのは絵ではなく、状態の一覧と対応表。押した後を設計するというのは、うまくいったときの画面ではなく、うまくいかなかったときの画面を先に決めておくことです。
※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。
コンテンツ制作にAIを活かす第一歩、まずは導入から始めませんか?
デボノはアカウント開設・初期設定など「そもそものAI導入」から社内定着まで伴走支援。マーケティング活用など一歩進んだご相談にも対応します。
