このPOSデザインが時代遅れに見えるのはなぜですか？

私は、このPOS（Point-of-Sale）画面デザインが古くなっているように見える原因を理解しようとしています。

3Dボタン、色、レイアウト、フォントですか？そして、それを最新のものにするにはどうしますか？

設計の専門家ではないので、時代遅れであることがわかります。しかし、それを変更する理由と方法はわかりません。

他の答えは、デザインを改善する方法に焦点を当てていますが、デザインの日付が古いように見える理由を尋ねたため：

フォントが小さすぎます。一番左の部分は他の部分よりも日付が古いように見えますが、それはなぜですか？左側のフォントサイズはテキストで使用可能な垂直方向のスペースと一致しますが、他のすべてのボタンではフォントが小さすぎます。また、すべての大文字、Arial、および各ボタンに3つの固定テキスト行を挿入しましょう（Pay以外のボタンはすべて、垂直の上部、中央、下部にテキストを受け取るようにフォーマットされているようで、2行しかない場合は扱いにくいです）実際のテキストの）。

魅力のない色。画面は、ほぼランダムな9色を使用しているように見えますが、これらはすべて元の64 EGA色の一部です。最近の多くのGUIでは、ボタンに大きな違いがない限り、より微妙な色の違いが使用されます。一部の最新のGUIでは、ボタンに色のグラデーションも使用されます。

画像がありません。

2色の3D効果。左上が均一な白、右下が均一なグレーの2ピクセル幅の境界線に加えて、周囲のすべての黒の境界線が1ピクセルである3Dボタンは、実際には時代遅れです。

単純すぎます。ボタンのみを使用することで、現在食品セクションを見ていることを直感的に示す機会を逃します。現代のGuiは他の手がかりを使用して、マゼンタと黄色の部分が一緒に属していることを示します。たとえば、黄色のボタンの後ろにある塗りつぶされた長方形は、フードボタンの後ろの背景まで延びています。

最後に、POSシステムヘッダーは私を悩ませますが、それは単に悪い設計であり、日付が付けられていることとは関係がないと思います。

何かを変更する前に、現在のディスプレイ出力がEGA（64色テーブルから選択された16色パレット）以上をサポートしていることを確認してください。画像を使用する場合は、ディスプレイの解像度でユーザーが画像。現場で使用されるデバイスは、想像よりもかなり古い場合があります。また、色を変更するときは色覚異常を念頭に置いてください。

これがPOSシステムであることを考えると、機能はそこにあると思います。ボタンは大きく、比較的読みやすく、グループにまとめられているので、探しているものを見つけやすくなります。

そうは言っても、構造的な決定は適切に行われますが、設計上の決定はそれほど多くありません。これは私が検討するものです：

• フォント：アプリ内のすべてが大文字を使用していますが、すべての要素が同じではありません。階層があり、フォントスタイルまたはフォントファミリを使用してそれを表すことができます。たとえば、一番下の行は実際には主要なオプションの一部ではないため、大文字と小文字を混在させることができます。「Pay」を大きくすることを選択しましたが、これは素晴らしいことですが、フォントサイズが異なる唯一のボタンです。たとえば色ではなくフォントを変更するのはなぜですか？言うべきではありませんが、このように考えると、要素を分離する新しい方法を発見できるようになります。例：仕切りの使用を検討しましたか？

• 間隔：多くの要素に同じ間隔（マージン）を使用していません。グリッドシステムを調べてみてください。グリッドシステムを使用することで、大きな恩恵を受けるでしょう。バランスのとれたレイアウトにより、デザインはより整然と洗練された外観になります。また、ボタン内のテキストに奇妙な間隔の問題（IMO）があります。1行のボタンは中央に配置され、2行は行間に大きなスペースがあり、3行はどこにでも等しい間隔があるので問題ありません。テキストをできるだけ境界に近づけようとするのではなく、テキスト行の間に常に同じスペースを置く方が理にかなっていますか？

• 色：グループ化は、ボタンごとに異なる操作を行うことを明確にするために機能しますが、パレットの背後にある理由はわかりません。次の方向に考えてみてください：メッセージをさらにプッシュするために色を使用できますか？ボタンを見つけるタスクを容易にするために色を使用できますか？「送信」に別のトーンを与えることで、すでにそれを行っています。これは素晴らしい決断です。しかし、選択した色は、右側の列にあるか中央の列にあるかによって異なります。なぜ？。Thennは、他のどこで同様の方法で色を使用できると思いますか？見てみましょうGoogleの素材を、彼らはあなたが新しいコンボをしようとする鼓舞かもしれません。

• 影と効果：3D効果はこのコンテキストで非常に便利であり、さらにプッシュできると思います。ここだ3D POSの例 .Alsoが、あなたはアイコンを使用して検討していますか？彼らは素晴らしい視覚補助をすることができます。

このアプリは、ドロップシャドウのある色のブロックを除き、実際にはトレンドに従っていないため、時代遅れに見えると思います。これは、デザインソフトウェアとコーディング言語がその点で多くの創造性を許可していなかった標準でした。今、あなたはほとんど何でもすることができます。あなたのデザインは、過去数年で人気を博したデザインのトリックや選択肢を活用していないため、時代遅れに見えます。

他の同様のアプリを見て、それらが正しいか間違っているかを確認し、それらのアイデアのいくつかをどのように育てることができるかをお勧めします。すでに素晴らしいスケルトンがあります。肉が必要なだけです。グリッドと、おそらくいくつかの補色で遊ぶことは、アプリにとって素晴らしいことです。

一見、何が何なのかすぐにわかりません（レストランPOSシステムの経験もあります）。私にとって、UIの右側にある灰色の項目は、一緒に属しているようには見えません。画面中央の黄色いアイテムは実際には3つのセクションに見えますが、これは明確ではありませんか？

以下に示した例から（品質については何も言っていませんが、クイック検索からランダムに選択されています）、アイコン、画像、および色の大きなブロックの使用を確認できます。これらは、アクションを識別し、機能の別個の領域または情報の階層を区別するための便利なツールです。

より詳細な回答を得る時間はありませんが、私が言うことは、現在のUI（ユーザーインターフェイス）デザインの例を見てみることです。たとえば、「POS UI Design」をすばやく検索すると、次のような画像が表示されます。

デザインは別として、機能的であり、それを操作する人々はその使用方法を理解していますか？その場合、壊れていないものを修正しないという要素があります。

はい、それは時代遅れに見えますが、私が使用した多くのTillシステムは同じシンプルな外観の罪を犯しています。アクセシビリティを念頭に置いて選択された丸いボタンと色は見栄えを良くしますが、これは純粋に機能的なものであり、「ジャズアップ」を試みると従業員に混乱を招く可能性があると感じています。

この場合、3D効果は実際に役立ちます。これは、クリック可能なボタンであることをユーザーにすばやく知らせるためです。レストランのトレードタイムは非常に重要だと思います。

私もデザインの専門家ではありませんが、モバイルアプリを構築するときにはこの種のことを考慮する必要があります。

1. 古い学校のwin32 3d効果を捨てます。誰もがタッチスクリーンに優しいように見えることを誰もが期待している時代には、文字通り非接触です。使用するのは、各アクションエリア（ボタン）の大きなフラット領域で、関連するボタンのグループ間に間隔がないか、ボタンの下に影があります。Androidのマテリアルデザインを調べます。モバイル以外のアプリにも役立ちます。

2. 関連するアイテムの間にスペースがある場合は、ボーダー（色ではなく）を使用して関連アイテムをグループ化します。それらの間に間隔がない場合は、色を使用して、関連する領域全体が1つの単色の背景色を持つようにします。

3. 柔らかい色（パステルカラーなど）と無料の配色の一部を選択します。パレットに各色の明るいバージョンと暗いバージョンがあることを確認してください。古いCGA / VGA 16カラーパレットからしか表示できないシステムをまだ扱っていないことを願っています。

4. UI要素は、配色に従って一貫して色付けする必要があります。たとえば、UI入力を提供するボタンは、ページを変更したり、主要な機能をトリガーしたりするボタンとは異なると見なすことができますが、通常、特定の機能領域のすべてのボタンに1色ではなく、これらのタイプのボタンのそれぞれに1色を使用する必要があります。これにより、ユーザーは各UI要素が何をするのかをよりよく理解できます。

5. アクション領域とアクション項目間の平らで柔らかい境界線を分離するには、アクション領域間の間隔を使用することをお勧めします。エリア内のアクションアイテムは、通常のサイズである必要があります（各アクションアイテムがグリッド内の1つ以上の隣接セルであると想像してください）。

6. ウィンドウでタイトル領域を使用する場合：

   a。その領域のすべてのアクションアイテムは、タイトル領域に収まる必要があります。

   b。その領域内のすべてのアクション項目は、アプリケーションに対してグローバルである必要があります（つまり、ログイン、設定など）。

   c。タイトルは、ロゴ以外のものと重複させないでください。

これがお役に立てば幸いです。

ほとんどすべての要素はボタンのようです。しかし、ラベルを読むと、一部のボタンはアクションボタンで、他のボタンはナビゲーション用のようです。

最新のUIでは、2つを区別します。タブの列は、現在の場所と他の場所への行き方の両方を示すための効果的なナビゲーション支援として機能します。すべてのピザオプション用のタブピザと、すべてのパスタ用のタブパスタがあります。

おそらく、紫色のFOODボタンはすでにそのようなタブとして機能し、DRINKSは別のそのようなタブです。それらは間違いなく右側にあるべきではありません-英語は上から下、左から右に読まれ、あなたのワークフローはこれをコピーするべきです。

タブの行はかなりうまく機能しますが、ここでは階層が深い場合があります。その場合、現在のUIの状態をpath：として表示するのが賢明かもしれませんFood > Starters >。スターターページの上部に1行。「スターター」メニューの最初のエントリを「<Back to Food」ボタンにします。これにより、かなりの数のコントロールを非表示にできます。

まず、目的は何ですか？

オペレーターがキーをすばやく見つけて、誤入力なしで注文をより速くする必要がありますか？それとも、ユーザーを引き付けて、ユーザーがマシンのGUIを使用するように促す必要がありますか？

この場合、作品の目的は、それが効率的かつ高速なトランザクション入力のためであることを明確に示しています。したがって、デザインの傾向や空想よりも論理的な順序を決定するために、フォーム、色、および階層が必要となる、より単純でより組織化された方法に進むことができます。

現在のGUIの問題は次のとおりです。

色：色がきつすぎると、時間の経過とともにストレスが生じ、ユーザーの決定の有効性に影響します。白い背景と他の高コントラスト色は、間違いなく眼精疲労を引き起こし、ユーザーが収集する必要がある必要な情報をすばやく見つけるのは困難です。

フォント：決定を下し、判断するには小さすぎます。これは、テキスト間の粗い色とコントラストの影響も受けます。これは、ユーザーが初めてシステムに慣れるまでの時間に大きく影響し、より多くの誤入力を引き起こす可能性があります。

順序とグループ化：大きなフォントサイズで「POSシステム」という名前を付ける必要がありますか？有益ですか？いや！このシステムのユーザーと画面上の要素は、そのことを明確に伝えています。グループ化は理にかなっていますか？実際には、多くをグループ化できるため、ユーザーは論理的に見つけることができます。単語の選択の一部は意味をなしますか？いや！「送信」？何を送る？「セットメニュー」？毎日メニューを設定していますか？いや！前へ。階層と単語の選択は慎重に検討する必要があります。

機器自体の目的からすると、GUIは画像や派手なものとともにGUIで投稿されます。

モバイルデバイス、Android、またはWindows OS向けの「タイル」の設計方法とはまったく異なるように見えるため、まったく似ていないようにも見えます。それに関するほとんどすべてが「間違っている」ので、詳細は省略します。

これらはすべて素晴らしい答えですが、参考資料が必要な場合は、iPadのSquareアプリをチェックしてください。

https://itunes.apple.com/us/app/square-register-point-sale/id335393788?mt=8

既存のものを改善するためにあなたができると思う最大のこと（そしてなぜそれがそんなに時代遅れに見えるのか）は、現代のUIは多くの空白を好む傾向があり、空白も白にすることです。最近の多くのデザインでは、リバースタイプ（黒の背景に白いテキストまたは暗い色の白いテキスト）を非常に控えめに使用しています。このサイトのように：https : //developer.wordpress.com/calypso/

ボタンは機能ごとに整理し、階層化し、ボタンはレイアウトの方法論と一致させる必要があります。

素人の言葉で：

1）最も使用頻度の高いボタンは、誰でも簡単に見つけられる場所に配置します。

2）内部ボタンは、外部シェル（ウィンドウ内、ウィンドウ内）によって「制御」される必要があります。

3）Enterボタン（またはその他のボタン）がある場合は、画面が変わっても同じ場所に置いてください。

多くのPOSシステムは機能設計を最適化しようとしましたが、ゲームの少し先にあると思うPOSの1つはRezku POSです。