今年も Distinct 2019 というイベントに参加しました。そこで感じたことをまとめます。
昨年のまとめはこちら
UX/UI はわける
しょっぱなに @kenazuma さんが UX と UI は分けましょうという話があり、「はっ」とする。確かにひとまとめになってた。。。
採用テクノロジーとインパクト
採用するテクノロジーによって後から変更できることと出来ないことがあり、以下の項目を事前に検討する必要がある。
アセット
アプリで利用するイメージなどのセット。既定で提供さえれるアセットが豊富であれば表現の重度があがる。
スタイル
全体の操作性を担保するためのフレームワークを利用して全体にスタイルを適用する。色やサイズから、コントロールの操作性の統一が大事。例えば Boolean の設定はチェックボックスかトグルスタイルかなど。
レイアウト
レイアウト機構をネスト構造にしておき、後から差し替えが柔軟にできるようにしておく。画面サイズは時代によって必ず変わるので、サイズの変更にも対応できる構造を検討しておく。
※ほか弁の弁当箱のレイアウトが秀逸らしい。
UI コントロール
UI コントロールが最終的にユーザーに見えているため、使い勝手に大きく影響する。
- OS 標準のコントロール
- OSS のコントロール
Infragistics のコントロールについては冊子が配布されました。
UI コントロールの機能は比較的開発者が理解していればいいと思われがちだが、実際は UI 設計者も理解しておかないといけない。UI コントロールの選択肢が多ければ多いほど、ゲームに勝てるという考えは面白い。
※たしかにこれまで OS 標準ばかり使ってて他の選択肢を真剣に考えなかった。。
モーション
UI コントロールのトランジションやアニメーションには意味を持たせるべきで、ユーザーの操作をガイドできるよう設計が必要。
モーションもビルトインの機能を理解する必要があり、開発者も設計者もどちらも同じ理解が必要。
※昔は HDD アクセスでランプが点灯したので、頑張っている感が伝わるが、何も応答がないとユーザーが「不安」になるなど影響がある。
スクリーンフロー
画面遷移にはいくつかパターンがある。画面自体と遷移ロジックを分離できると柔軟な設計ができる。
画面遷移の定義は全員が分かりやすいものを用意すべき。Infragistics には Indigo Studio がある。
※画面に遷移を埋め込むと、構成変えるとすべて見直しが必要だ。。
DevOps チームと役割
想像してみよう
@kenazuma さんが唐突にゲームに例える話を始めたがこれが面白い。
ゲームで魔王と戦う場合、各職業によってやることは明確だし、それぞれの役者がそのターンで何をするかなど「バランス」を取って戦うことで勝利する。
PM: 僧侶
アーキテクト: 戦士
デザイナー: 魔法使い
さて、実際のプロジェクトでチーム全体の把握してますか？
※把握してるプロジェクトは確かにうまく行ったなぁ
Empowerment の重要性
Facebook のリリースサイクルを「想像」してみた場合、そのペースから考えるに、変更公開の申請書出してハンコ押すみたいな処理はきっとないだろう。
- チーム全体が「基本的」な知識を持っている
- 「最低限」のルールを理解している
- メンバーの権限を十分に与える
これで強力なリリースができる
The Fastest Path to Amazing Experiences
SVP of Developer Tools Jason Beres (@jasonberes) さんによる Infragistics 社とソリューションの紹介。日本語の順次翻訳付き。
色々な数字と成功のカギ
ソフトウェアは 165 兆円市場であり、5-15% のプロジェクトが遅延したり頓挫している。
ソフトウェアの 48% は UI のコードであり、開発費の 80% は保守に使われている。
2019-2022年にかけて AI など新しいソフトウェアの市場は 600 兆円くらいだが、プロジェクトの遅延や補修費用の傾向は同じ。
73% は顧客体験が購入決定のキーであると回答している
要件定義・設計段階に比較して実装フェーズ以降での UX 検討・改善は 30 倍になる場合もある。よってプロジェクトの成功には、以下の点がカギとなる。
- 早い段階でのデザイン検討
- プロトタイプとユーザビリティテスト
ツールとフレームワークの標準化は有効な手段
Infragistics が提供するツール
フレームワークとして Infragistics 配下のツールを提供
- UX ツール
- UI コントロール
- データの可視化
UX ツール
Indigo.Design でデザインからプロトタイプ、そのままコード生成までの流れを実現可能。
モックは綺麗に作れるのにアプリには起こせないという課題を解決。
※この部分かなり重要で、デザイナーが自由に表現したものを実装するの大変すぎる問題を解決してくれる！
- Indigo Design System でデザイン作成
- プロトタイピング・ユーザビリティテストでテスト
- コード生成機能で Angular コード出力
出力されるコードはそのまま使えるレベルで、データバインドも完璧。
Indigo Studio については以前の記事書いたので良ければ見てください。
※ 業界標準？のスケッチと統合されているのがいい点らしいが普段使わないからわからん。。
※ デモで実際に動かしてたけど、デザインとコードの再現性が 100% で凄い説得力。
エンドユーザーの所感
Indigo.Design のユーザーである、セカンドファクトリー 鈴木潤一氏がその体験を共有。グラフィックデザイナー、UI/UX デザイナー。Infragistics のブログに連載 をしている。
Indigo.Design のいいところ
時系列でまとめると:
- 以前はデザイナーはフォトショップやイラストレーターで画面設計しており、画面定義書を何十ページも書いていたしエンジニアとの垣根が大きかった。
- 各種ツールでエンジニアでも画面設計ができる時代になったがデザイナーとしての制約が大きかった。
- デザイナーが使える UI デザイン専用のツールも出てきて、効率よくデザインできるようになったがまだエンジニアとの垣根がある。
- Indigo.Design が出たことでデザイナーが作った UI をコードとしてエンジニアに渡せるようになった。また制約も少なくなってきている。
Indigo.Design の課題
以下デザイナーとして感じる課題。
- マテリアルデザインに準拠したコントロールで使いやすいが、少し変えたい場合のやり方がよくわからない
- スケッチは Windows との競合ができない。Adobe の Xd はいい感じだが、Indigo.Design のプラグインがない
セカンドファクトリー
自社のサービスを検証するべく「海の家」や「飲食店」も運営する面白い会社。Power BI 王子なども所属する精鋭集団。
コントロール
Indigo.Design で使える UI コントロールが去年から比べるとさらに豊富になっていて、各コントロールも機能が強化されている。また CLI からコントロール追加も可能。より開発者フレンドリーにもなっている。
BI・ダッシュボード
Infragistics が感じる BI 製品の一般的な課題
- 利用ユーザーに専門知識やスキルが求められる
- 全ての機能を必要としない
- 導入コストが不透明・あるいは複雑 (特に組み込み)
上記課題を Reveal を Infragistics が提案
Reveal
主に以下の機能を提供する BI ソリューション。全てブラウザベースの模様。
- ダッシュボードをアプリに組み込める機能
- サブスクリプションベースのアプリケーション
- 様々なアプリに対応するアプリ
- 様々なデータソースをサポート
- 柔軟な共有機能
そして UI が大事という Infragistics だけあって Reveal もその点考慮した作りになっている。
※ 雰囲気として Power BI と似ている気がする。差別化ポイントを確認しないと。。
既に CDATA で Microsoft MVP の杉本さんがブログ執筆済。
新しいデータ可視化ソリューション「Reveal」を使ってみた（#Dynamics365 for CE に接続
Reveal SDK
作成したダッシュボードをアプリに埋め込む際に使える SDK が提供されるとのこと。
Web Embedding Developer’s Guide
まとめ
昨年よりさらに製品がパワーアップしただけではなく、BI 製品まで出てきて、ますます UI 側は盤石になってきた感がありました。アプリ開発時にまず UI と UX を別々に真剣に考える必要がありますね。
de:code 2019 の東さんのビデオもみないと。
参考
任天堂のページ
UX/UI について面白い情報があるそうで、確かにちょっと検索しても面白そうなものがありました。
Google マテリアルデザイン