余計なクリックをさせてイライラさせてない？ ユーザビリティ設計4つの原則（前編） | Moz - SEOとインバウンドマーケティングの実践情報
不要なクリックをしなくちゃならないせいで、「すばらしい」が「うっとうしい」に変わっちゃうことが本当にあって、しかもそういうのって結構出くわすのよね。だいたい原因はこんなところかしら？ サイト・デザイナーによる、凝っているけど使い物にならない作品無神経な開発者が加えたお粗末な問題回避策「2か月もこのサイトの構築に取り組んできて、もう脳みそがクタクタです」的なSEO業者の見当違いな判断いずれにせよ、害などなさそうに見える余分なクリックのせいで、コンバージョン率に悪影響が及ぶこともあるわ。要するに、ユーザーをイラつかせちゃうってことね。 これから紹介するのは、私が歯ぎしりしてゲンコツを振り回したくなったクリックの例よ。 イライラ事例その1 「え?! 自動でリダイレクトしてくれないの？」先日、ワシントン大学大学院課程のページを見ていたときのこと（ちなみに、私を含めてSEOmozチームの4人に1人が
【海外事例に学ぶ】インタラクティブなUIでコンテンツを見せる際の注意点 (ユーザビリティ実践メモ)
Jones氏は、Ajaxを使ったタブ切り替えなどインタラクティブにコンテンツを提示するUIを用いた際の、ユーザビリティやビジネス効果(ユーザの説得)といった観点での注意点を紹介しています。以下では、その中から2つの事例をご紹介いたします。 ユーザビリティへの配慮 コンテンツを参照しにくくしていないか？ Ajaxにより、ページ遷移をしないコンテンツの見せ方が普及しつつあります。よく見られるケースとしてタブ形式のインタフェースがあります(図1)。このタイプのUIでは、素早いコンテンツの切り替えができる反面、切り替えたコンテンツはページとして存在しないため、後からユーザが参照しづらいデメリットが生じることをJones氏は指摘しています。例えば、ユーザがあるタブのコンテンツを友達と共有したいと思っても、そのコンテンツはページとして存在しないため、リンクを送っただけでは友達は別のコンテンツを見てしま
リンクはひと目でリンクだとわかるようにすべし――SEOのためのユーザビリティ講座 | Moz - SEOとインバウンドマーケティングの実践情報
3月以降、YOUmozにはユーザビリティのカテゴリに属する記事が1本も投稿されていなかったので、短いながらもユーザビリティに関する記事を、自分で書いてみようかなと思ったんだ。 SEOを手がけているみなさんなら、リンクが検索エンジンにどう見えなくちゃならないかってことは知ってるよね。でも、そのリンクが、人間にはどのように見えなくちゃならないかってことまで知っているだろうか？ 僕が言う「人間」とは、君のページを訪問して、製品やサービスにお金を使ってくれる人たち、ってことだよ。 1. オンライン世界のリンクリンクの形っていうのは、何年もの間に変化し続けてきた。初期の頃、リンクはすべて下線付きの青字で表示されて、はっきり言っちゃうと、すごくカッコ悪かったんだ。近頃のリンクは、全体的に見栄えがよくなった。色もそれぞれ違うし、ホバー効果も付けられるしね。リンク先ページのプレビューが表示されるものまであ
アニメーションするクールなアコーディオンUI実装用JSライブラリ:phpspot開発日誌
Animated JavaScript Accordion V2 - Web Development Blog This lightweight (1.3 KB) animated JavaScript accordion is an update to the original accordion script posted on April 18th.アニメーションするクールなアコーディオン実装用JSライブラリ。 次のようなアコーディオンUIを実装できます。 デモはこちら アニメーションがなめらかでカッコいいです。 関連エントリ Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」
進化するユーザビリティテスト〜「ユーザー行動観察調査」の効果・効能
◆本コラムのサマリ ・ユーザーインタフェースの課題を抽出するだけのユーザビリティテストでは、サイトの本質的な改善はできない ・ユーザー行動観察調査をプロジェクト初期段階から実施し、ターゲットユーザーとその行動原理（インサイト）を正しく把握することがプロジェクトのROIを最大化させる ユーザビリティテストは誤解されている！？ 「ユーザー中心」「ユーザーエクスペリエンス」といった概念の浸透に伴い、近年のウェブサイトリニューアルプロジェクトでは「ユーザビリティテスト」を実施することが当たり前になってきたようです。アイトラッキング（視線追跡）なども駆使した本格的なユーザビリティテストの事例が多く聞かれるようになったことは、数年前の状況から考えると非常に好ましい進歩です。 ただ、ユーザビリティテストを単なる「サイトの使いやすさ調査」と位置づけてユーザーインタフェースの課題（見つけやすさ・読み易さなど
MOONGIFT: » 要注目！モダンなUIを実現するJavaScriptライブラリ「LivePipe UI」:オープンソースを毎日紹介
JavaScriptを使って、クールなインタフェースを実現するライブラリは幾つか存在する。よく使われるものとしては、画像をクリックするとその場で拡大表示するもの、タブインタフェース、WYSIWYGなHTMLエディタ、レーティング、プログレスバー、コンテクスト（右クリック）メニューなどなど。 フローティングウィンドウ どれも個別のライブラリは存在する。だが、よく使われるものだけに、一つ一つ用意するのが面倒という人もいるはずだ。そこでこれを使おう。 今回紹介するオープンソース・ソフトウェアはLivePipe UI、Prototype.jsを使ったモダンなUIを実現するライブラリだ。 LivePipe UIが実現する機能はタブ、WSYIWYGエディタ、ツールチップ、フローティングウィンドウ表示、レーティング、プログレスバー、コンテクストメニューなどがメジャーなものとして挙げられている。レーティン
Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ:phpspot開発日誌
NETTUTS - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ 次のようなマークアップでシンプルに実装できる模様。 <div id="test-accordion" class="accordion"> <div class="accordion-toggle">トグル1</div> <div class="accordion-content">コンテンツ1</div> <div class="accordion-toggle">トグル2</div> <div class="accordion-content">コンテンツ2</div> <div class="accordion-tog
秋元@サイボウズラボ・プログラマー・ブログ: スクロールするタブをYUIベースで実現したライブラリ
yodelerというYahoo UI ライブラリベースのUIを開発しているReid Burkeさんが発表したのが、タブ切り替えとスクロールを組み合わせた新しいタブ切り替え表示部品。 切り替えるときにタブの中身の切り替わりがスクロールでなされる、ということなんだけど、見てもらうほうがはやい。 縦スクロール版 / 横スクロール版 切り替えに時間がかかるので日常使いのページには良くない気もするけど、そうでないときにちょっとユーザをびっくりさせることができるかもしれない。 ライブラリはBSDライセンスで、その他の作品とあわせてsvnで公開されている。 via Ajaxian この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッタ
デザインを見てて「？」が浮かぶこと。
最近思う、デザインに関する「なんで？」を書きたいと思うので、デザイナーな方とか、答えられそうな人は答えてくれると嬉しいんす。 この「なんで？」の想定しているサイトは、コーポレートサイトとか、学校のようなサイトとかの、ヘッダー、ナビ、メイン、サイドバー、フッターがある様な感じです。 フラッシュばりばりな感じのキャンペーンサイトとかは無しで考えてます。 ちゃんと伝えている事もあれば、明確な理由付けが出来ないために言えなかった事もあったりします。 トップページとトップ以外のページの関係性 ココで言いたいのは、全部「トップだけ違う」っていう部分だと思うです。 グローバルナビゲーションの位置が変わる 横ナビが縦ナビに変わるのは極端にしろ、トップではメイン画像（フラッシュ）が来て、その下にグローバルナビ。トップ以外のページは、上部にグローバルナビっていうパターン。 よく聞くのは、「トップだけ他のページ
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
Googleの「サイトリンク」を活用する (ユーザビリティ実践メモ)
Googleで企業名、団体名、サイト名などを入力して検索すると、最上位の検索結果に、トップページへのリンクだけではなく、サイト内のカテゴリ別のトップページなどが表示されます。 Googleのヘルプでは、 サイトリンクは、ユーザーの役に立つと Google が判断した検索結果についてのみ表示します。 サイトの構造が原因で Google のアルゴリズムが適切なサイトリンクを見つけることができない場合や、サイトリンクとユーザーのクエリとに関連性がないと思われる場合、サイトリンクは表示されません。 という説明がされています。 弊社のユーザビリティテスト（ユーザ行動観察調査）では、このサイトリンクが頻繁に利用されている様子が観察されています。 たとえば「住宅ローンを探す」という設定下では 銀行名で検索 その銀行のトップページ＋サイトリンクが最上位に表示される サイトリンクの中に「住宅ローン」という文
jQueryを使った、UI表現 | クリエイティブ・タブロイド withD（ウィズ・ディー）
こんにちわ。mBlogのQuattroです。今回でちょうど連載が始まって丸2年となりました。withDもリニューアルし、これからはより大きなサムネールで、Webに関するツールやTipsを紹介できるかと思います。そんなわけで今後ともひとつ。 さて今回は、jQueryを使ったユーザーインターフェースに関するJavascriptをいくつかご紹介したいと思います。いわゆるJavascript Libraryと呼ばれるものの中には、他にPrototype.jsやmootoolsあたりが有名どこですが、今回はjQueryに絞って紹介してみたいと思います。
UIについて考えさせられるサイト6選 | クリエイティブ・タブロイド withD（ウィズ・ディー）
先週、中国の上海に出張で行ってきました。上海は想像していたよりも都会で、活気あふれる街でした。上海におけるナビゲーションデザインというのは、日本のものとは若干違っていて、例えば地下鉄の表示などは日本の感覚でいたら、一駅乗り過ごしてしまうというトラブルもありました。 UIを構成するものに、情報、ルック＆フィール、フィードバック、機能の4点が挙げられると思います。フィードバックとは、ユーザーがそのUIに触れたときのUIのアクションを指します。HTMLとCSSのみで作るUIは、情報やルック＆フィールに関しては幅を持たせられるものの、フィードバックや機能は限定されます。FlashやAjaxといった技術を用いて作られたUIは、良くも悪くもフィードバックおよび機能の面でもコントロールできてしまうため、より深い考察が必要となります。
Googleが実践するユーザーエクスペリエンス10箇条
Googleの会社情報に「Google User Experience」がリリースされました。 Google User Experience Googleのユーザーエクスペリエンス10箇条の意訳を紹介します。 Focus on people – their lives, their work, their dreams. Googleユーザーエクスペリエンスチームは、世界の人々の生活、仕事、夢にフォーカスします。私たちのゴールは人々の生活を改善することです。 Every millisecond counts. スリムなコード、慎重にセレクトされた画像などGoogleのページは、素早くロードするように設計されています。そして、不必要なクリック、タイピング、ステップなどは削除して設計しています。 スピードはユーザーに恩恵を与えます。 Simplicity is powerful. シンプルとい
ユーザーエクスペリエンスとは？ | Accessible & Usable
公開日 : 2005年6月8日 (2021年2月2日 更新) カテゴリー : ユーザビリティ ウェブユーザビリティと非常に関わりの深い概念として、ユーザーエクスペリエンス (User Experience : UX) があります。「ユーザー体験」と訳されることが多いですが、ウェブサイトなどの利用を通じてユーザーがある体験 (経験) をしたとき、その体験 (経験) がユーザーにとって有意義だったかどうかが重要な価値であるという意味が込められています。 ISO 9241-210 で、「ユーザーエクスペリエンス」は以下の通り定義されています。 A person's perceptions and responses that result from the use or anticipated use of a product, system or service 製品、システム、サービスの利用
CSSだけでアコーディオン風ＵＩを実現するサンプル:phpspot開発日誌
The CSS-Only Accordion Effect - CSSnewbie CSSだけでアコーディオン風ＵＩを実現するサンプル。 通常、アコーディオンを実装する場合はJavaScriptが必要ですが、PureCSSで実現したものが公開されています。 :hover の際に高さを変えるというテクニックを使っているようで、沢山の情報をコンパクトにまとめられる魅せ方として使えそう。 当然アニメーションしませんが、サクっと軽く動作する感じもなかなかよいですね。 関連エントリ コンテンツをブロック内でスクロールさせられる「Easy Scroll」 カーソル位置によって自動スクロールする小窓実装ライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.dqwm.net/
IDEA * IDEA
動画：タッチ操作に最適化したFirefox Mobile UIコンセプト
Design Stencils - Yahoo! Design Pattern Library