パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
使いやすさ研究所では、「使いやすさ」の様々な情報発信を行っています。使いやすさ研究所は、カタログに氾濫する「使いやすさ」「わかりやすさ」を単なるキャッチ・コピーで終わらせない為の様々なテスト・サービス、開発支援、コンサルティングを行っている株式会社 U'eyes Designが提供する情報発信サイトです。 U'eyesDesignでは、iPhone評価レポートを販売しております。 7/11（金）のiPhone日本上陸に伴い、多くのメディアでの評価が予想されます。それに対し本レポートは、独自進化と揶揄される国産ケータイ文化とその使い勝手に慣れ親しんだ『実際のユーザ』が、どのように感じるのか、発売直後の評価（ショートターム）と1週間ほどの日常使用後の評価（ロングターム評価）の2タームに分けて実施するユーザビリティ評価を通じ明らかにします。 詳しくはこちらをご覧ください。
ユーザに2つの選択方法を提示することが、かえってユーザを適切でない行動に導いてしまうこともあります。今回は検索条件の入力画面を用いて、その一例をご紹介します。 図1のような画面構成で、 チェックボックスを選んでから選択ボタンをクリックすると、チェックボックスがOnとなっている駅名で検索を実行（=複数選択が可能）青字下線をクリックすると、その駅名のみで検索を実行という機能になっていたとします。 この際に行ったユーザビリティ調査では、渋谷か新宿か池袋であればどこでも構わない、といったような複数の選択肢を持つニーズが多く見られたにも関わらず、青字下線のリンクを最初にクリックするケースが度々観察されました。� この画面構成の場合、チェックボックスよりも青字下線リンクの方がアフォーダンスが高いため、多くのユーザは頭に思い浮かんだ駅名をページ内で見つけると、次のアクションとして青字下線リンクをクリック
yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？
「ニンテンドーDSが売れる理由」は、ニンテンドーDSやマリオ・ドラクエなどを元に、UI(ユーザーインターフェイス)設計を学べる一冊です。 ドラゴンクエスト1の最初の画面は、なぜ右寄りなのか？ マリオブラザーズの最初の画面は、なぜマリオが左にいるのか？ これらの疑問に本書では、UI設計をベースに紐解いていきます。 そのUI設計の理論はゲームの世界ばかりでなく、ウェブサイト・ウェブサービスにも通じるものがたくさん掲載してあります。 「シンプル＝使いやすさ」ではない 「自然と使い込めるようになる」理由 ユーザーは画面の文字は読みたくない 直感的なUIの設計方法 推奨される10のUIデザイン なるほど、と頷くものばかりでした。
下のビデオは一歳度児がiPhoneのフォト・アルバムの機能を使っている姿を撮影したものだが、これを見ると「直感的なUI」とは、まさに人間が赤ん坊のうちにマスターする"hand eye cordination（目からフィードバックを受けながら手先を動かして物をコントロールする能力）"に合致したものなのだということが良く分かる。 【追記】参考までに、私が特に好きなUI関連の書物二冊へのリンクを張っておく。特に「誰のためのデザイン」はUIが単なるソフトウェアやウェブ・サイトのUIデザインの問題ではないことに目を開かせてくれる良書だ。 ・誰のためのデザイン?—認知科学者のデザイン原論 ・Envision Information
ビジュアルデザインと機能性 ビジュアルデザインと機能性。ウェブサイトやアプリケーションのデザインでは、この２つは密接な関わりを持っています。 多くの人は、ビジュアルデザインと聞いて、ものを美しく（もしくは格好良く、楽しく）見せるためのデザインを連想するかもしれません。まさにそれはデザイナーの仕事です。世の中をより美しく、格好よく、楽しくすることは、人が関わるものを生み出すデザイナーにとっての使命です。それをないがしろにすれば、何のためのデザインか、何のためのデザイナーか、と問われることになるでしょう。 ただし、道具の世界では、デザインが機能性に直結しています。人は道具を使うとき、はっきりした目標を持って扱います（はさみを使って紙を切る、蛇口をひねって水を出す等）。そういった目標をどれだけ達成できたか、ストレスなく達成できたかという観点＝機能性は、道具の価値に関わってきます。ウェブサイト
Dynamic Ajax Tabs in 20 Lines | 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
SEO関連の話題を扱っているseomoz.orgにて興味深い記事がありました。「17 New Rules for Successful E-Commerce Websites」です。 ショッピングサイトを作るときにはどういった点に気をつければいいか、かなり参考になるのではないでしょうか。 以下に詳しくご紹介（あまり好きではないですが、説明の都合上、元記事からそのまま画像を拝借しています）。 ユーザーがどこにいるのか教えてあげよう ユーザーがトップページ以外にいる場合、どのセクションにいるのかわかるようにしましょう。パンくず型のナビゲーションも有効です。 選択条件を解除できるようにしよう ユーザーは一般的に選択条件を追加しながらサイトを見ていきます。そうした選択条件はすぐにはずして元に戻れるようにしておきましょう。 一般的な並び替え方法はきちんと用意しよう ユーザーが選択しやすいように「価格
行き止まりの発見がウェブ見える化の第一歩ウェブサイトにはたくさんの行き止まりページがある。もともとハイパーテキストは、目次となるページがあってそこから進んでは戻り、進んではまた戻る、という構造で考えられてきたものである。 図1のように、目次から進んだページというのは行き止まりになるのが自然な構造だった。“目次”だからトップページはindexと呼ばれるのだ。多くの人がトップページをまず訪問し、そこからサイト内をたどっていた時代には、それでもよかった。行き止まりページでも「戻る」というリンクが作ってあれば、さかのぼって戻ることが予想できるので、「これをクリックすると、どこに戻るのか」を誰もが理解できていた。クリックすればどこへ進むか（戻るか）わかるなら、人は安心してリンクをクリックする。 しかし、今はトップページからやってくる人が非常に少なくなっている。平均すると総訪問者数の25％程度しかトッ
1) Type or paste some text into the text field. No need to press the enter key! 2) The spell checker automatically checks the text when you're finished! watch/read · spellcheck multiple paragraphs · form demo · download · Questions or comments? Drop a line at nikola at spellify dot com . © 2014 Nikola Kocic
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CLOCKWORKs｜クロックワークス [sasajima mayu, morita toru, nakahara hironori]
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
サイトを訪れたユーザーの情報閲覧には、いくつかの基本的な行動パターンが存在する。サイトの性質にも左右される部分はあるが、以下に挙げるポイントを踏まえて画面を作成することで、スムーズにサイトを見てもらえるようになる機会がぐっと増えるはずだ。 ［1］ナビゲーションでユーザーを誘導できると思ったら大間違い「グローバルナビゲーションが設置されているのだから、当然ユーザーはそこからリンクを辿ってくれるはずだ」と思っている方はいないだろうか。 数多くのユーザビリティテストを実施していて毎回痛感するのが、「ユーザーはナビゲーションをなかなか見ない」という点である。これはなぜか。 ユーザーは、あくまでサイトの「コンテンツ」を見に来ている。そのため、ナビゲーションは常に後回しにされてしまうのである。後回しにされて、それでも必ず見てくれるのであればまだよい。しかし現実には、ユーザーはコンテンツ部分をざっと見て
公開日 : 2006年11月20日 (2018年1月20日 更新) カテゴリー : ユーザビリティ とあるプロジェクトで、アイトラッキング（eye tracking）を使ったユーザビリティテストに立ち会う機会に恵まれました。アイトラッキングとは、（ユーザーの）目線の動きを追跡する調査手法で、こんなちょっと変わった形のモニターディスプレイ（リンク先は、Tobii社のEye Tracker一覧）を使います。一台数百万円もする代物ですが、一昔前のそれと違って、ユーザーは特殊な装置を身につける必要がないので、自然な使用感で、ユーザビリティテストに活用することができます。 アイトラッキングの結果、どんな様子が見れるのかについては、こちら（Tobii社サイトの「Usability and advertising testing」のページ）の挿絵をご覧いただくのが良いでしょう。「ユーザーがどの部分をよく
私はWebニュースの巡回を日課にしていますが、ふとしたことで興味深いブログの記事を見つけました。 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ そこからリンクをたどって役に立ちそうなページをいくつか見つけました。 シニアはログインでつまづく？！ シニア向けウェブサイト構築のための10のポイント シニア向けウェブサイトの色 私自身は基本的に業務システムや中年より若い方を対象にしたサイトばかりに携わってきたので、目から鱗の思いでした。 今後は高齢化社会になっていと言われていますし「シニア向けデザイン論」みたいなものも活発になるのかもしれません。 現状では、デザイナさんから挙がってくるデザインを見ると、表示幅やフォントサイズが固定されているものが多いように思います。 表示幅やフォントを固定したほうがレイアウトが固定できデザインしやすいのでしょうが、これではブラウザの機能で文字を大き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
