ウェブサービスの価値を向上させる、デザインの原則
どうも松井です。
最近、Twitterでオススメされていた本を読んだらほんとに良かったので少しご紹介したいと思います。
本はこちら→ UI/UX デザインの原則
UIデザインをする上で、そもそも認識されないと言う課題が起こる。
サービスのデザインをする時は、ウェブサイト以上にトンマナに気をつける必要があります。
WEBサービスは、普段無意識的に使うものでもあるので、文字が小さかったりボタンと認識されなかったりすると使いづらいものになります。
僕自身も、サービス開発のコミュニティーに入っていて、いろんなサービスを見るんですが、サービス内容にこだわるあまり、使い勝手まで考えると言うのが難しいように思います。
良いUIを、箇条書きにすると以下の事は最低でも気をつける必要があります。
- 文字が小さすぎる
- 他の要素の色と被ってしまい認識されづらくなっている。
- ボタン歩くないデザインやグレーアウトされているように見えて押せると言うことに気づかない
- 意味が伝わらないアイコンを使用している
- トンマナにより広告だと認識されてしまう
入力フォームを改善するためのTips
ウェブサービスを作っていると、ホームページと違って入力や投稿フォームが出多いことに気づきます。
フォームを改善することで、サービスをユーザーが使う際の体験価値が上がる事はよくある話だと思います。少し本に書いてあるチップスを紹介します。
- 小文字や大文字、半角全角を自動的に統一させる
- -(ハイフン)の有無をわかりやすくする
- 注意事項入力例はホーム外に記載する
- 必須か任意かは目立つ表記にする
- ステップ完了率を把握できるようにする
- エラーの場合は即時にフィードバックする
- エラーの理由を明記する
- フォーム送信完了後のアクションを明記する
まず小文字大文字、半角全角は自動変換にするは、郵便番号や住所の番地などを数字入力するときは、大文字であっても小文字であっても、自動変換できるようにすると入力がしやすくなります。
-の有無については、区分がつくように分けておく方が良いです。例えばスマホで入力する際は、電話番号の場合-が打つのが少しめんどくさかったりする事があるので、-を抜かした番号を入力してもらうと利用者にとっても便利です。
必須か任意かを目立つように表記したり、ステップ数がわかるように表記したり、入力中にエラーの場合は表示させたり、その際にエラーの理由を明記したり、ホーム送信完了後のアクションを明記するというのが入力する際の気配りなるので、フォームのUIはきちんと把握しておくだけでも、改善効果を見込めます。
サービスの初回にするチュートリアルは適度が良い
サービスを利用するときに使い方がわからないので、画面上にポップアップやモーダルが開き、説明画面が表示されますが、この本によると説明が長すぎると読まれないなどのデメリットがあるため、ツールチップなどで必要なときだけ表示すると言う方が良いようです。
確かに、作る側前もって説明を書いておいたほうが親切だと思ってしまうんですけど、使う側になった場合に長い説明は結構読み飛ばしてしまう事はあるんじゃないかと思います。
UIは、表面上のデザインと思われがちですが、体験を通したものに結びつきやすいため、デザインの良し悪しだけじゃなく、使い勝手や、利用者の目線にできるだけ近い設計を心がける方が良いかと思います。
まとめ
デザイナーは、表面上のデザインにこだわったり、逆に表面上のデザインを求められたりする機会も多いかと思うんですが、そこに甘んじるではなく、きちんとなぜこのデザインを選んだのか、どんな目的があるのか、この位置に配置したのか、論理的に説明する必要があります。また、導線の仕組みや仕様を設計することもデザイナーの仕事です。
僕自身は、仕様や要件定義から考えることがほぼですが、チームが大きい場合、ビジュアルデザインのみを担当する事も有るかもしれません。その際でも、きちんと仕様や情報として知っておく意図を伝えて、手だけを動かすデザイナーになってはいけないかなと思っています。
良いものを作るためには、見た目だけではなくて、そのサービス自体を理解して、その課題のフェーズに応じた提案をしていくのが良いのかなと思います。
