2010年のオープンソースデザイン計画

以下は、2010年1月13日に Jane Wells が書いた WordPress.org 公式ブログの記事、「2010 Open Source Design Plans」を訳したものです。


2010年は私たちにとって、オープンソース的なデザインプロセスの大海へ思い切って飛び込む年になります。今までにも少し浅瀬に足を踏み入れてはいましたが(アイコンコンテストTrac チケットのグラフィックデザインコンポーネントヘッダーリデザインコンテスト)、今年はもっと大きな変化が見られるはずです。もし参加したい方は、以下を読んでみてください。

メーリングリスト: 開発者には、コアやプラグインのコードについて話し合うための wp-hackers メーリングリストがあります。UI/UX(ユーザーインターフェース・ユーザーエクスペリエンス)についての話題も時々出てくることはありますが、ナビゲーションメニューのラベル、色の階調、ボタンのスタイル、レイアウト、アライメントなど話しあうべきことは山のようにあり、それを wp-hackers でするとややこしいことになってしまいます。デザイナーたちにも独自のメーリングリストが必要です。そこで、新しく wp-ui リストができました。WordPress インターフェースやユーザーエクスペリエンスの改善や、デザイン関連プロジェクトの進展(例えば、オープンなデザイン課題など)について話し合いをするために登録しましょう。

デザイン課題: 過去に行ったアイコンデザインやヘッダーリデザインコンテストからたくさんのことを学びました。そして、WordPress のオープンソースプロジェクトに参加したいという UI/UX デザイナーのみなさんにもっとその機会があるように、こういったオープンなデザイン課題をもっと定期的に出したいと思っています。課題を小さめに設定して一ヶ月に一度程度行えれば、初めての人も簡単に参加することもできて理想的です。課題を公開する度に、先ほど紹介したメーリングリストでアイディアを交換したり、最適な解決方法に向かって作業を進めていったりすることができます。個人的には、こういった課題がコンペや競争ではなく、コラボレーションといった形に進化していくといいなと考えています。今月の終わりに一つ目の課題を公開しますので、興味がある方はメーリングリストに是非登録してください(ヒント: ダッシュボードの「現在の状況」モジュールの情報デザインを改良する課題、表示レイアウトに関する課題などををこれから予定しています。し、)。

分散型ユーザビリティテスト: 去年これを始めようと試み、何十人かのユーザビリティ専門家の方がボランティアとして手を上げてくださいました。しかし、スケジュールとインフラ関連の問題によって、進捗が遅れていました。メーリングリストを始めとして、「UI/UX 貢献者チーム」用のインフラができていくことで、このプロジェクトを再開しやすくなるはずです。

IRC でのおしゃべり: IRC の #wordpress-dev チャンネルで毎週行われている開発者チャットは、とても生産的なものになっています。irc.freenode.net の #wordpress-ui にも新しいチャンネルを作り、UI/UX 貢献者が井戸端会議をできるような場にしたいと思っています。また、立ち寄ってコアの UI/UX について話し合いをする以外にも、毎週定期的なチャットを計画中です(注: このチャンネルは、ブログのテーマづくりなどについて話し合うところではありません。WordPress アプリケーション自体のデザインに向けた議論の場です)。メーリングリストでの最初の議題は、この定期チャットの日時を決定する件になるでしょう。

独自のブログ: ここでもコード貢献者のインフラにならって、UI/UX 関連の更新情報、告知、進捗報告などに使うブログを作るつもりです。近々 WordPress.org 上に登場する予定ですが、完成したらメーリングリストでお知らせします。

ということで、デザインスキルを活かして WordPress コアに貢献したい方は、wp-ui メーリングリストに参加して、楽しい一年にしましょう!

WordPress への貢献、その 3 : ユーザビリティテスト

以下は、2009 年 5 月 4 日に書かれた WordPress.org 公式ブログの記事、「Contributing to WordPress, Part III: Usability Testing」を訳したものです。


WordPress 2.7 が成功したプロジェクトとなった理由の一つに、開発サイクル中に非常に多くのユーザビリティテストを行ったことがあります。2.5 および Crazyhorse プロトタイプのテストから始めて 2.7 ベータに至るまで、アプリケーションに含まれるほとんど全ての機能を調査しました。こういった事には非常に長くの時間がかかります。 🙂

ユーザビリティテストの背景にあるプロセスになじみがない読者の方々のために、概要を説明します。まず、テストの範囲を決定し、テスト用プロトコル/スクリプトを用意します。その後、テストグループに含める観客のセグメントを決め、その条件に合った人を募ります。参加者を探してくれる代理機関にお金を払って人員募集の依頼をしたりする事もありますが、WordPress のテストにはコミュニティの中から参加者を募る方がより理にかなっています。つまり、スクリーニング用のアンケートを作り、返答を全て読み、応募してくれた人たちをカテゴリー分けし、求めているそれぞれのセグメントの定員数に達するまで応募者に連絡を取るということを意味しています (セグメントには例えば、初心者、上級ユーザー、開発者、CMS ユーザー、フォト・ブロガー、モブログユーザーなどがあります)。その後、テストセッションを開始します。

何をテストするかによって、これらのセッションは30分から1時間半ほどかかります。たいていスクリーンキャプチャソフトと Web カメラ、そしてバックアップとしてのビデオカメラを使ってこれらを録画します。モデレーターは通常セッション中にメモをとったり、録画ソフトによってはタスクの達成時に動画内に印をつけたり、興味深い点にコメントを追加したりします。場合によっては、アイトラッキングテストなどの補助的テスト方法を含める事もあります。

セッションが完了したら、結果を分析します。メモや動画をレビューし、パターンを見つけ出し、リポートを書き、そのフィードバックによって次回に向けての修正案を導き出します。

これらのことすべてを行うのに、そんなに時間がかからないと思っている人もいます。Jakob Nielsen 博士の古い記事を持ち出し、「ユーザビリティ上の問題はすぐに明らかになるから、5人以上のユーザーに対してテストする必要はないよ」と言ってくる人はいまだにたくさんいます。それはたいていの場合事実だと私も思いますが、経験のレベル、目的、プラットフォーム校正、言語 (右から左に書く言語の場合、まったく違う体験になります)、人口統計学上の分布などで非常に広範囲のユーザーを扱っている WordPress コミュニティの場合、5人のユーザーによるテストは物事をはっきりと見るために十分だとは言えません。私たちは各ラウンドで10数人にテストをしてもらうように努力していますが、WordPress のユーザーは世界中に散らばっているにも関わらず、テストが行える地理的な地域は限られています (ニューヨーク、サンフランシスコ、そして連続して十分な人数のテスターのスケジュールを合わせられ、無駄のないテストが行えるいずれかの場所)。

この問題に取り組むため、ユーザビリティテストプログラムを拡大するための新しい貢献の機会を導入します。コード開発およびグラフィックデザインと同様、ユーザビリティテストにコミュニティが参加できるインフラを構築するつもりです。これまでは X という都市で Y という日に参加者が必要です、という告知を行っていましたが、今後は皆さんに定期的に、より広範囲な参加をしてもらえるようになります。参加者だけでなく、モデレーターも募集する予定です。また、世界中の人に参加してもらえればと思っています。

モデレーター 観察型ユーザビリティテストはロケット科学ほど難しいわけではありませんが、偏りを軽減するのは単純なタスクではありません。この理由から、少なくとも初期の段階ではプロとしてユーザビリティテストを行った経験がある方のみを選びたいと思っています。初回の採用においては、デザイン会社やソフトウェア会社、ユーザビリティコンサルタント企業などでテストを行っている人たちが選ばれる可能性が高いでしょう。将来的に、定期的にボランティアしてくれる方々のグループができ、プロセスの問題点をすべて解消できた時には、経験の豊富なテスト参加者と意欲的な参加者を引き合わせ、指導モデルを使い、この方法で貢献できる人の人数を増やしていきたいと思います。

テスト参加者 もしあなたが WordPress をお使いであれば、いつかユーザビリティテストに参加できる可能性があります。特定の行動 (大きな動画ファイルをアップロードする人、iPhone でブログを更新している人、5つ以上のブログを持っている人など) を行う人を探す場合もありますし、より一般的な参加者 (サイドバーにウィジェットを使っている人、過去6ヶ月以内にテーマを変更した人、複数の執筆者がいるブログを持っている人など) を探す事もあると思います。

それでは、このような貢献の機会はいつからスタートし、どうやって WordPress をより良いものにしていくことになるのでしょうか?

まず、モデレーターの募集からはじめ、地理的にほどほどに離れた人たちを集めたいと思います。それから、モデレーターのいるエリアのテスト参加者候補を募集します (ただし、今後もテストツアーを行う予定はあるので、全体的な地域からの登録も受け付けることにします)。現在、テスト参加者候補の登録プロセスの作成を進めています。基本情報 (所在地、連絡先) を記入し、WordPress 利用に関する質問に答えてもらいます。この質問の回答をデータベースに保存し、あなたに合ったテストの機会が発生したら、興味があるかどうかの確認に地域のモデレーターが連絡をとることになります。将来はリモート (遠隔地) テストや他の方法も試してみるかもしれませんが、現在のところはこのアプローチでテストの地理的範囲を広げることができるでしょう。

全てのモデレーターは同一のテストプロトコルおよびスクリプトに従います。テスト結果、リポート、動画は集計され、複合的なリポートが作成され (テストに使われたプロトコルおよびスクリプトもこのリポートに含まれます)、コミュニティに公開されます。これによりデザイナーや開発者が開発サイクル中、さらに幅広いフィードバックを得る事ができ、より多くのコミュニティがテストプログラムを理解し、これに参加する事ができるようになるでしょう。

この初期フェーズでモデレーターになってみたいという方 (プロとしてユーザーテストを行っている方) は、私にメールして自己紹介をして下さい。テスト参加者候補として応募したい方は、このブログを引き続きウォッチして下さい。登録用アンケートへが完成次第、リンクを公開します。

デザイン調整案の投票結果

以下は、2009 年 4 月 30 日に書かれた WordPress.org 公式ブログの記事、「Design Tweaks Poll Results」を訳したものです。


投票が終了し、票を数えたところ、興味深い結果となりました。以下の表は2,651票あった投票の実際の内訳ですが、有力な候補が4つありました。ディーン・J・ロビンソン氏の Fluency ベースの応募作2種、現在のバージョン 2.7 そのままのインターフェース、それからその3つの間を取ったあたりにあるマット・トーマス(MT)氏の案です。注: GB の作品は応募が遅かったので、900票ほどすでに投票済みになったあとに候補として公開されました。

投票結果

Top two submissions by Robinson and Thomas

数人の方が適切に指摘してくださったとおり、Fluency スタイルのデザインは一位に選ばれただけでなく、3バージョン合わせると一番多くの割合を占めていました。他のデザイナーからも複数バージョンの応募作があった場合には結果が異なっていたかもしれないので、その数字だけに注目する事はしません。個人的に興味深かったのは、2日間のあいだ投票の状況をチェックする事でした。上位3つ(Fluency ダーク版、2.7 のデザイン、MT)は一位の座をめぐって3位までのポジションをいったりきたりしていたことです。もし投票終了時間が違っていたら順序は多少違っていたかもしれません(ちなみに、万が一間違って時間が翻訳されていたときのために、少し長めに開けておきました)。

さらに面白いと思った事は、投票者に好まれた全体的なスタイルに関してです。マット・T とディーンのカンプは、スタイル的に似ているところがいくらかありました(左の画像をご覧下さい)。また、2.7 の現在のスタイルに投票した人たちは、これが一番いいと思って選んだのか、2.7 のリデザインのあとすぐに変更を加えるのに反対して選んだのか、もし知る事ができたら面白いなと思いました。これらすべてのデザインの好きなところ、嫌いなところについてコメントしたい方は、フォーラムのこちらのスレッドでどうぞ。

では、これから何が起きるのでしょう?どういう見方をするにしろ、Fluency スタイルのデザインにたくさんのファンがいる事は確かです。しかし同時にマット・トーマスのデザインも人気があります(2.7 のデザインをしたのは彼ですので、現在のスタイルおよび MT とラベルがついたカンプの両方とも彼の作品です)。インターフェースに対して与えられるべき十分な注目を払うために、また、ユーザビリティおよびアクセシビリティまわりのインターフェース関連のフィードバックを真剣に受けとめるために、2.8 ではそのままのデザインでいくことにしました。ユーザーテストを行ったり修正を加える時間をたっぷり取ることができるよう、改訂されたスタイルは 2.9 の開発段階初期で組み込まれると予想しています。応募されたカンプとどれほど近いものになるかは場合によりますが、とりあえず、

ディーン・J・ロビンソンさん、 一位おめでとう!

デザイン調整案の投票

以下は、2009 年 4 月 28 日に書かれた WordPress.org 公式ブログの記事、「Design Tweaks Vote」を訳したものです。


ヘッダー&ナビゲーションのデザイン調整案カンプが揃いましたが、結果は色々入り交じっています。いくつかの要素を移動させただけの人がいた一方、全体的な新しいスタイルを提案した人もいました。2.8 では大きなスタイル変更を加える予定はありませんが、投票の結果もし新スタイルの人気が高かった場合は、ユーザーテストを行って 2.9 に向けた早めの決断をしたいと思っています(どちらにしろ、そうするのは良い事だと思いますし 🙂 )。

以下に、応募されたスクリーンショットへのリンクがあります。それぞれを審査して(投票フォームではサムネイルを使っているので、リンクをタブですべて開いて、大きなサイズで比べてみて下さい)、一番見た感じが良く、使いやすそうなものを選んで下さい。

この投票は、ニューヨーク時間火曜日に終了する予定でしたが、もう一日延ばす事にしました。実際には、ニューヨーク時間水曜午後8時(日本時間4月30日木曜日 午前9時)に終了することになります。各応募案について話し合いたい場合は、こちらのフォーラムスレッドへどうぞ。

(実際の投票は、元記事のページでどうぞ)

結果は、投票終了の翌日にお知らせします。

デザイン調整、協力してくれる人は?(一つのアイディア、三幕のシーン)

以下は、2009 年 4 月 25 日に書かれた WordPress.org 公式ブログの記事、「Design Tweaks: Who’s In? (An idea in three acts)」を訳したものです。

応募についての詳細が書かれたページは訳していませんが、もし興味のある方がいればそちらも訳しますのでコメント欄でお知らせください。


第一幕

ジェーン:管理画面で、ブログ名の書かれてるヘッダーがダッシュボードのナビゲーションよりも上にきちゃうのが悩みなのよね。MU のインストールとかプラグイン(例えば WordPrses.com Stats)によっては、ダッシュボードのセクションが複数のブログにわたることがあるでしょ。ヘッダーが、個別のブログのコンテンツ部分上だけにくるほうがおかしくないと思うんだけど。

マーク: そうだね。「こっちはメニュー、こっちはコンテンツ」って感じで。

全員: そうそう。

5分後…

マーク: このモックアップどう?管理パネルのヘッダーをいじって、さっき作ってみたんだけど。
Mark Jaquith's mockup

ジェーン: ナビゲーションがヘッダーの下に来てないのがいいわね。もうちょっとデザインを改良した方がいいと思うけど。あと、「お気に入り」メニューが「表示オプション」と「ヘルプ」タブの白い h2 要素の部分にドロップダウンするようにした方がいいかも、っていうのも思ってたのよ。

ライアン: ブログ名を含むメニューの色が押し出されて、「表示オプション」のとなりに「お気に入り」が来るっていうのはなかなかいいね。

ジェーン: マット・トーマスに、スタイルに手を入れてくれるよう頼んでみるわ。[編集者注: マット・トーマスは 2.7 のビジュアルデザインを担当しました] それから、wpdevel か何かに公開して、みんなからフィードバックをもらいましょう。

ライアン: すぐできるんだったら、2.8 にも入れられるかもね。

第二幕

マット・T : 意見を基にして作ってみたカンプだよ。

ジェーン: いいわね、でも、「表示オプション」と「ヘルプ」のタブはどこにいっちゃったの?

マット・T : まだそこは作成中。

ジェーン: ふむ。これをコミュニティのデザイナーに対してオープンにする時間ってあるかしら?仕様凍結に入ったのは知ってるし、突然の告知だっていうのも分かってるけど、あなただってこのリクエストについてたったの数時間前に知ったんだものね。これがオープンソフトウェアの開発方法よ、最高のアイディアがタイムリミット寸前にやってくることもある!

マット・T : コミュニティに挑戦してもらうのに大賛成だよ。特に「表示オプション」と「ヘルプ」のタブ周りで何かすごくいいやり方を見つけてくれるならね。

ジェーン: ライアンにリリース日について聞いてみて、時間があるか確認するわ。スタイルについての推薦を今日欲しいって言ってたから。

第三幕

ライアン: 火曜までならなんとかなるかな。でも、最終的なスタイルとグラデーション入りの画像なんかは絶対その日までに受け取らないと。

ジェーン: 最高!has-patch マラソンのあとにまたこんなに突然の告知をしちゃってみんなに嫌われちゃうだろうけど、週末だし、小さめのプロジェクトだし。数時間まで誰も考えてもいなかったことでもね。小さな部分だけど、みんながこれを私たちの「これからのインターフェースの変更にもっと多くの人の意見を聞きたい」っていう試みだ、ってとってくれるといいなって本当に思うわ。

ライアン: ヘッダーとメニューが少し変わるよっていう警告の意味でも役に立つね。

ジェーン: 投票式にもできるわ。必要なものを朝までにまとめれば、月曜に応募してくもらうまでに2日間のデザインする時間が作れるから。火曜に投票をしてもらうとすれば、それまでに3日間あるし。メーリングリストとか全部でちゃんとお知らせしておくわ。

ライアン: マット・T のカンプを僕らの考えてる例として公開する?

ジェーン: 変更についてのユーザー・エクスペリエンス面からの理由を書き出すわ。誰も基本的な画面のモックアップを作る無駄な手間を費やさなくてもいいように、マット・T にスタイル・ガイドラインとオリジナルのカンプを提出してもらうようにしましょう。

ライアン: それで作業範囲が定義できそうだね。あとはスケジュールについて、ちょっと調整しよう。

ジェーン: やっほー!

位置について、よーい…
それじゃ、よく聞いて下さいね。ナビゲーションとヘッダーを少し改善するっていう変更は制限時間ぎりぎりのデザインアイディアで、2.8 のリリース(これは迫ってきています)までに含める時間がなければ 2.9 まで待つつもりです。でもコミュニティのみんなが本当に気に入るような、そして WordPress の他の部分のガイドラインにもぴったり合うようなアイディアを誰かが出してくれたなら、2.8 にこっそり含めてしまうこともできます。

このミニ・プロジェクトに関するユーザー・エクスペリエンスおよびデザインのガイドラインはこちら(リンク先は英語)に公開しています(大きなグラフィックで皆さんの RSS リーダーをいっぱいにしてしまわないように)。よく読んで、マット・トーマスがモックアップとして昨晩作ったカンプを見て(念のために記しておくと、彼はほんとに突然このことを知らされたんです)。.psd ファイルをベースとしてつかって、アイディアを応募する時には .jpg または .png ファイルを作成し、それへのリンクをこの投稿のコメントに書いて下さい(注: リンクを含むデザインの応募コメントだけが承認されます。このデザインの課題や応募されたアイディアに関するディスカッションについては、#wordpress-dev の IRC チャンネルでどうぞ)。

カンプのリンクは、UTC 時間4月28日(火)の午前1時までに投稿して下さい(日本時間4月28日(火)の午前10時)。質問があったり、締め切りより前にフィードバックが欲しければ、私たちはそれまでの間、#wordpress-dev の IRC チャンネルにいることもあります。

応募を受け取ったら、できるだけ早く投票フォームを用意して(アイコン決定時のアンケートよりももっとシンプルになります。今回は単に、どれが一番好きかを尋ねる投票になります)、このブログで告知します。2.8 向けのデッドラインの関係で、投票をオープンにするのは1日間のみですので、忘れそうだったらカレンダーに書き留めておいて下さいね。投票はUTC 時間4月29日(水)の午前2時(日本時間4月29日(水)の午前11時)に締め切ります。結果は次の日に発表します。

では、スタート!

* 上の会話は実際のチャットのまとめです。

アイコンプロジェクトの投票結果

以下は、2008 年 11 月 17 日に書かれた WordPress.org 公式ブログの記事、「The Results of Project Icon」を訳したものです。以下のリンク先はすべて英語のページとなっています。


コミニュティによる投票が行われ、票が集計されました。35%の得票率をもってアイコンプロジェクトにて勝利を収めたのは、エントリー ID 「BD (左上の画像)」をデザインしたベン・ダンクル氏です。ベン、おめでとう! 2位の座を獲得したのは「VS (右下の画像)」(ヴェレナ・セーゲルさん) でしたので、プロフィール画面から選択できるオプションカラーパレットには彼女のアイコンセットを追加したいと思います。

私たちが RC1 に向けて準備を進めている間に、ベンとヴェレナはそれぞれのアイコンのいくつかに修正を加えていく予定です。その中で、両セットに統一のメタファーを使用し、色つきの「オン」状態アイコンや h2 ヘッダー用の大きいサイズのアイコンを作成してもらいます。

たくさんのすばらしい選択肢からアイコンを選ぶ機会があったことに対し、心から感謝するとともに、参加してくれたデザイナーさんたちに改めてお礼を言いたいと思います。そして、各アイコンセットを比較する時間を取って投票に参加してくださった 3,700 人の皆さん、どうもありがとうございました。

Q.18 どのセットを 2.7 の基本アイコンとして使うべきだと思いますか?
アイコンセット名 投票数 得票率
BD 1285 35%
VS 1080 29%
GB2 424 11%
OSD 376 10%
LS 300 8%
GB1 235 6%

BD および VS の大幅なリードから、投票者の皆さんがこの2つをたいへん気にいったことがはっきり見て取れます。

Q.20 2位を選ぶならどのセットですか?
アイコンセット名 投票数 得票率
VS 916 27%
BD 647 19%
LS 522 16%
OSD 488 14%
GB2 462 14%
GB1 331 10%

Verena Segert's blu iconsQ20 は記入必須項目ではなかったため数百人の方は解答されませんでしたが、解答してくれた方 (3,336 人) の意見により、1位として人気のセットは2番手としても同様に人気があることが改めて確認できました。これにより審査員は、人気のセットを採用するという決断を容易に行うことができました。

他のオプションに比べて圧倒的に支持された各アイコンのメタファーをいくつかご紹介します。

  • ダッシュボード: 1333 人 (40%) が家のアイコンを最適なメタファーとして選びました。私たちも同意しています。ベンとヴェレナはアイコンを修正することになります。
  • メディア: 2097 人 (65%) が、ベンのセットにあったカメラと音符のアイコンを選びました。私たちもこれがとても気に入っています。ヴェレナもこのアイディアを取り入れてアイコンを修正する予定です。
  • プラグイン: 1682 人 (53%) が、アウトレットプラグのアイコンを選びました。ベンとヴェレナのアイコンもこれでした。

  • ツール: 1581 人 (49%) がツール二つがセットになったアイコンが一番気に入ったと解答しました。ベンとヴェレナはこのアプローチで再デザインします。

ということで、以上が投票結果です。もうすぐ、2.7 をインストールしたあなたのサイトに新しいアイコンが登場します。

(訳注: 原文ではここにあった全5エントリーの詳細は略しています。詳しくは原文のページでご覧ください)

今後アイコンデザイナーが必要という方には、短い締め切りに間に合わせてすばらしい作品を提出してくれたアイコンプロジェクトの参加者を大いにおすすめします。短い期間のプロジェクトでしたが、彼らと仕事ができてとても良かったです。

ここでまとめてみると…

  1. コンテストに通ったベン・ダンクルさんとヴェレナ・セーゲルさんのアイコンを WordPress 2.7 RC1 に含める
  2. カスタムアイコンセットをアップロードできるようなプラグインを誰か開発するべき (採用されなかった参加者も、こういった目的用にアイコンをリリースしてくれるかも?)
  3. 2.7 は着実に完成へと向かっていますが、まだまだパッチへのヘルプを募集しており、特に IE6 対応用のものが必要です! (リリース状況報告の投稿には書きませんでしたが、事実です)

この実験に参加してくださった皆さん、本当にありがとう。私たちと同じくらい、皆さんも楽しんでくれたことを祈っています。最後にもう一度、ベンとヴェレナ、おめでとう!

WordPress 2.7: アイコンプロジェクト

以下は、2008 年 11 月 13 日に書かれた WordPress.org 公式ブログの記事、「WordPress 2.7: Project Icon」を訳したものです。以下のリンク先はすべて英語のページとなっています。


ベータ版をリリースしたばかりの頃、2.7 の管理画面で使用するカスタムアイコンを作成するのに興味があるデザイナーさんがいないかどうか、このブログで WordPress コミュニティの皆さんに対する呼びかけを行いました。その結果世界中から10数人のアイコンデザイナーの方たちが返事を送ってくれたため、より多くの人が参加でき、皆さんが新しいアイコンの見た目に対して投票することができるよう、この課題をコンペ形式にすることにしました。

一人のデザイナーによる仕事ではなくコンペ形式にすることに決定すると、半分ほどのボランティアデザイナーの皆さんは辞退を表明しました。残りのデザイナーさんたちにはそれぞれ、提案するスタイルに基づいた2つのアイコン (投稿およびリンク) を送ってもらいました。この段階で WordPress のビジュアル・スタイルからかけ離れすぎたアイコンを提出した数人の候補者には、参加してくれたことに感謝し、コンペからおりてもらいました。他のデザイナーさんたちには提出物への感想を伝え、1週間ほど後に残りのメニューおよび投稿編集画面のリスト表示・抜粋表示切り替え用のアイコンセットを完成してもらいました。一名を除くすべてのデザイナーさんが完成品を送ってくれたので、最終的には5セットが揃いました。

ということで、ここで方向性を決定しなくてはなりません。投票ページでは、各アイコンセットそれぞれに、実際のアイコンとデザイナーによる紹介、そして主要開発者の感想を表示します。5セットすべてを吟味したあと、WordPress 2.7 に最もぴったりだと思うビジュアル・スタイルのセットに投票してください。その後、個別のアイコンに対する投票を続けてもらいますので、あるセットのアイコン画像が気に入っているけど他のスタイルが好き、と言う場合は、そのアイコンのメタファー(象徴として使われている絵柄)を変更するよう投票することができます。また、アンケートを通じて、全体的な感想を述べられるようにもなっています。投票がすべて終わったら、コメントおよび票を集計し、最終的な選考を行います。

選択の際に留意すること:
13個のアイコンを作るのに、1週間というのは十分な時間ではありません。選ばれたセットはさらに洗練されたものにするために修正を重ねる予定で、一部のアイコンは入れ替えを行うかもしれません。コンペに向け、すべてのアイコンをグレースケールにしてもらうようにお願いしました。選ばれたデザイナーさんには、「オン」の状態および画面ヘッダー向けの大きなサイズもデザインしてもらいます。 (コンペ用に) これだけ多くのアイコンの複数の状態をデザインしてもらうのは負担が大きいと思ったのです。

準備はできましたか?では、アイコンアンケートをどうぞ!すべてのタイムゾーンの方が参加できるよう、投票はこの投稿 (訳注: 元になった英語版の投稿) が公開されてから48時間のあいだ有効となります (ベータ 3 にアイコンを含めたいとも考えているため)。

2.7 のリリース日についてのお知らせ
ベータ 3 に近づくにつれ、Trac へのチケットが引き続き増え続けており、IE6 での正しい表示をするために大変な思いをしており、アクセシビリティを高めるための必要性が目に見えてきています。もしあなたが WordPress を愛していて、けっこうな腕のコーダーで、アイコンデザイナーさんのように自分も協力をしたいとお考えでしたら、これらの取り組みのいずれかにパッチと言う形で貢献することを考えてみてください。現在ある Trac チケットをさっそく拾って作業を始めるか、#wordpress-dev IRC チャンネルでどんな手伝いが必要なのか尋ねてみてください。

ユーザビリティテストリポート: WordPress 2.5 と Crazyhorse

以下は、2008 年 10 月 29 日に書かれた WordPress.org 公式ブログの記事、「Usability Testing Report: 2.5 and Crazyhorse」を訳したものです。以下のリンク先はすべて英語のページとなっています。


「2.5 で管理パネルのデザインが変わったばかりなのに、どうしてまた変更するの?」という質問をかなりよく耳にします。数ヶ月前にサンフランシスコでの WordCamp に参加した皆さんはすでにその答えを知っていると思いますが、そうでない方のためにこの投稿を書きました。

2.5 で管理パネルのデザイン変更に対するコミュニティの反応が賛否両論だったのを受け、ユーザビリティテストをやってみるのがいいのではないか?と考えました。指摘された部分のうち、実際のインターフェース上の問題と、単に変更が気に入らないことからくる不満を見極めるためです。偏りを避けるため、テストは第三者機関 (ベル州立大学メディアデザインセンター・インサイト&リサーチ部門) に委託して行いました。長い名前ですよね!早口で3回言うことができますか?名刺にすべて収めるのもきっと難しいですね。時間を節約するため、ここでは一般的に使われている CMD という名称で呼ばせてもらいます。

私たちはまず、一連のテストセットを数回行い、しっかりしたプロトタイプを2つ作るという計画を立てました。この計画では、最初の段階で CMD が 2.5 のユーザビリティレビューを実施し、結果について主要開発者と話し合いを行うことにしました。その後、小規模な問題点のいくつかを解決するための簡単なプロトタイプを作成し、テスト参加者が 2.5 を自分のブログに使い、プロトタイプをテスト用サイトに使えるようにします。次の段階の改善提案を導き出すためにこの結果を分析・比較します。次に1〜2週間かけて2つめのプロトタイプを作り、同じ参加者にテストしてもらい、最終的なリポートを提出する、という流れでした。でもまあよく話に聞くと思いますが…デザイナーや開発者が立てた最高の計画というのは、うまくいかないことが多いものです。

最初のテストセットを終えてみると、1〜2週間でコーディングできるような修正を含めたプロトタイプを作っても、全体的に言ってほとんど意味がないことは明らかでした。全員が、もっと大掛かりなプロトタイプを作る方がふさわしいと決断したのです。このプロトタイプでは、画面上のエリアのまったく違った使い方の実験や、数週間の時間の中で可能な限りたくさんの問題を解決するための試みを含めることにしました。こうして、素早い設計過程と、さらに素早い開発サイクルの末、Crazyhorse というニックネームがつけられた2つ目のプロトタイプが誕生しました。

2回目のテストセットはみんなをびっくりさせました。リサーチチームも、これほど一貫性のあるテスト結果を目にしたことはなかったそうです。まだ動作が完成したアプリケーションではないにも関わらず、テスト参加者たちはタスクをより短い時間で完了し、新しいプロトタイプをより高く評価し、インターフェース要素の動作に対する理解度が高まりました。見た目が全然きれいでなかった (Crazyhorse の原型を覚えている人ならそう断言するでしょう) にも関わらず、参加者の一人残らず全員が現在の管理パネルよりもプロトタイプを選択すると答えました。

この過程の最初から最後までを説明したプレゼンが WordCamp 2008 (サンフランシスコ) にて行われましたし、スライドはオンラインで見ることができます。しかし、よくあることながら、ビデオやライブデモ、ナレーションを伴わないスライドのみでは伝えられることが限られています (Google を使えば観客の撮影したプレゼンのビデオを見つけることができるはずです)。

ということで、今回のユーザビリティテストプロジェクトの要点を少し掘り下げた手頃なサイズの PDF を、ダウンロードして時間のある時にじっくり読んでもらえるように用意しました。本当はアイトラッキング (視線追尾) のビデオも含めたかったのですが、ダウンロードするのがばかばかしいほどファイルサイズが大きくなりすぎてしまうので、ゲイズ・トレイルズ (訳注: gaze trails、凝視跡) と呼ばれるアイトラッキングの結果を図解したものを含めています。また、50時間以上のテストビデオからは尋常でないほどのデータが明らかになりましたが、比較的顕著な点以外の文章は削減するようにしました。さらに、Crazyhorse のデザインについてのセクションも、25ページ以下に抑えています。これがちょうどいいバランスだと受け取っていただければ幸いです。数週間したら、初期の Crazyhorse 関連の内容も含め、2.7 のデザインプロセスについても別の文書をまとめたいと思います。

では、2.7 の管理パネル開発のきっかけとなった、この夏のユーザービリティテストを通して私たちが学んだことを知りたい方は、どうぞリポートをご覧下さい。

WordPress 2.5/Crazyhorse Usability Testing Report (PDF)

WordPress が大好きなアイコンデザイナーのみなさんへ

以下は、2008 年 10 月 24 日に書かれた WordPress.org 公式ブログの記事、「Calling All WordPress-loving Icon Designers」を訳したものです。以下のリンク先はすべて英語のページとなっています。


2.7-almost-beta(2.7-もうすぐ-ベータ)の”日に日にきれいになっているメニュー”にお気づきですか?本当に日に日にきれいになってるんです。フォントを入れて角や色をもう少し磨き上げれば、メニューシステムは滑らかなものになります。最後に必要な作業は代替として使用しているアイコ ンを置き換えることです。いまのところ、メニューでは Crystal Project からのアイコンを使用していて、LGPL のもとでリリースされている(オープンソースばんざい!)ので申し分はないのですが、2.7 の新しいビジュアルスタイルには完全にはマッチしていないので、カスタムなアイコンの使用を考えています。

WordPress に何かお返しができればいいのにと思いながら、PHP 開発者ではないのでこのオープンソースプロジェクトに参加する機会がないと感じているとのお話を WordCamp でお会いした方たちやメールでよく聞きます。というわけで、これはすばらしい機会です。WordPress の新しいアイコンをデザインしませんか?

アイコン:
必要なアイコンはメインナビゲーションの各セクション、さらに投稿編集のような表形式画面用の一覧/抜粋表示アイコンの一そろいのペアです。全部で13個で、ナビゲーションアイコン用には画面ヘッダーに使用する大きいサイズのアイコンが必要です。自然な図像のあるセクションもありますが、その他のセクショ ンはかなり困難なものになるでしょう。セクションは、ダッシュボード、投稿、メディア、リンク、ページ、コメント、外観、設定、ユーザー、プラグイン、 ツールです。

スタイル:
アイコンは繊細で、標準的/意図的で、マンガっぽくない見た目でなくてはなりません。細い線で、おそらく少し昔風の見た目です。デフォルトではグレイスケールで、メニュー項目が有効なとき用のカラー版もできるだけ用意してください。

スケジュール:
早め、早め、早めに。2.7 のリリース予定は11月10日です。ということは、2週間前後以内にアイコンが用意できている必要があります。

必要な経験:
真剣に受け止めてもらうため、アイコンデザインの経歴を示してもらう必要があります。ウェブデザインやアプリケーションデザインとは別のスキルですし、 2.7 のリリースまであまり時間がないので、経験(そしてできるだけ利用できる既存の作品)をお持ちの方が一番の候補者になります。

興味をお持ちですか?なぜアイコンをデザインしたいのかをお書きになり、ご自分のポートフォリオへのリンクを入れたメールを私たちに送ってください。アイコ ンデザイナーの選択をどのように終わらせるかはどのくらいの人数の応募があるかによりますが、その過程はお知らせするようにします。とりあえずは、 2008年10月25日(訳注: 米国西海岸時間?)土曜日の夜までにポートフォリオのリンクを送ってください。今週末に検討して月曜日にご連絡いたします。できれば来週の前半にはデザイ ンを開始したいと考えてます。

WordPress 2.7 の新しいダッシュボード

以下は、2008 年 10 月 20 日に書かれた WordPress.org 公式ブログの記事、「The New 2.7 Dashboard」を訳したものです。


まず、先週公開したスクリーンショットについての反応のほとんどがとても好意的だったことを非常にうれしく思っていることをお伝えしておきたいと思います。これほどはっきりものを言う人が多いコミュニティでは、何か変化を取り入れる前にはいつも少し緊張するものです。でも今回の場合の変化は喜んで受け入れられたようで、すばらしいことです。これからの数週間、バージョン 2.7 の新しい機能をご紹介し続けていく間も、皆さんのそんな気持ちが変わらないことを願っています。それでは前回お約束した通り、リリース前の数週間の間にダッシュボードがどのようになっていくかをひととおりご説明しましょう。

メニュー
メニュー機能については先週もご説明しましたが、あることを言い忘れていました。デフォルトでは、ダッシュボードに初めてアクセスした際、2つのナビゲーション項目が開いた状態になります。そのひとつはダッシュボード (ここが現在いるページのため、開いた状態になります。ハイライト色が適用されます) 、そしてもう一つは投稿のサブメニューです (よく使われる画面が含まれるため、開いた状態になります。また、新しい画面にジャンプしなくてもサブメニュー項目にアクセスできるというヒントを提示するためでもあります) 。

メニュー項目をクリックして開閉すると、ブラウザーの Cookie が保存され、その状態を覚えておいてくれるようになります。例えば投稿とコメントのサブメニューを開いた場合、次回にアクセスした場合もこれらが開いた状態になります。さらに設定をクリックした場合、投稿とコメントはやはり開いたままになります。サブメニューを閉じたい場合は、その項目を手動で再度クリックすることが必要です。

この点をどうするかについてはかなり迷い、コミュニティ内でも「最大二つの項目までをオープンできるようにするのはどうか?」などといった話し合いがたっぷり行われました。しかし最終的には、こういったアプローチはユーザー自身がコントロールできる範囲を狭めてしまうことになるという結論に達しました。 2.7 の開発における合い言葉は「管理画面においてユーザーにコントロールを与えること」ですので、ユーザーが開いたサブメニューは開いたままにしておくという動作を選択しました。

コンテクスト・アクセスタブ
新管理画面の右上にはクリックするとドロップダウン表示されるタブがあり、ヘッダーとメインエリアの間にコンテクスト (今いるページの内容) に基づいた機能が表示されます。表示設定タブを使えば、現在の画面にどのモジュールを表示するかを選択することができます。誰もサイトにリンクしてくれないから、リファラーモジュールは表示させたくない…という時には、表示設定タブ内にあるチェックボックスのチェックを外せばいいだけです。ヘルプタブをクリックすると前回のバージョンからの変更の一部が表示され、FAQ、サポートチームへの連絡 (WordPress.com)、サポートフォーラム (WordPress.org) などへもここからアクセスできるようになります。

モジュール型レイアウト
どの項目を表示させるかを選択する表示設定タブに加え、ダッシュボードにあるモジュールはすべてドラッグ&ドロップで位置を移動できるようになります。モジュールのタイトルバーをクリックすれば開閉することもでき、さらに細かい表示のカスタマイズができます。次回のバージョン 2.8 では、すべてのモジュールが表示する内容の設定も変更できるようにしたいとも思っています。 2.7 ではここまでやる時間はなかったので、今回はフィードモジュールのみが設定可能になっています。フィードモジュールのタイトルバー上にカーソルを合わせると、編集用のリンクが表示されます。

現在の状況
現在の状況モジュールに含まれるデータは今までと同じですが、より分かりやすいように位置を入れ替えました。今までは文章形式でしたが、今回のリスト形式の表示にすることで、英語以外のサイトでもラベルの翻訳がしやすくなるという利点もあります。色分けによって、問題のある状況 (赤) 、保留中の状況 (黄色・オレンジ) 、そして問題のない状況 (緑) がすぐに目に入るようになっています。

統計情報
コア機能以外のものを前回のダッシュボードのカンプ (サンプル画像) に入れてしまったことを謝りたいと思います。カンプを作っている間、私のワイヤフレームと現在私がインストールしている 2.7 のダッシュボードを使ったため、WordPress.com stats プラグインをインストールしてダッシュボードのモジュールに含めていたことを忘れてしまっていたのです。このプラグインはコアパッケージには含まれていませんし、プラグイン自体にもいくらか変更が加えられている最中ではありますが、ログインした際に統計情報が今より目に入りやすくなるようにモジュールを変更しました。

.org (インストール版) ユーザーで、ダッシュボードカンプに .com (レンタル版) のような統計情報が含まれていることを喜んだ方に対して私のミスを申し訳なく思います。カンプにあった、キャンディのようなデザインの統計情報表示をさせたい場合は、WordPress.com stats プラグインなどをインストールする必要があります。同プラグインの次のリリースには、美しいダッシュボードモジュールが含まれているはずです。

QuickPress
QuickPress は、新規投稿画面にあるさまざまな項目が必要ない場合、ダッシュボードから新規投稿を書き始める (または公開する) ことができる新機能です。現時点の QuickPress フォームでは、タイトル、本文、メディア、そしてタグを投稿できます。 2.8 では、このモジュールの設定を変更可能にして、ユーザーごとに必要なフィールドを表示できるようにしたいと思っているところです。ここで下書きとして保存をすると、最近の下書きモジュールにすぐに反映されます。キャンセルボタンをクリックすると、フォームがすべてクリアされます。公開ボタンをクリックすると、公開されます。

QuickPress からの投稿は、他の投稿と変わらず、投稿 > 編集から編集することができます。最後に一つ付け加えると、このモジュールと新規投稿画面の両方で、下書き保存ボタンと公開ボタンの間にできる限りスペースを空けるようにしました。WordCamp やメールでこのリクエストを下さった皆さん、いかがでしょう!これで間違って投稿を公開してしまう失敗が減ることを祈っています。

最近の下書き
今年の夏に行ったユーザビリティテストで、「最近作成した下書きにアクセスしやすくして欲しい」、「できればダッシュボードからワンクリック (現在の状況モジュール内で下書き一覧へのリンクをクリックするのではなく、下書きのタイトルをクリックして調節その投稿へジャンプしたい) で」という声を何度も聞きました。この要望にお応えするため、最新5件の下書きと日付を表示する、最近の下書きモジュールが誕生しました。将来的にはこのモジュールも設定変更できるようにしたいと思います。クロスワードパズルを解くときボールペンを使うような、下書きを書かないタイプの方は、表示設定タブを使ってこのモジュールを表示させないようにすれば、ダッシュボードのスペースを節約できます。

フィード
WordPress 関連ニュースのフィードモジュールは 2.6 の時とほぼ同じような機能で、見た目が変わるだけです。フィードの URL、表示項目数、タイトルなどを自由に設定できることは今までと変わりません。

リファラー
こちらもほんの少し見た目が変わるだけです。

フック
ダッシュボードにモジュールを追加できるプラグインフックもそのままです。必要なら今までのようにトップレベル項目 (サブメニューではなく) を追加することもできます。開閉サイドナビゲーションにアイコンを使っているため、メニュー項目を追加するプラグインでは独自アイコンを使うことができます。プラグインが指定したアイコンがない場合、デフォルトのものが適用されます。しかし、理想を言うと、ほとんどのプラグイン用メニューは現存するトップレベル項目内に収まってくれればと思っています。デフォルトのトップレベル項目は、それ自体がメニュー項目のひとつというよりも、メニューをまとめるセクションヘッダーのようなものだからです。

最近のコメント
2.6 と同様、このモジュールでは最近つけられたコメントを表示します。しかし、今後はこのダッシュボードモジュールからコメント処理 (承認、返信など) を行うことができるようになります。現在のところは最近のコメントを数件表示するようになっているだけですが、 2.8 ではさらに高度な設定を可能にするか、「受信箱」のコンセプト (訳注: Eメールの受信箱のようなモデルを使ったコメント管理システム) を適用したいと思っています。

受信箱よ、さらば!
WordCamp サンフランシスコに来て下さった皆さんや、ダミーの受信箱が含まれたナイトリービルドをお使いだったみなさん、こめんなさい! 2.7 では受信箱は実現しませんでした。このコンセプトを実現するのは予想したよりも複雑だったため、急いで中途半端な機能を実装するよりも次のバージョンに繰り越しすることを決定したのです。代わりにコメントモジュールにコメント処理機能をつけたので、少なくともこの部分は次バージョンまで待たなくても良くなりました。

ということで、これが新しいダッシュボードです。今までよりちょっとだけ使いやすく、ちょっとだけ美しく、ちょっとだけユーザーの皆さんのことが考えられていて、ちょっとだけかっこよくなります。それとも、もしかしてこれらの変化は「ちょっとだけ」ではないかもしれません。その答えは、使ってみた皆さんに決めてもらうことにしましょう。