古事連記帖

趣味のこと、技術的なこと、適当につらつら書きます。

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を使いましょう。


乗換案内使ってるとイライラするんですよー