ウノウ株式会社のデモ版サービスやTIPSなどの情報
Sashaのエントリー一覧 (18)
ユーザビリティテスト初心者のための備忘録 - 準備の話
Tweet
こんにちわ、Sashaです。9月も終わりに近づいているというのにまだまだ暑いですね。 私はユーザビリティテストの専門家ではありませんし、ユーザビリティテストを実施していても、不慣れから来る反省点が毎回のように残ります。今日は、そんなユーザビリティテストにまだ不慣れな方のために、私がこれまでに書きとめておいた反省点やコツをみなさんと共有したいと思います。スムースなテストを開始して、被験者の方にもリラックスして頂くことが出来るように気をつけるべき細かい点ですので、テスト方法とか、被験者の選定方法など、ユーザビリティテストのコアの部分には触れていませんが、ご了承ください。 1. 会場取り ビデオカメラやモニタを設定するため、被験者が来られる15分ほど前から会場となる部屋を押さえておきましょう。11時に被験者の方がいらっしゃるのに、 11時からしか部屋を押さえていないと、準備する時間がないため...
意欲を維持するヒント集
Tweet
こんばんわ、sashaです。今日は精神論的な話です。 みなさんは「やる気」とか、「意欲」とか、どうやって維持していますか？特に最近やる気がないとか言うわけではぜんぜんないのですけど、日々の雑務に追われていると、モーチベーションが下がったときにクリエイティブに対処出来なくなりがちだよね、といことは自分にも他人にもごくたまにあるように思います。 最近、A List Apartで紹介された記事を読んで、こういうこと、自分でもいつも覚えておきたいし、自分の周りにいる多くの人にとっても役に立てばいいなー、と思ったので、ちょっと自分なりの言葉に置き換えながら翻訳してみました。 すべて知っているかのような偉そうな口調をしていますが、私自身に対する戒めと教えとして書いてますので、お許しください。また、原文では「be motivated to create （作り出すために意欲的であること）」といった書き方...
buttonタグでサブミットするあれこれ
Tweet
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 ...
ECサイトのユーザビリティ・ガイドライン
Tweet
こんばんわ、Sashaです。 最近、ECサイトのリニューアルを計画するお手伝いをする、という仕事がありました。特にユーザビリティ的な観点から、どんなことを網羅したらこのリニューアルを成功させることができるだろうか、ということを考えながら、様々なブログを参考にしたり実際のECサイトを検証したりしていたら、以前私が紹介したユーザビリティ・ガイドラインのようなチェックリスト的なものが出来上がったので、もしかしてどこかのだれかのお役に立つこともあるかもしれない、と思い、ここに紹介させていただきます。 まず、ECサイトで実現したい基本的な目標をあげ、その目標に沿って細かく、網羅していきたい事を列挙していきました。 基本的な目標とは、次の5項目です。 見つけたい商品・情報を見つけやすくする ユーザーの労力を極力削減する 買いたい気にさせる 購入までのプロセスを簡単にする オンラインショッピン...
CSSをデバッグしよう
Tweet
こんにちは、Sashaです。CSSって、誰でも比較的簡単に始めることが出来るくせに、何年たってもつまらないバグにハマったりするものです。今日は、CSSをデバッグする手順を紹介します。特にCSS初心者の方々に参考にしていただければ光栄です。ただ、ここで紹介しているのは、CSSの問題解決の方法ではありません。CSS上の問題点の原因を、自分で見つけるためにとるべき手段です。見つかった問題点を、どうやって解決するかは、ここでは触れないのでがっかりしないでくださいね。 ※以下の手順は、下記のサイトをパクッ･･･、じゃなくて、翻訳しつつ簡単にまとめたものです。 参考: http://www.subcide.com/tutorials/debuggingcss/ まず、問題あるって認めましょう。 見なかったフリをしたい気持ちはよくわかります、が。 人的ミスをつぶそう スペルをチェックしよ...
IE6 + CSS 『border-leftとpadding-bottom』の謎
Tweet
こんばんは、sashaです。 次のような形のスタイルを実装しようとしていて、 実例 posted by (C)フォト蔵 IE5.5や6でこんな状況に出会ったことはありませんか？ （赤と青のボーダーは、elementの境目がわかりやすいように入れてあります） 実例バグ posted by (C)フォト蔵 どこがおかしいかお分かりになりますでしょうか。2項目目の赤と青で囲まれたテキストが、左に飛び出ていますね。その下にあるテキストまで、左にずれてます。 これは、多くのデザイナーの悩みの種である、「IE」の代表的なバグのひとつです。 このバグを再現させるのに必要なことはたったこれだけ。 「divの中にdiv」など、ブロック要素を2重にする 外側のブロック要素に、border-leftとpadding-bottomを定義する 以上。これだけでIEさんの地雷を踏めます。 以下のHTM...
一人の人を幸せにすることで、より多くの人を幸せにするサービスを考える。
Tweet
Sashaです。気がついたら自分の生活の一部だった。そんなサービスが人に小さな幸せを生み出します。そんなサービスを作ることが出来たらいいですよね。 でも、人っていっても、色々いますよね。私たちは、だれの生活を思い浮かべたらいいのでしょう。 UIという文脈の中で、ペルソナ（personas）という言葉の意味を聞いたことがありますか？ペルソナは、マーケティング、デザイン、製品開発など幅広い分野で、顧客中心思考を実現するためのひとつのキーワードとして論じられています。 UIに関していえば、樽本徹也氏が「ユーザビリティエンジニアリング」という本の中でこの言葉について説明されていますので、ご紹介させていただきます。 ペルソナとは、UI設計の中で設計チームの意思決定のよりどころとなる「ユーザ像」をさします。「だれのためのサービスか」、を明らかにすること。当たり前のようなことですが、日々、バグやクレーム...
Web2.0サービスのデザイナーになるということ
Tweet
こんにちは、Sashaです。 IA (Information Architecture)系で重要サイトであるBoxes and Arrowsの記事の前半部分にこんなくだりがありました。 【要約】サイトリニューアルで、一般のデザイナーからデザインを公募しました。世界中からそれはそれはすばらしいデザインが集まってきて、公正な選定により、採用されるデザインが決定しました。きれいで、クリエイティブで、かっこいいデザインでした。にもかかわらず、私たちはこのリニューアルが失敗であったと反省しています。それはなぜでしょう。 結局のところ、 ・ユーザーさんにサイトをどのように使ってもらいたいか ・ユーザーさんに何を、どのように伝えたいか ・ユーザーさんの声を、どのように受け止めるか を『真剣に』考えているのは、サイトを開発している私たちしかいないのです。 デザイナーは、上記のような『作る人のキモチ』を代弁...
紙プロトタイプを使ったユーザビリティテストのススメ。
Tweet
デジタルな世界で生きている同業者の皆さん、ペーパーレスの世界に過信しすぎてはいませんか？ 今日は、紙を使ってプロトタイプを作ることの意義と、方法を紹介します。 紙プロトタイプは、ユーザビリティ・テストのれっきとしたメソッドであることをご存知でしたか？筆者は、前職ではよく紙と、ペンと、はさみとのりを使ったプロトタイプを作成していました。ウノウに入ってからは大体wikiやPhotoshopだけを使ってモックを作るようになり、フォト蔵チームでも大きなUIの変更の際は大体、 (1) WikiやBTSで仕様を簡単にまとめる (2) PhotoshopやPowerPointでモック（四角がいっぱい並んでいる） (3) HTMLでモック(大体の動作を体感) というステップを踏んでいます。 でも、最近になって作業効率とかユーザビリティテストとか考えるようになったら、なんだかものすごく紙が懐かしくなってきた...
ユーザーの情報選択の自由について思うこと
Tweet
Sashaです。 明けましておめでとうございます！2007年も皆様にとって素敵な一年になるよう、心からお祈り申し上げます。今年もウノウラボをよろしくお願いいたします。 さて、今日は「選択」の話をしたいと思います。 この記事にたどり着いた皆さんは、例えばブックマークから、またはRSSリーダーから、Googleから、誰かのブログから、紹介してくれた誰かのメールから、あるいはウノウのサイトから、どういうわけかここへやってきました。どなたかの紹介でダイレクトにここへやってきた人もいるかもしれないし、様々な他の情報を切り捨て、数あるリンクの中からこのページへのリンクを選択した人もいるかもしれません。その選択は、いったいどのように行われたのでしょうか？ダイレクトにここへやってきた人は、「選択なんかしてない」とおっしゃるかもしれません。ですが情報がこのようにあふれかえっている世の中で、意識的であろうと...
ユーザビリティって何だろう？（基本のまとめ）
Tweet
こんばんわ、Sashaです。フォト蔵のUI改善への要望が高まっているのをうけて、最近、ユーザビリティについてみんなで考えています。 基本の基本が気になる私は、「ユーザビリティって何だろう」というところから考えるべく、『ユーザビリティのguru』と呼ばれるJakob Nielsenの「ユーザビリティ」の定義を復習しました。以下はそのまとめです。 ユーザビリティって何だろう？ ユーザビリティは、UIがどのくらい使いやすいものであるのかを示す質的属性です。「ユーザビリティ」という言葉は、モノをデザインする過程で「使いやすさ」を改善するための方法でもあります。 ユーザビリティは、次の5つの品質によって表すことができます。 「学習しやすさ」 初めてそのデザインに触れるユーザーが、どれだけ容易に基本的なタスクを発見し、遂行できるだろう？ 「効率のよさ」 ひとたびそのデザインを学習したユーザーが、どれだ...
女性に愛されるプログラマーの7つの要素
Tweet
Sashaです。 最近ウノウでは、独り身なプログラマーにどうやったら彼女が出来るか、そんな話題がなぜか流行ってます。 私から見れば、「男前なプログラマー」であることと、「女性に愛されるプログラマー」であることはちょっと違っていて、例えば、「男前なプログラマー」というのは、 ・なんせ仕事がばりばりデキて、しかも早い！ ・おいしい仕事じゃなくても責任感を持ってできる。 ・技術の向上に常に余念がない。 ・作り出したもの完成させるプライドを持っている。 ・穏やかにチームワークが出来る。 ・仕事のやり方に無駄がない。 ・仕事にビジネスマインドがある。 ・ありがとうがいえる。 と、こんな感じです。はっきり言って、ウノウのスーパープログラマーたちは全員そろいも揃って、「男前なプログラマー」の条件を超楽々クリアしています。 「男前」であることって、「彼女がいる・いない」ことよりはるかに大事だと思うんですが...
ビジターをユーザーに替える３ポイント
Tweet
こんにちは、sashaです。フォト蔵 のような、使ってもらって何ぼのWeb Applicationは、ビジターをいかにユーザに替えることが出来るか、というのが鍵になるかと思います。どうしたら、ビジターがユーザになってくれるだろう、ということを考えていたら、こんなことを思いつきました。題して、「ビジターをユーザーに替える３ポイント」です。 ビジョンを与えるのが鍵。 ユーザーとしてログインしていないときにビジターが見ることの出来るページは、未登録ビジターにとってサービスの疑似体験が出来るものでなくてはなりません。もちろん、サービスはユーザーのためにあるべきなので、登録ユーザには、未登録ビジターとは差別化された特権を与えなければならず、それが、写真アップロード権限であったり、ＳＮＳサービスであったりするわけです。ただ、そういったユーザのみのサービスは使えなくとも、少なくとも、このサービスを...
【Web Design】なるほどリンク集 その１
Tweet
こんばんわ、sashaです。 ラボブログの当番が回ってきて、ネタがなくて困っていたところに、私がCSSでデザインをする上で参考にしているサイトを書いてみたら、とみんなに言われました。なるほどねー！じゃ、そうしよう。 ただ、恐縮ですが、私は7月にウノウに入社するまで6年間海外にいたため、リソースも英語サイトばっかです。おっと。アレルギー反応を起こさないでください。興味がある分野で日々英語のサイトを見続けるのも、英語に親しむ手段の一つです。 逆に、国内のリソースに関しては浦島太郎状態なので、皆様からの「このサイトいいよ！」をお待ちしてます☆ さて、第一回目は、日々チェックしたいサイトたちです。今後、「チュートリアル系」、「ユーザビリティ系」など、気が向いたときにまとめたいと思います。 日々の読み物 - 最低限、目を通したいサイトたち A List Apartmezzoblue456bereas...
CSSで見る、IE7。
Tweet
Sashaです。 MicrosoftがIE7 RC1（Internet Explorer 7 Release Candidate 1）を公開しましたね。タブ・ブラウジング? RSS? 今ドキ当たり前。タブに出ているサイトのサムネイルが一括して見れるとか、印刷するときに用紙の大きさに合わせて印刷してくれるぴったり機能とかも、「あったらいいな」的機能であったことは確かですが、ウェブデザイナーたちの興味の中心は、今まで私たちの忍耐力をギリギリまで試してきた、IEの CSSへのサポートが、どのように変化するのか、ですよね。せっかくなので、今まで長年にわたって多くの人を悩ませてきたバグたちと照らし合わせながら見ていきましょう。ちなみに、私はまだ一つ一つ検証してませんので、その解決宣言に関する信憑性には責任は負いかねます。悪しからず。 positioniseverything.net では数年前から...
探し物はなんですか？
Tweet
こんにちわ。sashaです。IA（Information Architecture）にはいつも興味を持っていて、専門学校でも特別コースを取ったりしてみました。 普段、私たちがウェブを駆け巡るとき、絶対に無意識のうちに、「探し物を見つける」というゴールを掲げているものです（結構自信持って言い切っちゃいます）。さて、ではどのような方法で、このゴールに到達しているのでしょうか。次の記事では、「情報を探す」とはどういうことなのか、そのために、どのようなデザインが可能なのかを考えています。 情報探しの4つのモードとそれぞれのモードのためのデザイン方法 1. 探してるものを知ってる系 例えばこんなとき: 何が知りたいかを知っている自分が探したいものが、なんと呼ばれているかがわかっているどこから探して行ったらいいかがなんとなくわかっている それは例えば、PHPのとある関数の使い方を調べようとしているとき...
ユーザビリティ・ガイドライン
Tweet
sashaです。 naoya君が前回のエントリーで振ってくれたように、ジョエルテストの話から、ユーザビリティ・テストをどこまで行うかという話になりました。 私が今まで見たユーザビリティ系の記事の中には、追求したら悟りが開けそうな、限りなく奥深いものもありましたが、適度に深く、満遍なくカバーしているユーザビリティ・ガイドライン（原文）を見つけ、以降これを参考にしています。少し前に翻訳しましたので、今日はそれをご紹介いたします。 一般ユーザー向けのWebサービスでは、全部のチェック項目が該当するわけではありません。個人的には、各項目のスコアより、「スコアの説明」という欄を重視しています。現状では何が問題であり、どう解決するべきなのか、そういった思考のプロセスが、「ユーザーのことを思うこと」だと思うのです。 いま、ウノウではフォト蔵のデザイン見直しを行っております。私たちのデザインを省み、ユーザ...
フロントエンドお役立ちツール
Tweet
今月入社のsashaです。 フォト蔵のデザイン周りのことを主に担当しています。 今日は、私が今まで愛用してきたWebデザイン、フロントエンド・コーディングに役立つツールをご紹介します。 （1）フロントエンド・コーダーの必需品 FireFox 拡張機能のWeb Developer 今調べたら日本語版も出ているんですね。最初、ためしにインストールしたときはブラウザの上部が幅とってしまって、なんとなく気に入らなかったんですが、フロントエンドのデザインやコーディングにはこれが本当に便利。 クッキー、Java、JavaScript、CSSなどを無効にする CSSをその場で編集する フォームの各属性値を表示する 画像を非表示にする alt属性のない、あるいはalt属性値が空の画像を枠で囲む リンクのパスを表示する ブラウザの画面内を拡大あるいは縮小する テーブルのセルを表示する ブラウザのウィンドウお...
