この記事の目的

以前Power Appsを使って1つアプリを作りました。
私の職場における、無料での本貸し出しを管理するアプリです。

本貸し出しアプリの作り方（Power Apps, Power Automate）について、記事として投稿しておりますので、良ければ是非こちらもご覧ください！

この時に作ったアプリなのですが、下の画像の通り、操作画面であるUI（ユーザー・インターフェース）が非常にシンプルで、あまり良いものではありませんでした。

悪いUIからは、悪いUX（ユーザー・エクスペリエンス）しか生まれません。
今回は「アプリを "直感的" に使ってもらうためにはどうすればよいか」という視点の下、このアプリのUIを改善し、UXの向上を図ります！

アプリの概要

まずこの記事で扱うアプリ「本貸し出しアプリ」がどういうものかを簡単に説明します。

このアプリでは、職場における無料での本貸し出しについて、その本の情報を調べたり、貸し出し状況などをアプリからいつでも確認及び更新したりできます。

使い方としては以下の通りです。

自分が借りたいと思った本を本一覧から探す。
本一覧に表示されている本について、「貸出可能な本のみ表示」というボタンを押すことで、まだ他の人に貸し出されていない本のみを表示して、その中から探す。
借りようとしている本について、「借りる」ボタンを押して本の貸し出し状況を更新する。
返そうとしている本について、「返却する」ボタンを押して本の貸し出し状況を更新する。

アプリ自体はPower Appsを使って作成しました。
今回のアプリUI改善には直接関係はありませんが、このアプリに付随して「借りた本の返却日（仮の設定として、借りた日から1週間後）当日になると、借りたユーザーのOutlookに返却を促す通知メールが届く」というフローをPower Automateで作っています。（上記の記事参照）

こちらのアプリ、実は画面内に追加したコントロール（アプリを構成するオブジェクト）に対して最低限のカスタマイズしか行わなかったため、全体のUIデザインとしてはかなり貧相なものになっています。

この貧相なUIをもっと使いやすいように改良していきます。
続いては、「直感的な操作を促すUI」というテーマの下、良いUI/UXに必要な要素とは何かを考えていきます。

UI/UXの向上に必要な要素

ユーザー側に直感的な操作をしてもらうためには、以下の2つのポイントを押さえるべきだと思っています。

必要な情報が揃っている
短い時間で理解できる

必要な情報が揃っている

見た目を整理させようとするあまり、文字による説明やボタンをどんどん削っていってしまうと、そもそもアプリとしての有用性が失われてしまいます。
ユーザーが知りたいと思う情報は、略さずきちんと記載しておくことが重要です。

短い時間で理解できる

画面内の文字やボタンなどの情報が整理されていないと、探したい情報が見つからなかったり、行いたい操作をどう行うかが分からなくなる場合があります。
「必要な情報が揃っている」ことが条件ですが、且つなるべく回りくどい表現や長い文章などは使わず、シンプルな表現を使うことで、ユーザーがより直感的に操作することが出来ます。

今回は現状の問題点を踏まえつつ、この2つのポイントを意識しながらどのような改善を行ったかについてまとめていきたいと思います！

改善ポイント

必要な情報と機能を追加する

コントロールの色や配置を変えてデザインを改善する前に、ひとまず「必要な情報が揃っている」という観点から、新しく入れておいた方がよい情報や機能を追加していきます。

【問題点】

旧UIでは、自分が借りた本について「返却日がいつか」という情報が無いため、いつ返却すればいいのかが分からないままとなっていました。

また「自分が借りている本がどれか」というのも、本データが多くなればなるほど、全ての本が表示されているギャラリーの中から逐一探すのが面倒に感じます。

【改善ポイント】

まずアプリ内で自分が借りた本の返却日を確認できるようにします。
「本の詳細」フォームの下に、返却を促す文章と一緒に追加します。

追加した返却日に関するメッセージは、「本一覧」ギャラリーから自分が借りている本を選んだ時だけ表示させるように、Visible プロパティを編集するようにしてください。

次に「本一覧」ギャラリーに対して、自分が借りている本だけを表示するフィルター機能を追加します。
トグル コントロールを追加して、「本一覧」ギャラリー（BookList）の Items プロパティに、追加したトグルでフィルター処理がかかるように追記します。

配置を整理する

続いてUI改良における2つ目のポイント「短い時間で理解できる」の部分を考えていきます。

【問題点】

画面の左側に「本一覧」を表示し、画面右側には「本の詳細」として、本一覧の中からクリックした本データの情報を表示するようになっています。
右下には「本を借りる」「本を返す」ボタンが配置されています。

しかし「本一覧」「本の詳細」のそれぞれの領域について、どこからどこまでがその領域なのか見分けにくいという問題がありました。

【改善ポイント】

領域の区別がつきやすいように、「本一覧」のギャラリー、及び「本の詳細」のフォームに対して色を付けていきます。

まずそれぞれの領域全体に青い枠線を付けました。本データ1つ1つに対する区切り線も追加することで、クリック出来る領域を明確化することが出来ました。

更に「本一覧」「本の詳細」それぞれの領域について、左右で位置をある程度揃えることにしました。
今回は左側の「本一覧」の位置に合わせて、「本の詳細」フォームを変形、移動させました。

移動に伴って空いたスペースには、それぞれのタイトルを真ん中に配置。
「本の詳細」に関しては、その説明文も入れました。

これで画面の左右で表示領域がくっきりと認識できるようになりました！

強調表現を施す

【問題点】

画面内のコントロールについて、ある程度の配置が整理されましたが、まだ文字が黒っぽく同じようなフォントで書かれているため、情報の見分けがつきにくい部分があります。

【改善ポイント】

まず「本一覧」ギャラリー内で「ステータス」列の情報を表示している部分を、「貸出中」の場合は赤色、「貸出可能」の場合は緑色の背景に設定しました。
こうすることで、貸出可能の本を一目見て探すことが出来るようになります。

次に「本の詳細」フォームの背景色を灰色に設定しました。ただし各列（項目）のデータを表示する部分については白いままとしています。
こうすることで、各列とそのデータ表示との区切りが明確になり、データが見やすくなりました。
また、特定の列にデータが格納されていなかった場合もそのまま空白として表示されるため、ユーザー側は「ここにはデータがないんだ」ということを視覚的に理解しやすくなったと思います。

【問題点】で指摘した部分はこれで解消されましたが、これ以外にも強調表現を用いることで改良できる部分があります！
まず「本の詳細」フォーム下にある、「返却日」の情報を表示している部分について、全体的に赤色にすることで、重要な情報であることを強調します。

次に先ほど追加した「自分が借りている本を表示」というフィルター機能をより使いやすくします。
個々の本データに対して「どれが自分が借りている本なのか」ということが一目見てわかるようにするため、まずフィルターの説明文の横に人型のアイコンを追加します。

続いて「本一覧」ギャラリー内の自分が借りている本データにも、同じ人型のアイコンを追加します。
こうすることで、ユーザーは自分が借りている本かどうかをより視覚的に認識しやすくなりました。

操作を制御する

ここまでで、画面としてはかなり改善されたように思います。
しかしUI/UXの向上のためには、更に工夫できる部分があります。

「本を借りる」「本を返す」ボタンは、OnSelect プロパティに記述した処理によって、どちらか一方だけがクリックできる状態に制御されています。

つまり、自分が既に借りている本に対しては「本を借りる」ボタンが押せないし、まだ借りていない本に対して「本を返却する」ボタンは押せないようになっています。

このように、操作をアプリ側で制御することで、ユーザーの操作ミスや混乱を防ぐことが出来ます。

【問題点】

「本一覧」ギャラリーに対する2つのフィルター機能がありますが、同時にフィルター機能をオンにすると、何も本データが表示されなくなります。
これは機能としては正しい動作ですが、ユーザー側からすると、この操作が出来ることによって役立つポイントは無さそうです。

【改善ポイント】

このフィルター機能のトグルコントロールについて、どちらか一方しかオンに出来ないように処理を追記します。

OnSelect プロパティにてコンテキスト変数（UpdateContext 関数）、またはグローバル変数（ Set 関数）を使い、ボタンを押したときに true と false が切り替わるようにします。
作った変数を、対象のトグルの Default プロパティに設定することで、トグルをオンにしたときに、もう一方のトグルのオンオフ状態も同時に切り替えることが出来ます。

例として、二つのトグルの名前がそれぞれAvailableToggle BorrwingToggle の場合の、処理の記述方法を下画像に記載したので、是非参考にしてください！

追加修正点

2023/11/27

本を探すユースケースを考えると、本のタイトルについてワードから検索する機能があると便利ということで、検索機能を付けてみました！

実装方法としては、BookList の Items プロパティにおける Filter 関数に条件を追加することで実現しています。

まとめ

今回は以前作った本貸し出しアプリに対して、更なるUIの改善を行いました。
改善前と、改善後の画面がこちらです！

UI/UXの向上のために、デザインの修正以外にも新しくフィルター機能を追加したりもしました。
Power Appsはコーディングを行わずにアプリをカスタマイズできるので、UIの改善を行う場合にも非常に使いやすいツールだと思います。是非使ってみてください！

参考資料