suVeneのあれ: [usability]うざい！めんどい！果てしなくうっとおしい！
2006年11月02日 [usability]うざい！めんどい！果てしなくうっとおしい！ 追記1: 2006/11/03 22:45 いや、何がってアレですよ。 ITPro とか、CNet とかのページ分け！ こーいうの(CNet)とか こーいうの(ITPro)ですよ！！！！！！ 2ページとか、3ページをチョロチョロ区切らんと、、、 1ページにせんかー！ と思う訳です。 んで、常に戦ってる訳ですよ。 え、どんな風に戦ってるかって？ こんな風にですよ！！！ 地道に、ブクマするときに「ページ分けが読みにくい！」と不満をぶつける訳ですよ！ ITPro なんかは、ブクマ数表示してるくらいだから、きっと見てるはず！ そしてこの声が、一人、また一人と増えてきて、ユーザビリティについて考慮するようになり、いずれ 1ページにしてくれるか、オートページャーのような機能が追加される事を期待して活動してるんです
百科事典の情報をツリー状に表示「知のコンシェルジェ」
日立システムアンドサービスは百科事典などの情報をツリー状に表示できるWebアプリケーション「知のコンシェルジェ」を開発した。これを利用したオンラインサービス「ネットで百科 for ブロードバンド」を11月に開始する。 日立システムアンドサービスは、百科事典などの情報をツリー状に表示できるJavaによるWebアプリケーション「知のコンシェルジェ」を開発した。これを利用したオンラインサービス「ネットで百科 for ブロードバンド」を11月に開始し、2007年3月までは試行期間として無償で利用できる。対応するOSはWindows 2000／XP、Mac OS X 10.4以降。ブラウザはInternet Explorer 6.0以降、Safari 2.0以降をサポートする。 「知のコンシェルジェ」の構成図。辞書などのデジタルコンテンツを、百科事典の項目名と関連項目名のように関連付けした「体系化さ
「OK」と「キャンセル」、どちらが有効か ― ＠IT
ユーザビリティのヒント（最終回） 「OK」と「キャンセル」、どちらが有効か 「情報表現の最適化」 ソシオメディア 上野 学 2006/10/20 デスクトップのメモ帳を新規に開いて、メモを書き、ウィンドウを閉じようとすると、「変更を保存しますか？」というメッセージダイアログが表示されます。ユーザーにしてみれば、「新しいメモをいま書いたところなのに、なぜ『変更』なんだ？」と思うでしょう（本文から） 英語や、日本語の横書きでは、情報は大きく上から下に、左から右に展開していきます。ユーザーは画面（ウィンドウ内）の左上から右下に向かって意識を推移させて、そこで表現されている情報を取得していきます。 実際にはユーザーは、まず画面中央付近に視線をやり、そして全体をざっと見渡してから、重要と思われる個所に注目していくようです。ひとたび内容を読もうとか、入力フィールドを埋めていこうと決めたら、当然、上から
ユニクロ（米国）のサイトがやたらクールな件
Uniqlo.com 見た目もいいのですが、 インタラクションな動きが、とにかく素晴らしいんです。 例えばですね…… 「EXPERIENCE UNIQLO EXPLORER」って書いてあるリンクをクリックすると、 急に、小っちゃいユニクロのロゴがパパパパパッと大量に現れて整列して、 その小っちゃいロゴの１つ１つが、いつのまにか、服の一部の画像になります。 服の一部の画像をマウスオーバーすると、服の全体像がポップアップします。 それをクリックすると、服がズームアップし、画面いっぱいにゆらゆらと漂います。 画面いっぱいの服をクリックすると、今度はその服の画像が背景画像となり、 小っちゃいユニクロのロゴが大量に現れて整列して、服の一部の画像に変わります。 なお、「服の一部の画像」がどこに配置されるかは、背景画像によります。 つまり、背景画像の色合いとあった色の「服の一部の画像」が置かれるのです。
sta la sta - カッコいいロゴをデザインするためのノウハウ集
Before & After | Email article: 0363 Design a logo of letters 魅力的なサービスや企業には魅力的なロゴがつきもの。例えばflickrなんかは一目でそれと分かるインパクトの強いロゴデザインを採用している。 あなたもただ英字を並べる以上のカッコいいロゴをデザインしたいのなら、こちらのサイトで配布しているドキュメントが参考になると思う。 この『How to design a logo of letters』というドキュメントでは、英字ロゴを作る際にどういう並べ方をするとカッコ良くなるかを実例を挙げて説明してくれている。 どれもこれもちょっとした工夫なのだけど、その工夫があるのと無いのとでは、見る人に結構違う印象を与えると思う。ぜひとも全部覚えておきたい。 これから新規にサービスや製品をリリースすることを考え中の方は、ロゴを考える前にぜひ
mixiはどうしようもなくダメダメ、なのかもしれない
http://blawat2015.no-ip.com/~mieki256/diary/200609254.html#200609254 UI が腐ってるのは確かな気はする。 - 1日分の日記を「開く」「閉じる」ために、マウスクリックが2回。 - それを、30日 x 5ヶ月分、繰り返す。 - かつ、自分の場合、8人の友人がマイミク登録されてるから…。 つまり単純計算で、 - 1,200回のマウスクリックにより、 - 1,200個のタブを開いて、 - さらに1,200回のマウスクリックでタブを閉じて、 ようやく目を通すことができた。と言うことになる。 でも時間泥棒的インターフェイスってなぜか一般人には ウケるんだよね。 たとえば Excel とか。 あー、2ch とかも良いインターフェイスじゃないよな。 マウスを単純にクリックをさせる、みたいなインターフェイスって、 ユーザーが何かをした気に
ドラッグ＆ドロップが簡単に出来るJavaScriptライブラリまとめ:phpspot開発日誌
Ajax Digest // Drag&drop javascript libraries review ドラッグ＆ドロップが簡単に出来るJavaScriptライブラリまとめ。 DHTML Goodies デモ DOM Drag デモ Walterzorn Drag&Drop デモ X Library デモ Drag-and-Drop extension for Prototype デモ Toolman DHTML デモ Rico デモ DragLib デモ Yahoo User Interface Library デモ script.aculo.us JavaScriptのライブラリは単純に機能がいいというだけではなく、動作の軽さ、ファイルサイズの軽さも気になる点ですね。 それぞれに性質があって出来る/出来ないことがあったり、コーディング方式が自分のスタイルにあっているとかもあって選択肢
antipop - livedoor Reader と GMal に見る、大量のチェックボックス処理 UI における革新的工夫について
HTML には、複数の項目を選択する UI として、たとえばチェックボックスがあります。こんなやつですね 好きなメンバを選択してください(複数可) 梅田えりか 矢島舞美 村上愛 中島早貴 鈴木愛理 岡井千聖 萩原舞 有原栞菜 これぐらいの量だったら、選択するにせよ解除するにせよ、まぁたいしたことはないかもしれませんが、もし、選択項目が数十あるいは数百あったらどうでしょうか。激しくめんどくさいですよね。 世界的に優れたフィードリーダである livedoor Reader は、フィードリーダとしての使い勝手は当然として、そんなところにも実は気を配っていたりします。 たとえば、LDR のおすすめフィード登録画面「アルファブロガーズ」を見てみると(livedoor ID でログインする必要があります)、アルファブロガーさんのブログが数十個表示されるのですが、これを選択または解除するに際して、チェッ
ヽ( ・∀・)ノくまくまー(2006-09-07) CSSでポップアップ
● CSSでポップアップ ちょっとした説明文をポップアップするには "title" 属性が便利であるが、複数行表示がブラウザに依存し、画像を含んだコンテンツには対応できない。かと言ってJSを持ち出すのも面倒だと思っていたら、CSSのみで実現できるらしい。そのまとめ。(via RailsChat) CSS .popup .tips { display : none; position : absolute; } .popup a:hover { position:relative; } .popup a:hover .tips{ display : block; top : 30px; left : 20px; white-space : nowrap; text-decoration : none; border : 1px solid black; color : black; back
美しいレイアウトを計算してくれるツール :: Love & Design ::
以前 Webデザインと黄金比の関係 でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。 電脳狂想曲 レイアウトの小技 使い方と説明 実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。 【使用例】段組（２カラム）するとき 横幅780px の場合 黄金比：横幅 / 552px / 228px 白銀比：横幅 / 512px / 268px 白金比：横幅 / 571px / 209px 第二黄金比：横幅 / 565px / 215px ↓もしかして黄金比？ これまでテキトーに決めていたという方も、Webデザインだけでなく、プレゼンの資料などにも活用できそうなので、ぜひ一度お試しください。 参考記事 「見えない線」に沿ってページをレ
「使える、使いやすい、使いたい」と思えるUIとは？ - @IT
最新トレンドやキーワードをわかりやすく解説 WCR Watch ［15］ 「使える、使いやすい、使いたい」 と思えるUIとは？ アドビシステムズ 上条 晃宏 2006/8/31 ここ数年、リッチクライアント技術としてFlashやFlexを採用する例が急速に増加している。この状況の背景としては、アプリケーション開発における“使いやすさ”の実現が重要な要件の1つとして認知されつつあることが挙げられるだろう。 しかし、単にFlash／Flexを使ったからといって使い勝手の良いユーザーインターフェイスができるわけではない。例えば、使いにくかった画面を“そのまま”Flexで置き換えたとしたら、従来からの問題点も再現することになる。これでは改善は望めない。画面設計を行う側にも使いやすさを実現するためのアプローチが求められるだろう。 ここで注目されるのがエクスペリエンスデザイン（XD）だ。エクスペリエン
Yahoo! UI LibraryのFonts CSS
OSのみならずブラウザにも左右されるWebにおけるフォント。多くの場合はHelvetica(WindowsではArialになる)やVerdanaなどの一般的なフォントを指定し、多少サイズをいじる程度のアプローチか、まったく無指定でユーザーに任せるといったアプローチであることと思う。徹底的に調節するとなるとものすごくツライから。Yahoo! UI Libraryで提供されているFonts CSSはそのフォント調節の手助けをしてくれるCSSファイル。 具体的な効用は、ほとんどの現行ブラウザで13ピクセルのHelveticaが基本のフォントになるというもの。つまり、OSとブラウザによる文字表示の差異をほとんど吸収してくれるという効用。 当該のCSSファイルを開いてみると、微妙に読みづらいCSSコード。よく読んでやると*property: value;というハックのみの模様。このプロパティ名の直前
Portfolio > JavaScript :: Kyosuke.jp
設置方法 まず、ファイル一式をダウンロードします。 通常版 | prototype.js利用版 stripedtableを使いたいHTMLファイルにjavascriptを読み込みます。 <script src="js/stripedtable.js" type="text/javascript"></script> prototype.js版を使う場合は先にprototype.jsを読み込みます。 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/stripedtable_proto.js" type="text/javascript"></script> テーブルに設定するクラス名や、trに対して自動的に付加されるクラス名を変える場合はstripedtable.jsの設定部分をテ
JavaScript 不要なサイドメニューのツリー化 for Movable Type
Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズです。 以前、「サイドメニューのツリー化スクリプト（改）」という記事で Movable Type の各リストを JavaScript を用いてツリー化するカスタマイズを紹介しておりますが、3.2 以降で新しいMTタグ *1 が追加されたことで、ほとんど全てのリストについて、JavaScript を使用せずにツリー化が可能であることが判明しました。 この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがあります。 ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能 JavaScript 起動による表示遅延がなし JavaScript 関連のカスタマイズが不要 ということで、Movable Type のツリー化については本エント
JavaScriptを使わずにページのCSSを切り替える:phpspot開発日誌
ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、 JavaScriptオフでも同様のことを実装したい場合のサンプル。 JavaScriptを使わずに、PHP+クッキーを使ってページのCSSを切り替えてみましょう。 PHPの知識がなくても、次のサンプルを使えば簡単に誰でもCSSを切り替えることが出来ます。 次のサンプルは、main.css , blue.css , red.css , pink.css というCSSを切り替えたい場合のサンプルです。 (1) まずは、レイアウトを保存するクッキー設定用のPHPスクリプト( index.phpとして保存 ) <?php $valids = array( "main", "blue", "red", "pink" ); $layout = (isse
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザビリティ会議レポート：実績があがるサイトの秘訣を探りました | 100SHIKI PR Board
CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
UNIQLO
Xgl がカッコよすぎる - IT戦記
スゴイ地図はサービスを終了いたしました〜