モバイルのためのUXデザイン②:インタラクション編

Elaine McVicar

Elaineは、13年以上Webデザインに携わっているベテランのWebデザイナーです。ユーザーエクスペリエンスやWebデザインに対する思い入れが強く、執筆活動も盛んに行っています。

この記事はThe UX Boothからの翻訳転載です。配信元または著者の許可を得て配信しています。

Designing for Mobile, Part 2: Interaction Design (2013-03-26)

インタラクションデザイナー・Elaine McVicar氏によるモバイルのためのUXデザインシリーズ。第2回目の今回は、情報アーキテクチャに基づいた、モバイルサイトにおけるインタラクションデザインを考察します。様々な実例をもとに、モバイル向けのデザインとPC向けのデザインがどのように異なるのかを解説していきます。

私が初めて手にした携帯電話はNokiaの5110という機種で、1998年に購入しました。基本的な機能は通話とテキストメッセージのみで、ゲームはヘビゲームだけしかプレイすることができませんでした。携帯電話の性能や機能は、製造業者によって完全に管理されているような状態だったのです。しかし現在は、スマホやタッチスクリーン、アプリストアなどの台頭により、Webデザイナーには無限の可能性が広がっています。このような新しいデバイスや機能について理解を深めることは、Webデザイナーである私たちの義務であると思っています。

今回は、モバイルのためのUXデザインのパート2。インタラクションデザインについて解説していきます。パート1をまだご覧になっていない方のために、前回のおさらいを簡単にしてみましょう。前回の「モバイルのためのUXデザイン①:情報アーキテクチャ編」の記事では、モバイル向けのWebデザイン、特にユーザーの状況や行動、感情などのモバイルコンテキストについて、Webデザイナーが直面している主な課題について解説しました。このようなモバイルコンテキストはユーザーに大きな影響を与えるため、Webデザインの作業全体を通して検討することが大切です。

前回の記事では、モバイルコンテキストにおける情報アーキテクチャについて考察しました。情報アーキテクチャは、Webデザインの作業工程の基礎となる非常に重要な要素です。モバイル向けのWebデザイン構築の詳細を見る前に、モバイルデバイス用のインタラクションデザインがPC向けのものとどう異なるのかについて見ていきたいと思います。

インタラクションの設計

現在のモバイルデバイスのほとんどが、タッチスクリーンを採用しています。タッチスクリーンのおかげで、ユーザーはコンテンツを閲覧するだけでなく、能動的にインタラクションを行うことができるのです。このため、Webデザイナーは人間工学や動作、トランジション (遷移) などを考慮し、最終的にモバイルデバイスに特化したインタラクションパターンを構築しなければなりません。

人間工学

人間工学に基づいたモバイル向けWebデザインは、デバイスの寸法タッチスクリーンの実用性について考慮する必要があります。ユーザーのデバイスの持ち方やタッチスクリーンへのタッチの仕方などは、ユーザーの利便性を考慮する上でとても重要です。

ヒットエリア (スクリーン上でユーザーのタッチに反応する領域) には、ユーザーが正確に操作を行えるだけの十分な広さが必要となります。平均的な指先の幅は1-2cmといわれており、これは標準的なスクリーンでは44-57ピクセル、ピクセル密度が高いスクリーンでは88-114ピクセルに相当します。NokiaAppleMicrosoftは、タッチスクリーンの性質を考慮して、微妙に異なる複数のサイズ展開を推めています。

しかしながら、ヒットエリアに関する厳密なルールはないので、タッチスクリーンでの操作に対するユーザーのニーズやタスクの重要性、操作の迅速性を考慮して、デザインを構築するようにしましょう。

ジェスチャー

タッチスクリーンはユーザーが指でタッチして操作するため、ユーザーがタッチしている部分のコンテンツが閲覧しづらい状況になります。操作を性格にするには、指の動作を正確に捉えることが重要になります。GoogleのAndroidAppleのiOSMicrosoftのWindows 8などは、ユーザーのタッチする動作を正確に感知する操作システムを採用しています。

以下の表は、各プラットフォームのタッチインターフェースについてまとめたものです。

table2さらに、タッチインターフェースを基本としたモバイルデバイス向けに、動作を開発するための規定やパターンなども増えつつあります。Webデザイナーは今後、様々なアプリケーションに適した動作による操作を考慮・開発する必要があるでしょう。

トランジション

トランジション (遷移) は、異なるアプリケーションの状態への移行をスムーズに行うための重要なインタラクションで、エピソードや物語の展開、抽象的なテーマを表現するのに役立ちます。より一般的な実用例としては、直前に閲覧していたコンテンツを再度表示したり、ユーザーが今どのコンテンツページにいるのかを把握するために使用されます。

以下の表は、基本的なトランジション (遷移) 操作をまとめたものです。

table1

上記の他にも多数のトランジション 操作があるので、それぞれのインタラクションに適したものを選ぶようにしましょう。