WIndowsストアアプリのUI/UXの基本について考える
ストアアプリ開発を初めて半年くらい、当初はUI/UXを研究しようと、こんな本も買いましたが、技術を追う為に技術本は読むのにこっちは実はあまり読んでない。
技術系は必要な時に必要な部分を読むけど、UI必要な時ってのが判断出来ないのが問題なのか。と、そんな事を考えてたら先日聞いたセミナーの内容が面白かったので覚書を。
最適なボタンの大きさとは
マウスは1px単位でクリック出来るけれど人間の指は大体20pxがクリック範囲になるそうです。実験したら7mmの大きさのボタンであれば誤操作は100回に1回程度に抑えられる。なので、7mmより大きい素材作れば「小さくて押せない」とか「間違えて押してしまう」というクレームは避けれるという事ですね。ちなみに5mmに下げるだけで30回に1回誤操作が起きるらしい。
タブレットの操作感
これも言われてみれば確かにという感じで、タブレットを横向きで持った時にユーザが自由に操作出来る指は「両手の親指のみ」になるという事。
(写真、明らかにiPadだけど気にしない)
確かに、手で持つと4本は支える為に隠れるので親指以外を使おうとするとそこで持ち直さなきゃいけなくなるのでタブレット向けのアプリで手持ちを前提としたアプリならば当然、考慮した方が良いアプリに近づく。
Immersive
ストアアプリのUXチームではImmersiveという言葉をコンセプトとして掲げているらしいです。意味は「没入する」とか「どっぷり浸かった」とかそんな感じ。それを実践するのになによりも大事なのはコンテンツが最優先という事。
要約すると、
・コンテンツこそがエクスペリエンスの中心である
・スクリーン上にはコンテンツに関係ある要素だけを配する
・ユーザの気を逸らす要素は最小限に
・ユーザーがコンテンツに没入出来る事。それがゴール
Grid
グリッドという概念が重要らしい(テンプレートであるくらいですから)。
[定義]
1 sub unit = 5px × 5px
1 unit = 20px ×20px1 colum = 80px
こんな感じですね。
コンテンツを分ける場合に何か明確な区切りを入れるのでは無く、目に見えない「余白」を効果的に使い、UIによってユーザに認識させるのが重要。
・同じグループに属するアイテム間は10px空ける
・グループを分ける場合はアイテム間は80px空ける
--参考サイト--
□アプリのユーザー エクスペリエンスをデザインする(公式)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh779072.aspx
□Windows ストア アプリの UX ガイドラインの索引
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465424
と、まあこんな感じでUIも掘り下げると色々出てくるので、またちゃんと勉強してここにも為になる情報書いていきたいと思います。UXガイドライン索引ももう一回さわってみます。
ちなみに先日書いた3/17のイベントではMicrosoftエバンジェリストの馬田さんがデザイン関連について色々話してくれるので興味ある人は必見です。