UIスタックを意識してWebデザイナーの仕事をちゃんとしようと思った

先日Frontend Weeklyの編集長こと@cssradarさんにお会いする機会があり、過去のFrontend Weeklyでデザイナーとして読むべきエントリーを2つ教えてもらいました。そのうちの1つがHow to fix a bad user interfaceなのですが、これはPOSTDにも翻訳がでてこちらで読みました。

インターフェイスの5つの状態


UIスタック

UIスタック、テクスチャ貼ったらバーガーぽくなってしまった

  • Ideal State(理想ステート)
  • Empty State(エンプティステート)
  • Error State(エラーステート)
  • Partial State(パーシャルステート)
  • Loading State(ロードステート)

内容はUIスタックと呼ばれるこの5つの状態をデザイナーはちゃんとデザインしましょうという話です。それぞれの状態について詳しく説明されています。例えば理想ステートとはそのページにきちんと情報がでていている状態で、私自身ほとんどの場面においてこの理想ステートの状態しかデザインカンプを作ってないと反省しました。

エンプティステートは情報が何も入っていない状態ですが、はじめてのユーザーに使い方を促すUIや、ユーザーがタスクを消化して空にした時、検索結果が0件の時など、空といってもおおむね3パターンあることを解説してくれています。エラーステートは文字通りエラー画面。パーシャルステートはデータが1行しか入っていなど理想ステートに至っていない状態です。これらについてもデザインする意識をもたないといけないなと思います。

ロードステートはローディング画面。ローディングと出現の演出はデザイナーに求められるスキルのポイントになりそうに感じています。記事では、スケルトンスクリーンについて紹介されていましたが、スケルトンスクリーンはFacebookやPinterestで目にはしていたのですが、実装をトライしてみようと思っていなかったのでどこかでやってみたいです。

Webデザイナーの仕事

Webデザイナーの仕事ってなんだろうなと考えた時に、Webの仕組みを理解してインターフェイスをきちんと設計できることなのかなとこの記事を読んであらためて思いました。Webデザイナーと一言でいってもいろいろなスキルを持った人がいると思いますが、私自身はグラフィックデザイナーほど絵が描けるわけでもないですし、エンジニアほどプログラムが書けるわけでもないので、制作しているプロダクトの仕組みを理解してインターフェイスをきちんと設計できるように、今行っているプロジェクトではローディングやページ遷移、アニメーションを少し意識して作ってみようと思いました。


関連エントリー

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。