UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
明るいUI or 暗いUI？ ユーザビリティから考えるUIの明るさ
SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 UXとUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUIが出会い系のプロフィールだとしたら、UXは出会い方です。これらの比較は違いを上手く表している一方で、UIの複雑性を軽視していることもあります。 UIとは、単なる塗装やTinderのプロフィールではありません。UIとは全体の環境です。ピクセルひとつひとつが重要であり、多面的な構造を持っています。私たちは、サービスのプラットフォームを選ぶときは全体の体験を最適化できるよう注意深く考えます。一方で、配色理論やレイアウト、タイポグラフィ、フォントの選択などの小さな要素については、数秒以上かけて考慮されることは滅多にありません。 そのため
3万円でユーザビリティーテストルームをつくる - Blog.おにぎりたまごうぃんなー
ユーザビリティーテストの設計から実施までの仕事を受ける機会があり、テストルームの準備も行いました。 テストルームを借りるという選択肢もあったのだけれど、今回はデメリットのほうが大きかったので、自前で一番安くあげるテストルームを設計してみました。 都内でユーザビリティーテストができるスタジオを借りるとなると1日10万円前後くらいになると思うので、3万円で1回社内にテスト環境作っておいとくと、選択肢が増えて楽だと思う。 ( ※この記事はクライアントさんの了承を得て書いています ) ユーザビリティーテストを実施するにあたって必要な要素 接続概要図 部屋(テストルームと観察ルーム) それぞれ個室である必要はないが、テストルームは被験者の集中力を見出さないためになるだけ個室であったほうがよいと思う。 観察ルームである程度大声で話してもテストルームに声が届かない距離、仕切りは絶対にあったほうがいい。テ
より良い検索フォームのための９つのベストプラクティス
検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。
タブ型 UI について考える | Accessible & Usable
公開日 : 2016年1月18日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ タブをクリック/タップすると、JavaScript によって、そのタブに紐づいた情報 (タブパネル) が切り替わり表示されるユーザーインターフェース (UI) があります。限られたスペースで複数のコンテンツを併存させることができ、メタファとしてもわかりやすいと言えます。 タブ型 UI の例 今回は、このタブ型 UI について、ユーザビリティおよびアクセシビリティの観点から配慮したいことを考えてみたいと思います。 ユーザビリティの観点から配慮したいこと タブっぽく見えること 言わずもがなですが、タブ型 UI はユーザーにとって「タブっぽく」見えなければなりません。タブなのかボタンなのか微妙な UI を見かけることもありますが、仮にユーザーがそれをタブではなくボタンと認識して
別ウィンドウを開くことの是非｜ウェブユーザビリティ向上を支援するWebsite Usability Info
（2012年1月28日追記） この記事内容をアップデートした記事を、別途公開しました。「別ウィンドウを開くことの是非 (その2)」をご参照ください。 Webサイトを制作していると、<a href="xxx" target="_blank"> などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。 別サイトにリンクする場合 (できれば 別サイトを回遊した後、自サイトに戻ってきてもらいたい) 開いたページであれこれ操作が予想され、その間、元ページは残しておきたい場合（ブラウザの [戻る] ボタンではすぐに戻れないケースなど） お気持ちはよくわかるのですが、ユーザビリティやアクセシビリティの観点で考えると、リンクは別ウィンドウを開くべきではないと考えます。理由は、以下の通りです。 初心者ユーザーやシニアユーザーは、別ウィ
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
全日本＜label＞要素マークアップ検定
19. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ 20. 人間工学的観点では、視点の動きが重要 - Path To Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-t
エラー (ユーザーのつまずき) をデザインで解決する | Accessible & Usable
公開日 : 2015年6月18日 (2021年2月2日 更新) カテゴリー : ユーザビリティ ウェブサイトの利用シーンでは、様々な局面でエラー (ユーザーのつまずき) が生じています。ユーザビリティテストをしていると、エラーに直面したテスター (ユーザー) はまるで自身に責があるような言動を見せることが多いのですが、実はユーザー側ではなく、デザイン側に問題があるケースが大半と言えます。 この記事では、エラーの種類を理解したうえで、どうデザインによって解決するかを、見渡してみたいと思います。 エラーの種類 D.A.ノーマン氏は、著書「The Design of Everyday Things」(日本語訳は「誰のためのデザイン？)」の中で、エラーには「スリップ (slip)」と「ミステーク (mistake)」の二種類があると述べています。 スリップ (slip) A slip occurs
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか？……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
写真が語るUXとUIの違い - Nothing ventured, nothing gained.
Windows XPのXPがeXPerienceだったことを覚えている人がどのくらいいるかわからないが、正直、最初にユーザーエクスペリエンスと聞いたときに、どのように日本に定着させようかと悩んだ。略語を開くことなどあまり無いので、製品名などは大して心配はしなかったのだが、確か何かの設定画面かにも、Experienceというタブ名か何かがあり、どのように訳すか頭を痛めたように記憶する。 それから数年、すっかりUX、すなわちユーザーエクスペリエンスという言葉が定着したように思う。それでも、今でもUXとUIを混同する場面に出くわすことがある。 すでに様々なところで説明はされているが、敢えて、ここでもUXとUIの違いを説明しよう。 UX（ユーザーエクスペリエンス）は、製品やサービスに対して、ユーザーがどのように感じ、そして反応するかのことである。実は、UXは2010年にISO 9241-210とい
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【介護サイト比較】情報を気持ちよく入力してもらえるか？ | マミオン有限会社-パソコン・数学研修、法人研修
サイトの使い心地に大きく影響を及ぼすのが、入力フォームの設計です。 ユーザーテストを観察していても、特に介護サイトのメインユーザーであるシニア層は、情報の入力を不得手とする方が多いです。 今回は、各サイトが入力フォームにどういった工夫や配慮をしているか確認してみたいと思います。 主要サイトの入力フォームのデザインをチェック！介護DB（Link） 上の図の赤枠部分を見るとわかる通り、『介護DB』では同じ入力項目内でフォームを分けてしまっています。このように「姓名」「郵便番号」「電話番号」のフォームを分けて設置しているサイトは、他でもよく見かけます。 特にパソコンに慣れてないないシニア層ユーザーは、「タブキー」を使って次のフォームに移動するという技は知りませんので、毎回キーボードとマウスを行ったり来たりしながら苦労して情報を入力することになってしまっています。 これに対処するためには、データベ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design