大阪市中央区 システムソフトウェア開発会社

営業時間:平日09:15〜18:15
MENU

アクションを促すデザイン(押す/引く3):猫でもできるグラフィックデザイン62

株式会社クローバーフィールドの経営理念
著者:YOSHIDA Takayuki
公開日:2018/05/21
最終更新日:2018/05/21
カテゴリー:技術情報
タグ:

「押す」や「引く」を促すデザインについて考えています。「引く」を促すデザインをもう少し深くみて、「押す」との違いや互換性を明らかにしていきます。

普段の生活の中で「引く」行為が活きるのは、次のような場面です。例えばタンスのように、普段納めていたものを使用時に取り出して使う場合です。タンスのような収納家具は、部屋の複雑さを減らします。引くアクションは情報量を変化させることができます。

また、操作する人と操作される対象とが離れている場合も「引く」が活きる場面です。リモコンなどでも対応することができる状況ですが、そこまでコストをかけられない、かけたくない場合には長さのある紐を使う場合があります。これは「押す」ではできないことので、「引く」の特徴と言えるでしょう。

また、対象に物理的な力を与える場合も、引くアクションがよく使われます。コマを回す時や、発動機のスターターを作動させるのも「引く」アクションです。

扉などを見ると、「押す」と「引く」は対のアクションのように思えますが、ユーザーインターフェイスではいつもセットで使われるわけではありません。どちらかというと押すだけ、あるいは引くだけで用いられることが多いように思います。例えば壁に埋設された電灯のスイッチは、押すだけでオンオフが可能です。また壁付けタイプのシンプルな換気扇は引くだけで動作、停止を行います。

引くと押すは、ある程度の互換が可能です。押すボタンが実際はテコの原理で引いていたり、引くスイッチの本体側ではボタンを押していたりと、物理的な部品を咬ませることで利用者の都合に合わせてアクションを変化させます。変化しているのは力が加わる方向である、とみることもできるでしょう。

これは画面でのユーザーインターフェイスでも同じです。前回書いたように、スマホやタブレットでは「押す」アクションにはいろいろな種類があります。これは、画面に対して垂直に「押す」のは簡単だからです。逆に、画面に対して垂直に「引く」を実現するのはほぼ不可能です。ここでも力を加える方向を変える必要があります。画面に対して並行に指を動かし、画面外からコンテンツを引きだしたり、引っ張ったものを離して再読込したりできます。

「引く」を想起させるデザインとしては、リアルな世界で取っ手があるように、指が引っかかりそうに見えるすべり止めのようなデザインが施されていることが多いです。戦術の引っ張って離して、の操作についてはそれを想起させる事前のデザインはありませんが、操作中に「引っ張り操作が発生している」ことを表すアニメーションがみられます。

    上に戻る