管理画面で複雑なフィルタ機能をシンプルに表現する方法

by haguri

Slide 1

Slide 1 text

複雑なフィルタ機能をシンプルに表現する

Slide 2

Slide 2 text

葉栗雄貴 haguri yuki デザイナー 2015/04 空間系のデザイン事務所勤務 2017/04 スマートキャンプにエンジニアとして入社 2020/06 デザイナー専任に

Slide 3

Slide 3 text

今回はこんな話をします複雑になりがちなフィルタ機能をなるべくシンプルに表現できるようにデザイナーとして試行錯誤したこと

Slide 4

Slide 4 text

こんな流れで話をしますスマートキャンプの紹介対象サービスの紹介フィルタ機能の課題と解決方法

Slide 5

Slide 5 text

Small Company, Big Business. テクノロジーで社会の非効率を無くす Vision Mission

Slide 6

Slide 6 text

ボクシルベイルズオンライン展示会 SaaSプラットフォーム SaaS情報Webメディアインサイドセールス代行インサイドセールス向けSaaS SaaSマッチングインサイドセールス

Slide 7

Slide 7 text

Slide 8

Slide 8 text

見込み顧客（リード）と商談が増えるインサイドセールス向けSaaS

Slide 9

Slide 9 text

こんな流れで話をしますスマートキャンプの紹介対象サービスの紹介フィルタ機能の課題と解決方法

Slide 10

Slide 10 text

セールスセールスセールスセールスインサイドセールスとは?

Slide 11

Slide 11 text

マーケティングインサイドセールスフィールドセールスカスタマーサクセスインサイドセールスとは?

Slide 12

Slide 12 text

マーケティングインサイドセールスフィールドセールスカスタマーサクセスインサイドセールスとは?

Slide 13

Slide 13 text

BALES CLOUDとはリード見込み顧客メール mail 課題は？予算は？時期は？ phone 電話商談

Slide 14

Slide 14 text

BALES CLOUDとはリード見込み顧客メール mail 課題は？予算は？時期は？ phone 電話商談フィルタをかける商談

Slide 15

Slide 15 text

数百、数千名のリード情報が入っています

Slide 16

Slide 16 text

200名以上の会社 + 経理部の人 + 〜〜〜な人フィルター数百、数千名のリード情報をグループわけします

Slide 17

Slide 17 text

①すぐ連絡する ②今は放置

Slide 18

Slide 18 text

①はじめて連絡する ③2回以上連絡した ②1回連絡した

Slide 19

Slide 19 text

フィルタリングして、リストとして保存します

Slide 20

Slide 20 text

こんな流れで話をしますスマートキャンプの紹介対象サービスの紹介フィルタ機能の課題と解決方法

Slide 21

Slide 21 text

フィルタの課題

Slide 22

Slide 22 text

フィルタの課題テキスト型セレクト型範囲指定 etc. 項目が多い AND検索?OR検索? 含む?含まない?

Slide 23

Slide 23 text

分岐が多くて複雑になる

Slide 24

Slide 24 text

なぜ複雜になるのかいろいろなユーザーの欲求が凝縮されているから

Slide 25

Slide 25 text

Webサイトどうやってフィルタ機能を表現しているのか管理画面

Slide 26

Slide 26 text

お部屋探し系のサイト ①大項目と小項目を一覧表示 Webサイトの場合

Slide 27

Slide 27 text

服探し系のサイト ②項目ごとにアコーディオン Webサイトの場合

Slide 28

Slide 28 text

Webサイトの場合重要視することどんな項目があるのか一覧表示ユーザーが多いはじめて触るメインユーザー

Slide 29

Slide 29 text

Webサイトどうやってフィルタ機能を表現しているのか管理画面

Slide 30

Slide 30 text

管理画面の場合ユーザーが多い繰り返し触る重要視すること繰り返し行う動作を、効率化するメインユーザー

Slide 31

Slide 31 text

管理画面の場合繰り返し行う動作を、効率化するを色々入れ替える小項目

Slide 32

Slide 32 text

項目とは大項目小項目住所会社名部署東京都スマートキャンプ人事部

Slide 33

Slide 33 text

項目とはなにをどうやって住所会社名部署東京都スマートキャンプ人事部

Slide 34

Slide 34 text

Webサイトの例に戻ると

Slide 35

Slide 35 text

Webサイトの例に戻るとなにをどうやってなにをどうやって

Slide 36

Slide 36 text

管理画面で重要視すること繰り返し行う動作を、効率化するを色々入れ替えるどうやって

Slide 37

Slide 37 text

絞り込むのか絞り込むのか何を何を、どうやってどうやって

Slide 38

Slide 38 text

項目のつながりを切り離すシンプルにするには

Slide 39

Slide 39 text

実際にやったこと

Slide 40

Slide 40 text

実際にやったこと

Slide 41

Slide 41 text

実際にやったこと

Slide 42

Slide 42 text

実際にやったこと

Slide 43

Slide 43 text

実際にやったこと

Slide 44

Slide 44 text

実際にやったこと

Slide 45

Slide 45 text

いろいろなユーザーの欲求が凝縮されているフィルタ機能は...

Slide 46

Slide 46 text

一人ひとりに合わせることは無理だから

Slide 47

Slide 47 text

誰かのメリットは、誰かのデメリットになるそして

Slide 48

Slide 48 text

複雑になる色々な人の欲求を全て考慮する！

Slide 49

Slide 49 text

シンプルになるメインユーザー、重要視することを明確にする

Slide 50

Slide 50 text

Webサイトの場合重要視することメインユーザーどんな項目があるのか一覧表示ユーザーが多いはじめて触る

Slide 51

Slide 51 text

管理画面の場合ユーザーが多い繰り返し触る重要視すること繰り返し行う動作を、効率化するメインユーザー

Slide 52

Slide 52 text

複雑なフィルタ機能をシンプルに表現する