Wake Up Provinceでのインターフェイスのテイミングまたは1つのトーク

10月25日に、Web開発者Wake Up Provinceの2回目のサラトフ会議が開催されました 。 今日、私はそれについての私の報告についてhabrasocietyに話すことにしました-私はそれが誰かにとって面白いかもしれないと思います。 一般的に、このトピックは単純で気取らないです。コンピューターが苦痛を引き起こすのはなぜか、それを顧客に説明する方法です。 インターフェイスの設計方法と「透明な」開発の原則。



このレポートは、非常に有名な人物、アラン・クーパーの思考と結論の実際の展開に使用した私たち自身の経験に基づいています。 同時に、多くの開発が私によって「育まれ」、一部はHabrから借用されました。



カットの下では、レポートのわずかに洗練されたテキストとほぼ12枚のスライド（〜660Kb）。 テキストを壊さないために、スライドはネタバレに隠されています。

一般計画

1. インターフェースの問題。
   
   ユーザーの目の痛みと開発者の態度。 論文は「ユーザーは酔っ払っています」です。
2. 時代遅れの知覚。
   
   産業時代の基準によるIT開発の認識、それが悪い理由、およびインターフェイスを設計する必要性を顧客に納得させる方法。
3. インターフェース設計
   
   平均的なWebサイトの例（リンク図、プロトタイプ）を使用したデザイン自体についてのいくつかの言葉。
4. 透明なデザイン。
   
   「透明な」開発。 すべての段階で顧客の手を握る。 なぜこれが重要であり、否定性を回避する方法。
5. 結論、要点。

インターフェースの問題

ユーザーの目の痛みと開発者の態度。 論文は「ユーザーは酔っ払っています」です。



IT業界が日々私たちの生活に深く浸透していることを思い出しても、新しいことは言いません。 スマートフォン、タブレット、時計、ナビゲーター、ラップトップおよびコンピューター、端末。 これは、オタクやIT専門家だけでなく、ほとんどの人に当てはまります。 これらは発展途上国の現実です。



同時に、恐ろしく不便で対立するインターフェースが私たちを取り囲んでいます。 私たちはこれらの不便さに気付かないように「挽き」ますが、どこからでも消えることはありません。 誰かが今私に反対し、部分的に正しいでしょう。 私たちITの人々と彼らに同情する人々にとって、インターフェースに特別な問題はありません（またはほとんど）。 しかし、私たちのそれぞれには親//友人/隣人がいて、その仕事はクラスメートに登録することは知的intellectual迷を引き起こすよりも困難です。 そして、彼らは愚かな、普通の人ではないようですが、ある時点で、彼らは機械が彼らに何を望んでいるかを理解するのをやめるだけです。 そしてそれが問題です。 認識の違い、技術トレーニングのレベル、世代などについて、好きなだけ話すことができます。 これの本質は変わりません。準備が整っていないユーザーは、場合によってはインターフェイスが敵になります。 もちろん、上記の例は非常に極性があります。 そして、ほとんどの場合、問題はそれほど顕著ではありません。 しかし、彼女は存在します。 そして、ほとんどの場合、この問題の原因はITスペシャリストです。



ほとんどの場合、ユーザーが最初に彼を知ったときに何が起こるかを理解するために、プロジェクトのアイデアから完全に離れることはできません。



さらに人気があるのは、顧客またはプロジェクトマネージャーが頭の中にプロジェクトの全体像を持っていない場合です。 全体像では、インターフェイスの相互作用、論理シーケンス、ユーザーアクションなどを意味します。 そしてそれは完全に正常です。 最も頭の良い人でさえ、頭の中に10〜15個以上のシーケンスを保持することはできません。



ただし、これは、前の理由と同様に、プロジェクトの作成が「破損」し、インターフェースがそれぞれ「破損」するという事実につながります。 最良の場合、私たち全員に愛される「編集」の必要性、プロジェクトのアーキテクチャ、従業員の相互作用がより複雑になり始め、モチベーションが低下するなどです。 最悪の場合、プロジェクトはそのまま本番になります。 完成品を装って市場に売り込もうとすると、生の製品はどうなりますか？ 典型的な例は、いくつかの抽象的な企業サービス用の仮想Webダッシュボードです。 サービス自体が完璧であると仮定します。 それは苦情なしで動作しますが、（上記の理由のいずれかのために）不快で、理解できず、いコントロールパネルがあります。 それでは、購入会社が従業員に新しいツールを提示するとどうなりますか？ エントリのしきい値はすぐに上昇します。 このパネルで作業するための不幸を持っているマネージャーは静かに宣誓している。 パネルで作業する生産性が低下し、チームの全体的な効率にすぐに影響します。 その結果、生産性の向上の代わりに、経営陣はその低下を見ます（まあ、または非常にわずかな増加）。 この場合、サービスの製造業者は否定的なものしか受け取りません。 通常の顧客でも、肯定的なレビューでもない。



それではどうしますか？ 製造会社がエンドユーザーとの対話を構築する際に適切なアプローチを使用しているかどうかを判断する方法 普遍的な答えはありません。すべてがプロジェクトごとに個性的です。 しかし、私の仕事では、おそらくあなたが聞いたことのある簡単な論文から始めます。 これは、オーストラリアのデザイナーWill Dableによって提案されたメタファーであり、habrovchanin ilya42によってこれらのページですでに言及されています。「ユーザーは酔っ払っています。」



酔っているユーザーは知的活動を減らしており、いらいらしたり、怒ったり、時には矛盾したりします。 彼は注意を集中させることに問題を抱えています。 酔っ払ったユーザーがインターフェイスを把握できれば、落ち着いた人にとってはまったく問題になりません。

時代遅れの知覚

産業時代の基準によるIT開発の認識、それが悪い理由、およびインターフェイスを設計する必要性を顧客に納得させる方法。



だから。 インターフェースがユーザーにとって、そしてそれに応じてビジネスの敵となる2つの主な理由。 私は強調します：実際にはもっと多くのそのような理由があるので、主なもの。



1つは、「側面からのビュー」のためにプロジェクトから抽象化されていないことです。 2つ目は、顧客と管理者と開発者の両方によるインターフェイスの相互作用の整合性について明確に理解していないことです。 ここでは、プロジェクトの開発者とそのマネージャーを特別に共有します。 次に、その理由を説明します。



実際、私が先ほど述べた2つの理由は、まったく原因ではなく、結果です。 開発前にユーザーインターフェイスと相互作用を設計することの重要性に対する認識不足の結果。



問題の本質は、多くの非常に多くのマネージャーが、情報ではなく産業時代の基準でIT開発を認識していることです。製品が実際の材料で構成され、その生産には多数の変動費が必要でした：原材料の購入、輸送、製品の製造、再び輸送。 各ユニットの販売による利益を増やすには、製品のコストを増やすか、これらの非常に変動するコストを削減する必要がありました。 当然、最も一般的なソリューションはコストを削減することでした。



そして今、多くの管理者がこのスキームに従って作業し、設計とプログラミングを節約し、現実が変わって変数コストがそれほど大きくないことを完全に忘れています。新製品は原料や高価な輸送を必要としません。 ここで最も成功した成長スキームは、正確に値または売上の増加です。



クーパー氏は次のように引用しています。 「経済成長の源泉は品質を向上させ、結果として製品またはサービスの魅力を向上させていますが、設計とプログラミングのコストを削減することでは達成できません。」

これは、真正な製薬会社の例によって非常によく実証されています。 新薬の研究開発は何年も続き、数百万人を必要としますが、消費者に害を及ぼす可能性のある薬を市場に投入することは誰にも起こりません。

もちろん、IT生産では、物理的な生産ではない独自の費用項目がありました。 ただし、一度作成されたIT製品またはサービスは数百万回販売される可能性があり、これは通常の「マテリアル」対応ではできません。



したがって、ここではすべてが明確です。 設計とプログラミングにより多くのお金を与えます-より良い製品を手に入れ、チーム内の多くの問題を回避します。 すべてが論理的でシンプルです。 私たちITの人々。 しかし、決して顧客のためではありません。

平均的な顧客にとって、デザイナーが自分のサイトをすぐに描くことができない理由を説明することはそれほど簡単ではなく、レイアウトデザイナーを持つプログラマーはWeb上でこのデザインを再作成できません。 そして、そのような顧客は理解できます。



そして今、注意、質問。 予備設計の必要性を顧客に納得させる方法は？ それ自体を請う最も単純な答え：彼にすべてを伝えること。 私があなたに伝えたのはこれだけです。 さて、今日お話しすることを追加してください。 時にはそれが動作します。 顧客は浸透し、「すべての規則によって」作成されたサイトを取得したいという欲求に火がつきます。 素晴らしい。 誰もが幸せです。



しかし、これは常に起こるとは限りません。



私は多くの方法を試しましたが、最も効果的なのは、デザインの重要な利点を顧客の意識に伝えることでした。 実際にあなたは追加のお金を強要していないが、本当に高品質の製品を作りたいと思っていることを自分で理解することが重要です。 さらに、プロジェクトの最終予算を削減します。 それでは、その理由を説明します。



「レイアウトの編集」というフレーズは誰でも知っています。 既存のデザインや機能を改良するのに、元のバージョンと同じくらいの時間がかかる場合があることは誰もが知っています。 これは誰にとっても有益ではありません。 1か月を「仕上げ」に費やし、別のプロジェクトに完全に切り替えたり、作業を続けたりできないデザイナーにとっては、採算が取れません。 誰かがかつてTKに追加するのを忘れていた機能を接続するために、時々アーキテクチャを壊さなければならないプログラマーにとっては有益ではありません。 修正のために、締め切りが破られ、人々が計画以上に働き、一般に、完全な胸焼けが始まるため、経営陣やチームリーダーにとっては有益ではありません。 まあ、これは何よりもまず、顧客にとって不利です。なぜなら、彼は未完成のサイトを100回にわたって調べることに時間を費やしているからです。



相互作用の予備設計により、その後の製品修正の数が最小限に抑えられます。



また、設計は作業の構造化に非常に役立つことにも注意してください。 その助けを借りて、最小限の労力でプロジェクトを段階に分割できるだけでなく、すべてのチームメンバーがプロジェクト自体について単一の明確な理解を持つようにすることもできます。 また、これは時間と予算の大幅な節約にもなります。



プロジェクトの開始時にプロトタイプを作成するもう1つの便利な点は速度です。 通常、サイトは段階的に行われます。最初にデザイナーがレイアウトを描き、次にプログラマーが仕事に取りかかります。 私たちの場合、ほぼ同時に開始することができます：デザインの作成中、プログラマーはバックエンドで作業を開始できます-結局のところ、この瞬間までに、プロジェクトのロジック全体が開発者に明確で理解可能です。



さらに、単純な類推が理にかなっています。ソフトウェア製品は、Webサイトであろうと何らかのネイティブアプリケーションであろうと、依然として製品です。 さらに、実装に関しては、通常の「物理的な」プラントやワークショップが生成するものよりもはるかに複雑な場合があります。 このユニットの詳細な計画と計画なしに、遠心ポンプの作成を開始することは誰にも起こりませんか？



さて、制御引数は常に機能します。 「ユーザーに苦痛を与えたくないですか？ 高度な変換と直感的で全体的なインターフェースが必要ですか？ そのため、適切なプロトタイピングなしにこれらすべてを実装することは不可能です。」

インターフェース設計

平均的なWebサイトの例（リンク図、プロトタイプ）を使用したデザイン自体についてのいくつかの言葉。



しかし、ここで私は「プロトタイピング」、「デザイン」を繰り返しています。 ユーザーの目を血の涙から救う万能薬とは何ですか？ ほとんどの人は私なしでこれを非常によく知っていますが、それでもスキーム自体の概要を説明する機会を逃すことはできません。 実際、これは別の問題であり、非常に膨大な量です。 したがって、今日は、主なポイントのみを追い越して彼女に触れます。



例として、平均的なサイトを取り上げます。 設計はすべて研究から始まります。 市場調査、競合他社、製品ターゲットオーディエンスなど。 これを行うには多くの方法があり、どの方法を使用するかは製品のレベルに依存します。 ここにデータを表示するための特定の形式はありません-すべてがプロジェクトごとにあまりにも個別です。 その結果、あなたとあなたが実装したいもの、これがどのように行われ、誰がそれを必要としているのかについて、最も完全な全体像をつかむ必要があります。



次に、キャラクターがコンパイルされます-クラスの「参照」の一種であり、この同じ聴衆の説明に最も適しています。 キャラクターがより完全に記述されるほど、製品とユーザーの相互作用がより定性的で思慮深くなります。



私は正直になりますが、キャラクターの作成を自分で無視することもあり、すぐに次の段階に進みます。 原則として、これは、すべてが事前にわかっている良い方法で、小さな標準プロジェクトで許可されています。 たとえば、これは単純な百科事典アプリケーションであり、標準ページがあらゆるもののかかとです。 また、キャラクターの作成が非常に重要である場合、自分の目標を見失うことなく、将来のユーザーのニーズと特性に集中することができます。



これらのキャラクターの予想される動作に基づいて、一連のアクション、インターフェイスの固有の論理チェーンが構築されます。 これを接続図（または、マインドマップとも呼ばれる）で表すのが最も便利です。 ここ-サイトへの最初の訪問とアカウント作成からサービスの直接使用まで、すべてのユーザーアクション。



同じ接続図を使用して、詳細なサイト構造がコンパイルされます。これには、404エラーなどのサービスページを含む絶対にすべてのページが含まれます。 ページとセクションの名前のみ、またはプログラムクラスまでの各要素の完全な説明が存在する場合があります。 これは、顧客、デザイナー、プログラマー、レイアウトデザイナーでプロジェクトの統一されたアイデアを作成するために必要です。 単一の深刻なプロジェクトでさえ、このような図がなければできません（必ずしもこの形式である必要はありません）。 これは、セクションとサブセクションに分割されたテキストのシートにすることができます。 写真の簡単なセットがあるかもしれません。 一部の職人は、このためにExcelテーブルを使用しています。 しかし、個人的な意見では、この点でマインドマップが最も便利であると考えています。



メイドマップの準備ができたら、プロトタイプの時間になります。 プロトタイプを無視しないでください。 可能であれば、単純なグラフィックプロトタイプに加えて、常にインタラクティブプロトタイプを作成します。 幸いなことに、これらの目的のために特別なソフトウェアが開発されました。 プロトタイプを使用すると、サイトまたはアプリケーションの視覚的表現を作成できます。デザイナーやプログラマーがまだビジネスに参入していない初期段階で、顧客とのやり取りなどを促進できるプロトタイプを使用して、欠陥を修正する機会を提供します。 真珠自体が、インターフェイスの単純な白黒プロトタイプからすでに作成されていることを確認する必要があります。 プロトタイプをプロジェクトデザイナーと一緒に作成すると便利です。 デザイナー自身がデザイナーである場合はさらに良いです。 しかし、これは一般的ではありません。 いずれにせよ、プロトタイプがすべてです。



また、接続図とプロトタイプの準備が整った場合にのみ、設計、プログラミング、レイアウトなどを開始できます。 その場合、設計者はタスクを明確に理解し、プログラマはアーキテクチャを最適に構築でき、レイアウト設計者は最も簡潔なレイアウトを作成できます。 そのようなサイトへの訪問者は、視力と理由を維持する可能性が非常に高く、開発チームと顧客全体が多くの時間と労力を節約します。

インターフェイスの相互作用を設計するために使用するツールは次のとおりです。

• Mindjetは、シンプルで便利なマインドマップツールです。 数回クリックするだけでドキュメント全体のデザインを変更したり、サードパーティのアドオンを使用したりなど、通信を柔軟に変更および構成できます。 プロジェクトのすべての方向とモジュール、構造の視覚的表現を共通の分母にもたらす優れたツール。
• Balsamiqモックアップ -プログラムの本質は名前から明らかです。 サイトまたはアプリケーションのアウトラインモックアップ用のシンプルでエレガントなソリューション。 印象的で拡張可能なツールのライブラリを備えています。 操作が便利で直感的です。
• Axure RP-提示されたプログラムの中で最も強力です。 モカパのスケッチにも使用できますが、how弾砲からアリを撃つようなものです。このために専用のツールを使用する方がはるかに簡単、迅速、正確です。 Axure RPも優れています。その助けを借りて、30分でhtml + css + jsのインタラクティブプロトタイプを作成できます。このプロトタイプでは、ページ間を移動してボタンリンクをクリックできます。

透明性のある開発

「透明な」開発。 すべての段階で顧客の手を握る。 なぜこれが重要であり、否定性を回避する方法。



もちろん、最も完璧なデザインであっても、開発がスムーズに進むという保証はありません。 さらに、設計だけでは当然、十分ではありません。 ビジネスロジックの突然の変更（たとえば、「長期建設」の場合）、新しい競合他社の市場への参入、ソフトウェア実装の最初に暗黙のうちにあった問題などに関連する困難が常にあります。 しかし、私の記憶では、プロジェクトの構造とロジックをある程度変更した最も頻繁な理由は、顧客自身でした。



部外者を信じることは困難ですが、顧客が共同で行った決定を単に忘れた場合があります。 結局、これは繰り返された無意味な議論をもたらしました。



さらに、顧客は単純に考えを変えることができます。結局、プロトタイプ作成段階でのプロジェクトとの最後のミーティングと、彼に提示されたアルファ版との間に数週間が経過します。



したがって、これらの問題を回避するだけでなく、顧客が開発を完全に制御できるソリューションもあります。 さて、または制御の感覚-それはあなた次第です。

このソリューションの名前は「透明な」開発です。



その本質は名前からシンプルで明確です。 製品を作成するプロセス全体は、顧客によって完全に制御されます。 彼はいつでも、彼の頭脳が今どの段階にいるかを見ることができ、場合によっては「触る」ことさえできます。 このアプローチは、プロジェクトの設計段階でも使用する必要があります。これにより、顧客によるプロセスの理解が大幅に簡素化され、開発者の時間を大幅に節約できます。



これらの目的でRedmineプロジェクト管理Webアプリケーションを使用します。 YouTrackやJIRAのようなアナログがあります-多くの人が長い間それらを知っていると確信しています。 したがって、プロジェクトを開始し、開発者にタスクを配布し、そこに顧客がアクセスできるようにするのに費用はかかりません。 いくつかの重要なポイントで-新しいステージについて顧客に電子メール通知を送信し、スクリーンショットまたはリンクを将来のサイトの作業ページ、設計レイアウト、またはプロトタイプに添付します。 実際、それは初めてだけで時間がかかり、その後、すべてが「順調」に進み、絶対に困難や遅延を引き起こすことはありません。 さらに、これにより、別の「機能」を調整するために都市の反対側への長い旅行を避けることができます。



もちろん、特定のプロジェクトと顧客に大きく依存します。 ほとんどの場合、クライアントにソフトウェアタスクへのアクセス権を付与する必要はありません。一般的に、プログラマーと顧客のデザイナーを最大限に区別する価値があります。 これらはすべて、アクセス制御のレベルで静かに行われます。



各チームは、独自のニーズと能力に基づいて、独自の方法でこれらの方法を非常に簡単に拡張できます。

このアプローチには多くの利点があります-作業の明確な構造化から象としての満足したクライアントまで。

結論、要点

おわりに 上記、論文の一般化。



したがって、要約すると、これらの重要なポイントに到達します。

• 多くの場合、インターフェイスは使いやすく、一貫性がなく、不便です。 これは深刻な問題です。
• インターフェースに欠陥を表示する良いアプローチは、 酔っ払ったユーザーによる使用を提示することです。
• 不十分なインターフェイスの相互作用の主な理由の1つは、変動コストを削減することで成長が達成された、産業時代の標準によるIT開発に対する姿勢です。
• 解決策：開発前の製品設計への集中力を高めます。
• まず、このアプローチの経済的なメリットを説明することにより、設計の必要性を顧客に納得させることができます。
• デザイン自体は、初期調査、キャラクター作成、接続図、インターフェイスプロトタイプで構成されています。
• 「トランスペアレント開発」を使用すると、開発プロセスを完全に制御できるため、その後の製品開発を最小限に抑えることができ、顧客側のマイナス面もなくなります。

私は、南北アメリカの発見のふりをしてはいませんし、少なくともここで説明されているアプローチの最終性はどういうわけかです。 それどころか、私の作業方法は常に進化しており、合理的な批判やアドバイスを喜んでいます。

そして、レポートの近くにいて、自分でレポートを修正したい人のために、ここにプレゼンテーションを投稿します。