Category: Web、GUI (page 2 of 24)

815. 肝心なところが隠れて見えない…〜Panasonic DMR-BXT970〜

[bad]

私は毎晩ワールドビジネス・サテライト(WBS)を録画し、翌日の朝食を食べながら視聴しています。さすがに朝食を丸一時間もとってる時間はないので、WBSも関心のないトピックを「30秒送り」ボタンでチョンチョン跳ばしながらダイジェストで観るワケですが、ひとつとても困っていることがあります。

上の写真はスキップをした瞬間の画面。いわゆるOSDとして全体のどこまで再生したかを示すバーグラフや時間、現在のモードを示すフィードバックが一定時間表示されます。4秒くらい放っておけば消えるのですがこれが時短視聴するにはちょっと長い。そして不運なことにWBSもPanasonicを画面右上に情報提示をしているので重なってしまい、何のトピックなのか把握できないのです。きっと同じような理由で右上と決まってるんでしょうね。結果的にスキップの度に4秒待たないと次へ進んでいいかどうか判断できず、大幅に効率が落ちています。

じゃぁPanasonicは左上や右下など他の位置にすれば良かったのかといえば、もちろん他の番組ではそちらもかぶってしまう可能性があるので一概には言えません。欲を言えばユーザが位置や消えるまでの時間を選べるかすれば良かったなと。Panasonicはこの機種以外にも歴代のDVD/BD/UHDBDプレーヤーを何台か使ったことありますが、総じてOSDがしつこいです。再生始まってもずっと出っぱなしな表示すらあったり(「戻る」ボタンで消える)。おそらく操作に不慣れなユーザーを慮ってのことなんだと思いますが、最近では画質や性能でPanasonic製品を選ぶ人も増えていると思うので、そうした層にも選択肢を与えてくれると嬉しいなぁと思います。

813. 視覚障害者の方のWeb利用を間近で見られるイベントに参加してきました

[good]

昨日、アクセシビリティ情報サイトAccSellさん主催で行われた『ユーザーと一緒に試してみよう! ~あの○○はどこまで使えるのか~』という大変有意義なイベントに参加してきました。内容は、

  • 最新版Windows10に搭載されたアイトラッカー(視線追跡装置)のデモ/体験
  • 全盲ユーザーがスクリーンリーダー(テキスト読み上げソフト)を用いてECサイトでお買い物をする様子のデモ
  • 弱視ユーザーがWindowsの画面反転や拡大機能を用いてECサイトでお買い物をする様子のデモ

となっていました。特に視覚障害者のお二方はご自身がWeb技術に精通しており、「アクセシビリティ対応はこうあるべき」という解説も交えながらで大変参考になりました。日本を代表するECサイトを視覚障害ユーザが利用してどんなことが起きていたか簡単に振り返ってみたいと思います(それぞれ当該サイトは普段ほとんど利用したことがない、ということでした)。ちょっとWeb制作者向けの用語が飛び交うかも知れませんがご容赦ください。

■全盲の中根さん(AccSell)がバレンタインのお返しマカロンを探す

スクリーンリーダー(以下リーダー)はNVDAというフリーのWindows向けソフトが使われていました。まずなにが辛いって、トップページで「マカロン」とワードを入れて検索した時に、上位5件は広告商品が占めます。それはまぁそれで商売なので仕方ないところはあるのですが、そもそもマカロン関係ない椅子とかカラーコンタクトとかが挙がっています。晴眼者向けには背景色などを微妙に変えてたり、小さく「広告」とか「PR」とか書いてあるので、わかっている人は普段からさくっと読み飛ばしているでしょう。ところがこれがスクリーンリーダーだとわからないんですね。もちろん全ての文字を読み上げさせて聞いていけば気付けるんでしょうが、効率のために見出しタグのついたところのみを飛び石的に読んでいくので、小さい文字は読まれることがない。結果として「マカロン」で検索したのに椅子だのカラコンだのの見出しがいくつも出てくる。これはわかってないとちょっとした恐怖だろうなと思いました。

また初回ユーザ登録のフォームも埋めて見せてくれたのですが、よくあるCAPTCHA認証を検出すると有料プラグインが反応してなにやら英語でしゃべりだします。一部のCAPTCHA認証だと視覚障害者向けに音声を読み上げてくれるものもありますが、それ以外のものも含めてなのか、ともあれ対処してくれるプラグインがあるようです。しかし買い切りではなく回数あたりいくらという課金モデルなんだそうで、視覚障害者はCAPTCHA認証使う度にお金を払っているのか、ということを知りショックでした。CAPTCHAは不正利用防止に現状仕方ない面もあるのですがしわ寄せが障害者に行っているというのが悲しいですね(悪いのはCAPTCHA認証を採用したサイトではなくスパマーです)。

クレジットカード番号欄でよく4桁ずつ4枠にわかれていて、親切にも数字を4桁入れるとフォーカスが次の欄に自動遷移するものがありますが、あれは見えてない人にとっては混乱の元だそうです。また読み仮名欄に「かな」と書いてあった場合、リーダーは「かな」と声で読みますがそれだと「かな」なのか「カナ」なのか区別がつかない。そういう時は別途「詳細読み上げ」という機能を有効にするれば「カナ(カタカナ)」とどう書かれているかも含めて読み上げてくれるそうですが、最初から明示してある、もしくはそもそも平仮名でも片仮名でも受け付けるようになってれば済むことですよね。各種注意書きも大抵は欄の後ろに書かれていて、面的に俯瞰することができないリーダーでは、欄に記入して次へ進む時に気付く、というのもあるあるだとか。そもそも記入イベントでトリガしてJavaScriptで表示したエラーメッセージなのか最初から出ていたものなのかも区別が難しい。これらは知ってさえいればちょっとした配慮で直せることも多く、こういうした情報はもっとWebデザイナーの間に知れ渡るといいなと思います。

■弱視の伊敷さん(Cocktailz)がバレンタインのお返しマカロンを探す

続いて弱視の人はどうしているかですが、まず弱視の方は白地に黒よりも黒地に白文字の方が眩しくなくて見やすいという方が多く(伊敷さん曰くそうでない方もいるとのこと)、画面を反転させます。私も夜ベッドにもぐってスマホ読書をする時に反転機能を使うのでよくわかりますが、これ写真の色味も全部反転してしまうので挿絵とかヒドいことになるんですよね。パステルカラーのマカロンもみんな真っ黒や真っ青で食欲わかない色味になってました(笑)。ちなみにiOS11でスマート反転という写真やイラストだけは反転しないようにするアクセシビリティ設定が追加されましたが、あれもまだまだ機能しない場面が多い様に思います。制作者側で「これは反転しなくていい部分」というタグ付けが必要だったりするんでしょうか。Webの世界でもそういう技術や配慮が普及するといいですね。

次に視力が弱いということは識別できる解像度が低いということなので、とても大きく拡大しないとなにが見えているのか判別することができません。磨りガラス越しに見ているようなものでしょうか。伊敷さんの場合は500%〜600%くらいの拡大率をよく使うようです。逆に言えば一度に見える範囲がとっても狭いということです。商品が決まった後、カートに入れるボタンを見つけるまでに大変苦労されていました。ECサイトは関連広告や商品アピールを盛り込みまくってページがとんでもなく長くなることが多く、我々でも縦スクロールが面倒くさいと感じることが多々ありますが、その苦労が縦横で指数関数的に増大するのかなと。

また入力フォームでは枠線の色がちょっとでも薄くなってるともう見えないということです。先のクレジットカード欄を例にすると、例えばこんな画面があったとします。

これはSafariのデフォルトスタイルで枠線が薄いグレーですが、カード番号欄が4つあるので4桁ずつ入れればいいんだな、というのは我々は瞬時に理解できます。しかし、もし枠線が見えなかったらこうです。

フォーカスが当たってテキストカーソルが点滅している枠だけがかろうじて見えます。実際伊敷さんもテキストカーソルで判別していると言われてました。「コントラストが低いものは読みづらい以前に存在自体に気付けない」という指摘が刺さりました。「なにかある」ということ自体に気付けないと「そこをもっと拡大してみよう」とすら思わない、ということですね。

あと、WindowsもMacも現段階のOSレベルの画面拡大機能は単純なビットマップの拡大です。Macではアンチエイリアスもかけられますがさほど有効ではないように見えます。つまり小さい文字はガタガタに潰れてしまっていて、せっかく拡大しても解像度が上がらないということになります。ブラウザーの拡大機能ならばフォントは綺麗に拡大されるのにそちらは使わないのか聞いてみたんですが、やはりメーラーとか他のソフトもまとめて利用するので、ブラウザの中だけ拡大できてもあまり使いやすくはないようです。ここらはOSレベルの問題で個々の開発者やデザイナーがどうにかできるものでもないかも知れませんが、難しい課題だなと思いました(たぶんレイアウトを保ちつつフォントサイズを変えて再レンダリングするのはとても根が深いことなんでしょう。ブラウザでは改行位置とか変わっても良いという前提なのでできてるんじゃないかと)。

■ページ全体の俯瞰しやすさが大切

両者を通じて感じたのは見知らぬサイト(ページ)のレイアウトを把握するのはとても負荷が高く時間がかかる作業だということです。 目を瞑って全ての内容を頭から読み聞かせられたり、手のひらで筒を作ってそれを覗いた視界だけでページを閲覧することを想像してみると良いでしょう。なので、画面のここにはこういうことが書いてあるというガイドとして見出しなどの設計がとても重要だなと思いました。リーダーで特定の見出し階層だけ飛び石で見ていくので、見た目の文字サイズだけでなくH1〜H6タグの論理的な使い分けなどセマンティックなマークアップも非常に重要です(当日記もすごく昔の記事にはいきなりH3から始まってるものが残ってる気がします。ごめんなさい…)。

ともあれ、新規サイトへの対応負荷が高いということは、逆に一度慣れたサイトにロックインしやすいということでもあります。アクセシビリティ対応するとそういうお客さんのリピートを誘えますよ!とアピールしておきたいです。

また最後に中根さんが言われていましたが、今回のお二方はあくまで例としてとらえて欲しいということです。同じ全盲、弱視でも症状も違えば対処方法も違うのだと。このお二人は比較的プロい方達で、実際にはこの何倍も時間をかけてる方、そもそも諦めている方もたくさんいるであろうことは留意しなければならないでしょう。

808.「今回のお買い物」ってどれ?〜ビックカメラ.comのアンケート依頼〜

[bad]

ユーザビリティ屋として、利用者アンケートにはなるべくフィードバックしようと心がけていて、ポイントがつくとかつかないとかに関わらず、できるだけ回答するようにしています。

しかし、先日ビックカメラ.comを利用した後に届いたメールはこんなものでした。

全文舐める様に読んでも、何を買った時の「お気付き」について問われているのでしょう?正直、ビックカメラ.comでの買い物は何ヶ月ぶりかだったので「アレのことだろう」という検討はつきます。もしかすると、「一定期間中に他に買い物がない新規または久々の注文客」を選んで送っているのかも知れませんが、もっといえば毎日のように色々なものをあちこちのショップで買っている人なら、いちいちその組み合わせも憶えてないということもあるんじゃないでしょうか。やはり商品名とか発注日とかくらいは入れておいた方が、「あぁあれのことなら言いたい事あるよ!」と回答率も上がるんじゃないでしょうか。

実際にリンクを開いてみたところがこちら。やっぱり商品名や注文日時は表示されません。あるのは「ご注文番号」のみ。

ユーザがメールなどを遡って調べなければどの商品のショッピング体験について聞かれているのかわかりません。ちなみに、実際にメールを遡ってみると、注文確認、出荷連絡、ポイント付加連絡、ご利用ありがとうございました連絡とメールが順次届いてますが、そこの記載は「ご注文番号」「ご注文NO」、「ご注文No」の3パターンがありました。統一しましょうよ(苦笑)。

メール記載のURLの末尾がそのまま注文番号なので、そこから開いたページにそのまま詳しい注文内容が表示されるのはセキュリティ面では望ましくありませんが(数字を適当にかえると他の人の注文内容が覗けてしまう)、そこはダミーの桁増しをする、暗号化(ハッシュ化)する、ログイン後にフォームが出るようにする(回答率が下がる?)などさほど難しくない解決策がありそうですし、そもそもメール側にだけなら商品名くらい記載しても良い気がします。

なんだか統計値だけとれればよく、個別の買い物エクスペリエンスを深掘りしてまでは「今後のサービス向上に活用」する意気込みは感じられないアンケートでした(もちろん回答して、本件も具申させていただきましたよ)。

 

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

[bad]

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

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

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

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

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

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

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

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

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

[good]

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

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

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

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

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

Older posts Newer posts