1. 使い方

    ※インデックス機能はありません

    ※IE で見るとちょっと残念なことになります。ごめんなさい！

  2. inucara.net を支える技術

    2008-05-19
    The JUI 2008 Tokyo
    inucara / Kentaro Ohno

  3. Agenda

    1. inucara.net について
    2. 基本コンセプト
    3. サービスの紹介
    4. ユーザビリティ向上の細かい話
    5. まとめ

  5. inucara.net
    について

  7. あらためまして、
    はじめまして、
    inucara です。

  9. inucara.net

    Screen Shot

  10. サービス

  12. わずか 2 ヵ月で立て続けに 7 つのサービスをリリース

  13. アクセス数うなぎ登り

    alexa

    ユニークユーザ数：約 6 万 / 1 日

  15. inucara.net では
    ほぼすべてのサービスで
    JavaScript を使って、
    ユーザビリティの向上を図っています

  17. そこで今日は、

  18. 各サービスの紹介をしつつ、

  19. ユーザビリティ向上のために
    気をつけた
    ちょっと細かい話を
    したいと思います

  21. 基本コンセプト

  23. inucara.net の原動力

  24. それは

  25. 苛立ち

  27. 世の中には使いにくいサイトが多すぎる！

  28. それだけならまだしも

  29. 利用者は、その使いにくさに気づいてすらいない！

  31. 「これはすごい」「これは便利」

  33. いやいやいやいや

  34. あなたの使ってるそのサービスは工夫次第でもっともっと便利になりますよ！

  36. きっと一般的なユーザは、ウェブサイトは分かりにくいものだ、使いにくいものだという印象を持ってしまっている

  38. 本当にインターネットは難しい？

  39. 勉強して練習して使い方を覚えなきゃいけない？

  41. そんなことない！

  43. inucara.net はそんなウェブに対する

  44. アンチテーゼとして始動しました

  46. 「今まで考えたこともなかったけど、これをこう変えるだけでこんなに使いやすくなるんだ！」

  47. 「これを使っちゃうと、今までがどれだけ使いにくいものだったか分かるね」

  49. もちろん僕の作ったものが「正解」だとは思っていません

  50. 提供しているのは使いにくさに気づく単なる“きっかけ”です

  51. これをきっかけにたくさんの人がウェブの使いやすさを考え直してくれればいいと思っています

  53. サービスの紹介

  55. 壁紙サーチ

  56. 壁紙サーチ

    スクリーンショット

  57. 壁紙サーチ

  58. 壁紙サーチ

  60. 実装

  62. SmoothTube

  64. SmoothTube

    スクリーンショット

  65. SmoothTube

  67. 当時、YouTube から
    リンクが張られていた、
    API 利用のサンプルサイトを見て、

  69. なんだこれ！
    使いづらい！

  70. 僕ならもっといいもの作れる！

  71. と思って作りました

  73. SmoothTube の実装

  75. Hatebladder

  77. Hatebladder

    スクリーンショット

  78. Hatebladder

  79. Hatebladder の実装

  81. 完璧画像検索

  83. 完璧画像検索

    スクリーンショット

  84. 完璧画像検索

  86. 1000ブクマされるサービスを作る

  87. 達成！

    1000ブックマーク越え

  89. コンセプト

  91. たとえば……

  92. ウェブ検索は、検索結果が自分の求めている情報かどうか判断するときのコストが大きい

    1. 検索結果のタイトル、サマリーを読む
    2. リンククリック
    3. ページの読み込みを待つ
    4. ページ内から目的の情報を探し出す
    5. 前後の文と併せて読んでみる

  94. コストが大きいぶん、
    目的の情報と違ったときの
    がっかり感も大きい

  95. でも……

  96. 画像検索は求めている画像かどうかの判断がとっても簡単

  97. サムネイル見るだけで
    「あり」か「なし」か
    一瞬で判断できる

  98. つまり……

  99. ノイズがあってもいいから、画像のみを出来る限りのスピードで見せていけばいい！

  100. 掲載サイトの URL やサマリーもいらない！

  101. あとは人間が「あり」か「なし」か
    勝手に判断してくれる！

  103. 検索精度について

  105. よく完璧画像検索は
    精度が高いと言われます

  106. 「Google よりいい！」
    「Yahoo! よりいい！」
    なんて声も……

  108. もちろん、そんなことはない

  109. ノイズいっぱい

  111. では、なぜこんな声が出てくるのか？

  113. それは

  114. 脳内フィルタリングのおかげ

  116. 完璧画像検索は一度に大量の画像が表示されるうえ、

  117. つぎつぎと新しい画像が出てくる

  118. すると見ている人は、関係ない画像を無意識的にフィルタリングしだす

  119. 見なかったことにしてしまう

  121. 見る人の錯覚や思い込みも
    UI に取り込んでしまう

  123. 完璧画像検索の実装

  125. Hatebladder2

  127. Hatebladder2

    スクリーンショット

  128. Hatebladder2

  129. Hatebladder2

  131. コンセプト

  133. はてなブックマークを見やすくするよー、って謳ってるサービスが世の中にはいくつかあるみたいだけど、

  134. 全部見にくい！＞＜

  136. 僕ならこうするよー！

  138. Hatebladder2 の実装

  140. Twitladder

  142. Twitladder

    スクリーンショット

  143. Twitladder

  145. Tumview

  147. Tumview

    スクリーンショット

  148. Tumview

  150. ユーザビリティ向上の
    細かい話

  152. ユーザビリティ向上の細かい話 1

  154. 自動ページング

    いわゆる AutoPagerize

  155. 自動ページング

    var results = $('results');
Event.observe(results, 'scroll', function(e){
	if(results.scrollTop > threshold){
		threshold += 500;
		// ここで新しいページを追加！
	}
});

  156. 自動ページング

  158. ユーザビリティ向上の細かい話 2

  160. スクロールに合わせ、現在位置表示を動的に更新

    ページング1 壁紙サーチ
    ページング2 SmoothTube
    ページング3 Tumview

    16-35 ってところ

  161. スクロールに合わせ、現在位置表示を動的に更新

    Event.observe($('results'), 'scroll', function(e){
    // ここで現在位置を計算！
    $('current').innerHTML = start + '-' + end;
});

  162. スクロールに合わせ、現在位置表示を動的に更新

  164. ユーザビリティ向上の細かい話 3

  166. 画面解像度を取得しセレクトボックスに挿入、デフォルトでセレクト

    スクリーンショット

    マイナーな解像度にもその場で対応！

  168. ユーザビリティ向上の細かい話 4

  170. ウィンドウサイズに合わせ、サムネイルの列数を修正

    スクリーンショット1
    スクリーンショット2

    常に十分な再生領域を確保

  171. ウィンドウサイズに合わせ、サムネイルの列数を修正

    var html = document.documentElement;
var results_style = $('results').style;
var player_style = $('player').style;
Event.observe(window, 'resize', function(e){
    var width = html.offsetWidth;
    // ごちゃごちゃと計算したあと
    results_style.width = results_width + 'px';
    player_style.width = player_width + 'px';
});

  172. ウィンドウサイズに合わせ、サムネイルの列数を修正

  174. ユーザビリティ向上の細かい話 5

  176. 使い慣れた UI をそのまま踏襲する

    パクリ1 パクリ2

    livedoor Reader のパクリ

  177. 使い慣れた UI をそのまま踏襲する

  179. ユーザビリティ向上の細かい話 6

  181. 先読みとキャッシュ

    先読み

  182. 先読みとキャッシュ

    function pre_load(page_id){
    if(cache[page_id])return;
    var url = 'page?id=' page_id;
    $.get(url, function(results){
        cache[page_id] = results;
        setTimeout(function(){
            cache[page_id] = null;
            // 3分後にクリア
        }, 180 * 1000);
    });
}

    利用者にストレスを感じさせない！

  184. ユーザビリティ向上の細かい話 7

  186. スムーズな視線移動を助ける

  187. スムーズな視線移動を助ける

    見た目、単調！

    単調

  188. スムーズな視線移動を助ける

  189. スムーズな視線移動を助ける

  190. スムーズな視線移動を助ける

    さりげない補助線

    補助線

  192. まとめ

  194. いろいろと細かい話をしてきましたが、

  195. 一番言いたかったのは、

  197. 「使いにくい」は悪！

  199. そしてその悪をやっつけるために JS は絶対欠かせない技術！

  200. みなさんももう一歩進んだ使いやすさを考えてみてください！

  202. あと、よかったら見てください

    http://inucara.net/

  204. ご清聴ありがとうございました

    inucara