DApps開発におけるUX

DMM.com ブロックチェーン研究所の「試して学ぶ スマートコントラクト開発」を参考に勉強しております。

##UXとは？ UIとは？
どんなに良いDAppsを作ってもユーザーに受け入れられないと意味がありません。
そこでUX（User Experience）が重要と言われています。
ですがUXとUIの明確な違いが自分でも理解できていないので整理したいと思います。

###UX (User Experience)
UXとは「ユーザーが物やサービスに触れて感じる経験」のことを指すそうです。
例えば、
・サイトのデザイン
・サイトの読みやすさ
・アプリの使いやすさ…
などがUXに当たります。

###UI (User Interface)
UIとは「人とサービスが接触する部分」のことを指すそうです。
・ボタンのクリック
・文字のフォント
など、ユーザーの視覚に触れる全ての部分のことになりなます。

UIはUXの一部分という感じで理解できたので、
開発におけるUXを理解していきたいと思います。

##UX
UXに関する研究を長年行ってきたPeter Morville氏の「Semantic Studios」というWebサイトの　User Exoerience DesignにUXに関してよくまとめられています。

###UXハニカム構造
<img width="410" alt="スクリーンショット 2019-03-15 21.37.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/342028/545ccf66-25da-4de3-0f6d-4e0438d376a4.png">

ユーザーの体験として価値がある（Valuable）ものは、周りの６つの要素を包括的に含んでるものです。
・useful（役に立つ）
コンテンツが有益なものか、新しい発見はあるか
・desirable（見やすい）
フォントが統一されてるか、良い印象を与えているか
・accessible（アクセスしやすい）
端末による制限がるか、
・credible（信頼できる）
コンテンツ、技術、アルゴリズムなど
・findable（探しやすい）
探したいものが見つかるか、
・usable（使いやすい）
操作しやすい、様々な使用法がある

##ユーザビリティー
ユーザビリティーは、UXにおいて重要と言われています。
ユーザービリティーは英語でUsabilityと書くことから、「使いやすさ」と思ったのですが、
単に「使いやすさ」ではないそうです。

ユーザビリティーとして広く認知されているのが、ISO 9241-11による定義です。
ISOの定義をそのまま抜粋すると
「特定の利用状況において、特定のユーザーによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。」
単に使いやすいのではなく、「誰が、どのような状態で、何も目的に利用するのか」を明確にして設計する必要があります。

また、ユーザビリティーの第一人者である、ヤコブ・ニールセンの著書「Usability Engineering」によると、ユーザビリティは以下の５つの要素から成り立つと言われています。

・Learnability（学習しやすさ）
初めてでも使いやすく、使い始めるのが簡単であること

・Efficiency(効率性)
一度操作を覚えたら、効率よく使用でき生産性を高めることができること

・Memorability（記憶しやすさ）
長い間使っていなくても、再度使用する時にすぐ使用できるように覚えやすいこと

・Satisfaction（主体的満足度）
ユーザーが個人的に満足でき、好きなように快適に利用できること

・Errors（エラー）
エラーの発生率を低く抑え、仮にエラーが起こっても容易に回復でき、致命的なエラーが起こらないこと

#UX開発の手法
代表的な例としてあげられるのはHCD（Humen Centered Design）とデザイン思考の２つの手法があげられる。

##HCD（Humen Centered Design）
![aexha.gif](https://qiita-image-store.s3.amazonaws.com/0/342028/a65b712f-543f-656e-148c-2e419755e4bc.gif)
参照：https://ux.stackexchange.com/questions/30093/is-user-experience-design-uxd-equal-to-user-centered-design-ucd

HCD日本では「人間中心設計」と呼ばれサービスや物、技術が開発の中心にあるのではなく、ユーザーの課題や要求に合わせて開発を行っていくというものです。
ユーザーの要件を満たすまで、以下の２〜５のサイクルを回していく手法です。
1.プロジェクトの目的設定
2.調査
3.分析、設計
4.プロトタイプの作成
5.ユーザーテスト
6.プロダクトのリリース


###1.プロジェクトの目的設定
最初にプロジェクトの実行に至った背景やそのプロジェクトの目標などを明確に明確にしておく必要があります。
DApps開発においては特に、そのプロジェクトに「なぜブロックチェーンが必要なのか」ということを明確にしておく必要があります

###2.調査
調査ではユーザーの利用状況を明確にしていきます。
UX白書（http://site.hcdvalue.org/docs） によると、ユーザーの時間軸の視点で考えるとよりユーザーの使用状況が明確になると考えられています。
<img width="550" alt="スクリーンショット 2019-03-16 9.42.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/342028/c912a3ff-c7d0-8bff-f23c-a2b039df4d0f.png">

主に、利用前、利用中、利用後、利用期間全体に分けられます。
この時間軸を念頭に、インタビューやアンケート調査をするとより調査の精度が高まっていきます。

###3.分析、設計
調査で得られた情報をもとに分析を行い、設計を行なっていきます。
ペルソナの設計
ジャニーマップ
ストーリーボード
といった手法を使うと、よりユーザーの要件が明確になり、実装まで落とし込みやすくなります。

###4.プロトタイプの設計
プロトタイプは最終成果物ではないので、設計の時に上がってきた要件の目標を最低でも達成できることが重要になります。
MVP（Minimum value product）とも言われ、最低限の目標から超えたところまで実装を行おうとすると、本来の目笑からずれてしまったり、仮説検証が難しくなってきてしまいます。

###5.ユーザーテスト
ユーザーテストは製作者が開発の過程気づかなかった部分に気づける重要なプロセスになります。

以下のサイトはユーザーテストの事前準備、実施中の注意事項など詳しいことがまとまられていました。
[【準備編】ユーザーテストで課題を発見するための基本的な考え方と5つの準備プロセス
2015年07月27日 ユーザー調査/ユーザビリティ](https://cont-hub.com/blog/02/348/)
[【実践編】ユーザー心理とサイト課題を明らかに。ユーザーテストの進め方と観察のポイント](https://cont-hub.com/blog/02/349/)

##デザイン思考
![image2.png](https://qiita-image-store.s3.amazonaws.com/0/342028/148267e9-e384-43fd-2395-94809115155c.png)

デザイン思考は、Empathize（共感）、Define（問題定義）、Ideate（創造）、Prototype（プロトタイプ）、Test（テスト）の５つのプロセスが基本です。
HCDとかなり似たところがあると思います。


##終わりに
まだ本格的な開発の経験はないのですが、開発する際にはこの記事でまとめたことを参考に開発していこうと思います。

##参考サイト・文献
「[試して学ぶスマートコントラクト開発](https://www.amazon.co.jp/%E8%A9%A6%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%AF%E3%83%88%E9%96%8B%E7%99%BA-%E5%8A%A0%E5%B5%9C-%E9%95%B7%E9%96%80/dp/4839966885)」 DMM.comブロックチェーン研究所

http://semanticstudios.com/user_experience_design/
https://www.cresco.co.jp/blog/entry/1140/
http://site.hcdvalue.org/docs
https://archeco.co.jp/ux-design/ux-design-class01/
https://ux.stackexchange.com/questions/30093/is-user-experience-design-uxd-equal-to-user-centered-design-ucd