Web アプリで適切な UI/インタラクション/機能設計を行うにはどのようなスキルが必要ですか?

https://stackoverflow.com/questions/21869

09-06-2019
|

質問

Web アプリケーションをゼロから開発する場合、使いやすくインタラクション豊富な製品を作成するには、どのようなスキルが必要ですか?

最初に UI プロトタイプを作成しますか?
ユーザーストーリーを使用していますか?
推奨または積極的に提唱したいアジャイル手法やベストプラクティスはありますか?

要するに： 要件の収集から AmazingWebApp™ への移行を可能にするスキルは何ですか?

ついに：お勧めの本はありますか？

解決

デザインのセンスが良いですね。これはプログラマーにとって理解するのが難しいことです。プログラマは、何が機能するかについてはよく知っていても、実際に最もよく機能するものを作成する方法を理解していない場合があります。主に、すべてを取得し、何かが機能するとクリックするまで自由に移動する能力が必要です。

私のやり方は、オンラインまたはオフラインでタスクを達成する方法について、最も論理的で一般的なアイデアを誰かがどこで実行するかを調べ、それを再現する方法を検討することです。短く、短く、明確で、理解しやすく、論理的に考えてください。指示なしで誰かにそれを渡すことができ、その人があなたがしてほしいことをすべてやってくれるなら、それはうまくいきます。アプリ上で日常的なことを行うための指示が必要な場合、それは悪い設計です。

また、自分でも気づいていないかもしれないが、何らかの理由で機能するレベルで魅力的な他のアプリを見て、それを再現してみてください。

他のヒント

ソフトウェアを単純に使用するのが最善の方法だと思います。

アプリに取り組んでいるときは、週の終わりに（場合によってはそれより早く）自宅にメールで送信することが多く、「仕事モード」から抜け出し、通常どおりインストールします（つまり、IDE からは実行しないでください) を使用してください。

「テストモード」から抜け出すのは難しく、アプリケーションのことを「忘れて」しまうこともあります。しかし、一度調子に乗れば、それは可能です 本当に 便利で、非常に目を見張るものがあります (もちろん、「クールな小さな機能」が実際にはひどいもので、再実装する必要があることに気づくと、時々悲痛な気持ちになります!)。

上司は私がユーザビリティに関して「鈍感」だと言います。私はそれが好きです：）

何らかのビジュアルプロトタイピング (HTML と CSS を使用する場合でも) が最適だと思います。コーディングを始めて、後からインターフェースのことを心配したくなる誘惑に駆られますが、それがたいてい最悪の結果につながります (少なくとも私にとっては)。私はこれを開発します ©素晴らしい機能性 そして、コードにアクセスするためのツールをすぐに入手できるように、インターフェースを急ぐことになります。

どこで聞いたか忘れましたが、エンドユーザーにとって、インターフェースはアプリケーションです。ユーザーを満足させたい場合は、インターフェースから始めて、提供する機能をインターフェースに決定させる必要があります。

ベストプラクティスはチームメンバーの才能に依存します。

まず、常にユーザーストーリーを作成し (可能であればチームイベントにします)、LighthouseApp.com またはお気に入りのチケット発行システムにロードします。最初の 10 ～ 20 個だけで十分です。

UI デザイナーがいる場合は、ページのプロトタイプが役立つことがあります。ただし、ソフトウェア開発者が十分な HTML/CSS スキルを持っている場合は、クリーンな UI/HTML/CSS を備えた実用的なプロトタイプをできるだけ早く作成することを好みます。この出力は、HTML/CSS を再加工/装飾できる「最新の Web デザイナー」に渡すことができます。デザイナーは、ソース管理システムを介して開発者と同じコードベースで作業する必要があります。

「古い学校のデザイナー」の中には、「サイトを飾る」という提案に腹を立て、プログラマーに Photoshop ファイルを渡そうと主張する人もいます。これは単純なマーケティング Web サイトには問題ないかもしれませんが、AmazingWebApp™ を構築するプロセスは好きではありません。

ここの人たちは素晴らしいヒントをくれます。

「見た目の美しさ」と「機能的」（または使いやすさ）の間には違いがあります。実際には、一方をもう一方なしで持つこともできます。このフォーラムは良い例です。非常に使いやすいですが、率直に言って醜いです - 申し訳ありませんが、スタック、私はまだあなたを愛しています :)

現実はあなたが必要です スキル 良いインターフェースを作るために。これには長年の練習が必要です。私は通常、新しいアプリの UI 全体をデザインする契約を結んでいます。このようなスキルを持ったプログラマーやグラフィックデザイナーを私はめったに見かけません（狭い市場です）。私は大学で、HCI、UI デザイン、ユーザビリティ分析に対する天性の洞察力を持っていることに気づきました。私はたくさんの本を読み、経験を積むことでこれらのスキルをさらに磨きました。 FUIデザインをたくさんやってます。 つまり、私が言いたいのは、UI デザインが上手くなりたいと真剣に考えているのなら、かなりの努力をする準備をしなさいということです。やろうと思えば何でもできますが、UI デザインの勉強に時間を費やしているということは、Ruby on Rails やその他の最新のテクノロジを使用したアジャイルの学習に時間を費やしていないことを意味します。

いくつかの一般的なヒント:

Web ソフトウェアアプリを構築している場合 (中小企業のプレゼンス Web サイトではなく)、ローファイプロトタイピングは優れています。大勢の人々を集め、紙の束とカラーマーカーを用意すれば、数日でどれだけ多くの画面をスケッチできるかに驚かれるでしょう。
ソフトウェアは一目瞭然である必要があります. 。ソフトウェアにはユーザーマニュアルは必要ありません。私が開発した CMS にはユーザーマニュアルがありません。数十人の顧客がそれを使用していますが、マニュアルを求められた人は一人もいません。
「偉い人たち」が何をするか見てください。eBay に次のような検索ボックスがある場合:'[......] (検索)' なら、あなたも同じようにしてください (非標準ではなく、OK:'検索：[......] （行く）'。）。これはとして知られています アフォーダンス. 。人々が他のシステムに精通していることを利用して、自分のシステムがどのように機能するかを彼らに理解してもらうことになります。

この本をお勧めします:

ユーザビリティを考えさせないでください

参考になるブログ記事もいくつかあります。

私たちが行っていることの一部:

紙上、Photoshop、そして場合によっては実際の実装の両方でさまざまなコンセプトを探求する、たくさんのプロトタイプ
物事を切り戻し、反復してください。最初からアプリ全体を完璧に仕上げようとしないでください (そうはならないと心の中ではわかっているからです)
賢さよりも明瞭さ。これは、ユーザーエクスペリエンスに関する仕事をするときに私が最近自問していることの 1 つです。確かにアイコンや糸状のものは見栄えが良いかもしれませんが、それらは明確で簡潔ですか?
ユーザーの目標に焦点を当てます。開発者が一度に 1 つの画面、一度に 1 つのタスクに集中するのは非常に一般的な傾向です。それはあなたのアプリケーションを使用している人の考え方ではないことを忘れないでください。彼らは心に目標を持っているので、できる限りそこに自分自身を集中させるようにしてください
構築中のソフトウェアをできる限り使用してください。ソフトウェアの欠点、欠点、問題を確認するには、自分で体験するより良い方法はありません。

@Brian Warshaw - アザ・ラスキンが行った講演からだと思います。このビデオは私が思う

完全に革新的な UI をデザインすることは、ほとんどのプログラマーにとってかなり難しいことです (私だけでしょうか?)。Web アプリの UI を構築/デザインするときに役立つと思うのは、インターネットを閲覧したり、他のデスクトップアプリを使用したりするときに見つける、素晴らしく、使いやすく、エレガントなユーザーインターフェイスに常に注意を払うことです。当面のタスクに対して最も効率的な UI (他の人が別の場所で設計した) を見つけただけであれば、アプリのより良いユーザーエクスペリエンスを実装して作成するという仕事をうまく行うことができます。たとえば、この回答を入力しているときに、「プレビューを非表示にする」オプションを備えた回答のリアルタイムプレビューが表示される方法が気に入っています。ユーザーフォーラムインターフェイスを構築するときに、同様のタイプの対話を間違いなく使用したいと考えています。。

何を構築しているのか、そしてその製品が何を表現しているのかを理解することは、成功するアプリケーションを構築するための大きな鍵となります。私は最近、要件の収集に関するブログエントリを書き、これについて少し説明しました。ここで読むことができます:要件収集スキルを向上させる方法。

また、楽しいエクスペリエンスを備えた適切な製品を確実に構築するために私が従う大まかな原則をいくつか紹介します。

ユーザーと顧客の違いを理解する。輝かしいプロジェクトを承認するのは通常、顧客です。ただし、致命的な間違いは、ユーザーをユーザーと混同する傾向があることです。通常、顧客は製品の必要性を認識している人ですが、ユーザーは実際にソリューションを使用する人です (そして、製品が満たしていない要件について後で苦情を言う可能性が高くなります)。複数の人のところに行く

なぜなら、私たちは皆人間であり、耐え難いほどの詳細をすべて覚えているわけではないからです。より多くの人と話し、クロスチェックすることで、見逃している要件を見つける可能性が高くなります。

特売品を避けるユーザーが非常に具体的なことを要求した場合は、注意してください。常にバイアスに疑問を持ち、それが本当に製品を改善するかどうかを確認してください。

プロトタイプリリースまで待たずに、自分が持っているものをユーザーに示しましょう。プロトタイプ (ベータ版と呼ぶこともできます) を頻繁に作成し、開発プロセス全体を通じて継続的なフィードバックを取得します。これを行うと、おそらくさらに多くの要件が見つかるでしょう。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow