タグ

UIとUsabilityに関するkeijixのブックマーク (16)

  • 購買意欲をコントロールするサービス・商品の価格一覧表を作成する7つのテクニック

    ウェブサービスの価格一覧表をサンプルにし、ユーザーの購買意欲をコントロールする価格一覧表を作成するテクニックを紹介します。 価格の一覧表を見るユーザーの一番の目的は、価格を知ることです。しかしながら、価格を強調しすぎて、お金を使うということを意識させすぎないでください。苦労して手に入れたお金を使っているように感じると、ユーザーはより使わないように思ってしまいます。 価格のデザインはソフトにし、それ自体の特徴やベネフィットにフォーカスをあてるようにします。 ユーザーがどの商品を選択するか決めている時に、あなたはその決め手として価格にフォーカスを合わせることを望んでいますか? それとも特徴やベネフィットにフォーカスを合わせてほしいですか? もし、ユーザーが価格にフォーカスを合わせるのであれば、それは最も安いものに決めるでしょう。しかし、特徴やベネフィットにフォーカスを合わせるのであれば、ユーザ

  • ウェブサイトをより単純にして、分かりやすくする -Design Simplicity

    ユーザーがより簡単にインフォメーションにアクセスできるように、ウェブサイトをより単純にして分かりやすくする「Design Simplicity」を取り入れる方法をWeb Designer Wallから紹介します。 What to Expect in 2010: UX/UI Design Simplicity 下記は各ポイントを意訳したものです。 はじめに 今年も多くのデザイントレンドがあります。しかしながら、私はデザインの単純さ(Design Simplicity)にフォーカスをあわせることが重要であると感じます。 デザインの単純さとは、より少ないページ、より少ないクリック、より少ない取り散らかし、そして多くのホワイトスペースを意味します。そして、我々のユーザーはそれを求めています。 増加するインフォメーションへのアクセスは、ユーザーの集中力低下の原因となります。デザイナーは今まで以上にユ

  • 実用的なユーザビリティの10のポイント:ケーススタディ編

    先日紹介した「実用的なユーザビリティの10のポイント」の中から、コンテンツやフォームやタイポグラフィなどの制作に役立つ実用的なケーススタディを紹介します。 10 Useful Usability Findings and Guidelines 以下の意訳は英語圏内のため、特にタイポグラフィなど日語ではなく英語を想定したデータのためご注意ください。 タイポグラフィ 行間 ÷ フォントのサイズ = 1.48 ウェブサイトの英語フォントでは、一般的に「1.48」が読みやすいです。 クラシックなタイポグラフィのでは一般的に「1.5」が推奨されています。 行幅 ÷ 行間 = 27.8 一つのパラグラフの幅は平均538.64ピクセルです。 多くのウェブサイトのフォントサイズが12, 13ピクセルであることを考えるとかなり長いものとなっています。 パラグラフ間のスペース ÷ 行間 = 0.754 一

  • 2010年版 ユーザーインターフェース(UI)・ユーザビリティ必見サイト/必読書 - Feel Like A Fallinstar

    ウェブサイト 実はユーザー中心設計やユーザビリティ、インターフェースについてちゃんとまとまったサイトは国内には少数です。 ここに挙げたサイトはどれも大変充実したものだと思います。 ※残念ながら、海外の記事を紹介しているブログでよいものは見つからず。 劣化コピペサイトを紹介するのも気が引けるので割愛しました。 ヤコブ・ニールセンのAlert Box ユーザビリティ・ユーザ調査の世界的権威であるヤコブ・ニールセン博士のナレッジを発表しているサイトです。 実際の調査結果、そこに対する考察も含め、とてもよくまとまっています。 アップル ヒューマンインタフェースガイドライン Max OS Xのためのインターフェース資料に始まり、アプリケーションをデザインしている間、心に留めておくべき基礎となるデザイン原則がまとまっています。 もちろん、Windows / Linusユーザーにとっても必見。 ユーザビ

  • フォームの完遂率は、フォーム前の設計で3倍以上変化する、というお話 - Feel Like A Fallinstar

    ユーザビリティ系の記事でも何かと人気なのがフォーム周りのお話。 たぶん最終成果に一番近いところにあるから、何だと思います。 でも、一番近いから一番影響が大きい・・・という(ほぼ全国共通の)認識は実はそうでもなかったり。 「フォーム前の設計」でフォームの完遂率なんていくらでも変化する、というお話を少ししたいと思います。 実際にプロジェクトで起こった話を、1つ 最近の安直なランディングページ(※この言葉は嫌いですが便宜上こう書いておきます)なんちゃらの流行(?)のせいで、こんな画面が増えています。 とりあえずサービスの売りがドカンドカン でっかいボタンが画面に何度も何度も現れる ページが長くて字がでっかい 代理店さんがこの1ページを色々ごにょごにょ変えたりしていました。 で、その画面を、しっかりと情報を掲載して来訪者がじっくり納得できるようなページ(群)にしたところ起こったのが下の図のような結

  • 10 UX Blogs You Should Be Reading | UX Booth

    Author AvatarAuthorMatthew KammererPublishedOctober 28th, 2009Popularity In our recent redesign we’ve added more emphasis on our resources section. There are so many great UX related posts out there, we just have to share them with you. Besides, sometimes one awesome UX Booth post a week isn’t enough! Therefore, I wanted to share with you other UX blogs that you should be reading on a regular basi

  • 「ユーザーはスクロールしない」はウソ、”Above the fold”より下を見せる3つのサイトデザインTIPS

    「Above the fold(アバブ・ザ・フォールド)」というのは、スクロールしなくても見ることができる画面の領域のことを言います。 Above the foldについては、以前に記事解説したことがあります。 ”above”は「~より上」、”fold”は、「折り目」という意味で、”above the fold”は直訳すると「折り目より上」という意味になります。 新聞の折り目より上半分は、人の気を引くような見出しのニュースを掲載します。 購入意欲をそそるためです。 スポ○チの1面の見出しなんかは、そうですよね。 「イチロー、マリナーズから解雇通告」 えぇーっ! と仰天して、開いて続きを読むと 「を受けた同僚とゴルフに挑戦」、 みたいな。(笑) バカはこのくらいにしておいて、「Above the foldはユーザーに訴えかけるために重要なコンテンツを置くべき」で、反対にスクロールしなければな

    「ユーザーはスクロールしない」はウソ、”Above the fold”より下を見せる3つのサイトデザインTIPS
  • Twitterの投稿:反復デザイン

    我々は5回のデザイン変更を経て、タイムラインのメッセージをより印象に残り、説得力があってバイラルなものにした。 Twitter Postings: Iterative Design by Jakob Nielsen on August 24, 2009 数日前、Nielsen Norman GroupのTwitterのタイムライン(@NNgroup)に次のユーザビリティカンファレンスについての告知を投稿した。 今のところ、私はストリームベースの投稿に対する全てのガイドラインを持っているわけではない。なぜならば、現在、我々は(特に私の読者のようなB2Bユーザーに関する)ユーザビリティ調査を実施中だからだ。しかし、既に観察の終わったユーザーセッションをベースに、 5回 の反復デザインを行い、この記事を書いた。 1回目のデザイン Announcing LAS VEGAS and BERLIN a

    Twitterの投稿:反復デザイン
  • 使いやすいフォームを実装するための10のポイント | コリス

    ユーザーが混乱しない、使いやすいフォームを実装するために気をつけたい10のポイントをNoupeから紹介します。ブログのコメント欄を対象にしたものですが、フォーム全般にも言えることが多く含まれています。 Comment Form Styling: Examples and Best Practices下記に10のポイントとその概要を紹介します。 サイトではキャプチャなども豊富に掲載されています。入力フィールドはシンプルにたいていのフォームには複数の入力フィールドがあります。 フォームの目的はユーザーからの適切なフィードバックを得るのが目的なので、必要無いものや関係無い入力フィールドは削除します。ラベルは分かりやすく入力するユーザーの立場にたって、ラベル付けします。 例えば、「コメント」と単に記すだけでなく、「コメントを残してください」「あなたの意見をどうぞ」などです。また、「URL」などは用

  • 第3回ユーザー中心のWebサイト設計・ワークショップ2日目: DESIGN IT! w/LOVE

    不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 26日の土曜日は、先週に引き続き、第3回ユーザー中心のWebサイト設計・ワークショップの講師をしてきました。 前回は、ユーザー調査の結果をワークモデル分析、KJ法を使った分析を経て、ターゲットユーザーのモデルとなるペルソナを作成するところまで作業をしてもらいました。 宿題として各自に、自分たちがつくったペルソナにぴったりだと思われる写真を探してきてもらうことを宿題としました。 今週の作業はその写真のなかから一番ぴったりと思われる写真を選んでもらうことからスタート。その後、ペルソナの期待を満たしつつ、ペルソナがゴールと考える状態まで導くためのWebサイトの要件、プロトタイプを、シナリオとペーパープロトタイピングの手法を使ってデザインしてもらいました。 以下のステップです。 シ

  • 第3回ユーザー中心のWebサイト設計・ワークショップ1日目: DESIGN IT! w/LOVE

    不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 3回目となり、恒例になった感のあるデジタルスケープ社主催の「ユーザー中心のWebサイト設計・ワークショップ」の講師をしてきました。 2週にわたっての2日間(5h/日×2=10h)で行うワークショップの1日目は、いつもどおり下記の内容を実施しました。 講義―ユーザー中心のデザインについて―ワークモデル分析(ユーザー個別での分析)KJ法(ユーザーグループの分析)ペルソナ文書の作成 この作業の流れは、自分たちがこれからつくろうとしているWebサイトあるいは商品のターゲットとなるユーザー層に対して、その人たちが普段どのように生活のなかでWebサイトあるいは商品と関わっているのかを観察&インタビューで調査した結果を、まずは個別のユーザーごとにその行動と背景、そして、そこに潜む潜在的な

  • 10 Useful Usability Findings and Guidelines — Smashing Magazine

    Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability fi

  • User Heat : どこが読まれているか見える!無料ヒートマップ・ツール

    ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか? ヒートマップツールを使う

    User Heat : どこが読まれているか見える!無料ヒートマップ・ツール
  • iPhone-like password fields using jQuery / DECAF Blog

    or: Delayed password masking with JavaScript. ==This lib is deprecated. Sorry.== Jakob Nielsen recently asked us to Stop Password Masking: Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures. useit.com/alertbox/passwords.html He suggests us

    iPhone-like password fields using jQuery / DECAF Blog
  • ユーザーのニーズを把握する7のフリーのHeatmapツール

    ヒートマップとはクリックした場所を 把握する為のアクセス解析の類で 物を言わないユーザーの行動 パターンを把握し、ユーザビリティに 繋げる為に使用されます。決して 熱い地図とか情熱大陸の英語版 等ではないです(分かるがな そんな便利なヒートマップですが、多くは有料のサービスで以前は 無料版もあった有名なCrazy EggもAll有料に なってしまったので無料で使用出来るヒートマップのサービスや ソフトウェアを7つご紹介します。 ClickHeat 個人的には一番使いやすい印象でした。インストール型ですが、 インストールも簡単で日語化されています。GPLで配布される オープンソースのアクセス解析ソフトで、PHPMySQLで動きます。 使用法ClickHeatをDLして解凍、フォルダごとアップロードします。フォルダ名はClickHeatとします。 http://example.com/Cl

    ユーザーのニーズを把握する7のフリーのHeatmapツール
  • Situs Judi Rtp Slot Online, Judi Bola, Poker dan Casino Online - ecommr

    Sangat Seru Judi Online Terbaik Sediakan Fitur hebat Pemicu Jackpot Memilih situs judi online yang menawarkan bonus dan fitur hebat memang dapat meningkatkan peluang anda untuk menang besar. Namun, penting juga untuk memilih situs yang terpercaya dan memiliki reputasi yang baik di industri perjudian online. Dalam memilih situs deposit bermain judi online terbaik di Indonesia, […] Read More Memperk

    keijix
    keijix 2009/07/13
    E-コマースサイトのインタフェースデザインのみをコレクションしているサイト
  • 1