BLOG きょうのできごと

自宅のマンションとwebサイトのUI

この記事は、UI Design Advent Calendar 2015の3日目の記事です。

最近のマンションはコントロールパネルだらけ、わたしの自宅もボタンが結構ありました。
宅配BOX/給湯システム/電気のスイッチ/トイレのウォシュレット/オートロック…

ホームページという言葉があるくらい、webサイトは何かを発信するホームであり、
ゲストに居心地良く・興味をもっていただく場所でありたい。

自宅マンションの、わかりやすいUI/わかりにくいUIを例に
はじめての訪問者にわかりやすいwebサイトのUIについて考えてみます。

わかりやすいUI:キッチン換気扇のボタン

わかりやすいUI:キッチン換気扇のボタン

はじめて見た人も迷いなく使える、切・弱・中・強の文字表示。
ボタンが1CM近く凸出ていて、押すと凹む構造。

  • 現在の状態がわかりやすい
  • 押した時に音がするスイッチ感
  • 文字表示があり機能が分かりやすい

わかりにくいUI:風呂場の電気スイッチ

わかりにくいUI:風呂場の電気スイッチ

初めて見る人は、どの場所の何のボタンか見た目でわからない。
何が起こるか予想がつかなければ、ボタンを押す気持ちが下がってしまう。

  • 何も書いていない同じボタンが2つ
  • アイコンも文字も無い
  • オンオフの状態がボタン側で解りづらい

私の考えるわかりやすいUIの3原則

1)押す前に押した後が想像できる

入口から見渡してどんな雰囲気かざっくり解る
最初の1ページがおもしろい=他のページも同等のクオリティを期待する

2)現在の状態がわかる

URLで現在地の予想ができる
ページのどの位置に居ても現在地がわかる、またはわかる場所にすぐ戻れるUIを用意する

3)戻りやすく、進みやすいUI

文字と記号で機能を示す
押し間違えは嫌われやすい、メニューはシンプルにまとめる
ブラウザの戻る機能を使わない人もいる、逆にブラウザの戻るしか使わない人もいる

家電、ゲーム、道具などあらゆるモノの操作性を観察していると
webとの共通点と使いやすいUIの方法が見えてきたりします。
というか何を見ても触っていてもwebサイトと関連付けてしまう。

見た目や流行りより、知らない相手に伝わることが重要。
直接会えない人に伝える手段となるwebサイトを作りたいです。

  • アーカイブ