👨🏾‍🤝‍👨🏽 ⚪️ 👩🏽‍🎨 スマートテレビの商用インターフェイスでのユーザーインタラクション 👩‍👦‍👦 🏒 ⏰

この記事は、 ProfsoUX 2014カンファレンスでデザイナーのエカテリーナユリナ（ Katarios ）が作成したレポート「テレビでお金を請求する方法」の続きです。レポートの主なトピックは、商用インターネットプロバイダーのインターフェイスでした。典型的なユーザーインターフェイスエラー、良い例、テレビとのユーザーインタラクションを複雑にするハードウェアアクションです。会議レポートはhabrahabr.ruで読むことができます。

この記事には、インターフェース、統計、および成功したインターフェースソリューションの例を構築するための推奨事項が含まれています。

それはすべて、「スマートテレビ」の受信した支払いに関するメッセージのサービスを設計する注文から始まりました。インターネットサービスをスマートテレビに適合させる必要がありました。

スマートテレビは、オペレーティングシステムとインターネットアクセスを備えたテレビです。つまり、コンピューターとテレビのハイブリッドです。ブラウザとその中のアプリケーションを使用できます。なぜこれが必要なのですか？ 2年前にテレビシリーズのいくつかのシーズンを見たいと想像してください。インターネットで追いつくことができますが、テレビで映画を見る方が便利で楽しいです。

または別の状況。あなたは家に「ねじれた」テリーを持っていて、友人のグループと一緒に「ロード・オブ・ザ・リング」を見るために集まっています。アプリケーションを開き、映画を見つけ、フルHDの料金を支払い、すぐに視聴します。

Smart TVのインターフェイスを設計する必要があります-ProfsoUX'14のレポートの後、このデバイスのユーザーが私に近づき、対話の難しさについて話したとき、私はこれをさらに確信しました。

お金、登録、プロモーションコードについて

既存の支払いオプション（図1）：

銀行カード;
携帯電話会社の個人アカウント。
システムの内部アカウント。

図 1. Playfamilyアプリケーションの支払いオプション

通信事業者を通じて支払いを行うには、携帯電話番号を入力する必要があります（図2）。速くて便利です。将来、携帯電話番号はシステムの識別子として使用できるようになります。

SMSが携帯電話に送信され、支払いの確認が要求されます（図3）。確認後、お金は個人口座から引き落とされ、映画を見ることができます。

図 2.携帯電話会社で映画を購入する

図 3.携帯電話会社による支払いの確認

コンテンツの支払いの2番目の方法は、銀行カードを使用することです。

ここでは、数字も入力する必要があります（図4）：

カード番号;
有効期間
CVSコード。

次の支払いですべての詳細を再入力する必要がないように、システムに銀行カードを添付できます（図5）。

ユーザーは支払いを確認する必要はありません。システム自体が支払いの成功（または失敗）を通知します（図6）。

図 4.銀行カードデータの入力

図 5.銀行カードのバインド

図 6.成功の画面

さらに、システムでユーザーアカウントを作成し、モバイルオペレーターまたはクレジットカードを使用して補充できます。

この記事の執筆時点では、サードパーティの支払いシステムを介して支払いを受け付けるアプリケーションは見ていません。おそらく、TVは十分に強力ではなく、RAMも限られているということでしょう。2つのアプリケーションを同時に実行してバックグラウンドで何かを動作させることもできません。

登録には、メールアドレス、都市、その他のデータを指定する必要があるアプリケーションがありますが、この要件は実際的な考慮事項よりも伝統によるものです。

スマートTVのインターフェイスを作成するときは、登録と支払いの間、およびプロモーションコードを入力するときの両方で、数字の入力がより簡単で簡単になることに留意する必要があります。

コンテンツプロバイダーとスマートテレビメーカー

サプライヤーは、有料コンテンツと無料コンテンツの両方を提供します。もちろん、それぞれが視聴者を維持しようとしています。また、視聴者はどのブランドのテレビでも視聴できます。

市場には十分なメーカーがあります。図 7リスト全体が表示されているわけではありませんが、より正確なリストは、たとえばYandex.Marketで見つけることができます。

図 7.スマートテレビメーカー

メーカーがいくつあっても、Smart TVモデルは非常に典型的です（図8）。

図 8.典型的なスマートテレビ

物理的相互作用と仮想キーボードについて

スマートテレビは、独自の方法とユーザーインタラクションの原則を備えた環境です。まず、リモコンを使用する必要があります。それらの多くがあり、それらは異なりますが、2つのタイプを区別することができます（図9）：

プッシュボタン;

タッチパネル。

同時に、ボタンのリモコンは数字付きのボタンではない場合があります。

図 9.ボタンとタッチパネル

ハイブリッド標本が見つかります（図10）が、まだまれです。

図 10.ハイブリッドリモート

リモートコントロールの代わりに、音声コントロール、ジェスチャー、電話のアプリケーションを使用できます。 Amazon（図11）は、マイクを内蔵したリモコンを開発しました。カラオケを歌えますか？

図 11.マイクのようなリモコン

仮想アプリケーションのキーボードは、使用するリモートコントロールに適合しています。そのため、たとえば、プッシュボタンデジタルリモート専用のキーボードがあります（図12）。プッシュボタン式電話のように機能します。「デュース」をダブルクリックすると、文字Bが表示されます。

図 12.デジタルキーパッド用キーボード

「上」、「下」、「左」、「右」の簡単な操作を実行する必要があるキーボードがあります（図13）。

図 13.簡単な操作のためのキーボード

快適で便利なインタラクションを作成するためのレシピ

人間とリモートアプリケーションの相互作用を促進するために、サイトのWAPバージョンで使用されていたように、要素から要素への線形（ステップバイステップまたはブロック）遷移が推奨されます（図14）。

図 14.線形遷移WAPおよびスマートTV

ユーザーにとって、カーソルでインターフェイス要素を制御することは拷問です。代わりに、彼に通常のことをする機会を与えてください。

レシピ1.習慣的な行動

上、下、左、右ボタンを押す、またはタッチスクリーン上で指で同じ操作を行うのは、カーソルで要素を狙うよりもはるかに簡単で馴染みがあります。

カーソルは直感的です！はい。ただし、カーソル制御には、おなじみの矢印よりも多くのモーターと視覚の張力が必要です。

画面の下部にあるパネルで、簡単かつ迅速なアクションを報告します（図15）。

図 15.インターフェイスナビゲーションのヒント

レシピ2.ショートカットボタン

別の習慣的なアクションは、「ホット」または「クイック」ボタンの使用です。テレビのリモコンには、マジックボタンA、B、C、D、および「戻る」があります。アクションを割り当てることができます-たとえば、「お気に入りに追加」、「フルスクリーンに最大化」。これらのボタンとアクションについては、画面下部のパネルのインターフェースでも確認する必要があります（図16）。

図 16.リモートコントロールとインターフェイスのショートカットボタン

レシピ3.スライダー

カルーセルスライダーは、カタログのデモンストレーションに適しています（図17）。それらの使用も簡単です。

図 17.カルーセルスライダー

レシピ4.大きな要素

原則として、人とテレビは3〜5メートル（場合によってはそれ以上）離れています。インターフェイスを設計するときは、この距離を考慮する必要があります-見出し、テキスト、ボタン、画像を大きくするため（図18）。そうすれば、ユーザーはソファから立ち上がったり、テレビに行ったり、目を細めたり、枕の中でメガネを探したりする必要はありません。

図 18.大画面要素

レシピ5.注目を集める

私たちは、注意の焦点を強調し、維持することについて多くのことを話し、書きました。しかし、繰り返しは場違いではありません。アクティブな要素に焦点を当てる場合、好きなように色、サイズ、影を選択します（図19）。

図 19.インターフェースでの強調表示

レシピ6.タブ

タブは、スペースの整理とコンテンツのコンパクトな配置に適しています（図20）。

図 20.タブ

レシピ7.浅いディレクトリ構造

ユーザーは非常に短気であり、アプリケーションの腸を掘り下げる能力は限られています。さらに、アプリケーションの構造を考慮する必要はありません。カタログ内の1つまたは2つのレベルのネストで十分です（図21）。

図 21.浅い構造

レシピ8.インターフェースノイズ

インターフェイスノイズを避けます。ユーザーはあなたの信号を認識しないかもしれません。魔法のボタンのように見えるアイコン。クリック可能なように見えるクリック不可能なウィジェットなど（図22）。

図 22.インターフェースノイズ

レシピ9.ヒント

テレビ画面の下部のパネルには、ナビゲーションや追加機能のキーを表示する傾向がすでにあります。この場所は手がかりになじみ始めています。

検索フィールドに情報を入力するときにユーザーにプロンプトを表示します。オートコンプリート（図23）、頻繁に使用される文字、電話のT9に似たスマートダイヤル（図24）。男は本当にありがとうと言うでしょう。タイピングは数字より難しいことを覚えておいてください。

図 23.エントリーのヒント：オートフィル

図 24.入力のヒント：頻繁に使用される文字と予測入力

レシピ10.仮想キーボードの代替

仮想キーボードから入力する代わりに、モバイルデバイスまたはラップトップをアプリケーションおよびテレビとペアリングすることもできます。

メカニズムは非常に単純です（図25）：YouTubeアプリケーションはテレビにインストールされ、指定されたサイトまたはモバイルデバイスのアプリケーションに入力する必要があるコードを表示します。その後、映画が検索されて電話から起動され、映画がテレビ画面に表示されます。「どんなテクニックが届いたの！」

図 25.仮想キーボードの代替

サイト。それらをスマートテレビに適応させる必要がありますか？

ユーザーがアプリケーションで必要な映画を見つけられなかったり、支払いたくない場合があります。次に、スマートテレビでブラウザーを開きます。そして、ここから悲しい物語が始まります。

ブラウザーでは、デスクトップデバイス用のインターフェイスによって満たされます（図26–27）。カーソルを使用し、14pxでテキストを読み、小さなボタンをクリックし、バナーでウィンドウを閉じる必要があります（これはシェアウェアコンテンツのあるサイトに十分です）。

図 26.スマートテレビブラウザーからのデスクトップコンピューターのWebサイト

もちろん、これは検索を遅くし、迷惑ですが、家族と一緒に映画を見たかっただけです。

図 27. 1つのインターフェース

統計を収集しようとすると、次のことが判明しました。
1. Yandex.MetricaとGoogleアナリティクスは、Smart TVが別個のデバイスであることを認識していません。
2. Yandex.Metricaは、デバイスを非モバイルデバイス、Linux OS、Safariブラウザーとして定義しました（図28）。
3. Googleアナリティクスでは、テレビをデスクトップコンピューターと見なしています。
図 28.だから、Yandex.Metricaはスマートテレビへの訪問を決定しました

Yandexのメインページで、一部のユーザーはテレビからアクセスし、Linux用の無料プログラムではなく、ビデオを提供していることを知っています（図29）。

図 29. Yandexホームページの写真、スマートテレビで開く

統計的推論を試す

レポートを作成してこの記事を書く前に、実験が行われました。

目的：ユーザーが同じプロバイダーのリソースで異なるデバイスのコンテンツを検索するのに費やす時間を決定します。

実験には4人が招待されました。2人の経験豊富なスマートTVユーザーと2人の新参者です。彼らはそれぞれ、シネマiviとYouTubeのライブラリでソビエト映画「ダルタニャンと三銃士」を見つける必要がありました。検索は、スマートテレビ、スマートフォン、ラップトップの3つのデバイスで行われました。

結果は次のとおりです。
1. すべてのユーザーが目的の映画を見つけることができたわけではありません（ライブラリーではなく、同様の映画が見つかりました）。
2. スマートテレビで映画を検索するとき、1つのヒステリーがありました。
3. 経験のあるスマートTVユーザーは、このデバイスでの検索に約8〜12倍速く対応します。
4. スマートテレビで検索した後、スマートフォンから検索すると安心が得られ、モバイルデバイスの満足度が劇的に向上します。
ソビエト映画「ダルタニャンと三銃士」を検索して見るには、平均して次のものが必要です。
- スマートテレビ-51秒。
- スマートフォン-13秒。
- ラップトップ-8.5秒。
要約する

支払うかどうか-誰もが自分で選択します。そして、あなたは今スマートテレビの設計を開始する必要があります。環境が作成されていることがわかります。消費者、開発者、ビジネス所有者がいて、実際のお金が回っています。ここでのみ、すべての開発者がこの環境を整理できるわけではなく、ビジネスがためらうことなくテレビでお金を要求でき、消費者がこのお金を快適に提供できるようになっています。

追加資料

アプリケーション開発
アプリケーションサイト
スマートテレビの開発者エクスペリエンス
- SmartTVが主なことを忘れた方法 -ValdikSSはプラットフォームのUXの不便さを説明しています
- スマートテレビと貧弱なデザイナーのためのインターフェース -JetStyleに文句を言う
- Samsung Smart TVのサービスとアプリケーションの概要 -Samsungの公式ブログで役立つcote_de_geneveリスト
- スマートテレビ-テレビのサイズのスマートフォン -Alaunquirieセンチメートルで測定
- スマートテレビアプリケーションプロジェクトでの作業の現実 -技術的な経験を共有
ProfsoUx 2014のプレゼンテーションとビデオレポートもご覧ください。