Category: Web、GUI (page 1 of 23)

816. 外国人に“やさしい日本語”とは、文節区切りを明示すること?

[info]

先日 こんなサイトを 見つけました。災害時などの 情報発信で 日本語が 苦手な人にも わかりやすい「やさしい日本語」を 使いましょう という 啓蒙サイトです。

減災のための「やさしい日本語」

このサイトに よると、多少は 日本語が 読める という 外国人 向けに、

  • フリガナを つける
  • むずかしい 漢字を さける

という ごく一般的な 方針に 加え、

  • 単語や 文節の 区切りに スペースを 入れる

というのが 有効な ようです。なるほど 確かに、元々 単語の間に スペースがある 欧文と 違い、日本語は 単語同士に 区切りがなく、言語解析の 世界でも 形態素解析という 研究ジャンルが できる位の 第一関門と なります。しかも、単語/文節区切りを した後で 個々の 単語の 意味を 調べる 第二段階へ 進めばいい かというと そうでもなく、そもそも 単語を 知らないと 文章を 区切ること自体も できない という、第一関門、第二関門が 複雑に 絡んだ 認知処理を しなければ なりません。これは 機械翻訳技術としても 難しい のは もちろん、日本語に 不慣れな ノンネイティブな 人にとっても 難関な わけです。辞書を 引くにも 単語としての 区切りが できなければ そもそも 不可能な わけです。それを 無意識に やってのけられる 我々 ネイティブの 側で あらかじめ やっておいてあげる、というのは 大変 合理的な 発想だと 感じました。

試しに 本記事を 上記サイトの 例に 倣って 区切りを 入れて 見ましたが いかがでしょう?さすがに ちょっと 読みづらい ですね(笑)。でも これらは 電子データで あれば 比較的 簡単に 切り替え 表示 できると 思います。必ずしも 全角スペースで なくとも、色分けや 下線など 様々な 表現が 考えられる でしょう。形態素解析も 実用的な プログラムライブラリが 無料で 公開されて いますので、例えば 既存の 日本語 サイトに ほぼ全自動で 区切りスペースを 入れるような 仕組みは 作れそうです。そういう 機能の ブラウザ(プラグイン)が あっても いい ですね(全角スペースの 代わりに 色付きの 半角スペースに してみました)。

多くの 外国人 観光客を 迎える 今後に 向けて、ホスピタリティの 1つ として 考えてみても いいこと かも 知れません。

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」を押して閉じ、改めて右側の「注文を始める」ボタンの下にある「ご注文状況の確認」をクリックするとこうです。

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

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

Older posts