ユーザインタフェース設計
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
フロントエンドエンジニアが UI 設計〜実装で考えていること | MEDLEY Developer Portal
2019-03-27フロントエンドエンジニアが UI 設計〜実装で考えていることおはこんばんちは、開発本部エンジニアの大岡です。 先日、TechLunch という社内勉強会で「フロントエンジニアが UI 設計〜実装で考えていること」という内容で発表しました。UI 設計から実装の細かい話ではなくどういう気持ちで望んでるかという話で、基本的なことしか書いていませんが紹介させていただければと思います。 UI 設計UI 設計をデザイナーがして、それをエンジニアが実装する場合とエンジニアが単独で UI 設計から実装までする場合があります。今回はそれぞれのケースで、フロントエンドエンジニアがどういうことを考えてるかを紹介します。 とその前に、他人と UI について話すときに気をつけてる言葉で分かりやすくまとまっているツイートがあったので紹介します。 自分が他の人に UI デザインの説明をするとき、あま
ユーザーインタフェース設計で意識したいデザインの考え方｜はのめぐみ
こんにちは！はのめぐみです。キッチハイクというサービスでプロダクトデザイナをしています。 2月にデザイン戦略部メンバーで社内勉強会を行い、アプリケーションのデザイン原則についてレクチャーをしました。この note ではその内容を紹介していきます🙌 勉強会のゴールは「足並みを揃える」ことキッチハイクのデザイン戦略部は、コアスキルや得意分野が違うメンバーが集まっています。バランスがとれたメンバー構成である一方、UI や Figma の知識、ルール感覚はチーム内でバラバラです。UI デザインをコアスキルとしているのは私1人というのもあり、みんなの足並みを揃えたいと思っていました。 知識がないと、どう調べればいいかすらわからないこともあります。自分が「当たり前だ」「常識だ」と思っているものも、専門外の人にとってはピンと来ないときも多いと思います。 そこで、デザインの当たり前をチームの当たり前にす
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
ユーザーインターフェイスにおける5つのステート - Runner in the High
元ネタはこれ scotthurff.com Webアプリケーションを作ったことがある人ならわかる話だが、アプリケーションは確実に予想外の状況に晒される。サーバーはレスポンスを返すのに時間がかかるし、ユーザーの環境がメモリ1G以下のこともあれば、完全に想定外の使いかたをするユーザーもいる。デザイナはそれらの現実に起こりうる可能性を全て考慮に入れてデザインをする必要がある。 2004年にBasecamp（当時は37signals）はThe Three State Solutionという提案をしていて、その内容は「全ての画面設計は3つのステート（Regular, Blank, Error）を考慮するべきだ」というものだった。その当時はまだAjax黎明期だったし、もちろんスマートフォンも存在していなかった。けれども、新しいテクノロジーが生まれるにつれて、インターネットを利用する環境は恐ろしく多様に
宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む（ビジネスロジックの変更や追加に対
個人開発のUI設計術 - Crieit
あんど( @ampersand_xyz )と申します。 クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。 個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。 なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。 1.画面サイズの最大・最小幅を最初に決めておく まずはじめにここを決めます。 いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を
UI/UX設計の教科書、About Face 3輪講の資料を公開します - ninjinkun's diary
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
