ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    スポンサーサイト

    このエントリーを含むはてなブックマーク はてなブックマーク - スポンサーサイト あとで読む
    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    誤タップ防止のため、行間を広げてスマホUIを改善

    このエントリーを含むはてなブックマーク はてなブックマーク - 誤タップ防止のため、行間を広げてスマホUIを改善 あとで読む
    PCと同じ感覚でWebデザインをしていると、スマホだと使いづらくなります。
    スマホで誤タップ防止のために、行間を広げると良い、というアドバイスがありました。

    行間「5ピクセル拡大」


    Yahoo!ニュースの見出し行間「5ピクセルの差」に見えた光~ヒートマップでUI改善 - Yahoo!ニュース スタッフブログ

    「誤タップ」はどこ?ヒートマップから見えたもの
    A/Bテストのきっかけは、定期的に行っているユーザーヒアリング調査や、周囲から「タブを押しにくい」などの声を受けたことなどでした。
    「誤タップ」がどこで起こっているか、データを出すところからはじめました。
    (※「誤タップ」とは、「タブやリンクをタップしようとしたが、ページ遷移などの反応がなかったタップ」などのことを指します)



    行間「5ピクセル拡大」に軍配
    従来のデザインと比較してみたところ、唯一総クリック数の割合が上昇したのが、1の「記事の行間を5ピクセル広げた」バージョンでした(プラス1.08%)。
    上記の数値のほか、誤タップの改善状況や、他サービスの枠などへの影響についてのデータも確認した上で、「記事の行間を5ピクセル広げた」仕様の採用が決定。


    自分が作ったサイトなのに、スマホで操作すると、自分でも使いづらいと思うことがありました。
    Yahoo!ニュースのUI改善策のように、行間を広げたら、タップしやすくなりました!

    A/Bテストは大事、っていう話ですね?

    スマートフォンUIデザインパターン ~心地よいユーザーインターフェースの原則~
    鈴木雅彦
    技術評論社
    2013-08-19

    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/1123-dad3d6a4

    FC2Ad

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。