カテゴリー: Web、GUI (page 7 of 24)

685. ぴょこんと跳ねて教えます 〜iOS5.1、Windows8のロック解除〜


この日記を書いている日、AppleのiPhone/iPad/iPod touch向けのOSがバージョンアップし5.1となりました。その目立った変更点としてロック画面でのカメラ呼び出しがあります。従来(iOS5)はロック画面の状態でホーム(□)ボタンを素早く二度押しすることでカメラアイコンが出現し、そこから直接カメラアプリに遷移することができました。これは使いこなすと非常に便利なショートカットなのですが、見た目に手がかりがないので知らない人は知らないままになりがちという点が難点です。そこでiOS5.1では下の様にロック画面の右下に常時出しっ放しになったのです。しかし短押し(タップ)で誤反応してしまってはロック画面の意味がないので、実際にはここを押さえて上にフリックしてロック画面を追い出す様にする必要があります。面白いのはその誘導です。単に上向き矢印を描いておく手もあったんでしょうがAppleはそんなのカッコ悪い!と思ったんでしょうか。実際の動きを動画にしてみましたのでご覧下さい。

大抵の人はとりあえず短押ししてみるだろうと見越して、それに対しロック画面が上にぴょこんと跳ねるアニメーションを入れたのです。跳ねた向こうにカメラアプリが見えます。見事ですね。

実は時を同じくしてこの作法を導入した製品があります。今年末頃に発売が予定されているMicrosoftの次期OS、Windows8です。こちらは従来のログオン画面の上に時計入りのフォトフレーム的なスクリーンを置き、未使用時は綺麗な写真を待受画面的に表示しておくことができるようになります。このスクリーンを除けてログオン画面に辿り着くのに、上記のiPhone/iPod touchのロック画面と同じ上フリックなのですが、やはりクリックした時に一瞬ぴょこんと跳ねて後ろが見えるのです。

注:動画中に見えるオレンジの円はマウスクリックを示しています

他にも似たような工夫として、Android端末の通知領域を下スワイプで引き出せることを、画面上部のタッチ時に先頭部分をチラ見せするといったものがあります。タッチUIのジェスチャーは目に見える手がかりがなく知らないと永遠に気付けないのが難点です。こうした工夫でフォローするのは大切ですね。

677. [番外編] iPhoneアプリ「独りブレスト!発想会議」の制作を通じて


先般弊社では初のiPhone(iOS)向けアプリ「独りブレスト!発想会議」(以下、「発想会議」をリリースいたしました。アプリの詳細については是非紹介ページをご覧頂きたいのですが、今回このアプリのプログラミングを担当しました。お陰様で一時はAppStoreのビジネスカテゴリの有料アプリランキング1位を取るなど予想以上にご好評を頂いており、開発メンバーの一人としては嬉しい限りです。ご利用いただいている方々にはこの場を借りてお礼申しあげます。

私は今までにもプライベートでは簡単な業務支援ツールを開発してフリーソフトとして配布したり、業務内で利用するプログラムを作成してきましたが、広く一般ユーザ向けのアプリを、しかもチームで開発するということは始めての経験でした。普段はお客さんであるメーカーやサービス企業の作った製品を評価する立場にある我々が、そうした開発側の立場を経験することは色々と勉強になりました。

実際にあったエピソードをご紹介します。「発想会議」は起動するとタイトル画面が表示され、そこからロゴをタップすることでメイン画面に遷移します。当初ここはタップすると同時にパッと画面が切り替わるようになっていました。しかしデザイナーから「じわっと透けるように切り替えて欲しい」という要望があがり、そのこと自体は比較的簡単にできるので安請け合いしたのですが、後になって結構ハマりました。実際じわっと画面遷移すること自体はすぐに実現したのですが、AppStore申請直前の社内デバッグ段階で「じわっとしてる最中に他のボタンをタップするとそちらも反応してしまい2つの画面が開いておかしいことになる」ということが発覚したのです。慌ててじわっとしてる最中にボタンの反応を無効化する処理を追加したのですが、今度は「フリーズする(=無効化が正しく解除されずボタンが効かないままになる)」という報告が続出orz。結局じんわり効果を使っている全ての画面でこの問題を収拾するのに一週間程審査が延期になってしまいました。まぁ一週間もかかってしまったのは単に私の技術不足ではあるですが、ともあれ「画面がじんわり遷移する効果をつける」という変更をすることで、「じんわり遷移中に他の操作をされても問題が起きない事」も保証しなければならなくなった訳です。実際にはわざわざそんなことする人はまずいないだろうというにも関わらず、です。

我々は利用者の立場から「この機能が欲しい、あの機能も欲しい」と気軽に要望を出してしまいがちですが、それはその機能自体を実現する手間だけでなく、既存の部分と衝突して問題が発生しないか、ということを全て検証し直して問題ないことを保証しなければならないということなんですね。元からある機能が多い場合にはそれはとても大変な手間になります。欲しい機能自体がちょっとしたものに思えて「なんでこんな簡単なこと対応してくれないんだ?そんな技術もないのか?」と思っても、実際にはその何倍もの品質管理のコストがかかってしまう、ということを我々利用者も知っておくべきなのかも知れません。

P.S.

「独りブレスト!発想会議」はこんなアプリです。>解説動画

674. 携帯電話各社の災害用伝言板のちょっとした違い


この度の東北地方太平洋沖地震に被災された方々に、お見舞い申し上げます。

弊社も震災直後は計画停電対象エリアに含まれていた為、本サイトも不定期に稼働できなくなるなどして、しばらく運用を休止しておりましたが、徐々に再開して行きたいと思います。なお、再度電力不足が深刻化する夏までにサーバーを移転させるべく作業を進めております関係で、一部ページが閲覧できないなどご不便をおかけする可能性がございます。何卒ご容赦いただければ幸いです。

さて、震災後の初日記ですが、震災直後に気付いたちょっとした使いにくさを取り上げてみようと思います。それは、携帯電話各社が震災時に提供する災害用伝言板サービスに関してです。今回の震災で既に多くの方が利用されているかと思いますが、私自身も今回のことがあって家族に利用方法を教えるべく色々と動作確認をしていました。そんな中で、大手3社(docomo、au、Softbank)の同サービスにある違いを見つけてしまいました。それは、「消息を知りたい相手の電話番号を入力する欄に全角で入力してしまった場合」に関してです。

まずauさんに関しては何の問題もなく検索結果が表示されました。

次にSoftbankさんですが、写真のように「電話番号は半角11桁で入力してください。」と赤字で怒られてしまいました。

エラー自体は明確で特に迷うことはないと思いますが、普通暗記していないような数列です。どこかからコピーして貼り付けるといった場合もありうるでしょう。そしてなにより本サービスは緊急時に利用するものです。全角→半角の変換くらいはサーバー側で柔軟に対処してほしいものです。

そして一番残念だったのはdocomoさん。

なんと「正常に接続できませんでした。Invalid Data. Connection cannot be established.」だそうです(英語の部分を訳すと「(不適切なデータ。接続が確立できませんでした。)」という意味になります)。エラーメッセージがユーザにとって意味のある内容になっていません。具体的にそうすれば良いのか示されていないのです。

災害用伝言板は様々なリテラシの方が幅広く利用するサービスであると同時に、一刻も早く家族、知人の安否確認をしたいというタイムプレッシャーの下で利用するものです。ユーザに無駄な負担を強いないように改良を望みたいものです。

(本記事は2011年5月11日現在の調査に基づいています)

673. Nintendo 3DSの電子マニュアルと3D


Nintendo 3DS(以下3DS)を発売日に入手できたので時事ネタとして取り上げてみたいと思います。

やはり“使いやすさ日記”的に目を惹くのはアプリの電子マニュアル機能ですね。まだ内蔵アプリでしかチェックしてませんが、それらに関しては画面内で操作説明を確認することができます。しかも3DSでは(対応した)ゲームや内蔵アプリを一時中断してホーム画面に戻る機能が搭載されました。なので、操作の途中でわからないことができたら、下画面の下部にある「HOME」ボタンを押して一時的にホーム画面に戻り、そこで「取扱説明書」ボタンをタッチすれば閲覧できます。そして問題が解決したら再度アプリをレジュームすればすぐに続きから始められるワケです。セーブやロードの手間もなくいつでもマニュアルが見られるのは良いですね。

どう頑張っても写真では3Dっぷりはお伝えできません。
是非店頭デモ機などで御確認ください

またせっかくの3D(両眼立体視)機能を使わない手はないよねとばかりに、この電子マニュアルすらも3D化されています。具体的には写真にあるように図版に対してつけられた(1)~(4)のような指示線や枠が手前に浮いて見えるんです。弊社の業務で作成する報告書でもこうしたガイド線をつけることが多いのですが、元々の画面にある図柄と混乱しないよう気を遣います(「これが見つけづらいですよね」と赤でアンダーライン引くと目立って見えてしまったり…)。こうしてレイヤーを手前に浮かせて表現できるのはちょっと羨ましく思いました。

初代Nintendo DSはタッチペンというデバイスをゲーム以外の様々な用途に広げてユーザ・インターフェイスにちょっとした革命をもたらしました。3DSの裸眼立体視機能もこうして臨場感以外の面での活用方法を見せつけてくれるのではと期待が膨らみます。

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流かぁ、と感心したのも束の間、なぜかこちらの電話番号欄は半角強制でした(笑)。軽く裏切られた気分です。


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

« Older posts Newer posts »