web-dev-qa-db-ja.com

シティスイッチャーのUIを改善するにはどうすればよいですか?

複数の都市でサービスを提供するインターネットサービスプロバイダーのウェブサイトを作成しています。

都市選択機能にこだわっています。

私はコンセプトを作りましたが、これがうまくいくかどうかはわかりません。これはページのヘッダーです: enter image description here

このスイッチはユーザーの注意を引くはずですが、自分がやったことをどのように改善できるかについてはまったくわかりません。

ありがとう!

3
Hola

正確な問題が何であるかをあなたが質問にどのように言ったかからすぐには明らかではありませんが、私は「セグメント化された制御」があなたが探しているものかもしれないと思います:

enter image description here

あるいは、バウンディングボックスを備えたタブ付きインターフェースを検討することもできます(先に述べたように、何を達成しようとしているのかすぐにはわかりません)。

enter image description here

1
cleverbit

いくつかの都市だけでは、チェックボックス(複数のオプションを選択できる場合)またはラジオを使用し、都市が事前定義されている場合は、クラシックリストスタイルに固執します。このようなもの:

enter image description here

クリック(タッチ)は、都市名を入力したり、ドロップダウンを開いたりして、リストから「ブラウズ」するよりも高速です。つまり、都市が事前定義されている場合です。それ以外の場合、オプションは、提案されている多くのようにドロップダウンを使用することです。

1
Takebo

この注目を集めたい場合は、インタラクティブマップを使用して都市を選択できます。

このようなもの
https://www.amcharts.com/visited_countries/

ただし、これにはかなりのスペースが必要になることに注意してください

1
Ameen Akbar

それはすべて、ユーザーがアプリケーションをどのように使用しているかによって異なります。

ユーザーが自分のアカウントに保持できる都市の最大数はいくつですか?あなたの最大は、プロバイダーがサービスを提供している都市であるかもしれません。

そしてこの場合、彼らは都市を選択して、それに合わせて何かをカスタマイズしていますか?

いくつかのアプローチは次のとおりです。1〜5つの都市の場合は、ピルアプローチを使用します。またはラジアル。

それ以上の場合は、ドロップダウンを使用します。

数が多すぎる場合は、予測検索でドロップダウンを使用します。

0
Nicolas Hung

これは良い方法かもしれません

画面1-ユーザーは入力でフィルタリングする場所を入力できます

enter image description here

そして、これは、ユーザーが都市名の最初の文字を入力するとどうなるかです。

画面2-ユーザーが入力フィールドに数文字を入力すると、選択できるオプションが表示されます

enter image description here

ユーザーが都市の名前を選択すると、ページはユーザーを既に選択された都市の内部ページにリダイレクトします。

このようにして、プロセスで混乱させる可能性のある追加情報を作成することなく、エンドユーザーに対して非常に直接的で明確な機能を作成できます。

-更新:

@Aprillionが示唆したように、画像を投稿に直接追加しました。

0
Elias Rodrigues

Citymapper は同様の課題を抱えています(ただし、現在は多くの都市に拡大しています)。

すべての都市を一覧表示し、ブランドを守ったまま、各選択肢に個性を注入する都市選択ページを確認してください。

基本的には都市のリストにすぎませんが、画像/名前をクリックすると都市に移動します。

https://citymapper.com/cities

enter image description here

0
Midas