Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UIコンポーネントの呼吸 壱ノ型 矢印

Avatar for ゆめみん ゆめみん
February 25, 2022

UIコンポーネントの呼吸 壱ノ型 矢印

UI/UXデザイナーLT会 - vol.6で発表したスライドです。
Webサイトやアプリケーションには矢印がいっぱいです。もちろん、UIデザインしていても矢印をたくさん使います。
でも、どんなふうに矢印を使っているか私たちは普段意識できているでしょうか。好き勝手に向いた矢印に囲まれて、混乱してしまったことはないでしょうか。

まず矢印を、使われ方によってつぎの6つに分類してみました。

1. リンク: テキストリンクのラベルの前後に矢印を付けたり、ボタンの見た目でもページを遷移する振る舞いのもの。

2. オプションあり(ドロップダウン・他の選択肢あり): 矢印を押すと他の選択肢や条件指定などのオプションが表示されるもの。

3. ナビゲーション: 矢印を押して移動するもので、たんなるページ遷移に限らずそのコンテキストで連続した内容を表示したりタスクを行ったりするもの。

4. 階層表現(ドリルダウン): 矢印を押すとその下に子の階層を表示するもの。1個以上の階層がある場合に使われる。

5. UIのコントロール(開閉・送り・行の移動・並べ替え) : UIの動きの方向に矢印が向いているもの。または、上下矢印や左右矢印などで操作可能であることのシグニファイアとなっているもの。

6. アクション(送信・再生): 送信や再生開始など、そこでの特定のコマンドを実行するもの。

これほど様々な使われ方をする矢印って、アイコンとして万能じゃないでしょうか。
でも、本当になんにでも使っていいのでしょうか。

ひとまず、矢印が目指す方向に「何が」動いていくのかによって、つぎのような結論を出してみました。
それは「ユーザー」が主語になるなら矢印でもいい!というものです。
たとえば、リンクは現在のページから別のページに「ユーザーが」進む。ナビゲーションは「ユーザーが」現在地から別の場所に進む、または戻る。アクションは「ユーザーが」実行する。
その他の、オプションあり、階層表現、UIのコントロールには、矢印以外の表現が使用されることも多いです。

だからどうだということはありませんが、矢印が多くなりすぎて気が狂いそうになったときには、ぜひこのことを思い出していただければ幸いです。

Avatar for ゆめみん

ゆめみん

February 25, 2022
Tweet

More Decks by ゆめみん

Other Decks in Design

Transcript

  1. ֊૚දݱ ʢυϦϧμ΢ϯʣ ໼ҹΛԡ͢ͱͦͷԼʹࢠͷ֊૚Λදࣔ͢Δ΋ͷɻݸҎ্ͷ֊૚͕͋Δ৔߹ʹ ࢖ΘΕΔɻ ͲΜͳ໼ҹ͕͋Δͷ͔ͳ 6*ͷίϯτϩʔϧ ʢ։ด ɾૹΓ ɾߦͷҠಈɾ ฒ΂ସ͑ʣ

    6*ͷಈ͖ͷํ޲ʹ໼ҹ͕޲͍͍ͯΔ΋ͷɻ·ͨ͸ɺ্Լ໼ҹ΍ࠨӈ໼ҹͳͲͰ ૢ࡞ՄೳͰ͋Δ͜ͱͷγάχϑΝΠΞͱͳ͍ͬͯΔ΋ͷɻ ΞΫγϣϯ  ʢૹ৴ ɾ ࠶ੜʣ ૹ৴΍࠶ੜ։࢝ͳͲɺͦ͜ͰͷಛఆͷίϚϯυΛ࣮ߦ͢Δ΋ͷɻ
  2. ໼ҹͷ໨ࢦ͍ͯ͠Δ΋ͷ ϦϯΫ 6*ͷίϯτϩʔϧ ʢ։ด ɾૹΓ ɾߦͷҠಈɾ ฒ΂ସ͑ʣ ΞΫγϣϯ  ʢૹ৴

    ɾ ࠶ੜʣ Φϓγϣϯ͋Γ ʢυϩοϓμ΢ϯ ɾଞͷબ୒ࢶʣ ݱࡏͷ ϖʔδ ผͷ ϖʔδ ݱࡏͷ બ୒ ผͷ બ୒ ӅΕ͍ͯΔ΋ͷ͕͋Δ͜ͱͷ҉ࣔɻ6*ͷಈ͖͸໼ҹͷํ޲ʹݶఆ͞Εͳ͍ɻ දࣔ·ͨ͸ ඇදࣔͷ ঢ়ଶ ඇදࣔ·ͨ͸ දࣔͷ ঢ়ଶ ݱࡏͷ ঢ়ଶ ผͷ ঢ়ଶ ֊૚දݱ ʢυϦϧμ΢ϯʣ ֊૚ ࢠͷ ֊૚ ։ด͢Δʢ6*ͷίϯτϩʔϧʣͱಉ࣌ʹπϦʔΛදݱ͍ͯ͠ΔɻҰཡͰ࢖ΘΕ ͳ͍৔߹ʢભҠ͕൐͏৔߹ʣ͸ɺφϏήʔγϣϯͷҙຯʹ͍ۙɻ ผͷ ৔ॴ φϏήʔγϣϯ ݱࡏ஍ ݱࡏ஍͔ΒͲ͜ʹߦ͚Δ͔Λࣔ͢ͱ͍͏ҙຯͰಓ࿏ඪࣝʹ͍ۙɻ 6*ͷಈ͘ํ޲ʹ໼ҹ͕޲͍͍ͯΔɻ લޙͷঢ়ଶͷઆ໌͕ͳ͘ɺ໼ҹ͚ͩͰදݱ͞ΕΔ͜ͱ͕ଟ͍ɻ ϖʔδͷҠಈΛද͢ͱ͍͏ҙຯͰ͸6*ͷίϯτϩʔϧʹ΋͍ۙɻ
  3. ʮϢʔβʔʯ͕ओޠʹͳΔͳΒ໼ҹʢͰ΋͍͍ʣ ʂ ϦϯΫ 6*ͷίϯτϩʔϧ ʢ։ด ɾૹΓ ɾߦͷҠಈɾ ฒ΂ସ͑ʣ ΞΫγϣϯ 

    ʢૹ৴ ɾ ࠶ੜʣ Φϓγϣϯ͋Γ ʢυϩοϓμ΢ϯ ɾଞͷબ୒ࢶʣ ݱࡏͷ ϖʔδ ผͷ ϖʔδ ݱࡏͷ બ୒ ผͷ બ୒ ʮϢʔβʔʯ͕ݱࡏ஍͔Βผͷ৔ॴʹʮਐΉʯ·ͨ͸ʮ໭Δʯɻ φϏήʔγϣϯ ݱࡏ஍ ผͷ ৔ॴ දࣔ·ͨ͸ ඇදࣔͷ ঢ়ଶ ඇදࣔ·ͨ͸ දࣔͷ ঢ়ଶ ݱࡏͷ ঢ়ଶ ผͷ ঢ়ଶ ໼ҹ͕Α͘࢖ΘΕΔ͕ɺͨͱ͑͹TFMFDUཁૉʹTJ[Fࢦఆ͢Δͱ͔ɺ"QQMFͷߪೖ ϖʔδͷΑ͏ʹ͢΂ͯͷબ୒ࢶΛදࣔ͢Δํ๏΋͋Δɻ ֊૚දݱ ʢυϦϧμ΢ϯʣ ֊૚ ผͷ ֊૚ ໼ҹʹݶΒͣܩઢʢᵓ΍ᵋʣͰදهͰ͖Δɻ໼ҹʹΑΔʮ։ดͰ͖Δײ͡ʯ ͸ɺ6*ͷίϯτϩʔϧͱͯ͠ͷγάχϑΝΠΞʹ͗͢ͳ͍ɻ ໼ҹʹݶΒͣʮ։͘ʯʮด͡Δʯ΍ʮ ʯʮʯͰදݱ͞ΕΔ͜ͱ΋͋Δɻ ʮϢʔβʔʯ͕ʮ࣮ߦ͢Δʯɻͨͩͦ͠ͷΞΫγϣϯʹ΋ͬͱ;͞Θ͍͠Ϛʔ Ϋ͕͋Ε͹ͦͪΒΛ࢖͏ɻ ʮϢʔβʔʯ͕ݱࡏͷϖʔδ͔ΒผͷϖʔδʹʮਐΉʯɻͨͩͦ͠ͷϦϯΫʹ ΋ͬͱ;͞Θ͍͠ϚʔΫ͕͋Ε͹ͦͪΒΛ࢖͏ɻ