目次一覧
状態:試行錯誤履歴
閲覧数:2,189
投稿日:2019-10-02
更新日:2019-10-02
問題発生 ／ 検索してみたが ／ デフォルトボタンの方が分かりやすい？
デフォルトボタン使用有無について他サイト調査
デフォルトボタン使用有無について他サイト調査
問題発生 ／ 検索してみたが ／ デフォルトボタンの方が分かりやすい？
問題発生
作成中のWebサイトにおいて、「ボタン」「リンク」に統一感がない
・ユーザー定義ボタン
・デフォルトボタン
・テキストリンク
見た目に一貫性がない
もちろんインタラクションにも一貫性がない
サイト制作者がそう感じているのなら
アクセスしてくるユーザーは猶更そう感じるかも
生じた疑問
・「ボタン」と「テキストリンク」はどう使い分けるの？
・これまで「疑問にすら思わなかった」こと自体が問題かも
検索してみたが
期待したような「納得する情報」は見つからなかった
仕方がないので
プロジェクト単位で、決め打ちしていく
→ P46
デフォルトボタンの方が分かりやすい？
フォーム送信ボタン1つだけなら良いが
・確認してみたら、デフォルトボタン使用箇所はたくさんあった
・これ全部変更するの？
・もしかすると、デフォルトボタンの方がユーザーには分かりやすくない？
投稿する
ファイルを選択
選択キャンセル
アップロードする
チェックしたファイルを削除する
ファイルを選択
選択キャンセル
アップロードする
チェックしたファイルを削除する
デフォルトボタン使用有無について他サイト調査
デフォルトボタン使用有無について他サイト調査
note
・デフォルトボタンは未使用
・「投稿」ボタンHTML
<button data-type="primary" data-size="small" data-width="fit" data-disable-focus="false" type="button" data-v-45107202="" class="a-button m-iconButton" data-v-764ea036="" data-v-0efa98cc=""><div class="a-button__inner" data-v-764ea036=""><span class="m-iconButton__labelWithIcon" data-v-45107202=""><i aria-label="create" class="a-icon a-icon--create a-icon--size_small" data-v-40f71bea="" data-v-45107202=""></i></span> <span data-v-45107202="">投稿</span></div></button>
・「画像を追加」ボタンHTML(意味合い的には「ファイルを選択」ボタンに該当)<div data-v-764ea036="" class="a-button__inner"><span data-v-45107202="" class="m-iconButton__labelWithIcon"><i data-v-40f71bea="" data-v-45107202="" aria-label="image" class="a-icon a-icon--image a-icon--size_small"></i></span> <span data-v-45107202="">画像を追加</span></div>
Qiita
・デフォルトボタンは未使用
・「投稿する」ボタンHTML
<a class="st-Header_postButton mr-2 px-2" href="/drafts/new"><span class="fa fa-fw fa-pencil-square-o mr-1"></span>投稿する</a>
・ボタン一覧
・ボタン候補
・ボタン候補2 ／ 「ボタン」エリア外で「テキスト」表示しても良いの？