はてなブログ | 無料ブログを作成しよう週報 2024/04/28 川はただ流れている 4/20（土） 初期値依存性 さいきん土曜日は寝てばかり。平日で何か消耗しているらしい。やったことと言えば庭いじりと読書くらい。 ベランダの大改造をした。 サンドイッチ 一年前に引っ越してからこんな配置だったのだけど、さいきん鉢を増やしたら洗濯担当大臣の妻氏…
安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] SIGHCI: 第126回ヒューマンコンピュータインタラクション研究会 SIGHCI http://www.sighci.jp/2007/11/200711121000.html 1) Fabcell - Fabric Element http://idl.sfc.keio.ac.jp/project/fabcell/ 2) 視覚認知に基づくインタフェースデザインに関する考察 Webページの視覚認知による構造解析 一目見てひとかたまりのグループがわかる。 画像が分割されいたりするので HTMLソースの解析だけでは把握仕切れない Webページ全体を１枚の画像として、構造解析、画像解析が可能 文字を文字とし
「最速インターフェースの研究と実践」メモ - 最速チュパカブラ研究会
昨日のSIGHCIのメモです。 最速インターフェースの研究と実践： ライブドア mala氏 まず、自己紹介を兼ねて概論 ブログ「最速インターフェース研究会」 WebのUIの進歩の停滞に対する批判を込めて名付けた 自分の肩書きは「インターフェースエンジニア」 よいUIを作るために「実体験に基づいたチューニングをしている」 自分で使ってみる ユーザの反応を見る 欲望に忠実に作る 作業としては、perl, html, jsの記述 「実のところ、プログラミングに詳しいと言える自信はないし、デザインのことも深くはわからないが、一人で一通りこなせる（完成品を作れる）という点は自分の強み。 よいUIを作るための作業は横断的。割り当てられた仕事をするだけの人ではダメ。」 作品紹介 2ch最速検索 キーボード操作だけでスレッド検索 まだAjaxは使っていない 「めくり型」UIの実験 スクロールしながら読むよ
初めて来た人がすぐに使えるはてなにしたい : 2007-11-06 - jkondoの日記
毎日毎日はてなのサービスを使っていると、どこの部分が使いにくいのかがだんだん分かりにくくなります。たとえば「適当にブログを探していてたまたまふらっとはてなに立ち寄った人」の気持ちになって、そこからはてなダイアリーを使ってみようと思うまでを想像するのは実はかなり困難です。 しかし毎日新たに登録して利用を開始する人の多くはそうした初心者であり、こうした方に迷わずにはてなを使い始めて欲しいと思います。そのために誰でも使いやすいインターフェースにしなくてはいけないと考え、昨年末からユーザービリティテストを開始しました。ユーザビリティテストとは、一般の方にパソコンを操作してはてなを使ってもらい、その様子を見せてもらうテストです。 一般の方と言っても、すぐに適当な人を見つけてくるのは大変なので、まずは社員旅行の時に社員の家族の皆さんに順番にいろいろな操作を行ってもらうところから始めました。それからは、
メモ、Signal、音、リアクション - FAX
音無しのスーパーマリオブラザーズ、音無しのフィードリーダー。音が無いと、ゲームはおもしろくない。ジャンプした感じ、既読にした感じ、剣で切った感じが減る。 何かを書くと、必死にオススメしてるバカな感じになるのはなんでだろう。ただ、今日よぎったことだ。明日は、違うことを言いたい。 ShereOnTumblrは、ポストしたときに、画面では何も起きないところを失敗した。写真がグレーになるなり、なんらかのリアクション、手応えを表すべきだった。音は、リアクションの一つだ。だとすると、音はユーザーインターフェースだ。 視覚だけでなく、聴覚も使って情報を伝える。リアクションを確かなものにすることで、利用者を世界に招き、より集中へ近づける。 YHCでは、アニメーションで進捗と速さを視覚化した。これを音で代替できるかもしれない。視覚情報を聴覚情報へ移し、画面の要素を減らし簡単にできる。作業のリズムを作り没頭へ
内容に合わせて伸縮するテキストエリア - FAX
JavaScript追記 miya2000の日記 - 「内容に合わせて伸縮するテキストエリア」を Opera にも id:miya2000さんが、クロスブラウザに書き換えられています。GJ!こっちで!! デモビデオは以下(12秒)。 ユーザーが自分でリサイズできるテキストエリアをよく見かける(はてなも)。それを補助するGreasemonkeyスクリプトもある。 テキストエリアを横にリサイズしたいことはあまりない。バーを掴んで最適な高さにするのはめんどくさい。使う人は、ただ全部の内容が見えるぴったりの高さになってほしいだけなんだと思った。 サンプルコードは以下。fitting?、fittable?、expand?(逆に小さくもなる) キーダウンのイベントでも実装してみたけど、日本語入力を検知できないし、方向キーとか無視するコードもいるし、イベントハンドラ内では内容がまだ更新されてなかったり
勝手にフィードバック：Feelimage編:江島健太郎 / Kenn's Clairvoyance - CNET Japan
ちょっと思いつき企画で。 どんどん新しいサービスが登場する昨今ですが、個人的にもいろんなサービスをさわってみています。で、そのときにいろんな感想を持つわけですが、同業のサービス開発者としてどのように感じているかをブログにアップしたらどうなるだろうか、という実験をやってみようかと思います。 で、ポイントは ひとりの初訪問ユーザの視点で 5分だけ使ってみて あくまでユーザビリティ（使い勝手）に特化して サイト開発者に黙って勝手に評価 サービスの詳細紹介はしない＆将来像にも踏み込まない でもサイト開発者に対するフィードバックのつもりで というあたりです。 本来ならサイト開発者に直接フィードバックを送ればよいのですが、どうせだったら「デザインやユーザビリティに対する考え方」みたいな部分はより多くの人とシェアした方が意義があると思ったのがきっかけです。そんなわけで、開発者視点のかなり込み入った話が中
最速インターフェース研究会 :: キー割り当て用ライブラリを作った
依頼を受けて作ってみた。 http://la.ma.la/roll.html http://la.ma.la/js/hotkey.js j,kでスクロールできる。 使いまわしがきくように他のライブラリに依存も影響もしないように作ってあります。Bloglinesのj,kでスクロールみたいなのを作りやすいようにするのが目的。ただsafariとかは何かかなり違うらしいので、そこらへんは良く知らない。あとOperaはデフォルトでワンキーショートカットが割り当てられてたりするので動くとは限らない。 全体に対してキーイベントを設定すると、フォームの入力ができなくなるっていう問題があるのでイベントの発生元がinput|textareaの場合は処理しないようにしてある。 追加したコードはこんな感じ。 var kb = new HotKey; kb.add(["j","2","down"], functio
ウノウラボ Unoh Labs: 「視線を導く」方法あれこれ
yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？
スライドショーのようにテキストを読むGreasemonkeyスクリプト、YHC - FAX
JavaScript YHC – Userscripts.org 長文をスライドショー形式で読むテキストリーダーです。デモビデオ(1分半)は以下。kotorikoさんの『捨松定吉』を、ランダムフィルタをかけて読んでいます。 機能説明ウィンドウ右下のGreasemonkeyメニューから[YHC]を選びスタートさせます。先に文章の一部を選択している場合はその部分を、そうでない場合は対象となる部分をマウスで指定します。 操作は主にキーで行います。 キー機能Esc終了↓ or S再生開始/停止→ or J or Space次のスライド 再生中はスピードアップ← or K前のスライド 再生中はスピードダウンGジャンプHome先頭のスライドEnd最後のスライド ↓キーで再生を開始して、→キーで再生速度を少し速くして、速すぎたら←で遅くして。気になるところに戻りたい場合は、↓で止めて、←→で移動して手動
ぼくはまちちゃん！(Hatena) - UIについて思うこと
ぼくはライブドアリーダーを使っていない。 なぜならそれがブラウザ上で動くものだから。 ブラウザの画面を占有するから。 ぼくがwindowsのパソコン…というか、 マルチウィンドウのパソコンを使っていて、いちばん気にするところは 「視線の移動だけで変化(新着)の概要が得られるか」 だよ。 新着メールもそうだし、 RSSリーダーもそうだね。 昔、ぼくが作った「弱酸性ミクシィ」っていう拙いソフトもそう。(これは今は動かないけど) でもバルーンとか流れるティッカーはだめ。超だめ。 あれっと思った時には、もう情報が視界から消えているし、なにより目障りだから。 ところでtwitterはいいね！ なぜならあれは、IM (小さな画面) で勝手に情報を流してくれるから素敵だよね。 うん。 たぶん、みんなチャットに飢えているんじゃないかな。 だからtwitterも、ぼくの見える範囲ではチャット化しているよ。
［WSJ］ 「ボタンを消せ」――Appleのジョブズ氏が追求する命題 - ITmedia News
Expired：掲載期限切れです この記事は，ダウ・ジョーンズ・ジャパンとの契約の掲載期限（90日間）を過ぎましたので本サーバから削除しました。 このページは20秒後にNews トップページに自動的に切り替わります。
TAKESAKO @ Yet another Cybozu Labs: Wiiリモコンの値をJavaScriptで取得する方法（Wiiインターネットチャンネル）
任天堂のQ&Aサイトで、Wiiリモコンの値を取得する方法が公開されていることを知人から教えてもらいました。 インターネットチャンネル向けのウェブページを作りたいのですが…。 : Ｑ＆Ａ - Ｗｉｉ インターネットチャンネルの拡張機能について知りたい Ｗｉｉインターネットチャンネルでは特別な JavaScript を用いる事でＷｉｉリモコンのひねりや テレビとの距離、複数のコントローラの状態を取得する事ができます。 手元にWii本体の実機がないので（Wiiリモコンはある＾＾）まだ試していませんが、こんな感じでJavaScriptからWiiリモコンの値が取れるっぽいですね。 if (window.opera && window.opera.wiiremote) { var num = 0; // wiiremote number 0,1,2,3 var pad = window.opera.w
【ハウツー】Apolloのサンプルで使われた、美しきJavaScriptフレームワーク「Ext 1.0」 (1) Extでできること | エンタープライズ | マイコミジャーナル
皆さんは、「Ext」というJavaScriptフレームワークをご存知だろうか。Extは、4月1日にバージョン1.0がリリースされたばかりの新鋭のフレームワークである。 Extの前身は、「Yahoo! UI Library(YUI)」の拡張版として開発された「yui-ext」というライブラリである。しかし、yui-extでは、リッチなUIを実現できるものの、決してサイズが小さいとは言えないYUIを導入する必要がある。そこで、yui-extの作者であるJack Slocum氏は、YUI以外のライブラリとも併せて使えるようにyui-extを刷新。その成果物をExtという名前で(頭文字の「yui」を外して)リリースした。 Ext 1.0で対応している外部のフレームワークはPrototype.js(scriptaculousも併せて利用可)、jQuery、そしてYUIである。現在のところExt単体で
JavaScript/Ajax＆CSSなツールチップライブラリ集:phpspot開発日誌
Kollermedia.at - The Website of the Freelancer Koller Jgen List of 25 Javascript/Ajax & CSS Tooltip Scripts List of 25 Javascript/Ajax and CSS Tooltips JavaScript/Ajax＆CSSなツールチップライブラリ集。 次のようにカーソルを合わせたときに説明を出すようなライブラリが沢山紹介。 Ajax Tooltip by dhtmlgoodies.com. [Example Page.] Ajax-Powered Help Balloons/Tooltips. Tool Tip Script by Cody Lindley. [Example Page.] jTip - a jQuery Tool Tip by Cody Lindley.
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
小粋なデザインパターンが18種類！お役立ち度満点の『Design Patterns』 | P O P * P O P
これは素敵な資料です。 ウェブ上の小粋なインターフェースがFlickr上で集められています。「カレンダー」、「ログイン画面」、「友達を追加」などなど、かなり使える事例が満載です。 「ここのインターフェースはどうしようかな・・・」というときに参考にされてみてはいかがでしょうか。 どういったインターフェースが掲載されているか、以下にいくつか見ていきましょう。 ↑ 「友達を追加」のインターフェース。SNS的要素には必要ですね。 ↑ カレンダーのインターフェースいろいろ。参考になりますね。 ↑ フッターのインターフェース。ユーザーアクションを促すには大事です。 ↑ アップロード系のインターフェース。CGMには必須ですね。 他にも「404ページ」や「タグクラウド」などがありますね。全部で18種類あります。 ご覧になりたい方は以下よりどうそ。 » Collection: Design Patterns
livedoor ReaderでのOPMLインポート後画面の“チェックボックス操作”を再現するJavaScriptサンプル - F.Ko-Jiの「一秒後は未来」
Top/プログラミング/Javascript/livedoor ReaderでのOPMLインポート後画面の“チェックボックス操作”を再現するJavaScriptサンプル 昨日書いた「チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル」に対して「livedoor Readerのとは少し違う」というツッコミがありましたので、再度サンプルを作り直してみました。 修正点は以下の通り。 チェックボックスを囲むリストエレメントでも操作は有効 リストエレメントもしくはチェックボックス上でmousedownしたらチェック状態を切り替える マウスをドラッグすると、他のチェックボックスは最初に切り替わったチェックボックスの状態へのみ切り替わる (JavaScriptが無効なRSSリーダーから見ている場合はページを訪問してください。) ソースコード /* サンプルの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソシオメディア | UIデザインパターン
VisualHaptics