インターフェイスとしてテキストをみたときに考慮すること

サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。

例えば Twitter をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助できる部分はありますが、テキストがないことで意味を大きく失うわけです。

インターフェイスをデザインする際に、考えなければならないことは幾つかありますが、大きく「タイポグラフィ」「構造・配置」「色彩・形状」という３つが挙げられます。インターフェイスに最適なテキストを練り出したあとにこの３つの要素を取り入れることでインターフェイスの意味が深まります。

例えば「送信する」というテキストがあるとします。これも本文のテキストを同じ書体にするのではなく、OSのメニューでよく使われているような書体や見た目にすることで意味が深まるでしょうし、ボタンらしい形状をもつことで押すと何かが起こるということも直感的に分かります。また、フォームの下にテキストが配置されているのであれば、フォームの情報を送信するのだということも理解しやすくなります。

インターフェイスに表示されているテキストに意味をもたせるには「タイポグラフィ」「構造・配置」「色彩・形状」が欠かせませんが、肝心のテキストがきちんと考慮されていない状態だと見た目が変わっても改善されてない場合があります。逆に見た目は同じでもテキストを変えるだけで人のアクションが変わることもあります。テキストと３要素は、UIデザインの基本ですが、テキストがすべての要である以上、しっかり考えて行きたい部分です。

インターフェイスデザインにテキストが重要ということは、マイクロソフトやアップルが公開しているガイドラインをみても分かります。アップルのほうでは別途 Apple Publications Style Guide (PDF) というジャーナリストがもっているスタイルガイドにも似たラベリングやヘルプを書くときに役立つガイドラインを公開しています。２つのガイドラインから幾つか項目をピックアップしてみました。

• 冗長な言い回しは避ける
• 可能な限り短くする
• 繰り返しにならないようにする
• 専門用語は省く
• アクションが必要なところは明確に表現
• 短縮型の表現を使わない (英語の場合)
• 省略形を使うときは細心の注意が必要

マイクロソフトもアップルも早い段階でライターを開発プロセスに取り込むことを勧めています。ユーザビリティ、情報構造、ビジュアルを考慮する前に、一度モニターに映し出されているテキストに注目してみてはいかがでしょうか。そうすることで様々な問題が解決することもあるでしょう。