web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Blogs / Microsoft Dynamics ブログ / Tips 画面レイアウトどこまで気を使っていますか?

Tips 画面レイアウトどこまで気を使っていますか?

Tomokatsu Miyo Profile Picture Tomokatsu Miyo

 本記事には私見なども含まれております。日本マイクロソフト株式会社の公式見解ではないことを事前に明記させていただきます。ご了承ください。

 

 今朝コンビニエンスストアに入って、朝のコーヒーを購入しようとした時でした。熟練のスタッフさんと、新人らしきスタッフさんが、お菓子棚のところで話をしていました。その状況ですが、熟練スタッフさんが、新人のスタッフさんに、お菓子商品の陳列を指示したようで、その報告と確認をされていました。

熟練スタッフ「これじゃあダメなんだよなぁ」

熟練スタッフ「この棚の商品、横長のものと縦長のものがごちゃ混ぜだよね?こういうところに気を使わないと。」

新人スタッフ「。。。」

熟練スタッフ「これ、なんで(価格が)高い商品が上にあって、その下に安いのがきて、さらに下に、高い商品がきてるの?」

 かなり新人さんスタッフは追い込まれている感じでしたが、逆に細かいことを考えて棚割りをしているなぁと、感心して聞き耳を立てていました。

 

 こういった「視覚的」な情報は、ITにも通じるところがあると感じています。情報デザイン工学というのをご存知でしょうか?Wikipediaでは、下記のように情報デザインを定義しています。

 

『情報デザイン(information design)は、人間とモノや環境との関係性にかたちを与える方法論、生活の中にあふれる無数の情報をわかりやすく提示する手法、あるいは、それらの考え方。』(Wikipediaより引用)

 

 情報デザインでよく出てくるのが、オフィスフロアなどの壁にある電灯スイッチ(ひと目で、On/Offがわからない)、水道のレバー式蛇口など(上にあげる事で水が出るのか、下げる事で水が出るのか?)こういったものは、情報デザインが良くないといわれています。要するに見た瞬間に重要な情報(アクション)がどこにあるのかが理解できるか?作業の導線がすぐにわかるか?等を意識するという事です。

 

 今使われている、ビジネスアプリケーションの画面の配置はいかがでしょうか?必要な情報がすぐに目に飛び込んでくる状況にあるでしょうか?その隣に配置されている情報は関連している情報でしょうか?もしくは、その画面レイアウトのコンセプトはどのようなものかわかるでしょうか?

 業務で使うアプリケーションなので、こういったところにも気を使うことで、多くの人に「使いやすいアプリケーション」を提供していきたいものです。

 

 最も簡易的な情報デザインでは、目の動きを意識して、情報は左から右へ、上から下へ配置するのが良いといわれています。個人的にもそう思いますが、ビジネスアプリケーションでは、その目的に合わせて、作業の導線にあわせて、配置するのが良いのではないかと感じています。

 

 たとえば、全体的な商談の情報を明確に確認したい場合、BANT情報を常に意識させたいような場合はこのような画面になるかもしれません。

002Screen1.png

 

 行動を重要視することを優先するのであれば、このような画面にして、常に行動が行なわれているかを意識させる画面が良いかもしれません。

 002Screen2.png

 利用者へビジネスアプリケーションを公開する際には、できるだけ画面にどのような要素を含めるか?配置するかにも意識をすると、より使いやすいアプリケーションを公開できると思います。

 

 ちなみにですが、上記のコンビニエンスストアの件ですが、お店をでてふと思ったことがあります。熟練スタッフは、配置の勘所やポイントを新人スタッフに事前に教えなかったんだろうなぁと。これでは、上手く行くわけはないですね。

 

 本記事に対しての質問などは、最下部にあります私のLinked Inにてご連絡いただければ幸いです。今後も定期的に、このようなTips 情報を掲載していきたいと思います。

Comments

*This post is locked for comments