web-dev-qa-db-ja.com

divを拡張することはモバイルポートフォリオにとって悪い考えですか?

簡単な概要:ゲームデザインのポートフォリオを作成する場合は、3つに分かれたカテゴリに分け、それぞれに4〜5の個別プロジェクトを作成します。ホームページには、一般的なリンクと、ユーザーをこれらのカテゴリのいずれかに分類するリンクがあります。

私の質問は、1つのページで複数の個別のプロジェクト(それぞれが1から2の段落、写真のスライドショー、タイトルの画像で構成される)を最適にグループ化する方法です。

最初はすべてのプロジェクトを1つのページに貼り付けて、プロジェクトを視覚的に分離するためのスタイリングを計画していましたが、スクロールが多すぎると思いました。それで、ユーザーにタイトル画像をクリックしてプロジェクト情報(jQuery経由でアニメーション化)を展開させるのは悪い考えなのでしょうか。

あるいは別の質問ですが、ページに他に何もない場合に画像をクリックするのは直感的ですか?

Portfolio mockup

デスクトップでは、各タイトル画像の不透明度を変更し、テキストを表示するためにマウスをホバー状態にすることを計画していました( "詳細"または "(I)"アイコン)...しかし、どうすればよいかわからないことに気付きましたモバイルでこれを処理します。

また、前後のクリックを保証するのに十分な情報がないため、プロジェクトごとに個別のページを作成しないこともお勧めします。

ありがとう!

2
Robert Lee

コメントで言及した記事を見つけました。

Eコマースの製品リストとフィルタリングに関する大規模なユーザビリティ調査全体を通して、多数の被験者がページネーションについて不満を述べていました。テスト対象者は一般的にページネーションが遅いと感じていました。ページネーションリンクの数が少ないと、製品リストの閲覧が妨げられることがよくありました。さらに重要なことに、テスト対象者は、「さらに読み込む」ボタンまたは無限スクロールに依存するWebサイトよりも、全製品リストの閲覧がはるかに少ないことが観察されました。有利な点は、結果の最初のページに比較的多くの時間を費やしたことです。

...

つまり、私たちのユーザビリティテストでは、[もっと読み込む]ボタンでページ分割で観察されるユーザビリティの問題が解決され(ユーザーが製品リストを探す機会が減り、結果のページ間で製品を比較することが困難になりました)、観察された深刻な問題が解決されました無限スクロール(ユーザーが表面的にスキャンした製品で、フッターに到達できないことが多かった)。

もちろん、この記事には、ここで引用したものよりも多くの情報と詳細があります。

1
Rob

画像をクリックすることは、インタラクティブなアフォーダンス、状態、または「要素」を伝える追加情報がある限り、優れたナビゲーション戦略です。

言い換えると、クリック/タップが何かを実行できることを示すクリアなフォーマットを見つけます。これは、ホバーが[まだ]モバイルに存在しないため必要です。

これがcard形式の利点の1つであると私は主張します。データのグループ化は、暗黙的に「画像」にオブジェクトの性質を伝えます。現代の相互作用の慣習は、オブジェクトがインタラクティブであることを教えてきました(特に他の相互作用キューがない場合)。

これは「非常に現代的」であり、熟練度の低いユーザーはread more »リンクのような明示的なシグナリングが必要になることに注意してください。

0
New Alexandria