ユーザーエクスペリエンスデザイン：自分用ではなく、顧客用のサイトを構築する方法

4月末に、RIF 2012でユーザーインターフェイスデザインの段階に関するレポートを作成しました。 動画がないので、コメント付きのスライド形式でレポートを表示するようにします。







サイトまたはアプリケーションの開発プロセスがデザイナーの観点からどのように見えるかを説明します。 インターフェースを介してのみ、スタートアップのユーザーエクスペリエンスを向上させることができます。





聴衆にストックホルム症候群を引き起こすことを期待して、私はいつも自己紹介をし、自分自身について少し話します。



私についてのいくつかの言葉と、なぜそのようなトピック。 私の名前はデニス・コルトゥノフです。

-私は、私が住んで働いているサマラから来ました。

-私はすべての画面が大好きです。 たとえば、カミソリを購入する必要がある場合は、画面のあるものを選択します。 これはシェービングに影響を与えないようですが、それはまったく異なる、より高いレベルのユーザーインタラクションです。

-私の仕事はインターフェース設計に関連しています。 以前、Turbomilkでは、視覚デザインにもっと関わっていました。 クライアントの中には、インターフェイス、アイコン、ボタン、キャラクターを描いた多くのスタートアップがいました。 プロセスはどのように見えましたか？ クライアント、または運がよければユーザビリティ企業は、既製のプロトタイプを私たちに引き渡し、私たちはそれらに美しいインターフェースを描きました。

-Parcsisとチームを組み、インターフェイスとユーザーインタラクションを自分で設計し始めました。 非常に難しいことがわかりました。 しかし、一方で、それは非常に興味深いです。 プロジェクトを真に成功させる自由度がもう1つありました。





だから、ある種のスタートアップのアイデアを持っていると想像してください。たとえば、誰もが買いたいと思うような素晴らしい黄色の車を作るために。 何も新しいことはお伝えしませんが、実装なしのアイデアは何の価値もありません。 そして、実装は常に困難です...





...たとえば、次のようなものです...アイデアと実装の間には空白があります。さまざまな理由で、アイデアとは多少異なる場合があります...多くの人がこれに出くわしたと確信しています。





同じことがプロジェクトにも当てはまります。 従来は最初にプログラムを作成し（いわゆる「エンジン」を作成）、その後にのみインターフェースが「プル」されます。 「プログラマーにとって非常に便利だった」というスタイルの製品になります。 しかし、ユーザーはどうですか？..





幸いなことに、より多くの開発チームが原則に取り組んでいます-最初に設計し、次にプログラムします。 このアプローチでは、まずプログラマーが一般的な方法で問題を解決する必要がないため、製品がより顧客志向になり、次に奇妙なことに開発が安価になります。





すべては目標から始まります。 最初に何をしたいかを決定し、次にそれをどのように実装できるかを決定します。





-まず、頑固にしないでください、ターゲットを閉じないでください。 プロジェクトに取り組む過程で、多くの新しいニュアンスと詳細を学びます。 目標と戦略の変更は正常です。

-さらに、初期レベルでは、詳細に夢中にならないでください。 はい、何かを詳細に考えるのはおそらく良いことですが、今はそうではありません。

-また、制限について考えないでください。 問題が到着したら解決します。

-顧客について考えます。 なぜ彼はあなたのところに来たのですか？ 彼に何を提供できますか...





カスタムスクリプトから始めます。 自分を劇作家として感じ、プロジェクト内のイベントがどのように均等化されるかを考えてください。

-最初はブレーンストーミングです。 たとえば、「タクシー予約のエクスペリエンスを改善する方法」。 制限なしでアイデアを生成します。 このゲームは、同僚や友人とプレイできます。 最もクレイジーなアイデアを提案します。

「次に、最も実行可能なアイデアを強調して、調査を行います。」 これがプロジェクトで機能するかどうかを理解してください。 アニメーターが行うように、スケッチを描き、ストーリーボードを作成します。

-最後に、あなたはあなたが依存するいくつかの決定を選択して修正する必要があります。 この段階で、実装するものとしないものを決定します。 貪欲にならないで、簡単なものから始めてください。





決断をすることを恐れないでください、あなたはあなたの心を変えて作り直す機会を得るでしょう。 これがアプローチの美点です。「最初に設計、次にプログラミング」-エラーの価格はそれほど大きくありません。 いつでも戻って、他のことをすることができます。





ターゲットオーディエンスが誰であるかを理解する必要があります。 ビンテージのポラロイドカメラと最新のiPhoneの2つの優れたガジェットがあります。 これら2つのガジェットを統合するものは何ですか？ これらのことが本当に好きなユーザーのグループがあります。 これらはヒップスターです！ ヒップスターで何ができますか？ 彼らは幸せにする必要があります！..





そこで、Instagram iPhoneのアプリケーションが登場しました。 玉ねぎを作ってスタイリッシュな写真を撮ることができます。 そして、それらを友達と共有します。 その結果、最近Facebookはヒップスターの幸福を10億ドルと評価しました。 良い話。





そのため、カスタムスクリプトを検討しました。 非常に単純なものを見てみましょう：ポイントAからポイントBに行く必要があるとしましょう...





しかし、何らかの理由で実際のインターフェイスでは、すべてが複雑でわかりにくいことがわかります。 これを避ける方法は？





プロジェクトの情報アーキテクチャを検討する必要があります...





-プロジェクトには、名前、価格、日付、画像、地図上のポイントなど、多くの乱れた情報があります。 古き良きフローチャートを思い出して、詳細に入らずにデータストリームを描画することができます。

-プロセスでは、スクリプトを覚えて、データに関連付けます。

「失礼なプロトタイプの作成を開始できます。」 画面ごとにインターフェイスを確認しながら、紙に描くだけです。

-ステップごとに、プロトタイプはより詳細になります。





したがって、この段階の主なタスクは、情報とタスクを接続することです。

-大まかなプロトタイプから始めます。 紙に簡単に描くことができます。 とても効果的です。

-次に、タスクとそれらを解決する方法を考えます。

-出力では、修正する情報の特定の構造を取得します。





タスクストリームとは何ですか。 プロジェクトの助けを借りて、ユーザーは自分の問題のいくつかを解決したいと考えています。 完了する必要のあるアクションまたは遷移が少ないほど、より快適な体験が得られます。 ユーザーを詳細に引き込まないで、ユーザーの生活を単純化する方法を考えてください。



これを「オンラインストアで購入する」タスクのストリームとします。 成功する前に、5つの画面を表示して、何かを選択してクリックする必要があります。



単純化する方法を考えるのは良い考えです...





プロジェクトの特定のタスクが5つのステップまたは努力ではなく、2で解決される場合、ユーザーはあなたに感謝します。 確かに、彼はすでに以前に似たようなことをしていて、あなたの努力に感謝し、あなたのサービスを利用するでしょう。 私の意見では、最高の広告。





たとえば、AnyWayAnyDayサービスは、出発の方向と日付のみを指定するように要求します。 すぐに価格が昇順で表示されます。 出発時間を入力したり、会社を選択したり、結果をフィルタリングしたり、空港を選択したりする必要はありません。 これをすべて明確にすることはできますが、その後...そして今、あなたはすでにさまざまな会社からの価格とオファーを見ています。





Amazonからのタスクフローを合理化する別の例を次に示します。 バスケットを使用せずに、ワンクリックで物を購入できます。 同様に、Apple AppStoreからアプリケーションを購入します。AppleAppStoreは、偶然、Amazonからこのメソッドのライセンスを購入しました。





次のステップは、ユーザーとインターフェイスの間の相互作用のモデルを検討することです...ユーザーが私たちのよく構造化された情報を見て、私たちが彼のために単純化したタスクを実行するように





インターフェイスが完全に静的であっても、インタラクティブなデザインです。

-相互作用は情報でも仕事でもありません-それは一種のフィルターです。

-ユーザーがインターフェイス内でどのように移動するかを考えると、ナビゲーションが表示されます。 伝統的な「セクションの階層メニュー」ではなく、優れたネストがありますが、ユーザーが必要とする本当に便利なナビゲーションです。

-多くのデザイナーのよくある間違い-彼らは、インターフェイスがユーザーのアクションにどのように応答するかを考えていません。 彼らは絵だけを作ります。 動きを追加！ もっと面白くなります。

-他の人の経験を使用してみてください、それは何も悪いことではありません。 タスクを小さなものに分割します。 あなたの前に、誰かがこのレーキを踏んで問題を解決しました。 しかし、注意してください-成功したパターンのみを使用してください。





-タスクを理解し、どのような既製のテンプレートを適用できるかを考えます。 たとえば、プロジェクトですべての登録プロセスを簡素化する場合を除き、何らかの革新的なユーザー登録システムを作成することは意味がありません。

-次に、欠落している相互作用パターンを作成する必要があります。 ここであなたは発明し、発明しなければなりません。

-相互作用がどのように発生するかについて、便利な方法で説明してください。 それはプロトタイプまたはあなたが好きな他の方法かもしれません。





たとえば、Sellobyプライベート広告サービスは次のとおりです。 スマートフォンを使用して広告を作成するプロセスが簡単になります。 操作の原理は、Twitterと非常によく似ています。 これにより、以前にTwitterを使用したことがある人は、すべてがどのように機能するかを簡単に理解できます。





そして、ここに法的参照システムPravo.ruのメインページがあります-「段階的開示」と呼ばれる手法がここで使用されています。 最初に、ユーザーに最も重要なこと、つまり検索バーを表示します。ユーザーがカーソルを動かすとすぐに、追加の機能が表示されます。 これは、必需品に集中するのに役立ちます。





インターフェイス設計はコピーライティングです。 最高のインターフェースは描かれていませんが、書かれています。 何を書くか、またはボタンを何と呼ぶか​​について常に考える必要があります。 各文字は重要です...





ここに、Windows Phone 7のサンプルアプリケーションがあります。すべてがテキストで書かれています。 しかし、自分より先に進まないで、最終段階に到達しました...





作業の最終段階はビジュアルデザインです。 視覚的なインターフェース設計のトレンドについて話しましょう...





「SquemorphまたはSquemorphicデザインの意味を誰か知っていますか？...私は個人的に知りませんでした。」 私たちはすべてそのようなインターフェイスを使用していますが。

-現在、これはインターフェース設計の現在の傾向です。 実際のオブジェクトを取得して、画面に転送するだけです。 たとえば、これはiPadではなく、本棚です。 本を取り、読み始めるだけです。





たとえば、Mac OS Xのアドレス帳アプリケーションです。革製のカバーとブックマークがあります。 ここには、ページの折り畳みと、それらが縫い合わされている文字列さえあります。 詳細への注意。





そして、ここでタブレットはシンセサイザーになります。 以前にこのツールを扱ったことがある人は誰が何をすべきかを理解するでしょう。





このアプローチの利点を見てみましょう。

-インターフェースは馴染みがあり、何をすべきかがすぐにわかります

-デザイナーに質問はありません。「お金はいくらですか？！」インターフェースは「ボハト」に見えます！

-インターフェイスが愛を込めて描かれている場合、考慮することは興味深いです

-デザイナーは、ハイライトとシャドウを描く機会を逃しません。 考える必要はありません。テクニックを磨くだけです。





図像スタイルにはマイナスがあります：

-インターフェースが不便な場合があります。 結局のところ、私たちは不完全な世界をコピーしています。

-このアプローチは、新しい機能や機能の実装を妨げる可能性があります。

-画面スペースの最適でない使用の可能性

-古くなっている可能性があります。 顕著な例は、ディスクのメタファーです。 フロッピーディスクを見たことがない世代が成長しました。





-物理的なボタンはクールでクリアです。 しかし、図像はその可能性を使い果たし始めています。 新しいものが必要です。

-マイクロソフトは、新しい何かを思いつくことにしました。 「コントロールパネル」のイデオロギーを放棄し、「雑誌のレイアウト」の精神でインターフェイスを作成し始めるという考え方です...





そのため、Metro UIの概念がありました。 現実の世界をコピーすることなく、完全にデジタルインターフェイス。 これは革新的なアプローチですが、原則自体は新しいものではありません...





基本は「国際的な活版印刷スタイル」または「スイスのデザインスタイル」でした。 前世紀の50年代に登場し、読みやすさと清潔さを重視しました。 今ではクラシックなデザインになっています。 しかし、当時は革命でした...





Metro UI開発者がインスピレーションを引き出したもう1つの分野は、公共の場所でのナビゲーションです。 空港、公共交通機関、ショッピングセンター。 主なタスクは、迷子にならないようにすることです。





Metro UIの概念は、図像と実際のオブジェクトのコピーとは対照的です。 すべてのテクスチャ、ハイライト、シャドウをすぐに破棄します。 容赦ない単純化。





車のコンソールに戻ります。 ここでクリックできる場所は誰でも言うことができ、ここでねじることができると確信しています。





-画面上のボタンも同様です。 クリックできることをさらに説明する必要はありません。

-しかし、Metro UIでは、このアプローチが拒否されています...





ここのボタンは、単なる長方形と円です。 概念的に！ 経験の浅いユーザーには、このようなコントロールに問題があると確信しています。





Windows PhoneおよびWindows 8プラットフォームが最近登場しました。 現在、主なニーズは既存のアプリケーションの転送に関連しています。

-ここでは、たとえば、iPhone用のPravo.ruアプリケーションです。 WP7プラットフォームに移行する必要があります。

「でもそれをどうやってやるの？」 iPhoneインターフェースをコピーするだけです-それは間違っています！

-Metro UIの原則を考慮して、インターフェイスを再設計する必要があります。





インターフェイスを作成する手順について説明しました。 ただし、UIデザインは、インタラクションエクスペリエンスの概念の一部にすぎません。 UXアプローチは、ビジネスモデル、マーケティング、および著作権で使用できます。 残念ながら、私に割り当てられた時間は決して十分ではないので、インターフェイスのみに制限します。