2012-02-15
Windows PhoneのUIについて思うこと
Windows Phoneのアプリを開発していたり、使っていたりしてると、ふと気づく事があります。今日はそんなお話。
ボタンコントロールの使い方を考えよう
一番思うことは、「はたしてその場所にボタンがあっていいかどうか」ということ。確かにボタンは便利です。ただ、使い方によっては不便になってしまうことがあります。
ボタンはどんなときに不便か
ずばり「ユーザーに何かを入力させてからアクションをするとき」だと考えています。文字を入力する際、TextBoxにフォーカスがあたると、その位置によってOS側が入力中の文字が見えるように自動で位置を調整します。そのとき、TextBoxだけでなくボタンも一緒に動きますから、配置によってはボタンが見えなくなる時があります。特に注意したいのは、TextBoxの上下にボタンがあるパターン。下の図のように、入力する時にボタンが見えなくなってしまうと、次にユーザーにさせたいことがユーザーに伝わらなくなってしまう（忘れてしまう）ため、ユーザーに一度フォーカスを外してもらう必要があります。
これならまだフォーカスを外すためにタップする場所はありますが、もしかするとタップしたら予期しない動作をするかもしれない配置になっているかもしれません。下のような状態だと、フォーカスを外すためのタップ領域はごくわずかになってしまいます。Backボタンを押した時に間違えて二度押してしまうかもしれません。
じゃあ、TextBoxの横にボタンを置けばいいよね。ってなるのですが、それもそれで不便だったりします。TextBoxからボタンへフォーカスが移動するということは、キーボード領域が折りたたまれるということで、ボタンも一緒に元の位置に戻ります。そのときボタンを押したはずなのに押されなかった（半押し状態でカーソルが別領域に移動した）扱いになることが多いのです。エミュレーター上ではクリック動作が一瞬で終了するので確認しづらいですが、指でタップするときはその誤作動が顕著に表れます。
エミュで動作確認をする場合は、クリックする時は1秒以上ボタンを押し続けるつもりで確認をした方がいいでしょう。この例がすぐわかるのは、「乗換案内」アプリですね。経路検索で [検索] を押してもなかなか反応しません。
どうすればよいか
Application Barを使いましょう。文字を入力させて、次にボタンを押してアクションするタイプの場合は特に有効です。キーボード領域の下に必ず表示されるのがApplication Barですから、ボタンがどこにも見当たらなくなっても、Application Barに次のアクションをするボタンがあれば、人は自然とそのボタンを押すようになります。
とっても自然です。アイコンはそれらしいものを使えば、絵だけで次に何を押せば目的の動作に移れるかがわかりますし、1個だけ置いておけばそのボタンを押すしかないなっていうのがわかります。
(2月16日追記)
もうひとつ、キーボードの入力種を「Search」にする方法もあります。Enterキーの色が反転してわかりやすくなります。
Enterキーを押したときに何らかの処理を行いたい – CH3COOH(酢酸)の実験室
<TextBox Name="textBox" KeyDown="textBox_KeyDown" InputScope="Search" />
この状態で以下のようなイベントハンドラーを書いておけば、Enterキーを押した時に次のアクションへうつることもできます。
private void textBox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e) { if (e.Key.Equals(Key.Enter)) { // なんか処理を書く this.Focus(); } }
これで注意しなければいけないのは、次のアクションが予測できるかどうかです。この入力種は端末下のSearchボタンをクリックした時のキーボードでも同じ状態になりますが、この場合はEnterキーを押せば次は検索動作が起きるだろうということがすぐわかります。
この方法は、複数行入力する事を可能にしているTextBoxでは使えないのでご注意を。
ボタンが便利なとき
ざっくり話すと、文字の入力だけで操作が終了しないときとか、単にボタンを押してもらうだけのとき、文字を入力してからのアクションの場合は「配置が自動で移動しない位置に置ける」ときが有効ではないかと考えています。
配置が自動で移動しない位置というのは、PivotやPanoramaを使わず、画面最上部にTextBoxとボタンが置ける位置のことです。この場所だと、キーボードが展開されてもTextBoxが隠れることがありませんので、配置は移動しません。
まとめ
文字を入力して、次にボタンによるアクションをしたい場合は、ボタンコントロールではなくApplication Barを使いましょう。
乗換案内使ってるとイライラするんですよー
2012-02-14
シティバンクに口座を作った
世界のつもりん先生 (id:tmyt) が先日AppHubからペイアウトされたそうで。
Windows Phone Marketplaceからペイアウトされた話 - tmytのらくがき
その中でこんな事が書かれてました。
そしてその後今更感を漂わせながらシティバンク銀行のeセービング口座を開設しました。この場合だと国際送金で受け取る場合の手数料がかからないらしいので、かなりお得です。eセービング口座なら口座維持手数料もかからないのでもってて困ることはないと思います。口座開設もWebからフォームを記入して本人確認書類をiPhoneあたりで撮影してJPEGを送信するだけでおっけー。15分程度で申し込み自体は完了するのでおすすめです。
手数料が掛からないときたら僕だって、ということで、シティバンクに口座を作ってみました。
作り方は簡単で、上記引用のように本人確認書類をデジカメで撮ったり、スキャナーでコピーしたりして用意して置いて、「口座を開く」の中から「インターネットで」の項目を選択して指示に従って手続きします。
3営業日くらいで口座開設したよメールが届くので、そのときに口座番号が取得できます。
AppHubでは銀行情報は英語で書かなければならないので、僕はこう書きました。
- 銀行名
- Citibank Japan Ltd.
- 支店名/出張所名
- Internet Branch
- 住所
- 2-3-14 Citi Group Center, Higashi-Shinagawa, Shinagawa
- 都道府県名
- Tokyo
- BIC/SWIFT
- CITIJPJT
- 銀行の口座番号
- マルチマネー口座の口座番号
間違えてたら教えてください :)
そういえばW-8BENの書類適当にアメリカへ郵送したけど音沙汰がない…
2012-02-10
Windows Phoneを使ってて気がついたこと
Windows Phoneのカーブフリックで文字を入力していて気がついたのですが、記号入力の画面（顔文字が書かれてるボタンを押した時に出るメニューみたいなの）の部分で、左にフリックすると[履歴]->[顔文字1]->[顔文字2]->[記号]->[特殊文字]と移動できるんですね。今まで全然知らなかった（汗
というわけで実際に動かしてる動画を載せておきます。
ちょっとした 小技 ってヤツですね。
2012-02-02
本を買いました
なんだか久しぶりに本を買った気がします。技術書。
先日 id:ch3cooh393 (酢酸) さんが買って読んでた「C#プログラムの効率的な書き方」って本を買いました。
LINQ to Objectsのことがもっさり書かれた本です。
僕も最近Reactive Extensionsがらみでよく見るようになって、地道にLINQというものに触れていこうと頑張っていますが、なかなか難しいんですよね。
First()とかSelect()とか、Where()といったくらいでおなかいっぱいになってて大変。しかしLINQを触っておかないとおいていかれそうでこれまた大変なんですよね。
で、酢酸さんがこの本を買ってたので良い本なんだなと思って買いました。勢いで本を買ったの久しぶりかもしれないなぁ。
まださらさらとしか読んでませんが、LINQ to Objectsはすばらしいものだというオーラがすごくでていて、覚えないと損だなって思えてきます。
この本にある『自分だけ自己満足のタコツボに入ればよい、という時代ではないのである』って、昔の自分に言ってやりたいくらいで、C#3.0とかが出てた時でも、「C#2.0こそが至高。3.0など邪道でしかない」などと意味不明なことばかり言いつつ何も新しいことにチャレンジしていなくて、つい最近ようやく必死になってお勉強しだしたという感じなのです。
だからこそ、LINQもこうやって専門の本を買って勉強しようという訳です。
僕もLINQ星人になれるよう努力します。
2012-01-01
あけましておめでとうございます。
2012年です。
昨年はいろいろありました。Windows Phone 7にどっぷりはまった一年でもありました。
今年もWindows Phone 7にどっぷりはまりつつ生きていきます。
今年もどうかよろしくお願いいたします。
