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

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

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

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

推薦する

iOS スタイルの選択ボックスの開閉機能を実装するための純粋な CSS

1 効果デモアドレス: https://www.albertyy.com/2020/7/check...

MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...

Nginx の場所に関する一般的なルールの優先順位の問題

目次1. 場所/マッチング2. 場所 = / 一致Locaitonには、完全一致(=)、プレフィック...

Apple Watchのインタラクションデザインにおける4つの全く異なる体験が明らかに

今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを...

MySQLログに関する知識のまとめ

目次SQL実行順序ビンログ何ですかいつ生産されるのか何の役に立つんだディスクはいつドロップされますか...

Quill エディタでカスタム HTML レコードを挿入する詳細な例

もう2020年です。飢えた人間は単純なテキストでは満足できなくなり、さまざまなスタイルの派手なテキス...

MySQL の if 関数の正しい使い方の詳細な説明

今日私が書こうとしている内容では、プログラムは 7 時間近く実行され、データベースに 1,000 万...

CSSを使用してHTMLテキストボックス内のテキストの垂直方向の中央を制御する

Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央...

複数のフィールドを変更するためのMysql更新の構文の詳細な分析

MySQL でレコードを更新すると、構文は正しいのですが、レコードが更新されません...質問文実行前...

Centos6.5 でのスーパーバイザーのアップグレード、インストール、および構成に関するチュートリアル

スーパーバイザー紹介Supervisor は、Python で開発されたクライアント/サーバー サー...

HTML割引価格計算の実装原理とスクリプトコード

コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...

Nexus サーバーを設定するための詳細な手順

1. ネクサスサービス構築の意義イントラネットの統合プロキシとして、チームで共同開発する場合、全員が...

MySQLが基礎データ構造としてB+ツリーを使用する理由

MySQL の基盤となるデータ構造が B+ ツリーであることは誰もが知っていますが、ではなぜ赤黒ツリ...

CSS リセットスタイルリセットの実装例

はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのペ...

Centos7 の起動プロセスと Systemd での Nginx の起動構成

Centos7 の起動プロセス: 1.post(電源投入時のセルフテスト) 電源投入時のセルフテスト...