自分なりにまとめてみた。けっこう抽象的な内容。
自然な流れにする
まず自然とはなにかということを考えると
- 流行のUI・UXと同じ（あるいは模した）構造になっているか
- アニメーションイージングなどで自然現象（摩擦や反動など）が考慮されているか
- 文脈が正しいかどうか（突拍子のないプロセスとなっていないか）
- サイト全体の文脈に逆らっていないか（同じUIで実現可能なのに例外を作っていないか。UIが統一されているかどうか）
など一般論や自然現象が成立しているかどうかである。
すべて重要な要素だが、特にアニメーションイージングの自然現象の考慮は後回しになりがちである。
マイクロインタラクションの領域でもあるのだが、僕が特に意識しているのがヘッダーメニューやフッターメニュー。
コーポレートサイトの場合にはすべてのページで同じヘッダーフッターを採用することになると思うのだが、サイト回遊でメインで利用されるリンクが集まっており、一番ユーザーが操作する領域である。
そのため、個人的にはヘッダーフッターでサイトの使いやすさの5割が決まるといっても過言でないと思っており、ヘッダーフッターメニューが快適に操作できないサイトはUI・UXが優れていないと断定できると思う。
考えるべきことを減らす
システム設計についても言えることだが、複雑な方程式は好かれない。
理解や操作が容易であることが大前提である。
具体的な判断材料は下記。
- ユーザーの選択肢を（機能性を失わず可能な限り）少なくすること
- 目標に至るまでのユーザーの操作手順を少なくすること
- 操作手順を言語で簡単に示せること（言葉で説明しにくいものはUIが難しいことと同義）
スピードは命
UI反応速度、ページの表示速度はUXに直結する。
エンジニアの力量ではカバーできない領域もあり、デザイナー自身でも意識しなければいけない。
具体的な意識としては、
- レイアウトを頑張らない（複雑なレイアウト、多種のレイアウトを作らず、設置する画像に注力する）
- コンポーネントの種類・サイズを限定する（シンプルなコンポーネントの組み合わせでデザインする。Atomic Designを意識）
両者ともに言えるが、要するにシンプルなデザインにするということだ。
シンプルにすることによって、いくつかのメリットがある。
- CSSの軽量化・最適化（＝表示速度の向上）
- 保守性の向上
- CSSコーディング時間の削減
- CMSの場合、エディトリアルの単純化（テンプレートファイルの削減）
- サイト全体のデザインの統一性の担保
特に2と3が大きい。
保守性が高くなることで、改修などでのCSSファイルの肥大化を減少させてくれる。
またフロントエンドエンジニアのリソースが少ない組織の場合、今のフロントエンドはJavaScriptに注力すべきであり、CSSコーディングになかなか力が入れられないため、この手間が軽減されることでエンジニアの評価はだだ上がりすること間違いなしである。
シンプルなデザインでも、よくあるスクロールに応じたアニメーションなどをつけたりなどすることで、複雑なレイアウトよりも効果的だったりするので、余った時間をそちらのリソースに割く方針のほうがなにかと都合がいいと思う。
適正なサイズ感覚を身につける
かっこ良さを追求するとコンポーネントサイズやフォントサイズを小さくするデザイナーがいたりするが、そういったことはUIにとって大抵悪影響である。
実際のブラウザ表示サイズで確認し、半目にして見えづらい状況で確認したり、遠くからみてみたりして、視認・操作がしやすいサイズかを検証してほしい。
余談だがデザイン学部時代、英語での表記を多様する学生がいて、見兼ねた先生がそいつに英語を使わずデザインするよう指示していた。
どうしようもなくデザインしようがない場合には、そういった小手先のテクに走ってしまうのも仕方がないが、それほど切羽詰まっていない場合には控えてもらうようデザイナーに伝えたいのがエンジニアとしての本音である。