ユーザビリティテストのワークショップに参加してきました

○はじめに
今日はall webさん主催のユーザビリティテストのワークショップに参加して来たので内容を簡単にレポートしたいと思います。

ユーザビリティテストとは、製品やサービスの品質を高めるための手法で、テストしたい製品をユーザーにつかってもらい、その様子を観察することで、製品の改善点を見つけることを言います。

○レポート
さて、レポートです。
会場は品川区にある五反田図書館の会議室です。新しくて綺麗な建物でした。

会場

会場の様子

今回は、「あるケーキショップのスマートフォン向けWebサイトをデザインする」というテーマでペーパープロトタイプの作成と、ユーザビリティテストを行う内容でした。

こんな風に、実物大のペーパープロトタイプを書いて、ユーザー役の方に指でタッチしてもらいながら、操作に突っかかる部分が無いか確認したり、「この画面にこんな機能があると嬉しい・・・」と、言った要望を聞いたりしながら、ペーパープロトタイプを徐々に改善していきます。
とても勉強になった3時間でした。

○感想
１）ユーザービリティテストの必要性をあらためて感じた
普段、業務でユーザビリティテストを行うときにも感じるのですが、やはり、ユーザーの視点で考えないと絶対に気づかない部分があるので、ユーザービリティテストはコストを割いて行うべきだと思いました。

しかも、テストで発見した課題の内容によっては、製品に大幅な修正が必要なこともあるので、設計が確定する前、早い段階でやる必要があると思います。

２）テストだけでは十分では無い
テストによって製品の問題点を発見することができますが、それを改善する手法は別途必要だと感じました。テストは必要ですが、テストだけでは十分ではありません。

今回のワークショップを行ったときには、「iOS HIG」や「iPhoneアプリ設計の極意」に書いてある手法や、「誰のためのデザイン？」に書いてあったデザインについての原則の知識が役に立ったと思います。

特にiOS HIGは無料で公開されているし、内容が具体的ですので、まだ読んでいない方にはオススメしたいです。

---

※参考資料

iOS ヒューマンインターフェースガイド

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)

枠を超えるデザイン

●テーマ
今日はWebサイトやiPhone向けアプリのデザインについて書きたいと思います。

●安全領域とは何か？
Webサイトの画面デザインを行うとき、「安全領域」という考え方を考慮してデザインを行う場合があるそうです。

安全領域とは以下に書いたような、Webサイトの左上の領域です。
この部分は、ブラウザのウインドウが小さくされた場合でも表示されています。
また、WebサイトはPC、スマートフォンなどの様々な大きさのディスプレイで表示されることになりますが、安全領域は小さめのディスプレイでも表示されます。
そこで、この安全領域にロゴやナビゲーションと言った重要な要素を配置するのが良いとされています。

Google Labsに面白いサービスがありました。

このサービスを使うと、ブラウザのウィンドウサイズの分布を可視化してくれます。

Google browser size

この例では、99%のユーザーは最低でも紫の範囲が見えており、90%のユーザーには最低でも水色の範囲が見えていることがわかります。

左上の領域ほどたくさんの人に見れることが一目瞭然ですね。

「安全領域」という考え方は、Webサイトを「画面単体」でデザインするのでは無く、「ウィンドウの大きさ」や、「どんなデバイスで見られれるのか」と言った事に、幅広く気を配った考え方だと思います。

●ホットゾーンとは何か？

Webサイトの「安全領域」と似た考え方に「ホットゾーン」という考え方もあります。

これは、iPhone向けアプリの画面をデザインするときに使われる考え方です。

iPhoneは指で操作するデバイスです。

ですから、右手の親指が自然に届く範囲である、ホットゾーンに重要な要素を配置する事が望ましいとされます。これがホットゾーンの考え方です。(※1)

この「ホットゾーン」という考え方は、デバイスと言う枠を超えて、ユーザーの手にまで気を配った、更に進んだ考え方だと思います。

Appleが配布しているiPhoneアプリのデザインガイドラインには、「（iPhoneは）外出中、気が散るような状況で使われる」点に気をつけてデザインせよ。と、言った内容が書いてあるなど、ユーザーが置かれた状況に気を配ってデザインを行うべきである事が強調されています。

●まとめ

「画面だけをデザイン」するのでは無く、製品が使われる状況や、使う人の状況に気を配った「枠を超えるデザイン」を行う事が、UXの向上のために重要では無いかと思います。

---

●注釈

*1:さらに興味深いのが、指が届きにくい右上や右下の領域です。ここには編集（削除）などのボタンが配置され、何かの拍子にボタンに指が触れてしまい誤操作をしてしまわないようになっています。（推測）。ユーザーに簡単に押して欲しくないボタンを"コールドゾーン"に配置し、あえて押しにくくしているのです。

●参考書籍

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

すべての人に知っておいてほしい　WEBデザインの基本原則

iOSヒューマンインターフェースガイドライン（PDF）

「名前をつける」ことの意味

●テーマ

プログラムを書く時、変数に名前を付けたり、クラスやメソッドに名前をつけたりと、何かに名前をつける事が良くあると思います。 

良い名前を付けることは、良いプログラムを作ることにつながります。 

そこで、今日は、この「名前を付ける」という行為の意味についてがんばって書いてみたいと思います。

●名前を付けるとはどういう事なのか？

さて、突然ですが、以下の図をご覧下さい。
この一見、関係なさそうな2つの現象には共通点があります。

2つに共通する事、それは、物と物とがお互いに引き合う法則が関係している点です。 

リンゴが地面に落ちるのは、リンゴが地球に引っ張られるからです。
また、地球が太陽の周りを回っていられるのは、地球が太陽に引っ張られているからです。（もし太陽に引っ張られていなければ、地球は遠心力でどっかに飛んで行ってしまいます。） 

かの有名なニュートンは、この物と物とが互いに引き合う法則に「引力」という名前をつけ、その性質を数式で定義しました。

引力が発見されるまで、リンゴが木から落ちる原因と、地球が遠心力でどっかに飛んで行かない原因が同じだなんて、誰も考えませんでした。

しかし、ニュートンが、異なる現象から共通する性質を取り出し、「引力」と言う名前を付けた事によって、今まで別々だった現象が一つの統一された概念で説明できるようになったのです。バンザイ！

●何に対して名前を付けるべきか？

ところで、ニュートンは引力という目に見えないものに名前を付けました。   

そして、名前がついたことで、引力という概念を他人に伝えたり、引力について議論したりできるようになりました。

目に見えるものに名前を付けるのは普通の事です。重要なのは、目に見えない物に名前をつけて目にみえる（認識できる）ようにすることです。

目にみえるものであれば、他人と共有できます。

●まとめ

1. 名前を付けるとは、別々の物から共通の性質を取り出すことです。そうする事で、別々の現象を一つの概念で扱えるようになります。
2. 目に見えない物に名前を付けることで、目にみえる（認識できる）ようになります。そうする事で、それを他人に伝えたり、それについて議論したりできるようになります。

●参考資料

本記事は、以下の資料を参考にしました。参考にしたと言うより、ほとんど以下の記事同士をくっつけただけになってしまいました。しかし、もし、上手くくっついているとすれば、それはそれで意味があることだと思いますので、そのまま掲載します。もし上手くくっついてなかったら・・・ごめんなさい。 

• 哲学的な何か、あと科学とか　−　ニュートン（１）
• ソフトウェア原則 - ちょっと横道 その2　Name and Conquer
• Java的オブジェクト指向を90分で理解する

勉強会のススメ

都内では、プログラミングについての勉強会やデザインについての勉強会など、ITについての様々な勉強会や情報交換会が開かれています。

このような勉強会はイベント告知サイトで参加者の募集を行っている事が多く、基本的に誰でも参加できます。参加費は無料か安価な事が多いです。

こういった勉強会は平日の18時以降や土日に行われる事が多いです。そして、プライベートな時間を割いて勉強会に参加するよう人は優秀な人が多いため、こういう勉強会に参加すると大変勉強になります。

以下に、IT系の勉強会が多く登録されているイベント告知サイトをまとめてみました。勉強会を探す際の参考になればと思います。


◆ATND

• twitterのアカウントで参加予約が出来できて便利です。検索機能が充実していないが登録件数が多いです。
• ATNDで人気のイベントをtweetしているbotがあるので、それをフォローして面白そうなイベントが開催されていないか探すと良い感じです。→@upmeetup

◆IT勉強会カレンダー

• 日付別にイベントを探せます。

◆zusaar（ズサー）

• 決済機能がついているので有料のイベントが探せる。

◆@ITイベントカレンダー

• @ITのイベント告知サイトです。

他にも良いサイトがありましたらぜひ教えてください。

削るならスコープ

私が所属している会社では、アジャイルでシステム開発をするのですが、その時に良く発生する問題があります。

それは、「要件がコロコロ変わって確定しない」と言うことです。

いや、そもそも「変化を抱擁せよ」と言う言葉が表すように、現実に合わせて柔軟に計画を変更させて行くことこそがアジャイルでは大切なのですが、実際問題として要件がコロコロ変わると問題です。

なぜなら、プロジェクトには以下のような制約があり、要件が変わって作業量が増えた分、別の何かを犠牲にしなければいけないからです。
１）予算
２）時間
３）スコープ
４）品質

さて、私たちは変化を抱擁し計画を柔軟に変更する一方で、4つの制約の内、何を犠牲にすべきなのでしょうか？

先日、アジャイルサムライと言うアジャイルの指南書を読んでいたところ、この問題の解決へのヒントになる事が書いてあったので紹介します。

アジャイルサムライによれば、このような時は、まずスコープを削ることを検討するべきとのことです。

ある統計によると、開発したシステムに実装された機能の内、6割程度はほとんど（あるいは全く）利用されないそうです。

使わない機能を作ることに労力を割くくらいだったら、もっと優先度が高い他のタスクに労力を割いた方が良いですね。

「肩越しの視線」

10月に面白法人カヤック様という会社で「ゲームニクス」についての講座がありました。

その講座に出てきた「肩越しの視線」という考え方が使いやすいシステムを作る上で大切な考え方だと感じたので、参加レポートをかねて当日の内容の一部を書きます。

• 講座の概要

場所：面白法人カヤック様　恵比寿オフィス

日時：2011/10/21

演者：立命館大学　サイトウ・アキヒロ教授

概要：

日本の家庭用ゲームには、プレイヤーが説明書を見なくても操作方法に迷わないよう、様々な工夫が詰まっている。これらのテクニックをまとめ、体系化したものをゲームニクスと呼ぶ。 

今回の講座では、ゲームニクスが誕生した背景とそのテクニックの一部をファミコン黎明期よりゲームのディレクションに携わってきたサイトウ教授が説明する。 

※本記事では実際のテクニックではなく、ゲームニクスが誕生した背景に絞って書きたいと思います。 

• ゲームニクスが誕生した背景

• 家庭用ゲーム機の歴史は1983年のファミコン発売から始まったと思われがちだが、それ以前にもアタリ社が販売していたゲーム機がアメリカで広く普及していた。  

•  しかし、アタリ社のゲーム機向けのゲームは、開発しようとすれば誰でも開発でき、アタリによる品質チェック無しに発売できたので低品質なゲーム（クソゲー）が氾濫して、市場の信用を失い、売り上げと株価が暴落した。

• アタリの 失敗を見た任天堂は、ゲームの品質をチェックする機関「マリオクラブ」を設立した。マリオクラブでは一般公募で集めたプレイヤーに審査対象のゲームを遊んでもらいゲームの品質をチェックした。 

• 審査内容はプレイヤーにA4一枚分程度の説明書だけを与えて、後は操作方法についての説明が無い状態で遊んでもらい、詰まらずに操作できるかをチェックすると言うものだった。

• 当時はマリオクラブの審査に通らないとゲームが発売できなかった。

• 「肩越しの視線」の大切さ

•  ゲームの面白さは大切だが、操作方法が分からなければそもそもその面白さまでプレイヤーはたどり着けない。

• 当時のゲームクリエーターたちは、ゲームを作っている最中に他人にゲームで遊んでもらい、その様子を肩越しに見て、プレイヤーの行動を確認しながらゲームの制作を進めた。 

• ゲームクリエーターは「このアイディアいい!」「おれグレイト!」と言うエゴを持っている。 

• 作った人は作った人のエゴで物事を見てしまうが、他人の視線、肩越しの視線が大切。

• 感想

• ゲームクリエーターに限らず、モノ作りをする人であれば、自分のアイディアに対して自信を持つ事があると思いますが、それを「エゴ」と呼んで、あくまで使う人の使う人の視点（「肩越しの視線」）にこだわる姿勢が強く印象に残りました。

Bloggerにソースコードを載せる時にシンタックスハイライトする方法

プログラミング関係のブログを見ていると、よく↓のような感じで、シンタックスハイライトされたコードが、いい感じで載せられているのを見かけると思います。

　
class my_class
  def my_method
    p "hello world!"
  end
end

どうやら Syntax Highlighterと言うライブラリを使っているようなのですが、Bloggerでこのライブラリを使う方法になかなかたどり着けず苦労しました。

以下のサイトに書いてある方法を試したらうまく行ったので書き残しておきます。

• net3:Blogger でコードをシンタックスハイライトする

http://net-3.blogspot.com/2011/05/blogger.html

流れとしては、
１）以下のサイトでHTMLに埋め込むコードを取得し、
http://www.way2blogging.org/2011/03/how-to-add-syntax-highlighterv3-to.html
２）BloggerのブログテンプレートのHTMLファイルに書き込んで準備完了。
３）使う時は、以下のような感じでpreタグにclassを指定して、ソースコードを括ってあげる

　
    色づけしたいコードを記述

---

※2012/2/6追記：このサイトに載っている方法でもうまく行きました。
http://yksmtmks.blogspot.com/2011/05/syntaxhighlighterblogger.html

 以上