公共システムにおけるタッチパネルの ユーザインタフェースデザイン Design of Touch-Panel User Interfaces for Public Systems あらまし 公共システムではタッチパネルを用いたユーザインタフェースが数多く採用されている。 公共システムはサービスの社会性からユニバーサルデザイン上の配慮が重要である。 タッチパネルを用いたインタフェースは複雑なサービスを簡潔な操作で提供できるなどの 利点があるが，操作の触覚的反応が得られにくいなどの欠点も抱えている。富士通では公共 システムの開発において，タッチパネルの欠点を補い利便性の高いサービスを提供するため に，ユーザインタフェース開発の専門チームを組織して取り組んでいる。 本稿では，具体的な公共システムの画面デザイン事例として“amabile”の画面デザイン を取り上げ，「読み取りやすい文字」や「押しやすいボタン」などの工夫や，対人で行われ ていた手続きが無人で行われることで生ずる「機械操作に対する不安」をフォローする手 法， 「手続き自体の分かりにくさ」を補う手法を紹介する。 Abstract User interfaces with touch panels are now widely installed in public systems. Considering the important social role of public services, it is especially important that user interfaces have a universal design. User interfaces with touch panels have strong merits; for example, complicated services can be executed with a simple operation. However, such interfaces also have demerits, for example, it is difficult to build touch panels that provide the user with tactile sensations that indicate the intended user-action has been performed. To overcome these demerits and thereby make public services easier to use, Fujitsu is organizing a special user-interface development team. This paper describes the following design techniques used in “amabile”, which is an example of screen design for public systems: - Design of easy-to-read characters, - design of buttons that are easy to select and press, - removal of factors that make people reluctant to use machines, - measures to supply information that clearly guides users through complicated operations. 浅輪武生（あさわ たけお） 浅川 玄（あさかわ げん） 総合デザインセンタープロダクトデ ザイン部 所属 現在，ソフトデザインに従事。 総合デザインセンタープロダクトデ ザイン部 所属 現在，ソフトデザインに従事。 FUJITSU.54, 3, p.225-231 (05,2003) P225-231：05-12青校.doc 225/7 最終印刷日時：2003/05/26 11:06 225 公共システムにおけるタッチパネルのユーザインタフェースデザイン ま え が き 近年の公共サービスは，利用者が自ら情報機器を 利用することを前提にして企画されるようになった。 こうした情報機器はだれにでも公平にサービスを提 供できなくてはならず，個人が自分に合わせて選択 できるパーソナル情報機器以上にユニバーサルデザ て数多くなされた。こうした研究で以下のような得 (1)-(9) 失が指摘されている。 （1） 利点 (3) 初心 ・操作が簡単でほとんど習熟の必要がない。 (8) 者でも使うことができる。 ・使いやすさの心理的評価が高い(5)（操作してみて 簡単に感じるということ） 。 イン（以下，UD）の重要性が注目されている。公 (4) ・機器の選択に関する手順が容易である。 共サービスの例としては，行政機関の住民票の発行 (4) そのため目 ・操作の際に表示から目が離れない。 機や電子投票機，医療機関の受診の受付や会計シ ステム，金融機関の現金の自動預払機（ATMや キャッシュディスペンサー）などが挙げられる。 一方，提供されるサービスの内容が複雑になり， 利用者の操作は，多数の項目選択や入力が必要な大 変に手順の長いものになった。こうした長い手順を 必要とするサービスに対しては，タッチパネルを用 (5) と手の協調が容易である。 ・ボタンを指で直接ポイントできるため，とくに直 (9) 接操作に優れている。 ・操作時間に関して，ほかのポイント装置よりも有 (5) 意に優れている。 ・情報内容の汎用性が高い。 （2） 欠点 いたユーザインタフェース（以下，UI）を採用す (4) ・触感によるフィードバックが乏しい。 ることが多い。タッチパネルには手順を分かりや (5),(9) ・ポイント精度が低い。 すく表現できる利点も多いが，同時に欠点も持っ (9) ・視差による入力エラーが発生する。 ている。 (2) ・調整的な細かい操作には向かない。 本稿では，タッチパネルを用いたUI開発におけ るUD視点での開発プロセスとその手法・内容につ いて，医療機関での受付会計システムを事例に紹 介する。 けい けん わん ・頸 肩 腕 への負担が大きく，長時間使用に向か (5),(8) ない（垂直画面を使用した場合） 。 （3） 欠点への対策 研究のなかには，抽出された欠点について，その タッチパネルインタフェースの得失の研究 タッチパネルが公共の情報機器に採用されるよう 対策が提案されているものもある。 (4),(9) ・触感によるフィードバックが乏しい。 →立体的，色覚に考慮した視覚的な表示をする。 になったのは，提供されるサービスが複雑化したこ →音を鳴らすなどの聴覚的な補助をする。 とが大きな要因である。 →確認機能の付加などを組み込む。 複雑なサービスを利用するためには，複数回の選 択操作や入力操作を行うことになる。表示される情 報が複数画面にわたる場合も多い。こうしたシステ ムでは，操作に必要な情報とボタンを自動販売機の ように一度にすべて提示するよりも，操作のステッ プごとに必要な情報と必要な操作部が提示される方 が，容易に理解できて操作も単純である。逐次に変 化する情報を表示するのにディスプレイ装置が適し ていることは自明であるが，さらに，タッチパネル での入力は，多数のボタンを配置する方法や限られ た少数のボタンに複数の機能を割り当てる方法に比 べて，より簡潔な操作卓を提供できるであろう。 タッチパネルの研究は1990年代にタッチパネル 以外の入力デバイスやポイント装置との比較を通し 226 P225-231：05-12青校.doc (9) ・ポイント精度が低い。 →ポイント中のボタンの色を変化させる方法が 有効である。 (9) ・視差による入力エラーが発生する。 →視差の影響を排除できる位置にボタンを設置 する。 →センシティブ領域を視差の影響を加味して拡 大する。 →2度押し入力などソフトウェア上の工夫を行う。 （4） 定量的な情報 画面上のボタン形状やサイズについて以下のよう な報告がなされている。 (9) ・ボタンは一辺13 mm以上のものが望ましい。 ・ボタン形状は，正方形のものが長方形の場合より FUJITSU.54, 3, (05,2003) 226/7 最終印刷日時：2003/05/26 11:06 公共システムにおけるタッチパネルのユーザインタフェースデザイン (9) もポイントする速度と精度が優れている。 はこうした業務に従事している職員向けに発行され ・長方形のボタンでは，縦長の方が横長よりやや優 ている「入門書」や「ガイドブック」が役に立つこ れている。ただし極端に縦横の比率の違うものは とが多い。医療機関では「医療事務員」，金融機関 (9) 避ける。 では「テラー」などに向けた書籍には業務内容の情 (9) ・ボタン間隔は操作の性能に差をもたらさない。 報のみならず，利用者と接するときの対応（「接 以上のように欠点を抱えながらも，扱える情報の 多様性や操作の簡便性によって，タッチパネルを用 遇」などとも呼ばれる）の心構えなども記されて (10),(11) いる。 いた公共システムが様々な工夫を加えながら開発さ れ続けている。 これらの書籍はUI開発上に心がけなければなら ない要件についての大変良い参考になる。例えば， 医療機関における「接遇」には以下のような点が留 公共システムの開発プロセス (10) 意されている。 公共システムの画面デザインを中心にしたUI開 発は次のような5ステップで進められる（図-1） 。 ・へりくだり過ぎない（常識的敬語で誠意ある態度） ・高ぶらない（暖かい親しみある態度） （1） 調査分析（業務環境の把握） ・いたわりと真心を込めて（公平にいたわる態度） （2） 機能企画（システムフローと画面構成の企画） ・親切，丁寧に（患者の身になって思いやる心） （3） 画面デザイン展開（画面構成，グラフィック ・迅速かつ的確に 制作） サービス提供に当たって職員の方々が心がけてき （4） 試作評価（UIの評価実験） たことは，情報機器でも引き継いでいくべき重要な （5） 顧客適用（顧客向けのカストマイズ） 要素である。 上記の開発プロセスは公共システムに限らず通常 （4）項の試作評価も重要なプロセスで，論理的 の画面デザインでも行われるステップであるが，と な設計だけでは，思いもよらない操作上の分かりに くに，公共システムにおいては（1）項のプロセス くさが発生する場合が多い。そのため，開発プロセ において，対象機関の独特の慣習や特別な概念が多 スの当初から評価プロセスを組み込みフィードバッ く，サービス環境そのものを理解することが重要と クできるように努めている。また，過去の基礎研究 なる。 などからは測れない要素の把握などは，開発の当初 例えば，医療機関における「外来受付」「会計」 に評価実験を組み込むこともある。 業務は，普段から自分自身でも利用しているにもか “amabile” （アマービレ）の開発事例 かわらず，誤って理解している概念も多く，その正 確な把握が第一ステップである。業務環境の把握に 調査分析 機能企画 “amabile”（アマービレ）は医療機関における 画面デザイン展開 情報収集分析 サービス・機能提案 操作シーケンス検討 画面デザイン 市場での利用動向 利用者の満足・不満足 他社のデザイン動向 利用環境の分類 サービスアイデア展開 サービスの分類 操作シーケンス整理 情報の分類・整理 用語整理 基本レイアウト 部品のモジュール化 利用者の概念理解度 生理的特性 サービスの提供構造 媒体の利用アイデア インタフェースアイデア インタフェース評価 カラーコーディネイト 運用状態 小計精査 保守状態 取引詳細 全金額回収 全硬貨補充 合計精査 全紙幣回収 合計計数 全硬貨回収 係員ｶｾｯﾄ補充 残高確定 自動精査 一部回収 キャラクタデザイン 誘導アニメデザイン アニメシナリオ 表現展開 実現検証 試作評価 顧客適用 ＵＩの試作評価 個別カストマイズ シミュレータ開発 個別顧客対応 ユーザ評価実験 カストマイズマニュアル 実現検証 カストマイズアイデア 障害場所 運用設定 一部補充 通帳管理 係員保守 図-1 画面デザインの流れ Fig.1-Flow of design-work. FUJITSU.54, 3, (05,2003) P225-231：05-12青校.doc 227/7 最終印刷日時：2003/05/26 11:06 227 公共システムにおけるタッチパネルのユーザインタフェースデザイン ・機器操作の経験不足を補う配慮 再来受付と診療費精算の手続きをより効率的に行う ための自動機である。医療機関における診療行為の →機器操作そのものに対する不安を補う工夫 前後に行われる手続きをサポートし，患者にとって →機器操作の説明の工夫 ・手続きの分かりにくさを補う配慮 は待ち時間を短縮し，医療機関にとっては電子的な →手続きの内容を解説するための工夫 情報管理によって手続きの効率化を目的としている。 これらは，以降のUIデザインしていく際の中心 つぎに“amabile”のUI開発の事例を示す。 （1） UIデザイン課題 的な課題となり，アイデアの評価や詳細仕様の決定 の基盤となる。 受付で行われる手続きは，診察券などによる本人 以下，試作時の画面デザイン例を取り上げ，UI の特定の後，予約内容の確認と必要に応じて予約内 容の変更を行い，予約のない場合には新たに予約の デザインのプロセスを紹介する。 受付を行う。会計で行われる手続きは，会計明細を （2） 受付・会計操作フローの企画 最終的にデザインされた画面フローを図-2および 提示し，現金を支払う診療費精算と，必要に応じて 図-3に示す。 処方箋や次回予約票などの発行を行う。 このような受付・会計の手続きは，これまで担当 来院した患者は，まず，受診券を自動機に挿入す の職員が患者と相対して行ってきたが，自動機を用 る。画面に本人の予約情報が照会されて予約内容が いて患者本人が操作することで，新たに問題が生じ 表示されるので，変更がない場合には，画面の「確 る可能性が予測される。導入目的の待ち時間の短縮 認」ボタンにタッチして受付を行う。受付が完了す のメリットを享受してもらえるように，こうした問 ると診察券が返却され受付票が発行される。受付票 題点を解決するためのUIデザイン課題として次の には診療待合室への誘導案内や受付番号などが記載 項目を抽出した。 される。呼出しに氏名を用いることに対してプライ ・見やすく使いやすい画面のための生理的な配慮 バシの配慮を求める世論が強くなっており，受付番 →文字色，文字サイズなどの工夫 号を利用して患者の呼出を行う運用の医療機関も多 →タッチパネルの操作性についての工夫 くなっている。また，受診内容を変更する場合には， 画面の「変更」あるいは「追加」ボタンにタッチす 診察券あり 診察券なし 予約なし 予約あり 予約を入れる 予約を確認する 予約内容を確認する 図-2 受付のフロー Fig.2-Flow of acceptance. 228 P225-231：05-12青校.doc FUJITSU.54, 3, (05,2003) 228/7 最終印刷日時：2003/05/26 11:06 公共システムにおけるタッチパネルのユーザインタフェースデザイン 処方箋発行 精算 図-3 会計のフロー Fig.3-Flow of accounting. ることで診療内容を選択する画面に遷移する。万一， 操作の概要を表す情報 受診券を忘れた場合も自宅の電話番号を手がかりに 利用者に必須な操作情報 して本人特定を行う手順に設計した。 操作を補う情報 例：媒体挿入の位置/ 媒体挿入の方向など 診療が終わった後，会計の際に，患者は，再び受 診券を自動機に挿入する。まず，画面には請求金額 が表示される。請求内容の詳細を確認したい患者は 操作のためのボタン領域 「会計詳細」ボタンで確認することができる。内容 視線・操作動作の流れ が良ければ，「確認」ボタンを押すと現金挿入を促 す画面が表示される。現金が挿入されると，逐次に 処方箋，次回予約票が発行され，最後におつりと領 収書が排出されて，診察券が返却される。逐次の媒 体排出も同時排出による患者のあせりを回避する配 慮である。 （3） 画面レイアウトのデザイン 図-4 画面レイアウトの特徴 Fig.4-Feature of screen layout. 一連の操作フローからも分かるように，各画面は 一定のレイアウト構造によって出来上がっている んでも自然に操作の手順に合った順番に情報を認識 （図-4）。基本的に画面を4部分に分けて，各部分に できる工夫である。もちろん，機械操作に慣れた利 は常に同等の内容の情報を表示するようにデザイン 用者は，操作方法を提示する情報などは，分からな されている。画面の左上から右下に向かって，操作 いときだけ詳細に読むようにして，効率的に操作す の目的と操作の方法を提示する情報→操作を促して ることが可能である。 誘導する情報→操作のためのボタンの順で配されて （4） 文字・ボタンのデザイン いる。これは，情報機器に不慣れな人ほど，画面に 画面を構成する文字やボタンについては，生理的 表示されているすべての情報を読み取ろうとする傾 な研究データに基づき，最適な文字サイズ，文字色， 向があるという基礎実験の報告から，画面全体を読 文字の背景と文字のコントラストなどを考慮してデ FUJITSU.54, 3, (05,2003) P225-231：05-12青校.doc 229/7 最終印刷日時：2003/05/26 11:06 229 公共システムにおけるタッチパネルのユーザインタフェースデザイン 図-5 ボタンデザインの特徴 Fig.5-Feature of button design. ザインしている（図-5） 。 文字フォントについては，画面上で読み取りやす いように，文字を構成する線の太さが一定なゴシッ ク書体を用いている。操作を説明する文言の一部は ひとまわり大きく表現して，重要な情報を強調する とともに，大きく書かれた文字のみを読み取っても 操作内容が連想できるように考慮した。ボタンサイ ズは前述の十数ミリのサイズを確保してタッチしや すさに配慮している。さらに，ボタンのタッチ操作 は，指がいったん画面に触れた後，離れるときに タッチを確定させている。これは，画面が遷移した 際に同一位置にあるボタンを誤って続けてタッチし てしまう誤操作への対応である。また，ボタンのデ ザインはほかの画面要素に比べて十分な立体感を表 現し，操作部位であることを強調している。 （5） 操作を促して誘導する情報 図-6 媒体の受け渡し Fig.6-Handing over of medium. 機械操作の経験不足を補うために，操作の説明と 誘導は具体的な絵を用いている。媒体の挿入部位や る。機械に不慣れな利用者は，操作を始める前から 挿入方向は，絵的に示すと理解がたやすい。また， 「なんとなく難しそう」などの印象で冷静に操作を 媒体の受け渡しに当たっては，排出される媒体をあ 行うことができないことが多く，なんらかの見慣れ らかじめ画面にすべて表示し，排出した媒体を患者 た要素を目にすることで，安心を得ることができる が受け取るたびに，画面から消す表現を行い，媒体 ようである（図-7） 。 の取り忘れがないように考慮した（図-6） 。 最後に，画面表現ではないが，自動機から排出さ 絵的な表現は，具体的に操作を表現するほかに， れる各種の帳票には，医療機関での手続きに不慣れ キャラクタ（人物）などを用いることで，情報機器 な患者に対する配慮を加えている。例えば，受付票 の持つ，親しみにくい雰囲気を緩和することができ の紙面には注意書きとして，「この受付票は会計が 230 P225-231：05-12青校.doc FUJITSU.54, 3, (05,2003) 230/7 最終印刷日時：2003/05/26 11:06 公共システムにおけるタッチパネルのユーザインタフェースデザイン いように情報機器へのシステムに移行させるための 手法を常に心がけることが，理想的なUD製品へ到 (12) 達する道筋であると考える。 参 考 文 献 （1） 小林大二ほか：プラントにおけるタッチオペレー ションの操作方式に関する実験的検討．人間工学， 図-7 安心して機械操作ができる視覚的な解説 Fig.7-Comprehensible explanation by picture. Vol.31，No.1，p.51（1995）． （2） 岡田有策：タッチオペレーションによる状態変更型 の手動制御．人間工学，Vol.29，No.5，p.299（1993）． 終わるまで大切にお持ちください」と記して，医療 （3） 村田厚生：タッチスクリーンの操作性に影響する要 機関にいる間はずっと必要な伝票であることを伝達 因．人間工学，特別号，Vol.29，p.354（1993） ． している。 （4） 岡田有策：タッチオペレーションによるシステム制 これらの工夫は，過去の基礎的な使いやすさに関 御に関する人的特性 - タッチパネル装備の簡易プラ する情報の蓄積に基づき，設計者とデザイナが基本 ント・シミュレーターによる実験．人間工学，特別号， 的な仕様を固めていくのであるが，そうした論理的 Vol.29，p.356（1993） ． な積み上げだけでなく，試作したシミュレータなど （5） 村田厚生：対話型システムにおけるポインティング を活用して，実際に操作検証を行うことが重要で 装置の操作性に関する実験的検討．人間工学， あった。ボタンの詳細なレイアウトや画面の遷移順 Vol.28，No.3，p.107（1992） ． 序などは，こうした実験を通してより完成度の高い の 手 動 制 御 ． 人 間 工 学 ， 特 別 号 ， Vol.28 ， p.382 ものにすることができた。 む す （6） 岡田有策：タッチオペレーションによる状態変更型 び 以上紹介してきたとおり，タッチパネルを用いた UIは，基本的に視覚での認知を前提としたシステ ムであり，UDの理想的な姿からすると利用者に制 限のあるシステムである。こうした制限に対しては， （1992） ． （7） 片山滋友ほか：タッチスクリーン入力におけるエ ラーの発生要因について．第7回 Human Interface， 1991，p.401． （8） 村田厚生：水平方向の動きに対する入力デバイスの 操作性．人間工学，Vol.27，No.3，p.169（1991） ． ハンドセットを用いた音声ガイダンスなどで公平な （9） 押部直克ほか：タッチ画面インタフェースにおける サービスを補完している。本稿ではタッチパネル ボタン配置の実験的評価．第6回 Human Interface， UIデザインに限定して紹介した。 1990，p.177． ここで紹介したデザインプロセスで，採用する技 (10) 木津正昭：最新医療事務入門．2000． 術の効果と限界を十分に見極めた上で，利用者がそ (11) 月間バンクレディ．金融財政事情研究会発行． の効用を十二分に享受できるデザイン的改善を施し (12) 池守真人ほか：ビジュアルコミュニケーションデザ ていくことと，提供されるサービス自体の環境や慣 インの考え方とその活動．FUJITSU ，Vol.43，No.5， 習を理解し，人と人とのコミュニケーションとして p.421-433（1992） ． 提供されてきたサービスの質を低下させることのな FUJITSU.54, 3, (05,2003) P225-231：05-12青校.doc 231/7 最終印刷日時：2003/05/26 11:06 231
© Copyright 2024 ExpyDoc
