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

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

39705925c89894da174dc2d7a8ebeceb?s=47 haguri
November 27, 2020
Design
0
240

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

複雑になりがちな管理画面のフィルタ機能をできるだけシンプルに表現するために試行錯誤したこと

39705925c89894da174dc2d7a8ebeceb?s=128

haguri

November 27, 2020
Tweet

Other Decks in Design

See All in Design
E8d835dc0f30095a7e9c2a6d712c2291?s=48 oakleybillions
0
660
9105c959cc559664a1c2a506cac28070?s=48 ajanart
0
390
B896d135180958999cd053869215f3f0?s=48 ohtristanart
0
480
C66a4b0ef3d970bfbe5cc00df63804d8?s=48 polverelli
0
140
F126c62320c208faf9abbeda8a6343dc?s=48 transit_kix
2
140
D2a37a665bcb1ff14ddd49771f2427b6?s=48 armrhjm
0
120
40baebcd09b478d3e28b5ba81df2b525?s=48 tiagilles
0
260
E443c97680574e0990e3e5b4184254a2?s=48 aquino
0
220
6d91cf9d7d3eb0954425a0a8aef69bef?s=48 andreh
0
120
2481158a72219f42b701cf0fcef12971?s=48 rvillarreal
0
130
646cdde8ac4c7781450583ec9501b0a3?s=48 smagallanes
0
100
E603f65765a005bb52ac99c17f0eb684?s=48 mokonsco
0
130

Featured

See All Featured
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
260k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
145
19k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
308
17k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.8k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
56
5.4k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
225
8.5k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.8k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
207
10k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
20
2.1k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
39
2.3k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
750
245cee81a9c424266e5e401d844ea881?s=48 lara
590
61k

Transcript

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

  2. 葉 栗 雄 貴 haguri yuki デザイナー 2015/04 空間系のデザイン事務所勤務 2017/04

    スマートキャンプにエンジニアとして入社 2020/06 デザイナー専任に

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

    試行錯誤 したこと

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

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

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

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

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

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

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

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

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

  13. BALES CLOUDとは リード 見込み顧客 メール mail 課題は？ 予算は？ 時期は？ phone

    電話 商 談

  14. BALES CLOUDとは リード 見込み顧客 メール mail 課題は？ 予算は？ 時期は？ phone

    電話 商談 フィルタをかける 商 談

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

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

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

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

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

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

  21. フィルタの課題

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

  23. 分岐が多くて複雑になる

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

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

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

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

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

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

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

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

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

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

  34. Webサイトの例に戻ると

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

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

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

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

  39. 実際にやったこと

  40. 実際にやったこと

  41. 実際にやったこと

  42. 実際にやったこと

  43. 実際にやったこと

  44. 実際にやったこと

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

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

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

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

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

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

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

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