マンガでわかるHCI: インターフェイスってなに？｜マンガでわかるHCI（ヒューマン・コンピュータ・インタラクション）
インターフェイスってなに？小さい子や、親の世代に、HCI（ヒューマン・コンピュータ・インタラクション）という研究分野のことを話すと、必ず聞かれるのが、「そもそもインターフェイスってなに？」という質問。 たしかに、なんかふわっとして掴み所のない単語ではあります。 マンガでも紹介しているように、インターフェイスという言葉を文字通り訳すと、FaceとFaceの間（inter）という意味になります。 英語のFaceという言葉は、顔という意味以外にも、「面（側面の面）」という意味もあるので、ある意味、なにか「モノとモノとの間」、というイメージです。 ↑ モナカのあんこも、面と面のインターフェイス インターフェイスいろいろインターフェイスと言ってもいろいろあります。 例えば、電話。 電話は、人間と人間の間のコミュニケーションの間を受け持つデバイス、すなわちインターフェイスと言えます。 また、文字や話言
複雑な乗換体験を直感的に！ 乗換案内アプリのデザイン
これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは本人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) | メルカリエンジニアリング
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の 根本 征 です。 私は普段、テスト自動化・CI / CD 改善・その他社内の生産性を上げるための自動化を行っています。 今回は、最近私たちが行なっているメルカリWeb版のUIテスト自動化と、その自動テスト環境についてご紹介したいと思います。 メルカリWeb版のUIテスト自動化について UI自動テスト環境に関する課題 Selenium Grid を Azure Kubernetes Service(AKS) 上で構築する Zaleniumを試す Azure Kubernetes Service(AKS)で受け
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
高齢者が使うアプリケーションのアクセシビリティデザイン｜Goodpatch Blog グッドパッチブログ
この記事は、とある高齢者がメインターゲットのアプリケーションを制作するに当たって、私がデザインを行うために留意していたアクセシビリティデザインに関するポイントや得た学びをまとめています。 これからアプリケーションデザインを行う際に、アクセシビリティについて参考にしていただければ嬉しいです。 今回アクセシビリティデザインをするために行ったことは以下です。 高齢者がスマホを使いこなせるのかを検証する 色のコントラスト比と余白の確保 色覚異常を考慮したカラー選定 数字を考慮したフォント選定 まずは順を追ってそれぞれのフェーズで何をしたのかについて説明したいと思います。 高齢者がスマホを使いこなせるのかを検証する 今回は高齢者向けのアプリだったため、最初に高齢者がスマートフォンを正確に使えるかを検証する必要がありました。そのため、デザイン性を高めることをあえて我慢しました。なぜならフェーズとして「
「5人でユーザテストすればユーザビリティ上の問題のうち85%が見つかる」の元ネタ論文を解説する｜Mikio Kiura / ANKR DESIGN
Webサービスやアプリなど開発や運用に関わっている方であれば、こんなことを耳にしたことがあるのでは無いでしょうか？ 5人でテストを行えば、ユーザビリティ上の問題のうち85%を発見できるこれらは業界的にはある意味で常識ですが、色々話を聞いてみると、この常識の「出処」あるいは「根拠」ってあんまり知られていないようなのです。 もちろん、ちょっと知識のある人であれば、ユーザビリティ業界の第一人者であるヤコブ・ニールセン博士が提唱したというところまでは知識として知っているでしょう。しかしながら、その元ネタとなった論文を実際に読んだ人、あるいは85%という数字の根拠やその条件について理解されている方はどの程度居るのでしょうか。 ということで本記事では「ユーザテストは5人で85%」の元ネタである下記の論文について、解説、と言うとちょっと大げさかもですが、概要を紹介してみたいと思います。願わくば、この記事
デザインの部署をつくるまでにやったこと | GMO MEDIA CREATOR BLOG
日々のWebサイトやアプリの制作を通じて、役に立ちそうな技術情報や楽しい話を発信しています。私たちはGMOメディア株式会社のクリエイターです。 こんにちは！サービスデザイン部の出井です。 好きなものはビールに合うもの！！ ただ最近、ビールに合うものは大概、白いご飯の方が合うことに気づいてしまいました… さて、ユーザーの体験を深く考えてプロダクトに反映させていく、という意味での「デザイン」（ここではUXデザインと呼ばせていただきます）、その価値や考え方が少しずつ一般化し始めています。 （とはいえ社会全体に浸透するには、まだまだ時間がかかるとは思いますが） GMOメディアでは、そんなUXデザインをより力強く推し進める為に、 2018年の4月1日に「サービスデザイン部」という部署が立ち上がりました！！パチパチ88 今回は、そんなデザインの部署を立ち上げるに当たって、やってきたことをクールなトーン
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
Slack新社屋で使われているクラウドサービス達 | ロードバランスすだちくん
シンジです。サンフランシスコで行われたSlack初の開発者向けイベント、SPECに参加してきました。ついでにSlackのオフィスにも突撃してきましたので、どう作られているか見てみました。TOP画像にはビルにSlackのロゴがデカデカと主張していますが、このロゴは訪問日に取り付けられたくらいできたてホヤホヤです。 SPECでは各種発表がありましたが 「ワークスペースの読み込みが早くなる」とか、「インテグレーションの結果が見やすくなる」とか、「UIなんていらねぇ、APIで全てを制御する、UIがないUIこそが最高のUIだ（うるせぇWebUI作れや）」とかまぁ、ほっときゃそのうちアップデート来ていい感じになるので割愛します。 まず大前提として Slackというツールは、チャットツールではありません。Slackをハブとして、数多くのサービスを繋いで利便性を上げるのがミソです。つまり、Slack新社屋
電子カルテのUI／UXを考える その１｜Ken Miyoshi
電子カルテが登場してから随分たつが、残念ながらいまだに素晴らしいものにお目にかかったことはない。特に、日本のメーカーが開発したものは使いやすさまで考慮されているとは言いがたく、UI／UXにも改善の余地がかなりあるように思う。 一般的にPC上でセキュリティのかかったものにログインするためには、利用者IDとパスワードを入力後にエンターすれば開く。電子カルテも同様で、多くのメーカーの場合、利用者IDとパスワードを入力してエンターすればログインできる。 これはＦ社の電子カルテであるが、利用者IDとパスワードを入力後にエンターするだけではカルテの画面にはならず、利用者氏名が表示されるのを待って、さらに「診療業務開始」をクリック（もしくは再度エンター）しなければならない。 診療業務（電子カルテ）以外の業務も選択できるようにするために、このようにしていると思われるが、多くのユーザーは１回のエンターでログ
viron_20180201
CAMはエンタメコンテンツ、ビジネスバラエティメディア、ライフスタイルメディアを主軸に30以上のサービスを展開しています。エンタメコンテンツの分野では、国内外で圧倒的人気を誇るアーティストやアイドルグループとのパートナーシップを結び、オフィシャルファンサイトや動画関連サービスを運営しています。
Atomic DesignからみたBootstrap｜Yoko Nishida
はじめまして。UIデザイナーの@nikoko45です。 最近Webサービスのデザインガイドラインを作っていて、特にコンポーネントをどうまとめたら良いのか模索中です。ユーザーには一貫したUIや世界観を提供でき、開発者にはもっと効率的に作業スピードをあげられる方法はないか考えてみました。 デザインガイドラインで目指したいこと 一貫性のあるデザインを維持するために、デザインファイルのテンプレート作成、コミュニケーションやレビューのコストを少しでも減らすことがゴールなのかなと思っています。（参考：一貫したデザインのためにデザインシステムを運用する方法） 色々記事を読み漁った結果、どうやらデザインガイドラインとしてコンポーネントを整理するにはAtomic Designが役立ちそうということで調べてみました。 Atomic DesignAtomic Designとは インターフェースに含まれる要素を、
デザイナーとアプリエンジニアが仲良く開発できるためのチートシートを作る - Qiita
Classiアドベントカレンダー8日目は、デザイナー@shio312がお送りします。 はじめに あるデザイナーとアプリエンジニアの会話 ・iPhoneナビゲーションバーを差しながら「グロナビが〜」 ・iPhoneで作ったカンプを差しながら「Androidもこの切り替えスイッチのUIで〜」 ・「Androidも下から画面出せばいいじゃん」 ・「トグル？iOSだっけ」 上記デザイナーの発言、全てエンジニアに殺意を沸かせます。ああっ、すみません。 実は、アプリ開発経験のあるUIデザイナーはエンジニアさん&デザイナーさんが仲良く開発できるための、自分なりのチートシートを持っていたりします。 もし、モバイル開発の経験が少ないデザイナーさんと開発することになった場合、今回ご紹介する簡易チートシートの作成方法を優しく教えてみてはいかがでしょうか。 きっと仲良くなれると思います。 手順 デザイナーさんの工
【sketch】TwitterのUIトレースをして気がついた事｜Masaki
初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。 UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。 このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽ですしね。 早速Twitterのプロフィール画面とタイムラインの２画面を、Sketchを用いてトレースしてみました。Sketchを用いたトレースについてはネットで既に多く説明されていたのでつまずく事はありませんでした。 Twitterをトレースして気がついた事 左：元画像 右：トレース 1.フォントについてTwitterにはinstagramなどと同様に、和文には"Hiragino sans"、英文
エンジニアでも知っておきたい実装時のデザインのこと - Qiita
DMM.com #2 Advent Calendar 2017 2日目です！ カレンダーのURLはコチラ DMM.com #1 Advent Calendar 2017 DMM.com #2 Advent Calendar 2017 オンラインサロンというサービスのエンジニアをやっている17新卒の高木です！ 学生時代に、Webデザインやメディア周りのフロントの実装をかじっていたり、 サービスのエンジニアとして、バックエンドのことだけでなく、フロントも書いているので、今までの業務で実際に出会ったこれ大丈夫かなみたいなことを同期との勉強会で発表したので、それを画像と文章にまとめてみました！ こんなふうに仕事を頼まれたら本当にすぐ実装に取りかかれる？ こんなWFを渡されて、実装の依頼をされたらすぐに実装できるか・・・！ 色々なとわからないことがありすぎる タイトル6文字以上になったらどうするんだ
SCOUTER開発者ブログ
2024-09-10 テクノロジア魔法学校の体験談と評判 「テクノロジア魔法学校」というプログラミング教材をご存知ですか？ ホームページの広告などで一度は目にしたことがある人も多いのではないかと思いますが、ディズニーが提供する子供向けのプログラミング教材です。 今回は、この「テクノロジア魔法学校」の体験版を実際に体験してみての感想や、「テクノロジア魔法学校」がどのようなものか、その評判などを見ていきたいと思います。 テクノロジア魔法学校とは 料金 エント […] 2024-09-10 レンタルサーバー「クイッカ」の評判と使い勝手 レンタルサーバーとして有名なサーバーの一つに、「クイッカ」があります。 名前は聞いたことのある人も多いのではないかと思いますが、今回はこの「クイッカ」について、料金やスペック、評判などを見ていきたいと思います。 レンタルサーバー「クイッカ」の基本情報 レンタルサー
GraphQL Fragments are the Best Match for UI Components
To build anything complicated, the one and only truly helpful strategy is to split what needs to be built into smaller parts and then focus on one part at a time. Ideally, those parts should be designed in a way that does not couple them with each other. They should be testable on their own and they should be reusable. The big complicated system should be the result of putting these parts together
『ペルソナ5』のカッコよすぎるUIの制作工程を紹介！ アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】 - ファミ通.com
2017年10月28日、福岡県の九州産業大学にて、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC＋KYUSHU 2017”が開催。本記事では、同カンファレンスにて行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ～ペルソナ5のUI事例～”のリポートをお届けする。 本セッションに登壇したのは、アトラスの和田和久氏と須藤正喜氏。和田氏はデザイナーとして入社後、さまざまな作品に携わり、現在は『ペルソナ』チームを統括しつつ、『ペルソナ3 ダンシング・ムーンナイト』、『ペルソナ5 ダンシング・スターナイト』のプロデューサーを担当している。須藤氏は、アトラス初のUI（ユーザーインターフェース）専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任。各種イベントのデザイン監修やプロモーション、ライツデザイン監修なども行っている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - noflo/noflo-ui: NoFlo Development Environment