ページ

2011年7月31日日曜日

[Web] UI/UXデザインがわかるサイト8つのまとめ

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

ここ数ヶ月、gleesyという新しいサービスをつくっているのですが、
どうにもデザインが難しい!

デザインが主観的な仮説の積み重ねになってしまっていて、いかがなものかと思ったので、
ユーザビリティの理論を調べてみました。

と、言ってもただの自分のためのまとめメモですが。

あと、gleesyが気になった方はhttp://gleesy.com/より事前登録をお願いします。

【0.目次】
―基本
 ・ユーザビリティ5原則
 ・デザインガイドライン

―ガイドライン
 ・3つのチェック項目と5つの法則
 ・インターフェースデザインで気をつけるべき10のこと
 ・カラーデザインの原則

―評価方法
 ・ユーザビリティテスト
 ・ヒューリスティック
 ・チェックリスト
 ・認知的ウォークスルー
 ・シナリオウォークスルー



【Ⅰ.基本】
まずは、ユーザビリティの基本となる考え方です。

ユーザビリティを考慮したサイト設計は以下のようなフローになっています。
この中でも特に構造はUIの基礎となるもので、非常に重要です。



次にユーザビリティ5原則とガイドラインについてです。


■ユーザビリティ5原則
ヤコブ・ニールセン博士による有名なユーザビリティの5原則です。
この5原則がすべてのユーザビリティの基本となると言えるでしょう。

『学習しやすさ』
 直感的かつ簡単に使用することが可能か

『効率性』
 ユーザーが目的をどれだけ効率的に行えるか

『記憶しやすさ』
 使い方は覚えやすいか

『間違えにくさ』
 間違いを起こしにくいか、また起こしても簡単にやり直せるか

『主観的満足度』
 ユーザがサイトを利用して楽しいと思い満足できるか


■デザインガイドライン
まず、デザインにおいて最も重要なのはデザインガイドラインを持つこと。
Apple, Googleといった企業でも、デザインのガイドラインがあります。

これをSatoshi Nkajimaさんが自身のブログで端的に表しています。

「ユーザー・シナリオを80:20ルールで切り分け、常に80の方(つまり多くの人が使うだろう機能)を最優先にした設計にし、20の方(あった方が良いかもしれない機能、一部の人が必要とするかもしれない機能)は思い切って犠牲にする」
ユーザー・インターフェイスの設計に大切なのはデザイン・ポリシー

そして、最大の原則は

『神は細部に宿る』

1pxの細かいところまでデザインすることが重要。

『ユーザーに考えさせない事』

言い換えるならば、直感的に把握できるようなデザインでなければいけないということです。
人はWebを見ているときは、基本的に考えることを好まないのです。



【Ⅱ.ガイドライン】
次に、実際のWebデザイナーさんや企業さんがデザインをしていく上で、
ガイドラインとしている項目をまとめてみました。

リンク先ではより詳細に書いてあるので、興味のある人はご覧ください。


■3つのチェック項目と5つの法則
・ユーザーの視点を理解しているか
・道しるべと現在地について適切か
・ユーザーを惑わすテキストが無いか

法則1「長いテキストを最初からよし見ようとは思わない」
法則2「長たらしい説明よりもまずキーワードをクリックする」
法則3「一度うまくいったらそれ以外の方法を模索しない」
法則4「ユーザーは現在地とそのサイトのボリュームを知らない」
法則5「最初に何の情報があるのかと気になっているのがユーザーである」
ユーザビリティの原則と現場で使えるユーザビリティテストの方法


■インターフェースデザインで気をつけるべき10のこと
1.クリック可能エリアは余裕をもって
2.ラベルテキストが上に行き過ぎないように
例)うまいことセンタリングされていないボタン上のテキスト
3.濃淡をつけて視線を誘導
4.色も使って視線を誘導
5.関連する情報はまとめましょう
6.Letter Spacingも意識しよう
7.入力フォームに自動的にフォーカスする
8.入力フォームをちょっとだけかっこよく
9.マウスオーバーでメニュー表示
10.確認画面をカスタマイズする
インターフェースデザインで気をつけるべき10のこと


■カラーデザインの原則
ベースカラー(基調色)70%
サブカラー(副調色)25%
アクセントカラー(強調色)5%
デザイン | 実践ガイド | ユーザーサイド 株式会社アーティス



【Ⅲ.評価方法】
原則やガイドラインに沿ってデザインをしてサイトが完成したら、
次は本当にそのデザインで良いのかというチェックを行う必要があります。

ということで、ここでは割と有名なユーザビリティの評価手法5つを紹介します。

■ユーザビリティテスト
ユーザビリティテストは、実際にサイトを利用してもらい、
その様子を観察し、テスターに質問するなどして問題点を探る手法です。
ユーザーの目線に注目したアイトラッキングも合わせて行われたりします。

企業に頼むと費用が高くつきますが、友人に頼めばその点も問題ないでしょう。
テスターの人数は5人程度でも十分意味があるそうです。


■ヒューリスティック評価
専門家がトライアンドエラー方式でサイトを試し問題の発見するという手法です。

専門家に依頼する必要がり、さらにその専門家の力量に依存するので、
あまり手軽とは言えないかもしれません。


■チェックリスト評価
チェックリストに沿って評価を行うという手法です。
簡単に誰でもできるので、まずはこの方法でサイト評価をすると良いでしょう。

ユーザビリティチェックツールというサイトが便利です。


■認知的ウォークスルー
認知的ウォークスルーとは、専門家がターゲットユーザーになったつもりで
サイトを閲覧/操作してみることによって、様々な問題点を指摘する手法です。

先に挙げたユーザビリティテスト+ヒューリスティックといった感じでしょうか。


■シナリオウォークスルー
シナリオウォークスルーとは富士通が独自に開発した評価手法だそうです。
認知的ウォークスルーと少し似ています。

具体的には以下の3ステップに評価を行います。

Step 1.イシューツリー
 ビジネスの目的、サイトの目的をMECEに分解する

Step 2.シナリオ抽出
 タイプ、目的、環境ごとにシナリオを作成し、そこから問題を抽出する
 例)おじいちゃんが孫の誕生日のためにCMで見たおもちゃを探す¥

Step3.認知モデルに基づく評価
 シナリオを3つの操作ステップ(読む、クリック、スクロール)に分け、
 4つの行動モデル(動機の発生、探す、実行する、結果を評価する)に沿って評価をする

Webユーザビリティ評価手法:シナリオウォークスルー法(*PDF File)



と、こんな感じでしょうか。

AppleやGoogleのガイドラインは今度まとめてみようと思います。
最後に、ユーザビリティのサンプルを掲載しているサイトを2つ紹介して終わります。


■サンプル
ここ1年くらいで見られた素晴らしいインターフェイスデザイン 12選
ウェブデザインのユーザーインターフェースに使えるサイトまとめ



2011年7月29日金曜日

[メモ] アメリカ未公開株式市場で注目の企業20+10

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

久しぶりの更新となります。
最近は、gleesyという新しいサービスを3人ほどでせっせとつくっているという状況です。

と、まあ新しいサービスをつくる上で何か面白いアイデアはないかなと思い、
未公開株を扱っているSecondMarketで注目されている企業をまとめてみました!

ちなみにgleesyは事前登録受付中なので、是非登録お願いします。
http://gleesy.com/

今回はSecondMarketのWatchersの数を参考に、面白い企業をピックアップしてます。

左の数字はWathcersの数で、注目度とほぼイコールと考えて良いと思います。

ちなみにFacebookとTwitterは以下のようになっています。

8240 Facebook
4719 Twitter

Facebookはぶっちぎりの注目度です。

■注目の未公開企業
1876 Yelp:レストラン系クチコミサイト
1500 Gilt group:プライベートオンラインセールサイト
1364 Livingsocial:クーポン/Facebookのアイテムレビューアプリ
1331 Hulu:動画配信サービス
1175 Craigslist:地域情報コミュニティサイト
1131 Square:モバイルクレジットカード支払いサービス
 995 Kayak:旅行料金比較サイト
 805 Etsy:ハンドメイドアイテムの売買サイト
 803 Spotify:音楽サービス
 609 Alibaba Group:中国のオンライン取引サービス
 460 eHarmony:オンラインデートサービス
 439 Flipboard:キュレーション・サービス/ソーシャルマガジン
 390 Rovio:ゲーム・デベロッパー
 368 Trulia:不動産検索サイト
 325 Chegg:教科書レンタル
 321 TheLadders:高給就職情報ウェブサイト
 276 Grooveshark:音楽サービス
 273 FleshDirect:食料雑貨品デリバリーサービス
 267 Angie's List:地域情報コミュニティサイト
 254 Seeking Alpha:ファイナンスニュースサイト

次は番外編で、MarketHackに載っていた注目企業です。


■最近注目されている企業
Kickstarter:ソーシャルファンディング
Popcap:ゲーム・デベロッパー
Sharespost:セカンドマーケット市場
Legalzoom:オンライン・リーガル・ドキュメントサービス
Lendingclub:P2Pのソーシャル貸付サービス
Surveymonke:アンケートサービス
Coupons:クーポンサービス
Hipmunk:航空各社の料金が簡単に比較できる
Justin.tv:ライブ配信プラットフォーム
Yousendit:ファイルストレージサービス


どれも面白いサービスばかりですね。
Legalzoomなんかはアメリカらしいサービスだなと。

製作中のgleesyも注目されるようにがんばりたいです。
プロフィールとソーシャルな紹介を組み合わせたサービスで、
ただいま事前登録受付中です!
http://gleesy.com/

と、最後にさり気なく宣伝を混ぜたところで今回は終了です。