タグ

5とUIに関するagxのブックマーク (35)

  • Thousand Years - サビタイジング

    サビタイジング 脳は少ない数(3個〜4個)であれば一瞬で把握できる。これは通常の数え上げるということよいも早くできる。ある数を数え上げるときには3個や4個とそれ以上では数え上げにものすごく時間がかかる。この現象のことをサビタイジングという。 インターフェースへの応用 3個や4個であればそれを見ただけで判断できる。しかし、それ以上になると一つ一つ見る必要が出てくる。これをインターフェースに利用できないかと考えてみる。 例えばこのブログのメニュ。10個のメニュがあって自分の探したいものを上から順番に見ていく。似たような並びなので4番目5番目からはしっかり見ないとうまく探せない。 3個から4個であれば一瞬で把握できるというサビタイジングを応用して、デザインにあわせてそれとなく3個ずつ分けて見た。どう思うかは人それぞれだけど、なんか見やすく(というより発見しやすく)なったかな。 おまけ 追記 何を

    Thousand Years - サビタイジング
    agx
    agx 2007/02/10
  • 面白いゲームの作り方:萎えさせない為の操作説明 島国大和のド畜生

    アクションRPGがあったとして。 たとえば、「レバー1回転+Aボタン」で周りの敵をなぎ払う、必須な技があったとします。 この操作をユーザーに教える方法として良いのはどういうものか? 一応、自分なりの考えがまとまったら、続きを読んでみてください。 ①・隠しコマンド 「気付いた人だけ使えます。」 ②・説明書 「レバー1回転+Aボタンで周りの敵をなぎ払います。」 ③・アドバタイズ ゲーム開始前、アニメ-ションによる説明付き。 「レバー1回転+Aボタンで周りの敵をなぎ払います。」 ④・街の老人 「レバー1回転+Aボタンで周りの敵をなぎ払う必殺技じゃ!覚えておくが良い!」 ⑤・街の子供 「レバー1回転+Aボタンで周りの敵をなぎ払う必殺技だって?見せて!見せて!」 ⑥・戦闘開始前に 敵集団 「わはははは。ワシらの弱点が、レバー1回転+Aボタンとは思うまい!」 ⑦・戦闘中に 主人公を囲んでボコボコにし、

  • 氷山の秘密、明らかに - The Joel on Software Translation Project

    Joel Spolsky ジョエル・スポルスキ 翻訳: Yasushi Aoki 青木靖 2002/2/13 「うちの開発チームのどこが悪いのか分からない」とCEOは心の中でつぶやく。「プロジェクトを始めたころには何もかもうまく行っていたんだ。最初の2週間チームは馬車馬のように働いて、ちゃんと動くプロトを作ったんだ。ところがその後は進み具合が這うように遅くなった。単に連中が怠けてるだけということかもしれん」。彼はキャラウェイ製のチタンドライバを選び、キャディに冷たいレモネードを取りに行かせる。「2、3人首を切れば、連中の尻にも火が付くだろう!」 その間、もちろん開発チームの方は何が悪いのか全然見当も付かない。実際何もまずいことはないのだ。彼らはスケジュール通りに進んでいる。 こんなことがあなたの身に起こらないようにすることだ!あなたの人生を百万倍も楽にしてくれる、こういう非技術系マネジメン

    agx
    agx 2007/01/02
    UIの完成度と全体の完成度をごかいする
  • SpaceNavigator PE (SOLVALOU.NET)

    このナゾのサムシングはいったいなんでせうか。 実は3Dアプリ用のインターフェイスらしいんですが、Google Earthに対応していて、これで地球をグリグリ操作できるらしいのです! > 中央のキャップを指先で押したり、引いたり、傾けたり、ひねったりするだけで、 > 上空から地上までの接近や上昇、360°パノラマ展開、道路や飛行機の航路に沿った > 曲線的な移動などをスムーズに行うことができます。 SUGEEE!超ホシス! これはお小遣いがたまったら即効ゲッツします。 ※今のところAmazonでしか売ってないみたいです(先行販売ぽい) SpaceNavigator PE (Personal Edition)メーカー: 3D Connexion価格: ¥ 9,980発売日: 2006/12/08売上ランキング: 73おすすめ度 posted with Socialtunes at 200

    agx
    agx 2006/12/23
    3D操作用マウス
  • prima materia diary - XMLのコメントに--を入れてはいけない

    agx
    agx 2006/10/28
    何か操作をした時にOK/キャンセルの選択を求めずに、変化した部分にメッセージが現れ、操作を取り消す手段がそこに存在。
  • caramel*vanilla » フォームのユーザビリティ向上 - Tooltip for forms

    agx
    agx 2006/10/28
    入力欄についての注意点をツールチップで表示
  • CSSでクールなタブUIを作成するサンプル:phpspot開発日誌

    OSResources - How to create CSS overlapping tabs? Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. CSSでクールなタブUIを作成するサンプル。 次のようなタブUIを作ることが出来ます。 サンプルのCSSを定義しておけば、後は次のようにシンプルなHTMLをコーディングするだけで上記画像のようなタブUIが作れます。 HTMLもクリーン。 <ul class="obtabs"> <li class="first"><span><a href="#">Jack</a></span></li> <li><span><a class="new

    agx
    agx 2006/10/08
  • FreeStyle Menus Demonstration

    Script License Agreement You may use this script only if you agree that: You must EITHER: Donating Users: This script is "donation-ware". If you can make a donation to support this script, it may be used on a website without a crediting link. Please consider making a donation! I have spent a lot of time developing, debugging and documenting scripts, and any support is welcome. More info... Free Us

    agx
    agx 2006/10/07
    CSSとJavaScriptでアニメーションするメニュー 動きながらフェードイン、フェードアウトする
  • NTT DoCoMo「N702is」:バッテリー残量を水として表示

    知ってる人はもう知ってると思うのですが、改めてDoCoMoのN702isは素晴らしいですね。 N702isは、バッテリー残量を、グラスの水のようなイメージで表示します。携帯を傾けると、モーションセンサーが傾けた角度を感知して、画面上の水面も右や左に傾ける仕組み。 この種の遊び心は素敵です。応用編でヤジロベーとかもやってみたらいいのに。 An Interesting Way of Showing Battery Status [Slashphone]

    agx
    agx 2006/08/30
  • Collection & Copy - パフォーマンス、インターフェイス、まとめること

    メモ仕事JavaScriptを使う前、理屈だけを勉強しているときは、パフォーマンスを軽んじていた。まずは適切に書くことが一番で、きちんと書けてさえいれば、後から簡単に高速化できるように漠然と思っていた。 しかしプロジェクトで書き、またLDRを使い、速いことは気持ちよいということを知った。サーバーからのレスポンスタイムを5秒から2秒に縮めるよりも、GUIのポップアップを0.3秒から0.1秒へ縮めるほうが、0.1秒から0.05秒に縮めるほうが、効果が大きく、より使って気持ちよくなるように思う。 時間は、意識の集中の度合いにより伸び縮みする。ページロードを待つ時間の集中よりも、キー操作を行い反応を待つ時間の集中のほうが濃く、この間、時間は延びている。また逆に、時間の掛かるインターフェイスに対しては、時間が延びるのを避けるため、意識が集中しない。 ユーザビリティや、使い勝手は、ベンチマークの数値

    agx
    agx 2006/08/20
    レスポンスタイムは、それぞれ色々なところで長く感じる時間が変わってくる
  • マウスホイールでパラパラ写真

    tatamilab.jp

  • 第17回 画面の切り替えを快適にする“演出”

    従来型のWebアプリケーションいわゆるHTML型と,RIA(Rich Internet Application)型との最大の違いは,「画面遷移」の考え方です。今回は,代表的な画面遷移の手法を紹介しましょう。 RIA型の特徴は「ノーリフレッシュ」 まずは,ごく普通のWebアプリケーションである「HTML型」ページ遷移のおさらいから始めます。HTML型では,基的にはサーバーから「ページ」という単位で情報が届けられます。つまり,次のページが表示されるまでの間に「画面リフレッシュ」が発生します。これによってユーザーは,瞬間的に思考が寸断されます。高速インターネット回線のユーザーであれば一瞬の問題ですが,それでも“断続的に”物事を進めているという印象は持つでしょう。 それに対してRIA型は,「ノーリフレッシュ」という機能を提供することが多々あります。画面を「ページ」という概念で区切るのではなく,「

    第17回 画面の切り替えを快適にする“演出”
    agx
    agx 2006/07/27
    画面遷移のインターフェイスをいくつかあげて、それぞれの説明。
  • Mouse wheel programming in JavaScript

    Though many people still find this page useful, there have been some changes in the browsers since last update of this page, and I generally consider some information here to be outdated. However, I suggest using MooTools or other general Javascript frameworks that provide portable and maintainable basis for writing Javascript code. Web applications are becoming more and more like “normal” desktop

    agx
    agx 2006/07/27
    マウスホイールをjavascriptで使う
  • 年表インターフェース (Dandelife.com) | 100SHIKI

    年表付日記サービス。 簡単に言うとそうなるだろうか。それがDandelifeが提供するシステムである。 日記を書かせるサービスはたくさんあるが、こういう風に年表風に見せてもらうとその人の人生がよりはっきり見えてくる。 また自分がそのときどきに経験したこととあわせてコメントしたりすることもできるだろう。 年表というインターフェースでストーリーを語る。日記以外にも使えそうなインターフェースかもですね。

    年表インターフェース (Dandelife.com) | 100SHIKI
  • ウノウラボ Unoh Labs: ユーザビリティ・ガイドライン

    GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

    ウノウラボ Unoh Labs: ユーザビリティ・ガイドライン
    agx
    agx 2006/07/24
  • Ajaxバリバリの面白UI検索エンジン:snap:phpspot開発日誌

    Snap Ajaxバリバリの面白UI検索エンジンsnap。インタフェース的にもクールでよい感じです。 検索結果をクリックで大きいサムネイルを表示して確認後、移動できるようになっています。 実際に使いやすい検索エンジンかどうかは別にして、 サイト作成時、サイトのインタフェース的にインスパイヤできる点があるかと思います。

  • 訪問者を魅了する15のユーザビリティ / ウェブデザインライブラリー

    投稿日:2006年5月30日   レベル:−    ソフトウェア:− ここにウェブサイトを魅力的にする要素を簡単に挙げてみました。 これらは、必ず気を付けるという順番で並べています。 1.できるだけ手短にサイトのトップに、その目的をはっきりと述べること。 訪問者はすぐに、来るべきサイトに来たかどうか知りたいのです。もし、そうでなければ立ち去るでしょう。 当たり前のようなことですが、90%のサイトがこれをしっかりできていません。 2.訪問者が探し物を的確に見つけられる環境を整えること。 ”サイト内検索機能”みたいなモノがあったらベストでしょう。これを分かりやすいところに配置してください。 全てのページの上方に表示できたらなお良いと思います。ウェブサイト上だけの宣伝文句などは例外です。 なにかを探すために訪問する人々に、手早く調べられる機能を付けて下さい。 3.写真にリンクを貼ってください。

    agx
    agx 2006/06/25
  • 部屋に流れる音楽からチャンネルを特定する Google の研究 | 秋元@サイボウズラボ・プログラマー・ブログ

    via TechCrunch 先週ヨーロッパで行われた EuroITV というインタラクティブTV についてのカンファレンスで、Google Research のある研究 (pdf)が最優秀論文賞を獲得したということ。 – PC のマイクを使って部屋の環境音を拾う – 収集した音を不可逆変換で「特徴」だけのデータに変換 – サーバーへ「特徴」のデータを送信 – 放送されているすべてのテレビ放送から同様に作成した「特徴」とつき合わせて、合致した番組の情報を返送 という手順で、今 PC のまわりで流れている番組情報をネットとマイクだけで取得できる。示されている応用例としては、 – 流れている番組の補足情報を PC で表示 – 番組で映っている服が近所のどこで買えるかという広告を表示 – 同じ番組を見ている人たちの一時的なコミュニティをネットで作成 – 参加者全体の統計から、よりサンプルが多い視

    agx
    agx 2006/06/10
    ユーザに何も難しいアクションをさせずに、複数のメディアを連携させる。基本的にはWeb上でのサービスとあまり変わらない気がする
  • 森山和道の「ヒトと機械の境界面」 - 脳と機械を直結させるインターフェイスの未来 ~「脳を活かす」研究会発足記念シンポジウム・レポート

    ■森山和道の「ヒトと機械の境界面」■ 脳と機械を直結させるインターフェイスの未来 ~「脳を活かす」研究会発足記念シンポジウム・レポート BMI(Brain Machine Interface)、あるいはBCI(Brain Computer Interface)と呼ばれるインターフェイス技術がある。脳と機械、コンピュータを直結させるインターフェイス技術だ。人間は脳で考え、脳で身体を制御している。インターフェイス技術がターゲットとして脳を選ぶことは必然だと言えよう。 国内外で研究が進んでいる技術だが、4月4日、5日にはBMI技術を中心としたシンポジウムが開催された。少なくとも今のところはPCとは全く関係ないのだが、「脳を活かす」と題されたこのシンポジウムの内容を簡単にレポートしておきたい。 ATR(国際電気通信基礎技術研究所)大会議室にて開催されたこのシンポジウムは、「脳を活かす」研究会の発足

    agx
    agx 2006/05/13
    BCIに関する最新の発表「脳を活かす」研究会発足記念シンポジウム・レポート
  • Niceformでエレガントなフォーム生成:phpspot開発日誌

    badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例) <scrip

    agx
    agx 2006/04/23
    配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。