circumstance evidence

状況証拠 – ヤザキユウイチ

「デザイニング・ウェブインターフェース」発売

翻訳書、発売 去年末に翻訳書が発売された一冊。オライリーからインターフェイスデザインについての本は数冊でていますが、中でも一番具体的で速効性があるといえそうです。ajax以降のフロントエンドの使い勝手にフォーカスし、ケーススタディの集積から、系統だててデザインパターンとしてまとめあげたベスト・プラクティス集となっています。監訳者の浅野さん(http://blog.iaspectrum.net/)に献本いただきました。ありがとうございます! 本の内容について 「いずれデスクトップとウェブの境界はますますあいまいになってくるだろうが、それでもウェブでのリッチインタラクションを作ることには独特の特徴というものがある」と言う著者の一人、Bill Scott(http://looksgoodworkswell.blogspot.com/)は、Yahoo!在籍時代にYahoo! Design Pattern Libraryの一般公開に貢献した人物。共著のTheresa Neil(http://www.designgenie.org/)は、フリーランスのインターフェイスデザイナとのことです。 少しだけiPhoneやFlashによる実装の事例も含まれていますが、対象は主にPC向けサイトにおけるajaxを前提としたものといってよいでしょう。ロールオーバーが多用されてることや、画面サイズの差から考えても、ここに掲載されている手法はモバイルやiPhoneでは使えないことも多いはず。スマートフォンとi-modeブラウザ2.0搭載のDocomo端末をのぞくモバイルではJS使えないですしね。Flashの場合にも援用できますが、前提としている制約が違うかな、とは思いました。 使い勝手について、動作ロジックも含めてかなり細かく解説されていますが、具体的なデザイン手法やソースコードには触れていず、まさにユーザー・インターフェイスにフォーカスした内容になっています。少し前にとりあげたページングについても、カルーセル型も込みでばっちり規定されてました。素敵! とりあげられているサイトは、メジャーで大勢の人に使われている今も動いているサイトが多いので、実際に触って確かめられるほか、デザイナー以外の人へ挙動を説明するのにも有用です。 またこれらを実際に多くの人が使っているということは、これらのユーザー・インターフェイスを学習しているともいえる訳で、この洗練ともいえる振る舞いや手法を、踏襲するにしてもしないにしても参考にせずにはいられないでしょう。 原書を持っていたのですが、素晴らしい和訳書を得た今、躊躇なく売るつもりですw 目次 第1原則 直接的なインターフェイスを作ろう 1章 ページ内編集 2章 ドラッグアンドドロップ 3章 直接的な選択 第2原則 軽快さを心がけよう 4章 コンテキスト連動型ツール 第3原則 1ページで完結させよう 5章 オーバーレイ 6章 インレイ 7章 バーチャルページ 8章 プロセスフロー 第4原則 インビテーションを仕掛けよう 9章 静的インビテーション 10章 動的インビテーション 第5原則 トランジションを利用しよう 11章 トランジションのパターン 12章 トランジションの目的 第6原則 すばやく反応しよう 13章 情報探索のパターン 14章 フィードバックのパターン エピローグ 実現に向けて 読者対象としては、デザイナーやエンジニアをはじめ、企画職の方や、企業のご担当者などにも読んでいただきたいと思いますが、実現にあたっては、デザイナーが主導することが肝要です。具体的には用語ひとつ、機能ひとつ、実現したいこととインターフェイスの結びつきひとつにとってもデザイナーでない人の場合には齟齬が発生する可能性があって、それは専門ではないので当然のことともいえますが、そこは正しく、険がないようにw 矯正してあげることが必要です。 また自戒をこめて書きますが、実現にはデザインマターだけではなく、プロジェクトの座組みや進行に如何にきちんと組み込むか、にかかっているともいえそうです。具体的にはフロントエンドのスクリプトを誰が書くのかといったことや、作業負荷の見定め、システム会社との連携を如何にスムーズに行えるかが求められます。 ウォーターフォール型かアジャイル型かによっても違ってくると思いますが、できるだけプロジェクトの早い段階でこういったことをプロジェクトチーム内で共有し、実現できそうかどうかを見極めることが大事といえそうです。 ぜひ手にとって読んでみてください。 O’Reilly Japan – デザイニング・ウェブインターフェース IA Spectrum: 監訳書『デザイニング・ウェブインターフェース』が発売されます

「直感的」実は「慣用的」

「デザイニング・インターフェイス」という書籍でこんな記述があります。 「直感的」という言葉は若干誤解を招きやすい。かつてジェフ・ラスキンは、われわれがソフトウェアの利用に関して「直感的」だと言う場合、実は「慣用的」だということを言わんとしているのだと指摘した。コンピュータの「マウス」は、それを一度も見たことがない人にとっては直感的ではない。 マッキントッシュに始まり、iPod、iPhoneへ連なるアップル製品を使いこなすユーザーが「直感的」ですばらしいと感じる時の「直感的」というのは実は「慣用的」ではないのか。 iPhoneのマルチモーダルでジェスチャーによる操作方法は、何も説明がない状態では、操作しようがないのではないだろうか(森公美子氏の例をひくまでもなく)。 横方向ジェスチャーのページング、縦方向ジェスチャーのスクロール、ともにPC上のUIでは必要な視覚的なナビゲーションのヒントが、iPhoneにはほとんどありません。ただ、一度ユーザーが操作方法を理解した後は操作方法が圧倒的に「直感的」で楽しいものとなっています。

一覧リストにおけるページングについて

これです。一番わかりやすいのがグーグルなどの検索サイトの検索結果ページに使用されるこんなナビゲーション(ページング)について書きます。 なぜページングなんてものを取り上げるのか 広く普及している割にはワーディングが揺れていたり、何を「ページング」と呼べるかが少し変化していると感じる部分と相変わらず変わっていない部分と両方を感じるからです。 定義 ここでいうページングとは以下の場合を指すものとします。 ウェブにおいて、閲覧している画面解像度に対して一覧リストがある程度以上長くなってしまう場合に、閲覧上の負荷を下げる目的で複数ページに分割して表示する見せ方やそのナビゲーションのこと また以下の場合を除くものとします。 一つの記事が画面サイズ長い場合に、編集的視点でページを複数に分割している場合のナビゲーション 一つのタスクが複数ページにわかれている場合(ショッピングサイトの購入フローなど)のナビゲーション ちょっとわかりづらいかもしれないんですが、これらは分けて考える必要があると思います。除くものとしてリストしたものは、どちらかというとシーケンシャル(連続)型で、一つのコンテンツが便宜上複数ページに分かれているというものですね。並び順に意味があり、意味でページ分割されている。 ここで取り上げたいのは、いわゆる一覧リストがソートされて、文脈的ではなく機械的に複数ページへ分割されている場合のナビゲーションを対象としてみます。 ワーディング ポピュラーに使われている割にはワーディングに揺れ幅があります。ページング(Paging)、ページネーション(Pagination)、ページャー(Pager)の3つに集約できるかと思います。UIをテーマにしている主要サイトでどういうワーディングや定義(定義がないものは問題点として記載されている内容)をしているか、リストしてみました。 ページング(Paging) ソシオメディアの定義 一連の情報が複数ページにまたがる場合、ページを送るためのリンクを表示する。 Welie.comの定義 Users need to browse through a large list of items looking for the item that interests them most. blink design libraryの定義 most web-based systems seem to bump into performance limits that prevent implementing infinite scrolling. And so some […]

UI着せ替え(おなじみ操作)

おなじみ操作 ソフトバンクの新サービス”おなじみ操作” 昨日知ったんだけどすごいすごい。ソフトバンクって、ソフトで独自かつ良いサービスやってて、そこは好感もてます。ほかに気になるサービスは以下に。 ホットステータス おしらべダイヤル*111 Yahoo! mocoa Yahoo!mocoaなんてまさに理想的。使うメーラーが異なってもメールのやり取りができるように、メッセンジャーも相互乗り入れすればいいのにな。

「楽しさ」のデザイン(Wii)

Wiiのコンセプトビデオ(リンク先「ムービー」の「コンセプトビデオ」)がE3に合わせて公表されました。イイ! 非常にいいですね。 家庭用ビデオゲームと携帯型ゲーム機器にひとまず限定しますが、ゲームすることに人は何を求めるか、これを「楽しみたいから」とひとまずざっくり定義するとします。 その「楽しさ」はどこから来るのだろうと考えると、 変身願望。 身体能力が拡張される感じ。 実体験を思い出す。 ニュートン的実世界での経験を思い出す。 勝ち負けを競う。 誰か仲の良い人と一緒にプレイすると楽しい。 音楽。 インタラクション。 知的好奇心 と概念のレイヤーが揃っていなくて、順番にも意味なくて、申し訳ないですが、とりあえず思いつくまま書いてみました。 でゲームを取り巻くあらゆる環境は、その「楽しさ」を追求する方向に向かうべきと考えると、マンマシンインターフェイス部分の一部であるコントローラって非常に重要なんだと改めて思った次第 PS3で楽しそうにプレイする人たちのシーンがプロモーションに登場しないのは、実に象徴的で対照的だなと思います。 某ゲーム・ポータルサイトをデザインする時に「楽しさのデザインとは?」をちょっと考えてみたりしたんですが、時間もないので勉強としては、ゲーマーがゲーム開発者にインタビューしてる本を1冊読むことぐらいしか出来なかったのが残念。サイト探し回ったり、書店街に資料をブラウズしに行ったり、資料として絵本や写真集は1万円強ぐらい身銭を切って購入したり、ということはしていますが…。あとは自分ヒューリスティック法で。あ、個人的にヒューリスティック法というヤツにはやや懐疑的な印象を持ってます。All Aboutとか。 最近読んだ「デザイン言語2.0 インタラクションの思考法」に、元セガの水口氏の講義録が載っているのですが、非常に興味深いです。 メディア美学(メディアをどのように美しいもの、気持ちの良いものにしていくか)を大学で専攻したそうで、それとマーシャル・マクルーハンの思想(「メディア論」とか)が自分のベースにあるのだといいます。 で、実証実験の面白いデータも紹介されていて、 60フレーム/秒の映像を見せると人間はリアルだと感じる。それ以上100フレーム/秒まで、脳波と血圧の値は横ばいらしい。 人間の視野を10%から100%まで広げていくと、60%ぐらいで脳波と血圧の値が上がる実験結果があるらしい。 この二つを総合すると、60フレーム/秒&視野60%を覆うと、人間はリアルと感じ、没頭するということになります。 知りたかった、制作者たちの「楽しさ」の演出のノウハウ的な所では、「楽しさ」やインタラクションの取材などを終えていざ制作を始めると、スタッフの間で「気持ち良い」ことを議論するロジックやボキャブラリの少なさに気づいたそうです。で、説明できない本能の理由を、共有できるよう言語化/統計化していったそうです。どう言語化/統計化したかは企業秘密かあんまり語られてはいませんが以下はその例。 コール&レスポンスの繰り返しによって連続的な面白さを感じると、人間はその行為を繰り返す。そしてレスポンスの際に、ビジュアル/サウンド/バイブレーションといった刺激を強めたり変化させていくと、まるで感情が化学反応を起こすに循環がスパイラル状に上昇しはじめるらしい。 その他「映画で泣けるのにゲームで泣けないのは何故だろう?」とか示唆に富んだ話も載ってます。何故だと思いますか? あ、この本は読む前には割とアカデミックで頭でっかちな本かなと思ってたんですが、すべて作り手の経験と実例に基づいている講義録なので、非常に面白いし、身になります。タイトルに「2.0」と入ってしまってこのタイミング(今年4月末)で出版されたので「ウェブ進化論」とかと書店で並べられちゃったりしてますが。 ここ10年以上「時間がもったいない」という理由でゲームから意識的に遠ざかっていました。パラッパラッパーとか、PS出た当時は少しやりましたが。あとドラクエは全作ぐらいかな。最近は特に意識的にゲームするようになってきてます。そのきっかけは「逆転裁判」と某ゲーム・ポータルサイトの仕事なのですが。「逆転裁判」は携帯で始めて、その後GBA、DS Liteと繋がっていったのは、うーん、今日的ですね。 という訳で、何が言いたいかというと、大神は必ず買いますということです(違)。 ウェブの方へエスキースする事はまだ止めておいて、後日もっとちゃんとまとめたいです。少なくとも、 コントローラ以外でゲームの「楽しさ」を演出するもの ゲーム以外のメディアでの「楽しさ」のデザインとは? 辺りは盛り込みつつ。書きながら考えるし、書いたらさっさとパブリッシュしたいのでひとまず。

about

ウェブ・デザイナー/インターフェイスデザイナー。詳細は下記をご覧ください。

follow us

search

related link

Admin