に手を出してみたんだけど、携帯から更新できない(らしい)ので、今大学にいることが書けない…
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
いらないときは隠すインターフェース January 11, 2007 8:00 AM written by watanabe シンプルさを追求するには、削れるものをそぎ落としていく作業と同時に、きちんと意味が伝わるような工夫が必要なのかなと思います。 そういう意味で、シンプルなスペルチェッカーspellifyは参考にできそうです。 ↑ 画面には、フォームしかありませんが・・・ ↑ フォームをクリックすると使い方の説明がすーっとあらわれ、フォームの外をクリックするとすーっと消えます。 あまり使い慣れていない画面ではどうかと思いますが、検索窓のようにある程度何をするかわかっているところで、こうした「隠れ説明」が必要なときだけ出てくるというのも悪くないですね(少なくともちょっとした驚きがありました)。 場所にもよるかと思いますが、「必要なときには表示して、いらないときには隠しておく」というインタ
Buyer Protection Program When you buy a domain name at Dan.com, you’re automatically covered by our unique Buyer Protection Program. Read more about how we keep you safe on our Trust and Security page. Next to our secure domain ownership transfer process, we strictly monitor all transactions. If anything looks weird, we take immediate action. And if the seller doesn't deliver on their part of the
第3回 「資料請求」「問い合わせ」「会員登録」を増やすコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) サイト目的を踏まえた設計の重要性ウェブサイトは、「販売」「プロモーション」「ブランディング」など、さまざまな目的のために作られている。 そういった目的を達成するにあたって、サイトがユーザーに行き着いてもらいたい代表的なアクション(=ビジネスゴール)には、以下のようなものが挙げられる。 製品の購入メルマガ登録 会員登録 資料請求お問い合わせこのゴール設
ステルス・ウェブ・デザイン ステルス・デザインの方法という本がある。(Webテキスト) この本では、「レーダーで見つけにくいかたちは良いかたちである」という、 デザインに関する新しい理論を提唱し、その名前を「ステルス・デザイン」と命名している。 ステルス・デザインの理論には、まだ完全に煮詰まっていないところが残るのだが、 極めて大きく発展する可能性を秘めている。 このような面白いアイデアを出すパスファインダー・チームの皆さんには敬服する。 私はまず、ステルス・デザインの考え方を発展させる第一段階として、 「ステルス・ウェブ・デザイン」という方法論を考え、いくつかの提案をする。 その提案資料を作成したので、このエントリにupしておく。 この資料は、Mac用のKeynoteで作成した。PDFで出力すると、 画質が不足して微妙なニュアンスが伝わらないので、時間のある方には、 ぜひTIFF版を見て
プログレッシブディスクロージャー(段階的開示)は、高度な機能や使用頻度の低い機能を2段階目の設定画面に譲り、学習容易性の向上とエラーの軽減を図るものである。 Progressive Disclosure by Jakob Nielsen on December 4, 2006 インタラクションデザイナーは次のようなジレンマを抱えている。 ユーザはパワーや機能を求める。自分のニーズをすべて満たしてくれるだけの選択肢が用意されていることを期待する。(そして、ニーズの組み合わせは人それぞれ だ。ワープロに行番号を表示する機能を欲しいと思うユーザは実際には大勢いるし、大手法律事務所のユーザのように特殊なニーズをたくさん抱えているユーザも、もちろんこれを望んでいる。) ユーザは単純さを求める。大量の機能を十分に学習して、自分のニーズにもっとも適したものをその中から選んで使えるようになるまで時間をかけ
この連載では,エンジニアの視点から使いやすさを考えています。今回はユーザー登録画面などに代表される,フォームを使った入力画面について考えてみたいと思います。 なぜこのテーマを選んだかというと,フォームを介して利用者からデータを受け取って処理をして返すという一連の処理が,ウェブサイトのバックエンドの処理やデータ形式などによって変化しやすく,プログラマやエンジニアの作業がもっとも使いやすさと関係しやすい分野ではないかなあ,と思っているからです。こうした部分はエンジニアが使いやすさに寄与しやすい部分であり,もっと言えば,使いやすさを向上させるに当たって,エンジニアにしかできない事柄がたくさんある部分だってことになると思います。 今回は「ユーザー登録ページ」を例に,フォームにおける使い勝手を考えていきたいと思っています。その理由としてまずは,筆者が勤務する株式会社はてなにもユーザー登録画面があり,
ユーザにクリックしてもらいたいリンクがなかなかクリックされない。そんな悩みを抱えているWebマスターの方も多いのではないでしょうか。 今回は、視線の流れに配慮したコンテンツ配置の一例をご紹介します。 上は、ある企業サイトのサービスを紹介するページです。次のような構成です。 上部は、サービスの概要 その下に、サービスに関する注意書きの説明(認可を取っているか、など) さらに下に、詳細ページへの振分けのリンク このページでは、ユーザにさらに関心を持ってもらえるよう、詳細ページへと誘導したかったのですが、ユーザはそもそも下までスクロールしてくれませんでした。 注意書きの説明を枠付きで横幅いっぱいに配置したために、多くのユーザは、もうここから下は関係無いだろう、と思ったのです。 何気なく置いたコンテンツが、ユーザの視線の流れをブロックし、目的の情報までたどり着くことを阻害してしまっていたので
澳门威尼斯人线上娱乐互动程度位居中文论坛前列澳门威尼斯人线上娱乐是华人网络世界里最为著名的社会、人文论坛板块之一
代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧
これは新しい。 なんとあらゆるページをマトリックス風に表示してくれるのだ。(実際の動作はこちら) 実装するには以下の1行をコードに加えるだけ。 <script src="http://bodytag.org/bt_melter/bt_melter.js" type="text/javascript"></script> するとbodyタグの中身全部に適用される。 なお、javascript自体はbodytag.orgからダウンロードできる。 日本語にも対応しているようなので、サイトにアクセントを加えるちょっとした小細工として使えそうですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く