Apple Watchのインタラクションデザインにおける4つの全く異なる体験が明らかに

今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを3週間続けて取り上げても構いません。以下に翻訳を入力してください。

Wallaby は、買い物をするときにさまざまな場所に応じて支払いに最適なクレジットカードを選択して、割引やポイントを最大限に活用できる個人向け財務アプリです。しかし、私たちの理解によれば、現実には、多くのユーザーはチェックアウト時に Wallaby が提供する機能を使用するために携帯電話を取り出すことを忘れたり、面倒だと感じたりすることが多いようです。

Apple Watch版のWallabyがこの課題をある程度解決してくれることを期待しています。実際、これまでにも、Pebbel、Android Wear、Samsung Galaxy Gear、さらにはGoogle Glass用のバージョンを作成しており、どの機能がウェアラブルデバイスに適しているかを明確に把握しています。

本質的に、ウェアラブルデバイスの設計は、コンテキストと人間と機械の相互作用の効率性に関するものです。 Apple Watch の重要な機能、たとえば超小型の画面サイズ、常に手首に装着できること、さまざまなインタラクション方法などにより、新しいデザインパラダイムや新しい UX デザイン課題の解決方法など、デザインプロセスで多くの新しいことを学ぶことができました。

ナビゲーション

現在、Apple Watch では、階層型とページベースの 2 つのナビゲーション モードのみが提供されています。

階層ナビゲーションは、より複雑な機能やデータを持つ製品に適しています。特定の機能やコンテンツに段階的にアクセスする必要がある場合、このナビゲーション モードが最適です。ページベースのナビゲーションは、情報モデルが比較的単純で、異なるモジュール間に直接的なデータの関連付けがない製品に適しています。

Wallaby ではページベースのナビゲーションを使用しました。情報構造の観点から見ると、各機能モジュールは互いに強く関連しておらず、階層的なコンテンツもそれほど多くないため、階層ナビゲーションによって整理する必要はありません。インタラクションの観点から見ると、ページナビゲーションの枠組みの中で、左右にスワイプすることで、さまざまな機能モジュールを切り替えることができます。「Nearby」モジュールでは、上下にスワイプするか、クラウンをスクロールして、近くのショッピングスポットに適用できるクレジットカードを表示できます。ヒューマンコンピューターインタラクションの効率は非常に高く、階層ナビゲーションのように、ユーザーに小さなボタンを正確にクリックしてコンテンツにアクセスすることを強制する必要はありません。特に、Wallaby の一般的な使用シナリオ (ユーザーが立っているときや歩いているとき) では、2 つのナビゲーション モード間のインタラクション コストの違いは依然として非常に明白です。

通知する

適切に設計されていれば、アプリは適切な通知を適切なタイミングと場所でユーザーに届けることができ、特に Watch アプリの場合、製品が平凡なものから成功へと変わる可能性があります。

ウォッチは常にユーザーの手首に装着され、人と機械の距離は以前のデバイスよりも近いため、通知メカニズムを制限して、最も重要でコンテキストに沿った情報のみが送信されるようにし、その情報を可能な限り短い形式で提示する必要があります。そうしないと、ユーザーに継続的かつ深刻な干渉を引き起こし、製品からの通知情報を完全にブロックせざるを得なくなります。

Wallaby は現在、特定のカードが本日割引を提供していることや、請求書や年会費に関する情報をユーザーに通知するなど、重要なイベントのみに通知を制限しています。将来的には、Watchのハードウェア機能がさらに向上し、WatchとiPhoneの電力をあまり消費せずに、ユーザーの位置を正確に取得できるようになります。その際、ユーザーが店舗やショッピングモールに入ると、どのクレジットカードがそこでの使用に適しているかを知らせる即時通知を送信できるため、ユーザーは自分でクエリを開始しなくても、現在の状況や行動目標に最も適した情報を取得できます。

複雑なタスク

入力や設定が多すぎる複雑なタスクは、画面が非常に小さく操作が難しい Watch のようなデバイスには本質的に適していません。

この種の機能の場合は、iPhone で操作する方が理にかなっています。複数のデバイス間でシームレスなエクスペリエンスを確保するために、iOS が提供する Handoff 機能を活用しました。

アカウントの作成、認証の取得、銀行データへの接続など、より複雑なタスクをユーザーに実行してもらう必要がある場合は、次の操作を iPhone で実行する必要があることをユーザーに伝えるメッセージが表示されます。 iPhone の電源を入れると、インターフェースは自動的に関連するプロセスに切り替わり、Watch で中断された手順を続行します。

アニメーション

精巧で表現力豊かなモーションエフェクトは、インタラクティブな体験を強化し、製品の楽しさを増すことができます。通常、Framer を使用してインタラクティブなプロトタイプを作成し、アニメーションのさまざまなプロパティをデバッグします。

Watch アプリ用のアニメーションを作成する場合、これまでのように開発者にコードで完成させることはできないことに注意することが重要です。Watch のアニメーションは画像シーケンスで構築されますが、GIF アニメーションを開発者に渡してインターフェイスに組み込むこともできません。デザイナーは、アニメーションの各フレームに静止画像を提供する必要があります。

最も効率的な方法は、アニメーション ファイルを After Effects または Photoshop にインポートし、画像シーケンスをエクスポートすることです。 Photoshop でこれを行う方法を簡単に説明します。

1. Photoshop で GIF を開くか、MOV ファイルをインポートします。

2. 必要に応じて、アニメーションのフレームレートを調整します。

3. 「ファイル – エクスポート – ビデオのレンダリング」を選択します。

4. 画像シーケンスが序数「1」から始まるように、名前を付けるなどの設定を行います。 「レンダリング」ボタンをクリックすると、Photoshop はアニメーションをフレームごとに分解し、指定された形式で画像として保存します。

5. TinyPNG や ImageOptim などのツールを使用してこれらの画像を最適化し、ファイル サイズが大きくなりすぎないようにすることができます。

最後に、開発者のために、これらのファイルに @2x サフィックスを追加します。ファイルが多すぎる場合は、Automator などのツールを使用して完了することをお勧めします。

Automator を開き、「サービス」を選択します。

名前を変更したいファイルをドラッグします。

「ファイルとフォルダ」を選択し、「Finder 項目の名前を変更」をダブルクリックすると、元のファイルの命名方法を保護するために各画像のコピーを追加するかどうかを尋ねるダイアログ ボックスが表示されます。 「追加しない」をクリックすると、コピーを追加しないことを選択できます。

ドロップダウンリストから「テキストの追加」を選択し、「@2x」と入力し、挿入位置として「名前の後」を選択します。

最後に、右上隅の「実行」ボタンをクリックすれば完了です。

まとめ

Apple Watch のデザインはとても楽しいです。現時点では、デザインにおいて多くの制約があることは事実ですが、別の観点から見ると、コアエクスペリエンスに焦点を当て、最も基本的で簡素化されたインターフェースとインタラクションプロセスを作成し、自社製品の特性に基づいて最もコンテキストに応じた通知メカニズムを設計する必要もあります。より複雑な機能が必要な場合は、iPhone で Handoff を使用して完了することを検討する必要があります。さらに、製品のインタラクティブなエクスペリエンスを強化するために、適切な場所で適切なモーション効果を使用することを忘れないでください。