Category: Web、GUI (page 1 of 22)

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

[bad]

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

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

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

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

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

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

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

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

796. 手続き誘導なのに、閉じてしまう方が目立つお知らせ 〜住信SBIネット銀行のネットバンキング〜

[good]

以前、クレジットカードを作った時に、住信SBIネット銀行の口座から引き落とされるよう手続きをした時の話です。

クレジットカード会社の書類に口座情報を記載して郵送し、何日か経ったあと、住信SBIネット銀行からメールがきました、。「※重要【住信SBIネット銀行】口座振替契約登録のお願い」というタイトルで、文字通りの手続きを促す内容でした。早速手続きしようとログインして真っ先に表示されたのがこちらの画面です。

よっしゃ、早速手続きするぞと颯爽と「次へ」ボタンを押したら、通常画面に遷移してしまいました。そう、「次へ」ボタンはお知らせをスルーして通常画面に進むボタンだったのです。正解はその上のテキストリンク「口座振替契約登録」の方でした。文字通り重要なお知らせであり必要な手続きを促すノであれば、もう少し目立つようにしてくれても良かったんじゃないでしょうか。その後、消えてしまった口座振替契約登録へのリンクを探すのにもちょっと苦労しました。

少し擁護してみると、この画面はメールの中にあった直リンクではなく、通常手順でログインしたものです。なので、私が手続き依頼のメールを読んでその気分であったこととはまったく独立に、Web側でも貯まっていたお知らせキューを表示したという状態です。なので、もしかしたらユーザは登録しに来たのではなくなにか急ぎの口座操作が必要だったかも知れず、「お知らせを消して通常画面に遷移」する選択肢が出ていることは正しいと言えます。「通常お取引画面へ」とかではなく「次へ」なのは、お知らせが複数貯まっていた時に、いちいち文言を切り替える手間を惜しんだのでしょう。次のお知らせがあるかどうかもわからない(判定しない)ので「次のお知らせへ」という文言ではマズいということになるのでしょう。

それでも一般的にテキストリンクよりボタンの方が目立つのは明らかですし、14日間という手続き期限もある大事なお知らせなわけですので、「次へ」と同等、もしくはそれより目立って、説明テキストなんて読まないよって利用者がむしろ口座振替契約登録にうっかり進んでしまう位の方が良いのではないでしょうか。

789. メガとかギガとか 〜WALKMANのアップデート案内〜

[bad]

皆さんはよくいうキロバイト(KB)、メガバイト(MB)、ギガバイト(GB)、テラバイト(TB)という単位について違いをご存じですか?

写真は先日SONYの携帯音楽プレーヤーWALKMANのソフトウェア更新をしようとした際に目にした説明書きです。更新作業に際して一定の空き容量が残っていないとならないので、それを事前に確認しましょうというわけで、丁寧に操作手順まで書かれています(赤線はこちらで追加したものです)。ふむふむ「200MB以上あるかどうか」を見ればいいんですね。

そして実際にその通りに操作して表示されたのがこちら。

「0.03GB/12.26GB」と出ました。これってつまり200MB以上あるんでしょうか??

1GB(ギガバイト)は約1,000MB(メガバイト)ということを知っていれば、ささっと計算して30MBであることがわかりますが、 最初から説明書きを本体表記にあわせて「0.2GB以上」と書いておいてくれれば知識も手間もいらないんじゃないでしょうかね。

ちなみにお恥ずかしながら、この時計算違いをして300MBあるから大丈夫だなと更新ファイルをつっこんでエラーになりました…ハイ。

788.なんでそこだけ平仮名!? 〜富士通ゼネラル どこでもエアコン〜

[good]

先日転居に伴いエアコンを新規で購入しました。IoT大好きなのでスマホで外出先からコントロールできるものにしたいと思い物色するものの、あまりつける人がいないらしくあちこちの量販店で店員さんに使い勝手とか聞いてみても、使ったことない人ばかり。追加工事代聞いても初質問なのか奥に調べにいったきり戻って来ないとかざらでした…

どの店の店員さんも「ここのメーカーのアプリが出来が良い」とか教えてくれない中、カタログやWebサイトのスクリーンショットで選んで富士通ゼネラルをチョイス(もちろんアプリだけで決めたわけでもないんですが)。ちなみに各メーカー、アプリは無料でエアコンもってなくておインストールできるんですが本体を登録しないと実際の操作画面に辿り着けない仕様。デモモードとかあるといいんですけどね。

さて、店員さんに「本当につけるの?いらないと思いますけど…」的な不思議な顔されつつも取り付け完了。アプリ「どこでもエアコン」はこんな感じです。

真っ先に気になったのは「しつど」の表記。「室温」など他はちゃんと感じなのになんでここだけ?!

調べてみると他社でもリモコンに「しつど」と平仮名で書いてるところもあるみたいで、どうも「温度」と湿度」が字面が似ていて、特にフォントサイズが小さいとシニアの方などが読みづらかろうという一種のユニバーサルデザインのようです。「温度」ではなく「室温」としているのも同じ理由かも知れません。そもそも湿度を制御したり測ったりできるエアコンはあまりないので、今まで目にする機会がなかったのかも知れません。

アプリの場合は(どうせ画面に余白あるんだし)設定でフォントサイズを可変にしてくれればいい気もしますが、まぁなるほどです。

オマケ:

ちなみに同じようにアプリの使い勝手が気になりつつも情報がない!という方のために、オマケER(専門家評価)。上記写真の運転モードの行をタップすると下記のダイアログが出ます。なぜか2箇所ハイライトされていて、いつも一瞬あれ?って思います。正解は水色がフォーカス色。停止はなぜか他と違い下線ではなくベタの黄色で、選択すると反転して汚い黄色になります。

 

運転モード、温度、風量それぞれにこういうダイアログが出て、内容を変更し、「OK」で閉じて」というこtを3回繰り返し、ようやく「送信」と思いきや、さらに「エアコンを操作してもよろしいですか?」という確認ダイアログまで出て、見た目のスッキリ感と裏腹に全体的にステップ数が多めでやや煩雑です。

でもまぁWi-Fiユニットが標準装備の某社製エアコンのアプリは、エアコンと直接通信をせず、サーバーに操作内容を送信->エアコンが定期的にサーバーにオーダーをチェック->反映したらサーバーに通知->サーバーからユーザにメールで結果が届く、みたいな回りくどい方式で、部屋の温度を確認してエアコンをONするだけで何分もかかってしまうシロモノだったので、それと比べたら満足しています。標準装備品だとアプリの開発費がかけられないんですかね…(今回買った富士通ゼネラル含め他のメーカーはWi-Fiユニット自体が1,2万円+工事費の別売り)。皆さんも「スマホで操作できる」という機能に興味があったら星取り表の○印(可能であるということ)だけで比べるのではなく、実際の使いやすさまで気にしてみるのをオススメします。

787. 謎順の都道府県リスト 〜ダイソンの製品登録フォーム〜

[bad]

写真は少し前に撮影しておいた家電メーカーのダイソンのユーザ登録のフォーム画面です。未登録の製品番号を入れないとこの画面に来られないので、もしかしたら今は治ってるかも知れません。

が、少なくとも昨年のある時期、都道府県の選択メニューがこんなことになっていました。誰がどんな意図で作ればこんなことになるんでしょうね(笑)。どんなルールでソートされているのかさっぱりわかりません。一般的な北→南の地理順でないのはもちろん、よみがな順でもなえればアルファベット表記にした時のABC順でもなさそうです。しばらくユーザ登録そっちのけで暗号解読でもするかのようにこの並びになっている合理的な理由を見つけようと躍起になってしまいましたが、結局判らず終い。どなたかこの謎を解けた方いらっしゃいますか?

同日追記:

文字コード順では?という御指摘をいただき、ExcelのCODE/UNICODE関数でざっと調べてみましたが、JIS順、UNICODE順のどちらでもないようでした。

 

Older posts