見出し画像

【BONO備忘録③】コンテンツ中心のUI設計 OOUI

しおろ@UIデザイン

現在、UIデザイナーになるためUI/UXのデザインコミュニティ「BONO」で学習を進めているしおろと申します。

※前回の記事


今回の課題

今回はユーザーファーストなUI構造の考え方を身につけるための課題です。
まず自分なりに要件からデザインを作成し、その後に解説動画を見るという流れになります。

「オブジェクト思考」はプログラミングでよく聞きますが、UIの場合だとどのように考えていく必要があるのか…学習していきます！


制作物

1.画面遷移、表示する項目を手書きでメモ

まずは既に用意されていた要件から、UIのイメージをするためにササっとノートに書いてみました。
ちょっとした別のメモも入っていたり、かなり汚いですが…

項目とアクションがごっちゃになってる…


2.行動フローの作成

前回の「ゼロからはじめるUI情報設計」を参考に、行動ケースを作成しました。

メンバーリスト画面の行動フロー


部活リスト画面の行動フロー


3.アクションの整理

こちらも前回の課題を参考に、アクションをNotionで整理しました。
行動フローや要件と行ったり来たりして作業しました。

アクションをテーブル形式で整理


4.UI画面制作

上記を踏まえ画面を作成しました。
今回は情報設計をメインに行うため、配色等行っていないのでビジュアルの部分は適当です。

矢印は画面の遷移を表しています


元々リストと詳細を別ページに分けていましたが、Jiraなどを参考に同一ページVer.も試しに作ってみました。


今回は以下のようなサービス / アプリを参考にしました。

  • YouTube

  • STUDIO

  • Jira

  • Dribble（Pinterestで検索）


学んだこと

1.オブジェクト指向でコンテンツ中心に考える

  • オブジェクト指向の反対はタスク指向

  • 世の中はオブジェクト指向で成り立っている

  • プロトタイプで画面遷移をすることで、何が足りていないかが
    ハッキリする

  • 要件を「行動の流れ」で整理する

  • 主語になっているものがメインのコンテンツになる


2.オブジェクトのプロパティとアクションを洗い出す

  • DBに保存されている値を画面に表示する、という意識

  • 抽出したオブジェクトでユーザー×目的で必要な情報の要素を
    考える


3.アクションの関係性を考えてUIフロー図を作成する

  • トップページにはサービスを訪れる理由になる一番重要な
    コンテンツを置く

  • アクションしたらどういう画面に行って
    結果どんな画面になるのか？を考える

  • プロトタイピングしながら行ったり来たりして整理する


4.目的やユーザー中心でUIパターンを出す

  • どういう情報をどういう優先度で伝えた方がユーザーにとって
    いいのか？を考える

  • 他のデザインを真似するときでも、「優先順位」と「グループ」を
    意識する

    • 情報の構造を盗めるようになると、別のジャンルやテイストの
      UIを見ても参考にできるようになる！

  • どういう情報をどういう優先度で伝えた方がユーザーにとっていいのか？


感想

今回の課題を進めている中で、前職でマネージャーや他の部署に
デザインを伝えるのが大変だったということを思い出しました。
今回出てきた理論の部分をしっかり頭に入れ、目的やユーザー中心で
UIのパターンを出すことを忘れないようにしたいです。


次にすること

次回はいよいよ、今まで学習してきたことを踏まえ
自分で出張申請ソフトをデザインしていきます！

不安もあるけど…やるしかない！




この記事が気に入ったらサポートをしてみませんか？