プロジェクトにデザイナーがいない場合、開発者はUIモックアップを行う必要がありますか?


57

私はプロプライエタリなWebアプリケーションを作成する小さなチームと協力しており、UXは私たち自身が操作するので優先順位は高くありませんが、仕事を楽にするよう努めています。

開発者として、新しい画面の作成を開始する前にUIモックアップを作成する必要がありますか?派手なことは何もありません。ほとんどの場合、同僚と話し合って参照モデルを作成するための一般的なレイアウトです。盲目的にコードを記述する前に、いくつかのUMLダイアグラムの作成と比較していました。

私の同僚の一人は、これは馬鹿げていると言い、それをするのは私の仕事ではありません。


51
デザイナーがいなくて、開発者の仕事がない場合、誰がそれをするのですか?管理人ですか?
GrandmasterB

10
確かに可能ですが、そうすべきかもしれませんが、あまりにもドラマチックな同僚が言うように、決して異常ではなく、間違いなく「馬鹿げた」ものではありません。状況や環境によっては、完成品のように見えるものよりも、意図的にラフなモックアップを行う方が良い場合があります。Balsamiqは、モックアップを紙やホワイトボードに描くだけであるため、このための優れたツールです。
ジョーバラード

3
あなたは本当に「モックアップ?」「モック」は別のものです
ロバートハーベイ

23
ユーザーエクスペリエンスデザインは、見た目を美しくするだけではありません。プログラマーはそれに非常に関与する必要があります。
ジェフ

2
馬鹿げているのは同僚の反応です。これは非常に一般的です
Claudiu Creanga

回答:


74

私は非常に頻繁にそのようなプロジェクトに携わっており、答えは圧倒的なYESであり、できるだけ早くです。

人々は、ゼロから解決策を考え出すよりも、ドラフトの改善を批判する方がはるかに簡単だ感じています。そこで、次の2つの理由でドラフトを早期に開始します。

  • 問題の専門家に、情報の提示方法に関する印象を与えます。
  • 問題と情報構造の現在の理解を示してください。

まれに、同意した内容を実際に配信したことを示す証拠があると便利でした...


16
正直なところ、少なくともあなたの前にナプキンのスケッチがあれば、コードを書くのはとても簡単です。
キャシー

9
ポイント2)ビジネスが些細でない場合、非常に重要です!
ビッグストーン

4
UXを3年間働いた人として、人々(開発者、クライアント、エンドユーザー)と話すためのスケッチを持っているだけで、非常に便利で重要です。誰かがイライラしたためにサイトを完全にやり直す必要がない場合は、今後の時間を大幅に節約できます!
グノメホン

39

モックアップは素晴らしく、開発者がモックアップをしてはいけない理由はありません。(プロジェクトにUIデザイナーがいる場合でも、開発者がUIレイアウトの大まかなドラフトを作成すると便利です。)

実際の画面のように見えるモックアップを作成しないことを強くお勧めします。これらを、色やテーマのような問題ではないことに焦点を当てるエンドユーザーと共有する場合。私がお勧めすることは、紙に手書きのスケッチまたはホワイトボードのスケッチを作成することです。あなたがコンピュータの使用中のようなもの、それらをしたい場合や鉛筆プロジェクトまたはVisioを(ここでは手描きを見てジョナサンAbbettからいくつかのVisioのステンシルがあります。)


6
オーバーレイ、ダイアログなどを手描きで描いたり、ハサミで切り取ったり、ユーザーが手描きボタンに触れたときに手描きのメイン画面の上に配置することもできます。直観的にわかるもの、実際に必要なボタンの数などについて、非常に迅速に説明できます。
RemcoGerlich

それはただのクレイジーな話です...実際に絵コンテをやっています。これらの新しい男性のための古い学校への道:P
マシューホワイト

1
「実際の画面のように見えるモックアップを作成しないでください」は非常に深い洞察です。
アンドリューマイヤーズ

1
ユーザーは、提示されたスクリーンショットがどのように洗練されているかによって、プロジェクトの完了を判断するという逸話を覚えています。プレゼンテーションと機能を区別しないこのような非技術的なユーザーにとって、スケッチを維持することは、「行われていない」ことを伝えるために非常に重要です。
マチューM.

1
@Andrew ...これは、AccessとVBでアプリをモックしていたときに学んだことの1つです。あなたは誰かにスクリーンショットのように見える何かを見せて、あなたはそれを出荷できると期待しています:)
マシュー・ホワイト

11

そのとおり。

他の人にあなたの仕事のやり方を教えさせないでください。そして、あなたは正しいです、それはあなたのデータモデルのためにUMLをすることに非常によく似ています。あなたが開発者であると仮定すると、あなたの仕事は高品質のソフトウェアを提供することです。モックアップがそれを助けるなら、それはあなたの仕事の一部です。

低忠実度のモックアップを行う-実際の画面のように見せないでください。フォント、ピクセル、境界線の調整に時間を浪費することになり、ユーザーは機能に集中するのではなく、そのような詳細に執着します。balsamiqのようなものがこれに最適です。他の同様のツールは間違いありません。モックアップを手に入れると、プロジェクトの機能をユーザーや開発チームの他のメンバーと簡単に議論できます。


もちろん、あなたが言うように、私は低忠実度のモックアップについて話しています。私は個人的にdraw.ioを超軽量ソリューションとして使用し、同僚と簡単に共有できるようにしています。
コンスタンチン

10

「新しい画面」を設計するときは、最初にユーザーや同僚とUIの大まかなアイデアについて話し合いたいと思います。これを「コード内」または「UML内」のユーザーと議論することはできません。ユーザーは単に機能しません(プログラマー間でも機能しません)。そして、最初の2つまたは3つのスケッチを破棄するか、少なくともUI要素を大幅に再配置する必要があることを期待する必要があります。

そのため、これをすばやく実行できるグラフィカルUIデザインツールがある場合は、それを使用するのが理にかなっています。ただし、UI要素を手動でコーディングする必要があり、UI要素を破棄または再配置するのに多大な労力が必要な場合は、最初にUIを「コーディング」しない方が明らかに理にかなっています。グラフィカルな描画ツールを使用するか、単に鉛筆と紙を使用して、個別のモックアップを作成する方がはるかに効率的です。


5

必ずしも。モックアップがほとんど役に立たない理由が少なくとも2つあります。

まず、あなたがやろうとしていることを行うことに関して確立された業界慣行があれば、あなたは先に進み、まさにそれをすることができます。UIデザインの技術を推進することはありませんが、それも同様です。

第二に、エンドユーザーは多くの場合、自分にとって何が良いのか、なぜそうなのかを知りません。彼らは、プログラムの使用を開始するまで(実際のデータまたはモックデータを使用して)知ることができません。それに役立つ静的モックアップはありません。

「以前のN画面のようなちょうど別のUI画面」のための適度に柔軟なWebフレームワークを使用すると、作業中のプロトタイプから始めて、進行に合わせて再配置できます。モックアップを作成し、何か面白いことをしようとするときはいつでも同僚と話し合ってください。


エンドユーザーが何が最善かを知らないというのは半ば真実です。しかし、アプリケーションのレイアウトとフローを確認するまで、何が最善かを正直に言うことさえできません。モックアップとしてUIを使用する場合の最大の問題は、設定する期待です。人々は何かを見て、重要でないささいなことについて不平を言うか、なぜあなたが他のものにこれほど長くかかっているのか不思議に思います。
マシューホワイトニング

@MatthewWhited UIについて話し合うとき、彼らはささいなことについて文句を言うのですか、それとも手元のタスクを達成するために製品を使用することを提案するときに、文句を言うのですか?私はむしろ後者の場合は、より建設的なことだろうと期待しており、これは1のインストールベースでの社内Webアプリケーションにも適しています
ユージンRyabtsev

3

常に!

私は小さな会社で働いており、唯一の「ソフト」なIT担当者です。すべての要件、設計、コーディング、テスト(誰かが私のテストを常に検証しますが)、データベース設計などを行います。

設計手順でコーナーを絶対に切らないでください-エンドユーザーは感謝します。エンドユーザーを満足させるためにやり直しをすることになりますので、あなた自身にも感謝します。モックアップが手書きの紙に過ぎない場合でも、何を期待すべきかがわかります。何かを走り書きするのに10分かかると、1週間の時間を節約できます(そこに行って、それを行いました)

また、コーディングにも役立ちます。それはあなたがする必要があること、それを達成するための最も効率的な方法、そして邪魔になるかもしれない障害について考える機会を与えます。

たとえば、テーブルxyzの日付をキャプチャしていないため、作成する必要がある「単純な」レポートは、最初に考えたよりも難しい場合があります。また、視野を広げ、チーム、上司を示したり、最低限以上のことを行ったり、「自分の仕事ではない」というボックスの外に出たりする可能性のある将来のキャリアの機会に使用することもできます(<---その男にならないでください、私たちは皆彼を嫌います)またはそれはあなたにさらなる学習の機会を与えます。


2

これをより一般的な方法で見てみましょう。

  • 下書きを作成するのは良い考えですか?
  • 誰がドラフトを作成する必要がありますか?

下書きを作成するのは良い考えですか?

ドラフトの作成には、主に2つの利点があります。まず、フォーカスが提供されるため、実行される実際の作業が高速化されます。第二に、作業が完了する前に作業の方向性を議論することが非常に簡単になります。

ドラフトを作成することのマイナス面は、時間がかかることです。作成に4時間かかるものについては、2時間かけて精巧なドラフトを作成しても意味がありません。

あなたの場合、モックアップのレベルは、プロジェクトに入る推定作業量とドラフトの利点を考慮する必要があります。これらに応じて、モックアップは、ポストイットの10秒の落書きから完全にインタラクティブなWebサイトまでのどこにでも配置できます。非常に大規模で高価なプロジェクトの場合、チーム全体がドラフトを数週間作業し、その間にドラフトのドラフトを作成することは珍しくありません。

誰がドラフトを作成する必要がありますか?

ここで詳細な回答をする必要はありません。ドラフトを作成することでメリットが得られる場合は、ドラフトを作成します。他の誰かがあなたのためにドラフトを作成して利益を得る場合は、他の誰かにあなたのためにドラフトを作成してもらいます。


作成時間を比較することの重要性に関する本当にいい点。ドラフトを作成したからといって、必要な時間を2倍にすることは意味がありません。
コンスタンチン

-2

あなたの同僚は絶対に正しいです。通常、内部アプリケーションの外観は事前定義されています。また、このようなアプリケーションでは、ユーザーは最先端のUIを探していません。彼らが望むのは、機能し、合理的に使いやすいものだけです。UIを根本的に変更する予定がない限り(内部アプリの場合は強くお勧めします)、既存のルックアンドフィールに従ってください。モックアップは素晴らしいですが、あなたの場合、痛みを増すだけです。


1
モックアップは、最先端のUIを構築するためのものではなく、画面のレイアウトと動作をモックアップするためのものです。実際、ほとんどの場合、実際にはそれほどきれいではありません。私はちょうど同意しません
キーレンジョンストン

3
モックアップは、開発中の特定の内部アプリケーションに役立つことがわかりました。アイデアは、外観を設計したり、新しいUIパラダイムを考案したりすることではなく(あなたが言うように、これは必要ではありませんでした)、UIは議論するための具体的なものを提供するため、要件をユーザーにからかうことでした。
James_pic

@KierenJohnstone私はあなたに完全に同意します。しかし、彼自身は「UXはそれほど優先事項ではない」と言っています。彼がチームのかなりシニアメンバーでない限り、彼の報酬は努力(モックアップの作成)と一致しません。モックアップは素晴らしいです。しかし、彼の状況ではそうではありません。
Kshitij Upadhyay

私は同意しません-モックアップはこの状況で本当に便利です-ほとんどの状況で-アプリがどのように動作するか、それが理にかなっているかどうか、そして要件が開発者によって理解されているかどうかを確認する-高価な部分が発生する前に(コードを書く)
キーレンジョンストン

1
私たちのチームは約3人です。1人のシニアメンバー/チームリーダーがいて、私とプロジェクトの仕事を請け負ったもう1人の男がいます。ドラフトは主に、チームリーダーと新しいスクリーンについて話し合うために行われました。また、新しい画面の要点は、使用するのが面倒だった既存の画面を改善することだったので、事前に定義された外観はなかったため、すべてをやり直す必要がありました。
コンスタンチン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.