Hatena::ブログ(Diary)

キャズムを超えろ! このページをアンテナに追加 RSSフィード

2013-01-29

エレベーターの閉じる/開くボタンのUI改善 〜日本マーケット向けの決定打は『ひらく』ボタンの撤廃だ〜

fladdictさんところで話題になっていた『エレベーターの閉じる/開くボタン、間違って押す。あそこのUIはよくない』という話。いろんな人を巻き込んで、こういうUIなら閉じる/開くを押し間違えないぞ、というUIアイディアコンテスト状態に。なんて面白いことやってるんだ俺も混ぜろ!ってことで考えてみたのだけれど、どうにもデザインを提案しているみなさんの方向性が皆して『ひらくボタンを目立たせよう、大きくしよう』という方向に。詳細はこちらのNAVERまとめ参照

........なんでやねん!と。100回言いたい。

何十年と使い込まれたエレベーターを見て、とじるボタンのほうが明らかに押されまくって印刷がかすれたり、傷だらけになったりしているのをみんな知ってるだろうに。ひらくボタンは緊急性が高いから目立たせようという話なんだろうけど、だったら故障時の緊急呼び出しボタン(係員と電話するアレ)のほうが100倍緊急性が高かろう。


そもそも根本的な話として、ひらくボタンはどういう時に使うのか? それは閉まりかけのドアに無理に入り込もうとする人を助けてあげるときや、先に入った人が後からくる人のために開けて待っているというシチュエーション。でもそれって、エレベーター利用者全体のUXを悪化させていると思うわけですよ。そもそも駆け込み乗車(乗籠?)は危険だからやるべきじゃぁない。また、Aさんが先に入って、歩みの遅いBさんのために開けたまま状態を延長することは他の階で待つユーザのUXを悪化させる。ひらくボタンが存在することによって悪化するUXはもっとある。駆け込み乗車しようとするCさんを先に乗った(こちらも急いでいる)Aさん見限るケースもそうだ。Cさんとしては『あ、あいつひらくボタンを押さずに俺を見捨てやがったな』と感じるし、Aさんとしても『もしAさんが間に合ったら、ここでひらくボタンを押さなかった私を恨むだろう。でも私だって急いでいるからあなたを待ちたくはないのだ....』と心おだやかではなくなるはずだ。


そこで、最高の解決策として『ひらく』ボタンを撤廃してしまう。こうすることで、AさんBさんの事例はそもそも存在しえなくなる。Aさん+Cさんの例においてCさんは恨む対象がなくなるし、Aさんも『Cさんを助ける手段がないからしょうがないよね』となる。いいことじゃないかと。


そんなことより何より、大多数の『とじる』ボタンを押すユーザ、という立場にたったとき現状のUI設計はだめすぎる。閉じるボタンを押してから閉まり始めるまでのタイムラグがユーザーを不快にし、結果として『とじる』ボタンを連打しながら『ちっ、おせぇなぁ....』と感じてしまう。これはよくないUX。


というわけで、急いでいる状況でエレベーターにのって1秒でも早く目的階にたどり着きたいという多数派日本人のためのUIを設計してみた。

エレベーターの閉じるボタンUI改善案



このUI設計は下記のような流れで行われた。まず、現状の洗い出し。

  1. とじるボタンとひらくボタンを押し間違える(fladdictさんの元ネタで、最重要な要改善UXと設定)
  2. とじるボタン/ひらくボタンの場所がわかりにくく、認識して押すまでに1テンポ遅れて不快
  3. とじるボタンを押してからドアが閉まり始めるまでにラグがあり、何度も押してしまう(イライラする)
  4. 自分は急ぎたいが、駆け込み客のためにひらくボタンを押さないと悪者扱いされる恐れ

そこから改善案を出していく。まずはUIを作る前に何をするかのリスト出し。

  1. とじるボタンを目立たせる
  2. ひらくボタンを撤廃
  3. とじるボタンを押したことを明確にフィードバック
  4. ボタン操作から操作完了までの間に時間がかかる処理は、残り時間を明示

守るべき実装仕様を確認し、齟齬がないか確認。

  1. 日本語が読めない・色弱・視力が弱い・車椅子といったハンディキャッパーにとってのUX悪化がないか → ひらく撤廃はむしろシンプルで良い方向
  2. 危険性はないか → 駆け込み乗車は危険。このUIは駆け込みを抑止する。挟まる人が居ても怪我はしないようエレベータ側にFailSafeが仕込まれている

実際のUIに落としこみ、確認....という感じか。階間移動中に閉じるボタンをinactive状態で保持するかどうかは結構悩ましい。一応ドア閉まりきったらactiveに戻す仕様で作ったけれど、目的階についてドア開ききるまではinactiveのままというほうがフレンドリーかなぁとは思った。ここは微調整のエリアですな。

2008-09-26

SONY版FriendFeed? Life-Xを20分使って気づいたユーザビリティ課題

AM3:00 now.

2:40からLife-Xを使い始めたのでほぼ30分。ユーザビリティを評価するには、使い出して最初の15分ぐらいが肝だと言える。なぜなら、ほとんどのユーザーはその段階で使うのをやめてしまうから。そして、30分、1時間と使い込むにつれ、本当は直感的でないのだが、操作を覚えてしまうことで問題だと感じなくなってしまう。

なので、本サービスに招待いただいたソニーの某氏へのメッセージとして、最初の15〜20分で感じたLife-Xのユーザビリティ課題を指摘したいと思う。

  • ENTERキーで決定できる入力フォームが少なすぎる
    • ログインフォームでメアドとPWを入れてENTER...してもログインできない(ログインボタンをClickしないとだめ)
    • フレンド(マイミクみたいなもの)を検索するとき、名前を入れてENTERで検索...と思いきや、マウスで「検索」ボタンをClickしないといけない
  • TAB+スペース(あるいはENTER)で決定しようとした際、TAB押下でフォーカスが移動していることが視覚的にわからない
    • TABボタンまわりに囲いがつかない
  • 共有メモ(twitterつぶやきみたいなもの)入力画面で確定済み入力文が薄い灰色になり、読めないww いやまじで見えないから、それw 黒よりグレーのほうがおしゃれにみえるのはわけるけど可読性が悪いと意味が無い。
  • 友人検索の後にでる検索結果表示画面に「この人と友達になる」ボタンがない。一度「この人の詳細を見る」を押した先の画面にしか友達になるボタンがないので操作が煩雑
  • 友人検索→検索結果から「詳細を見る」で出るabcdeさんの詳細画面。ここでabcdeさんの友人一覧が出るのだが、そこにリンクが張られていない
    • abcdeさんの友人に共通の友人xyzさんがいて、彼もフレンドに登録したい、というユースケースは多いはず。なのにそこでxyzというスペリングを覚えて、2画面前に戻って検索しなおしというのは使いにくすぎる
  • 全体的にだが、操作完了画面(アップロード完了とか、フレンド追加完了とか)のナビゲーションが作りこまれていない。フレンド追加完了画面では「ホームに戻る」だけではなく「さらに他の人を追加する」的リンクがほしいし、可能ならばリンクではなく完了画面にさらに検索ボックスがあって他の人が検索できるようになっていることが望ましい。写真のUPでも同様。「完了しました  戻る」だけじゃなくて「さらに写真を追加でUPする」とか「UPした写真に解説をつける」とか「今UPした写真の一覧を見る」的なリンクが考えられると思うのだが。画面遷移図やテスト仕様書が煩雑になるから避けた!?と勘ぐりたくなる。
  • 大手メーカーのサービスによくあるのだが、細かい名称にオリジナリティをつけようとしすぎて「その名前が何をさすかぱっとわからない」状態になってる
    • 動画も静止画もオンラインブックマークも全部「アルバム」に入れるという概念がちょっと。アルバムというと静止画(写真)を想像してしまい、とまどう
  • 結構だいぶ相当てんこもり感が出てる。人のアルバムにコンテンツを入れる、ってのは理解するのに相当高いITリテラシーが必要だと思うし、それを誰もが使えるようなUIにまとめきれていない
  • 全体的に「どこがボタンか」がわかりにくい。ベタに青字にアンダーバーで統一するなりしたほうがいいかも。あるいはグラフィックスにするとしても、押せるボタンは全て緑の枠で囲う、などの統一性がないときつい。ゲーム機みたいにカーソルキーでしか選択できないんならいいのだけれど、マウスを使うDirectPointであるPCにおいてこのボタン表現ではきびしい
    • 下記画像参照。和蓮和尚さんのコンテンツ、と書いてある左上部分が実はこれボタンになってる。わかるかぁーっ!

Life-X6

  • スタイリッシュにすることにこだわったのか、機能を奥のほうに沈めてしまってみつからない、見つけ辛いというパターンにはまることが多かった
    • 具体的には「アルバムの表紙はどこで設定するの?」と思ってもなかなか見つからなかったり。自分のプロフィール写真をどこで変更できるのかわからなかったり。間違った写真をUPしてしまって消去しようとしたらどこから消せるのかわからなかったり。プロフィール写真付近に変更ボタンを用意するか、せめてプロフィール写真をClickしたら変更・削除などのメニューがでてほしい。
  • ユーザの顔写真やニックネームをClickしても当該ユーザのホームに遷移しない。じゃぁどこをClickすればいいの?と探すと「(このユーザーの)詳細情報を見る」というボタンがそばに。直感的じゃないなぁ...。詳細とかいうとホーム画面にはない詳しいプロフィール情報を見るような言葉に感じてしまう。
  • 最初のナビゲーションがないのでまずなにをしたらいいのかわからない
    • まずはフレンドを探してみましょう。次に写真をUPしてみましょう。次にお友達の写真にコメントしてみましょう。次に... みたいなチュートリアルがないのですぐ飽きる。
  • 会員登録時、入力しないといけない項目が多すぎる。
    • 性別・地域・生年月日が必要なのはなぜ? ※ID忘却時の対応という答えがかえってきそうだが、メールアドレスにPW再登録メールを送る仕様にしておけばOKのはずでは。
    • 「紹介文」は必須ではないが入力フォームとして出てくるので入れる必要性を感じる。が、まだサービスを使っていない段階なので何を入れたらいいかわからない。このへんはあとで入力させるよう、先に述べたチュートリアルで誘導すればいいのでは。
  • 会員登録時のID入力フォームにおいてどんな文字列が使えるのか明記されていない(全角OKなの?半角だけなの?等)
  • 会員登録時、マイピクチャを選択後「アップロード」を押さないといけないのは面倒。確認を押したら次の確認画面でピクチャもふくめて確認できる仕様でいいのではないか
  • 外部サービス連携(Flickr連携、twitter連携など)という機能が何ができるものなのかわからない。
    • Flickr連携を設定後50分たっても何もおきないので本気でよくわからない...
  • twitterとかのメモが流れてくるんだけど、URLクリッカブルになってない

ざっくりとだが、こんな感じか。ソニーマーケティングという重厚長大な組織のなかにいて、これほどまでに自由なサービスをローンチできたことはすばらしいことだし、法務部門の説得が面倒な海外英語サービス(Flickrなど)へのつなぎこみを実現している点もソニー全体としてみれば大きな一歩だろう。今後カメラやフォトフレームといったデジタルイメージング商材が海外サービス連携したいと言った際、Life-Xの前例、Life-Xの利用規約などをたたきにして前へ進められる可能性が高いからだ。

しかも、利用規約をみてみると「外部連携サービスについては俺ぁ知らんよ(ぷ」の一言で片付けているあたり、社内政治的に使い勝手がいいツールになりそうだなぁ、と。

個人的にはアプリキャスト連携よりも、CP1との連携を実現してほしいなぁと思う次第。TVは能動的にしかアプリキャストを呼び出せないが、CP1ならばダダ流しで友人のフィードをチェックすることができるからだ。



でも、本当に美しいのは「Life-Xフレーム」などと名前をつけて、Life-Xユーザーの満足度を高めることだけをターゲットにおいた専用品をリリースすることだろう。CP1の色換え・ファーム換え専用品みたいなイメージ。そんなちぃせぇマーケットにリソース投入できるかよ!1個別ファームバージョン作るのにいったいどれだけのテストケースを消化しないといけないか知ってるか? と怒られてしまうだろうが、何でもできることは何もできないことと同義。完全囲い込みClosedなWebサービスと、専用のハードウェアなんてのはなかなかHITしないが(そういえばauが何かやってたねー....)、Life-Xは外部サイト連携によって開かれたサービスである。こういうものに専用ハードを組み合わせることができればこれぞソニー、なのだが。


ま、ハード部門じゃなくマーケ部門がネットサービスやってる現状では道は険しいんだろうなぁ...。 中の人頑張ってくだされ。


以上、ちょっと私信めいたエントリでした。Life-Xって何よ! みたいなエントリーは数日以内にきっと誰かがUPするはずなので割愛。一言でいえば「ソニーfriendfeed」ですな。

2008-09-21

iPhoneで起こしてほしかった日本語変換の革命

たぶんAppleでは増井さん以外にもたくさんの方が日本語入力に関わっておられるはず。今回のエントリーは増井さんをはじめとしたAppleで日本語入力に関わる全ての方へのメッセージとなる。是非上のほうにいるであろう日本語が読み書きできないけど日本語入力に制約をつけている(であろうと推察する)ガイジン管理職さんにも翻訳して読ませてあげてほしい。...なんてエラそうなことを書いたがまぁBlogで何を書こうが自由なのでww

iPhone2.1ファームが出て、連文節変換と呼ぶのが正しいのかはわからないが、長い文章を入力しても文節の区切りを自動で判別して変換する機能がついた。

  • 入力文字「きょうはおふかいにいってきました」
  • iPhoneファーム:「きょうはおふかいにいってきました」「キョウハオフカイニイッテキマシタ」
  • 2.1ファーム「今日はオフ会に行ってきました」

これで先のiPhone評価エントリーにおいて『候補があると思って少し長い言葉を入れたけど候補ないのかよ!』となった際の手戻りの多さが劇的に改善され、便利になった。"ふじりんご"と打ってしまって、"富士林檎"と変換されないことに気づいてバックスペースを4回押して"富士"を確定させてからさらに"りんご"と打ち込んで"林檎"に変換する手間がなくなったのは大きい。特にネットスラングなどカナまじり言葉を多用する人種にとっては。


iPhoneのファームを更新して、評判の悪かった日本語入力変換部に手を入れてきたことは高く評価できる。だが、個人的にはAppleや増井さんにはもう少し新しいUIを期待していた。それは、タッチ入力ならではの"変換"システムである。iPhoneではスライド入力*1という革新があったじゃないかと言われそうだが、あれは「入力」方式の革新である。今一歩踏み込んで求めたいのは「変換」方式の革新なのだ。

Palm OSPoBOXをはじめて見たときのあの『すげぇ、この変換はヤラレタ!』感をいまいちど感じさせてもらいたい。


某氏など関係諸氏には「そんなものは既存FEPの操作概念にとらわれており、Oldstyleすぎる」と怒られそうだが、個人的にiPhoneにつけてほしいと思う日本語変換UIを図示してみた。こんなの実装してくれると嬉しいんだけどなぁ、と。

henkan1(拡大図)

henkan2(拡大図)

henkan3(拡大図)

画面3と4の間は文節区切りミスの修正。指でスライダーアイテム(<> ←こういうの)をスライドさせて行う。「富士」と「林檎」の間あたりに指を置いて上にスライドさせると、新しい区切りがあらわれる、という機能も追加するといいだろう。

henkan4(拡大図)

静止画で伝えるのは難しいが、何となくイメージしてもらえただろうか。ユーザーインタフェースに正解はないと思っているが、少しでも私の理想に近い入力システムが現われてくれんことを祈っている。

※じゃぁお前はQWERTYキーボードローマ字入力するなよ!とか言われそうだがそれは棚に上げておくw

*1:正式名称は不明

2008-05-16

入力ミスを減らすメールアドレス入力フォームの作り方

メアドチェックフォームメールフォームでgmai.com abc.jなどはGoogleの検索結果よろしく「もしかして...Gmail?」と指摘してほしい。

つまり、アットマーク以降の入力文字列のうち、g,m,a,i,l,c,oのうち5文字を含んでかつ11文字以内のアドレスで、かつGmail.comと入力されていないなら「Gmail.comではありませんか? Gmai.comと入力されています」とWARNINGを出すメールフォームとしてはどうか、ということだ。

メアドはなるたけ簡単に入力させたいが、入力ミスは救ってあげたい(すべてではなくても)、という二律背反に対するひとつの解決策ではないかと思うのだが、なぜ誰も実装しないのだろうか。

この流れでhotmail/yahoo mailぐらいは最低対応させたいものである。あと、よくあるのが以前書いたUIについてのエントリでも触れたがdot/commaの間違い、入力忘れ。このあたりも簡単に検出できると思うのでWARNINGメッセージで対応したい。

入力フォーム→確認フォーム→決定 という流れになることがほとんどなので、確認フォームででかでかと赤背景のWARNINGを出すなどすれば親切だろう。はてなの会員登録フォームをレタッチしてイメージ図を作ってみたので参考にしてほしい。実際にGmai.comというアドレスを使っている人にとっては無視すればいいだけなので、それほど疎ましいダイアログでもないと思うのだが。私の会社から世に出すシステムでは、こういったUIチューニングをしっかりかけたいと思う。


※今回のネットと家電のキャズムを超えろ!会議第2回募集にあたり、gmai.comの方が2人、会社名.j(P抜け)の方が1人いらっしゃったのでふと思いついたエントリーでした


ネタインスパイア元:

イマドキのユーザー登録が絡む系のデバッグの小ネタ

自分で以前書いたメールフォーム含む入力UIのネタ:

会員登録の敷居を下げる入力フォームの作り方(PC編)


※ええかげんUIネタが増えてきたのでユーザビリティというジャンルを1つつくりました。かならずしもUI話に終始しないので、User Experienceを含むネタをここに分類します

※※fshinさんのエントリーはなんとなく文体とか切り口が好きなのでつい絡みたくなってしまいます...。ホモではありません(ぉ