UPDATE：2017.1.26
- CATEGORY
右か左か・・・！あなたのことを考えたUI(ユーザーインターフェース)
何気なく生活している中で、なんとなく使っている生活用品や、スマートフォン。ふと立ち止まって今自分の使っているものを見てみると、使用するユーザーが使いやすいようによく考えられて作られています。
時代とともに色々なものが形を変えてきました。
ホームページに関していえば、パソコンで見るのが当たり前でしたが、最近ではスマートフォンの普及により、パソコンよりもスマートフォンでの閲覧の方が多い時代です。
画面上のカーソルを操作するという使い方から、指で直接タッチ操作する形へと大きく使用方法が変化しました。
ユーザーとの繋がりを考える。
ホームページは目の前に物体としてあるものではありません。全てパソコンや、スマートフォンを通して画面の中に２次元のものとして存在しています。
ユーザーとホームページをつないでいるものは今見ている画面のみです。
画面上でタッチ、クリックのみでユーザーに対してわかりやすく、ここを押したらどうなるのか、といった事を表現できなければホームページは意味をなさないでしょう。
ウェブデザインとは。
Webデザインという言葉を聞きますが、パッと見た時にどういったイメージを持つのでしょうか。「なんだかアーティスティック！クリエイティブなイメージ！！」
なんて思われる方もいるのではないでしょうか。
Webデザイン＝芸術ではありません。
ホームページは使用するユーザーが使いやすく、なおかつ企業様のことを理解してもらうためのツールです。
デザインが洗練されていてパッと見た時に「すごっ！！」っと思うようなホームページであったとしても、ユーザーが使い方を理解できなければそれだけで終わってしまい、企業のことをより知ってもらったり、商品を買ってもらったりするという目的を達成することができずにユーザーはホームページを離れてしまうでしょう。
見た目がすごいこともいいですが、そこは本質ではありません。
Webデザインとは
- ユーザーがわかりやすく
- ユーザーが使いやすく
- ユーザーにとって見やすい
こういったユーザーとホームページや、機械、システムとの「つながり」のことを「UI(User Interface ユーザーインターフェース)」と言います。
ユーザーインターフェースについて考えてみる。
実際にユーザーインターフェースについて考えてみたいと思います。ホームページでユーザーがする動作をまず考えます。
パソコンのユーザーインターフェース
パソコンでの考えられる操作方法と操作するもの
- マウス
- キーボード
- クリック
- ホイール操作
- ドラック&ドロップ
- キーボード入力
では、ホームページでよく見かけるボタンを例にして考えてみましょう。
実際に下のボタンを見てください。
よく見るようなボタンだと思います。この二つを見比べた時にどちらがクリックできそうでしょうか？
おそらく多くの方が左側の方がクリックできそうだと感じたのではないでしょうか。
パソコンのリンクボタンは文字色が青、アンダーラインが入っているものが一番ボタンとして認識されます。
このように表現することによって、ユーザー側にボタンだという印象を強く与えることができます。
スマートフォンのユーザーインターフェース
続いてスマートフォンのユーザーインターフェースについて考えてみます。スマートフォンでの考えられる操作方法と操作するもの
- スマートフォン
- 指
- タッチペン
- タップ操作（指で画面を叩く操作）
- スワイプ操作（指を上下左右に動かす動作）
- ピンイチ、ピンアウト（親指と人差し指など二本同時に広げたり縮めたりする操作）
- シェイク（スマートフォンを振る動作）
では、パソコンと同じくボタンについて考えて見ましょう。
スマートフォンがパソコンと大きく異なる部分はカーソルで操作するか指で操作するかという部分になります。
実際にボタンを見てみましょう。
先ほどのパソコン版のボタンと、幅の大きいボタンがあります。スマートフォンを操作するとした場合、多くの人が右側のボタンが押しやすそうに感じるのではないでしょうか。
パソコン版とは違い、スマートフォンは操作するのが指なのでカーソルよりもクリックする部分の幅が広くなります。
そのためボタン自体も大きくすることによって操作性を向上させています。
まとめ
今回はボタンを題材にユーザーインターフェースについて考えてみました。ボタン一つでもユーザーの心理、使いやすさなど色々と考慮して製作することによってクリック率が変化します。
そういった部分を「ユーザーの視点に立って」考え、実装し、ホームページの本質をしっかりと捉えたものをデザイン、制作する必要があります。
また、時代の流れによって使用するデバイスも変わってきます。
その時代にあったデバイスでの使用方法をしっかりと考えて、ユーザーの使いやすいもの選択して企業様の問題解決へと導くことが大切ですね。
