MOONGIFT: » prototypeベースのJavaScriptコンテクストメニュー「Proto.Menu」:オープンソースを毎日紹介
Webサイトで使われるJavaScriptのイフェクトで、コンテクストメニュー（右クリックメニュー）の自作というのがある。意外と作りこみが面倒だったり、マルチブラウザへの対応が心配で敬遠されがちだ。 だが、Firefox 1.5以上、IE6以上、Safari3以上、Opera9以上に対応しているとなれば、使う気にもなるかも知れない。 今回紹介するフリーウェアはProto.Menu、prototypeをベースにしたJavaScriptコンテクストメニューライブラリだ。JavaScriptなのでソースは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 Proto.Menuはprototype.js 1.6.0 RC0以降を必要とする、わずか1.5KBのライブラリだ（ミニ版の場合）。それだけで簡単にWebページ上でコンテクストメニューを実現してくれる。 テーマはCSSで作
MOONGIFT: » 半透明でクールなヘルプ「CoolTips」:オープンソースを毎日紹介
最近新しいサービスを作っているのだが、ようやく最終段階に入り細かいユーザビリティを気にできるようになった。その中で、入力フォームや分かりづらい項目に説明をつけようと思った。 ただのリンクでは寂しすぎる。あまり使われる事がない機能かも知れないがクールに攻めよう。 今回紹介するオープンソース・ソフトウェアはCoolTips、半透明でクールなツールチップだ。 CoolTipsは指定した場所にマウスを持っていくと浮かび上がるツールチップで、半透明の角丸になっている点がクールだ。しかも半透明で、背後の項目が透けてみえる点も良い。 他のライブラリとして、prototype.jsやscript.aculo.usを利用している。ツールチップを表示する項目側は特に設定はなく、title要素に説明文を入れておけば良いだけだ。後はJavaScript側で項目を指定すれば簡単に実現できる。 背景色、枠線色、文字色
効率の良い情報収集（2） - 自分、無粋ですから
IT（1）はこちらUIをどうするかで、閲覧性の高いユーザーインターフェイスは何だ？という話になるんだけど、ユーザーインターフェイスには「見せ方」と「操作性」の2点の論点がある。ぼくがwindowsのパソコン…というか、マルチウィンドウのパソコンを使っていて、いちばん気にするところは「視線の移動だけで変化(新着)の概要が得られるか」だよ。（中略）でもバルーンとか流れるティッカーはだめ。超だめ。あれっと思った時には、もう情報が視界から消えているし、なにより目障りだから。ぼくはまちちゃん！：UIについて思うことリアルタイムなプッシュ型情報の収集の場合、ある程度は画面内に敷き詰められていた方がいいという話。あまりにも綺麗に整理整頓されていて殺風景な机よりも、自分の把握出来る範囲である程度他人から見ると散らかっている机の方が、精神的な所は別にして物理的には作業効率がいいのと同様に、引っ張り出してこな
チェックボックス 対 ラジオボタン
間違いその 1 は、この記事のテーマそのものだ。ラジオボタンを使うべきところで、チェックボックスを誤って使っているということだ。上記の 2 つの選択肢は互いに排他的なので、1 つの選択肢だけが選べるラジオボタンを使うべきだ。 間違いその 2 は、そもそも 2 つの質問をしていることと、それを大きくて、言葉数の多い枠に入れていることだ。ここでは、短い 1 つ質問をするほうが、ずっとよい。「はい、私にその他のお薦めの製品、ソリューション、サービス、講習会などの情報を送ってください。」といった具合だ。 皮肉にも、1 つの質問にした場合はチェックボックスを使うのが正しい。なぜなら、ユーザは yes か no かを答えることになるからだ。eコマースサイトでのユーザテストから導き出された推奨事項では、チェックボックスの初期値はブランクにすることになっている。そうすれば、さらに情報提供を希望するユーザは
ダイアログボックスに屈服
GUIスタンダードから逸脱したインタラクションは、ユーザビリティの破綻を招き、アプリケーションをまったく使えないものにしてしまいかねない。 Defeated By a Dialog Box by Jakob Nielsen on July 23, 2007 どんなユーザ・インターフェイスでも操作してみせる。コンピュータを使い始めて33年、出来の悪いデザインをプロとして分析するようになってからは25年になる。ユーザを困惑させ、苛つかせるインタラクションデザイナーの所業は概ね見尽くしてきた、と思っていたのだが…。 私の手にかかればどんな厄介なユーザ・インターフェイスも御手の物だと思っていたのに、最近実は、とあるダイアログボックスにすっかりやられてしまった。先へ進む方法がどうにも分からず、諦めて別のアプリケーションを使わざるを得なかったのだ。 ユーザを満足させることのないソフトウェアが名を残すこ
デフォルトの力
検索エンジンのユーザは、検索結果のトップに表示されたものをクリックする。適合率では説明しきれないほどの割合で。ここでもまた、デフォルトにこだわるヒトの傾向が示された。 The Power of Default Values by Jakob Nielsen on September 26, 2005 ウェブのユーザは、どれほど騙されやすいのだろう？ 残念なことに、“非常に”騙されやすいと言って良いようだ。 Cornell大学のThorsten Joachims教授らが、検索エンジンに関する研究を行った。検索エンジンに関する研究は様々あるが、この研究は、ユーザがSERP（search engine results page：検索結果表示）からどのリンクへ遷移するかを見るものだった。ユーザの42％が検索結果のトップを、8％が2番手をクリックするという結果が得られた。ここまでのところ、面白い話は
【ハウツー】ゼロからはじめるModalBox - ModalBoxでつくるMacOS X風ダイアログ (1) ゼロからはじめるModalBox - ModalBoxでつくるMacOS X風ダイアログ | パソコン | マイコミジャーナル
ModalBoxとは? ModalBoxはMacOS X風のダイアログを表示するライブラリです。ダイアログ内に表示する内容は非同期通信で読み込まれます。表示できる内容はHTMLファイルやテキストファイルのみで、単純に画像を表示することはできません(*1)。ModalBoxはHTMLファイルを表示するためダイアログには決められたボタンだけでなく様々な情報を表示することもできます。また、ModalBoxはprototype.jsライブラリとscript.aculo.usライブラリを利用しています。 ModalBoxはこのURLにあるページからダウンロードすることができます。 ModalBoxのダウンロードサイト ページ上にある「Download latest version」の囲みの中にある「ModalBox 1.5.3」をクリックするとダウンロードが開始されます。ダウンロードしたファイルはZ
Extライブラリを使った超クールファイルツリーＵＩ実装ライブラリ:phpspot開発日誌
Ext FileTree Widget Example by Saki Extライブラリを使った超クールファイルツリーＵＩ実装ライブラリ。 ライブラリを使って次のようなクールなツリービューＵＩを実現できるようです。 ツリー部分はAjaxによって実装されているっぽいです。 Extを使ったライブラリはカッコよく、デザインも一貫性があっていいですね。 関連エントリ JavaScriptライブラリExtを使った伸縮するクールメニュー実装ライブラリ「Ext.Accordion」 超リッチJavaScriptコンポーネント集「Ext」がprototype.jsに対応
使いやすさ日記: 365. ふと思うこと / 印刷用ダイアログボックスについて
2007年7月 5日 WordやPowerPoint?などのいわゆる『Office製品』の印刷用ダイアログボックスには、みなさん何かしら苦い想い出があるのではないでしょうか。私の会社でも、自分の思惑とは異なる印刷結果に、「なんじゃこりゃあ!!」と殉職したあの刑事さながらの叫びをあげる同僚が後を絶ちません。そんな印刷用ダイアログボックスの中でも、特に頭を悩ませるのが「印刷範囲」のページ指定です。（図1 赤枠内） 正しくなかろうが、とりあえず何でも入力できてしまう寛容な入力方式もさることながら、「○○ページから最後まで」とページを指定したいとき、ダイアログボックス上からは最後のページが「何ページ」なのかを把握することができません。ダイアログボックス後ろの書類上にページ数は表示されていますが、意識はダイアログボックス上に向けられているわけですし、その表示すら隠れてしまっていることもあり得ます。
リボンはもっと評価されるべきだ (kuruman.org > Kuruman Memo)
MS Office 2007に関わってた人と話していたのだけれど、リボンについて良い話をあまり聞かないと嘆いていた。ふと思い立って「リボン、良い、Office」の3語で検索してみると、Office 2007のリボンを2003スタイルに変更するなんて記事が上位に上がってしまう始末。確かにこれは悲しい。 リボンインタフェースもとい、Office 2007の難点はたったの2つだけだ。 今までと違うことによる取っつきにくさ 左上にあるOfficeボタンを押すことが出来ることに気づかないといくつかの作業が出来ない これはどちらも、過去の柵にとらわれているが故の難点である。それは些細なことだ。少し悩みながら使うことによって、Microsoftが従来のインタフェースを提供しない理由を察することが出来る。その先にはより使いやすい環境があるのだ。 インタフェースが変更されると保守的な上級者が主となって変更す
コマンドリンク
アプリケーションで用いるコマンド（命令）は、ボタンでもリンクでも表現できるようになってきたので、どちらが適しているかを決めるには、昔よりも多くの説明が必要とされる。しかしながら、重要なコマンドにはやはりボタンを用いるのが一番だ。 Command Links by Jakob Nielsen 2007年5月14日 今よりも物事がシンプルだった時代には、ウェブサイト向けガイドラインの数々が存在し、その一方でアプリケーション向けガイドラインの数々が存在していた。そして両者は明らかに別物だった。たとえば、ユーザーの選択肢を表現するためには、以下のような別々のルールが示されていたのだ： ウェブサイトでは、リンク（アンダーラインを引いた色つきテキスト）を用いてナビゲーションを提供すること。 アプリケーションでは、メニューやボタンを用いて機能を提供すること。 ウェブサイト向けとアプリケーション向けのガイ
サン、GUI作成向けスクリプト言語“JavaFX”発表、その狙いは ― ＠IT
2007/05/09 米サン・マイクロシステムズは5月8日（現地時間）、米国サンフランシスコで開催中の開発者向けイベント「JavaOne」で、Javaの文法に近いスクリプト言語「JavaFX Script」と携帯端末向けの実行環境「JavaFX Mobile」を発表した。JavaFX ScriptとJavaFX Mobileは、“JavaFX”のブランド名の基に展開されるシリーズ製品の第一弾となる製品で、今後も複数の製品が追加される予定という。 リッチなGUI作成に適したJavaFX Script 「スクリプト言語は、すでに何十とあるのに、なぜ今さらまた1つ加えるのかと思う人もいるでしょう」。JavaOneの基調講演に登場したJavaの生みの親、ジェームス・ゴスリング（James Gosling）氏は、JavaFX Scriptの紹介をそう切り出した。ゴスリング氏によれば、スクリプト言語に
アップル ヒューマンインタフェースガイドライン
アップル ヒューマンインタフェースガイドライン 原文：Apple Computer Inc. 訳：かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ
Windows VistaのインタフェースAeroの良いところ (kuruman.org > Kuruman Memo)
少なくとも私の周りではWindows Vistaの評価として、良い話はあまり聞かない。確かに決して軽くないし、機能としてはMac OS XやLinuxで見たような機能ばかりだ。しかしながらVistaのAeroが持つタイトルバーの透過機能はすばらしいと思う。 ある程度コンピュータを理解している人にしてみればウィンドウが重なっているというのは当然のこと。だからこそこの透過機能は余計なものに感じられる。全体が透過されるわけではないから裏側の内容を活用できるわけではなく、役に立たないものだからだろう。 しかし実際のところウィンドウが重なっているという認識のないユーザは存在する。Aeroのタイトルバー透過機能はその部分を理解させる良い実装だろう。透過にすることは少なからず可読性を犠牲にするが、タイトルバーという場所はそもそも表示内容の本質ではない為ソフトウェアを使う上での影響は少ない。それでも起こる
"使いやすさ"への取り組み / 第35回 適応するインターフェースの本質 | Ricoh Japan
第35回 : 適応するインターフェースの本質 掲載日：2007年3月28日 記事で紹介するURLおよびリンク先の内容は変更されていることがあります。ご了承ください。 すでに出来上がっているユーザー・インターフェースをさらに使いやすくするにはどうしたら良いだろう、と考えるといろいろなアイディアが出てくる。 よくあるアイディアに、「自分が使わない機能は無駄だから消して、それを使うためのボタンなどを画面から消してしまえばよい」というものがある。このアイディアには確かに一理あって、使わないボタンなど無い方が、画面のスペースは有効活用できるわけだ。よく使う機能のボタンを大きくして、わかりやすい位置に配置したりもできるようになるだろう。しかし、今使わない機能のすべてが将来にわたって不要かというと、それはなかなか微妙である。また、それら機能やボタンを見えないようにするのは誰か、という別の問題も出
視覚障碍者向けソフトUI雑考
(0)はじめに ここでは「視覚障碍者向けソフトUI雑考」と題して、私が視覚障碍者向けソフトの開発に携わってから考えてきた"ユーザーインターフェースはどうあるべきか"というところを思いつくまま書いていこうと思います。同じように障碍者に配慮したソフトウェアを作成しようというかたの参考になればと思いますし、あるいはパソコン利用をサポートする立場のかたが、障碍者のパソコン利用上どのような困難があるのかについて知るためのヒントになればと思います。あくまで個人的な見解ですし、間違いもあるかもしれません。また既存の方式や特定の製品をおとしめようという意図は全くありませんので、その旨、ご承知置きください。また、ここに書く文章で、OS環境に依存した具体的な記述をする場合には、実際の視覚障碍者のかたがたの利用状況に合うように、Windowsを対象とすることにします。 (1)メニューバーについて 最初のテーマと
「直感的」とはなんだろう(1) - めもり〜り〜く
ドラッグ＆ドロップは、実は、計算機を知っている人にとってはあまり直感的なものではない。昔なにも知らなかったころは、なんて直感的なんだろう、とか思っていたけれど、実際にドラッグ＆ドロップを使ったプログラムを書いてみてびっくりした。あたりまえといえばあたりまえなんだけど、コンピュータの中にあるものは別に実際の「モノ」じゃない。だから、それを「モノ」として扱って、あっちからこっちへ「ぐいっ」と持って行くことは、普通に考えれば出来ないことなんだ。たとえば、Safariで写真サイトを開いているとき、写真をぐいっとつかんだらどうなるだろう。Macを使ってる人はためしたことがあると思うけれど、半透明な写真がマウスの下にでてきて、あたかも写真を本当に掴んで動かしているように見えるはず。何も考えなかったらこんなふうになるはずがない。Windows上のIE6で同じことをやったら、禁止マークのマウスカーソルにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/yui_editor
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
ソシオメディア | UIデザインパターン
