Home > UI（インターフェース） > ユーザーインターフェースの検証データを公開している「ABtests.com」は、ウェブマスター必見事例の宝庫 Older ウェブの位置づけが上がるにつれ、数値的な検証がどんどん進んでいます。 ただ、その割りにどんな方法で数字が上がった、という具体的な事例がまだまだ世の中に出回っていないのも事実。 そんな中、A/Bテストの特化してインターフェースの検証事例を公開しているサイトがABtests.com」です。 インターフェースの比較検証結果が数値でわかる http://www.abtests.com/ ABtests.comの中身は、はまさに読んでそのまんまの内容。 トップページから事例が豊富に掲載されています。 例えば・・・ このフォーム、左と右でどちらが通過率が良いと思いますか？ 答えはこちらのページにて。 なかなかここまで数字で結果を出してくれ
TESTED IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC) Background I had some time a while back and read a few interesting articles on buttons: How to make sexy buttons with CSS Rediscovering the Button Element These got me thinking… these techniques are pretty nice, but I think they can meet somewhere in the middle and make something even better. After a little work I came up with the “Simply
These earth tone color palettes are perfect for a wide variety of nature-inspired designs. Use the provided hex codes to save time choosing colors.
Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http
ナビゲーションに使えそうなタブ付きリスト実装サンプル。 少ない枠内に多数のメニュー項目を入れ込むことができるＵＩのタブ付きリスト実装のチュートリアルになってます。 サイドバーなんかに組み込んでサイトの使い勝手を高められそうです。 インタフェースの挙動 次のようなインタフェースになってます。 別タブを押すと、アニメーションしながらリストが縦に伸縮して適当なサイズになります。 ソースコードもダウンロード可能です。 以下のエントリを参照してください。 Organic Tabs | CSS-Tricks
ユーザビリティ系の記事でも何かと人気なのがフォーム周りのお話。 たぶん最終成果に一番近いところにあるから、何だと思います。 でも、一番近いから一番影響が大きい・・・という（ほぼ全国共通の）認識は実はそうでもなかったり。 「フォーム前の設計」でフォームの完遂率なんていくらでも変化する、というお話を少ししたいと思います。 実際にプロジェクトで起こった話を、1つ 最近の安直なランディングページ（※この言葉は嫌いですが便宜上こう書いておきます）なんちゃらの流行（？）のせいで、こんな画面が増えています。 とりあえずサービスの売りがドカンドカン でっかいボタンが画面に何度も何度も現れる ページが長くて字がでっかい 代理店さんがこの1ページを色々ごにょごにょ変えたりしていました。 で、その画面を、しっかりと情報を掲載して来訪者がじっくり納得できるようなページ（群）にしたところ起こったのが下の図のような結
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
Author AvatarAuthorMatthew KammererPublishedOctober 28th, 2009Popularity In our recent redesign we’ve added more emphasis on our resources section. There are so many great UX related posts out there, we just have to share them with you. Besides, sometimes one awesome UX Booth post a week isn’t enough! Therefore, I wanted to share with you other UX blogs that you should be reading on a regular basi
This jQuery plugin, developed in the iHwy Labs, allows you to easily convert a long, hard to navigate list into a compact, easily skimmable ‘first-letter’ based menuing system, allowing quick and ‘out-of the-way’ access to hundreds of items. Users hover their mouse over a letter and a columnized list of all of the list items that start with that letter appear in a submenu. Mousing off of the lette
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト 可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミック
ず、随分間が空いてしまった・・・何て言う現実。 気付けば冬間近ですね。 久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。 ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。 サンプルサイトを見る サンプルをダウンロード 地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。 今回作っておきたかったのは、センタリングさせたページ送りっす。 とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。 ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。 不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg
「Above the fold（アバブ・ザ・フォールド）」というのは、スクロールしなくても見ることができる画面の領域のことを言います。 Above the foldについては、以前に記事解説したことがあります。 ”above”は「～より上」、”fold”は、「折り目」という意味で、”above the fold”は直訳すると「折り目より上」という意味になります。 新聞の折り目より上半分は、人の気を引くような見出しのニュースを掲載します。 購入意欲をそそるためです。 スポ○チの１面の見出しなんかは、そうですよね。 「イチロー、マリナーズから解雇通告」 えぇーっ！ と仰天して、開いて続きを読むと 「を受けた同僚とゴルフに挑戦」、 みたいな。（笑） バカはこのくらいにしておいて、「Above the foldはユーザーに訴えかけるために重要なコンテンツを置くべき」で、反対にスクロールしなければな
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル／サッカーの話題なども。 んー、9月・10月と体調を崩し気味。風邪がなかなか治りません(^^; そんな中ですが、jCREAMさんでまたも素晴らしい、「jQueryプラグインを使ったり作ったりした機能の紹介ページ」が翻訳されて掲載されていたのでご紹介～～♪ ●素晴らしいjQueryチュートリアル集 なお元記事はこちら ●Best jQuery Tutorials for June 2009 | AjaxLine 「Animated Menu Using jQuery」 「How to create tab with JavaScript」 「Animated Navigation with CSS & jQuery」 この辺はいろいろあるプラグインのバリエーションと
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル／サッカーの話題なども。 あー、企画と押すのって難しいなぁとか。 DTPデザイナーの「なんとなく」をウェブアクセシビリティより優先されてもなぁ、、、てかそれってどうよ？（うわ～言っちゃったよまあ正論だと思うけど。）とか、 ようやく風邪が治る気配を見せ始めて一安心なDCです。 という訳でユーザーインターフェースと、ユーザー体験を上手く表現する手法が紹介されていました。 ●UIデザインを共有するためのシンプルな記法とは？（37signalsの場合） - IDEA*IDEA ～ 百式管理人のライフハックブログ 元の海外記事はこちら。 ●A shorthand for designing UI flows - (37signals) ユーザーがその画面で見ること｜ユーザー
21 Comments Nice list. the timvandamme one is going to come in handy for the new version of iammikesmith.com I am working on. This couldn’t come at a better time, trying to learn jQuery ATM Nice Collection of jQuery-Navigations. If your interested in some other Navigation-Solutions by jQuery, don’t miss jQuery – The easy way to navigate! There are some really good ideas for nav menus in this colle
See related links to what you are looking for.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
