Human Interface Guidelines「Right to left」のまとめ

これは何

Human Interface Guidelines>Foundations>Right to leftを読んだまとめ・感想

アラビア語に変えてみたプチ話

実際にアラビア語で変えてスマホを操作してみましたが、設定から日本語に戻すのに苦労しました

普段慣れで操作してる部分が結構あるんだなと別の気づきを得ました。

例えば、だいたい「戻るボタンは左/完了ボタンは右」にあるよな〜と思って英語のサイトでも操作できたりとか。アラビア語にすると全てが逆なので、アイコンで設定できるものがわかっても操作に時間がかかります

ぜひ、アラビア語設定に変えて困ってみてください

書いてあったこと

Right to left概要

スクリプトの読み取り方向に合わせて、インターフェースを反転することで、アラビア語やヘブライ語など右から左に記述する言語をサポートする

テキストの配置

• 段落は言語に合わせて配置する
  • 1,2行程度なら、現在のコンテキストに合わせる
  • それ以上なら、文章の言語に基づいて配置する
    • （例）アラビア語で見ていても、5行程度の英語のテキストがある場合は左揃えにする

数字と文字

• Right to left（RTL）言語でも異なる数値体系が使用されてることがある
  • 数値中心のトピックを扱うサービスの場合はそれぞれの地域に対して適切な表現を特定する
  • 数値関連のトピックがメインじゃない場合はシステムが提供する数値表現に依存で
• 特定の番号の数字の順序は逆にしない
  • ex.電話番号、クレジットカードの番号
• 進行状況やカウントする場合は数字の順序を逆にする
  • 数字だけでなく、それに伴うスライダーや評価のアイコンも逆にする
    • （例）評価のが右から5

コントロール

• ある値から別の値への進行状況を示すコントロールを反転します
  • 進行状況を示すスライダー
  • 固定された順序でナビゲートするもの
    • 戻るボタン・進むボタンなど
• 実際の方向を参照するものはコントロールの方向のままにする
  • ゲームアプリとかで右に移動する場合は、>を押せばそのまま右に移動するようにする、みたいなこと？
• 必要に応じてラテン文字とRTLの視覚的なバランスを調整する
  • そのままだとRTL言語は小さく見える
  • 2pt大きくすると効果的
  • 日本語と英語でも調整が必要な部分はありそう

画像

• 写真やイラストなど反転すると意味が変わるものは反転しない

反転してしまうと著作権違反になる場合もあるので注意

• 画像の順序も意味がある場合、逆にする

インターフェースアイコン

• Appleが提供しているSFシンボルはRTL言語に対応している

• テキストが含まれるアイコンではRTL言語版の作成を検討する
  • 文章の方向
  • 文章を補足する要素の位置
    • （例）エラーを示すを左ではなく右に位置させる
• ロゴやユニバーサルサイン・マークは反転させない
  • 世界で普遍的なマークを調べたけどうまく探せなかった
  • チェックマークは例として挙げられていた
• 現実世界のオブジェクトを表すものは反転しない
  • （例）時計、ペン、ゲーム機など
• アイコンを反転させる際は、意味合いやバランスを検討する
  • スラッシュで否定を意味する場合、LTRでもRTLでも同じバックスラッシュを使用することで意味の一貫性を持たせる

    • 

  • アイコンに+バッジがついてたりする場合はバッジも反転させる

    • 

その他の参考

この記事には反転されてるアイコンがまとめられていたりして、RTL言語にした時の違いがわかりやすいです