タグ

ユーザビリティに関するokishima_kのブックマーク (13)

  • ダークモード:ユーザーの考え方と避けるべき課題

    ダークモードは人気があるが、必須ではない。ユーザーはダークモードを好むが、ダークモードなしでも行動は変わらない。ダークモードをアプリケーションレベルではなくシステムレベルで考えているからだ。ダークモードをサポートする場合は、ダークモードでよくある問題を避けるために、そのデザインをテストしよう。 Dark Mode: How Users Think About It and Issues to Avoid by Tanner Kohler and Amy Zhang on August 27, 2023語版2024年1月15日公開 ダークモードがかつてないほど流行している。少なくともこのトピックに関する多くのウェブデザインの記事を読む限りでは、ダークモードは必要不可欠とさえ思うかもしれない。しかし、ダークモードを完全にサポートし、「うまく活用する」ためには貴重な時間とリソースを必要とす

    ダークモード:ユーザーの考え方と避けるべき課題
  • 10歳のこどもから学んだユーザビリティ向上のポイント

    2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子(10歳)を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい!」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います! ↑私が10年以上利用している会計ソフト! 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく

    10歳のこどもから学んだユーザビリティ向上のポイント
  • DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ

    ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬にわせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら

    DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
  • アルドノア・ゼロのウェブページがヤバい - 職質アンチパターン

    http://www.aldnoahzero.com/ とにかく見て実際に試して欲しい.一発でこのUIを使いこなせたなら貴方は凄い,この記事読まなくても良いと思います. さてUIに係る問題点で感じたことは以下.まあもっとあるとは思う. JSについてはJS諸賢にお任せします. 問題点 そもそもメインコンテンツへの入り口が「LOGIN」なのヤバい. こんなかんじ.ハイコンテキスト!!! LOGINでメインコンテンツに入れると思うのおかしい感じがする.会員制ページと勘違いしてしまう. 「LOGIN」しか提示されてないと,その時点でログインしたくないおじさんとかログイン面倒くさいおじさんとかが去ってしまう可能性が高まる 放送後,トップページがこういう感じになるんだけど,まさか「LOGIN」がメインコンテンツへの入り口だとは思うまい.多くの人がどうやって普段のページに飛ぶのか迷うと思う. pic.t

    アルドノア・ゼロのウェブページがヤバい - 職質アンチパターン
  • 【画像】 かっこいいデザインにする→利用者が分かりにくくなる→貼り紙されてデザイン崩壊 : 痛いニュース(ノ∀`)

    【画像】 かっこいいデザインにする→利用者が分かりにくくなる→貼り紙されてデザイン崩壊 1 名前: アルゼンチンバックブリーカー(大阪府)@\(^o^)/:2014/07/06(日) 18:32:54.28 ID:jtlvCqZS0.net @デザイナー各位 現実の様子です https://twitter.com/bitsoil/status/485361874918064128/photo/1 コーヒーメーカーのデザイン=デザイナー佐藤可士和氏 (設置店=セブン-イレブン) http://blog.marketing.itmedia.co.jp/kurosu/entry/498.html 2: テキサスクローバーホールド(チベット自治区)@\(^o^)/ 2014/07/06(日) 18:34:33.12 ID:JxLt3I3J0.net これはかしわの力不足 3: ファイヤーバードスプ

    【画像】 かっこいいデザインにする→利用者が分かりにくくなる→貼り紙されてデザイン崩壊 : 痛いニュース(ノ∀`)
  • 入力フォームのプレースホルダーを使ってはいけない

    入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル

    入力フォームのプレースホルダーを使ってはいけない
  • 【 | と◯】知ってる? アプリや電機のスイッチと電源ボタンの記号の意味 | アプリオ

    あるiPhoneアプリの解説記事を書くために、アプリ内の設定項目を確認していたところ、以前から気になりつつも放置していた疑問に筆者は直面した。 その疑問とは 「アプリやOSの設定画面などに使われるスイッチは、どちらがオン(ON)でどちらがオフ(OFF)か分かりにくいことがある。なぜ、分かりにくいのか?」 ということだ。 アプリのスイッチの意味が分かりにくい? 基的にiPhoneAndroidの日向けアプリではオン・オフの表現が用いられていることが多いようだが、中には上の画像のように | と ◯ の表現が用いられるアプリも存在する。また、Android端末でも機種によっては同様の表現が設定画面などで使われている。 はたして | と ◯ の表現でオンとオフの区別を自然に行うことができるのだろうか。以前から、筆者の心の中に、この小さな疑問がくすぶり続けていたのだ。 前提として確認しておくが

    【 | と◯】知ってる? アプリや電機のスイッチと電源ボタンの記号の意味 | アプリオ
  • お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久

    今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO(入力フォーム最適化)をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル(項目名)」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を

    お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
  • 実例で納得!シニアが使えないサイトの例 | マミオン有限会社-パソコン・数学研修、法人研修

    パソコン教室でシニア層にインターネットの使い方を教えているときほど 「ああ、ここがもう少し改善されれば!」と吠えたくなる時がある。 「知りたい事」「申し込みたいもの」「買いたいもの」があって ワクワクしているのに、多くの人が、若い人に取っては「些細な」ミスで サイト上で目的を達成できずに諦めたり、 諦めきれないからとサポートセンターに電話して 「その情報はホームページに載ってます」と言われ落ち込んだりしている。 今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。 ウキウキの申し込み「大学の公開講座申し込みたいの。英語をやり直したいのよ」といらしたMさん。 「新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。 ホームページを見たのだけどどうすればいいのかわからないけど ホームページからしか申し込めないらしいから、やり方教えて」 とのこと。 チラシに

  • 全日本<label>要素マークアップ検定

    Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたwRead less

    全日本<label>要素マークアップ検定
  • Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net

    ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません(「やっちゃダメなこと」もしています)ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合

    Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net
  • Webチェックツールの紹介:松延拓生(和歌山大学システム工学部)

    開発したツールの紹介 アイトラッキングを利用したウェブユーザビリティ評価ツール 詳細は別ページ(アイトラッキングを利用したWebユーザビリティに関する研究)にて紹介するが,視線位置のコンテンツを特定して,ユーザビリティ評価を支援するツール.ヒートマップによる分析ではなく,コンテンツ単位で注視状況を定量解析できるのが特徴.インタビューを支援する機能もある. アイトラッキングを利用した意思決定過程解析ツール 眼球運動を分析することでウェブ利用中のユーザの興味の推移を分析することができるツール.UX(ユーザエクスペリエンス)を踏まえたデザインを行う.ウェブコンテンツ単位で注視状況や興味の変化を解析できるため,ウェブアプリケーション,ウェブサービスの情報構造,UIを検討可能. 既存のツールの紹介 Webサイトを作成する上で有効な様々なツールが公開されている.ここではWeb上で入手・実行可能かつ無償

  • ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan

    シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書

    ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
  • 1