タグ

uxに関するmanabouのブックマーク (53)

  • 「ダークパターン」とは?7つの類型を解説/企業30社 独自アンケート - クローズアップ現代 取材ノート - NHK みんなでプラス

    うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル(ネットショッピング、旅行予約サービス、飲店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス)について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました(利用者数については、ニールセンとICT総研の調査を元にしています)。このうち、16のサービスの運営企業から回答がありました(回答率は53%)。 回答した企

    「ダークパターン」とは?7つの類型を解説/企業30社 独自アンケート - クローズアップ現代 取材ノート - NHK みんなでプラス
  • 本当に実践的なデザインドキュメントの書き方 第1回:なぜ渡されたワイヤーフレームは分かりにくいのか? | アドビUX道場 #UXDojo

    当に実践的なデザインドキュメントの書き方 第1回:なぜ渡されたワイヤーフレームは分かりにくいのか? | アドビUX道場 #UXDojo 連載 当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか?これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー

    本当に実践的なデザインドキュメントの書き方 第1回:なぜ渡されたワイヤーフレームは分かりにくいのか? | アドビUX道場 #UXDojo
  • なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita

    なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

    なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
  • Google UX Design

    Get on the fast track to a career in UX design. In this certificate program, you'll learn in-demand skills at your own pace, no degree or experience required. Enroll today and get access to Google AI Essentials at no cost. Offer ends 11/30*

    Google UX Design
  • リコー経済社会研究所 | リコーグループ 企業・IR | リコー

    「あれっ!こんなところを間違えてるよ」―。パソコン画面上で何回も確認して間違いがなかったのに、紙に印刷すると原稿のミスが...。こんな経験をした人も多いはず。だが、その理由がよく分からない。もちろん、できる限り間違いを減らし、仕事はスムーズに進めたい。紙と画面の違い、その使い分けを考察してみた。 「反射光」と「透過光」 画面よりも紙のほうが、間違いに気がつきやすい。これは私が今まで何度となく経験してきた。新型コロナウイルスの感染拡大に伴い、リモートワークを始めてからは、自宅などにプリンターが無かったり、あってもその能力不足で印刷に手間取ったり。だから、紙でのチェックを怠りがちになり、ミスが生じて後で大きなしっぺ返しをらう。 情報処理学会の研究報告(注)が、紙と液晶ディスプレーにおける「反射光」と「透過光」の性質の違いなどに着目し、実験を行った。反射光はいったん紙に反射してから目に入る光、

    リコー経済社会研究所 | リコーグループ 企業・IR | リコー
  • UXデザインプロセスの基本的な6ステップ デザイン会社 ビートラックス: ブログ

    Step1 – 理解: UnderstandStep 2 – 共感: EmphasizeStep 3 – アイディエート: IdeateStep 4 – プロトタイプ: PrototypeStep 5 – テスト: TestStep 6 – ローンチ&計測: Launch&Measureユーザー体験を設計するUXデザインは、現代ではかなり高い認知度を獲得し、多くの企業が注目をしている。その一番の理由が、「スペック重視」から「体験重視」にビジネスもモデルが変換し始めたことだろう。 ユーザーのフォーカスが、所有することから利用することに移行したことで、プロダクト提供側も、より良い体験設計が求められている。 これからの時代にヒットするのはサービス化されたプロダクトだと言えるだろう。そこで最も重要な存在になってくるが、UXデザインであり、UXデザイナーである。 意外と知られていないUXデザインのプ

    UXデザインプロセスの基本的な6ステップ デザイン会社 ビートラックス: ブログ
  • 使いやすいデザインのための4つの要素

    しばらく前に、UX Boothのエディターの1人であるAmy Grace Wells氏が、次のような記事のアイデアを持ち込んできました。 「学習しやすさ」、「探しやすさ」、「発見しやすさ」、そして「見つけやすさ」について説明、比較、対比して、それぞれがUXにどのような影響を与えるかについての記事を書いたらどうでしょう? 私は考え込んでしまいました。というのも、これらすべての要素が相まって良質なユーザー体験ができあがるということを、たった1の記事でどう説明できるでしょうか。これはひとつひとつが、現代のUXデザインの生業と捉えてもよく、大抵の人は、この中の1つに自分のキャリアをすべて費やすようなものなのです。それなのに私は、信用あるメディアであるUX Boothで、これらすべてについてのHow to記事を書くように依頼されたのです。 私は数ヶ月の間考え続けて、いくつかメモを書きつけ、あとはイ

    使いやすいデザインのための4つの要素
  • DX時代のITアーキテクチャー、7階層ですっきり理解

    DX時代に求められるITアーキテクチャーの構成は複雑なことが多く、必要な要素技術や設計・開発手法も多岐にわたる。その全体像を把握するのは困難に思えるが、以下のように7階層に分けて考えると理解しやすい。 ●DXを支える7階層のITアーキテクチャー (1)チャネル層 (2)UIUX層 (3)デジタルサービス層 (4)サービス連携層 (5)ビジネスサービス層 (6)データサービス層 (7)データプロバイダー層 今回はこの図を基に、7階層のそれぞれの特徴とDX移行時に押さえるべき要素技術や仕様、よくある課題について順番に見ていこう。 (1)チャネル層はユーザーとの最初の接点 ユーザーとサービスとの最初の接点となる部分の階層。パソコン、スマートフォン、タブレットなどの端末、そこからアクセスするアプリケーション(Webブラウザー、チャットボット、SMSなど)の他、コールセンターなどの顧客サービスもチ

    DX時代のITアーキテクチャー、7階層ですっきり理解
  • プッシュ通知のタイミングを制御する話 〜 ユーザーの空気を読む通知

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN研究所 坪内と申します。今日は通知の話です。 プッシュ通知に気づかなかったり、タイミングが悪くてイラっとしてしまうことはないでしょうか? 最適なタイミングで通知する研究結果をご紹介します。 みなさんが目にする、ヤフーの広告の表示や、オススメの情報は、パーソナライズされています。つまり、過去のユーザーの行動履歴から「この人は釣りが趣味の人だ」と推測し、釣りに関するニュースや、釣竿のレコメンデーションをしています。これはプッシュ通知もしかりです。プッシュ通知は表示できる文字数や送信できる通知数に制限があります。ユーザーの興味などから、この人にはこの通知だ! というのを送ります。ここまでは、広告やレコメンデーショ

    プッシュ通知のタイミングを制御する話 〜 ユーザーの空気を読む通知
  • グリッドシステムで強固なデザインレイアウトを作る

    この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。 The Grid System: Building a Solid Design Layout デザイナーの仕事の構造と背景の根的な考え方として、私たちは自分が作りたい要素のことばかり考えてしまい、グリッドの有効性を看過してしまいがちです。多くの伝統的なアーティストは今でも、まずは縦横に薄い線を引いてから作品を描いています。作業環境を最大限に活用し、より精確に制作するため、デザイナーにもこれに対応するツールがあります。それが、グリッドシステムです。 グリッドの由来 統制の取れたデザインを作るためのもっとも簡単な方法のひとつが、グリッドシステムです。元々は印刷レイアウトのために考えられたもので、実用性が証明されているテクニックです。テクノロジーに頼らずしかも

    グリッドシステムで強固なデザインレイアウトを作る
  • よりよいスキャナビリティのためのUIデザイン

    NemanjaはBMWやSubaruなどのブランドも手掛けたことのある、UI /UXプロダクトデザイナーです。 プロダクトデザイナーは、短期間に多くの情報を表示してしまうことがよくあります。「スキャナビリティ(読み取りやすさ)」という言葉の意味や、一般的な視線の動きのパターン、そして現代のデザイン原則を理解していれば、消費しやすいコンテンツと、魅力的なUIをつくることができるでしょう。 インターネットの世界は日々新たなアプリ、Webサイト、記事などが現れて広がっていきます。溢れかえるコンテンツから自分に関係のあるものだけを探すことは骨が折れるため、ユーザーを情報に注意を引きつけることはますます難しくなっています。 マーケティングの専門家であるDavid Zheng氏によれば、60%以上のユーザーは15秒以内にサイトを離脱しているというのです。 調査によれば、ユーザーはサイトの一言一句をきち

    よりよいスキャナビリティのためのUIデザイン
  • デザインファイルに仕様(サイズ・スペース・コメントなど)を加えるためのデザイン素材 -UXUI Doc Kit

    Webページやスマホアプリのプロジェクトで、チームと開発者向けのドキュメントを作成する際に使用するサイズ・スペース・コメントなど、236種類の要素をまとめた無料のデザイン素材を紹介します。 デザインガイドラインを見栄えよくしたい人にオススメです! UXUI Doc Kit for Sketch/Figma UXUI Doc Kitの特徴 UXUI Doc Kitのダウンロード UXUI Doc Kitの中身 UXUI Doc Kitの特徴 UXUI Doc Kitは、デザインファイルに仕様を加えるための素材です。SketchとFigma用が揃っています。 UXUI Doc Kitには、以下の素材が含まれています。 アロー: 26種類 スペース・サイズ: 水平および垂直 ノート: ステッカー、ラベル、ダイアログ、コメント カーソル ライドモード・ダークモード 各要素はカスタマイズが可能です。

    デザインファイルに仕様(サイズ・スペース・コメントなど)を加えるためのデザイン素材 -UXUI Doc Kit
  • Why UI/UX guidelines are powerful

    A good design system depends on how usable it is for real users. It can motivate a user to engage, play, and transact with the system. A poor interface can confuse the user and ends up with the user’s frustration. Poor architecture, no hierarchy, and no-logics cannot drive a good design system. There are a few thumb rules which can allow an interface to become a user-friendly system. But before go

    Why UI/UX guidelines are powerful
  • プロダクトの成功に必要な 3 つのステージと 20 のタスクについて:現場の動き方をまとめました|Fritz | Lead Product Manager @ Mercari

    こんにちは、フリッツ です。プロダクトマネージャー(以下 PM)になってから相当の年月が経ち、特に、現職の US メルカリにおいては「 UIUX 強化型 PM 」として認知されるようになりました(ありがたい)。 ただ、最近は自分があまりにもいま持っているスキル・経験に立脚しすぎているなぁ、と感じており、強みの分野を広げようとお勉強中。 ということで、旅の序盤として、記事では「プロダクトの成功」を導くために必要とされる、問題定義・優先順位決定・実行 という 3 つのステージを PM 視点から 20 項目にわけてみました。できるかぎり、(自分の今までの)現場の動き方に沿うようにまとめました。割と基的な内容ではありつつも、特に実行のパートにおいては、現場で役立つような個人的知見を多少含められたはず…。 プロダクトに関わる方、および・駆け出し~数年目の PM の方のお役に立てる記事になっていれ

    プロダクトの成功に必要な 3 つのステージと 20 のタスクについて:現場の動き方をまとめました|Fritz | Lead Product Manager @ Mercari
  • 非倫理的なプロダクトは「BAD UX」なのか?

    12月5日に開催された「Ethical UX Meetup #3」で発表させていただいた内容のプレゼンテーション資料です。#エシカルUX https://uxmilk.connpass.com/event/156641/

    非倫理的なプロダクトは「BAD UX」なのか?
  • マンガでわかるHCI: インターフェイスってなに?|マンガでわかるHCI(ヒューマン・コンピュータ・インタラクション)

    インターフェイスってなに?小さい子や、親の世代に、HCI(ヒューマン・コンピュータ・インタラクション)という研究分野のことを話すと、必ず聞かれるのが、「そもそもインターフェイスってなに?」という質問。 たしかに、なんかふわっとして掴み所のない単語ではあります。 マンガでも紹介しているように、インターフェイスという言葉を文字通り訳すと、FaceとFaceの間(inter)という意味になります。 英語のFaceという言葉は、顔という意味以外にも、「面(側面の面)」という意味もあるので、ある意味、なにか「モノとモノとの間」、というイメージです。 ↑ モナカのあんこも、面と面のインターフェイス インターフェイスいろいろインターフェイスと言ってもいろいろあります。 例えば、電話。 電話は、人間と人間の間のコミュニケーションの間を受け持つデバイス、すなわちインターフェイスと言えます。 また、文字や話言

    マンガでわかるHCI: インターフェイスってなに?|マンガでわかるHCI(ヒューマン・コンピュータ・インタラクション)
  • 複雑な乗換体験を直感的に! 乗換案内アプリのデザイン

    これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ

    複雑な乗換体験を直感的に! 乗換案内アプリのデザイン
  • 「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた|Tsutomu Sogitani

    大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2~3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使

    「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた|Tsutomu Sogitani
  • 経営者にデザインや技術の大切さをわかってもらうには?|深津 貴之 (fladdict)

    よく講演をした後に、そのような質問を受けることが多い。 結論から言うと、経営者にデザインやエンジニアリングの重要性を伝えようと頑張るのは、オススメできない。なぜなら、それを大事にしてくれる別の経営者と仕事をする方が、はるかに簡単で手っ取り早いからだ。 基的に、経営者の考えを転換させるコストは極めて高い。それだけの時間やコスト、能力や忍耐があれば、転職先や別のクライアントを見つける方が簡単だ。そもそも、ある程度は職を選べる能力がなければ、経営者の考えを変えることはおろか、アクセスすることすら難しい。 シンプルに、デザインやエンジニアリングを経営に持ち込みたい人は、そのような経営者と仕事をすべきだ。過去に色々なクライアントで、経営者や社長室、経営企画室、新規事業部の方々とお会いしてきたが、実質的にそれ以外の答えは無いと思う。 経験上、ほとんどの経営層は人的ロジスティクスの硬直化が起きるまで、

    経営者にデザインや技術の大切さをわかってもらうには?|深津 貴之 (fladdict)
  • 高齢者が使うアプリケーションのアクセシビリティデザイン|Goodpatch Blog グッドパッチブログ

    この記事は、とある高齢者がメインターゲットのアプリケーションを制作するに当たって、私がデザインを行うために留意していたアクセシビリティデザインに関するポイントや得た学びをまとめています。 これからアプリケーションデザインを行う際に、アクセシビリティについて参考にしていただければ嬉しいです。 今回アクセシビリティデザインをするために行ったことは以下です。 高齢者がスマホを使いこなせるのかを検証する 色のコントラスト比と余白の確保 色覚異常を考慮したカラー選定 数字を考慮したフォント選定 まずは順を追ってそれぞれのフェーズで何をしたのかについて説明したいと思います。 高齢者がスマホを使いこなせるのかを検証する 今回は高齢者向けのアプリだったため、最初に高齢者がスマートフォンを正確に使えるかを検証する必要がありました。そのため、デザイン性を高めることをあえて我慢しました。なぜならフェーズとして「

    高齢者が使うアプリケーションのアクセシビリティデザイン|Goodpatch Blog グッドパッチブログ