【読みがなを同時入力】

例えば名前の入力部ではデフォルトで IMEが有効にできます。手動での切替えは不要です。
また漢字名を入力すると読みがなも一緒に入力されます。

【３桁区切りのコンマを追加】

金額など数値の入力部ではIMEはオフにします。 また数字以外のキー入力を無視したり 自動で３桁区切りのコンマを追加できます。

その他入力文字数やパターンの指定も可能です。

入力ミスに対するエラーメッセージの表示は 打鍵直後、決定ボタンが押された直後、サーバ通信後など 任意の時点で行えます。

【エラーメッセージをふき出し表示】

メッセージは画面内の上部エリアなど特定箇所に表示することも可能です。

他方、右の例のようにエラーがあった場所をハイライトし エラー理由を直接ふき出しで示すことが出来ます。

画面内のどの入力部がエラーで どうすれば回避できるか直感的に把握できます。

またエラーが沢山ある場合でも表示位置を分散できるので エラーメッセージが指定領域内に収まらない... 云々の問題が起きません。

【グラフ１：棒グラフと折線グラフ】

一般にWebシステム上のグラフは サーバ側でGIF画像として作成されるケースが多いです。
しかし、この方法はサーバに負荷が集中する、 回線速度が遅いと表示まで待たされるなどの問題があります。

そこでサーバでは表示に必要な基礎データのみ作成し送信します。

【グラフ２：円グラフとレーダーチャート】

そしてグラフ描画はブラウザ側で行います。 するとサーバや回線の負担が軽くなるためスグに結果が表示されます。

また右上図「グラフ１」のようにグラフ中にふき出しや リンクを置く事もでき多彩な表現が可能です。

【スプレッドシートの例：項目の直接選択が可能】

またスプレッドシートもブラウザ側で作成できます。 サーバからのデータに従い動的に内容の変更を行えます。

各アイテムの選択(フォーカス)はマウスや「矢印キー」に加え 「数字キー」等によりダイレクトに選択することも可能です。 その結果、打鍵一発で選択操作を行えます。

一般のWeb 本システム サーバ 表示用データ(HTML等)も作成 データのみ作成→速い 通信回線 データ量が多い データ量が少ない→速い ブラウザ 画面全体を更新 必要な部分のみ更新→速い 画面がチラつく。フォーカス、スクロール位置が変わる。 普通のソフトに近いレスポンス

一般的なWebシステムでは ロジックと表示用データ(HTML等)が混合しデータが大きくなっています。 その結果システム全体(サーバ、回線、ブラウザ) に余計な負荷がかかっています。

B1. グラフ描画機能 (このページ内) [Shift-R]で見たように基礎データのみやりとりし 表示はブラウザ側で行うことにより応答速度が飛躍的に向上されます。

【グラフも拡大可能に】

「拡大」機能により画面全体(或いは指定部)を拡大できます。 Webブラウザでの「表示→文字サイズ→最大」では 画像やフォーム要素が拡大されませんが それらも拡大できます。 グラフやスプレッドシートも含め画面全体を見やすいサイズに調整できます。

【黒い縦線が点滅するのみで判別難】

一般的なWebシステムでは、どの入力欄にフォーカス中か分かり難いです。 右上図のようにフォーカス中の入力欄では細長い縦線が点滅するのみで 判別が難しくなっています。

【色を反転して見つけやすく】

そこで右下図のように現在フォーカス中の入力欄の背景色や枠色を 変更し分かりやすくします。

また RadioボタンやCheckBoxではクリック可能な範囲が約20px四方の とても小さな領域になります(ブラウザのデフォルト動作)。 これをラベルを含めた領域まで広げることができます。 目や手に負担をかけずにクリックが可能になります。

【目的のフォームへ直行できる(赤線)】

一般的なTab/Shift-Tabによる前後へのフォーカス移動に加えて 矢印キーや「ALT-IKJL」などにより上下左右への移動が可能になります。 また画面内の上中下部分に直接フォーカスすることも可能で 遠くにある入力欄でもキーボードで素早くフォーカスを移せます。

キー入力でフォーカス制御→マウス不要→高速！ Tabキーによるフォーカス移動では遠くにある入力欄へ移動するのに 打鍵回数が増える問題があります。 そのためマウスによるクリック操作も必要でした。 他方、KeyNaviのフォーカス機能を利用すると数回程度のキー入力で 目的のオブジェクトにフォーカスを移せます。 その結果マウス操作が不要になります。 右手がキーボードとマウスの間で往復する必要がありません。 高速操作が可能になります。

【日付け入力でのフォーカス遷移】

その他、入力確定後に次の入力欄へ自動でフォーカスを移す、 Enterキーによるフォーカス移動などの機能があります。

【ALTキー,Functionキーのショートカット】

特殊キー(Function, Tab, Enter, 矢印など)、 修飾キー(Ctrl, ALT, Shift)を自由に組合わせて指定できます。 実行する動作にはフォーカス、クリック、ページ移動、関数実行など 様々なものを指定できます。

これらの機能は通常のWebページでも利用可能で システムとポータルで一貫した操作環境が実現されます。

社内ポータルの閲覧でもマウスフリーになり イントラネット操作が大幅に高速化されます。

単なる操作画面の印刷以外に専用のページを用意して 印刷することが出来ます。 担当者印の追加や社外秘マークを全体にオーバーラップさせるなど 柔軟なレイアウトが可能です。

どの入力欄にどうやってフォーカスしどのキーが押されたか 時系列で解析することが可能です。 各入力欄、画面毎のトータルの操作時間も分かります。

その結果、特別なユーザ実験無しにユーザビリティ評価が可能です。 どこが操作のボトルネックになっているか客観的に判断できるため 費用対効果の高い開発を行えます。