web-dev-qa-db-ja.com

モバイルアプリでカルーセルコントロールを使用する

私のモバイルアプリで、ユーザーがメインの製品を表示している間に、関連する推奨製品のリストを表示したいとします(たとえば、Amazonが、ユーザーがすでに表示している書籍に基づいて、推奨書籍のリストを表示する方法など)。

カルーセルコントロールを使用して表示することは良い考えですか?カルーセルコントロールは下部にあります。これを見てください:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

2
Illo Yonex Illo

概要:カルーセル制御には、モバイルでいくつかの欠点があります。より簡単なソリューションの方が効果的です。それでも、A/Bテストはアイデアを評価するための最良の方法です。


カルーセルコントロールの使用に関する考慮事項:

インタラクションスタイル
人々は特定の方法で携帯電話とやり取りします。 ユーザーは実際にモバイルデバイスをどのように保持していますか? の記事でいくつかの洞察を見つけることができます。画面を見て、画面下部にあるカルーセルの相互作用について考えてください。
enter image description here
ユーザーは実際にモバイルデバイスをどのように保持していますか? スティーブンフーバーによる

内容
おそらくカルーセルとやり取りしたい人。次に、魅力的なコンテンツを用意して、彼らがそれを見て反応するようにする必要があります。カルーセルの問題は次のとおりです。
•一部のコンテンツは表示されないため、エンゲージメントはありません
•表示されるコンテンツが小さすぎる(詳細/品質が低い)ため、ユーザーにとって魅力的ではない
•カルーセルの相互作用は、アフォーダンスが低いために明白ではない可能性があります
•カルーセルアフォーダンスはPalmによって隠される可能性があります
これらを修正するために別のアプローチを試すことができます:
enter image description here

実際のデータを使用して設計し、ユーザーを知ってください
実際のデータを使用して、コンテンツがどのように見えるかを確認します。ユーザーを引き付けるものは何ですか?それはあなたのコントロールで見えますか?

さまざまなソリューションを検討してください
より簡潔で明白なさまざまな解決策を試してください。
enter image description here
enter image description here

A/Bテストを実施
これは、ソリューションをテストするための最も価値のある方法です。そして、最近は簡単です。

6

ユーザーがあなたの推奨に従うには、製品の画像だけで十分であることを考えると、良い考えです。 では機能しますが、ハードウェアでは効果がない可能性があります。後者の例では、詳細を追加する必要があります。また、各画像の下に1行以上の追加テキストがある場合、提示されたデザインは苦労します。

画像だけで十分であると想定すると、デザインは実際には非常に良好です。推奨事項を下部に配置し、ナビゲーションドットを避けてナビゲーションleftおよびright矢印(自動的に回転する推奨を除く)。ユーザビリティ調査は、このより明確なナビゲーション補助がより効果的であることを示しています: here をお読みください。

1
krychu