804. モーダルウインドウの使いどころ 〜bitFlyer、マックデリバリー〜

[bad]

画面に小さいサブウインドウを出して、その中の操作(警告表示への了解など)を完了しない限り他の操作を受け付けなくする仕組みをモーダルウインドウ(またはモーダルダイアログ)といいます。ユーザに特定の操作に集中させる効果がありますが、使いどころを間違えると不便極まりないことになるので注意が必要です。

今回は最近見たもので2例ほど紹介してみます。

1つ目は仮想通貨取引サイトのBitFlyerの注文画面です。下はチャートや歩み値、資産状況など売買に必要なあらゆる情報が並んだいわゆるダッシュボード画面です。簡単な売買注文なだその画面から出せますが、複雑な注文は「特殊」というボタンを押してこのウインドウ上で操作します。その間、ダッシュボード画面は薄暗くなり操作できません。またこの注文画面自体、注文を完了するか右上の「×」で閉じるまで動かすことができません。
この特殊取引画面ではある取引が成立(約定)したら、次の注文を発動するなど、複数の注文を組み合わせた複雑な内容を指定します。その際、ダッシュボードの様々な情報を参考にしたいのですが、このウインドウ自体がデデーンと手前に陣取ってロックされている為、それができません。何度も行き来したり、あらかじめ紙にでも内容を書いてから開くしかないのです。Webページでユーザ操作以外で別ウインドウや別タブを開くのはセキュリティ的な観点で制約が多く、最近ではあまり推奨されません。そうした絡みもあってこうした疑似ウインドウ表現を使用するケースが多いのですが、せめてドラッグで位置を動かせたらなぁと毎回思います。

次の例はマクドナルドの出前サイト、マックデリバリーです。先日仕事で遅くなったので晩ご飯にと初注文しました。少しして最新の進捗状況を確認したいとサイトを再訪したところ、まず表示されたのがこちら。

閉店間際で、もうすぐ翌日の配達のみ受付になるから急げよという表示です。あと2分しかないのにむしろ邪魔です(笑)。そして、さっき注文したばかりだとサイト側が把握していることは表示から明らかです。次の注文を促したいというサイト側の気持ちもわかりますが、ここはどうせ出すなら進捗状況でしょう。

そして渋々「OK」を押して閉じ、改めて右側の「注文を始める」ボタンの下にある「ご注文状況の確認」をクリックするとこうです。

注文番号ですって?もちろんメールとかで届いてるんでしょうけど、それをせずとも、左下の「ご注文履歴」に出てるじゃないですか!でもこのウインドウがモーダルなので選択してコピーできない(地団駄!)。だったら最初からこんなウインドウ(入り口)自体なくして、ご注文履歴一覧からリンクをクリックさせた方がマシなんじゃないでしょうか(ユーザは一般に画面を左上から精査していくので、こっちのイケてない「ご注文状況の確認」ボタンの方が先に目についてしまうと考えられます/実際しました)。せめてここプルダウンメニューで注文日付などから選べるようにしてほしいものです。

などなど。最近モーダルダイアログで立て続きに不便な思いをしたのでまとめてみました。

803. どちらかわからないチェックボックスに意味なし 〜佐川急便の不在票〜

[bad]

運輸ネタが続きます。

写真は先日頼んだ通販が佐川急便で届いたものの留守だった時の不在票です。思わず「どっちだよ!」と声が出そうになりました。さて、この二箇所のチェックはそれぞれどのボックスに対してつけたものだと思いますか?


チェックボックスが隣接しすぎていて、社会問題になるほど忙しい配達員さんがちょっと乱暴に書き込んだらどっちがわからなくなるような伝票のデザインに問題がある気がします。

ちなみに正解は、「宅配ボックスには入っておらず持ち帰られた。」「元払いだった」です。」。厳密には上のチェックは「配達にお伺いしましたがご不在でした」に対するものなわけですね。フォーマットでいえば2つ目と3つ目がペアになっていて、宅配BOXに入れてないということで運用ルール的には3つ目にチェックがついているべきなのかも知れません。意味的な関係性でいえば、1つ目(配達)と2つ目(集荷)がペアで、1つ目の下位項目として2つ目(宅配BOXに入れた)と3つ目(持ち帰った)なわけなので、2つ目、3つ目は少し右にオフセットするとか小さく書くとかがデザインとしては理に適ってるんでしょうが、スペースで断念したんでしょうかね。

ついでに競合のヤマト運輸の不在票も見てみましょう。


お?配達と集荷が横並びでペアになっていますね?全体にチェックボックスも大きいです。しかしやはり宅配ロッカーに入れたのか持ち戻ったかは未記入です。ケースとしてほとんどは持ち戻りでしょうからいちいち記入しないんでしょうかね。受け取る側の視点でいうと、配達か集荷かより、宅配ロッカーに入ってるのかどうかの方が重要なんですけどね…

802. たくさんありすぎるバーコード 〜宅配便のコンビニ受け取りで〜

[bad]

先日Amazonで注文した商品の受け取りを配送後に用事ができたので、最寄りのセブンイレブン店頭受け取りに変更した時の出来事です。

受け取り番号を伝えると店員さんが棚から荷物を出して来てレジを操作しはじめました。たぶん確認かなにかの為、荷物についたバーコードをスキャンするよう画面に出ていたのでしょう。しかしバーコードスキャナをバーコードに当てると「ピーーーーーーッ!」とエラーのような音がなります。店員さんはキーボードをピッピッピッと数回操作し、今度は別のバーコードに当ててみます。

「ピーーーーーーッ!」

またエラーです。なんとこの箱には4箇所もバーコードがついています。それどころか、右の黄色い伝票ポケットに入っていた送り状らしき伝票にもさらに3箇所位バーコードがついています。

実際の画面を見ていないので具体的にどう指示文が書かれていたのかわかりませんが、少なくともバーコード側にはラベルや番号のようなものは見当たりません。たくさんのアルバイトさんが入れ替わり担当するレジ作業のデザインとしては、もう少し曖昧さを排除したオペレーション設計が必要なんじゃないでしょうか。

結局、6回くらいまであちこちのバーコードを試して「ピーーーーーーッ!」と甲高く鳴らした挙げ句、その店員さんは黙ってそっと荷物をこちらに差し出してきました(笑)。受け取り連絡のメールに持参しろと書いてあったハンコすら使っていません。σ(^^)は品物が受け取れれば別に構いませんが、あの店員さん、あとで怒られてないといいな…

P.S.

二日後くらいに気になってまた別の荷物を同じ店舗で受け取り指定して取りにいったんですが、今度はオバチャンの店員さんでちょっとよそ見をしている隙に電光石火でピッとして処理されちゃいました。おかげで正解がどこだったかわからず終いです。

801. スポンジをわしわし往復させやすい溝形状のグリルプレート

[good]

写真は以前の日記に書いた電子レンジに付属のグリル皿という付属パーツです。文字通り焼き物調理をする時にここに食材を載せ、庫内に収めて加熱します。今時は加熱性能もあがりハンバーグだったり魚の両面焼きなんての当然として、焼きそばや冷凍餃子調理なんてのまでできるので、もはやフライパン代わりに重宝しており利用頻度も高いです。

そうなると当然お手入れの方も効率が気になります。肉や魚を焼くので油がどんどん出てきてしかもそれが焼き付いたりするので汚れ方もフライパン並ですが、このグリル皿は最近のフライパンのようにテフロン加工がしてあり汚れが落ちやすいです。そしてもう一件(やっと本題)。写真のように油を流れ落とす溝が並行線状に縞模様の様に入っています。焼き肉プレートには放射状になっているものもあると思いますが、それに比べるとこうした並行線模様はスポンジを動かす手を1方向に往復させるだけでいいのでかなり楽に洗えます。溝の太さも指先が入りそうなくらい広めなのも良いです(中心部の細い部分は深さが浅くなっています)。

調理性能だけでなくお手入れについてもよく配慮されているなと感心しました。

P.S.

別途、独立の日記にしようか迷いましたがついでに×な点も。

このプレートとそれを載せるレール部分はとても滑りがよく、焼き加減を確認しようとちょっと手前に引き出すと惰性でツルーンと開いたドアの上に滑り出てきてガシャーンと落としてしまうことがあります。アツアツに加熱されてるので下手に受け止めるわけにもいかず非常に焦ります。去年のモデルを安く買ったので、もしかしたら最新モデルでは改善されてるかも知れません。今度家電店でチェックしてみようと思います。

800. テナント一覧の位置とレイアウトが見やすいエレベーター

[good]

写真は晴海トリトンスクエアにあるオフィスビルのエレベーターの操作パネルです。

 

一般的にはエレベーターのドア上にあることが多いフロア別テナント一覧が、操作パネル上に縦に配置されており、同時に停止予定フロアのランプが点灯しています。目線の高さで読めるのでとても良いなと思いました。フロアの上下関係が物理的にも対応付いていて直観的です(一般的なドア上の場合は横並びで、右へいくほど上層階が多いですかね)。少し高い位置にあるので仮にすし詰めでボタンも押せない状態だったとしても、確認はできるんじゃないかと思います。

どうせなら上の方のランプもボタンになってて社名みてすぐ横を押せると直観的かも知れませんね(上の方は手が届かないかも知れませんが…)

 

« Older posts