MEMOPATCH

より良いUIデザインを作る為に必要な8つの基礎

  • このエントリーをはてなブックマークに追加

こんにちは、だいきです。
今回はUIに関するおもしろい講演のまとめを見つけたのでブログにしました!

その講演は2011年の年末に開催された「シリコンバレー コードキャンプ」にてCitrixのプロダクトデザイナーであるUday Gajendar氏が
「より良いUIデザインを作る為に必要な8つの基礎 (原文タイトル: “How to Master Good UI Design”)」 
にという題目で話したものです。
Citrixとは…米国フロリダ州に本拠を置く情報テクノロジー企業のことである)

以下がGajendar氏がその講演内で話した8つの基礎的なUIについてです。
(この記事はDICE内の記事 “How to Master Good UI Design”の翻訳です)

基礎1:グリッド/レイアウト/構造

photo credit: adactio via photopin cc

 

Gajendar氏『優れたUIデザインを作るにはグリッドを使ったレイアウトを考える必要があります。グリッドを使うことで、整列、規則性、リズムとコントロールを創り出す出すことができます。
しかし、重要なUI設計スキルである「どのようにグリッド使うか」をマスターするのには何年もの時間がかかります』

グリッドを理解することでデザインに高い優先順位、またはフォーカスするべきポイントを与えることができます。

グリット3つの構造:

  • ナビゲーション – 簡単で、意味のあるユーザーのサイトでの道筋を示す。(タスクフロー)
  • 情報 – コンテンツおよび動作のグルーピング(メニューおよびタブ)
  • ビジュアル – 魅力的、かつ明確な画面のコンテンツをまとめる(レイアウト)

あなたが膨大なデータを処理する必要がある時でも、グリッドを使うとこで、整理し、混乱なくデザインに一貫性を持たせることができます。

基礎2:タイポグラフィ

photo credit: arnoKath via photopin cc

 

タイポグラフィとは、音声、読みやすさのトーンのことで、人間の声のトーンと似たようなものです。作り込まれたタイポグラフィを使うことでユーザーと効果的なコミュニケーションをとることができます。

同じ意味の言葉でも異なる方法でフォントをレンダリングすることで違った表現をすることができます。
Gajendar氏は、Googleでは数多くの種類のフォントが使われすぎているのに対し、
Quoraではフォントがとてもきれいに整理されていることを指摘しています。

そしてGajendar氏は3種類のフォントでWebサイトを構築することを勧めています。
Gajendar氏『使うフォントが3種類だけでもあなたのサイト上でユーザーが混乱を起こさないかどうかを確認してみてください。もしそれがダメならばまずはあなたのサイトを改善するところから初めてください

基礎3:カラー

色はフォントと同じように表現することができますが、色はフォントでは表現できない、ダイレクトで強い感情のインパクトを表現することができます。
Gajendar氏おすすめのカラーパレット作成ツールはAdobeのKulerです。
色を上手く使いこなすことでサイト上のトラブルを解決したり、何かを表現する、ユーザーに感情をあたえる、さらにはブランドのクオリティを高めることもできます。

基礎4:アイコン

Gajendar氏が指摘するアイコンに関する最大の問題は、アイコンの使い過ぎです。
アイコンは視覚的に、ステータス、機能やブランドを示しています。
アイコンを使う目的はユーザーに見た目だけでどんな機能なのかなどをわかってもらうためであって、UIを複雑にするためではありません。

これらの最初の4つの基礎である、レイアウト、タイポグラフィ、色、アイコンは、慎重に選んでください。そして最小限の色、タイポグラフィ、アイコンを使って何ができるかを考えてみてください。

基礎5:メタファー(比喩)

表現としてメタファーを使うことで、Webサイトや製品を正確にユーザーに伝えることができ、そのWebサイトや製品がなんなのか、どうやって動かすのかをユーザーに理解してもらうことができます。

スライダーはメタファーを作成するための良い方法です。
多くのデザイン上の問題は、単にボタンのラベルやメニュー項目、機能名などに使われる言葉が複雑であることが原因です。
Webサイトなどで使われる言葉は日常会話よりも易しいものでないといけません。あなたの意図しているユーザーはあなたのサイトで使われている言葉が理解できているでしょうか?

基礎6:行動

デジタル製品は何かをするために使用されます。
インタラクティブな挙動、特に直接ユーザーの手の動きで直感的にデバイスに入力できることは非常に重要です。

アフォーダンス、動き、フィードバックの3点非常に重要です。
これらの3つの要素はユーザーの行動を良く示すものです。
あなたは、ユーザーに対して
 何かの上にマウスを置くとどうなるか、
 ドラッグするとどうなるか、
 クリックするとどうなるか、
を理解してもらう為に情報を与えないといけません。
アフォーダンスはユーザーに情報を与えることで何ができるかを示します。
フィードバックはユーザーが何をやったかを再確認してもらう為のものです。

(アフォーダンスとは… 知覚心理学者 J=ギブソンの理論。環境の意味や価値は認識主体によって加工されるのでなく,環境からの刺激情報のうちにすでに提供され,固有の形をとっているという思想)

基礎7:パターン

photo credit: mortimer? via photopin cc

Gajendar氏『パターンは特定のコンテキスト内で共通に起こる問題を解決する最高の表現です
あるコミュニティの周りに共通の問題がある場合にそれは解決されると、 一般的にその他の解決方法も自然に出てきます。

基礎8:原則による一貫性

photo credit: Eustaquio Santimano via photopin cc

あなたが実行する、視覚的、または行動的な原則はあなたが一番初めに定めたゴールに沿っていなければなりません。
何か疑問に思うこと(例えばなぜこれをここに配置したかがわからなくなった時)があれば必ず最初に決めた原則を思い返してください。
最終的には”良いインターフェイスとは何か”という問題を解決してください。

(参照: DICE “How to Master Good UI Design”

  • このエントリーをはてなブックマークに追加

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。