タグ

ブックマーク / u-site.jp (26)

  • アクセシビリティを向上させる5つの視覚処理

    アクセシブルなビジュアルをデザインするためには、色のコントラストを考慮すること、色だけに頼らないこと、インタラクティブな要素を識別しやすくすること、画像に対して役立つ代替テキストを提供すること、実際のユーザーでビジュアルをテストすること、が挙げられる。 5 Visual Treatments that Improve Accessibility by Kelley Gordon on October 30, 2022語版2023年5月10日公開 CDC(アメリカ疾病予防管理センター)によると、米国では6100万人の成人が障害を抱えて生活している。障害を持つ人々の数と、アメリカ障害者法(ADA)のWebサイト関連の訴訟の近年の増加を見る限り、これらの人々のためにデザインをすることは不可欠である。また、アクセシブルなデザインは、結果的にユーザビリティを向上させる。Web Content

    アクセシビリティを向上させる5つの視覚処理
  • ChatGPTは専門職の生産性を高め、仕事の質を向上させる

    専門職にChatGPTを使ってビジネス文書を作成してもらう調査では、タスク時間が短縮され、評価品質が大幅に向上した。 ChatGPT Lifts Business Professionals’ Productivity and Improves Work Quality by Jakob Nielsen on April 2, 2023語版2023年4月11日公開 最近、ChatGPTや同様の生成型人工知能ツールが導入されたことにたくさんの人が怒っている。コメンテーターも、AIをだまして不快なことを言わせるのは可能であるとか、そうしたツールの出力は誤解を与えることが多い、と批判している。 しかし、1つ目の批判に関しては、だからどうした、と言いたい。Excelでも、間違った計算式を入れれば間違った結果が出る。また、文書作成ソフトで不快な文章を作りたければ、そうした内容を入力すればよいだ

    ChatGPTは専門職の生産性を高め、仕事の質を向上させる
  • ダークモードとライトモード:どちらが良いのか

    正常な視力の人(または視力を矯正している人)は、ライトモードのほうがよく見える傾向があるが、白内障および関連疾患のある人の中には、ダークモードのほうが見え方が良好になる人もいる。その一方で、ライトモードでの長時間の読書は、近視を引き起こす可能性も指摘されている。 Dark Mode vs. Light Mode: Which Is Better? by Raluca Budiu on February 2, 2020 日語版2022年10月31日公開 最近、iOS 13へのダークモードの導入をきっかけに、ダークモードのデザイントレンドとしての人気とそのユーザビリティについて、ある記者からコメントを求められた。また、UXカンファレンスの参加者からもダークモードについてのこの質問を何度か受けている。 iOS 13:ライトモード(左)とダークモード(右)。 前もって言っておかなければならないが

    ダークモードとライトモード:どちらが良いのか
  • オーバーレイ過多: ポップアップの競合でより厄介になっている

    実行中のタスクとは無関係な、サイトやブラウザが起動する大量のポップアップに、現在のユーザーは圧倒されている。 Overlay Overload: Competing Popups Are an Increasing Menace by Kate Moran on August 1, 2021 日語版2022年3月2日公開 ポップアップ:90年代からの嫌われ者 1990年代から、ユーザーはポップアップを嫌っていたが、ポップアップは今もユーザーに嫌われつづけている。実際、アメリカの成人回答者452人を対象に我々が実施した調査で、ポップアップは最も嫌われる広告手段の1つだった。(2004年の同様の調査でも、まったく同じ結果が出ている。変わらないことはある、と確認できたのはいいことだ。ポップアップによって引き起こされる感情は否定的なものではあるが)。 我々は、長年にわたり、この強引な広告手段に対

    オーバーレイ過多: ポップアップの競合でより厄介になっている
  • ブランドイメージの転換に成功した自動車メーカーは

    国内の自動車メーカーに対して消費者は実際にどのようなブランドイメージを抱いているのか、イード・日自動車ユーザー研究所は自主調査を行い、コレスポンデンス分析を用いて消費者の抱くイメージを視覚化してみました。 U-Site編集部 2018年7月23日 消費者の「クルマとの付き合い方」が変わりつつある中、自動車メーカーはそれぞれ独自のブランド戦略をもってブランドイメージの構築に努めていますが、実際に消費者はどのようなイメージを抱いているのでしょうか。イード・日自動車ユーザー研究所(JACRI)は、国内自動車メーカー(ブランド)のイメージに関するアンケート調査を行い、コレスポンデンス分析を用いて消費者の抱くイメージを視覚化してみました。 調査概要 調査手法 アンケートモニターを対象にしたWebアンケート 調査対象 全国、20~60代男女 サンプル数 2,162サンプル 回収方法 性年代均等回収

    ブランドイメージの転換に成功した自動車メーカーは
  • スティッキーヘッダー:より良くする5つの方法

    固定ヘッダーが有益なのは、目立ちすぎず、コントラストが高く、アニメーションが最小限で、ユーザーのニーズに合っている場合である。 Sticky Headers: 5 Ways to Make Them Better by Page Laubheimer on April 4, 2021 日語版2021年9月8日公開 定義 スティッキーヘッダー(または固定ヘッダー(persistent headers))は、ユーザーがページを下にスクロールしている間、Webサイトやアプリのヘッダーを画面上の同じ位置に保つためによく使われるデザインパターンだ。このパターンには部分的なスティッキーヘッダー(partially sticky header)というバージョンもあり、これはユーザーが上にスクロールを始めるとすぐにページトップに(再び)表示されるというものである。 スティッキーヘッダーが適切に表示される

    スティッキーヘッダー:より良くする5つの方法
  • ついに出た、JIS Z 8530:2021

    今回は、人間中心設計に関する国内規格・2021年版JIS Z 8530について、そのポイントを見ていくことにしたい。これは、2019年版ISO 9241-210の(部分的に修正がいれられた)日版である。 黒須教授 2021年6月15日 これが標準訳になるか ISO 13407が1999年にでて、翌年JIS Z 8530:2000として日で公開されてから、もう21年が経過した。この規格は、人間中心設計という概念を広め、ユーザビリティに対する社会的関心を高めたものとして、大きな意味を持つものだった。筆者も『ユーザ工学入門』(1999)とか『ISO13407がわかる』(2001)などを出して、その概念の普及に努めた。 その改訂版がISO 9241-210という番号に変わって2010年にでたが、これは当時流行していたUXの概念を未消化なまま導入したり、ちょっと無節操に内容を拡大したようなバー

    ついに出た、JIS Z 8530:2021
  • アコーディオンのアイコン:どのシグニファイアが最適か

    キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日語版2021年4月8日公開 アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ(複雑なアプリケーションには特に適している)。 モバイルUXとアプリケーションデザインの両方の講座でよく聞かれ

    アコーディオンのアイコン:どのシグニファイアが最適か
  • ナビゲーションの3クリックルールは誤り

    重要な情報にアクセスしやすくすることは重要だが、3クリックルールはデータの裏づけのない恣意的な目安である。 The 3-Click Rule for Navigation Is False by Page Laubheimer on August 11, 2019 日語版2020年4月9日公開 3クリックルール どんなページもアクセスするのに3回以上のクリック(またはタッチスクリーンでのタップ)を必要としてはならない、という3クリックルールは、根強く残る、正式には認められていないヒューリスティックである。このバリエーションに、最も重要な情報には3クリック以下で到達しなければならない、というのもある。デザイナーはこのルールをWebサイトのナビゲーションや情報探索タスクによく適用するが、中には、(フォームやウィザードの入力など)他の種類のタスクにもこのルールを用いるデザイナーもいる。 タスク

    ナビゲーションの3クリックルールは誤り
  • 適切なリンクラベル:クリックを促す4つのS

    リンクテキストを具体的なものにすれば、リンクに偽りがないとユーザーに期待してもらえるし、その期待に応えることもできる。また、中身のある具体的なリンクテキストにすることで、簡潔なまま、単独で意味がわかるようになる。 Better Link Labels: 4Ss for Encouraging Clicks by Kate Moran on March 24, 2019 日語版2019年10月30日公開 ユーザーはリンクテキストによってサイト内を移動する。コンテンツの見つけやすさや発見しやすさ、アクセシビリティに対する、この小さくて控えめなUXの文言による貢献度は大きい。 そして、こうした役割を最もうまく果たせるリンクとは以下のようなものである: 具体的である(Specific) 偽りがない(Sincere) 中身がある(Substantial) 簡潔である(Succinct) 具体的であ

    適切なリンクラベル:クリックを促す4つのS
  • しぶとく残るWebデザインの間違い・トップ10

    大規模なユーザビリティ調査によって、現在、最も一般的かつ有害なWebデザインの間違いが明らかになったが、そうした間違いは意外なものでも新しいものでもなかった。つまり、それらは課題としてずっと続いており、Webサイトのユーザビリティを損ない続けているのである。 Top 10 Enduring Web-Design Mistakes by Amy Schade, Yunnuo Cheng, and Samyukta Sherugar on October 30, 2016 日語版2017年2月23日公開 1996年以来、我々はWebデザインの間違い・トップ10のリストを作成してきているが、現在のWebデザインの間違いを調べるために、今年もアメリカとイギリスで215人の参加者からなる大規模なユーザビリティ調査を実施した。小さな地場企業からエンターテインメントサイト、非営利団体、グローバル企業に

    しぶとく残るWebデザインの間違い・トップ10
  • カスタマージャーニーマップは、いつどのように作るべきか

    カスタマージャーニーマップとは、物語と視覚化という2つの強力なツールを組み合わせることで、開発チームが顧客のニーズを理解して、対処できるようにしたものである。コンテキストやビジネスゴールによって、マップの取るかたちはさまざまだが、そこにはある決まった要素が一般に含まれている。また、根になるガイドラインがあり、そうしたガイドラインに従うことで、もっともうまくいく。 When and How to Create Customer Journey Maps by Kate Williamson on July 31, 2016 日語版2016年11月17日公開 カスタマージャーニーマップとは何か この質問をされることは当に多い。そこで、まずはこの質問に正面から答えてみたい: 定義:カスタマージャーニーマップとは、1人のユーザーが目標を達成するためにたどったプロセスを視覚化したものである。そ

    カスタマージャーニーマップは、いつどのように作るべきか
  • フロントエンドスタイルガイド: 定義と要件、コンポーネントチェックリスト

    フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義: フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ

    フロントエンドスタイルガイド: 定義と要件、コンポーネントチェックリスト
  • 入力フォームにおけるユーザビリティの再確認

    ユーザー登録などに必要な入力フォームですが、今もなお使いにくいフォームを見かけることがあります。U-Siteでは入力フォームについて何度も取り上げてきましたので、ここで、これまでの記事を引用して基をおさらいします。 HCD事業部・宮内 2016年5月12日 イードではHCD関連の調査業務を多数請け負っております。最近ではユーザー理解のための調査が増えていますが、一方で、基的なユーザビリティ評価業務も日々行っております。その主な内容としては、ユーザビリティテストやヒューリスティック評価によって現状のサイトやアプリの問題点を明らかにし、改善方針を提案するというものがあります。 サイトやアプリの規模、サービスの種類、運用体制などにより、存在するユーザビリティ上の問題点は様々で、新しいデバイスやデザインパターンの出現によっても変化していますが、共通した問題点もあります。その一つが、ユーザー登録

    入力フォームにおけるユーザビリティの再確認
  • 「さらに詳しく」というリンク:もっと良いものにできる

    「さらに詳しく」というフレーズをその場しのぎのリンクラベルとして利用することが増えている。しかし、このテキストは情報の匂いが弱く、アクセシビリティも悪い。このフィラー的な文言に少し工夫をして、次に出るページの内容をユーザーが自信を持って予測できる説明的ラベルにしよう。 “Learn More” Links: You Can Do Better by Katie Sherwin on December 13, 2015 日語版2016年3月2日公開 トレンドには他のトレンドに比べて目立たないものもある。低コントラストのテキストもそうだが、独立型リンクラベルとして「さらに詳しく」を利用することが静かなトレンドになっている。Webには今、この汎用的なリンクがあふれており、その大部分が、重要度が二次的、三次的な情報をリンク先としている。(Googleで検索すると、この用語の使用例は14億個も出て

    「さらに詳しく」というリンク:もっと良いものにできる
  • フラットデザイン: 起源、問題、フラット2.0のほうが望ましい理由

    フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb

    フラットデザイン: 起源、問題、フラット2.0のほうが望ましい理由
  • 設計品質と利用品質(後編)

    ユーザビリティとUXの関係から始まり、満足感の位置づけ、利用品質という概念、感性的魅力など、さまざまな概念が、この図によって、それらがほぼ所定の位置に収まったと考えている。おまけ的にUI/UXについても整理がついてかなり気分的にはすっきりした。 黒須教授 2015年10月5日 (「設計品質と利用品質(前編)」からのつづき) 客観的設計品質 まず客観的設計品質から説明すると、その大半は従来のものと変わっていないが、最初の変更点は、ユーザビリティに使いやすさという副題を付けた点である。これは、僕が、設計品質に含まれているものの大半には-abilityという語尾がついていて、それはabilityでありpotentialであることをあらわしていて、利用した結果ではないということを力説したのだが、Nigel Bevanがなぜかユーザビリティの代わりにease of useという言い方がいいと主張した

    設計品質と利用品質(後編)
  • モバイルデバイスにおけるアコーディオンUI

    アコーディオンはモバイルのスペースを節約するが、方向感覚を失わせたり、大量スクロールの要因にもなる。しかし、簡単なデザイン修正で、このUI要素のユーザビリティは改善できる。 Accordions on Mobile by Raluca Budiu on May 31, 2015 日語版2015年7月21日公開 アコーディオンというのは、展開することで、隠していた情報を表示するデザイン要素である。オーバーレイとは違い、アコーディオンはページのコンテンツを押し下げるので、ページコンテンツの上に重なることはない。 Toomy.com: Price(:価格)というフィルターはアコーディオンとして実装されており、展開するとページコンテンツは押し下げられる。 デスクトップでのアコーディオンの利用には議論の余地がある。一方、モバイルではアコーディオンは最も役立つデザイン要素の1つだ。ごく小さな画面スペ

    モバイルデバイスにおけるアコーディオンUI
  • モバイルにおける入力フォームデザインのためのチェックリスト

    モバイルデバイス用の入力欄をデザインするときには、14のユーザビリティ要件からなるこのリストを満たしているかどうかをチェックしよう。 A Checklist for Designing Mobile Input Fields by Raluca Budiu on June 14, 2015 日語版2015年7月10日公開 デザイン対象がWebページであれ、Webベースのアプリケーション(たとえば、SaaS)やネイティブモバイルアプリであれ、基の構成要素の1つになるのが、ユーザーがテキストを入力する地味なテキスト入力欄である。このウィジェットは大量に利用されているので、その利用自体について、この記事で話す気はない。アプリケーションデザインにおいて、ワークフロー等の全体像に関わる問題は良質なユーザーエクスペリエンスにとって重要であり、指摘する必要のある課題がたくさんあるからである(こうした

    モバイルにおける入力フォームデザインのためのチェックリスト
  • UXデザインをするならこの本を読もう! 安藤先生のおすすめ書籍

    UXデザインをするならこのを読もう! 安藤先生のおすすめ書籍 ユーザー志向のものづくりの実践~安藤昌也氏(番外編) UXデザインを手がけるときに参考になる書籍を安藤先生に紹介してもらった。人間中心設計、インタビューの仕方、ペルソナの作り方、UIデザインのための心理学に関するものなど、いずれもUXデザインのヒントにつながりそうなばかりだ。 U-Site編集部 2015年6月24日 安藤 昌也(あんどう まさや) 千葉工業大学 工学部 デザイン科学科教授 Ph.D。UX、エスノグラフィックデザインアプローチの研究者で、ものづくりのコンサルタント。 (← 第3回「利他的UXデザイン:人の利他心を高めるものづくり」へ) 安藤先生へのインタビューの番外編。インタビューの間、背面の書棚がとても気になったので、UXデザインを手がけるときに参考になる書籍を紹介してもらった。いずれも、UXデザインの教科

    UXデザインをするならこの本を読もう! 安藤先生のおすすめ書籍