管理画面まわりの事情,負の UI/UX について
管理画面を作ってると,「みだりに押されたくはないが,かといって無いと不便」みたいなボタン (或いはそれ以外の何か) を画面上に置きたくなる時があると思う.
例えばバッチで行うような処理を (なんらかの事情で) 即時実行するボタンのようなやつ.こういったボタンは便利だけれど,無闇に押されるとシステムに対する負荷が上がり,サービスの提供に悪影響を及ぼす場合があるのでなるべく押しにくくあるべきだと思う.
そういった,おもてなしを目的とはせず,むしろ或る操作に対する敷居を高くするための,謂わば負の UI・負の UX をどうするべきかを軽く考えたのでここに記す.
警告を出す
例えばこの画像のような感じ.
こうして注意を喚起することで精神に注意を促すくことで,みだりな利用を抑制するという方法.ボタンを赤くすることで危険な処理であることも表している.
加えてボタンが押された時に念を押すための confirm ダイアログを出すというのも良さそう.
この方法は素朴かつ簡単だけれど,効果は薄いと思う.最初のうちは注意を喚起することができるかも知れないけれど,人間は時間が経つにつれて慣れてくるので,次第に無意味な警告文と化す可能性が高い.
とは言え,「押さないでくれ!」というエクスキューズにはなると思う.
ボタン自体を押しにくくする
例えばボタンの要素のサイズを小さくして押しにくくするとか,画面を render する度にボタンが表示される場所がその時々で変わるとか,ボタンがランダムに動くとか.とは言え,これはただ単純に押しにくくなるだけで,それが「注意しなければならない処理」かどうかは分かりにくい気がする.単純に腹が立つインターフェイスかもしれない.
そういった手法よりもむしろ,(1人でもできるけれど) 人間が2人以上いないとボタンが押しにくい,みたいなインターフェイスの方が良い可能性がある.例えば,キーボードの asdfjkl: キー全てを押していないとボタンがアクティブにならないとか.核兵器の起動スイッチなんかは,2人の人間が互いに鍵をひねりながらスイッチを押すみたいな,そういう仕組みだった気がする.1人では容易に押せないことで注意を要する処理であることがなんとなく分かる感じがするし,仮に2人以上で実行するとしても単独の人間の判断ではなく複数の人間の合意を得て実行することになるのである種の抑制が効く可能性が高まる.とは言え,割と凝った仕組みなので実装がだるいというのがある.コスト感と相談する必要がありそう.
要素自体を hidden にする
これは我々がよくやる方法で,容易に操作させたくない要素を <div hidden></div>
でくくることで見えなくしてしまうという荒業.もしもその操作を行いたい場合は,Developer Tools 等を使って該当する hidden
を削除し,要素を露出させることで処理を行える状態にするという方法.
基本的にその隠し div の存在を知らない人は使うことが出来ないし,Developer Tools を使えないタイプの人にも無闇に使われないので,割と安全という感じがある.が,「隠し機能」という体になってしまうので運用する人の間で口伝でしか伝わらないので,どこかで知識の断絶が起きてしまう可能性もある.
最近やったやつ
最近の管理画面の様子です https://t.co/TcSOd9RIVl
— 画力の高まり (@moznion) 2016, 2月 12
警告文が震えることで危険を喚起している.人間,高速に動くものに対しては警戒するものである.
本来,こういう処理は css animation を使ってやるべきなのだろうけど,今回は要素幅を固定した上で<marquee behavior="alternate" scrollamount="100">
という風にすることで,高速に要素を往復させるというバッドノウハウで実現した.ボタンを震えさせても良かったかもしれない.
まあ,このように要素を震えさせるのは悪い冗談としても,ボタンを押しにくくする為の負の UI をどうしていくかを考えていく必要があるように思う.どうすべきか.
[追記]
良さそう
管理画面まわりの事情,負の UI/UX について - その手の平は尻もつかめるさb.hatena.ne.jpGitHubでリポジトリ削除するときにリポジトリ名要求されるのが参考になるかも? と思いました
2016/02/14 17:31