モスクワの自転車

同僚のEvgeny Malikov( all43 )は、モスクワの自転車レンタルのインターフェースの問題を調査し、可能な解決策を見つけることを提案しました。 スポーツの関心のために、このプロジェクトのすべての作業を1日に制限することにしました。



モスクワの自転車レンタルとは何ですか?


2013年、モスクワは最初の公共自転車レンタルネットワークを作成しました。 自転車を保管および発行する駐車システム、登録、無料の自転車または駐車場の検索、請求システム、そして実際には自転車を検索できるWebサイトで構成されています。


会員



Anton Utkin( aienn )とDmitry Kirillov( dmitrek )は、Thalientフロントエンド企業の同僚です。 一緒に、彼らはインターフェースを作り、スタートアップを助け、講義をし、他の興味深いことをします。



Evgeny Malikov( all43 )-ここで私たちを助け、MobiMoneyでプロジェクトマネージャーとして働き、支払いシステムを理解しています。 ところで、今彼は仕事を探しています。



プロジェクト



ストーリーの便宜上、プロジェクトをいくつかの部分に順番に分割することにしました。 自転車レンタルを使用するには、ウェブサイトvelobike.msk.ruで登録する必要があります。 同じサイトが、システム全体の動作を説明する責任を負っています。



また、このサイトには、登録ユーザーが利用できる請求の詳細、アカウントの補充、およびその他の機能を備えた内部パーツがあります。次の記事で説明します。



次に、自転車の保管および配送システムのインターフェースを見てから、システム全体の一般的なボトルネックを調べます。



サイト



だから、サイトの公開部分。 ここで、 スクリーンショットを見ることができます。実験では、デザインに気を取られないように、サイトの図面をすぐに使用します。







ご覧のとおり、このサイトは10ページ以上で構成されています。 メインページには、駐輪場の地図と占有率の表示、および地図の情報を複製した表が表示されます。



駐車場のサイズ(8か16か所)を示すために、地図上で2つの円を使用します。その内側の赤い部分は利用可能な自転車を示し、白は無料の駐車スペースを示します。



サイトの一部の場所には、システム料金とレンタル契約があります。 また、サイトの上部にあるロゴのセットは関連組織へのリンクであることに注意する必要があります。つまり、メインメニューの上にあるモスクワ銀行のロゴは、既に理解しているように、プロジェクトのメインページではなく、モスクワ銀行のWebサイトにつながります。



プロセス



サイトを簡素化するために、すべての重要な要素をまとめて、ユーザーが不要な部分に気を取られないようにすることにしました。 さらに、私たちはすぐに、そのサイトが別のモバイルバージョンなしでモバイルデバイスで動作することを決定しました。 まず、メインメニューを再設計しました。



現在のサイトのメニュー



メニュー内のアイテムの数が多すぎるため、ユーザーにとっての各アイテムの重要性を調査し、それらを少し再配置しました。 その結果、 登録と登録 (登録とマイアカウントがここに取得されました)、 駐車場スキーム (オンラインマップ)、 料金とルールがまだあります 。 ニュースはソーシャルネットワークに送られ、プロジェクトに関する情報(これは自転車のレンタルであり、核物理学ではありません)を完全に削除し、連絡先とフィードバックをサイトの地下に送信し、サイトに1つのバージョンがあることを決定する段階で既にモバイルバージョンを削除しました。



この時点で、すでに1ページのプロモーションサイトの画像が頭の中にあり、1ページ内ですべての重要なアクションを実行できます。



メインページの変更された図面は次のとおりです。





ご覧のとおり、このサイトにはいくつかの焦点があります。

  • これがモスクワ銀行ではなく、Velobikeのサイトであることは明らかです。 明確にするために、「モスクワの市営自転車レンタル」という小さな署名を付けることにしました。 もう一度「プロジェクトについて」セクションが必要な場合は、この署名をリンクにします。
  • 右側に残った参加者、主催者、スポンサーのロゴ
  • メインメニューセクションは1ページにあります
  • 地下には、ソーシャルネットワーク、連絡先情報、フィードバックへのリンクがあります




次に、各メインセクションの構成を想像する必要があります。



登録とログイン



古いユーザーと新しいユーザーを混同しないように、これら2つのアクションを結合する必要があることは明らかでした。 タブを開くとき、ログインオプション(ユーザー名/パスワード、ユーザー名とパスワードを覚えていない人のソーシャルネットワーク、新しいユーザーの登録)を表示する必要があります。





駐車スキーム



駐車場のスキームとその状態は、ユーザーにとって最も必要な情報です。 近くに無料の自転車がある場所を理解する必要があり(数分後には終了しません)、他の人は既にレンタルした自転車を駐車する場所を見つける必要があります。 無料のセクションがない場合は、別の駐車場に行き、より多くの時間とお金を費やす必要があります。



元のスキームでは、著者は駐車場のサイズ、空きスポットの数、利用可能な自転車の数を示すために円グラフを使用しました。 戦略ゲームのすべての人に馴染みのあるデザインに専念することにしました。2列に配置された8つの正方形を、占有/空き場所の色分けで配置しました。 このビューは、使用するスペースがはるかに少なく、マップ上で読みやすくなります。





関税と規則



レンタルシステムがどのように機能し、運賃がいくらになるかについての説明は、インタラクティブユニットの形で作成することにしました。 このブロックには、リースの永続的な時間ベースの部分のコストが表示されます。 このため、固定部分の可能な関税を選択しました(1日、1週間、1か月、10月31日まで)。可変部分のコストの計算は、付随する説明とともにスライダーで表示されました。 説明は、最初の30分間は無料で提供されることを示すために重要であり、また、家賃の時間ベースの部分の費用が1,500ルーブルである場合、家賃の6時間後に目に見えない脅威を示すためにも重要です。



特に登​​録時にこれらの規則を採用する必要があるため、「自転車の使用に関する料金と条件の完全な説明」リンクの背後にあるすべての規則と法的説明を削除することにしました。





結果



すべての重要な部分を収集したので、プロジェクトの設計の大まかなスケッチを作成しました。さらに、完成のためにデザイナーに提供するか、「そのまま」使用して、後で改善することができます。






All Articles