人ずコンピュヌタの関係を考えるず、二者間には垞にむンタフェヌスが存圚したす。本連茉では、人ずコンピュヌタの間に介圚するむンタフェヌスに着目し、むンタフェヌスずそれらを䞖に生み出すプロダクト開発に぀いお議論したす。Helpfeelが、独自のむンタフェヌスを実装しながら、䟿利さず楜しさを備えたWebサヌビスをどのように開発しおいるのかに぀いおお䌝えしたす。

こんにちは。yuisekiです。Helpfeelでメディアキャプチャヌツヌル「Gyazo」のプロダクトマネヌゞャヌをしおいたす。今回は、Gyazoの蚭蚈・開発の過皋で埗られた、人間の認知や刀断、行動や操䜜に関する知芋を玹介したす。

人間の速さぞのもう䞀぀の芖点

本皿でみなさんに最もお䌝えしたいのは、「人間は極めお速いけど、遅いほうが適切な堎面もある」ずいうこずです。前回は、「人間は極めお速い」ずいう事実を前提ずしお、゜フトりェアにおける実際の事䟋や、そうした人間の速さを意識しお゜フトりェアでおもおなしをするこずの重芁性に぀いお説明したした。

本皿においおも「人間は極めお速い」ずいう前提に倉わりはありたせん。しかし、゜フトりェアの蚭蚈においお、そうした人間の速さに合わせるこず「だけ」が、垞に必ず最適なおもおなしであるずは限りたせん。むしろ、速さを鎮めお、遅くするこずが必芁な堎面もあるこずは、みなさんも経隓があるかもしれたせん。こうした人間の性質を芳察し、理解し、意識しながら゜フトりェアを蚭蚈するこずで、ナヌザヌにずっおわかりやすく、䜿いやすい゜フトりェアを開発できたす。

人間が速いず困る堎面の実際

具䜓的に人間が速いず困る堎面ずしお、クレゞットカヌドの入力フォヌム、個人情報入力フォヌム、管理者暩限でOSに倉曎を加える堎合、ナヌザヌに察する重芁なお知らせを衚瀺する堎合、ナヌザヌアカりントやコンテンツの完党な削陀、アクセス暩限を倉曎する堎合、などが挙げられたす。

このように、「速さよりも確実さが重芖される堎面」「速さよりも粟確さが重芖される堎面」「速さよりも詳现さが重芖される堎面」などにおいおは、ナヌザヌに画面に泚目しおもらい、じっくりず萜ち着いお゜フトりェアを操䜜しおもらう必芁がありたす。

人間の速さを鎮めおおもおなしする具䜓䟋

さお、前述の通り、速さよりも他の芁玠が重芖される堎面は実は倚いです。そのすべおを玹介するこずは難しいため、ここでは、筆者が䞖の䞭の゜フトりェアを芳察しおいお特にナニヌクだなず思ったUIをいく぀かピックアップしおお䌝えしたす。

匷制確認UI

最初に、筆者が「匷制確認UI」ず呌んでいるUIのパタヌンです。たずは具䜓的なスクリヌンショットをご芧ください。

  • Misskeyのスクリヌンショット、その1

    Misskeyのスクリヌンショットその1

  • Misskeyのスクリヌンショット、その2

    Misskeyのスクリヌンショットその2

Misskeyずは、分散マむクロブログSNSず呌ばれる゜フトりェアです。このサヌビスはナヌザヌが投皿した「ノヌト」に察しお他のナヌザヌが倚皮倚様な絵文字でリアクションできお、か぀、それがリアルタむムで各ナヌザヌのUIに反映される、ずいう非垞に倉化が速い゜フトりェアです。そんなMisskeyにおいお、ナヌザヌを匕き止めるひずきわ印象的なUIが、この匷制確認UIです。

ナヌザヌに「閉じる」のようなボタンではなく、「わかった」ずいうボタンを抌すこずを匷制しおいるずころが特城的です。ナヌザヌに゜フトりェアを玠早く操䜜されるず困る代衚的な事䟋ずしお、「゜フトりェアからの重芁なお知らせ」「深刻な゚ラヌメッセヌゞ」などがありたすが、このUIはそうした堎合に有効です。

䞀方で、匷制確認UIを採甚するべきではない堎合もありたす。䟋えば「Cookie同意バナヌ」は、EUのGDPRにおいおは、「同意する」ボタンだけではなく「拒吊する」ずいうボタンを必ず蚭眮するこずが矩務付けられおいたす。

埌戻り䞍可胜UI

ナヌザヌに゜フトりェアを玠早く操䜜されるず困るもう䞀぀の代衚的な事䟋ずしおは、「アカりントの削陀」などの、元に戻すこずができない、埌戻り䞍可胜な操䜜が挙げられたす。こちらの具䜓的な䟋は以䞋の通りです。

  • GitHubのリポゞトリ削陀UIのスクリヌンショット、ステップ1

    GitHubのリポゞトリ削陀UIのスクリヌンショットステップ1

  • GitHubのリポゞトリ削陀UIのスクリヌンショット、ステップ2

    GitHubのリポゞトリ削陀UIのスクリヌンショットステップ2

  • GitHubのリポゞトリ削陀UIのスクリヌンショット、ステップ3

    GitHubのリポゞトリ削陀UIのスクリヌンショットステップ3

  • GitHubのリポゞトリ削陀UIのスクリヌンショット、ステップ4

    GitHubのリポゞトリ削陀UIのスクリヌンショットステップ4

GitHubにおいおは、リポゞトリの削陀時にナヌザヌにそのリポゞトリの名前を入力させるこずで、確実な意志の確認ずしおいたす。このように、コンテンツの削陀時にナヌザヌにテキストの入力を求めおくるパタヌン自䜓はよくあるものですが、GitHubの堎合は、そこに至るたでに、2぀のモヌダルダむアログの内容を確認しおボタンを抌す必芁がありたす。

そしお、単にモヌダルダむアログでし぀こく慎重に確認を求めおくるだけではなく、「リポゞトリを削陀する」などの埌戻り䞍可胜な操䜜を実行するためのボタンが、画面を䞀番䞋たでスクロヌルしないずいけない最䞋郚に「Danger Zone」ず名付けられおたずめお配眮されおいるこずも重芁です。

前回の内容を螏たえるず、慎重な確認が必芁な操䜜はあえおファヌストビュヌには配眮しない、ずいうこずもおもおなしになるのです。コンテンツの削陀時にここたでし぀こくナヌザヌに確認を求めおくる゜フトりェアも珍しいず思っお、GitHubの䟋をご玹介したした。

味集䞭カりンタヌUI

次に、筆者が味集䞭カりンタヌUIず呌んでいるUIを玹介したす。こちらも、たずは具䜓的なスクリヌンショットをご芧ください。

  • Googleのトップペヌゞ

    Googleのトップペヌゞ

  • Googleのログむン画面

    Googleのログむン画面

これらのスクリヌンショットをお芋せしおも、共通点がすぐには䌝わらないかもしれたせん。味集䞭カりンタヌUIは、「匷制確認UI」や「埌戻り䞍可胜UI」ほど、明確な匷い特城のあるパタヌンずいうわけではありたせん。

画面がいろいろなUIコンポヌネントでごちゃごちゃしおいるず、ナヌザヌに「自分は䞀䜓いた䜕をしお良いのか」ず迷わせおしたいたす。䜙蚈な芁玠を䞀切排陀しお、特定のアクションしかできないくらいたで削ぎ萜ずすこずで、正確な操䜜を促すこずができたす。

このように、ナヌザヌに雑念を払っお目の前の䜜業に萜ち着いお集䞭するこずを促すようなUIを、筆者は味集䞭カりンタヌUIず呌んでいたす。語源はもちろん、「倩然ずんこ぀ラヌメン専門店 䞀蘭」の「味集䞭カりンタヌ」です。

「倩然ずんこ぀ラヌメン専門店 䞀蘭」はカりンタヌ垭のみで、さらに垭ごずに仕切りがあるこずで、他人ず䌚話などせずラヌメンの味に集䞭できるのです。

  • 䞀蘭の味集䞭カりンタヌ 出兞䞀蘭 ( https://ichiran.com/column/clmn-005039.html )

    䞀蘭の味集䞭カりンタヌ 出兞䞀蘭 ( https://ichiran.com/column/clmn-005039.html )

人間の速さず情報環境の蚭蚈

今回、最埌に味集䞭カりンタヌUIをご玹介したこずには、理由がありたす。飲食店における内装蚭蚈は、埓業員やお客様の行動に倧きな圱響を持぀ず蚀われおいたす。䞀蘭のようにカりンタヌ垭のみで壁で仕切られたラヌメン店であれば、そこではお客様は目の前のラヌメンず向き合うしかなくなりたす。䞀方で、䟋えば、オヌプンキッチンのラヌメン店であれば、そこで働く埓業員たちはお客様からも目に芋える厚房の枅朔さを倧切にするでしょう。

筆者が䌝えたいこずは、゜フトりェアにおけるUIも、単なる衚局的なものではなく、ナヌザヌの行動を倧きく巊右しおいるずいうこずです。今回ご玹介したように、ただすべおの操䜜が速くできるだけでは、それが良い゜フトりェアになるずは限りたせん。あえお操䜜を難しく・遅くするなど、ゆっくりず慎重に集䞭しお操䜜しおもらうためのUIのパタヌンがありたす。

本皿が、より良い゜フトりェアの開発に関しお䜕かしらのむンスピレヌションを䞎えられるものになっおいたら嬉しいです。

文yuiseki