使いやすい画面について考える

こんにちは。システム開発部の原田です。
証券営業からエンジニアへ転職し、未経験から始め1年とすこしになります。

初めて携わった画面の開発で右も左もわからずオロオロしていた際、
弊社で幅広くデザインを手掛けている山口さんにポイントをご指導頂きました。

開発をする前提から、それを実現するために抑えた修正のポイントまで
なるほど!と思ったものをいくつかご紹介したいと思います。

直感的に、より間違わず操作できる画面を

案件は業務システムの開発でした。なので

  利用者のタスクがいち早く終われること。
  かつ間違わずに、そしてできれば説明書を見ずに。

を理想とし、BeforeAfterを元に修正したポイントをいくつか抑えてみました。


f:id:monex_engineer:20190415183958p:plain

  • プライマリカラー LOGOUTとSUBMITを緑色に

こうして揃えた色を、ここではプライマリカラーと呼んでいます。
揃えた色が基本操作エリアであることを示し、初めてこの画面を見た人でも直感的に操作ボタンが認識できるようにしています。

  • 背景色 背景色を黄色から白に

業務システムなので長時間みている画面です。
目が疲れてしまう黄色や原色はできるだけ避け、業務システムでは基本的に「白、青、緑」などフラットなカラーを使います。

  • フォント Montserrat→Arialへ変更

Montserratは丸みの帯びたフォントでオシャレに感じますが、
例えば以下の数字について。
f:id:monex_engineer:20190416103745p:plain
Monserratの「1」だけを見たとき、「7」と誤認識の可能性があります。
業務システム、とくに金融機関では、文字・数字の見間違いは致命的となります。
見間違いをできるだけ防ぐため、世間一般的に人々の見慣れているフォントを使うのが好ましいです。

こういったフォントはタイトルやボタン等の「部品」へアクセントして使うのが良いかもしれません。

ページ内の情報を必要最低限に

上記の中には記載していませんが、
今回の修正でデザインの「足し算」「引き算」という概念があることを学びました。

まず足し算。良いと思ったデザインを適用します。
上で出た図でいうと、「なんだかマネックスっぽいので黄色を使う」、「カラフルだとかわいい」、「おしゃれなフォントを使おう」…というところですが、どんどん追加していくとごちゃごちゃになってしまいます。

そこで、今度は引き算。できる限り必要な情報に絞って、可読性を上げます。
例えばテーブルの線、これも情報です。

f:id:monex_engineer:20190416102455p:plain

線の無い右側のページの方が、すっきりとして文字が認識しやすくありませんか?

列の量によっては行の認識がしづらくなることもありケースバイケースですが、
引き算の効果が伝わっていれば嬉しいです。

 

デザインの良い、良くないをなんとなく思うことはありますが、
それには何故良いのか、良くないのかきちんと説明のできる根拠があり、
意識することでユーザーの使いやすいシステムに限りなく寄せて行けることがわかりました。

今回学んだことをふまえてデザインはもちろん、仕様やプログラムにも根拠を持って組み立てを行い「使いやすい」と言ってもらえるものに繋げていきたいと思います。

改善前後の比較でデザインを解説している
とてもわかりやすいサイトがありますので、是非ご参考下さい。

tsutawarudesign.com

 

 

 

f:id:monex_engineer:20190517152440p:plain
原田 恵梨華システム開発部 開発グループ エンジニア

ネット証券だけどWebページにアクセスするのが面倒になってきたのでAlexa対応してみた

こんにちは、マネックス・ラボの渡瀬です。

音声操作ってしたことありますか?
スマホを使ってGoogleやSiriで操作するのが一番身近でしょうか。既に生活に取入れて、家電の操作や自宅の施錠をしている、という方もいらっしゃるかもしれません。

マネックス証券では2019年4月17日に「マネックスアドバイザー for Alexa」 の提供を開始しました。「マネックスアドバイザー for Alexa」は、Alexa対応端末に話しかけると、ロボアドバイザー「マネックスアドバイザー」で保有している残高情報を音声と画面で確認することできるサービスで、マネックス・ラボでサービス開発を進めてきました。

f:id:monex_engineer:20190507165515p:plain

マネックスアドバイザー for Alexa」のAlexaスキル作成環境

 音声認識の開発ということで、通常の設計に加えて音声ユーザーインターフェース(VUI)を作成し、スキルの開発と画面デザインをしています。
今回はスキル開発者とAlexa端末画面のデザイナーのお二方にインタビューしました。

スキル開発者に聞きました

 ――まず初めに、音声操作に関する開発経験はありましたか?
いいえ、Alexa スキルなどスマートスピーカーに提供するサービスは初経験でした。

――スキル開発は無い、、では、スキルの開発情報はどうやって得ましたか?参考にした文献とか教えてください。
Amazon の公式ドキュメント、および公式フォーラムがほぼ全てでした。今回スキルに採用した画面作りの規格である Alexa Presentation Language(APL)は開発時点ではβ版であったため、公式ドキュメントからは読み取れない情報もあり、公式フォーラムにおける Amazonの方から提供される情報には助けられました。

――音声操作のテスト方法はどのように実施しましたか?工夫した点などありましたらお願いします。
今回は初の Alexa スキル開発ということもあり、なるべく素直な方法で行いました。 SAM CLI でイベントを生成し、ローカルに立ち上げたサーバーに投げて結果を検証するシステム的なテストの他、実際にデバイスに話しかけて行う人力によるテストなどです。また、いくつか発声パターンを音声ファイルとして作成し、それを再生することでテストする半人力のような工夫も行っています。

――スキル開発にはamazonアカウントが必要ですが、アカウント作成時に注意が必要と言われていますよね。amazon.comamazon.co.jpの問題を詳しく教えてください。
Alexa の開発には Amazon アカウントが必要なのですが、日本で取得したアカウント (.co.jp) とアメリカで取得したアカウント (.com) で Alexa Developer Console に機能差があります。例えば先に挙げた APL のシミュレーターを使うには .com のアカウントが必要なのですが、今回のスキルは日本国内に限定したリリースのため、ストアへの掲載確認は .co.jp のアカウントが必要になるなど、場合によって複数のアカウントを使い分ける必要があります。

――amazon.comのアカウントに結びつけをした端末では英語っぽく「Alexa!」と呼びかけないと応答しませんでした。。他に苦労した点ありますか?
現時点では Alexa スキルの開発におけるベストプラクティスは確立していない状態といえるため、土台作りは試行錯誤でした。また、APL で画面定義するための JSON は多機能なものの、可読性が低いという問題があったため、独自の XML から APL の JSON に変換するコンバーターを作成したりと、快適に開発するための環境作りの方が大変だった印象です。

――最後に今後スキル開発をするエンジニアに一言どうぞ。
スマートスピーカーは世界的にもシェアを伸ばし、ますます開発できるエンジニアが求められています。開拓の余地が大きい分野なので苦労は多いかもしれませんが、知的好奇心を満たすには絶好の場とも言えます。少しでも興味を持つエンジニアが増えてくれれば幸いです。

――ありがとうございました。

 

デザイナーに聞きました

――どうやって進めていきましたか?
まず丸型画面のAmazon Echo Spotから着手し、WEBのメイン画面をそのままはめていきました。ですが、マネックスアドバイザーには棒グラフの資産推移があるのですが、丸い画面では表示できる情報量に限界があり..
画面数は少なかったので少しずつ変更を加えながらやっていきました。

最初は白と当社のコーポレートカラーの黄色をメインの背景にしていましたが、デバイスがほとんど黒だったことから、パイチャートが浮き出て見えるような黒を背景にしました。イメージ案の段階では黒が強いかな、といったところでしたが、実機で画面にはめてみたところ違和感がなく満場一致で決定しました。その次にアイコンとエラー画面も最後に追加しました。

f:id:monex_engineer:20190507170337p:plain

表示するフォントはデバイスフォントしか使用できなかったので、デザインの作業としては可読性を意識してフォントサイズやマージンのレイアウト・配色の決定のみを行いました。

――背景に関して当初は白と黄色で進んでいました。社内の意見では白よりインパクトのある黄色で、と傾きかけていましたが、黒案が登場しAPLオーサリングツールで確認してすぐに決まりましたね。他に意識したことはありますか?
今回は音がメインで、画面は補足情報ということから、情報量少なく、分かりやすく、を意識するようにしました。また、その方向性にしてからは残高照会のメインとなるパイチャートから始めました。
バイスの丸型を生かすようにして、パイチャートを簡略化していきました。

――苦労したところはありますか?
やっぱり丸型の画面は珍しいので..
情報を最小限にしたいから、文字を大きくしたり、パイチャートからはみ出すようにしたりしました。文字に白縁をつけてはっきりさせる案もありましたが、エンジニアに調査してもらったところAlexa特有の制限があり実現できませんでした。資産金額は桁数が大きくなる場合には文字を小さくするということも検討していたのですが、最終的には実施しませんでした。

最後に四角型画面のEcho Showに着手しましたが、丸型を分解してやりましたが丸型が固まっていたのでそれほど難しくはなかったです。ただFire TV が様々なデバイスに対応しはじめたことにより、画面が固定サイズではなくなったので、これからの課題でしょうか。

――ありがとうございました。

 

マネックスアドバイザー for Alexa」の未来

マネックスアドバイザー for Alexa」は音声だけで無く、お客様に安心して利用して頂けるように、ディスプレイという視覚からの情報にも対応しました。今後、様々なユーザーインターフェースの組合せで利用できるシーンを増やしていきたいと思います。

 

 

渡瀬 桂システム開発マネックス・ラボ

マネックス×アイディアソン

本日は、嶋が記事を書かせていただいております!

 マネックス×アイディアソンとは

2018/12/28に公開した記事でも触れてますが、
2018年度を通じてマネックス証券ではアイディアソンが開催されました!
通常のアイディアソンは、長くても3日程度のスパンで開催されますが、
弊社のアイディアソンは2018/7~2019/3と9カ月にわたっての開催です。
 ※長い期間ですのでそれだけ中身も濃いものになりました。

 メンバー構成は自由に決めて良いので、私も入社時期が近い3人で参加しました!
業務時間外の活動なので、集まれるときに気楽に集まってできるのが魅力の一つです。
今回はそんな我々の活動の成果を抜粋して紹介させていただきます。

自チームの取り組み


 我々のチームは『生体認証』をテーマに据えて活動していました。
テーマの選定理由としては、昨今はセキュリティ強化が命題としてあがっているから、
というのに加えて、自分達がその分野に触れてみたい、と思ったのが大きな要因です。

①そもそも生体認証とは? 
 一口に生体認証といっても現代社会には様々な生体認証が存在します。
 (指紋、虹彩、声紋、、、などなど)
どういったものが生体認証と呼ばれるのかをまずは調べてまとめてみました。

f:id:monex_engineer:20190423135742j:plain

②生体認証のスタンダードな認証方式
 次に生体認証って何を認証してるの?といったものについてまとめてみました。
 f:id:monex_engineer:20190423135748j:plain
今回の紹介は以上となります。
アイディアソンの企画が、第2回、第3回と続いていった際に、
参加して盛り上げていくメンバーを当社は募集中です。

最後に


 最後になりますが、ここ最近オフィスのまわりで食べたランチでおいしかった
 焼き鳥丼の画像は以下になります。

f:id:monex_engineer:20190423140515j:plain