青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

デザイン上のボタンと、実際のヒットエリアと、ヒットエリア外の挙動。

qiita.com

というQiitaを読みまして。

そういえば自分も以前やったプロジェクトでデザイナー、アートディレクターにヒットエリアについて後々けっこう言われたなあ、と。

ヒットエリアと、更にはヒットエリア外の挙動も。

特にモーダルはそうだと思うんですけど、閉じたいときって✗ボタンを目指して押さなければいけない。けど、他の部分を押してもキャンセルさせたい、と。

これ、どこまでやるのか難しいですよね。

ヒットエリアも、デザインとしてもらったデータに、ボタンはデザインされているけど、そのボタンだけクリックできればいいのか、というとそうではない、と。

medium.com

ボタンだけだとクリック範囲が狭すぎて、ユーザーがクリックできると思っても出来ないことがある。特にスマホではテキストボタンのクリックは難しい。

f:id:XxGodmoonxX:20191024001544p:plain

が、例えばじゃあリンク飛ぶコンテンツ、箱自体をボタンとして、そこ押したら飛ぶようにするとなると、PCならばホバーでそこクリックできるよ、と教えられる。

でもスマホでは教える手段ないですよね。で、そのつもりなくてクリックしちゃった、ってことあるんじゃないかなあ、と。でもスクロール中に間違ってクリックはないか。
一応ボタンがある、という事実が実質クリックできる、と教えてくれてはいるのか。

というかユーザーとしてストレスなのは

  • クリックしたいけど出来ない
  • 画面閉じたいけど閉じられない

が最大なのかな、そう思うと、通常のサイトでリンク押したい、ヒットエリアはほぼ最大になるよう実装すべきで、逆に特殊な状態でそれをキャンセルしたい、閉じたい、(モーダルとか)はその部分の動作を最大になるように実装すべきなのか。

  • クリックしたくないけどしてしまう

なんてあの透明な広告が下からふわーって出てくる最悪なやつくらいで、他ではないのかな。
やりたい動作の最大化を目指すべきなのか。


となると結論、

  • リンクを飛ばすヒットエリア
  • 特殊な状態のキャンセル動作

は最大化を目指し実装すべきなのだろうな。次はデザイナーに言われずともある程度これでユーザーのUXとして問題ない、というものに仕上げていきたいですね。