画面上の16進キーボードのレイアウト

Question

タッチインターフェイス用のWebベースのスクリーンキーボードを設計します。ユーザーは、0〜9と文字A〜Fのみを入力する必要があります。これに加えて、バックスペースと、おそらく「クリア」ボタンが必要です。それで、私はVasiliによって this keyboard を変更して、いじり始めました。

私の最初の提案はこれでした：

不要なダッシュとスペースバーがあり、伝統と一貫性のために他に何もありません。だから私はそれで十分ではないと判断しました。ダッシュとスペースバーを削除すると、16個のボタンとバックスペースが残ります。さて、16は注文にかなり便利ですが、17はそうではありません。そこで、「クリア」ボタンを追加する際に、16進文字を4x4パターンで配置し、その下に「削除」ボタンを大きくすることを考えました。

しかし、これはまだ正しくありません！特に、文字と数字を混在させると混乱するようです。それで、私は考えました：5の2行に数字を配置し、3つの1文字の行に削除ボタンを追加するとどうなるでしょうか。そして、これはおそらく私が最も満足しているものです：

しかし、おそらく順序を逆にする必要がありますよね？最初の行は1、2などで始まり、3番目の行はA、Bなどで始まります。

他の誰かがより良いアイデアを持っていますか？

Answer 1

不足している文字を追加して、標準の数字キーボードを単純に改善しないのはなぜですか？

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 2

あなたはキーボードが16進数入力用であると言います。それが、2回目の試行が正しくないと感じる理由です。 @steveverrillもコメントで気づいたように、番号順ABCDEF1234567890 間違っている。したがって、4x4レイアウトを使用する場合は、次のいずれかを選択する必要があります。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 3

そのため、他の回答についてかなり長いコメントをいくつか書いていると、回答としても提示したいと思いました。以下は、これらの考慮事項を実装する他の主要な設計およびモックアップでは行われていないいくつかの考慮事項です。

モバイル仮想キーボードの形状

下に描かれたモックアップで、キーボードがモバイルデバイスに表示される形状に注目してください。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

どのデザインも仮想キーボードの制限で機能する必要があります。この特定のケースでは、上部の空白は少し小さいかもしれませんが、それでも基本的な制限が適用されるため、たとえば非常に背の高いデザインは除外されます。

回転ロック

2つ目のポイントとして、モバイルwebアプリは向きを制限できません。おそらく、次のことを実行できます（ローテーションに基づいて異なるコンテンツを表示するのは簡単です）

^{bmmlソースをダウンロード}

しかし、ここにいる誰もが適切なUXデザインを検討しているとは思えません。言い換えると、実際には2つのキーボードレイアウトが必要です。縦向きと横向きです。

一般ユーザーvsプログラマー/数学者

したがって、programmersは16進コードが何であるかを認識し、通常のユーザーはを認識しません。これは、A〜Fの「数字」を数字ではなく文字として扱う必要があることを意味するため、絶対に重要です。そして、文字は伝統的にアルファベット順に並べられます。 A-Fを9以降の継続として扱う設計は、それが数学的な意味を知っている人の目にのみよく見えます。この質問のユーザーは、たまたま16進数のコードを入力している通常のユーザーであることを質問から理解しています。

肖像モックアップ

したがって、これらのアイデアを実装すると、次のように何かが得られます（注意してください、これは単なる可能な実装であり、他の実装の一部も同様に有効です。この投稿の主なポイントは理論です）。

^{bmmlソースをダウンロード}

文字と[ok]ボタンを左または右に置く間に引き裂かれたときに、2つのデザインを作成しました。電話は主に右手で握られるため、数字を片手で入力することは[ok]ボタンよりも頻繁に使用されますbut[submit]および[enter]のようなボタンは、デスクトップシステムでは右側にある傾向があります。今、私はこれをモバイルで破ることは理にかなっていると信じていますが、それがもう一度見直す価値があるかどうかはわかりません。

風景モックアップ

上記のデザインと同様に、バックスペースとOKボタンを反対側にミラーリングすることもできますが、少なくとも概念は次のとおりです。

^{bmmlソースをダウンロード}

さらに、ゼロで開始するか終了するかの間で引き裂かれました。もう一度、従来のキーボードでは、モックアップと同様にゼロが最後に来ます。butキーボードの残りの部分なしで提示されると、強力な引数が0から9まで数えます。

Answer 4

標準のテンキーを拡張するというRenaudのアイデアに基づいていますが、縦長ではなく横長です。また、キーのグループ間にスペースを残しても問題ないことを示しています。

+--------------------------------------------------+
|                                                  |
+--------------------------------------------------+

+-------+-------+-------+  +-------+-------+-------+
|   7   |   8   |   9   |  |   A   |   B   |   C   |
+-------+-------+-------+  +-------+-------+-------+
|   4   |   5   |   6   |  |   D   |   E   |   F   |
+-------+-------+-------+  +-------+-------+-------+
|   1   |   2   |   3   |                        
+-------+-------+-------+  +-------+-------+-------+
        |       0       |  | DEL.  | CLEAR | ENTER |
        +-------+-------+  +-------+-------+-------+

Answer 5

個人的には、Windows Calculatorの動作が気に入っています。

これには必要のない追加のキーがあることを理解していますが、キーの左側にアルファベット順に文字を配置するのが好きです。これは、キーパッドの予想される動作も変更しません。

Answer 6

私は実際に、最後の2つのデザインの数字がどこにあるかを検索しなければならないことに気づきました。

私は間違いなく数字が順序付けられ、文字が混ざっていないデザインを選択します。

これが私の試みです：

これは、デフォルトのWindows計算機に触発された別のものです。

+-----------------------------------------------+
|                                               |
+-------+-------+-------+-------+-------+-------+
|   A   |   D   |   6   |   7   |   8   |   9   |
+-------+-------+-------+-------+-------+-------+
|   B   |   E   |   2   |   3   |   4   |   5   |
+-------+-------+-------+-------+-------+-------+
|   C   |   F   |   0   |   1   | DEL.  | CLEAR |
+-------+-------+-------+-------+-------+-------+

Windowsのように、このデザイン（背景やフォントの色が異なる）では、文字と数字を視覚的に区別することをお勧めします。しかし、それでも、最初のものはもっと読みやすいと思います。

編集：balsamiqが@Renaudファイルを再利用して作成した画像を追加しました

Answer 7

インターフェイスはどのような画面ですか？あなたはタッチと言いますが、それは多くのことを意味します。たとえば、スマートフォンでは四角いキーボードを使用できますが、タブレットでは高さよりもキーボードの幅を広くしたいとします。

ワイドキーボードの場合、私はsteveverrillのアイデアが好きです（賛成するにはポイントが足りません...）が、次のように少し調整します。

+-------+-------+-------+  +-------+-------+
|   7   |   8   |   9   |  |   A   |   B   |
+-------+-------+-------+  +-------+-------+
|   4   |   5   |   6   |  |   C   |   D   |
+-------+-------+-------+  +-------+-------+
|   1   |   2   |   3   |  |   E   |   F   |                      
+-------+-------+-------+  +-------+-------+
| DEL.  |   0   |CLEAR  |  | Possibly Enter|
+-------+-------+-------+  +-------+-------+

Answer 8

_{警告：根拠のない非専門家の意見が先にあります。}

あなたの質問では16進キーボードと言いますが、ユーザーは実際にこれらの数値で計算を行っていないか、 all：予約参照であり、単に英数字コードです。それらはたまたま、アルファベットの最初の6文字だけを使用する英数字コードです。

数値キーパッドを拡張して、16進数を含める Renaudの推奨 のようなアイデアは、実際に16進数の計算を扱う人々にとってはおそらくすばらしいでしょうが、単に文字と数字を入力するだけの人々にとっては、私は続けます。文字と数字は区別されます。ワイドレイアウト stevereverrillが推奨 は、ユースケースに最適と思われます。数字は、誰もが知っているテンキーの標準レイアウトにあり、文字は分離していて、簡単に見つけることができます（結局、そのうちの6つだけです）。

背の高いものが必要な場合は、おそらくルノーのようなレイアウトで数字の上に文字を入れますが、2つをギャップで区切って、おそらく色を変えます。

Answer 9

私はあなたのレイアウトについて注意すべき2つのポイントがあります：

I。人々は既存の数字の10進テンキーレイアウトに慣れており、これに慣れ親しんでいる満足感をユーザーに与える機会を逃しません：

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

II。余分な文字を強制的に挿入しようとすることは、必ずしも最良の解決策ではありません。自分ですぐに使えるようにグループ化しようと思います。

テンキーの「標準」を維持するために、3行のうち2行を選択するのは明らかなようです。また、なんらかの理由で、テンキーの右側に配置したいのですが、おなじみのテンキーを少し優先して同等の重要性を与えるようにします。

結果は次のとおりです。

^{bmmlソースをダウンロード}

Answer 10

設計に影響を与えるいくつかの制約が発生します。

• 数字キーは、慣れ親しんでいるのと同じ順序にする必要があります。
• キーは、キーパッドを使用するときに指が最も短い距離を移動するように、可能な限り互いに近くに配置する必要があります。
• 「クリア」キーと「バックスペース」キーは、ユーザーが特定の機能にアクセスするために別の定性的な方向に移動できるように、互いに離れて配置する必要があります。
• 「クリア」キーと「バックスペース」キーは、誤って押すのを最小限に抑えるために、最も外側のポイント（コーナー）に配置する必要があります。

これらの制約により、私はあなたのニーズを満たすはずの設計コンポーネントをモックアップしました。

また、有効なデザインは「Clear」ボタンを左上に移動して、上の行に「Clear、A、B、C」と表示されていると考えられます。どちらが好きかによります。

Answer 11

キーをこのようにすることは可能でしょうか... 1、2、3、4、5、6、7、8、9、A/10、B/11、C/12、D/13、E/14、F/15、0/16私は16進数のダイスを使用していますが、これは私のアプリで役に立ちます。