ウェブサイトをより単純にして、分かりやすくする -Design Simplicity
ユーザーがより簡単にインフォメーションにアクセスできるように、ウェブサイトをより単純にして分かりやすくする「Design Simplicity」を取り入れる方法をWeb Designer Wallから紹介します。 What to Expect in 2010: UX/UI Design Simplicity 下記は各ポイントを意訳したものです。 はじめに 今年も多くのデザイントレンドがあります。しかしながら、私はデザインの単純さ（Design Simplicity）にフォーカスをあわせることが重要であると感じます。 デザインの単純さとは、より少ないページ、より少ないクリック、より少ない取り散らかし、そして多くのホワイトスペースを意味します。そして、我々のユーザーはそれを求めています。 増加するインフォメーションへのアクセスは、ユーザーの集中力低下の原因となります。デザイナーは今まで以上にユ
ウェブデザインでこれは気をつけたいの35のポイント
ウェブサイトやブログの作成・運営で、避けておきたい35個のミスをnetjellyから紹介します。 List of Web Design Mistakes You Should Avoid 下記は、各リストを意訳したものです。 ※訳者注： 一部過激なものは表現を少し和らげています。 はじめに ウェブサイトやブログを開発・作成する際に、避けた方がよいミスをリストアップしました。 1. 作るだけでは終わりではない ウェブサイトは開発・作成だけでは終わりではなく、公開・運営する必要があります。そして、オンラインやオフラインでウェブサイトの告知に手間や時間をかけることはいっそう必要になります。もし、あなた自身があなたのサイトについて時間をかけないなら、他の誰もそれはしないでしょう。 2. 広告をコンテンツに混ぜない 広告をコンテンツに混ぜると、短期的にはクリック数を増やすかもしれません。しかし、ユー
Ywcafe.net
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Credit Card Application Health Insurance 10 Best Mutual Funds Accident Lawyers song lyrics Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy
2010年版 ユーザーインターフェース（UI）・ユーザビリティ必見サイト/必読書 - Feel Like A Fallinstar
ウェブサイト 実はユーザー中心設計やユーザビリティ、インターフェースについてちゃんとまとまったサイトは国内には少数です。 ここに挙げたサイトはどれも大変充実したものだと思います。 ※残念ながら、海外の記事を紹介しているブログでよいものは見つからず。 劣化コピペサイトを紹介するのも気が引けるので割愛しました。 ヤコブ・ニールセンのAlert Box ユーザビリティ・ユーザ調査の世界的権威であるヤコブ・ニールセン博士のナレッジを発表しているサイトです。 実際の調査結果、そこに対する考察も含め、とてもよくまとまっています。 アップル ヒューマンインタフェースガイドライン Max OS Xのためのインターフェース資料に始まり、アプリケーションをデザインしている間、心に留めておくべき基礎となるデザイン原則がまとまっています。 もちろん、Windows / Linusユーザーにとっても必見。 ユーザビ
ウェブサイトのフッタを魅力的にする10のシンプルなアイデア
昨年くらいからウェブデザインの傾向としてフッタを充実させたウェブサイトが増えてきました。 ユーザーの印象に残り、より利便性の高いフッタを設置する際にヒントとなるアイデアをDesign Shackから紹介します。 10 Techniques for a Fantastic Footer 以下は、そのポイントを意訳したものです。 はじめに 1. プライマリ ナビゲーション 2. 「トップに戻る」ボタン 3. 美しいコントラスト 4. インパクトのあるイラスト 5. 充実したコンテンツ 6. インフォメーション 7. メディア ハブ 8. 新鮮なコンテンツ 9. インフォグラフィックス 10. ビジュアル的なアクセント はじめに 魅力的なフッタは、サイトのユーザーに永続的でポジティブな印象を与えることができます。 フッタのデザインと機能性の両方にフォーカスをあてることで、サイトのフッタを魅力的に
beBit.Q Twitterでユーザビリティクイズに挑戦！
【変則○×】Q. ユーザビリティの原則の1つとして「ページ内リンクの使用は避けるべき」と言われている。ページ内リンクがあるとユーザがサイト内のどこにいるかを見失いやすいからである。この原則はどんなケースにおいても守るべき。○か×か。×の場合、例外となるケースも示せ。
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
フォームの完遂率は、フォーム前の設計で3倍以上変化する、というお話 - Feel Like A Fallinstar
ユーザビリティ系の記事でも何かと人気なのがフォーム周りのお話。 たぶん最終成果に一番近いところにあるから、何だと思います。 でも、一番近いから一番影響が大きい・・・という（ほぼ全国共通の）認識は実はそうでもなかったり。 「フォーム前の設計」でフォームの完遂率なんていくらでも変化する、というお話を少ししたいと思います。 実際にプロジェクトで起こった話を、1つ 最近の安直なランディングページ（※この言葉は嫌いですが便宜上こう書いておきます）なんちゃらの流行（？）のせいで、こんな画面が増えています。 とりあえずサービスの売りがドカンドカン でっかいボタンが画面に何度も何度も現れる ページが長くて字がでっかい 代理店さんがこの1ページを色々ごにょごにょ変えたりしていました。 で、その画面を、しっかりと情報を掲載して来訪者がじっくり納得できるようなページ（群）にしたところ起こったのが下の図のような結
「ユーザーはスクロールしない」はウソ、”Above the fold”より下を見せる3つのサイトデザインTIPS
「Above the fold（アバブ・ザ・フォールド）」というのは、スクロールしなくても見ることができる画面の領域のことを言います。 Above the foldについては、以前に記事解説したことがあります。 ”above”は「～より上」、”fold”は、「折り目」という意味で、”above the fold”は直訳すると「折り目より上」という意味になります。 新聞の折り目より上半分は、人の気を引くような見出しのニュースを掲載します。 購入意欲をそそるためです。 スポ○チの１面の見出しなんかは、そうですよね。 「イチロー、マリナーズから解雇通告」 えぇーっ！ と仰天して、開いて続きを読むと 「を受けた同僚とゴルフに挑戦」、 みたいな。（笑） バカはこのくらいにしておいて、「Above the foldはユーザーに訴えかけるために重要なコンテンツを置くべき」で、反対にスクロールしなければな
顧客を逃してしまう、Eコマースサイトの15のポイント
Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい（提供されていない）。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる（分かりにくい）。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立
成果につながるフォーム最適化 - シナリオの重要性 (ユーザビリティ実践メモ)
また、本サイトのコラムや実践メモでも、フォームの最適化については何度も述べてきました。 【ユーザビリティコラム】登録フォームのユーザビリティ 【ユーザビリティ実践メモ】フォームに関する記事一覧 フォームはユーザがアクションを行うために通過が必要な最後の砦であり、非常に重要な領域です。しかしながら、サイトはフォームが全てではありません。 あるサイトのフォームは、ユーザビリティは十分高いと思われるにもかかわらず、リスティング広告から入ってきたユーザのフォーム通過率は10%以下という状況でした。 そこで、ユーザがフォームに至るまでの過程を調べると、次のような課題が発見されました。 課題1. サイトに入ってくるユーザ全員に対して、同じ受け方を行っていた あらゆるリスティングのキーワードに対して、同じページを受けページとして設定していたのですが、実際にはキーワードによって、ユーザの状況は下記のように
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
ウェブインターフェースデザインに関するスライド – 秋元
これはいい。ウェブのボタンやフォームの配置等についてのティップスがつまったプレゼン。元Yahoo.comのAjaxエヴァンジェリスト、現NetflixのUIエンジニアBill Scottさんの作によるものです。 UIの話で図がいっぱい入ってるから英語読まなくてもなんとなくわかるし。 Yahoo.comの映画レビューで使われているUIは僕も好きだなあ。グレード評価なので日本にそのまま使えるわけではないけど、レビューサイトとか作るとしたらぜひああいうの入れたいと思います。 Javascriptでその場でいろいろする場合にも、マウスの移動距離を考えよ、ってのを見てはっとしました。あんまり考えて無かったかもしれません。 327ページのスライドというのがすごいですね。新刊(↓)の宣伝とはいえ、ここまで出してしまうとは。 [am]0596516258[/am] 今回のプレゼンとは違いますけど、一昨年に
ユーザがつい読んでしまう表現方法とは？ (ユーザビリティ実践メモ)
これまで実践メモでは、ウェブライティングの基礎など、ユーザにとって読みやすい文章表現についていくつか考察してきました。 ウェブライティングの記事一覧 今回は、訴求ポイントをFAQ形式で表現することで、ユーザに内容まで読まれやすくする方法をご紹介します。 このサービスでは、ただ子どもを預かるだけでなく、子どもの発達を考えたサービスを行っています。しかし、こうしたこだわりの説明文をコンパクトにすることは難しく、見出しでも曖昧な表現になってしまいがちです。 このページの場合、改善前はユーザは見出し以下の文章まで読まず、独自のサービスを訴求できませんでした。 そこで、特長の説明をQA形式にしたところ、ユーザは文章部分まで読むようになり、他社と違うサービス内容を理解するようになりました。 こういった、QA形式の文章がよく読まれるという行動は、弊社のユーザ行動観察調査の中で多く確認されています。 この
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/08/user-interface.html
ビービット
