タグ

uxに関するko-ya-maのブックマーク (103)

  • 黒須教授のUser Engineering Lecture 成熟度の水準に対応した人間中心設計の進め方

    先日のヒューマンインタフェース学会で、このタイトルの講習会を開催したところ、多数の参加者を得ることができ、また熱心な質疑応答があった。やはり日におけるユーザビリティ活動は、第一段階の立ち上げ期を経て、第二段階に入ったのだ、と実感させられた。そこで、その時の発表内容の概要をここで紹介することにする。 なお、当日の講演は、 人間中心設計の水準とドメイン特有、および業界構造に適合したアプローチのあり方 黒須 正明(独立行政法人メディア教育開発センター) 成熟度に関する考え方 堀部 保弘(三菱総合研究所) 水準に対応した取り組み方について 鱗原 晴彦(U’eyes Design) ドメインに対応した取り組み方について 小川 俊二(カイデザイン) だった。ここでは私の講演内容を紹介する。 まず、こういうテーマの講習会を開催するに至った経緯を説明した。10年前は皆同じだった、という見出しで、ISO1

    黒須教授のUser Engineering Lecture 成熟度の水準に対応した人間中心設計の進め方
  • ユーザインタフェース設計

    Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース(Graphical User Interface; GUI)アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は(とくに国内では)必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー

    ユーザインタフェース設計
    ko-ya-ma
    ko-ya-ma 2021/04/12
  • 行動科学でユーザーの最適なメンタルモデルをつくる

    KristenはIrrational Labsの共同創業者であり、Googleの行動経済学グループの立ち上げメンバーの1人です。 顧客との関係の中で、顧客があなたのプロダクトをいろいろ探究し、使うモチベーションが高いのは初日をおいて他はありません。 なぜでしょうか? 理由その1:衝動。初日において顧客は何らかの理由であなたのプロダクトをダウンロードし、使い始めるという動きを起こします。2日目にになってから、彼らはなぜそれを重要と考えたのか、なにが重要だと考えたのかを思い返すのです。 理由その2:サンクコスト。初日において、登録には少し時間を使いますから、顧客はその時間が無駄ではなかったと思いたがります。他のアプリを探したり、新しいオモチャが出ていないかチェックするほうが良かったと思いたくないのです。2日目には、あなたは顧客がしたことが他のどのようなものよりも意味があったと証明する必要があり

    行動科学でユーザーの最適なメンタルモデルをつくる
    ko-ya-ma
    ko-ya-ma 2021/01/07
  • UX-mov | アプリのUIが動画で見れるギャラリーサイト

    UX-movは様々なアプリのUIを動画で集めたギャラリーサイトです。

    UX-mov | アプリのUIが動画で見れるギャラリーサイト
    ko-ya-ma
    ko-ya-ma 2020/11/27
  • 画面をデザインするということ - Qiita

    この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている1エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 (実際にUX5段階モデルを意識して仕事してるわけではありませんが、何かしら

    画面をデザインするということ - Qiita
    ko-ya-ma
    ko-ya-ma 2020/09/16
  • 無料&スクリプトひとつでウェブサイトに「視点の追跡機能」を実装できる「WebGazer.js」レビュー

    ウェブサイトを作成する際、文字やリンク、画像といったコンテンツの配置を決めるには、閲覧者がどのような「視点移動」を行っているかという情報があると便利です。無料のオープンソースソフトウェア「WebGazer.js」を使うと、スクリプトひとつで自身のウェブサイトに視点移動の追跡機能を実装することができます。 WebGazer.js: Democratizing Webcam Eye Tracking on the Browser https://webgazer.cs.brown.edu/# WebGazer.jsを使用している様子は、以下のムービーを見るとよくわかります。 WebGazer.js: Scalable Webcam EyeTracking Using User Interactions - YouTube まずはWgetコマンドを利用して「webgazer.js」ファイルをダウ

    無料&スクリプトひとつでウェブサイトに「視点の追跡機能」を実装できる「WebGazer.js」レビュー
  • 『Fortnite』開発者が語るゲームのUXデザイン 人間の脳の“制約”を見抜く

    2020年3月28日、NPO法人国際ゲーム開発者協会日(IGDA日)主催の特別ウェビナー「『Fortnite』のユーザーエクスペリエンス」が開かれました。講演者は、世界的ヒットゲーム『Fortnite』のUXディレクターで、書籍『ゲーマーズブレイン UXと神経科学におけるゲームデザインの原則』の著者としても知られるセリア・ホデント氏。自身が携わった『Fortnite』開発時の事例を中心に、ゲームUXデザインや人間の脳のしくみについて解説しました。 ※この記事はIGDA日に許可をいただき、ログミーTechが独自に編集したものです。内容についての責任は弊メディアにあります。 『Fortnite』におけるUX設計を語る セリア・ホデント氏:日はみなさんとこういうかたちでお話しすることができて、大変うれしく思います。ただ、当であれば東京でみなさんと直接お会いしながらできるはずだったのが

    『Fortnite』開発者が語るゲームのUXデザイン 人間の脳の“制約”を見抜く
    ko-ya-ma
    ko-ya-ma 2020/06/02
  • Web Vitals  |  Articles  |  web.dev

    Web Vitals Stay organized with collections Save and categorize content based on your preferences. Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve. Overview Web Vitals is an initiative by Google

    Web Vitals  |  Articles  |  web.dev
  • ProtoPieで作る本格プロトタイプ作品7選!|UI/UXデザイナー うっくん

    Figmaに関するnoteと比べて反響が弱かったので、今回は少し違ったアプローチでnoteを書いてみようと思います。 Figmaと比べて利用人口が少ない上に、ツールの特性上、Figmaより流行る可能性はほぼ0なので、ProtoPieの使い方を説明するより「こんなことできるんだぜ」っていう内容の方が良いのではと思いました。 分かった。Figmaで絶対作れない(or クッソめんどい)ようなプロトタイプ作品集みたいなのをnoteに書くわ。ProtoPie、そもそも使ってる人少ないので、使い方説明するより「こんなのできるぜ」の方が需要ある。 — うっくん@早寝早起き (@HIRO_YUKI_) March 15, 2020 と、ツイートすると結構いいねももらえたので、確かに需要ありそう。 それでは1つ目から。 1. スワイプ・タップできる3タブUIAndroidなどでよく見るUIパターン。ナビゲー

    ProtoPieで作る本格プロトタイプ作品7選!|UI/UXデザイナー うっくん
  • UXデザインが大事なのはわかるけど�エンジニアの私ができることってなんでしょう?�

    2020年2月13日Developers Summit 2020にて講演。 https://event.shoeisha.jp/devsumi/20200213/session/2367/ 当日のtwitter https://togetter.com/li/1467911Read less

    UXデザインが大事なのはわかるけど�エンジニアの私ができることってなんでしょう?�
    ko-ya-ma
    ko-ya-ma 2020/02/14
  • 企画を元にゲームのUIを作るときの流れ|tkm

    「Game Graphic Design Advent Calendar 2019」の初日の記事です。 ゲーム制作に関する素敵な記事がたくさん公開されると思いますので、私自身もワクワクしてます。 言い出しっぺとして、初日としてまず何を書こうかなと思ってたんですが、以前Twitterでチラッとつぶやいた「普段ゲームUIを作るときってどういう工程があって、どういう流れで作っているか」をまとめてみたいと思います。 というのも、いろいろな方から「何から手を付けていいのか…」「デザインが上手くまとまらない」「デザイナーが社内外注みたいになってしまって…」みたいな話をよく聞きまして。 そのアンサーになるかは分かりませんが、自分の場合はこういうフローで、こういうことを意識してますよ。というのを書いてみたいと思います。 もちろん組織や人によってやり方は様々だと思いますので、こんな風にやってる人もいるんだ、

    企画を元にゲームのUIを作るときの流れ|tkm
    ko-ya-ma
    ko-ya-ma 2019/12/03
    チームを巻き込むデザインプロセスの話
  • 【2019年版】UIとUXデザイントレンド - baby-degu - Medium

    Scenery Illustration by J.HUAこちらの記事は、2018年12月に公開された『 2019 UI and UX Design Trends 』の和訳になります。 はじめに私たちは去年、モバイルUIデザインのトレンドについての予測をまとめました。今年はモバイルだけを対象とせずに、さらに深く掘り下げていきます。 モダンなデザインの一番のトレンドは前後関係のあるつながりの中にあります。そのため、一般化することができません。 この記事を読むことであらゆるツール、技術の進歩、またユーザー向けのプロダクトが実際にどのように機能なのか開発者が理解し、全てが上手くいくように感じるでしょう。 近いうちに、販売だけでなく、生産するものすべてを網羅するユニバーサルデザインの考え方を発展させて行くでしょう。自分で何か物事を行うためには、より良いデザインの選択が必要です。 国家としての印象さ

    【2019年版】UIとUXデザイントレンド - baby-degu - Medium
    ko-ya-ma
    ko-ya-ma 2019/10/09
  • Deceptive Patterns (aka Dark Patterns) - spreading awareness since 2010

    Deceptive patterns (also known as “dark patterns”) are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something. For example:

    Deceptive Patterns (aka Dark Patterns) - spreading awareness since 2010
    ko-ya-ma
    ko-ya-ma 2019/09/03
    アンチパターンというか邪悪パターンというか、そういうもの。わりと有名どころの事例で固めている
  • UIデザインにおけるインターフェイスアーキテクトの役割|Goodpatch Blog グッドパッチブログ

    アーキテクチャ(Architecture)とは一般には建築や建築学を指しますが、コンピューターの世界ではあるシステムの概念や設計思想を「アーキテクチャ」という言葉で分類することがあります。中でもソフトウェアの領域では実装モデルの設計指針や分類、コンポーネントの相互関係、ソフトウェアの構築方法などを定めた一連の構造をそう呼ぶことがあります。 アーキテクト(Architect)とは建築家や(建築)設計士、技術者といった職種を指しますが、コンピューターの世界では「アーキテクト(仕組士): システムのアーキテクチャを設計する責任がある、人、チーム、あるいは組織」(IEEE 1471)と規定されます。要するに、システムの構造設計に関して責任を持つ役割です。「構造設計の指針を示し、実行する人」と言った方がわかりやすいでしょうか。 このような、構造設計やそれを担う設計士の役割は、当然のようにUIデザイン

    UIデザインにおけるインターフェイスアーキテクトの役割|Goodpatch Blog グッドパッチブログ
  • ソシオメディア | OOUI – オブジェクトベースのUIモデリング

    最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験(Object-Oriented User Experience)のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI(オブジェクト指向ユーザーインターフェース)」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基的なテクニック

    ソシオメディア | OOUI – オブジェクトベースのUIモデリング
    ko-ya-ma
    ko-ya-ma 2018/12/26
    GUIはオブジェクトベースで設計しようよというお話。名刺→動詞形式。写真を選ばせてから処理内容を選ばせるとか
  • ユーザーの声に振り回されないデザインの改善プロセス|dely design

    This domain may be for sale!

    ユーザーの声に振り回されないデザインの改善プロセス|dely design
    ko-ya-ma
    ko-ya-ma 2018/12/09
  • 心地よいUX/DXを提供するための小さなコンポーネント - スタディサプリ Product Team Blog

    こんにちは、Webエンジニアチームの@sat0yuです。 これまで弊社のイベント報告系記事しか書いてこなかったのですが、今日はすこし技術寄りの話をします。 現在私達のチームでは、生徒向け学習サービス(日ではスタディサプリ、 海外ではQuipper Videoの名称で提供)のリニューアルプロジェクトを担当しています。 リニューアルバージョンのリリースは以下のとおり計画されており、すでに合格特訓コースのユーザには提供を開始しています。 2018夏: スタディサプリ合格特訓コースユーザ 2019春: スタディサプリの全ユーザ 2019春〜夏: Quipper Videoの全ユーザ 投稿では、リニューアルプロジェクトの中で生まれた、小さいけれども非常に便利な状態遷移管理コンポーネントの紹介をします。 TL; DR 心地よいUXを表現するために5つの状態遷移を考える必要がある 状態遷移を簡単に実

    ko-ya-ma
    ko-ya-ma 2018/12/05
    > 5つの状態遷移を考える必要がある
  • 「高齢者UIプロトタイプ検証の学び」についての重要ポイントと質問の回答|敷地 琢也/エンジニア Ubie|note

    こんにちは。Ubieエンジニアの敷地(@shikichee)です。 11/16 (金)に、s-dev talks 〜サービス開発勉強会〜 #5 「プロトタイピング」が開催されたのですが、20分の枠で登壇してきました。 AI医療系スタートアップのUbieにて、目的なきプロトタイプの失敗事例と、課題発見のために何をしたか、高齢者向けデザインの知見について話しました。 この記事では、当日話せなかった重要ポイントや皆様の反応からいくつかご回答します! 目次 1:初期プロトタイプテストで失敗した原因 2:なぜ使われるプロダクトへと進化できたのか? 3:高齢者向けUIの着想はどこから来たのか 4:発表で話せなかった高齢者デザインの気づき 5:質疑応答、 懇親会、 twitterより補足 6:まとめと登壇してみた感想1:初期プロトタイプテストで失敗した原因 最初に、エンジニアAdobeXDで44枚の画

    「高齢者UIプロトタイプ検証の学び」についての重要ポイントと質問の回答|敷地 琢也/エンジニア Ubie|note
    ko-ya-ma
    ko-ya-ma 2018/11/19
  • アニメーションを使った効果的なモバイルなトランジション例

    アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ

    アニメーションを使った効果的なモバイルなトランジション例
    ko-ya-ma
    ko-ya-ma 2018/11/15
  • ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い

    この他に macOSChrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま

    ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
    ko-ya-ma
    ko-ya-ma 2018/10/26
    「おわりに」まで読みたい記事