うめのんブログ

Tag: ユーザビリティ

目の見えないユーザはiPhoneをどう操作するか

本日、アクセシビリティの専門家である中根雅文さんに会ってきた!

中根さん自身も全盲であり、目の見えないユーザがどのようにiPhoneを使うか、アクセシビリティとはなんぞやなど、いろいろと教えてもらったので、それについて書いてみる。

と、本題に入る前に、まず、ここまでのいきさつを書いてみる。なんで、お前いきなりアクセシビリティの話するのよ?という疑問もあるだろう。

僕はLisgoという読み上げアプリをリリースしたおかげで、視覚障害者の方から使っているよというお褒めの声が届いた事があるのです。

その時は「アプリ作っててよかったな」と開発者冥利につきて幸せ気分だったわけだが、もともと自分が移動中にWeb記事を聞きたくて作ったアプリ。特に視覚障害者向けにカスタマイズとかはしてなかったのですね。

まあ、当初からそういうニーズがあるだろうと、ある程度は予測していた。しかし、ターゲットを絞るのが重要だという思いから、まずは自分専用、もしくは自分みたいな用途のユーザ向けに絞って開発をしていた。

そんな時、去年の夏頃だっただろうか、Instapaper作者のMarcoさんのPodcast、Build&Analyzeで、ひょんなことからVoiceOver対応の話が出てきたんです。

実演しながら、「VoiceOver対応するのは簡単だから、iPhone作っているなら対応しといて損はないぞ」という話だった。

いてもたっても言われなかった僕はすぐにPhoneのVoiceOver設定をONにしてみてました。

「なんだこれは!どうやって戻すんだ!おい!」と思いながら、こんな機能あったんだなと初めて知りました。

※試したい人は、設定➡一般➡アクセシビリティ➡一番下までスクロールしてホームをトリプルクリックをVoiceOverに。アクセシビリティ項目の一番上のVoiceOverをオンにすると、元に戻しにくくなって混乱するのでトリプルでやるように!

実は、iOSのコーディングも一行。UIButtonとかBarButtonのプロパティに付け足すだけ。

helpButton.accessibilityLabel = @"ヘルプボタン"

いやあ、アップルってこういうところ凄いなと思いながら、カスタムしたボタンとかをVoiceOver対応しておいた。ちなみに、デフォのUIボタン使っていたら大抵は自動で対応されるから、デフォルトのシンプルなアプリがVoiceOverには使いやすい事が多いらしい。

それからしばらく立ったある日の事、アクセシビリティ・ビギナーズを石橋さんにTwitter上で「You、君のアプリに関係あるYO!」と薦められ、先日ほいほい行ってきた。

そしたら、もう、全然知らない事がたくさん知れて、もの凄くよかったですね。

最近、まだ知らないと自分が分っている事を知るより、自分が知らないと分らなかった事を発見するのを意識したいと考えていたのだが、まさに後者がいっぱいありました。

目が見えなくてもVoiceOver使ってPerlのプログラミングするとか、慣れると音声読み上げを爆速で使うとか、驚きの連続であった。

他にも、中根さんに、「PocketもDropboxも使っているよ、あれ凄くいいね!」とか言われた。自分のアプリはGoogleReaderに対応したら使いやすいかなと思っていたけど、まさかPocketを既に使っているとは。

アクセシビリティとはなんぞや

勉強会では、Webアクセシビリティ専門家である植木真さんも語ってくれてたけど、アクセシビリティって視覚障害者だけのものじゃなくて、あらゆる人に言える概念なんですね。

いろいろな状況でも製品が使いやすく、アクセスしやすくする。

htmlを正しく書いて機械がアクセスしやすくするとか、様々な用途で使う人間がいろいろな条件でアクセスしやすくするとか。

そういう意味で考えると、僕がiPhoneで読み上げアプリを作り始めたのも、読書のアクセシビリティを高めたいからだった。

他にも、海外の映画に字幕がついて理解しやすくなったり、英文読む時に辞書調べるのがめんどいからタップだけで辞書が出るとか、アクセシビリティを高めるのにITは大きな力を発揮している。

ITっていろいろ負の側面もあるかもしれないけど、素晴らしいな。人間が出来る事の可能性を拡張してくれる。

余談だけど、自分の専門から離れたイベントとかをたまに行くと、思っても見なかった発見とかをする。これから意識的にそういうランダム性を作ろうと思う。

これは、今読んでいるタレブのAntifragileって本の影響で、昔から影響を受けやすいので、最近そんな事ばっかりしったかしているわけなんだけど、その話はまた今度ブログで書きたい。

ちなみに、VoiceOver機能自体あまり知らない人が多いと思うので、iPhoneのTwitterアプリを操作している解説動画を撮影させてもらいました。


*作ってるアプリと人気記事はこちら



動かしながらデザインする

UIUXデザイン方面だと”動く”モックアップが作れると大きいなあと以下の記事を読んで思った。


翻訳:Railsを学んだことで私はより良いデザイナーになった

インターフェイスは、動かない画面に貼り付けられた書類の束では決してなく、それは、インプットとアウトプットのフローなのだ。それが本当によいインターフェイスなのかどうかは、自分で使ってみるまで評価は下せないし、使ってみるにはまず作ってみないといけない。正確な評価・判断をしたかったら、実物に勝るものはない。

それまで私たちデザイナーは、動かないモックアップと、いくつかの動く部品を作って、それからプログラマの助けを呼んでいたが、この時の私達は、およそ2ヶ月もの長い期間を、プログラマの手を煩わせることなく、コンセプトの検証や新しいアイデアを実験するためのプロトタイプフェーズに費やすことができた。プログラミングの基礎知識は、私達デザイナーに dance without a partner のための手段を授けてくれる。

動かないモックアップ、例えば、パワポとかペーパープロトの段階で分ることと、シンプルでも実際に動いて機能するモックアップで分ることってもの凄く情報量が違うからのう。

特にiPhoneやiPadのようなモバイルデバイスだと、情報量の違いが100倍ぐらい大きくなるんじゃないだろうか。いや、100倍は言い過ぎかもしれないから、そこは突っ込まないで頂きたいけど。

動くモックアップでわかる情報量の多さ

僕がCakePHPでWebサービスを作ってた時は、まず紙でさささっとUIやら全体のイメージを書いて、その後はパワポに落とし込み、リンクをクリックしたら次の画面に動くようなモックアップを作っていた。

その後、htmlとcssで画面を作り、あとからバックエンドの動きを実装していた。コードを書く前に”実際に動いているような”デモをパワポで確認できて、今でも有効な手法だと思う。

そんなにこった動きとかはしてなかったし、ちょっとJQueryとか使う程度だったので、「うーん、ここの動きが使ってみると使いにくいなあ。」と言って後戻りするようなことはあまり多くなかった。

ところが、iPhoneとかiPadなどのモバイルデバイス向けに作るアプリになってくると、”動くものを実際に触ってみないとわからない”という部分がめちゃくちゃ多い。

最近はだいぶ過去の経験とか、いろんなUIの動きを脳みそにインストールしてきたおかげで、そこそこ実装前でも先が見えるようになってきたかなと思ったりもするけど、それでも触ってみないとわからないことだらけ。

Webサービスでも最近ではJavaScriptガリガリ使って動きを工夫したりするし、HTML5とかでモバイル対応したりしてきたら、もう大変だと思う。

モバイルアプリは使う事でわかることが特に多い

iPhone開発では、iPhoneシミュレーターというPC上で動きを確認できる便利な機能があるんだけど、最近あまり使わなくなった。Xcodeの実機へのBuildが高速になったというのがでかいけど、実機で触らないとわからないことが多い。

まず、手で握って触った時に、ボタンの位置が押しにくいかとか。

アクションボタンをタップしてにょきっと画面が下から出て来て、それを閉じる時に左上、もしくは右上のボタンを押す時に届きづらいから、たまにiPhone落としちゃうとか。

移動中にポケットからiPhoneを取り出し、ネットワークが不安定になった時にどういう動きをするかとか。

寝る前に寝転んで、画面が横画面になった時に、縦画面の時、どういう握り方で持つか、その時の使いやすさとか。

こういう事を検証するには、デザインは全部デフォルトでいいから動くものをささっと作るのが一番。

僕が新しいアプリのUIを検証する時は、アイデアだしの段階で、まずは紙に簡単に書いて、その後コード書いて動かして検証してます。

Lisgoペーパープロト

自分しか理解できないかもしれないLIsgoのUIを考えてた時のメモ書き。

そこから、もうちょっと突き詰めて、自分を第三者の視点で観察するとか、ユーザを観察するとかの話はこちら。

使いやすいiPhoneのUIを作るために気をつけていること

でも、プログラミング覚えるのは大変でしょう?

これは悩むところです。人間の時間は有限だから、各自で一番最適だと思うことに時間を使うしかない。

これができたらいいよー、これもできたらいいよー、この知識があるとないとでは全然違うよーというのは、どれも正論であることが多いですよね。

でも、自分が今やる価値はあるかとか、これから覚える意味はあるかとか、必要になった時に勉強したほうがいいか、他人に任せて自分が得意な事に集中するかは人それぞれの状況に応じて違ってくる。

結局、”これからは英語勉強するべき”とか、”○○もコードが書けないといけない”とか、そういうのは自分でやりたいと思ったらやればいいし、必要でなければやらなくていいと思うのです。

だから、この記事も、そんなもんかと思って読んでくれたらこれ幸いです。

余談ですが、最近はデザイナの定義が広すぎて、デザイナーですと言ってもどれが専門か聞かないとよくわからない。


*作ってるアプリと人気記事はこちら



Copyright © 2019 うめのんブログ

Theme by Anders NorenUp ↑