タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
14 Tab-Based Interface Techniques | Developer's Toolbox | Smashing Magazine
A module tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content’s corresponding tab control. A module tab is a User Interface (UI) design pattern where content is separated into different panes, and each pane is viewable one at a time. Th
はてなダイアリー - つれずれなるままに… - 今話題のあのサービス
に手を出してみたんだけど、携帯から更新できない(らしい)ので、今大学にいることが書けない…
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
ステルス・ウェブ・デザイン - Ringo's Weblog 2006年12月16日 アーカイブ
ステルス・ウェブ・デザイン ステルス・デザインの方法という本がある。(Webテキスト) この本では、「レーダーで見つけにくいかたちは良いかたちである」という、 デザインに関する新しい理論を提唱し、その名前を「ステルス・デザイン」と命名している。 ステルス・デザインの理論には、まだ完全に煮詰まっていないところが残るのだが、 極めて大きく発展する可能性を秘めている。 このような面白いアイデアを出すパスファインダー・チームの皆さんには敬服する。 私はまず、ステルス・デザインの考え方を発展させる第一段階として、 「ステルス・ウェブ・デザイン」という方法論を考え、いくつかの提案をする。 その提案資料を作成したので、このエントリにupしておく。 この資料は、Mac用のKeynoteで作成した。PDFで出力すると、 画質が不足して微妙なニュアンスが伝わらないので、時間のある方には、 ぜひTIFF版を見て
第9回 どうすればユーザー登録してもらえるか：ITpro
この連載では，エンジニアの視点から使いやすさを考えています。今回はユーザー登録画面などに代表される，フォームを使った入力画面について考えてみたいと思います。 なぜこのテーマを選んだかというと，フォームを介して利用者からデータを受け取って処理をして返すという一連の処理が，ウェブサイトのバックエンドの処理やデータ形式などによって変化しやすく，プログラマやエンジニアの作業がもっとも使いやすさと関係しやすい分野ではないかなあ，と思っているからです。こうした部分はエンジニアが使いやすさに寄与しやすい部分であり，もっと言えば，使いやすさを向上させるに当たって，エンジニアにしかできない事柄がたくさんある部分だってことになると思います。 今回は「ユーザー登録ページ」を例に，フォームにおける使い勝手を考えていきたいと思っています。その理由としてまずは，筆者が勤務する株式会社はてなにもユーザー登録画面があり，
視線の流れをブロックしていませんか？ (ユーザビリティ実践メモ)
ユーザにクリックしてもらいたいリンクがなかなかクリックされない。そんな悩みを抱えているWebマスターの方も多いのではないでしょうか。 今回は、視線の流れに配慮したコンテンツ配置の一例をご紹介します。 上は、ある企業サイトのサービスを紹介するページです。次のような構成です。 上部は、サービスの概要 その下に、サービスに関する注意書きの説明（認可を取っているか、など） さらに下に、詳細ページへの振分けのリンク このページでは、ユーザにさらに関心を持ってもらえるよう、詳細ページへと誘導したかったのですが、ユーザはそもそも下までスクロールしてくれませんでした。 注意書きの説明を枠付きで横幅いっぱいに配置したために、多くのユーザは、もうここから下は関係無いだろう、と思ったのです。 何気なく置いたコンテンツが、ユーザの視線の流れをブロックし、目的の情報までたどり着くことを阻害してしまっていたので
hereticanthem co.,ltd. » CSSやJavaScriptを使ったオシャレな技やサンプルが解説＆配布しているサイトのまとめ
パチンコの遊び方と攻略 – 成功のための戦略を発見しよう！パチンコの遊び方をマスターしよう！プロのテクニックを習得して勝者に！パチンコの楽しさを体験しよう！成功のための戦略を発見しよう！戦略を鍛えてより高い勝率へ！
JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]
代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧
![JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e43158a9b02ff4438d55128491865b833395bd4d/height=288;version=1;width=512/https%3A%2F%2Froundup-inc.co.jp%2Fwp-content%2Fuploads%2F2019%2F09%2F9106fa4d7b0fdf2534aa97dea102e186.png)
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」:phpspot開発日誌
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」 2006年10月22日- Tooltip for forms You can download the entire script from this Zip file フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」。 このライブラリを利用すれば、次の画像のようなツールヒントをフォーム上に出すことが可能です。 実装は、必要なライブラリを読み込んだ後、次のように、tooltipText 属性にヒントを書きます。 <input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"> そして、
ユーザビリティって単にユーザーインターフェイスの問題ではないよね: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 上記の２つのエントリーにも何人かの方からはてなでブックマークしてもらったんですが、そのタグに[インターフェース]だとか、[UserInterface]だとかいうタグがあるんですよね。もしかしたら、Webユーザビリティって単にユーザーインターフェイスの問題として捉えられてるのかな？なんて思ったんです。Jesse James Garrettの5 Planes Modelだったり、ISO9241-11によるユーザビリティの定義に含まれる有効さ、効率性、満足度といった評価ポイントなどについても書いたので、Webユーザビリティ＝ユーザーインターフェイスの問題ではないことはわかっていると思いますが、もしかしたら、まだ、Webユーザビリティがユーザーインターフェイスだけの問題だと考えてい
antipop - livedoor Reader と GMal に見る、大量のチェックボックス処理 UI における革新的工夫について
HTML には、複数の項目を選択する UI として、たとえばチェックボックスがあります。こんなやつですね 好きなメンバを選択してください(複数可) 梅田えりか 矢島舞美 村上愛 中島早貴 鈴木愛理 岡井千聖 萩原舞 有原栞菜 これぐらいの量だったら、選択するにせよ解除するにせよ、まぁたいしたことはないかもしれませんが、もし、選択項目が数十あるいは数百あったらどうでしょうか。激しくめんどくさいですよね。 世界的に優れたフィードリーダである livedoor Reader は、フィードリーダとしての使い勝手は当然として、そんなところにも実は気を配っていたりします。 たとえば、LDR のおすすめフィード登録画面「アルファブロガーズ」を見てみると(livedoor ID でログインする必要があります)、アルファブロガーさんのブログが数十個表示されるのですが、これを選択または解除するに際して、チェッ
「使える、使いやすい、使いたい」と思えるUIとは？ - @IT
最新トレンドやキーワードをわかりやすく解説 WCR Watch ［15］ 「使える、使いやすい、使いたい」 と思えるUIとは？ アドビシステムズ 上条 晃宏 2006/8/31 ここ数年、リッチクライアント技術としてFlashやFlexを採用する例が急速に増加している。この状況の背景としては、アプリケーション開発における“使いやすさ”の実現が重要な要件の1つとして認知されつつあることが挙げられるだろう。 しかし、単にFlash／Flexを使ったからといって使い勝手の良いユーザーインターフェイスができるわけではない。例えば、使いにくかった画面を“そのまま”Flexで置き換えたとしたら、従来からの問題点も再現することになる。これでは改善は望めない。画面設計を行う側にも使いやすさを実現するためのアプローチが求められるだろう。 ここで注目されるのがエクスペリエンスデザイン（XD）だ。エクスペリエン
LukeW | AJAX Interface Design
AJAX Interface Design by Luke Wroblewski May 14, 2005 When any new technology undergoes fast and widespread adoption, there’s always an opportunity for unintended misuse. So it’s no surprise that the World Wide Web has seen its fair share of mishandled technologies: Download-heavy Java applets for simple page navigation Flash movies for superfluous intro animations Frames that disable simple book-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Tabbed Breadcrumb Navigation
COULD：Webデザインに関する 15 の調査結果
http://www.jackslocum.com/yui/2006/09/10/adding-built-in-editing-support-to-the-yahoo-ui-extensions-grid/
C O U L D：今昔Webナビゲーション
Dr. Web Weblog ? Blog-Archiv ? Collection of Web 2.0 Navigation Menus