IBM のデザイン原則

IBM が公開しているデザイン原則をご紹介します。ソフトウェア全般のデザインを対象にしたものですが、Web サイトの設計においても参考になる内容です。原文 (Design principles checklist - IBM Design) は英語で、公式な日本語訳は公開されていないようなので、意訳してみました。

分量が多く読み応えがありますが、内容的にはユーザビリティやアクセシビリティに関する原則論だけでなく、それを実現するためのユーザー中心設計 (UCD) の手法や、より大きな、ユーザーエクスペリエンス的な視点も盛り込まれているので、一読することで多くの気付きを得られることと思います。

1. Concepts from the product's subject domain (for example, systems management) should be central and apparent in the software design.
ソフトウェアのデザインにおいては、製品の主ドメインから導き出されるコンセプトが中心に据えられ、そのコンセプトが明白に伝わるようでなければならない。
The relationships among user interface objects in products should be accurate, so that users can rely on their previous experience in the domain when learning and using the software.
製品のユーザーインターフェース内の各オブジェクトは、その関係性が正確に理解できるようでなければならない。そうすることによってユーザーがソフトウェアを学習したり使用したりする際に、その製品ドメインでの過去の経験に頼ることができる。
2. Keep it simple.
簡潔さを維持すること。
Give easy access to the features that most users will need most of the time; features used less often or by only a subset of users are placed less prominently.
大半のユーザーが頻繁に必要とする機能へのアクセスを容易にする。使われる頻度が低い、あるいは少数のユーザーしか使わない機能は、目立たせないようにする。
3. Optimize the design for the most frequent or important tasks.
もっとも頻繁または重要なタスクに向けて、デザインを最適化すること。
Understanding how users will use the software you are designing is critically important. Designers should use that understanding to anticipate the information, task flows, and features that users require at key points within the user experience.
ユーザーがソフトウェアをどう使用するかを理解することが非常に重要である。デザイナーは、その理解を用いて、ユーザーエクスペリエンスの観点から、情報、タスクの流れ、ユーザーが求める機能を予測しなければならない。
4. Make the interface accessible and visible to users.
インターフェースはアクセシブルに、ユーザーが知覚できるように作ること。
Design your Web site or application so that users can view and easily access objects or information within the interface. Choices should be visible to users rather than hidden with cryptic key sequences. When objects and choices are immediately visible, users learn and complete work tasks efficiently.
Web サイトやアプリケーションをデザインする際には、インターフェース内のオブジェクトや情報を、ユーザーが一見でき、また容易にアクセスできるようにする。オブジェクトや選択肢が一目で知覚できれば、ユーザーは効率的に学習しタスクを完遂することができる。
5. Use proper default values when supporting complex tasks.
複雑なタスクを支援する場合は、適切なデフォルト値を用意すること。
Use good defaults so that users can complete tasks relatively easily and quickly rather overwhelming them with choices.
適切な (役に立つ) デフォルト値を用意することで、ユーザーが選択範囲の大きさに圧倒されることなく、比較的容易に、素早くタスクを完遂できるようにする。
6. Be flexible.
フレキシブルにすること。
Let users customize the application to meet their unique needs. For example, specialized users could be given a way to make secondary choices more prominent in the product. Also, don't limit users by artificially restricting their choices to a "correct" sequence. Flexibility is also enhanced by letting users select options in various sequences and in letting them modify default values.
ユーザー固有のニーズを満たせるように、アプリケーションをカスタマイズできるようにする。たとえば、専門性の高いユーザーが使用するものであれば、一般に使われないオプションも選択できるようにする。また、ユーザー行動を「正しい」流れだけに制限しないようにする。フレキシビリティを広げて、ユーザーが様々な流れでオプションを選択したり、デフォルト値を調整したりできるようにする。
7. Keep your users informed and in control by providing informative and timely feedback tailored to the current situation.
その時々の状況に合った、有益でタイムリーなフィードバックを提供することで、ユーザーが常に状況を把握でき、自身でコントロールできるようにすること。
For example, progress indicators let users know that their system is healthy and is carrying out their request. At a minimum, alert users when they take actions that will result in the loss of data. (Ideally, such choices would be disabled or even eliminated when they are inappropriate in a particular situation.) All the information included in the feedback should be meaningful to the average user.
たとえばプログレス表示は、システムに問題がなく要求を処理中であることをユーザーに伝えることができる。少なくとも、データの損失につながる恐れのあるアクションをユーザーが取るときは、その旨を警告すること (理想的には、そのようなアクションが取れないようにグレーアウトするか見えないようにするのが望ましい)。フィードバックに含まれるすべての情報は、平均的なユーザーにとって意味のあるものでなければならない。
8. Things that look the same should behave in the same way, and an action should always produce the same result.
同じように見えるものは同じように振る舞うべきであり、アクションによって得られる結果は同じでなければならない。
Avoid modes that change the effects of actions. Where modes are unavoidable, make them clear to the user and easy to change.
アクションによって得られる効果が変わるようなモードの使用は避けること。モードの使用が避けられない場合は、ユーザーにその旨を明示し、簡単にモードを変更できるようにすること。
9. Provide the ability to undo and redo actions.
アンドゥとリドゥができるようにすること。
Applications must provide users with the ability to freely explore applications (which includes the ability to make mistakes) without fearing permanent damage.
恒久的な損失を恐れることなく、ユーザーが自由にアプリケーションを探究できる (ミスをしても大丈夫であることを含む) ようにしなければならない。
10. Make your application predictable by using industry standard user interface conventions wherever possible.
なるべく、業界標準のユーザーインターフェースの慣例に倣うことで、ユーザーがアプリケーションの使いかたを予測できるようにすること。
For example, users should be able to use standard selection models and keyboard equivalents like Ctrl+C and Shift+→ (to copy the currently selected object and extend the current selection one unit to the right, respectively) everywhere they work with data. Use a common set of design patterns and guidelines so that users don't have to relearn how to perform common tasks.
たとえば、Ctrl+C (選択中のオブジェクトのコピー) や Shift+→ (選択範囲の拡張) といった標準的な操作は、ユーザーがデータを取り扱っている間、いつでも可能であるべきである。デザインパターンの共通セットやガイドラインに則って、各アプリケーションで共通するようなタスクは再学習しなくても実行できるようにする。
11. Always keep your target users in mind as the product is designed.
製品がデザインされる過程においては、常にターゲットユーザーを念頭に置くこと。
Developing personas and identifying and defining the roles your users fulfill can help you understand how various roles will use your product. Designs based on typical workflows and the other software that users might use in conjunction with yours will delight users.
ペルソナを作り、ユーザーの果たすべき役目を特定し定義することで、製品がどのような使用目的の下で使われるかを理解することができる。典型的なワークフローや、一緒に使われる他のソフトウェアも想定してデザインすることで、ユーザーを満足させることができる。
12. Avoid adding features just so they can be ticked off a list.
「あれもこれもできます」的な機能を追加しないこと。
Remember that every additional feature equals a set of choices added to what is likely already a wide array of choices. Too many choices can overwhelm users.
あらゆる機能追加は、既存の広範な選択肢にひとつ新たな選択肢を追加するに過ぎない (つまりその機能は選ばれにくい) ことを忘れないこと。多すぎる選択肢は、ユーザーを圧倒する恐れがある。
13. Design your user interface so that it can be localized for other geographies without redesigning the interface.
他の地域用にローカライズしても大丈夫なように、ユーザーインターフェースをデザインすること。
For example, don't crowd form controls too tightly so they can accommodate longer German translations.
たとえば、フォームコントロールをギチギチに詰め込みすぎないようにする (英語からドイツ語に翻訳してテキストが長くなってもレイアウト崩れなしに収まるように)。
14. Consider persons with disabilities when designing your applications.
アプリケーションをデザインするときは、障害を持った人のことも考慮すること。
Many users of your product may have impaired vision or physical limitations that affect their ability to use a mouse or a joystick.
ユーザーの多くは、視覚障害や身体的制限を持っていて、マウスやジョイスティックを使うのが難しいことがある。
15. Design the application so that contextual help is available to users when they need it.
ユーザーが欲するときに、文脈的な操作支援を得ることができるよう、アプリケーションをデザインすること。
Users should not have to refer to Help constantly to complete their tasks.
ユーザーがタスクを完遂するのに、ヘルプをいちいち参照しなければならないようにすべきではない。
16. Bring objects to life through good visual design.
優れたビジュアルデザインによって、オブジェクトに活気を与えること。
The goal of visual design in the user interface is to surface to the user in a cohesive manner all aspects of the design principles. Visual design should support the user model and communicate the function of that model without ambiguities. Visual design should not be the "icing on the cake" but rather an integral part of the design process. The final result should be an intuitive and familiar representation that is second nature to users.
ユーザーインターフェースにおけるビジュアルデザインの目的は、このデザイン原則で挙げているあらゆる側面がユーザーにしっかりと伝わることである。ビジュアルデザインはユーザー (の中の概念) モデル (の形成) を支援し、そのモデルに呼応する機能を明確にユーザーに伝えるようになっていなければならない。ビジュアルデザインは「余分な装飾」であるべきではなく、デザインプロセスの不可欠な要素として扱われるべきである。ビジュアルデザインの最終成果物は、直観的で馴染みがあり、ユーザーが自然に使えるものでなければならない。
17. Create user interfaces that promote clarity and visual simplicity.
ユーザーインターフェースは、明確さや簡潔さを高めるように創ること。
The following visual design principles help create that effect:
そのためには、以下に挙げた、ビジュアルデザインの原則に従うこと。
  • Subtractive design: Reduce clutter by eliminating any visual element that doesn't contribute directly to visual communication.
    引き算のデザイン : ビジュアルコミュニケーションに直接寄与しないような視覚要素を排除し、乱雑さを減らす。
  • Visual hierarchy: Understand the importance of users' tasks and establish a visual hierarchy of these tasks. An important object can be given visual prominence. Relative position and contrast in color and size can be used to convey task importance.
    ビジュアルによる階層表現 : ユーザーのタスクの重要度を理解し、これらのタスクの階層表現法を確立する。重要なオブジェクトは視覚的に目立たせる。相対的な位置関係、色のコントラスト、サイズを用いて、タスクの重要度を表現する。
  • Affordance: When users can easily determine the action that should be taken with an object, that object displays good affordance. Objects with good affordance usually mimic actual objects.
    アフォーダンス : オブジェクトを使用して実行するアクションを、ユーザーが容易に判断 (理解) できるのであれば、そのオブジェクトは優れたアフォーダンスを持っていると言える。優れたアフォーダンスを持つオブジェクトは大抵、実存するオブジェクトに似たものである。
  • Visual scheme: Design a visual scheme that maps to the user model and lets the user customize the interface. Do not eliminate extra space in your image just to save space. Use white space to provide visual "breathing room."
    ビジュアル体系づくり : ユーザー (の中の概念) モデルに呼応した、またユーザーによるインターフェースのカスタマイズを許容するような、ビジュアル体系をデザインする。少ないスペースに多くの情報を入れるといった理由で余白部分を削ることのないようにする。ホワイトスペースを使ってユーザーに一息入れる余裕を与える。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加