UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
ECサイトのレイアウトを見直して売上をアップさせる8つのノウハウ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。ソウルドアウト株式会社のはつざわです。 「Webサイトの売り上げが上がらない・・・」 ECサイトを運営した経験がある人なら、誰もがこの悩みに直面したことがあるのではないでしょうか。Webサイトの構造はとても複雑で、どこに重大な問題が隠れているかを見つけるのも一苦労です。 ただし、押さえるべきところをしっかり押さえることができれば、ECサイトの改善は売り上げアップに直結します。 今回は、少しでも簡単にサイトの課題箇所を改善できるよう、ページ別に改善のコツをまとめました。 まずはサイトの中でもとくに問題があると思われるところから着手して、少しずつ確実に売り上げの上がるサイトへと改善していきましょう！ ▼目次 サイト構成を見直そう あなたのサイトはどのタイプ？ ～4大サイトタイプ～ トップページを見直そう まずは「普通」のレイアウトをマスター 信頼されるトップページを作成 たくさん
[JS]半透明やフラットのかっこいいパネルをさまざまなアニメーションで表示するスクリプト -Amaran JS
シンプルなテキストだけのものをはじめ、画像やアイコンを使った凝ったレイアウトの通知パネルをさまざまなアニメーションで表示できるjQueryのプラグインを紹介します。 表示位置やスライド・フェードなどのエフェクトも簡単に設定できる優れ物です。 Amaran JS Amaran JS -GitHub Amaran JSのデモ Amaran JSの使い方 Amaran JSのデモ デモではさまざまなデザインのパネルをさまざまなエフェクトで表示できます。 ↓は上：ユーザースタイル、下：半透明スタイル デモページ：オプション Amaran JSの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/jquery.amaran.min.css"> <
Chrome使いにそっと教える、タブ一覧を縦に並べられる拡張機能｢Tabman Tabs Manager｣
Chrome使いにそっと教える、タブ一覧を縦に並べられる拡張機能｢Tabman Tabs Manager｣2013.06.16 22:0012,717 ｢Tabman Tabs Manager｣はChromeのタブ一覧を縦に並べられる拡張機能です。開いているタブを縦にずらーっと並べることができます。また、その一覧をサイドバーのように置くこともできるので便利ですよ。 以下に使ってみた様子を載せておきます。 まずTabman Tabs Managerへアクセスしましょう。Google Chromeに拡張機能をインストールします。 Tabmanのアイコンをクリックすると、このように現在開いているタブの一覧が表示されます。クリックすると、そのタブに移動できますよ。 また、独立させることもできるので、擬似的に縦タブを作ることができます。ぜひご活用ください。 ［Tabman Tabs Manager］
「関連リンク」の幻? 意図した誘導を行うための導線設計 (ユーザビリティ実践メモ)
あるコンテンツを見たユーザに対して「次にここを見て欲しい」という制作側の意図に反して、中々思い通りに見てもらえないといった話をお伺いすることがよくあります。 例えば、記事系のコンテンツで、記事を閲覧したユーザに対して関連記事や関連する製品ページへと誘導する場合、記事の下部に「関連リンク」のエリアを設け、その中に意図した誘導先のリンクを配置しているケースがよく見受けられます。 上記のような方法で、果たして意図通りにユーザを誘導することができるでしょうか？今回は「ユーザがこのページ以上の情報を積極的には求めていない」ケースについて考えてみました。 弊社の実施したユーザ行動観察調査においては、多くのユーザが価格まで閲覧した後にページの上部に戻り、そのまま見るのをやめてしまうという行動が見られました。 ここで、このような行動に至った原因を考えてみましょう。 アイトラッキングによる分析やユーザへのヒ
「ログインフォーム」は慣れが大事 (ユーザビリティ実践メモ)
ユーザビリティを考える上では、ユーザの「慣れ」を考慮する必要があるということは、過去の実践メモでも何度か指摘してきました。 過去記事：「ユーザの慣れや先入観に配慮する」 そうした「慣れ」の代表例として、「ログインフォーム」が挙げられます。 ログインフォームの入力項目や並び順はほとんどのサイトで共通している 入力するID・パスワードも、多くのユーザは同じものを使い回している という特徴から、ログインフォームを利用するユーザは、ほぼ無意識的に行動する傾向が見られます。 特に、ある程度キーボード操作に慣れているユーザの場合、タブキーを利用して、 「ID入力→タブキー→パスワード入力→エンターキー」 という操作が身体に染みついていることがあります。 「他と違う」フォームは、ユーザのエラーにつながりうる とあるECサイトでは、次のようなログインフォームを用意していました。 このログインフォームでは、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
