タッチスクリーンはキーボードやマウスとは異なる働きをします
モバイルデバイス用のWebサイトを設計する初期段階では、ほとんどの開発者が製品を2つに分岐しました。 彼らは完全機能のデスクトップ版をリリースし、キャンディーバーの携帯電話や3Gワイヤレスネットワークの機能やネットワークスピードに対応するために、ブランドやイメージの多くを取り除いた「モバイルに最適化された」バージョンをリリースしました。
しかし、現代のスマートフォンは、昨日のDSL回線よりも優れた、または優れたネットワークを介して、デスクトップPCと同じくらい効率的にWebページをレンダリングできます。
次に、設計をシングルユーザーインターフェイスに戻します。 しかし、デザイナーにとってのリスクは、スマートフォンやタブレットが近代的なレスポンシブウェブサイトをレンダリングできないということではありません。 むしろ、タッチスクリーンデバイス上のユーザ入力の方法は、基礎となるサイトデザインに有意義な変更を必要とすることである。 訪問者がキーボードとマウスを持っていると仮定してウェブサイトを構築した日は終わった。
基本タッチスクリーンデザインルール
タッチスクリーンに対応したWebインターフェイスを設計するには、これまでの従来のモニタ - マウス - キーボードアプローチの進化が必要です。 特に、ジェスチャー、タップ、マルチタッチ入力などの対話に対応する必要があります。
- タッピングは正確ではありません。 顧客が幼児の指を持っていない限り、非常に正確なソフトウェアコントロールがあっても、タップして正確にするのは難しいでしょう。
- ジェスチャーはタップとは異なります。 タッチスクリーン上の長いページをスクロールするために、ユーザは1つの指をブラウザウィンドウの上にスワイプする。 これは、マウスでブラウズすることを認識するまで、マウスを下に動かすまで、重要ではないように見えるかもしれません。
- 2本以上の指タップ。 ユーザーは、同時にデバイス上で複数の指タップを使用して、指タップを制御できます。 これらの追加のタップは、ユーザーのデバイスのオペレーティングシステムに応じて特定のものを意味する可能性があります。
- 高グレアデバイス。 ほとんどのタッチスクリーンタブレットのスクリーンは頑丈なガラスで作られています。 この材料は、明るい光の状況では、多くのグレアで読みづらいことがあります。 加えて、すべてのタッチで、指紋や汚れが画面に表示され、ページの外観に影響を与える可能性があります。
- 画面上のキーボード。 一部のユーザーはタブレットに接続するワイヤレスキーボードを使用していますが、ほとんどのタブレットユーザーはデータ入力にスクリーンキーボードを使用します。 OSKの入力は、面倒なタイプミスを招くだけでなく、長時間使用するのが苦手です。
デバイスのこれらの機能のため、Webデザイナーはタッチスクリーンユーザーのためのいくつかの基本的なデザインルールを強調する必要があります。
- クリック可能なアイテムを近づけすぎないようにしてください。 どのくらい近くに近すぎるかを定義する難易度の規則はありませんが、特に小さなフォントサイズのリンクのリストは、太い指でクリック（タップ）することでナビゲートするのが難しい場合があります。 リンクを試してクリックするだけでズームインしなければならないのは面倒です。 この原則は、リンクと同様にボタンにも当てはまります。
- 階層は開いたままにするのは難しいかもしれません。 ダイナミックメニューの一般的な形式の1つは、ユーザーがクリックしてサブメニュー上にマウスを移動すると、JavaScriptを使用してサブメニューが開きます。 これらの状態は、タッチスクリーン上に使用するのが非常に困難または不可能な場合があります。
- リンクとクリック可能な領域をウィンドウの右端から移動します。 ほとんどの人は右利きであり、画面のその側をスクロールする傾向があります。 スクロールはジェスチャーで行われるため、誤ってリンク上でスワイプを開始することがあります。 ユーザーがページをスクロールしたいと思ったら、迷惑になり、誤ってリンクをタップしてしまいます。 右側からリンクを移動することで、この不都合を避けることができます。
- マウスはありません。 これは、マウスポインタがないことを意味します 。 何かがクリック可能であることを示すのに役立つようにマウスポインタを変えてはなりません。
- ホバー状態は存在しません。 上記の結果として、マウスが存在しないので、マウスを動かすことはありません。 リンクはタッチスクリーンデバイス上でクリック（タップ）されているかどうかに関係なく、ユーザーはカラー変更、ツールヒント、ステータスバーの変更などのホバー状態からの有用な情報を推論することはできません。
- 黒い背景がグレアを強調します。 黒い背景のサイトは、グレアのためにタッチスクリーンデバイス上で読みにくいことがあります。 黒は、デバイス上の指紋をより鮮明に表示し、画面をぼかします。 そして、黒は、スクリーン上のテキストよりも頻繁にユーザの顔を反映して画面を鏡に変えることができる。
- フォーム内の長いテキストブロックは書きにくい。 iPadやAndroidやWindowsのタブレットに小説全体を書き込むことは可能ですが、大部分の人は画面上のキーボードを使用して長いテキストを好きになりません。 できるだけ短く簡単にデータを入力できるように設計すればするほど、より良いデータが得られます。
タッチスクリーンを使用したデザインの最も重要な点は、タッチスクリーンデバイスでページをテストすることです。 多くのiPadやAndroidのエミュレータが利用可能で、Windowsのタブレットもたくさんありますが、まだタッチスクリーンの感覚を提供していません。 新しいウェブサイトのデザインをリリースする前に 、タブレットから出てそれらを試していない限り、リンクが近すぎる、ボタンが小さすぎる、グレアがページをあまりにも読みにくくすることはできません。