デザインにおいて無視できないインタラクティブデザインにおける製品状態の分析

デザインにおいて無視できないインタラクティブデザインにおける製品状態の分析
製品デザインのプロセスにおいて、デザイナーは常に写真を非常に美しくすることを好みます。仮想ページのコンテンツを作成するときは、美しい写真を使用し、コンテンツを適切に配置します。ただし、インターフェースのデモが作成されるときに、このページが空のページになったり、コンテンツが多くなりすぎてレイアウトがずれたりすることがあります。
したがって、インターフェースを設計するときは、空の状態やコンテンツが多すぎるなどの極端な状態を無視してはなりません。これらの状態は、最初の使用時にのみ発生する可能性があり、少数のユーザーのみが遭遇する可能性がありますが、すべて製品の詳細な品質に影響します。
インタラクティブなドラフトやビジュアル ドラフトを作成する場合、インターフェイスをできるだけリアルにするために、デザイナーはページ上に仮想コンテンツを配置します。しかし、デザイナーがフロントエンドの学生が制作したデモを見ると、なぜ最初に作ったページとこんなに違うのかといつも不思議に思うのです。
空の状態 ユーザーが初めて製品を使用する場合、特にソーシャル インターネット製品では、ユーザーがサークルを構築して自分でコンテンツを生成する必要があるため、コンテンツが空のインターフェイスに遭遇することがよくあります。 このとき、通常は初心者ガイドを使用してユーザーを次のステップに導きます。
インタラクションデザイン分析: デザインにおいて無視できない製品ステータス 123WORDPRESS.COM
たとえば、Foursquare を初めて使用する場合は、友達を追加するように案内されます。友達を簡単に見つけられるように、Facebook、Gmail、Twitter から友達をインポートすることもできます。
Facebook に記事を書いたことがない場合は、新しい記事を書いて公開するためのガイドも表示されます。
同様に、Flickr もガイド付きの操作アプローチを採用し、ユーザーが現在の状態と次に何をすべきかを明確に把握できるようにしています。
Gmail では、ユーザーをガイドするために電子メールを送信する方法を使用しており、ユーザーは初心者向けの手順を読みながら、初めてのユーザー エクスペリエンスを完了できます。
Tumblr は、インターフェイスの主な操作領域を説明するために空の状態を使用します。ユーザーが次に行うべき操作は必要ありません。フォロワーを追加したり、コンテンツを投稿したり、ホームページを装飾したりできます。これは、ユーザーがすぐに使い始めることができるようにするためでもあります。
コンテンツが多すぎる状態 インターネット製品におけるインターフェースは、コンテンツを柔軟に変更し、十分に拡張できるように拡張可能である必要があります。具体的な方法については、別の記事「柔軟でスケーラブルなインターフェース」を参照してください。

<<:  Vue プロジェクトを実行するときに `--fix` オプションで修正できる可能性のある警告のエラー問題を解決します。

>>:  Vue はトークンを取得してトークン ログインのサンプル コードを実装します

推薦する

CSS で div にスクロールを追加し、スクロール バーを非表示にする

CSS は div にスクロールを追加し、スクロール バーを非表示にします。具体的なコードは次のとお...

Nginx レベルで基本的なユーザー認証を構成する手順を完了します。

序文アプリケーション シナリオ: おそらく、内部 Web サイトは外部ユーザーにアクセス可能である必...

Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...

Vue3は画像拡大鏡効果を実現します

この記事の例では、画像拡大鏡効果を実現するためのVue3の具体的なコードを参考までに共有しています。...

VMware 仮想マシンでの Centos8 ブリッジの静的 IP 設定方法

1. ネットワーク接続方法がブリッジされていることを確認する物理ネットワーク接続ステータスのコピーを...

Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します

このプロジェクトは最近テストされ、テスターから、トークンの有効期限が切れたため、ルートが自動的にログ...

15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...

JavaScript の querySelector メソッドと getElementById メソッドの違いを分析する

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

Explainキーワードに基づいてMySQLインデックス機能を最適化する方法

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

nginx+FastDFS を使ってファイル管理システムを段階的に構築する

目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...

ホストNginx + Docker WordPress Mysqlを設定するための詳細な手順

環境Linux 3.10.0-693.el7.x86_64 Docker バージョン 18.09.0...

Nginx try_files ディレクティブの使用例

Nginx の設定構文は柔軟で、高度に制御可能です。バージョン 0.7 以降では、try_files...

Vue におけるキープアライブ マルチレベル ルーティング キャッシュの問題

目次1. 問題の説明2. 原因分析3. 解決策4. 処理1. 問題の説明調整センターでは、最後の 2...

DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作

目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....

Linux サーバーのグラフィック カードのクラッシュの解決策

ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...