役割分担
例に挙げられたteratail,twitterのフォロー/アンフォローUIは最適解ではないと考えています。
それぞれの役割については、s8_chu さんとほぼ同じ考えを持っています。
タグ | 役割 |
---|
<input type="checkbox"> | フォーム(設定)の入力を表す |
<button> | (type属性値がないなら)、フォーム(設定)の送信を表す |
問題はteratail,twitterがこれらの役割を一つの要素でまかなっている事にあります。
<button>
を使っているのですから、フォロー/アンフォローのリクエストを送るのは問題ないでしょう。
しかし、現在のフォロー状態を <button>
で表すのは不適切と言わざるを得ません。
問題A. 押せるボタンである事が見た目から分からない
「フォロー中」を押したらフォロー解除されるという挙動はボタンを押してみるまで分かりません。
問題B. 表示されている内容が何を表しているのか分からない
teratail,twitterでは [フォロー中] と表示されているボタンにマウスポインタを合わせれば、[解除] と表示されるので、勘のいいひとなら分かるでしょう。
しかし、次の点において良いUIとは思えません。
- 「ボタンかもしれない」と思われなければ、マウスポインタを合わせない
- スマートフォンのタッチUIでは確認がしづらい
- 音声ブラウザに配慮がない
teratail,twitterはそうではありませんが、某サイトでは
- [follow], [unfollow] をトグルする
- [follow] をクリックするとフォローされ、[unfollow] をクリックするとアンフォローされる
という仕様でした。
[unfollow] と表示されているので、フォローしていない状態だと思ってボタンをクリックすると、フォローが解除されてしまいます。
素直に英語を読めば、「follow(フォローせよ)」「unfollow(アンフォローせよ)」なのだから分かるだろう、という考えもあるかもしれませんが、現行設定を命令文から反転させて認識するのは回りくどく感じてしまいます。
解決策
「現行設定の表示」と「設定変更ボタン」は分割するのが適切と思います。
HTML
1<span class="follow-status">フォロー中</span>
2<button type="button" name="follow-status" value="false">フォロー解除する</button>
おそらく、狭い画面のスマートフォン画面用に考案されたUIですが、セマンティクス的には間違ったUIであると私は思います。
Re: ayaaya さん
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/11 23:05