リンクとボタンを｢押せる｣だけでデザインしない

リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」[1]という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタンは明確に異なる機能や振る舞いをもっている。その振る舞いやそれに対するユーザーのメンタルモデルから結果ビジュアルが同じになるのならいいのだが、ただ単純に「押せる」ことだけを基準にデザインされてしまうのは具合が悪い。このエントリーでは、リンクとボタンをデザインするにあたって「押せる」だけではなく、他にも判断材料となるものがあることを共有したいと思う。 前提と定義 今回の話はウェブブラウザで動作するUIを前提に考える。途中で言及するが、リンクがURLに関係していることと、URLをユーザーが意図的に変更できることが大きく関係するので、ネイティブアプリ

[securecat]

そもそもリンクは押せません。ボタンのようなスタイルをすることで押せるようになるのは、それはボタンというスタイルがそうさせているだけです。ちなみに振る舞いの列挙からcursorプロパティの言及が抜けてますよ。

[Cherenkov]

アフォーダンスとシグニファイア

[mas-higa]

自分には web 開発のリテラシーがないので、これまで予想と違う挙動がリンク・ボタン・サブミットの違いから起きているという発想がなかった。

[strawberryhunter]

話が長い。リンクはユーザーが任意で新しいタブに開ける。それを許可したい場合に使う。それ以外がボタンということでいいだろう。リンクの外観でボタンの挙動は裏切りだが、逆は許容範囲かなと思う。

[umai_bow]

用途の広さで言うとボタン⊃リンクな気はする

[kvx]

はい

[rryu]

どちらかというとリンクに対してクリックできることを強調するとボタンになってしまうのだと思う。それを初めからボタンとして考えるのはちょっと違うというのはそうだと思う。