カードをめくる、良いか悪いか？
見栄えがよく、ホバーに関する詳細情報をユーザーに表示できるので、ウェブサイトにフリッピングカードを実装したいと思います。
ただし、ユーザーがリンクに移動してクリックする代わりに、カードが反転するのを待ってから、> moreなどのリンクを見つけてクリックする必要があるため、それは悪い考えだと思い始めました。
ここにアイデアがあります：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
私自身の質問に答えて申し訳ありませんが、ユーザーがリンクを直接クリックできないという問題を解決するこのソリューションを思いつきました：
前面と背面：
これで上部だけが反転し、アーティスト/会場名は一定になり、いつでもクリックできるようになりました。また、リストの最後に> moreボタンを配置しないようにすることもできます。
フリッピングアイコンを配置することを検討しますが、ユーザーはそれがそこにあることをすぐに理解でき、そうでない場合でも重要な情報を失うことはありません。
私の観点からは、カードをめくったり、詳細を表示するポップオーバーウィンドウに大きな違いはありません。したがって、はいそれは単なる遷移効果であり、ユーザビリティに悪影響を及ぼさない限り、それは良い考えです。
あなたが得る長所：
1つのビューでより多くのカードをパックできます（もちろん：過剰を避けてください）。アーティストの選択から番組情報に移動するまで、ユーザーアクションを集中させることができます。
すべてのアーティストのすべての番組データが表示されるのを回避できるため、インターフェースはよりclearになります。
それに付随する短所は、ユーザーの行動によっては、複数のアーティストのショーをすばやくクリックすることが実際に重要になる場合があることです-この場合、カードの反対側でこれらのリンクを非表示にすると、UXが悪くなります。
したがって、ここでの実際の問題は、ユーザーが複数のアーティストまたは1つまたは2つのアーティストのショーデータを表示することを期待している場合、そして-これに基づいて知識-最初に詳細を非表示にする（またはしない）必要があります。ユーザーはクリックして詳細に移動します。しかし、この質問に対する答えは、ユーザーの期待と行動に関する知識にあります。
実装自体については、次のことを忘れないでください。
- カードがフリップ可能であることを明確に示す
- 「トップ」側から見えるすべてのカードのビューに戻る方法を提供します
- 選択したカードに基づいてリンクを変更します（JavaScriptを使用して行うことができます。これにより、ユーザーは裏返したカードへの直接リンクを共有できます）。
カードの右下隅にフリップアイコン（角が折れているように見える）を実装することを検討することをお勧めします。これにより、カードをクリックするたびにホバー中にフリップし、ホバー中に一時的にフリップします。
使用法：
カードの上にカーソルを置くと、反対側が表示され、マウスをカードから離すと前の側が表示されます。
カードにカーソルを合わせることができない場合。タッチスクリーンを使用しているので、角の折りたたみアイコンをクリックして反対側を表示し、もう一度クリックして戻ることができます。
これにより、マウスとタッチスクリーンの両方のユーザーが同じような体験を楽しむことができ、隅にある折りたたみ記号により、ホバリングユーザーは何が起こっているのか/何が起こったのかを理解でき、ホバーがカードをめくることに驚かされません。
クリック/ホバーの遅延を防ぎ、SEOを壊さないために、サイトは反転されたサイドをプリロードする必要があります（HTMLに非表示として含めるなど）。
角をクリックしてカードをめくった場合、カードの上にカーソルを置くと、カーソルを置いている間、カードが元に戻ります。
また、すべてを画像として表示、すべてを情報として表示、すべてを両方として表示（両側に並べて）を追加することを検討することもできます。最初の2つはユーザーがすべてを同じ状態（画像または情報）にリセットすることを可能にし、2つ目は両側を一度に表示することを可能にします（したがって、行ごとに半分のカードが表示されます-行が2倍になります）。