Page 32 of 165

672. Googleが作るとクレジット決済Webフォームはこうなる


 Googleと言えば、もっとも先進的なWeb技術を持った会社というイメージがありますよね。そのGoogleが作るとクレジットカード決済のWebフォームはどんな作りになるんでしょう?

 先日Androidを搭載したスマートフォンを購入したため、有料アプリ決済用にGoogleアカウントにクレジットカードを登録する手続き(Google Checkout)をしました。写真はそのフォームです。

 結果から言うと、「さすがGoogle!」って部分と、「あれ?」ってところと両方ありました。上から見ていきましょう。

■イケてる点1(図中「○1」以下同様)

 カード番号入力欄です。番号を16桁入力すると、勝手にカード会社が選択されました(該当カード会社以外のアイコンがグレーアウト)。普通は自分でVISAとかMasterとか選ぶ手間が1つ省けてます。またハイフンを抜いても自動的に付加されます。普通は「入れろ」とか「入れるな」とかどちらかを強制していますが、Googleさんは「どっちでもやりやすい方でいいよ」と言ってくれてる訳です。

■イケてる点2

 国際的なサービスのため、最初は住所欄の構成がアメリカ式に番地->市区町村->都道府県->郵便番号となっており、都道府県プルダウンメニューの項目もローマ字表記になっています。国際便のやりとりをしない人にはやや敷居が高いですね。しかし、そこで「国内の形式に切り替える」というリンクをクリックすると、写真の様に日本式の項目順に切り替わり、都道府県名一覧も漢字表記になります。一番上の「国/地域」で日本が選ばれてるんだから、最初からそうなってればいいんじゃないの?という気がしなくもありませんが、そこはやっぱりアメリカ国籍の企業ってところでしょうか。

■イケてない点1(図中「×1」以下同様)

 「おぉ、さすがGoogle、クレカフォーム1つとってみても芸が細かいなぁ」と思いつつ入力を郵便番号欄です。残念ながら昨今当たり前にようになってきている郵便番号→住所の自動変換がついていません。これの有無で手間が大きく違うし、入力ミスも防げるので、これがついてないのは残念です。

■イケてる点3

 次の「ご請求書送付先」欄。ちょっとラベルがわかりづらいですが、流れ的には住所の続き(字名、番地、建物名)を入れるところですね。ここでまた感動。番地や部屋番号などの数字を全角で入れると勝手に半角に変換されます。これもサイトによって「全角で入れるべし」と強制になってたりして、「そんなのシステム側で簡単に置き換えられるんだからエラー出してまでユーザに強制することですか?」と思ってた訳ですが、その場で自動的に変換してくれるのは初めて見ました。

■イケてない点3

 全角半角の区別でユーザを手間取らせないのがGoogle流かぁ、と感心したのも束の間、なぜかこちらの電話番号欄は半角強制でした(笑)。軽く裏切られた気分です。


 普段お使いの通販サイトと比べてみていかがでしたか?

671. いつまでかかるの? ?100万件から探す書籍検索?


最近、大きな書店に行くと、検索端末が設置してあってタッチパネル操作などで簡単に書籍の在庫や棚の位置を調べられるようになってますよね。結構重宝します。

写真は横浜市内にあるアカデミアという書店に設定された検索端末で検索している様子です。タイトルや著者名を入力しおわって検索結果を待っている状態です。「100万件のデータの中から探しています。」と大きく自慢しているかのように書かれていますが、他にユーザに伝えることがあるんじゃないでしょうか?実はこの写真、検索が始まってからゆうに一分以上経っていて、「日記ネタにしてやる」とiPhoneを取り出してカメラアプリを起動して、とかやってても悠々と撮影できました。これだけの間ユーザを待たせるのなら、プログレスバー(進捗状態を示すバーグラフ)等を表示するなどのフィードバックを出すべきでしょう。データベースの仕組み上、正確に何%の検索が完了しているかを報告するのは難しいかも知れませんが、それでもデータベースとはつながったのかとか、結果を読み込んでるとか表示できることはあるでしょう。最低でも砂時計のアニメーションを出すだけでも、フリーズしてないか判断材料位にはなります。もっといえばローテクに事前にサーバーは店内なのか遠隔地のデータセンターなのかとか、平均で何分くらい待つことになるのかを書いて貼ってあるだけでもユーザ側に心構えができて良いと思います。

100万冊をはるかに超える商品数を一瞬で検索できるAmazonnや楽天といったサービスに慣れたユーザにとって、1分を超える検索時間というのは色々と不安や不満が募るのに充分な長さです。もちろんそれが短くなるのが理想ですが、インターフェイス周りの工夫でエクスペリエンスを向上させる余地も充分にあると感じました。

670. 電池が切れたふりをするシェーバー


写真は我が家で数年来愛用しているPanasonic製の充電式シェーバー(電気ひげ剃り)です。新しいモノ好きの我が家の中では使用歴が長い部類に入りますが、まだ一度も電池切れで困ったことがありません。面白い工夫がされているのです。

この製品は充電池の残量がなくなりそうになると、一度電池が切れた“ふり”をします。モーターの回転が落ち普通に電池切れの様相です。しかしそこから一度スイッチをオフにし、すぐにもう一度オンにするとあと一度分は元気に動いてくれるんです。実際にメインバッテリーと別にキャパシター的な蓄電パーツを搭載していて切り替えてるのかどうかまでは不明ですが、現象としては一度切れたと見せかけて、あと一回だけ頑張ってくれるのです。単に電池切れ警告ランプがチカチカ光るよりもインパクトのあるアラートですよね。実際にモーターの動きが弱々しくなるので、あぁこれはすぐに充電しなくちゃという気にさせられます。ちょっぴりタンジブルビットな感じ[参考リンク]。でもそこから一度だけは剃れるのですぐにコードをつないで洗面所に縛られなくても済みます(忙しい朝には、ひげ剃りしながら他のことも並行でしたかったりしますよね)。

このシリーズのバッテリーインジゲーターは、最上位モデルは液晶10段階表示、中級モデルはLED5段階、下位モデルは充電催促ランプのみ、という差別化が伝統になっていますが、この機能があれば別に残量メーターは全く不要なんじゃないかって気がしますね。

他にも単なるランプや文字メッセージではない直接「感じられる」インターフェイス事例をご存じでしたら是非ご紹介下さい。

[参考リンク]
2011.02.04補足:

zundoyaさんからコメントいただきました。ありがとうございます。バイクのリザーブタンクも同様の働きをするそうです。完全にガス欠する前に一度走れなくなって、コックを回すとしばらく走れるんだとか。ほぉ~。バイク乗らないんでそちら方面はノーマークでした。どんなバイクもそうなってるんでしょうかね?

669. 過剰すぎるフィードバック ~ファイルコピー完了メッセージ~


 写真は先日発売になったばかりのSONYの電子書籍端末、”Reader”です。新しいモノ好きなので速攻で購入しました。まだオンライン書店には欲しいタイトルがないので、専ら“自炊”派です。

 さて今日話題にしたいのはこの”Reader”付属の転送ツール「eBook Transfer for Reader」です。電子書籍ファイルをPCから”Reader”にコピーするのに使用します。なぜか写真右側のタイトルが並ぶゾーンにドラッグ&ドロップできず、左のサイドバーの狭いエリアしか受け付けてくれない、という細かい不満もあったりするのですが、やはり最大の不満は写真でも出ている「ファイルの転送が完了しました。」という確認ダイアログです。

(写真クリックで拡大)

さて、これの何が問題なんでしょう?正常に処理が完了したことをユーザに知らせる、教科書通りのフィードバックを提供していますね。

  • ヒント1:一般的な電子書籍ファイルは数百KB程度。転送は数秒で完了する。
  • ヒント2:転送にはUSBを用いており、まず滅多なことで失敗など起きない。
  • ヒント3:転送中には別途プログレスバー(棒グラフ)付きダイアログが出ている。

 まぁ、既にタイトルでネタバレしてる感もありますが、そうなんです、これ毎回「OK」ボタンをクリックして消すのが手間でイラっとさせられるんです(モーダルダイアログといって、それが出ている限り他の操作は一切受け付けないタイプの表示です)。続けて次の書籍を転送するにも、アプリケーションを終了して”Reader”を取り外すにしても、必ずこのひと手間が要求されるのです。これ本当に必要でしょうか?

 皆さんにも馴染みが深いと思われるWindowsのExplorerのファイルコピーを思い出してみて下さい。これと同様にコピー中には進捗を表示するダイアログが出ますが、終わった時には(エラーが起きていない限り)黙って消えてくれますよね。そこで毎回「完了しました」って出て「OK」を押さなければならないと想像してみて下さい。「正常にコピーが完了した」という事実は、99%の場面で当たり前の情報だと思います。ユーザに確認操作を要求する程の重大事ではなく、エラーが起きた時にだけ教えてくれればいいんじゃないでしょうか?

 処理が終わり「次の作業に移ってもOKだよ」ということを知らせてくれることに意義がある、という視点もあります。ですがこれもやはりユーザの操作を要求する必要はないでしょう。例えばMacのFinderで大量のファイルをコピーをした場合、完了して進捗ダイアログが消えると同時に短い音を鳴らしてくれます。Windowsよりちょっぴり親切ですね。そしてこれで充分ではないでしょうか?

 プログラミング的にはモーダルダイアログによるメッセージはたった1行で済むので、プログラマーからすると使いやすいフィードバック手段の1つではありますが、その場面で本当に必要か、逆にユーザの次の操作を妨げていないかをよく検討したいものです。
 

668. ジェスチャーとアフォーダンスとヘルプの関係


 iPhoneやiPadなど最近のApple製品の破竹の勢いは止まるところを知りませんね。実家の父はPDAとしてiPhoneを愛用してますし、母は最近AppleTVで映画をレンタルして見ているし、姪っ子もiPod touchがお気に入り。ITリテラシーがさほど高くないウチの実家にも気付けばApple製品が数多くはいり込んでいます。

 ユーザインターフェイスの面でも新しい試みを数多く盛り込んでいて業界に大きなインパクトを与えているApple製品ですが、じゃぁAppleのUIはそんなに、初めてでもすぐ使えるほどわかりやすいのか、というとそこまでではないと思います。AppleのUIの大きな特徴として画面上の部品数を極力減らしてシンプルさを保っている点がありますが、その煽りで初めての人が操作方法を理解するための手がかり(アフォーダンス)すら削られてしまっているケースが多いんです。例えば画面をスクロールする方法を考えてみましょう。今までは画面の端にスクロールバーという目に見える操作パーツがありましたが、ジェスチャーではそれをとっぱらって「画面のどこでもいいからタッチして上下に動かす」という方式になりました。わかってしまえば便利なんですが知らないとちょっと困ってしまいます(厳密には両者は排他ではないですが、Appleは画面上の部品数を減らすことを優先してスクロールバー的なものを見せていません)。

Apple Magic Mouse

 iPhone等では画面の一番上の真ん中、時計が出てるあたりをタップすると画面が一番上までスクロールして戻れる、という便利技がありますが、結構知らないまま使っている人がいます。メールのタイトル一覧画面で横に指を滑らす(スワイプする)と「削除」ボタンが出現することも気付いてない人が多いようです。写真1はAppleが発売しているMagicMouseというマウスです。右ボタンもホイールもありませんが、実は上で指を滑らせればホイール動作になりますし、最近まで気付かなかったんですが右寄りをクリックすると右クリックとして機能させることもできます(要設定)。これらは便利技、ショートカット的な位置づけなので知らなくても致命的に困ることはないですが、知っているとそうでないのとでは使い勝手が随分違うので製品全体のイメージにも影響するんじゃないかと思います。

写真2. Magic Trackpadの箱の裏面(クリックで拡大)

 「誰でも説明書見なくても使い方がわかるようにしなければ!」と画面内にわかりやすいアイコンや文言のボタンを山ほど配置したり、ヘルプメッセージを出したりしてきたUIの歴史の中で、このアプローチは斬新です。iPhoneにはクリックするとヘルプが読める「?」ボタンもありませんし、イルカが「こんな便利な使い方もできますよ。」的なことを言ってくることもありません(笑)。

 「使いこなす為には多少ユーザも勉強しないとならないけど、覚えればすごく使いやすい」という考え方は個人的に賛同できます。一目見てわかることに固執すると、慣れた後にはややウザいインターフェイスになりがちです。とはいえ、PalmのGrafftiという文字入力方式のように、そういう考え方をしつつも市場から消えていった製品もあります。Appleが上手いのは、ジェスチャーデザイン自体が自然で納得しやすいものであることに加え、それをあちこちでPRしている点じゃないかと思います。TVCMもそうですし、Appleの公式サイトには動画コンテンツも用意されています(動画はジェスチャーの説明にはうってつけですね)。基本的には機能の紹介ビデオなんですが、見てると「へぇ、そこスワイプするとそんなことができるのかっ!」と操作学習にもつながる作りになっています。またMagic Trackpadという外付けのタッチパッドでは、箱の裏に使用できるジェスチャーの一覧が印刷してあり、「おっ、こんな操作もできるのか。ちょっと試してみよう。」と思わせます(写真2)。学習前提のインターフェイスでありながら、単に「取説読め」では終わってないところがAppleの抜け目のないところなんじゃないかなと。 

« Older posts Newer posts »