Interfaces are becoming less dense. I’m usually one to be skeptical of nostalgia and “we liked it that way” bias, but comparing websites and applications of 2024 to their 2000s-era counterparts, the spreading out of software is hard to ignore. To explain this trend, and suggest how we might regain density, I started by asking what, exactly, UI density is. It’s not just the way an interface looks a
Design tokens are design decisions as data and serve as a single source of truth for design and engineering. Utilizing deployment pipelines, they enable automated code generation across platforms, allowing for faster updates and improved consistency in design. Organizing tokens in layers—progressing from available options to tokens that capture how they are applied—ensures scalability and a better
<Layout config={{useWebDefaults: false}}> <Node style={{width: 250, height: 475, padding: 10}}> <Node style={{flex: 1, rowGap: 10}}> <Node style={{height: 60}} /> <Node style={{flex: 1, marginInline: 10}} /> <Node style={{flex: 2, marginInline: 10}} /> <Node style={{ position: "absolute", width: "100%", bottom: 0, height: 64, flexDirection: "row", alignItems: "center", justifyContent: "space-aroun
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
アーキテクチャ（Architecture）とは一般には建築や建築学を指しますが、コンピューターの世界ではあるシステムの概念や設計思想を「アーキテクチャ」という言葉で分類することがあります。中でもソフトウェアの領域では実装モデルの設計指針や分類、コンポーネントの相互関係、ソフトウェアの構築方法などを定めた一連の構造をそう呼ぶことがあります。 アーキテクト（Architect）とは建築家や（建築）設計士、技術者といった職種を指しますが、コンピューターの世界では「アーキテクト（仕組士）: システムのアーキテクチャを設計する責任がある、人、チーム、あるいは組織」（IEEE 1471）と規定されます。要するに、システムの構造設計に関して責任を持つ役割です。「構造設計の指針を示し、実行する人」と言った方がわかりやすいでしょうか。 このような、構造設計やそれを担う設計士の役割は、当然のようにUIデザイン
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す
WEB+DB PRESS Vol.107掲載のオブジェクトベース設計によるUIデザイン改善を読んだ。デジタルなサービスのUIを設計していく上で、とても参考になる知見なのでまとめてみる。 オブジェクトベースUI設計とはユーザーがやること（タスク）の手順をそのまま画面に反映させるのではなく、ユーザーの関心対象（オブジェクト）を画面とデータに対応させながら考えていく手法。 オブジェクトベースUI設計の良いところこのオブジェクトベースUI設計は、特に複雑なタスク＆要求が混在する業務利用アプリケーション（SaaS / B向けサービス）のUIデザイン改善、運用で活かしやすいという印象を受けた。 大規模なシステム、膨大なデータと連携しながら、多様なユーザーニーズに応えやすいUIを実現するにはどうすれば良いか。 要件に散在する情報をオブジェクトとして捉えることで、その場しのぎではないUIデザインが作りやす
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
こんにちは、スワンです( 'ω') noteではしばらくご無沙汰してたのですが、今回激戦を極めた「UI Crunch #13 娯楽のUI」に奇跡的にnoteレポート枠で受かったので、花金に早々に仕事を切り上げてご機嫌でイベントに行ってきました。 噂によると倍率40倍近くだったそうで「全盛期の東京芸術大学の受験倍率かよ」って突っ込みたくなりました（笑）ありがたい機会をゲットしたとともにいけなかった方々にこの興奮を還元するべくゴリっとイベントレポートをまとめてみようと思います。 前がき私事ですが、ちょうどこの春で働く環境が変わり、株式会社メルペイでデザイナーとして働くことになりました。社会人になって初めての、自分を取り巻く「場所」や「人」が大きく変わる体験。そしたら、まだ働き始めて本当に間もないのだけど「場所が変わるとこんなにも入ってくる情報の種類が変わってくるんだな〜」という予想外の驚きが
Marcin Wichary @mwichary First keyboard I interacted with in Japan was already kind of amazing. Mechanical numeric keypad in an ATM! pic.twitter.com/U0bnG3rWui 2018-02-01 16:43:32 Marcin Wichary @mwichary Things that surprised/amazed me about Japan, an ongoing thread. (More likely UI than food, but you know this already.) It’s my first time here. Please comment away and/or point out my cultural in
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く