Category: Web、GUI (page 1 of 23)

819. 削除確認の初期選択肢が選べるデジカメ〜SONY DSC-RX100M6

[good]

先日デジカメを買い換えました。SONYのCybershot RX100シリーズのM2(マーク2)からM6へと同系統4世代ぶりの買い換えとなります。おおむね操作方法も踏襲されていてスムーズに乗り換えできました。

そしてとても助かっているのが、削除ボタン(ハードキー)を押した時の確認画面で「削除」と「キャンセル」どちらを最初に選択しておくか設定で選べるようになっていた点です。M2では「キャンセル」に固定でした。なので、

  1. 削除ボタン
  2. カーソル↑
  3. 決定

と常に3ステップ必要だったのが、デフォルトを「削除」にしておけば、1.と3.だけで済みます。些細な違いのようですが、連続して何枚も失敗写真を削除/整理する時には地味に効いてきます。M6はAFや保存も高速化されてバシャバシャ撮れるので、ついたくさん撮影してしまい、その場でざっと取捨選択できるのは非常に有り難いのです。

設定画面で初期状態を選べる

削除ボタンを押した状態

「え?こんなの選べたっけ?」と慌ててM2の方も調べてみましたが該当項目はなかったので、M3からM6のどこかの時点で追加された機能のようです。この手の削除操作における確認フローは常に手間と誤操作回避のトレードオフが悩ましい問題ですが、いっそユーザに判断を委ねてくれるというオープンさはとても良い配慮だと思います。

818. 日本郵便の再配達受付フォームのわかりづらさを検証する

[bad]

日本郵便(郵便局)のWeb再配達受付フォームは何回使っても慣れません。今回はなんであぁも使いづらいのか真面目に考察してみたいと思います。

まずこちらがポストに入れられる不在連絡票です。こちらの情報をWebフォームに転記することでマッチングを行います、

日本郵便の不在連絡票

一般にここから読み取らなければならないのは(通常把握している自身の郵便番号を除けば)2点。「ア」の種類番号と、シールで貼られた副伝票の追跡番号またはお知らせ番号です。これを踏まえて以下のWebフォームを埋めていきます。

スクリーンショットが長くてちょっと見辛いですが、ステップ毎に追ってみましょう。

再配達依頼フォーム

1.郵便番号

そもそもなんでこれを改めて入力する必要があるんでしょうね。追跡番号やお知らせ番号で荷物が一意に絞れるのであれば、必要ない気がします。競合他社では求められない気がします。もしかすると不正防止のためのチェックデジット代わりかも知れませんが、不在票を抜き取られてる時点で郵便番号は自明な気もします。

2. 追跡番号またはお知らせ番号

荷物固有のIDとして2種類あるのが話をややこしくしています。おそらくですがもともと追跡可能なゆうパックには発送時点で追跡番号が振られるんだと思います。桁数も多く全国でユニークな(重複がない)番号です。

一方お知らせ番号は本来追跡の仕組みがない定型外郵便などがポストに入りきらずに持ち帰った場合などに配達員がその場で発番しているローカルな番号なんではないかと思います。

いずれにせよ利用者目線で区別する必然性はあまりない気がします。足りない桁を0で埋めてでも12桁の番号に欄を統一してシステム側で振り分けるとかできそうなものです(郵便番号を入れているので全国共通番号でなくても絞り込めるんじゃないかと)。

3. お届け日

これまた利用者目線では必要性がよくわからない項目です。お知らせ番号だと6桁しかないので地域によっては1日で使い切ってしまい、日付を組み合わせないと絞り込めないのかも知れません。でもだったらそれこそ6月30日->0630みたいなルールで桁増しして追跡番号と共通化してくれればいいんじゃないでしょうか。またもし追跡番号の時には必須でないのであれば、2.の選択に応じて欄自体が増減してものではと思います。

4. 郵便物等の種類

毎度ここがもっともフラストレーションがたまるところです。まず、2.では横に並んでいた追跡番号とお知らせ番号のゾーンが今度は縦に配置されています。このレイアウトだと独立した2つの欄がありそれぞれに入力を求められているように見えて、その実は2.で選んだどちらかの欄だけ入れれば良いのです。

そして毎度不思議に思うのが、何故不在連絡票では種類番号という2桁の数字で記載しているのに、フォームではその数字で入れられないどころかラベルとしても振ってないのかということです。ユーザの思考フローはこうです。

  1. 種類番号を読み取る
  2. すぐ下の一覧からその番号が何を示すか調べる(例えば75なら「上記以外」)
  3. フォーム上で「上記以外」を探して選択する

ここで更なる問題として「上記以外」が複数の列に4つも存在するという点があります。郵便物、ゆうパック、追跡番号とお知らせ番号それぞれの国際郵便物です。自分の荷物がどの「上記以外」に該当するのか、75という数字がどこにもないのでどうしたらわかるのでしょう?正解は不在連絡票の一番上のタイトルにある「ゆうパックご不在連絡票」から追跡番号の2列目の一番下の「上記以外」ということになります。デザインした人からすると「こんなに大きく太く書いてあるだろ?」ということかも知れません。しかし実際には位置が離れていてほぼ目に入りません。普通、こういう時に見出しに動的な情報が載っているとは思わないでしょう。

改善案としてはここも2.の番号種別を選んだ時点でまず余計な選択肢を消して欲しいです。2.で追跡番号を選んだ人からすれば、4.のお知らせ番号のゾーンはまるごとノイズでしかありません。もしかすると郵便局はちょっと前まで公的な存在だったので「あらゆるブラウザ環境に対応する為、JavaScriptなどによる動的なページ制御は使用禁止」という保守的な発注仕様だったのかも知れません。しかし現在では非対応なブラウザはほぼないですし、最悪「JavaScript非対応なら両方出しっぱなし」ということでいいんじゃないかと思います。いずれにせよ各選択肢には種類番号はいれるべきでしょう。

5.の再配送先はまぁいいかなと思います。初めてツッコミどころがない欄です。

正直最後に「次へ進む」と「ゆうびんIDを利用して登録する」も慣れない人には無駄に悩ませる要因だと思います。後者のメリットがわかりません(例えば受付内容をメールで送ってくれたりします)。私は登録済みなので習慣で後者を選んでログインして申し込みしてしまいますが、むしろユーザ登録の仕組みがあるなら先にログインさせておけば、郵便番号の入力が省けたりしそうなものです。

などなど、LINEボットなどによる依頼など野心的な取り組みをしているヤマト運輸に比べると色々と作りが古かったり気が利かなかったり周回遅れ感は否めません。月に1度は使うものなのでもっと改善に力を入れて欲しいと思います。ちなみに他社事例ではAmazonの委託で配送をするデリバリープロバイダなどもまたイケてないのですが、こちらはまた機会を改めて。

 

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から始まってるものが残ってる気がします。ごめんなさい…)。

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

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

Older posts