デザインとエンジニアリングの両側面から考えるユーザー体験
概要
2024年11月14日開催の Spectrum Tokyo Meetup #15 の英語登壇を、日本語でまとめたものです。一部内容や画像修正しています。
デザインとエンジニアリングの橋渡しを担う「デザインテクノロジスト」という職能で、kintoneのデザインシステムの開発運用に携わっています。
その知見を生かして、デザインとエンジニアリングが交わる領域だからこそできる、よりよいユーザー体験を提供するアプローチとその一例についてご紹介します。
登壇資料
私はサイボウズ株式会社で、自社プロダクトである「kintone」のデザインシステムの開発運用をしています。 デザインテクノロジストとして、フロントエンドとデザインとを横断しながらユーザー体験を追求しています。
今回最も伝えたいことは「デザインとエンジニアリングの垣根を越えて、最高のユーザー体験を提供しよう！」ということです。
これは私自身の意見ですが、すべてのプロダクトデザイナーが実装知識が必須だとは考えていません。一方で、デザインとエンジニアリングの両方を理解することでより優れたユーザー体験を提供可能になるとも考えています
もちろん、デザインもエンジニアリングも一日で習得できるものではありません。しかし、この両方を理解することにより、
エンジニアやプロダクトマネージャーなどの異なる職種間とのコミュニケーションが円滑になる
デザイン候補のうちアンチパターンを回避しやすくなる
様々な角度から懸念点を考慮した確度高い提案ができる
といった大きな恩恵があります。そして結果的に、仕事を効率的に進めることができるといったような、技術的な腕っぷしだけでなくソフトスキル面でも明確な利点もあります。
今回はデザインとエンジニアリングが交わる領域を押さえる上で重要な、「状態管理（State Management）」にフォーカスしてみましょう。
たとえば、「ローディング・成功・エラー」といった、状態における視覚的フィードバックをユーザーに逐次提供することで、ユーザーはインターフェースを通して「いまなにが起こっているか？」の動作を理解しやすくなります。
登壇時間の都合上「UI Stack」についてこの記事内では軽くご紹介します。
UI Stackとは、Scott Hurff氏が提唱した「UIの考慮すべき5つの状態」という考え方です。デザイン設計においてIdeal State（理想状態）のほかに、Blank（空状態）・Loading（待機状態）・Partial（部分的状態）・Error（エラー状態）も考慮することで、実装フレンドリーな設計ができます。
具体的に、ローディング画面を例に見てみましょう。
なんらかの操作をしたあとにデータ更新まで時間がかかると、長ければ長いほど多くのユーザーは苛立ちを感じるはずです。
技術的にはこれを解決する手段がいくつかあり、その一例としてOptimistic Updateは、APIレスポンス（データ更新）を待たずに結果を一旦表示します。そして失敗した場合はロールバックをするという方法です。
ただし、ユーザー体験も同時に考慮する余地があります。
失敗時にはエラーメッセージを表示するなど適切な設計が必要ですし、ちらつきが発生することもあるので、ここでユーザー体験を損ねないようにするデザインの視点がとても重要になります。
では、デザインの観点からローディングを設計してみます。
もしノーガードだと、ユーザーは待機中にずっと真っ白な画面、つまり「ブランクスクリーン」を見続けることになるでしょう。
これでは、再び操作可能になるまで何秒かかるか分かりませんし、正しくデータ取得がされているか不安になり、離脱やリロードといった予期せぬ行動を招く原因にもなります。
そこでYouTubeを例に、待機画面について好ましいデザインを考えてみましょう。
アプリ起動時にサービスのロゴマークを見ることは少なくないと思います（例：Netflix, Discord, LinkedIn, Slack, Xなど）。これは「スプラッシュスクリーン」といって、立ち上げ中にユーザーを不安にさせない設計になっています。
そしてデータを取得しているときは、読み込み中であることを伝える「スケルトンスクリーン」が実装されていることがあります。
ただし、グレーのボックスだけだと動きがわからず、適切に処理されているか不安になるので、リッチにシマー効果をつけるなケースも見受けられます。
もしくは、待ち時間がある画面ではスピナーやプログレスバーといった画面設計をすることで、ユーザーに読み込みの長さを感じにくくさせながら、データを取得することができるでしょう。
ここからはまとめになります。
デザインとエンジニアリングの両側面を知っていることで、提供できるユーザー体験があるという話でした。
これから自分の専門領域を広げて学んでいきたいという方の参考になれば幸いですし、私自身もこれからもデザインとエンジニアリングの狭間で研鑽を続けていけたらと思います！
あとがき
2年前に「エンジニアに喜ばれるUIデザイナーとは？」という記事を書いていました。
スライドでも書きましたが、個人的にはすべてのプロダクトデザイナーが実装知識が必須だとは考えていません。多くの企業では、組織構造的に細分化して、デザイナーとエンジニアとのコミュニケーションを大事にしていています。弊社の場合はそこの間にデザインテクノロジストが立って橋渡しをしています。
一方で、私はデザインもエンジニアリングも含めた開発に一貫して関われるようになりたいという想いを、ずっと変わらずに持っています。
その想いを実現すべくデザインテクノロジストとして歩みを進め、Webの知識やアクセシビリティなどを学んでいくことで、私が軸足とするデザイン領域の見え方が少しずつ変わってきたように感じています。
今回の登壇において、デザインもエンジニアリングも領域横断して追求するユーザー体験の高め方について、少しでも伝わっていたら幸いです。