ユーザーの視線を誘導する３つのユーザビリティ改善方法
webサイトにおけるユーザーの視線は、なかなか見る事が出来ない代物ではあります。 実際に企業や、あなたが作成したwebサービスが、ユーザーに訴えたい事を、ユーザーにきちんと届ける為に、どのような方法があるのかを考えて見ましょう。 １）全ての情報を遮断する 手っ取り早い方法としては、あらゆる情報を遮断する方法があります。 つまりその言いたい事意外の情報をあえて隠蔽するわけです。 実にシンプルな方法です。 ただし、シンプルであるがゆえに非常に難易度が高いです。 なぜなら、配置するテキスト選びは慎重にしなければなりませんし、訴えたい事が多い場合、何をまず訴えるべきかをしっかりと考えて、ユーザーが迷う事なく、そして的確な操作が出来るように誘導して上げる必要があるからです。 １）サービスに対して興味を少しだけ持ってもらう情報を書く ２）サービス開始はちょっと・・・という人のためにクリックしやすいリン
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
jQuery spherical panorama viewer - OpenStudio - expert in Webdesign and Development
Based on the last work of Helmut Dersch about Moving Panoramas, this viewer doesn’t require any browser plugin such as quicktime or java. Example : middle quality panorama Example : high quality panorama Views generation First, you need to generate views from your spherical panoramic image. Download and install MPRemap from Helmut Dersch website Adapt script_panorama2grid script according to quali
縦長いページデザインは是か否か？ 楽天におけるスクロール量計測導入の裏側
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
動画で情報を提供する際の注意点 (ユーザビリティ実践メモ)
サイト内で動画を使って情報を提供する手法には、 ・ 情報をより具体的に伝えることができる ・ 表現が豊かになり、より強いインパクトを与えることができる といったメリットがあり、主にニュースやエンターテイメント性の高いコンテンツの提供に適しています。 本日はこの「動画での情報提供」を行う際に配慮すべき点について整理しました。 １．テキスト情報をあわせて用意する読み込みに時間がかかる動画コンテンツは、再生が開始されるまでにどうしてもユーザを待たせてしまいます。ネットブックやスマートフォンがますます普及すれば、このケースはより多くなるでしょう。 テキストや画像によるキャプションや補足説明など、動画以外の情報もあわせて用意することで、動画再生までの待ち時間にユーザの興味がそがれないよう配慮することが重要です。 ２．最初の数秒で、ユーザの心を捉える必要のない動画を長時間見せられることはユーザにとって
複数カラムレイアウトをどう活かすか (ユーザビリティ実践メモ)
本実践メモでも以前に取り上げたように、ここ数年、横幅900px以上を採用するサイトが増えてきています。 画面横幅を900px以上にするメリットとデメリット。右端が欠けることに注意 横幅の拡大によって、情報を掲載できるスペースは拡大し、実現できる表現の幅も広がります。 もちろんそれらは喜ばしいことですが、自由度が増すからこそ、効果的なスペースの使い方をきちんと考えることがますます重要になります。今回はカラムを複数に切ったレイアウトについて、スペースをどのように活かすべきかを考えてみたいと思います。 複数カラムの使用は、メッセージを分散させる カラムを複数に切って情報を提供することは、1つのページに複数の役割を与えることを意味します。 もちろん、ナビゲーションなどページにとって必要な機能もありますが、より多くのエリアを 定義することはそのページが持つメッセージをぶらしてしまう危険性があることを
ECサイトで売上を上げる! （前編） 回遊率を高める!閲覧開始ページ対策とSEO術 | 実践編
「平均ページビュー数」の持つ意味は重い一般のサイトでも、「1人当たりの平均ページビュー数」は重要な指標だ。どんなにたくさんの訪問者が訪れても、1ページしか見ないで帰ってしまう人が多ければ、資料請求などのコンバージョンが発生しないのはもちろん、見せたい商品情報や企業情報などがまるで見られていないということになる。今のWebサイトでは、平均6ページぐらい見られているサイトが多いのだが、資料請求や商品購入を行った人に限って平均をとると、15～20ページも見ているのだ。 サイトの訪問者は、ページにあるリンクやボタンをクリックして、次へ進んでいく。今いるページから、より望ましいリンクやボタンをクリックして進んでいるはずだから、クリックして表示されるページは、「自分で選んだ、より良い情報」だということになる。次々に進めば、ますます良いページを見ていることになる。だから、企業サイトにおいて、平均ページビ
Mockingbird has Shut Down
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
【海外事例に学ぶ】「会員登録はこちら」を用いない会員化シナリオ (ユーザビリティ実践メモ)
今回は、A List Apart.掲載のLuke Wroblewski氏による記事、"Sign Up Forms Must Die"をご紹介します。 ユーザにウェブサービスを提供する上で、まずは「会員登録」を求めることはよくあることだと思いますが、今回は、「まずは会員登録」から始めずユーザの会員化を実現する方法についての記事です。 旧来の「まずは会員登録」の事例： 動画共有サイトの一つ、 Google Video( http://video.google.com/)を例にとります。ユーザはGoogle Videoに訪問し、色々な動画を見ていく中で、自分もウェブ上に動画を公開してみたいと思います。そこで、「ビデオをアップロードする(Upload Video)」を押すと、その機能を利用するためのアカウント作成を初めに求められ、以下の会員登録ページにたどり着いてフォームへの情報入力を求められます
Passion For The Future: 「信頼性と説得力のあるWebサイト」の科学
「信頼性と説得力のあるWebサイト」の科学 スポンサード リンク ■Webの信頼性を説明するPI理論 今日もWebの話題。米国スタンフォード大学の説得技術研究所（Stanford Persuasive Technology Lab）という、奇妙な名前のグループが、信頼性のあるWebサイトとは何か、説得力のあるコンテンツとは何か、を研究している。延べ6500人以上の被験者を動員した数年間の研究成果として、PIという理論を彼らは構築した。 ・Prominence-Interpretation Theory: Explaining How People Assess Credibility Online 突出と解釈理論： ユーザはどうやってオンラインで信頼性を評価するのか http://credibility.stanford.edu/pdf/PITheory.pdf この研究では、ユーザはWe
ブログ用のスタイルガイドを策定する方法 at ブログヘラルド
3月 13日 at 2:30 pm by ジョナサン ベイリー - 一貫性なくして、ブログで成功することはできない。新しいことに挑戦することも勿論大切だが、ブログの意見、スタイル、そして、質が変わってしまうと、すぐに読者を失い、そして、評判も急降下してしまう可能性がある。 しかし、一貫性を長期的に維持することは非常に難しい。とりわけ、数人のブロガーを抱えているブログにとっては尚更困難である。人間として、変化することを避けることは難しく、文章のスタイルもその変化を反映するからだ。ブロガーが一人で運営しているブログでさえ、過去の記事と現在の記事を比べると、見た目においても、内容においても、一貫性が欠けているという事態に陥ることがあるのだ。 この開きを最小限に留め、ブロガー間、そして、過去と現在の間の一貫性を確実にするため、印刷媒体の世界が利用するツール、つまり、スタイルガイドを利用するブログが
ECサイトの画面設計--男と女、買い物の行動パターンはどう違う？:マーケティング - CNET Japan
便利さ、手軽さから、オンラインショッピングは今や私たちの生活の中に深く浸透しています。そして「売れるオンラインショップ」を目指して、各Eコマース（EC）サイトが凌ぎを削っています。ECサイトの構築にあたって、まずはそのショップのターゲットを設定し、それぞれの攻略方法を考えることが大切です。攻略方法を考えるには、ターゲットユーザーのサイト内行動を知る必要があります。 ここで1つの疑問が浮かびます。はたして、男性と女性で、ECサイト内の行動に違いはあるものなのでしょうか。 「楽天市場でギフトを買ってください」 今回のアイトラッキング分析では、「ECサイトにおいて男女の行動に違いはあるのか」を検証すべく、以下のテストを行いました。対象サイトは、日本最大のECサイト、楽天市場としました。 対象サイト：楽天市場 被験者：オンラインショッピング経験のある20代〜30代男女、各3名 タスク：バレンタイン
ヤフー VS グーグル--見られるリスティング広告はどっち？
前回の記事にて、ユーザーが「見る広告」「見ない広告」について検証しました。その中で、「Yahoo! JAPANの旧デザインではリスティング広告が見られていないが、新デザインではどうだろうか」という疑問を投げました。今回はそのリスティング広告について、再度検証しました。 画像1：Google（左）とYahoo! JAPAN（右）の検索結果画面。赤枠で囲ったリスティング広告欄のデザインが異なる。（※画像をクリックすると拡大します） 上の画像1は、GoogleとYahoo! JAPAN、それぞれのリスティング広告欄です。Googleでは、リスティング広告欄に黄色の背景色がひいてあるデザインとなっています。一方のYahoo! JAPANは、今まではGoogleと同じデザインでしたが、前回のテスト（実施日は2008年11月26日）以降、リスティング広告欄の背景色がなくなり、オーガニック検索結果（通常
ブロガーがやって損はない7つのカテゴリ分けTips
少し前の話なのですが、Blog開始時から行き当たりばったりにおこなっていたエントリのカテゴライズを根本的に見直しました。最初のエントリからすべてチェックし、カテゴリ自体の量も一気に増えています。 以前から乱雑としたカテゴリ分けが気になっていて、整理に役に立ちそうなHow To記事を検索したのですが、ほとんど見つかりませんでした。Blogでカテゴリ分けを気にしている人というのは、実はかなり少ないのでしょうか？ 適切なカテゴリ分けは、そのBlogの見やすさ・読みやすさを大きく向上させるようです。というのも、以前の乱雑としたカテゴリ分けの頃と比べ、カテゴリページ自体へのアクセス率が大きく増えているからです。(アクセス解析調べ。)もちろん、カテゴリページに飛んで終わりではなく、別のエントリも読んでもらえているようです。 これはどういうことかというと、それまでのカテゴリ分けは訪問者の役には立っておら
ユーザーエクスペリエンスデザインの成果物リスト | Web担当者Forum
ユーザーエクスペリエンス（UX）デザインの世界に身を置くわれわれにとっては、いまや心浮き立つような時代となった。UXの価値はますます広く認められるようになり、次々に生まれる新たなテクノロジーやメディアを超えたトレンドは、UXデザインの実践面で飛躍的な進化を生み出す土壌を整えつつある。 私自身、新たなチャレンジの数々に見舞われてあやうく安全圏から押し流されそうになりながらも、インフォメーションアーキテクトとしてはそれらを大いに楽しんでいる。これまでに、ソーシャルソフトウェアやリッチユーザーインターフェースをデザインしたり、モバイル検索の未来についてのシナリオを描いてみたり、いろいろなチャネルやアプリケーションにまたがるようなUXを設計してきた。するとそのうち、VIPルームの“エラい人たち”に自分のアイデアをご理解いただこうと苦心する場面が次第に増えつつあることに気づいた。 そんなわけで、私は
hotweb Business Edition
hotwebは、PowerPointのようなドラッグ＆ドロップの直感的な操作で、簡単にWebページを作成する事ができるコーディング不要のWebページ作成ツールです。「hotweb」は最新の技術を用い、ブラウザからオンラインでWEBサイトを制作・運営できる SWS（Simple Website Service）です。 既存のCMS（Content Management System）とはまったく違い、今までのブログやCMSではできなかったデザイン性に富んだWEBページの更新が誰でも簡単にできます。 hotweb Business Editionの紹介 HTMLのスキル不要！ドラッグ＆ドロップの簡単操作で、難しいレイアウトも思いのまま。 これまでのCMSのように、新規にWEBサイトを作り変えることなく部分的に導入することができます。 初期導入コストが抑えられ、ブラウザがあれば、いつでもどこでも
株式会社イー・エージェンシー
サイバーエージェント様 GA4導入事例 移行は既存の分析要件を見直すチャンス。GA利用者の理解を促進し、データ活用をドライブさせる方法とは
ブルースタジオ：blue studio × リノベーション
会社概要 採用情報 サイトポリシー サイトマップ Tel 03-3541-5878 お問い合わせ Copyright © 2015 blue studio co., ltd. All rights reserved.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
効果的なデザインを提供する方法 | DesignWalker
http://japan.internet.com/allnet/20081028/14.html