(追記) UXデザインのプロセス その2

追記

このエントリではUXデザインのプロセスのうち、ストーリーボード作成まで実施しています。
次のスケッチ、プロトタイプ、実装についてはコチラ！

今回はUXデザインとしてストーリーボード作成をします

前回の記事ではデザイン調査とペルソナ作成をしてみました。
このエントリでは、ストーリボードの作成をしていきます。

このエントリの目次

1. ストーリーボードとは
2. ストーリーボード作成の目的
3. ストーリーの作成
4. ストーリー作成のコツ
5. ストーリーボードの作成
6. さいごに

1.ストーリーボードとは

映像作品のプロセスでいう、「絵コンテ」にあたります。

2.ストーリーボード作成の目的

それは、ペルソナがしたいコトを提供する際、どのようなUXを提供するといいのか を追求するコトです。
このプロセスでは、実現可能性はそこまで深く考えず、とにかくペルソナが喜ぶようなシナリオを検討します。
そうするコトで、ペルソナが求めるUXに近づくことができるのです。

3.ストーリーの作成

ストーリーボードを作る前に、まずはそれのもととなるストーリーを考えます。
ペルソナの行動や関心を一区切りとして分割していきます。

このサイトを対象として、以下のように考えてみました。
ペルソナの名前を「太郎」とします。
ストーリー名：エントリの閲覧

1. 太郎はあるワードで検索、結果に表示された記事の概要を見て当サイトへのリンクをクリックする
2. 太郎はエントリを「ザッと」見て、目的に合致する内容だと「すぐに」思い、きちんと閲覧するコトにする
3. 太郎はエントリに書いているサンプルコードや手順を、書いてあるとおりに「簡単に」試す
4. 太郎は同じ話題を扱っているエントリを発見し、見に行く
5. 以下、3. → 4. のループ

4.ストーリー作成のコツ

上でも述べましたが、コツは 実現可能性を無視しない程度に、とにかくユーザーにとって最高のシナリオを考えるコトです。

また、秘書型システム(このワードでググる)、道具型システム(このワードでググる)という考え方を知っていると、ストーリー作成の助けになります。

5.ストーリーボードの作成

以下のような絵を作成しました！


作成するときの注意点として、サービスの画面内容は書き込まないようにします。
なぜなら、書きこんでしまうと実際の画面を想定しまい、UXに集中できないからです。

6.さいごに

今回のエントリで、考えてなかった問題点が見えてきました。
エントリの出だしや当サイトの右カラムについて、検討の余地がありそうです。
「右カラムに美人時計が表示してるけど、誰得だよ…！」って思いました。

スケッチ、プロトタイプのプロセス に続く？！

参考書籍

HTTP Status Code を見るUIWebView のサンプルコード

はじめに

iOSの開発に手を出しました。
Objective-C は初でしたが、最初は意味不明でしたね。
特にメソッド呼び出しとデリゲートについて。

まあそれは置いておいて。

UIWebViewは簡単にWebページをブラウザできるのでよいのですが、なんとHTTP Status Codeを見れないようです。
404 Not Foundみたいな表示がそのまま出ちゃうと。
それはよろしくないので、HTTP Status Codeを見て、その後の処理を制御するサンプルコードを書いてみました。

このエントリの目次

1. GitHubにあげたiOSプロジェクト
2. ソースの重要な箇所
3. 閑話休題 「GitHub for Mac」について
4. さいごに

1.GitHubにあげたiOSプロジェクト

コチラになります。

2.ソースの重要な箇所

以下に貼付けます。
GitHubのソースの47〜77行目にあたります。
コメントを読めば処理の概要は分かると思います。

- (void)kick:(NSString *)url
{
    NSMutableURLRequest *urlRequest = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:url]];
    
    //UserAgentをセットします
    NSString *userAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
    [urlRequest setValue:userAgent forHTTPHeaderField:@"User-Agent"];
    
    //urlにアクセスします
    NSHTTPURLResponse *response;
    NSError *error;
    NSData *responseData = [NSURLConnection sendSynchronousRequest:urlRequest
                                                 returningResponse:&response 
                                                             error:&error];
    //何らかのエラーが出たとき
    if ([response statusCode] >= 400 || error) {
        UIAlertView *alert =
        [[UIAlertView alloc] initWithTitle:@"エラー" 
                                   message:[NSString stringWithFormat:@"HTTP STATUS CODE:%d", [response statusCode]]
                                  delegate:self 
                         cancelButtonTitle:@"確認" otherButtonTitles:nil];
        [alert show];
    }
    //正常なレスポンスのとき
    else {
        [webView loadData:responseData MIMEType:[response MIMEType] 
          textEncodingName:[response textEncodingName] 
                   baseURL:[response URL]];
        [self setView:webView];
    }
}

参考にしたサイト

1. How do I get the last HTTP Status Code from a UIWebView? | Stack Overflow
2. Changing the userAgent of NSURLConnection | Stack Overflow

3.閑話休題 「GitHub for Mac」について

Mac向けにGitHub for Macというクライアントツールがあります。
GUIでソースのコミットなどがとても簡単にできます。

操作方法はデザイナーのためのGithub for Mac の使い方「リポジトリ作成編」 | KUROIGAMEN(黒い画面)が詳しいです。

さてGitHub for Macですが、このオクトキャットの仕草や表情がめっちゃ可愛い！！


普通のオクトキャットはまぁまぁくらいですが、この絵は衝撃的可愛さ！
アイコンもこの絵なので、Dockに追加すれば いつでも見られます。

あと、いろんな格好をしたオクトキャットがいるサイトを見つけました。
マリオとかロックマンとかゼルダのリンクの格好したやつもいます。

4.さいごに

GitHub for Macのオクトキャット可愛い！

(追記) UXデザインのプロセス その1

追記

このエントリではUXデザインのプロセスのうち、デザイン調査とペルソナ作成まで実施しています。
次のストーリーボードの作成についてはコチラ！

UXとは

UXとはユーザーエクスペリエンスのこと。
UIとUXの違いとは？――日本で第一人者の話を聞いてみたい人へ | 自分戦略@IT研究所より引用させて頂くと、

UXとは一言で言うと、ハードやソフトなどのシステムを利用者が使用した時に経験する「使いやすい！」や「便利だ！」「気持ちいいー！」などの感情を、利用者に提供する際の価値として重要視するコンセプトです。

UIはインタラクションやデザイン、それに対しUXはサービスの使い心地(デザインだけじゃなくサービスの内容も含む)、といったところでしょうか。
よいコンテンツと美しいUIは、感動や気持いいといったUXを提供する、というコトです。

このシリーズのエントリはUXデザイン入門―ソフトウェア＆サービスのユーザーエクスペリエンスを実現するプロセスと手法という本を参考に書いています。

このエントリの目次

1. UXデザインのプロセス
2. デザイン調査
3. ユーザーモデリング(ペルソナ) 準備
4. ユーザーモデリング(ペルソナ) 3つのペルソナ作成
5. ユーザーモデリング(ペルソナ) 3つのペルソナまとめ
6. 最後に

UXデザインのプロセス

UXデザインをきちんとすることで、ユーザの満足度を高めることができるはずです。

UXデザインのプロセスはこんな感じです↓

1. デザイン調査
2. ユーザーモデリング
3. ストーリーボード
4. スケッチ
5. プロトタイプ
6. 実装

以下に、各プロセスの大まかな内容や目的を示します。

・1.デザイン調査とは。

「ユーザがある状況である目的を達成しようとするときに、どのように振る舞うのか？」といった現状を調査し、そして「ユーザのニーズ」を掘り起こしていきます。

・2.ユーザーモデリングとは。

デザイン調査から得られたデータをもとにユーザーの特徴やニーズのパターンを検討し、デザイナたちが想定するターゲットを共有していきます。
手法としては「ペルソナ・シナリオ手法」や「5つのワークモデル」などがあります。

・3.ストーリーボードとは。

考えたペルソナをもとに、そのペルソナがそのサービスでやりたいコトをできるまでのストーリーを考えます。
これにより、デザインコンセプトを決定します。

・4.スケッチとは。

これまで得たデータをもとに、デザインを考えて色々なパターンを作っていきます。
デザインの「発散」です。

・5.プロトタイプとは。

作ったスケッチたちの中から良かったものを選び出し、より詳細に検証していきます。
デザインの「収束」です。

・6.実装とは。

ガンガンいこうぜのプロセス。

本エントリでは、

1. デザイン調査
2. ユーザーモデリング(ペルソナ)

を実施します。

2.デザイン調査

当サイトをサンプルに、デザイン調査をやってみます。

サイトに訪れて下さった方に直接お話を聞くのはコストが高いので、Google Analyticsからアクセス解析をしてユーザ層の把握をしていきます。

サイト訪問者の状況。

1. アクセスが多い時間帯:
   平日の18:00〜26:00。ピークは0:00
2. OSのシェア:
   Windows 60%(そのうち7が50%、XPが40%)、Mac 25%、Linux 10%
3. ブラウザのシェア:
   chrome 40%、Firefox 30%、IE 20%、Safari 10%、Opera 2%。
4. アクセスもと:
   Google 90%、Yahoo 8%、bing 1%
5. アクセスが多い地域:
   東京 50%、神奈川 10%、大阪 5%、愛知 5%

サイトを訪れた目的。

1. 検索ワードの話題と割合は「tizen」関連 33%、「Android」関連 30%、「JavaScript」関連 22%

パッとみ、MacやLinuxでChromeやFirefoxを使う、夜型のIT関係の人が仕事終わりに家からこのサイトを見ていると思われます。

これで訪問してくれる人たちの状況を洗い出しました。

3.ユーザーモデリング(ペルソナ) 準備

さて、ここからペルソナを考えていきます。

まず、世間のOSのシェアと比べます。

Windows XPのシェアが再び回復 - 3月デスクトップOSシェア | マイナビニュースによると、
2012年3月 時点で、Windows 92%、Mac 7%、Linux 1%
となっています。
当サイトのシェアは、それと比べると
Windows 約0.7倍、Mac 3.5倍、Linux 10倍
です。

Linuxのシェアが世間よりずば抜けて高いので、訪問してくれるのはギークな人が多いようです。

続いて、世間のブラウザのシェアと比べます。

ブラウザシェア推移グラフ (StatCounter Global Statsより) |Let's HSPによると、
20121年5月1日 時点で IE 53%、Firefox 20%、Chrome 18%、Safari 7%、Opera 2%
となっています。
当サイトのシェアは、それと比べると
IE 0.4倍、Firefox 0.7倍、Chrome 2.2倍、Safari 1.4倍、Opera 1倍
です。

IEのシェアが世間よりとても低く、ちょっと前までイケイケだったFirefoxもなかなか低いです。
Safariが多いのはMacユーザーの訪問者が多いからでしょう。
やはり、ネットに対して感度が高い人が多いようです(当ブログの話題を考えると当たり前か)。

最後に、世間の検索エンジンのシェアを比べます。

GA-Proによると、
2012年5月20日 時点でYahoo 52%、Google 46%
となってます。 あれ、bingは？？
当サイトのシェアはそれと比べると
Yahoo 0.2倍、Google 2倍、bing 測定不能だが多い
です。

Googleが圧倒的に多くなっています。
予想通りです。

さて、今回最も重要だと思ったのが、検索ワードの話題と割合です。

もう一度 結果を書くと、

• 「tizen」関連 33%
• 「Android」関連 30%
• 「JavaScript」関連 22%。

この3つの検索ワードをもとにペルソナを作っていこうと思います。

4.ユーザーモデリング(ペルソナ) 3つのペルソナ作成

まず「Tizen」で検索するペルソナについて。

Tizenとは、サムスンやLinux Foundationたちが推進するオープンソースのスマフホ向け新OSで、まだまだマイナーなワードだと思われます。
このワードで検索するのはいわゆるイノベーターでしょう。
CEATECなどのイベントにもよく行くのでは。
かなりの確率で男性でしょう。
年齢は20代後半〜30代でしょうか。

また、PCは複数台持っていて、Linuxをよく使ってそうです。
なぜならこのTizen、前まではUbuntu向けにしかSDKが提供されてなかった(今はWindows 7/XPでも提供されているようです)からです

平日の夜にアクセスが多いことを考えると、仕事だけでなく趣味でもプログラムをやっていると思われます。
このブログの訪問者の中でもトップクラスのスキルを持っていると思います。
Chrome使いが多そうです。
スマホは多分Android派で(Linuxユーザが多いはずなので)、もしかしたら2台持ち3台持ちなんてのもあるかも。

デザインよりも機能面を重視するタイプか。
基本的にツールやガジェット類は「便利に使えればメーカーなどにはこだわらない」というスタンス。。かな？
そして、「最初に結論を言え」というようなせっかちな性格。。か？

次に、「Android」で検索するペルソナについて。

当ブログでAndroidにきちんと触れたのは、MacでAndroid開発環境を構築する方法を書いたときだけです。
なので、Androidに興味を持ち始めた感じ。

Android開発をするのにMacを使うというのは、個人的にはけっこう珍しい選択肢だと思います。
ということはMacをメイン機で使用しているのではないでしょうか。
iOSの開発は既にしたコトがありそうです。

業務で「MacでAndroid開発」というのはあまりないと思いますので、こちらも趣味でプログラミングをやっているギークのはずです。
いわゆるアーリーアダプターで、かなりの可能性で男性だと思います。
使っているブラウザはChromeもしくはSafariでしょうか。

Apple製品が好きで、機能性はもちろんデザインにも重きをおくのでは。
ミニマルなアクア風デザインが大好き。
年齢は20代後半が多い気がします。
割とリア充(「Mac好き」の個人的なイメージ)。

最後に、「JavaScript」で検索するペルソナについて。

検索ワードを詳しく見ると「JavaScript 再描画」や「JavaScript 性能」などがあるので、AjaxバリバリのRIAを開発している中級者くらいのWebデベロッパでしょうか。
RIA開発にかかせないHTMLとCSSの知識も持ってるでしょう。
また中級者というコトで、Windowsユーザが多そうです。


また、超便利なWeb開発ツールであるFirebugがあるのでFirefoxユーザが多そうです。
年齢層は「Tizen」や「Android」のセグメンテーション(←「クラスタ」的な意味です)と比べて若そうです。
20代前半〜20代半ばが多いですかね。

プログラミングの話題なので、こちらも男性でしょう。

という訳で、「Tizen」「Android」「JavaScript」で分類したペルソナを作ってみました。

5.ユーザーモデリング(ペルソナ) 3つのペルソナまとめ

こんなんなりました。

・ペルソナ1 (「Tizen」のセグメンテーション)

20代後半〜30代の男性でイノベータなギーク。Android使いで、メインPCはLinuxとWindows。メインブラウザはChrome。サービスは機能面を重視する。割とせっかち。

・ペルソナ2 (「Android」のセグメンテーション)

20代後半の男性でアーリーアダプターなギーク。iPhoneを持っているけどAndroidに興味がある もしくは 最近Androidを買った。メインPCはMac。メインブラウザはWebkitベースのやつ。サービスはデザイン・機能面ともにこだわる。KISSなUIが好き。リア充。

・ペルソナ3 (「JavaScript」のセグメンテーション)

20代前半〜20代半ばの男性。メインPCはWindowsでメインブラウザはFirefox。HTMLやCSSのコーディングもできるけど一番得意なのはJavaScript。性格や考え方は…検討できませんでした！(涙)

6.最後に

たかが個人Blog一つの調査＆まとめに2時間くらいかかってしまった…(HTMLの整形は除く)
でもなかなか楽しかったです。

ペルソナってみんなやってるんでしょうかね、工数の都合で省略されているイメージです…。

今回検討した3つのペルソナ、皆さんには当てはまっているでしょうか！
当てはまってる、当てはまってない関わらずコメント残してくれたら嬉しいです！
また、こんな感じでいいのか自信はないので「こんな風にしたらいい」などの意見がありましたら、そちらのアドバイスも頂けると幸いです。

ちなみに本エントリのタイトルに「その1」って書いてますが、続くかは未定です！ ストーリーボードの作成に続きます

それでは。

参考書籍