WEB Olivier：開発者の危険とミスの小さな組み合わせ

2015年は、まだ非常に若いプロジェクトBondjoynの商業生活の最初の年でした。 ほとんどの注文を完了した約85,000,000のパートナーを募集したにもかかわらず、成長して成長する必要があることは明らかです。 私たちはすでに開発の苦労について話しましたが、今日、新年のテーブルのオリビエと同じくらい人気があり、避けられないウェブ開発者のバンプについて、旧年の投稿をすることにしました。 私たちはそれらのいくつかを自分で詰め、一部は馴染みのある、あまり馴染みのない開発者から注意深く集めました。 料理の最高の伝統では、新年の気分の気分はまだ終わっていません。私たちはこの機会のために特別に翻訳した漫画で風味付けされたすべてのことについて話します。 一般的に、あなた自身を助けてください！

ユーザーのリスク

ユーザーがサイトに入力したデータの検証の欠如。 原則として、フレームワークは最初にそのようなチェックを提供しますが、ここに危険があります-開発者のアプローチは形式的です。 さらに、フレームワーク検証アルゴリズムは攻撃者によく知られている可能性があります。 サイト（ポータル）をトラブルから保護するために余分なコードを書くのが面倒ではありません。トラブルの中でも、定期的なSQLインジェクションが強力なリーダーシップを発揮します。



単音節の承認。 認証と承認の違いは何ですか？ 認証は、サイトにアクセスしたユーザーとデータ（ユーザーを認識する）を使用してユーザーに通知し、承認はユーザーにサイトで何らかのアクションを実行する権利を与えます。 開発者が予備認証なしで承認のみを提供することがあります。これは、盗まれたユーザー名とパスワードの下でユーザーがまったく隠れていないという事実に満ちています。 サイトで認証と承認を組み合わせるメカニズムを検討します。Webサービスにユーザーデータの重大な作業が含まれる場合は、追加のユーザー認証（たとえば、電子メールの定期的な確認）を実装します。



詐欺師の話をすると、もう1つの間違いは、 支払いがサイトを通じて提供される場合のセキュリティへの注意の欠如です 。 信頼できる支払いゲートウェイ（支払いシステムまたは銀行）を使用し、領収書または個人の財布の口座への支払いを避けます。 第一に、信頼性の低い支払いシステムがフィッシングされる可能性があり、第二に、ユーザーが高度になり、「支払い用のウォレット番号」の原則による支払いの使用により、サイトの信頼レベルが劇的に低下します。



予測が不十分なサイトの負荷と将来のプロジェクト開発計画。 これは実質的に楽観的なテストです。開発者はプロジェクトを信じるか、成長限度を事前に決めています。 しかし、真剣に、開発段階では、多くの企業が将来の成長について考えていない（多くの場合、一般公開前のラッシュのため）ため、サイトは平均的な負荷にも耐えられません。 スケーラビリティのある同じ話-最初は文盲のデザインのWebサービスとデータベースがサイトの狭いフレームワークを作成し、拡張の場合はすべてをゼロから書き直す必要があります。 一方、市場は待っていません。 私を信じて、あなたは最小限の機能セットで市場に参入することができますが、同時に強力な基盤を持ち、それを開発します。 Bondjoynでもまったく同じ結果が得られました ：私たちは小さなセクションと機能のセットから始めましたが、適切に設計されたバックエンドは優れた柔軟性、リリースを迅速にリリースする機能を提供し、将来的には機能コンテンツと設計変更の両方に手を縛ります。









奇妙なことに、多くの人が開発の初期段階でSEOについて考えていません。 たぶん、購入済みリンクを宣伝するとき、この時間の節約は正当化されたかもしれませんが、今日、行動要因の重みとコンテンツの品質と組織の役割の増加に伴い、検索の宣伝をすぐに考える方が良いでしょう。 次に、サイトまたはポータルを作成する段階でも、コンテンツの複製を追跡し、正しいサイトアーキテクチャを構築し（ロボットではなくユーザーに最大限のナビゲーションを提供します）、読み込み時間を操作します（これは重要です！）、前のページに戻るメカニズムを見つけて、検索しますサイトで、最初にリンクの問題を解決します。









重いコンテンツは、特に将来のサイトの規模をすでに逃している場合は特に、開発者の重大な間違いです。 巨大な写真、ビデオ、重い背景画像は確かに美しいですが、ユーザーはゆっくりとロードしているサイトを離れることでそれらを見ることができません。 原則として、サイトはローカルネットワークでテストされ、大量のコンテンツをロードしても問題はありません。 ただし、多くのユーザーにとって、2016年の第2週にもかかわらず、接続速度は非常に緩やかなままです。 モバイルとタブレットでこれに3Gを追加します-これで、すでにセグメントを失いました。 だから、添えものを作るときは、ユーザーについて覚えておいてください。 同時に、コンテンツが配置される場所と、たとえば、多数のユーザーギャラリーにとって自分のサーバーの能力で十分かどうかを検討します。



3Gといえば。 これまで、 多くの開発者はサイトのモバイル版に目をつぶっており、応答性を完全に無視しています。 サイトをモバイルデバイスに適合させる必要性を疑う場合は、ガジェットストアに移動して、さまざまな画面サイズを確認してください。これらのデバイスはすべて、将来の顧客の手元にあります。 Webサービスの応答性には多くのモデルがあり、適切なWebアプリケーションを作成するためのプラクティスがあり、一般的なモデルとプラットフォーム固有のモデルがあります。 人気のあるシンプルなものの中で、すべてのプラットフォームで動作するオープンソースのHTML、CSS、JavaScriptフレームワークであるTwitter Bootstrapは、おそらく注目に値するでしょう。 これにより、不必要なオーバーヘッドなしに適切に調整されたWebサイトを取得できます。



ただし、 画面のサイズだけでなく、ブラウザの動物園にも適応する必要があります。 多くの場合、開発者はブラウザ間の互換性を無視するか、古いバージョンのサポートを拒否します。 個人的にGoogle Chromeで90％の時間を費やしても、残りが同じことを意味するわけではありません。この仮説を立ち上げた後、Yandex.MetricaとGoogle Analyticsを使用して簡単に検証できます。 実際、単一のブラウザー用に開発する必要があるもの、または最も人気のあるブラウザー用に開発する必要があるものについて多くの意見がありますが、これは完全に真実ではありません。 プロジェクトを開始する前に、ブラウザー間の互換性をテストし、状況に応じて続行する必要があります。個々のブラウザーの動作ルールを規定するか、サポートされていない機能を除外します。 主なことは、ユーザーに悪影響を与えることではありません。

事業リスク

サイトは、ビジネス向けアプリケーション（たとえば、建築資材の販売者向けのカタログとオンライン価格）、ビジネスの一部（CRMベンダーのWebサイトを介した技術サポートと販売）、またはビジネス自体（メディア、サービス、同じBonjoyne） ） そして、最初のオプションでサイトとの質の悪い仕事が販売チャネルの1つを弱めることにつながる場合、他の2つではビジネスを麻痺させる可能性が非常に高いです。 したがって、多くの人々が忘れているビジネスとしてのプロジェクトを考慮する必要があります。



不正なプロジェクトコスト。 多くの場合、サイトを注文したり、従業員と連携したい場合、企業はドメイン内でページを取得することが道の始まりであることを忘れます。 デザイナーの仕事、写真やフォントの購入、メディアコンテンツのホスティングの支払い、SEOの最適化、コンテキスト広告など、思いがけない非常に普通の費用が最初からあなたに期待できます。 言うまでもなく、プロジェクトのコストは要件の変更により変化する可能性があります。









要件も見過ごされがちです。 そして、それらはビジネスがリソースに提示するものとユーザーから来るものに分けられます。 後者は6か月に1回ほぼ変更される可能性があるため、潜在的な変更のコストをプロジェクトに組み込む必要があります。 慣性は、インターネットまたは電子商取引に関連するビジネスにとっては貧弱な同盟国です。 そのため、製品開発のあらゆる段階で製品開発に投資する準備をしてください。 そうしないと、市場を失う可能性があります。

設計リスク

最後に、リスクの最大のブロックは、ユーザビリティとWebサイトの設計に関連するリスクです。 それらの数は無限にあり、不正確または過剰に設計されたデザインに関連したストーリーなしでは、ほとんどのサイトはできません。 最も一般的なケースを検討します。



このサイトはデザイナーに好かれており 、彼の才能のすべての尺度を反映しています。 このサイトはユーザーにアピールし、問題を解決する必要があります。 実用性と使いやすさ、そしてデザイナーの発見を優先する必要があります。 インターフェイスは訪問者のニーズを満たし、必要な情報への最短経路を見つけるのに役立ちますが、過度に創造的なデザインはユーザーを混乱させ、適切なコンテンツを見つけるのに時間がかかる可能性があります。









複雑な登録フォーム。 数十の必須フィールドを使用してサイトにフォームを実装する前に、または何が良いか、またアンケートを使用して、どの情報があなたにとって本当に価値があるかを考えてください。 通常、考えた後、名前、電話、電子メールを見逃し始めます。 サイトからの購入が提供されている場合、残りのデータはサービスに登録するか、注文プロセス中に取得できます。 フィールドが必要な場合は、通常のアスタリスクでフィールドを指定します。フォーム全体に記入し、息をのむようなキャプチャを入力した後も、驚くことはありません（また、一緒にいる必要があります！）。









サイトでの検索はありません。 サイトに多くのコンテンツがある場合は、サイト検索が必要です。 この問題を解決するには、Yandex APIまたはGoogleカスタム検索を使用できます。フォームは数行のコードに追加され、古いタグクラウドからスペースを解放するなど、多くの問題を解決します。



サイトは読めません。 ウェブで取得したテキストを整理するのに十分なインスピレーションがない場合は、テキストの最も人気のある居住地である本を参照してください。 段落や章の内訳、レイアウト、頭文字、カーニングなどに注意してください。 したがって、サイトでは、さまざまな種類のフォントの混合、派手な文字、サイズのあるゲームの使用を避ける必要があります。 カラースキームを忘れないでください。 いくつかの実証済みのヒント：Adobe Kulerを使用して配色をテストし、サンセリフフォントを選択します。









コンテンツは非論理的に編成され、隠されたブロックがあります。 見出し、小見出し、および段落（必要な場合）を避けないでください。古いコンテンツはすぐに削除してください。 提供された全額をテキストとメディアに入力する努力をする必要はありません。サイトに「紙」を保存することは常にむかつくように見えます。









貧弱なナビゲーションは 、ユーザーにとっての不便さだけでなく、SEOの行動要因に関する問題にも悩まされます。 ユーザーが3回のクリックで情報を見つけられないと、サイトを離れる可能性が高いと考えられています。 リンクと遷移は明白で論理的でなければなりません。読み間違いの不溶性の問題がある場合は、メニュー項目またはリンクにヒント付きのツールチップを追加することをお勧めします。









水平スクロールは、Web上で決して見つけられない設計ソリューションです。 これは明らかに非標準的なユーザーの行動を指し、経験豊富な訪問者にとっても混乱を招く可能性があります。 レシピは簡単です。アンカー、スクロール、その他の効果を備えた水平方向のソリューションを使用します。

通常の塩、コショウ

Webプロジェクトを開始する際に覚えておくべき小さいが重要なこと。

• 写真、カルーセル、アニメーション、Flashを不必要に使用しないでください。
  
  
  
  
• これが直接必要でない場合、サイトで効果音を使用しないでください-これはユーザーを悩ますことができます。
  
  
  
  
• 広告ユニットとバナーをシームレスに埋め込みます-スパムの混雑が原因でサイトにアクセスしなければ、収益は得られません。
  
  
  
  
• ビデオとオーディオを再生する手段を提供します。ユーザーにサードパーティのサイトにアクセスする機会を与えないでください。
  
  
  
  
• リンクまたはメニュー項目をクリックする領域を広くします。指やカーソルを見逃しやすいです。
  
  
  
  
• 連絡先、フィードバックフォームを残し、フィードバックに応答します。
  
  
  
  
• ページのロゴまたは会社名をクリックして、サイトのメインページに移動することを忘れないでください。
  
  
  
  
• ダウンロード速度に注意してください。
  
  
  
  
• 特に使用されている技術に関して、サイトの統計を追跡します。

かなり明白なことが述べられているようです。 しかし、それらはうらやましい頻度でさまざまなサイトで繰り返されます。 このチェックリストが、開発者が次のWebプロジェクトを開始するのに役立つことを願っています。 過去1年はBondjoyneチームにとって波乱に満ちたものであり、その完成から数日後に私たちの経験を喜んで共有します。 成功するプロジェクト、ユーザーフレンドリーなインターフェース、スマートで美しいソリューション、適切なスクロール、そして成長のための準備をお願いします！ 私たちと一緒にいて、scり、鼓舞し、変えてくれてありがとう。 新年あけましておめでとうございます、Habr！



PS：漫画本はデザイナーのジェリー・キングの作品に基づいています。 英語のユーモアに感謝し、ウェブデザインが好きな人は、他の漫画をwww.webdesignerdepot.comで見ることができます。 まあ、一般的に、多くの有用な資料があります-新しい作業年の始まりにちょうど間に合います。