2012年4月24日火曜日

Freeway スマートフォンでロールオーバーボタンを押しやすく

本日はロールオーバーボタンのちょっとしたコツについてです。
先日、iPhoneで自作サイトのロールオーバーボタンを押してみたのですが、非常に押し辛いと感じました。文字の部分を正確に押さないとリンクにジャンプしないんです。何度も押し直してやっと反応する......みたいな状態で、フラストレーションがたまります。これではせっかく訪れた訪問者様が帰ってしまう........。

通常ロールオーバーボタンを作成する場合下記の様な手順だと思います。
1.アイテムを用意して、
2.アイテムを重ね合わせてアクションを適用、文字の部分を選択しリンク先を指定する。

しかし、これだと文字の部分を正確に押さないとリンクジャンプしません。マウスだと良いのですが、スマートフォンの画面で、この小さい文字を正確に押すのはかなり至難の業です。

そこで認識する範囲を広げる方法を考えたいと思います。
まずは文字のアイテムをボタンのアイテムと同じサイズに広げます。
文字が左上に寄ってしまっているので中央に配置します。横軸は簡単に中央配置できますが、縦軸は一度改行して、改行した文字サイズを調整する事で中央に配置します。
あとは重ねてリンクを指定するのですが、文字ではなくアイテム自体にリンクを指定します。

そうする事で、リンクの認識範囲が広がり、ボタンが押しやすくなります。

0 件のコメント:

コメントを投稿