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

Question

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

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

要するに:要件の収集から AmazingWebApp™ への移行に必要なスキルは何ですか?

最後に：お勧めの本はありますか？

score 3 · Accepted Answer

ソフトウェアを使うだけでできるのが一番いいと思います。

私がアプリで作業しているときは、週末に（場合によってはもっと早く）「作業モード」から抜け出し、通常どおりにインストールして（つまり、IDEから実行しないで）、アプリを自宅にメールで送信する傾向があります。

「テストモード」から離れて、実際にアプリケーションを「忘れる」のは難しいです。しかし、一度それを使用すると、非常に便利で、非常に目を見張るものがあります（もちろん、場合によっては悲痛なこともあります。「かっこいい小さな機能」は実際には不完全であり、再実装する必要があることを理解してください！）。

score 3 · Accepted Answer

センスの良いデザイン。これは、プログラマーが把握するのが難しいことです。プログラマーは、何が機能するかについては良い感覚を持っていますが、実際に最適またはうまく機能するものを作成する方法を理解していない場合があります。主に、すべてを受け入れる能力と、何かがクリックして機能するまで自由に移動できる能力が必要です。

私が行う方法は、オンラインまたはオフラインでタスクを達成する方法について、最も論理的で一般的な場所のアイデアを誰かがどこで行うかを見つけ出し、それを再現する方法を確認することです. 短く、簡潔に、明確に、アクセスしやすく、論理的に考えてください。指示なしで誰かにそれを渡すことができ、彼らがあなたが望むすべてのことを行うことができれば、それは機能します. アプリで日常的なことを行うための指示が必要な場合、それは悪い設計です。

また、あなたが気づいていないかもしれないレベルであなたにアピールする他のアプリを見て、それを再現しようとする.

score 1 · Accepted Answer

ここの人たちは素晴らしいヒントを提供しています。

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

現実には、優れたインターフェイスを作成するにはスキルが必要です。これには何年もの練習が伴います。私は通常、新しいアプリの UI 全体を設計する契約を結んでいます。この種のスキルを持つプログラマーやグラフィックデザイナーをめったに見ません (狭い市場です)。大学で見つけたのは、HCI、UI デザイン、およびユーザビリティ分析に対する自然な洞察力でした。これらのスキルは、多くの読書を行い、多くの UI デザインを行うことで経験を積むことで、さらに発展しました。だから、私が言っているのは、UIデザインが上手になることを真剣に考えているなら、ハードワークの準備をしなさいということです. 心に決めたことは何でもできますが、UI デザインの勉強に時間を費やしているということは、Ruby on Rails や最新のテクノロジーを使ったアジャイルの学習に時間を費やしていないことを意味します。

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

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

私はこの本をお勧めします：

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

役立つはずのブログ記事もいくつかあります。

score 1 · Accepted Answer

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

まず、常にユーザーストーリーを作成し (可能であればチームイベントにします)、それらを LighthouseApp.com またはお気に入りのチケットシステムにロードします。

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

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

score 1 · Accepted Answer

ある種の視覚的なプロトタイピング (たとえそれが HTML と CSS で行われたとしても) が最善だと思います。私の誘惑は、コーディングを開始して後でインターフェースについて心配することです。それは通常、何かひどいことを引き起こします (少なくとも私にとっては)。私はこの © WONDERFUL FUNCTIONALITYを開発しましたが、自分のコードにアクセスするためのツールをすぐに手に入れることができるように、インターフェイスを急いで仕上げました。

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

score 0 · Accepted Answer

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

また、楽しい体験で適切な製品を構築するために私が従ういくつかの高レベルの原則を次に示します。

ユーザーと顧客の違いを理解します。 光沢のあるプロジェクトを承認する事業主は通常、顧客です。ただし、壊滅的な間違いは、ユーザーとして混乱させる傾向があります。顧客は通常、製品の必要性を認識している人ですが、ユーザーは実際にソリューションを使用する人です（そして、製品が満たさなかった要件について後で不平を言う可能性があります）。複数の人に行く

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

スペシャルを避ける ユーザーが非常に具体的なことを要求するときは、注意してください。常に偏見に疑問を投げかけ、これが本当にあなたの製品をより良くするかどうかを確かめてください。

プロトタイプ ユーザーにあなたが持っているものを示すために起動するまで待たないでください。頻繁にプロトタイプを作成し（ベータ版と呼ぶこともできます）、開発プロセス全体を通じて常にフィードバックを得ることができます。これを行うと、おそらくより多くの要件が見つかります。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

私たちが行うことのいくつか：

紙の上、フォトショップ、時には実際の実装の両方でさまざまな概念を探る、たくさんのプロトタイプ
物事を元に戻し、繰り返します。アプリ全体を完成させようとせず、最初から完璧にしようとしないでください (これが起こらないことを心の中で知っているからです)。
賢さよりも明快さ。これは、ユーザーエクスペリエンスの仕事をしているときに自分自身に尋ねる最近のことの 1 つです。確かにアイコンやとげのあるものは見栄えがするかもしれませんが、それらは明快で簡潔ですか?
ユーザーの目標に焦点を当てます。開発者が一度に 1 つの画面、一度に 1 つのタスクに集中するのはかなり一般的な傾向です。それはあなたのアプリケーションを使用する人の考え方ではないことを忘れないでください。
作成中のソフトウェアを可能な限り使用してください。ソフトウェアの欠点、欠点、問題を確認してから、それらを自分で体験するより良い方法はありません。

score 0 · Accepted Answer

@Brian Warshaw - aza raskin が行ったトークからだと思います。このビデオだと思います

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

9 に答える 9

Related

Reference