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

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

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

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

推薦する

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

MySQL クロステーブルクエリとクロステーブル更新

SQL の基礎知識がある友人は、「クロステーブル クエリ」について聞いたことがあるはずですが、クロス...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...

HTMLページでチェックボックスを操作する方法

チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラッ...

HTML ハイパーリンク スタイル (4 つの異なる状態) の設定例

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

ダイナミッククロックを実現するJS+CSS

この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有していま...

クールな花火効果を実現するjs

この記事では、jsを使用してクールな花火効果を実現するための具体的なコードを参考までに共有します。具...

JavaScript データ プロキシとイベントの詳細な分析

目次データブローカーとイベントObject.defineProperty メソッドのレビューデータブ...

Nexus を使用して jar パッケージをプライベート サーバーに追加する方法

なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...

JavaScript ベースのシンプルな計算機の実装

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。

mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセ...

IPとポートが接続可能かどうかを検出する方法

Windows コマンドテルネット形式: telnet IP ポート場合: テルネット 191.1....

React Hooksの詳細な説明

目次フックとは何ですか?クラスコンポーネント機能コンポーネントフックが作られた理由要約するフックとは...

Alibaba Cloud Server ドメイン名解決手順 (初心者向けチュートリアル)

ウェブサイトの構築を始めたばかりの初心者には、理解し、学ぶべきことがたくさんあります。ウェブサイトを...