ウェブデザインに手描きスタイルを取り入れてユーザーエクスペリエンスを向上

[コアヒント] 手描き風のスタイルをウェブページに適用してウェブサイトのユーザーエクスペリエンスを向上させる方法

この記事では、Web ページのユーザーエクスペリエンスを向上させるために、Web ページに手描きスタイルを適用する方法について説明します。

認識と信頼性

手描きスタイルは、人間の色彩を表現し、独特の認識を形成し、ユーザーに現実感をもたらすのに非常に役立ちます。友人からポストカードを受け取ったとき、そのカードがコンピューターで印刷されたものではなく、友人独自の筆跡で手書きされたものであることを常に望みます。手書きのメモは、印刷されたメモよりも常にカジュアルで親密な印象を与えます。

同じ原則が Web デザインにも当てはまります。手描きや手書きのスタイルを使用すると、製品の独自性、信頼性、信頼性が高まります。手描きスタイルが認識性とリアリティをもたらす方法の例を 3 つ紹介します。

ユニークな外観と感触

まず、手描きスタイルは独特の外観と雰囲気を与えます。有名なプロトタイピングおよびワイヤーフレームツールである Balsamiq が典型的な例です。 Balsamiq の機能は強力かつ複雑ですが、その外観と操作感は非常にシンプルで明確です。アプリケーションの手描きスタイルは、基本的なペンと紙のスケッチを思い出させ、ユーザーは製品の外観の詳細を気にすることなく、基本的な機能のプレゼンテーションに集中できます。同時に、この外観はバルサミク自体の独特なスタイルも形成しています。

認識とパーソナライゼーション

手描きスタイルはより高い認知度をもたらし、ユーザーに製品を覚えてもらいます。たとえば、Windows の有名なコードエディターである Notepad++ の新しいロゴは次のとおりです。

カメレオンのメインパターンは、製品自体の機能を完璧に示しているだけでなく (コードの蓄積と変更を強調表示)、アイコン自体も非常にかわいらしく見えるため、ユーザーの注目を集め、ユーザーが Notepad++ を競合のエディター製品と区別するのに役立ちます。

人間化と親密さ

手描きのスタイルは人間味と親密感をもたらします。製品によって提示されるコンテンツの背後には実際の人間がいて、その人々が製品の詳細を慎重に検討したことをユーザーに伝え、より現実的で信頼できるものにします。

iPad の有名な子供向け算数練習アプリである MathBoard は、黒板の見た目と感触を再現しており、子供たちは「黒板」に自分の手で直接数字を書くこともできます。この設定により、算数の練習が冷たく退屈なものではなくなり、人間味が加わり、使いやすく魅力的なものになります。

情報伝達とコンテンツ構築

情報がどのように伝達されるかによって、ユーザーが情報を見て理解するかどうかが決まります。手描きスタイルは情報をより効果的かつ明確に伝えることができます。ここに3つの例を挙げます。

製品の特徴を説明する

製品の機能を説明するには数行のテキストが必要になる場合がありますが、手書きの場合は 1 枚の画像で十分です。有名なアプリテストサービスである TestFlight は、Web サイトで機能を紹介する際に、テキストの説明に添える 4 つの付箋スケッチを使用しています。製品の機能に関する情報を提供すると同時に、Web サイトをよりグラフィック化して読みやすくします。

ワークフローのデモンストレーション

製品の操作における最初のステップと 2 番目のステップで何をすべきかを長い段落で説明する代わりに、各ステップにわかりやすい手描きの図を用意して読みやすさを向上させ、使用するテキストの量を大幅に減らすことをお勧めします。

ユーザーをガイドする

手描きのアイコンを使用すると、ユーザーを製品や Web サイトのさまざまな部分に誘導するのに効果的です。例えば、先ほど紹介した Stamped では、ウェブサイト上で漫画風の画像を使用して、ユーザーをさまざまなタイプのウェブページに誘導しています。

チームショーケース

ユーザーは常に、Web サイト、製品、またはサービスの背後にいる人々を知りたがっているため、愛情のあるチーム表示ページは特に重要です。連絡先情報を提供するだけでは十分ではありません。ユーザーに連絡を取る相手の人柄や精神を示し、チームが親しみやすく信頼できるものであることをアピールする必要があります。この目標を達成するには、手描きの絵を使用するのが良い方法です。例えば -

Knock Knock Factory チームのメンバーは、次の方法を示します。

Polecat の全体的なプレゼンテーション:

そして、手書きフォントでグローブの実際の写真が表示されます。

ストーリーテリング

手描きの絵の最も古く、最も一般的に使われている機能は、物語を伝えることです。製品の機能を説明する場合でも、製品に対するユーザーの印象を深める場合でも、手描きの絵を使って物語を伝えることは効果的な方法です。

たとえば、有名なプロトタイピングツール Axure のホームページには、ユーザーエクスペリエンス担当者とプロダクトマネージャーが自分の仕事について不満を述べているシンプルな絵が掲載されています。ユーザーの共感を呼び、製品に対する好感度を高めることができます。

Tourist Eye は、3 つの漫画を使用して自社製品の機能を説明しています。

ユーザーの注目を集める

ユーザーにどこかをクリックするように促したい場合は、手描きの円と矢印が適しています。たとえば、次のようになります。

場合によっては、複数の矢印を使用することも可能です。

もちろん、いつ止めるべきかを知っておく必要があります。手描きの矢印を乱用すると、逆効果になります。

元の URL: http://www.geekpark.net/read/view/167258