サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
Create killer menus effortlessly!CSS Tab Designer is a unique and easy to use software to help you designcss-based lists and tabs visually and without anyprogramming knowledge required! With theCSS Tab Designer, you can : Quickly design your list visually Choose from a variety of styles/colors (60+ different designs/colors supported). [ Styles Authors /Credits ] Generate strict xhtml complian
MS、パケット情報の解析ツール「MicrosoftNetwork Monitor 3」を無償公開 次の記事 ≫：PHPからjQuery（JavaScriptライブラリ）を簡単に使うことができる「PQuery」 RightContextJavaScriptで簡単に独自の右クリックメニューを作成するライブラリ「RightContext」。 ページで右クリックを押したときに、次のようにポップアップで独自メニューを出すライブラリが公開されました。 右クリックにメニューを組み込んでしまうことで、ツールによっては大変便利な使い勝手を提供できるはずです。 以下に実装方法を紹介。 (1) まずScriptファイルを読み込みます。 <script type="text/javascript" src="rightcontext.js"></script> (2) 次に右クリックしたときに独自メニューを表
はじめに 本稿は、Webアプリケーション用のテストツールSelenium（セレニウム）を利用するための手順を解説するものです。これから2回に分けて、Seleniumの概要および、インストール手順、実際のテストケースの実行について解説していきます（後編はこちら。また、Tipsも公開しました）。 今回は、Seleniumの概要および、Seleniumのダウンロード、インストール手順について解説します。読者対象 プロジェクトの試験担当者を想定しています。対象フェーズ 本ドキュメントでは、プロジェクトにおいて作成したWebアプリケーションに対して、ブラウザを用いた試験（結合試験・総合試験）を実施するフェーズを対象としています。Webアプリケーションの製造、単体試験フェーズや、外部のアプリケーションに対する試験については対象外です。使用したソフトウェア・環境 Seleniumを動作させるにあたり、以
2012/07/22 追記 久しぶりに確認したところ、IE9 では以下で指摘している IE (このときは IE6 でした) の問題(3, 4, 6)がすべて解消されていました。 また、Firefox での問題(5)も Firefox14 で試したらは解消されていました(ただ、All-in-One Sidebar のパネルの上では mousemove イベントが発生しないようでした)。Chrome20 や Safari5 でも問題無く動作していますから、現在においてドラッグ＆ドロップを実装するには mousedown 時の preventDefault() だけでOKと言えそうです。すばらしいですね！ safari で動かないらしいのでどなたか情報ください！(くやしい!) というかこういうのに勝ち負けはないので実装できてる方は是非トラックバックお願いします。当方既に ipod 中毒ですし
■ テキストエリアとかリサイズ可能にするJavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にあるTEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist forUsability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル：なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
バナー画像の3倍の効果をあげたテキストリンク（powered by beBit） November 6, 2007 3:41PM written by Gen Taguchi ※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 今回ご紹介するのはレシピサイト、Cookpad.comの事例です。Cookpad.comでは有料会員（月額300円）があるのですが、その会員数が伸び悩んでいました。 そこでbeBit社に相談するのですが、それまではかわいいバナーをどーんとサイドバーに貼っていました。 ↑ なかなかかわいらしいバナーです。凝っていますよね。 しかしユーザビリティ調査をしてみると、そのバナー広告がほとんど見られていないことがわかりました。最近は「広告＝邪魔なもの」というイメージがありますよね。 そこでbeBit社ではこのバナーのかわりに次のテキスト
現在使われている計算機のほとんどは ウィンドウやマウスを使った グラフィカルユーザインタフェース(GUI)で操作を行なうようになっているが、GUIが一般に普及する前は キーボードを使った コマンドラインユーザインタフェース(CUI)で計算機に指示を与えたり 結果を表示させたりするのが普通であった。 CUIに比べるとGUIは圧倒的に操作が直観的になることが多いため、GUIを持たない計算機は現在ほとんど考えられなくなっているといえる。 家電製品などあらゆる機器で計算機やネットワークの機能が利用されるように なりつつあるが、これらの世界では現在でもCUI的なインタフェースが利用されていることが多い。 たとえばテレビのチャンネルを変えるために リモコンの数字キーでチャンネル番号と決定ボタンを押すという方式はCUI的な操作といえるだろう。 ビデオの録画予約にしても電子レンジにしても 直観的でな
ACSS-based FormTemplateCSSベースのフォームテンプレート。 フォームをデザインするのって結構面倒だったりしますよね。 フォームのテンプレートがあらかじめ容易されていれば、コピペであっという間にフォームが出来そうです。 しかもCSSベースなのでデザイン変更も容易でHTMLも綺麗ということですごく便利です。 次のような綺麗なフォームのテンプレート。 １枚の中にCSSの定義も全部入っていて便利に使えそうです。 関連エントリ セクシーなCSSホバーボタンを作成するチュートリアル DIVを垂直方向に中央寄せするCSSサンプルCSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例CSSの小技集、20個
HONGKIAT.COMのエントリー「50超のCSSやJavaScriptで実装するタブ型ナビゲーション集」から、当サイトで紹介したことのないものをいくつか紹介します。 50+ Nice CleanCSS Tab-Based Navigation Scripts
ソシオメディアは各種ビジネス向けデジタルプロダクトのデザイン支援を行うデザインコンサルティング会社です。業界をリードする OOUI（オブジェクト指向ユーザーインターフェース）設計、独自ガイドラインをもとにしたエクスパートレビュー、クリエイティブ組織を構築するデザインマネジメント支援など、様々な角度から御社のデザイン戦略をサポートし、デジタルトランスフォーメーションを実現します。 もっと読む 多くの方からご要望をいただいておりました OOUI メソッドの解説書『オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理』が、2020年6月5日、技術評論社より遂に出版されました。 オブジェクト指向ユーザーインターフェース（OOUI）とは、オブジェクト（もの、名詞）を起点としてUIを設計すること。タスク（やること、動詞）を起点としたUIに比べて劇的に使いやすくなり、開発効率も向上します。 ブ
Dynamic Ajax Tabs in 20Lines | 20bits The tabbed document interface is a common solution to the problem of presenting a user with multiple document in one window. 20行で実現できるAjaxタブインタフェース。 次のようなタブインタフェースをたったの２０行で実現可能なようです。 次のようなDIV要素を定義します <div class="tabbed-pane"> <ol class="tabs"> <li><a href="#" class="active" id="pane1">Pane 1</a></li> <li><a href="#" id="pane2">Pane 2</a></li> </ol> </p> <div
第7回 コンテンツの魅力を引き出す ユーザーフレンドリーなウェブライティングのコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題がおきないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） コンテンツの価値を確実に伝える ウェブライティングの基本6大原則とは「Content is King」という言い回しを見聞きしたことはあるだろうか？ これは“音やグラフィックなどの表現法より、提供する情報の中味がまず第一である”という格言であり、ビル・ゲイツも引用しているほどだ。最近は、SEOやLPOを筆頭とするさまざまな「ノ
Toggler Toggler is currentlyjust a proof of concept to mimic the functionality found in desktop programs like Adobe Photoshop ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」。 Togglerを使えばマウスをクリックして上からドラッグするだけでチェックボックスの一括チェックが可能になります。 使い方も次のように簡単です。 var toggle = new Toggler('elementId'); toggle.start(); // start the toggler (enabled by default) toggle.stop(); // stop the toggler これは便利ですね。
何かの「ユーザー・インターフェイス」を決める時に大切なことは、自分なりのはっきりとした「デザイン・ポリシー」を持って、誰が何と言おうと最後までそれをしっかりと押し通すこと。そういう「柱」をしっかりと持たないで作ったものは、往々にして「妥協の産物」になってしまう。 私が常に心がけていること（つまり、私のデザイン・ポリシー）は、「ユーザー・シナリオを８０：２０ルールで切り分け、常に８０の方（つまり多くの人が使うだろう機能）を最優先にした設計にし、２０の方（あった方が良いかもしれない機能、一部の人が必要とするかもしれない機能）は思い切って犠牲にする」こと。 典型的な良い例が、Youtubeを見るためのサービス、Rimo と oreseg。 機能的には、カテゴリー分けはしてくれているし、サムネールから自分で見たいものを選べるし、oresegの方が上である。しかし、「ただだらしなく面白そうなビデオを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
