デザインの言語化 - degdet
「ターゲットユーザーの思考・メンタルモデル」を予測し、そこに沿う形でUI/UXを構築してあげる
ユーザーがどのタイミングで、どんなことを考えるのか？を細かく仮説立てて進める。
ユーザーの思考をトレースする
ユーザーがアプリを開く前、使う前
複数のwebサイトのアクセスをブロックしたい
使い方としては「自分の希望のwebサイトを複数追加/登録した後に、ブロックを有効化する」とかするんだろうなぁ
開いてから...
何もブロックされてない状態を認知する
そこから新しくブロック状態を作り出そうとする
ブロック状態を作り出す
ブロック状態を作ってから...
ブロック中であることを認知できる
ブロック中でもブロック設定（対象リストや時間帯）を変更できると思う
ブロック状態に対して厳格モードを有効にしようとする
ブロック状態を簡単に解除できないようにしたいなぁ...
何やらそれを満たせそうなアクションがある試してみよう
おおやっぱりそうだ、これを実行したら期待通りの挙動になるはずだ
厳格モード中
ブロック解除できないよな
緩和方向の変更もできてほしくないな。でも追加はしたいけどな。
トップ画面のレイアウトイメージは以下だな
https://scrapbox.io/files/6853c02bb4fb70685828c24b.png
アプリを開いた瞬間に、ブロック状態を認知できる。
ユーザーが一番気になるのは、ブロック状態のはずなので、大きく出しておく。
そして、ユーザーは下の欄の項目がブロックの設定値だと関連づけるはず。
そして、触ってみると思う。触ってみた時に編集できることを学習するだろう。
Todo
「ブロック状態」をどう変更させるか
「ブロック状態」のイラストをより直感的で洗練されたものに変えれるか
インスピレーションを集めてくる必要がありますな
インスピレーション
Notion Desktop appのツールチップの使い方は参考になる
cleanmymaxの空間を大きく使う感じも良い。
https://scrapbox.io/files/6853dc1b9076566c2300adbb.png
無骨な感じの印象良い
https://scrapbox.io/files/6853dd095679b7a1f87604c9.png
なるほど。
https://scrapbox.io/files/6853dec5b91545d3b9bead1b.png
右に状態を、左に設定欄を置くというやり方
ちなみに、IPアドレスはマクドナルドのものなので、悪さしても意味ないです。
toggleの状態を表示してくれてて、設定自体は裏でやるというやり方
https://scrapbox.io/files/6853e05928c0e702d10a7208.png
関係ないけど、TogglのDesktop Appのデザインは何か違和感しかない。良いと思えない。
CotEditorの下のフッターで設定を変える感じをイメージしてる
https://scrapbox.io/files/6853e2388fe328035adf2696.png
カレンダーの案
https://scrapbox.io/files/6854bc6a3e155a8e19998930.png
https://scrapbox.io/files/685601d95f508c2b8c356f72.png
https://scrapbox.io/files/685601eb25ae499e49afcff6.png
以下のような感じにしてるが...何か物足りないな。なんだろう。。。
https://scrapbox.io/files/685647d32d41ab0d935c6267.png
https://scrapbox.io/files/6856485e862ee0ed54a92a34.png
hmmm。言語化。
良い点
ユーザーは、今のシステム状態を知れる
どこを押せば何ができるか、なんとなく予測できる
ADHDに優しい。情報量が少ないけど、ある程度直感的に操舵できそう。
悪い点
音楽プレーヤーっぽくね？w
自己制御アプリってのが伝わりにくいような気がする。
「自己制御してるんですよ〜」「してないですよ〜」感を出せるようにできないか？
目指してる感性
ポップすぎないが、機械すぎる感じもない。そんな感じを目指したい。
なので、極力可愛いイラストとかは使いたくない。
「イメージ」を使う場合は、より機械的なもの。キャラクターとかじゃなくて。
課題
ブロッキング中
所感
「正方形」が音楽プレーヤー感を上げてる気がする。どうだろう...。
spotifyとかポップアップのプレーヤーウィンドウは正方形だしな。
メンテルモデル的にどうも「音楽」感が出てしまいそう。
なんか違うなぁ...w
https://scrapbox.io/files/685656a8d8f40f02f997d60b.png
いやぁ...状態の可視化が大きく占めすぎか？
https://scrapbox.io/files/6857c01b4db8da4d0822cca3.png
これは良さげだが、不安がある。
複数のルールが増え始めた場合、このUIは大袈裟になるんじゃないか？という不安。
いや、確かに「ブロックしてる」感を表現し、今のシステム状態も見えるようになってる。
なるほど、機能が増えると最適なUIは変わる可能性があるんだな。
今のUIは、このメインページだけならまぁ良いと思う。
学んだことは....
「自分のこういうイメージなんだよなぁ」という感性は言語化すること。
言語化しつつ、自分のイメージに似てるUIを死ぬほど集める。なんでもいいから死ぬほど集める。
なお、自分のイメージと似てないものも一応集める。死ぬほど集める。
集めたあとカテゴライズしつつ、自分のインスピレーションを感化する。
さらに思うこと...
UIは機能の多さや種類によって、最適なデザインが変化し続ける。
単一の機能なら最適だったUIは、機能が増えることで最適じゃなくなる。
たとえば、ルールという詳細ドメインがあったとする。そして、最初はルールを1つしか表示しないものだったとしよう。
その時の最適なUIは多分、メインページで表現するものになる。
でも、ルールが1つから複数になってくると、リスト管理することになる。リスト管理し始めると最適なUIは変わる。まず、そのインパクトを出してた単一ルール時のUIは、複数ルールの詳細として本当に使っていいのか？と考えるべき。
一覧性を優先する方がいい場合もあるのだ。そのインパクトあるUIはメインページとしては以前使えるかもしれないが、リストのアイテム詳細でも同じように使うのか？ユーザは自分が今どこにいるのか混乱しそうじゃないか？
以下のようなイメージに変えていくか
https://scrapbox.io/files/6857debf6a7aee0bd1592489.png
定期ブロックが複数出てくる可能性を考えると、定期ブロック1つ1つに左のような画面を用意するのは鬱陶しい気がする。
ユーザーとしては多分、「クイックブロック」を最初に見て動かした時に、アクセスブロックの文脈が頭の中に出来上がるはず。
定期ブロックでは、enableにしたらクイックブロックのブロック中のようなものが展開されてるんだと無意識に感じる気がする。
逆にここで、定期ブロックのアイテム一つ一つに左画面を用意してしまうと、おそらくユーザは迷子になる。
あれ....今クイックブロックにおるのか？どこにおるんだ？ってなる。絶対。たぶん。
というわけでできたのがこれ
https://scrapbox.io/files/685854e9d85f4e9145244b64.png
まぁ悪くないと思うね。
非デザイナーにしては結構頑張った。これでFBをもらいにいけるくらいの前段を作れた気がするぜ。ふぅ。。。
とにかく言語化していこう
軽めのユーザーストーリー？的なのを想定するか。
使って欲しいユーザー像
「webサイト」や「アプリケーション」の誘惑を自己制限したいと思っているユーザー
「なんとしても自分を律したい！」と思ってるユーザー
selfcontorolを知ってて、その上の機能としてスケジュール系の機能も欲しいと思ってるユーザー
https://scrapbox.io/files/68594cb367f8a3a1e3e199ea.png
まだ納得できない理由をかけ
ユーザーにとって使いやすいのか？を言語化できないから。。。
ユーザーの利用頻度を知る必要がある。
どんな操作を頻度高く行なってるか？によって最適なUIが変わっていく。
今は我慢して、調査フェーズだと思って進めてみるのもあり。仮置きしながらね。
ここで情報アーキテクチャを学ぶ時か？
見えない壁が俺の中にあって、それを越えられない。無意識にストッパーがかかっている。 ch
そして今はこのイメージ
...
モーダルのUIの参考
https://scrapbox.io/files/685a1a25060e41da8ea5ccf7.png
https://scrapbox.io/files/685a29326575104c04b9cce4.png
左上に「Addボタン」を置くのもありか