Vol.486

Designing for clarity: How we restructured Intercom’s information architecture Jump to heading #

明確さのためのデザイン：インターコムの情報アーキテクチャ再構築 Jump to heading #

​Intercomは、ユーザーが機能を見つけやすくするため、アプリの情報アーキテクチャを再設計した。 以前のナビゲーションは製品の成長に伴い複雑化し、特に新規ユーザーにとって主要機能の探索が困難だった。 再設計の目標は、ユーザーが必要な機能に迅速かつ容易にアクセスできるようにし、将来のAI機能や新機能の追加に柔軟に対応できる構造を構築すること。 ユーザー調査、情報のグルーピング、プロトタイピングとテストを通じて、新しいナビゲーション構造を作成し、ユーザーエクスペリエンスの向上させた。​

Designing for generative AI experiences Jump to heading #

生成AI体験のデザイン Jump to heading #

生成AIを活用したユーザー体験の設計方法と、そのデザインプロセスに関する洞察を提供している。

Foundations: grouping forms with <fieldset> and <legend> Jump to heading #

フォームのグループ化：fieldsetとlegendの活用 Jump to heading #

HTMLの<fieldset>と<legend>要素を使用してフォームを効果的にグループ化し、アクセシビリティとユーザビリティを向上させる方法を解説している。

Revisiting CSS Multi-Column Layout Jump to heading #

CSSのマルチカラムレイアウト機能を再検討し、最新のブラウザサポートや実装例を紹介している。

Ivory Tower Architect Jump to heading #

ソフトウェア開発における「アイボリータワーのアーキテクト」の問題点と、その解決策について考察している。

In Brief Jump to heading #

• New capabilities for attr(): CSSのattr()関数の新しい機能と、その活用方法を紹介している

• Container Queries Unleashed: コンテナクエリを活用した新しいデザインパターンと、その実装方法を解説している

• Refactoring with Codemods to Automate API Changes: Codemodsを利用して大規模なAPI変更を自動化し、コード品質を維持する方法を探っている

• https://scottjehl.com//posts/q-r/: HTMLとJavaScriptを組み合わせてQRコードを生成するウェブコンポーネントの作成方法を紹介している

• https://www.builder.io/blog/view-transitions: JavaScriptのアニメーションをビュートランジションAPIで代替し、パフォーマンスとユーザーエクスペリエンスを向上させる方法を解説している