以前スマホデザインの基礎的ルールについて書かせていただきましたが、
(見やすい、使いやすいスマホサイトを制作するには? デザインのまとめ)
今回はスマホのUI設計についてご紹介いたします。
■ 1.利用シーンを想定する
スマホUIを設計するには、利用シーンを想定することが重要です。
ここでは例として、次のように利用シーンを仮定します。
『友達とご飯を食べに行くことになった!今すぐスマホでお店を検索しよう〜』
その時にまず、どのような情報を必要とするでしょうか?
・お店のメニュー、食べ物のジャンルは何だろう?
・お店までの道順はどれくらいだろう。
・電話をかけて予約をしておきたいなー。
・何時までやっているのだろうか。
・クーポン券はあったりするのかな?
などが考えられます。
これらの情報が分かりやすく、スムーズに頭に入るように設計できれば、ユーザーのニーズを満たすUI設計になるでしょう。
■ 2.使う場面(場所)を想定する
次に使う場面(場所)を考えてみましょう。
・歩きながらの操作、片手でも使いやすいサイトか。
・ボタンが見やすいか、押しやすいか。
・屋外で閲覧しても見やすいサイトになっているか。
さらに細かく考えれば、
▽ボタンが押しやすいか
→誤操作が起きないようボタンを詰め過ぎないようにする
→押しやすい大きさにする
→重要ボタンは右利きでも、左利きでも押しやすいよう横長のボタンを配置する
→指が届きやすい位置にボタンを配置する
→一目で重要なボタンと、そうでないボタンが分かるように大きさや色で差をつける
▽屋外で閲覧しても見やすいサイトになっているか
→背景と文字色の色のコントラストをつけ、はっきりと見やすい配色にする
などなどあげられますね。
まだまだほんの一部しかあげられていませんが、
利用シーンをしっかりと想定し、設計することが大事です。
■ まとめ
今回はご飯を食べに行くという設定で書きましたが、実際にはこのようなシチュエーションはたくさんあります。
『誰がどのような利用シーンでどのように使われるか』を今まで以上に考える必要がありますね。
また、普段使用していて『使いやすいサイトだな〜!不便なサイトだな、、』と気づいたことをメモしておくといざ設計&デザインを考える時にとても参考になります。
皆さんが使いやすいサイトを制作できるよう心かげていきます〜