INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

Industry Guide

20

分で読める

UX for Wearables : Your Ultimate Guide

UX design for wearables is growing in importance with nearly half of all Americans using smartwatches, a trend on the rise.

Anthony Miller、 Content Writer

ウェアラブル向けUXについて考えると、「そんなに難しいの?」と自分に問いかけたくなるのも無理はありません。画面領域は通常、スマートフォンの半分以下です(今日ではファブレットが標準になりつつあることを考えると、さらに少なくなります)。スマートウォッチのUXには独自のルールがあり、ウェアラブルのUXに取り組むUXデザイナーは、効率的で便利な体験を提供する方法を学ぶ必要があります。

ウェアラブル技術とは?

ウェアラブル技術とは、体に身につけて使う電子機器を指します。これらのウェアラブルデバイスは通常、組み込み技術を通じてデータを追跡したり、便利な機能を提供したりするよう設計されています。


ultimate-guide-smartwatch-ux

ウェアラブルデバイスと聞くと、たいていはスマートウォッチを思い浮かべるでしょう。技術革新とマイクロチップの小型化により、今では次のようなさまざまなデバイスを身につけられます。

  • スマートウォッチ

  • 音声コマンドを受け付け、スマートフォンと直接連携するスマートイヤホン

  • 現実を拡張し、装着者に現実世界へ重ねて情報を表示するよう設計されたスマートグラス

  • 組み込みセンサーを備え、メトリクスの追跡、ハプティックフィードバックの提供、さらには通話への応答や曲の切り替えまで行えるスマート衣服

  • 外出先での支払いとアクティビティ追跡を可能にするスマートリング

ウェアラブル向けUXとはどういう意味ですか?

ウェアラブルデバイスの大半には画面がないため、ウェアラブル向けのUXデザインは見落とされがちです。各ウェアラブルデバイスは、正しく機能するために少なくとも1台の他のデバイスと接続されることを覚えておくことが重要です。

たとえば、画面のないスマートリングで追跡されたデータは、いずれかの段階でスマートフォンと共有する必要があります。この場合、ウェアラブルのUXデザインは、接続を開始する手順、データを転送する手順、そしてアプリ自体のデザインに重点を置くことになります。

スマート衣服も同じです。センサーやハプティックフィードバックしか搭載していないものもあれば、特定のコマンドに反応するタッチコントロールを備えたものもあります。この場合、ウェアラブルのUXデザインは、そうしたトリガーと、ウェアラブルのスマート衣服と連携するスマートフォンアプリとの間のインタラクションに重点を置くことになります。

追跡できるデータの種類が増えるにつれて、ウェアラブルデバイスとスマートフォンアプリ間で起こりうるインタラクションも増えていきます。ここでのウェアラブル向けUXは、ほとんどのインタラクションが複数のデバイスをまたぐため、あらゆる製品設計において欠かせない要素となります。

画面のないUXデザイン

ウェアラブルデバイスの大多数は、小さな画面を備えたスマートウォッチです。しかし、それ以外のデバイスでは、常識に基づいて設計されたトリガーによるデバイス間インタラクションを構築する必要があります。ウェアラブルデバイスのユーザーが、ウェアラブルで達成できるインタラクションを完了するために、ペアリング済みのスマートフォンを見ることを好む、あるいはそうする必要があるなら、UXデザインを改善する必要があります。

インタラクションコスト - ウェアラブル向けUXデザイン成功の鍵

画面がないため、ほとんどのウェアラブルは最初のチュートリアルと、その後に直感的なインタラクションを促す実用的なトリガーに頼っています。スマートリングには複数のタッチトリガーがあり、ハプティックフィードバックを備えていることもあります。リングの特定の場所や方向へ指を滑らせるという単純な動作が、結果を引き起こすことがあります。その結果が直感に反していると、たとえば右にスワイプするとプレイリストの前の曲が再生されるような場合、ユーザーは日常的な使用に苦労し、最終的にはアプリを完全に使わなくなるかもしれません。

インタラクションコストとは?

インタラクションコストとは、ユーザーがあるアクションを達成するために必要な労力の合計です。ウェアラブルUXデザインにおけるインタラクションコストの目標は、筋肉の記憶だけで操作できるほど物事を単純にすることです。

シンプルなウェアラブル向けUXのプレイブックに従えば、インタラクションコストを低く保つことは、面倒ごとではなく自然な流れになります。

  • コア機能と見なされる特定のニーズに合わせて構築する

  • その結果、機能の肥大化を最小限に抑えられる

  • 具体的なユースケースを念頭に設計する

  • 少ないほうが多いことを忘れない(特にナビゲーションでは有効)

インタラクションコストの感じ方は人によって異なります。特に、ウェアラブルデバイスにあまり慣れていない人や色覚特性のある人ではそうです。とにかくシンプルに保ちさえすれば、特に画面のないウェアラブル向けUXを設計する場合は、きっと素晴らしい結果が得られるはずです。

画面付きウェアラブルのUXデザイン:スマートウォッチのUX


ultimate-guide-smartwatch-ux

レスポンシブデザインやモバイルファーストのアプローチ、あるいは製品が複数のデバイスで動作することを確実にする重要性についてはすでに触れました(最新のフラッグシップフォンは、平均的なデバイスよりも内部性能に余裕があります)。こうした考え方はすべて、ウェアラブルのUXデザインに当てはまります。これは特に画面のないウェアラブルデバイスで重要で、焦点はウェアラブルとアプリの間のインタラクションになります。

しかし、スマートウォッチのUXは別格です。

小さな画面のウェアラブル向けUXにはどう取り組むべきですか?

2019年当時、Pew Research Centerは米国の成人5人に1人がスマートウォッチまたはフィットネストラッカーを身につけていると述べていました。最近のValuePenguinの調査では、ほぼ2人に1人が定期的にスマートウォッチを着用しているとのことです。この成長トレンドの背景には単純な理由があります。私たちは以前より健康意識が高まり、データが好きで、そしてデバイス自体も時間短縮や健康改善といった本当のメリットを持ち始めているのです。

Wear OSWatchOSの間には、世の中に何百ものスマートウォッチとフィットネストラッカーがあります。どれも共通しているのは、画面が小さいことです。たとえばiPhone 14とApple Watch 8を見てみましょう。前者は6.1インチの画面を持ち、時計の画面は1.78インチです。ウェアラブル向けUXに取り組むとき、これは画面領域の30%に相当します。では、こんな制約の多いキャンバスでスマートウォッチUXデザインにどう取り組めばよいのでしょうか?

一目で把握できることを意識してスマートウォッチUIを設計する

限られたスペースしかない小さな画面で作業する場合、重要な情報を前面に出す必要があります。この情報は、一目で把握できなければなりません。

  • インタラクションは数秒で終わる必要がある

  • UXフローはできるだけシンプルである必要がある

  • 重要な情報が最優先である

スマートウォッチUXデザインは、利便性と一貫している必要があります。ウェアラブル向けUXデザイナーにぜひ問いかけたい重要な質問は、「スマホを手に取るほうが簡単なら、なぜわざわざ使うのですか?」でしょう。

この質問に答え、実機でコンセプトを探るには、適切なツールが必要です。スマートウォッチのプロトタイピングはそれ自体がUXデザインの一分野であり、より多くの企業が、利便性を土台にした美しいデザインを実現するために業界をリードするソリューションへと向かっています。

スマートウォッチUXをさらに高めたいなら、ProtoPieはGoogle Wear OSのチームでも使っているスマートウォッチ向けプロトタイピング製品を開発しています。私たちの言葉を鵜呑みにせず、Googleの皆さんの声を聞いてください。

[詳しく見る]

スマートウォッチのUXデザインにおける核となる概念とは?

一目で把握できることについては触れましたが、これはスマートウォッチのような画面付きウェアラブルのUXに取り組む際に念頭に置くべき多くの核となる概念のひとつにすぎません。UXデザイナーの深い世界へ飛び込み、スマートウォッチのプロトタイプを成功にも失敗にも導きうる核となる概念を見ていきましょう。

コア機能

従来のスマートフォンと比べて、魔法を起こすために使える画面領域が3分の1未満しかないなら、簡潔である必要があります。ウェアラブル向けUXに取り組む際には、コア機能を見極めることがこれまで以上に重要です。

コア機能の特定は、思うほど単純明快ではないかもしれません。ですが、発想段階からスマートウォッチのプロトタイプに対してユーザビリティテストを行っていれば、コア機能を見つけやすくなります。高精細プロトタイピングとユーザビリティテストは相互に補完し合うもので、スマートウォッチのプロトタイプ作成に役立ちます。

特定できたら、ターゲットユーザーの具体的なニーズに合わせてスマートウォッチUXとスマートウォッチのインターフェースを構築できます。コア機能は、メッセージを読むことや、運動中にフィットネスアプリを操作することのように単純なもので構いません。デバイスの種類や画面サイズ、解像度、処理能力の違いを考慮に入れると、話は難しくなります。

結局のところ:シンプルに保つことです。

応答性

UXデザイン、とりわけウェアラブル向けUXで最悪なのは、反応の鈍いインタラクションと読みにくいフォントです。この2つが合わさると、ユーザーはあっという間にスマートウォッチのプロトタイプを見放し、顧客は返金を求めるでしょう。

スマートウォッチUXにおける応答性は二面性があります。

  1. さまざまな画面サイズを念頭に置いて設計する:これには、低品質な画面でも判別できる適応性のあるフォントと色を選ぶことが含まれます。

  2. インタラクションがもたついてはいけません。スマートウォッチUXで最悪なのは、ユーザーが意図したとおりにジェスチャーを機能させるために手首を何度もひねったり動かしたりしなければならないことです。

プロセスやテクノロジーが進化するにつれて、UXデザイナーに与えられる機会も増えていきます。今では音声インタラクションをスマートウォッチのプロトタイプに組み込むこともできます。音声検出だからといって、応答性の低い体験で済ませてよいわけではありません。音声を使うスマートウォッチUXでも、私たちのプロトタイプと同じように、鋭くシンプルである必要があります。

動画

視覚デザインとナビゲーション

画面サイズが小さいため、タイポグラフィやフォントのような要素にはより細心の注意が必要です。さらに画面解像度や品質の違いも加わると、望んだスマートウォッチUIを正確に表示できないデバイスがすぐに複数出てきます。

タイポグラフィとフォント

スマートウォッチの多くのユースケースは、ひと目で把握できるリアルタイムデータの表示です。そのため、タイポグラフィとフォントはあらゆるスマートウォッチインターフェースの核となる要素です。苛立ち(そしてインタラクションコスト)を抑えるためのヒントをいくつかご紹介します。

  • 小さすぎる、または細すぎるフォントは可読性の問題を引き起こします。特に、画面サイズや色域がさまざまなWearOSデバイスでは顕著です

  • ネイティブフォントを優先して、互換性の問題を減らしましょう(シンプルさを保つ)

  • カスタムフォントを使う場合は、起こりうる問題に注意し、スマートウォッチUIを対象にした長めのユーザビリティテストを実施してください

どの感情を打ち出したいか、競合との差別化をどうするかといった、カラーパレットに関する一般的な判断を超えて、色はスマートウォッチUXデザインで重要な役割を果たします。

その小さなスペースで強いUI階層を作るのに役立ちます。形やボタンと賢く組み合わせることで、階層を強調し、ユーザーに明確なナビゲーション経路を提供できます。スマートウォッチUXの目的はいつも通り、効果的なインタラクションを提供することです。

ナビゲーション

タイポグラフィと色の両方が、ナビゲーションをわかりやすくし、ウェアラブルUXのインタラクションコストを下げることに貢献します。小さな画面のナビゲーションではいつも通り、情報を複数の画面に分け、論理的なユーザーフローを作ることが最も効果的です。

ユーザーがどのように移動するかを初期の発想段階で決めておくのは、シンプルさを保ち、優れたウェアラブルUXを築くうえで非常に有効です。2インチ未満の画面では少ないほうが多いので、適切なナビゲーションモデルを選ぶことが大きな違いを生みます。

適切なナビゲーションモデルを選ぶには、ある程度の計画(とテスト)が必要です。階層型ツリーモデルは避けたいところでしょう。必要スペースが大きく、何層にも深く潜る可能性があるため、小さな画面ではかえって直感に反する結果になりがちだからです。一方、ネストされたリストは小さな画面に最適です。特にスマートウォッチでは、ボタン、ダイヤル、タッチスクリーンを使ってメニューを操作できるからです。最後に、ページベースのモデルを採用すれば、シンプルさを保ちながら他のモデルでは難しい横方向のナビゲーションも可能になります。これはウェアラブルUXを設計するうえで特に有効です。スマートフォンの画面を左右にスワイプするのは、数秒で終わる何気ない操作だからです。

ベストプラクティスやうまくいく可能性のある方法は提案できますが、各製品は異なります。アプリやウェアラブルのプロトタイピングは製品設計プロセスの重要な一部であり、見落としてはなりません。ウェアラブルをプロトタイプ化すべき6つの理由と、顧客(そして製品)がどう恩恵を受けられるかをまとめました。

[ウェアラブルのプロトタイピングについてさらに詳しく]

通知とアニメーションはスマートウォッチUX体験の一部です


ultimate-guide-smartwatch-ux

時計は時刻を知らせ、すぐに行動できるライブデータを提供します。このシンプルさとデータへの直接的なアプローチは、ウェアラブルでも変わっていませんし、変わるべきでもありません。この点を踏まえると、機能するウェアラブルUXを作るには、重要な情報をリアルタイムでデザインの前面に押し出す必要があります。

スマートウォッチの通知は意味があり、邪魔にならないものである必要があります

このような限られた画面サイズで重要な情報を表示する主な方法のひとつが通知です。通知には、スマートウォッチのUIを置き換えられるという利点もあり、さまざまな方法で扱えます。

  • ハプティックフィードバックや編集可能な通知サイズ・色など、カスタマイズ可能なオプションを提供する

  • 見逃されないように明確にする一方、単一のトリガーで簡単に消せるようにする

  • 画面に表示される通知には機密情報を含めない

ハプティクスは、重要な情報があることを知らせるのに優れているだけではありません。より貴重な画面領域を使わずに、マイクロインタラクションを増やせます。ハプティクスはゲーミフィケーションやドーパミンの高まりを生み出すうえでも優れたツールであり、適切な通知を選ぶうえで重要な要素です。

アニメーションはスマートウォッチUXを楽しくできますが、優先事項ではありません

ウェアラブルUXを設計する際に削れるものがあるとすれば、それはアニメーションです。スマートウォッチ、あるいはあらゆる時計の目的は、重要な情報をひと目で得ることです。アニメーションはこの目的にはあまり合いませんが、利点もあります。

スマートウォッチUX製品のデザインに少量のアニメーションを取り入れれば、圧倒的になりすぎずにインタラクションを増やせます。要するに、重要な情報を提供する必要なく、通知と同様の効果を得られるのです。ハプティックフィードバックが満足感を生み出すのと同じように、アニメーションは滑らかさによってそれを実現します。

とはいえ、すべてが順風満帆というわけではありません。アニメーションが多すぎたり同時に多発したりすると、情報の肥大化やデバイスの動作低下を招くことがあります。これはApple Watch SEや、あまり知られていないブランドのWearOSデバイスのような低価格帯デバイスで特に当てはまります。アニメーションはメモリとプロセッサを多く使うためコストが高いのです。つまり、少なく、しかしうまく使う必要があります。優れたアニメーションのアイデアをいくつかご紹介します。

  • ネストされたリストのナビゲーションモデルを選んだ場合は特に、メニューのバンプアニメーションを入れる

  • 画面サイズが限られているため、二次的な情報は別の画面に置くことが多くなります。その画面遷移をアニメーション化して、ユーザーに滑らかな満足感を与えましょう

  • 驚きの瞬間なしに優れたウェアラブルUXは成り立ちません。アニメーションでユーザーを魅了しましょう

スマートフォンやスマートウォッチのプロトタイプにアニメーションを追加したいですか?LottieとProtoPieを使ったUIデザインのアニメーションについて詳しく学びましょう。

[UIアニメーションを作りたい!]

画像はウェアラブルUXに向いている?

スマートウォッチUXのベストプラクティスを語るうえで、画像や動画などのメディアを外すことはできません。どのSNSプラットフォームでも、動画が現在もっとも好まれるメディア形式のように見えます。では、それはスマートウォッチUIに適しているのでしょうか?

スマートウォッチでもメディアは使えますが、画像や動画は最小限に抑えたいところです。たとえばフィットネスアプリで特定のエクササイズを示すために短い動画や画像を表示するなど、有効なユースケースもあります。とはいえ許容できるユースケースではあっても、スマートウォッチに画像や動画を表示する際には守るべきルールがあります。

  1. 品質は低めに抑える - ウェアラブル画面に4K動画を表示しても意味がありません

  2. リソースを節約するため、画像はJPEG形式を優先する

  3. ウェアラブルデバイスのハードウェアに負荷がかかり、バッテリーを消耗することを受け入れる

迷ったら、ウェアラブルデバイスに紐づくスマートフォンアプリを使う

スマートウォッチのようなウェアラブルは、単体で使われることはほとんどありません。実際、Apple WatchはiPhoneとペアリングしなければ使えません。これはウェアラブル向けUXに取り組むうえで独自の機会となります。2つのデバイス間のインタラクションや追加の画面領域を活用して、素晴らしいウェアラブルUXデザインを生み出せるからです。

このデバイス間の関係を活かして、スマートウォッチでは利便性を優先し、スマートフォン側でより多くのコンテンツを提供できます。クロスデバイスのプロトタイピングをどれほど簡単にしたかは、ProtoPie Connectの完全ガイドをご覧ください。

ウェアラブル向けUXの成功は、UXデザイナーが2つのデバイス間にうまく関係性を築けるかにもかかっています。その関係はバランスが取れていなければなりません。ユーザーが頻繁にスマートフォンに手を伸ばすのは避けたいところです。しかし、ウェアラブルデバイス経由で情報を与えすぎると、苛立ちや混乱を招くことになります。健闘を祈ります!

スマートウォッチアプリのプロトタイピングこそが、デザインに命を吹き込む最善の道です

動画

プロトタイピング製品を提供するプロトタイピング企業として、もちろんそれは私たちの言い分です。しかし、だからといって真実性が薄れるわけではありません。スマートウォッチの人気が高まるにつれ、スマートウォッチのプロトタイプも増えています。リリースされるアプリの数は常軌を逸しており、これほど小さな画面と限られた性能では、競合との差別化はスマートウォッチUXの細かな差にかかってくることが多いのです。

UXデザインをソフトウェア上で組み上げ、コンピューター画面で見ることはひとつの方法ですが、実物を見られるとしたらどうでしょう?考え方としては、ノートパソコンやデスクトップモニターの快適な環境から究極のプロトタイプを作り、シミュレーションではなく実際のスマートウォッチに表示できるというものです。シームレスなプロセスにより、テストと反復がしやすくなり、初日から現実的なプロトタイピング体験が得られます。

組み込みのクロスデバイス互換性でも、さらに一歩進めます。ウェアラブル向けUXはスマートウォッチのインターフェースだけで終わりません。アプリと両者のインタラクションもテストする必要があります。ウェアラブルデバイス向けのリアルなプロトタイピングなら、UXデザインが当初の望む成果に合致しているか確認できます。

ユーザビリティテストもプロトタイピングプロセスの重要な一部です。組み込みのユーザビリティテスト機能を使えば、スマートウォッチUXにProtoPieを活用し、デザインプロセス全体を効率化できます。

[スマートウォッチUXを次のレベルへ]