2024-04-17

開発チーム一致団結のユーザビリティテストで感情が動く体験をつくる

Design Engineering

こんにちは！

プロダクトマネージャーのじょー（@jouykw）です。

みなさん、プロダクトづくりにおいて「ユーザビリティテスト」をどのように活用され、どんな印象を持たれていますか？

開発中の機能をユーザーにテスト環境で触ってもらい、体験上詰まるポイントがないかのネガティブチェックをする工程という印象をお持ちだったりしないでしょうか？（まさに私がそうでした）

先日、家計簿プリカB/43 (ビーヨンサン) からお金の使いすぎを防ぐ家計管理サポート機能をリリースしました。この新機能の体験において、非常に評判が良いポイントとして、下記があります。

ある日の支出が増えている際にどこで買い物をしたのかがグラフ上でパッとわかる
使いすぎ傾向や予算をオーバーした際に「お金」や「炎」の絵文字が飛んでポップに状態をお知らせしてくれる

実はこれらは、実際の支出データを使ったリアルなユーザビリティテストなしには生まれなかった、素敵な体験です。

ユーザビリティテストは、開発チーム皆を巻き込みながらうまく活用できれば、体験上の課題点を取り除くネガティブチェックだけではなく、ユーザーの感情がオッと動くような体験づくりにまで寄与できるプロセスなのではないか…？

ということで、本ブログではスマートバンクで実践しているユーザビリティテストの進め方をご紹介しつつ、より良い体験をつくるためのユーザビリティテストの活かし方について皆さんと探っていければと思います！

💡スマートバンクのユーザビリティテストの進め方については、別記事でも詳しくまとめていますので、是非そちらもご覧ください

本記事ではユーザビリティテストから得られた示唆をどうプロダクトの改善に活かすか？にフォーカスします

blog.smartbank.co.jp

smartbank.co.jp

ユーザビリティテストをなぜやるのか？

主題に入る前に、ユーザビリティテストとは何か？そもそもやるべきなのか？という前提から認識合わせをしたいと思います。

ユーザビリティテストとは？

ユーザビリティテストとは何か？という点については、下記のブログがよくまとまっていたので是非こちらを参照ください。

blog.nijibox.jp blog.nijibox.jp

要点だけかいつまむと、国際標準化機構の定義を引用すれば「ユーザビリティ」とは下記であり、

－ISO 9241-11

ユーザビリティ：ある製品が、指定された利用者によって、指定された利用の状況下で、指定された目標を達成するために利用される際の有効さ・効率・満足度の度合い。

したがって、ユーザビリティテストとは、新たに作られた製品・機能について、下記の３観点をチェックするようなテストのことだと言えそうです。

有効さ：ユーザーが指定された目標を達成する上での正確さと完全さ

効率：ユーザーが目標を達成する際に正確さと完全さに費やした資源

満足度：製品を使用する際、不快さのないこと、および肯定的態度

では、ユーザビリティテストはどういう時になぜ行うのでしょうか？

どんなときになぜやるべきか？

大前提、ユーザビリティテストは必ず実施すべきものではない と私は考えています。

ユーザビリティテストは社内外含めて多くの人々の時間をかける活動になるので、その工数に見合うようなリターンが見込めるケースにのみやるべきだと考えています。

ではそれはどのようなケースかというと、上記の３観点のいずれかで大きな不確実性が生じるようなケース、すなわち一言で言えば「プロダクトにとって全く新しい体験追加・変更があり、ユーザーがうまく使いこなし満足してくれるかの不確実性が大きい」場合だと考えます。

裏を返すと、小さな変更やユーザー体験がシンプルで不確実性が少ないケースでは、ユーザビリティテストは行わず、QAで済ませてしまっても良い、あるいは望ましいかと思います。

スマートバンクの場合は、直近のリリースのような、新しい体験を伴うメジャーローンチの場合は、ユーザビリティテストの実施を強く推奨するというガイドラインで進めています。

今回実施を判断した理由

今回の「お金の使いすぎを防ぐ家計管理サポート機能」については、B/43 におけるメインタブの一つの体験を大きく変える新機能であり、かつ「月中に未然に使いすぎをうまく防げず、翌月使いすぎていることを後悔する」という未解決のユーザー課題をうまく解くために、従来あまり見かけない新しい体験・UI を作ろうとしたため、ユーザーがどのような反応をするか実物を触ってもらわないことには読みきれず、不確実性が高いと判断してユーザビリティテストを実施しました。

（※もちろん仕様確定・実装前にモックアップを使ったコンセプトテストなどは行い、事前に不確実性は可能な限り潰そうとしています）

実データを使わないと本当の体験は検証できない

実際の支出データを準備した背景

今回のユーザビリティテストでは、被験者の実アカウントでログインできるように手配し、自身の実際の支出データをもとにリアルに使い勝手を体験できるような形で検証を行いました。

というのも、Figma で作ったモックアップでユーザーの方にコンセプトテストを行っている段階で、どう頑張っても自分のリアルな支出データでないと実際の行動イメージが湧かず課題ポイントの発見が難しそうという印象を受けていたからです。

今回の新機能では、自身の前月の支出傾向に対して、今月の支出が使いすぎの傾向になっているかどうか？をリアルタイムに判断できるような体験をつくろうとしていました。

ところが、自分の実際の支出データではないモックアップでこれを見た場合に、今が使いすぎであると言われてもそれが自身の実際の支出行動に紐づいていなかったり、使いすぎの目安となる前月の支出に対して身に覚えがない形になります。そのため、実際に自分だったらその状況でどのような思考や行動をするか？をリアルに再現できないという困った事象が起きていました。

このような反応を踏まえ、リサーチに協力いただく方の実際の B/43 での支出データをもとにユーザビリティテストができるようにチームで準備を進めました。

実施の体制と進め方

大まかな実施メンバー構成、実施手順は下記の流れで行いました。

<メンバー構成>

<実施手順>

Step1：サーバーサイド側でユーザビリティテストを実施したい機能周りを実装しデプロイ
Step2：モバイルアプリ側ではその機能を実装したバージョンの本番環境アプリを下記の公式のテストツールを利用してクローズドに配布可能に
- iOS：TestFlight
- Android：Firebase App Distribution
Step3：社内でユーザビリティテストに協力してくれる人を募る
Step4：ユーザビリティテストの種別毎に実際の支出データで新機能を触れる状態のアプリを準備
- 対面観察：テスト端末に新機能ありバージョンのアプリを準備し、各ユーザー毎にログイン頂く
- 簡易日記調査：各ユーザーの端末から新機能ありバージョンのアプリをダウンロード頂く
Step5：ユーザビリティテストの実査！
- 対面観察：オフィスにて実際にアプリを触っているところを対面で観察 & インタビュー
- 簡易日記調査：2週間ほど日常の中でアプリを使ってもらい気づいたことを起票

これにより、ユーザビリティテストに参加してくださる方がご自身の実際の支出データをもとに、リアルな利用行動をしてくれるようになりました！

実査では、PMやリサーチャーがメインでモデレーターを進めつつ、開発に関わるチーム全員が実査の状況を任意参加で閲覧できるようになっており、実際に作ったものをユーザーがどのように利用するのか？どんな反応を示してくれるのか？をチームみんなで目の当たりにしながら、ユーザビリティ観点での課題を明らかにしていきます。

フィードバックを体験改善にどう活かすか？

フィードバックと対応方針の棚卸

ユーザビリティテストを通じて集められた体験上の課題やフィードバックは、下記のように１つの Notion DB に集約していき、今回のリリーススコープにおける対応要否や対応方針を棚卸していきました。

対応要否：本リリーススコープで修正対応するか？（Must / Want / Don’t）
対応優先度：どの程度ユーザー体験上でクリティカルな課題か？（High / Middle / Low）
対応内容：そのユーザー課題 / フィードバック内容を受けどのような改善をすべきか？

このタイミングでの対応要否や対応方針は、開発に携わるPM・デザイナー・エンジニアが一体となって議論し決めるのがミソだと感じています。というのも、このユーザビリティテストを実施するのは開発も終盤でリリースターゲットが近づいてきている時期である為、対応するかしないか？また対応方針も松竹梅どれでいくべきか？を、プロジェクトマネジメントにおける QCDS のトレードオフを意識しながらスピーディに決定する必要があるからです。

一度集まった課題やフィードバックを眺めながら、PMの方で対応要否や対応優先度の原案を記載し、チーム全員を集めて、ガッとその原案に対してのレビューやブラッシュアップ案を議論して方針を決めていきます。

今回発見された最重要課題

当初実装したアプリをユーザーに使ってもらっている中で、

支出額が跳ねた日に何でそれが生じたのか？が知りたいがそれを見つけにくい
使いすぎ傾向になった際に、単にアラートされるだけだと少し暗い気持ちになっちゃうかも？

といった事象やフィードバックが複数人から得られ、再現性を持って生じそうなことがわかりました。

これらは今回解決したいユーザー課題に対するコアな体験価値の部分であった為、リリースまでにブラッシュアップをかけたいねとチームで話し合いました。

みんなで「フック」のある体験を目指す

感情を動かす「フック」のある体験

スマートバンクでは、プロダクトづくりをする上で大事にしたいデザイン原則をいくつか整理しており、その中の一つに「フックを作る」という原則があります。

「フックを作る」

スマートバンクでは、フックとなる仕掛けを作り出すことを大切にします。情報が溢れる現代においては、より印象的で伝わりやすいメッセージを発信することが求められます。そのために目的と情報と表現が合致しており、なおかつ感情を動かすエモーショナルなデザインやシェアしたくなるような仕掛けを考えましょう。

したがって、ユーザビリティテストで発見された課題の解決策を考えるのと並行して、このタイミングであらためてコア体験をより「フック」のある、感情を動かすような体験にするためにブラッシュアップできる点がないか？ということを、チームの皆さんを巻き込み下記のように問いかけ、解決策の方向性を議論しました。

なにか物足りないところはないだろうか？
本質的な Aha! モーメントはどこだろうか？
感動して人に話すとしたらどこの体験をどう伝えるか？
体験をもっとエモくするとしたら何ができるか？

みんなでアイデアを考える

ユーザビリティテストで発見された課題や、「フック」のある体験にするための改善策を考えるこのフェイズでは、デザイナーやエンジニアの皆さんを巻き込み一緒にアイデアを考えるというのが大切だと考えています。

その理由は、実際の打ち手を考えるところはデザイナーやエンジニアの皆さんのクリエイティビティ、既存のプロダクト設計やエンジニアリングの知識を最大限活かした方が良いものができると信じているからです。

私が好きなブログに、PMは「クイズ番組の司会者」であるべきという下記のブログがあります。こちらに記載の内容が、プロダクトづくりにおいてPMが担うべき役割についての私のスタンスに近い考えを述べてくれています。

PMは課題を発見し、関係者間で認識を揃え、解くべき優先度を決めるところにメインで責任を持ちつつ、実際の解決策を考えるところは皆さんと一緒に取り組む方が良いものに辿り着けるというのがその主張です。(もちろんPMも解決策のアイデアは考えます。それを最初から伝え不要なバイアスにしすぎないように配慮するという意図です)

note.com

文中から引用：

PdMは司会者として、課題と徹底的に向き合うことをやるべきなので、まずは良い課題を探してきて優先度の高い順番でプロダクトチームに提供するということに集中すべきだと思っています。

そして、PdMがクイズの司会者に集中し、エンジニア、デザイナーが回答者に集中できている環境が、プロダクトチームが最もパフォーマンスを発揮できる状態だと思ってます。

今回の新機能においても、オフィスでデザイナーやエンジニアの皆さんを巻き込んで、どうやったら先述のようなユーザビリティ上の課題を上手く解き、さらには「フック」のある体験を作り上げられるか？を幾つかの Option を出しながら、様々な制約を加味しつつどの方針が最も良い打ち手の落とし所になりそうかを議論していきました。

一致団結で出した実際のアイデア

こんな感じになったらいいんじゃないか？をホワイトボードで書いてイメージを擦り合わせながら、PM・デザイナー・エンジニアの複数の観点からインタラクティブに議論をすることで、元々は見えていなかったより良い体験をつくりあげていく作業はとても盛り上がり、かつ結果としても良いものに仕上がったように思います。

結果として、

各日次で支払ったお店の名前が支出ペースグラフを触っている際に表示されれば、ユーザーが何が理由で支出が増えたかを直感的に把握し納得できるのではないか？
使いすぎ傾向になったり予算オーバーしてしまったタイミングで、お金や炎が舞ってしまうような楽しいマイクロインタラクションがあると、ネガティブな気持ちになりすぎずにかつ「フック」のある体験になるのではないか？

という素敵なアイデアが出てきました。

以上のように、開発チーム全員を巻き込んでのユーザビリティテストや改善を経てリリースされた今回の新機能に対する反応は、今のところ非常にポジティブなもので、チーム一同最後の最後まで粘って頑張った甲斐がありました、、、、！やったね！

素敵なリニューアル！これはアプリを開くのが楽しみになりそう👏 https://t.co/gSvq6kCA2o
— aiconnor🫧 (@aiconnor_design) 2024年3月27日

B/43の新機能良すぎる
— ばなまる (@LhUvfe) 2024年3月27日

B43神アプデ？
— もーりす🔰 (@monsoon_214) 2024年3月27日

おわりに

改めて開発チーム全員を巻き込みユーザビリティテストを行うメリットをまとめると、下記に集約できます。

実データを用いたリアル環境でのユーザビリティテストにより、実際のユーザー体験を通じた課題発見がしやすくなる
開発チームメンバーの各人がユーザーの実際の反応を念頭におきながら、課題解決や「フック」のある体験に向けた打ち手を一緒に考えられるようになる

ユーザビリティテストは、開発チーム一致団結しながらうまく活用することで、「仕様通りにつくることがゴール」を超えて、「本来提供したいベストでフックのあるユーザー体験をつくることがゴール」であるようにチームを導く可能性を秘めたプロセスなのではないでしょうか？

私たちのやり方以外にも、ユーザビリティテストを通じてより良い体験、そして感情が動くような「フック」のある体験をつくるやり方はきっと沢山あるかと思いますので、他社さんでどのようにやられているかも是非聞かせてください！

告知

本ブログのユーザビリティテストの話も含めて、直近リリースした新機能開発の舞台裏を語るトークイベントを

2024/04/18(木)夜19:00-

にてオンライン開催します！

エンジニア・デザイナー・PM・リサーチャー、その他プロダクトづくりに携わる方々に学びがある会に出来ればと思っておりますので、興味がある方は是非ご参加ください！

（本ブログの内容周りはトークセッションにて haroka さん, kaneko さんを中心にトーク予定です）

smartbank.connpass.com

またスマートバンクでは全方位で積極採用中です！特にユーザー体験をつくるプロダクトデザイナー、モバイルエンジニアが全く足りていないので是非助けてください、、、！一緒に人々が本当に欲しかったものをつくりましょう！ smartbank.co.jp

最新記事

カテゴリー

月別アーカイブ

▼ ▶
2024
- 2024 / 12
- 2024 / 11
- 2024 / 10
- 2024 / 9
- 2024 / 8
- 2024 / 7
- 2024 / 6
- 2024 / 5
- 2024 / 4
- 2024 / 3
- 2024 / 2
- 2024 / 1
▼ ▶
2023
- 2023 / 12
- 2023 / 11
- 2023 / 10
- 2023 / 9
- 2023 / 8
- 2023 / 7
- 2023 / 6
- 2023 / 5
- 2023 / 4
- 2023 / 3
- 2023 / 2
- 2023 / 1
▼ ▶
2022
- 2022 / 12
- 2022 / 11
- 2022 / 10
- 2022 / 9
- 2022 / 8
- 2022 / 7
- 2022 / 6
- 2022 / 5
- 2022 / 4
- 2022 / 3
- 2022 / 2
- 2022 / 1
▼ ▶
2021

はてなブログで購読

id:smartbank はてなブログ for DevBlog

このブログについて

${stack}

${diagnostic.hints.map((hint)=>"

\uD83D\uDCA1 " + hint + "

").join("")}

${diagnostic.documentation ? `

📝 Learn more

` : ""}

`; } errorHTML += "

"; overlay.innerHTML = errorHTML; return overlay; } function fullReload() { if ("reload" in location) location.reload(); else if (extCtx && extCtx.runtime && extCtx.runtime.reload) extCtx.runtime.reload(); } function getParents(bundle, id) /*: Array<[ParcelRequire, string]> */ { var modules = bundle.modules; if (!modules) return []; var parents = []; var k, d, dep; for(k in modules)for(d in modules[k][1]){ dep = modules[k][1][d]; if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) parents.push([ bundle, k ]); } if (bundle.parent) parents = parents.concat(getParents(bundle.parent, id)); return parents; } function updateLink(link) { var newLink = link.cloneNode(); newLink.onload = function() { if (link.parentNode !== null) // $FlowFixMe link.parentNode.removeChild(link); }; newLink.setAttribute("href", link.getAttribute("href").split("?")[0] + "?" + Date.now()); // $FlowFixMe link.parentNode.insertBefore(newLink, link.nextSibling); } var cssTimeout = null; function reloadCSS() { if (cssTimeout) return; cssTimeout = setTimeout(function() { var links = document.querySelectorAll('link[rel="stylesheet"]'); for(var i = 0; i < links.length; i++){ // $FlowFixMe[incompatible-type] var href = links[i].getAttribute("href"); var hostname = getHostname(); var servedFromHMRServer = hostname === "localhost" ? new RegExp("^(https?:\\/\\/(0.0.0.0|127.0.0.1)|localhost):" + getPort()).test(href) : href.indexOf(hostname + ":" + getPort()); var absolute = /^https?:\/\//i.test(href) && href.indexOf(location.origin) !== 0 && !servedFromHMRServer; if (!absolute) updateLink(links[i]); } cssTimeout = null; }, 50); } function hmrDownload(asset) { if (asset.type === "js") { if (typeof document !== "undefined") { let script = document.createElement("script"); script.src = asset.url + "?t=" + Date.now(); if (asset.outputFormat === "esmodule") script.type = "module"; return new Promise((resolve, reject)=>{ var _document$head; script.onload = ()=>resolve(script); script.onerror = reject; (_document$head = document.head) === null || _document$head === void 0 || _document$head.appendChild(script); }); } else if (typeof importScripts === "function") { // Worker scripts if (asset.outputFormat === "esmodule") return import(asset.url + "?t=" + Date.now()); else return new Promise((resolve, reject)=>{ try { importScripts(asset.url + "?t=" + Date.now()); resolve(); } catch (err) { reject(err); } }); } } } async function hmrApplyUpdates(assets) { global.parcelHotUpdate = Object.create(null); let scriptsToRemove; try { // If sourceURL comments aren't supported in eval, we need to load // the update from the dev server over HTTP so that stack traces // are correct in errors/logs. This is much slower than eval, so // we only do it if needed (currently just Safari). // https://bugs.webkit.org/show_bug.cgi?id=137297 // This path is also taken if a CSP disallows eval. if (!supportsSourceURL) { let promises = assets.map((asset)=>{ var _hmrDownload; return (_hmrDownload = hmrDownload(asset)) === null || _hmrDownload === void 0 ? void 0 : _hmrDownload.catch((err)=>{ // Web extension bugfix for Chromium // https://bugs.chromium.org/p/chromium/issues/detail?id=1255412#c12 if (extCtx && extCtx.runtime && extCtx.runtime.getManifest().manifest_version == 3) { if (typeof ServiceWorkerGlobalScope != "undefined" && global instanceof ServiceWorkerGlobalScope) { extCtx.runtime.reload(); return; } asset.url = extCtx.runtime.getURL("/__parcel_hmr_proxy__?url=" + encodeURIComponent(asset.url + "?t=" + Date.now())); return hmrDownload(asset); } throw err; }); }); scriptsToRemove = await Promise.all(promises); } assets.forEach(function(asset) { hmrApply(module.bundle.root, asset); }); } finally{ delete global.parcelHotUpdate; if (scriptsToRemove) scriptsToRemove.forEach((script)=>{ if (script) { var _document$head2; (_document$head2 = document.head) === null || _document$head2 === void 0 || _document$head2.removeChild(script); } }); } } function hmrApply(bundle, asset) { var modules = bundle.modules; if (!modules) return; if (asset.type === "css") reloadCSS(); else if (asset.type === "js") { let deps = asset.depsByBundle[bundle.HMR_BUNDLE_ID]; if (deps) { if (modules[asset.id]) { // Remove dependencies that are removed and will become orphaned. // This is necessary so that if the asset is added back again, the cache is gone, and we prevent a full page reload. let oldDeps = modules[asset.id][1]; for(let dep in oldDeps)if (!deps[dep] || deps[dep] !== oldDeps[dep]) { let id = oldDeps[dep]; let parents = getParents(module.bundle.root, id); if (parents.length === 1) hmrDelete(module.bundle.root, id); } } if (supportsSourceURL) // Global eval. We would use `new Function` here but browser // support for source maps is better with eval. (0, eval)(asset.output); // $FlowFixMe let fn = global.parcelHotUpdate[asset.id]; modules[asset.id] = [ fn, deps ]; } else if (bundle.parent) hmrApply(bundle.parent, asset); } } function hmrDelete(bundle, id1) { let modules = bundle.modules; if (!modules) return; if (modules[id1]) { // Collect dependencies that will become orphaned when this module is deleted. let deps = modules[id1][1]; let orphans = []; for(let dep in deps){ let parents = getParents(module.bundle.root, deps[dep]); if (parents.length === 1) orphans.push(deps[dep]); } // Delete the module. This must be done before deleting dependencies in case of circular dependencies. delete modules[id1]; delete bundle.cache[id1]; // Now delete the orphans. orphans.forEach((id)=>{ hmrDelete(module.bundle.root, id); }); } else if (bundle.parent) hmrDelete(bundle.parent, id1); } function hmrAcceptCheck(bundle, id, depsByBundle) { if (hmrAcceptCheckOne(bundle, id, depsByBundle)) return true; // Traverse parents breadth first. All possible ancestries must accept the HMR update, or we'll reload. let parents = getParents(module.bundle.root, id); let accepted = false; while(parents.length > 0){ let v = parents.shift(); let a = hmrAcceptCheckOne(v[0], v[1], null); if (a) // If this parent accepts, stop traversing upward, but still consider siblings. accepted = true; else { // Otherwise, queue the parents in the next level upward. let p = getParents(module.bundle.root, v[1]); if (p.length === 0) { // If there are no parents, then we've reached an entry without accepting. Reload. accepted = false; break; } parents.push(...p); } } return accepted; } function hmrAcceptCheckOne(bundle, id, depsByBundle) { var modules = bundle.modules; if (!modules) return; if (depsByBundle && !depsByBundle[bundle.HMR_BUNDLE_ID]) { // If we reached the root bundle without finding where the asset should go, // there's nothing to do. Mark as "accepted" so we don't reload the page. if (!bundle.parent) return true; return hmrAcceptCheck(bundle.parent, id, depsByBundle); } if (checkedAssets[id]) return true; checkedAssets[id] = true; var cached = bundle.cache[id]; assetsToAccept.push([ bundle, id ]); if (!cached || cached.hot && cached.hot._acceptCallbacks.length) return true; } function hmrAcceptRun(bundle, id) { var cached = bundle.cache[id]; bundle.hotData = {}; if (cached && cached.hot) cached.hot.data = bundle.hotData; if (cached && cached.hot && cached.hot._disposeCallbacks.length) cached.hot._disposeCallbacks.forEach(function(cb) { cb(bundle.hotData); }); delete bundle.cache[id]; bundle(id); cached = bundle.cache[id]; if (cached && cached.hot && cached.hot._acceptCallbacks.length) cached.hot._acceptCallbacks.forEach(function(cb) { var assetsToAlsoAccept = cb(function() { return getParents(module.bundle.root, id); }); if (assetsToAlsoAccept && assetsToAccept.length) // $FlowFixMe[method-unbinding] assetsToAccept.push.apply(assetsToAccept, assetsToAlsoAccept); }); acceptedAssets[id] = true; } },{}],"cxc0x":[function(require,module,exports) { var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); var _micromodal = require("micromodal"); var _micromodalDefault = parcelHelpers.interopDefault(_micromodal); const changeThemeColor = (cssVariableName)=>{ document.querySelector('meta[name="theme-color"]').setAttribute("content", getComputedStyle(document.documentElement).getPropertyValue(cssVariableName)); }; (0, _micromodalDefault.default).init({ awaitOpenAnimation: true, awaitCloseAnimation: true }); // compact navigation (0, _micromodalDefault.default).init({ onShow: ()=>changeThemeColor("--graph-100"), onClose: ()=>changeThemeColor("--inSmartBank-dsky"), openTrigger: "data-micromodal-trigger-disable-focus", closeTrigger: "data-micromodal-close-disable-focus", disableFocus: true, awaitOpenAnimation: true, awaitCloseAnimation: true }); },{"micromodal":"1OWV1","@parcel/transformer-js/src/esmodule-helpers.js":"j7FRh"}],"1OWV1":[function(require,module,exports) { var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); parcelHelpers.defineInteropFlag(exports); function e(e1, t1) { for(var o1 = 0; o1 < t1.length; o1++){ var n1 = t1[o1]; n1.enumerable = n1.enumerable || !1, n1.configurable = !0, "value" in n1 && (n1.writable = !0), Object.defineProperty(e1, n1.key, n1); } } function t(e2) { return function(e3) { if (Array.isArray(e3)) return o(e3); }(e2) || function(e4) { if ("undefined" != typeof Symbol && Symbol.iterator in Object(e4)) return Array.from(e4); }(e2) || function(e5, t2) { if (!e5) return; if ("string" == typeof e5) return o(e5, t2); var n2 = Object.prototype.toString.call(e5).slice(8, -1); "Object" === n2 && e5.constructor && (n2 = e5.constructor.name); if ("Map" === n2 || "Set" === n2) return Array.from(e5); if ("Arguments" === n2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n2)) return o(e5, t2); }(e2) || function() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }(); } function o(e6, t3) { (null == t3 || t3 > e6.length) && (t3 = e6.length); for(var o2 = 0, n3 = new Array(t3); o2 < t3; o2++)n3[o2] = e6[o2]; return n3; } var n, i, a, r, s, l = (n = [ "a[href]", "area[href]", 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', "select:not([disabled]):not([aria-hidden])", "textarea:not([disabled]):not([aria-hidden])", "button:not([disabled]):not([aria-hidden])", "iframe", "object", "embed", "[contenteditable]", '[tabindex]:not([tabindex^="-"])' ], i = function() { function o3(e7) { var n4 = e7.targetModal, i2 = e7.triggers, a2 = void 0 === i2 ? [] : i2, r2 = e7.onShow, s1 = void 0 === r2 ? function() {} : r2, l1 = e7.onClose, c = void 0 === l1 ? function() {} : l1, d = e7.openTrigger, u = void 0 === d ? "data-micromodal-trigger" : d, f = e7.closeTrigger, h = void 0 === f ? "data-micromodal-close" : f, v = e7.openClass, g = void 0 === v ? "is-open" : v, m = e7.disableScroll, b = void 0 !== m && m, y = e7.disableFocus, p = void 0 !== y && y, w = e7.awaitCloseAnimation, E = void 0 !== w && w, k = e7.awaitOpenAnimation, M = void 0 !== k && k, A = e7.debugMode, C = void 0 !== A && A; !function(e8, t4) { if (!(e8 instanceof t4)) throw new TypeError("Cannot call a class as a function"); }(this, o3), this.modal = document.getElementById(n4), this.config = { debugMode: C, disableScroll: b, openTrigger: u, closeTrigger: h, openClass: g, onShow: s1, onClose: c, awaitCloseAnimation: E, awaitOpenAnimation: M, disableFocus: p }, a2.length > 0 && this.registerTriggers.apply(this, t(a2)), this.onClick = this.onClick.bind(this), this.onKeydown = this.onKeydown.bind(this); } var i1, a1, r1; return i1 = o3, a1 = [ { key: "registerTriggers", value: function() { for(var e9 = this, t5 = arguments.length, o4 = new Array(t5), n5 = 0; n5 < t5; n5++)o4[n5] = arguments[n5]; o4.filter(Boolean).forEach(function(t6) { t6.addEventListener("click", function(t7) { return e9.showModal(t7); }); }); } }, { key: "showModal", value: function() { var e10 = this, t8 = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null; if (this.activeElement = document.activeElement, this.modal.setAttribute("aria-hidden", "false"), this.modal.classList.add(this.config.openClass), this.scrollBehaviour("disable"), this.addEventListeners(), this.config.awaitOpenAnimation) { var o5 = function t9() { e10.modal.removeEventListener("animationend", t9, !1), e10.setFocusToFirstNode(); }; this.modal.addEventListener("animationend", o5, !1); } else this.setFocusToFirstNode(); this.config.onShow(this.modal, this.activeElement, t8); } }, { key: "closeModal", value: function() { var e11 = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, t10 = this.modal; if (this.modal.setAttribute("aria-hidden", "true"), this.removeEventListeners(), this.scrollBehaviour("enable"), this.activeElement && this.activeElement.focus && this.activeElement.focus(), this.config.onClose(this.modal, this.activeElement, e11), this.config.awaitCloseAnimation) { var o6 = this.config.openClass; this.modal.addEventListener("animationend", function e12() { t10.classList.remove(o6), t10.removeEventListener("animationend", e12, !1); }, !1); } else t10.classList.remove(this.config.openClass); } }, { key: "closeModalById", value: function(e13) { this.modal = document.getElementById(e13), this.modal && this.closeModal(); } }, { key: "scrollBehaviour", value: function(e14) { if (this.config.disableScroll) { var t11 = document.querySelector("body"); switch(e14){ case "enable": Object.assign(t11.style, { overflow: "" }); break; case "disable": Object.assign(t11.style, { overflow: "hidden" }); } } } }, { key: "addEventListeners", value: function() { this.modal.addEventListener("touchstart", this.onClick), this.modal.addEventListener("click", this.onClick), document.addEventListener("keydown", this.onKeydown); } }, { key: "removeEventListeners", value: function() { this.modal.removeEventListener("touchstart", this.onClick), this.modal.removeEventListener("click", this.onClick), document.removeEventListener("keydown", this.onKeydown); } }, { key: "onClick", value: function(e15) { (e15.target.hasAttribute(this.config.closeTrigger) || e15.target.parentNode.hasAttribute(this.config.closeTrigger)) && (e15.preventDefault(), e15.stopPropagation(), this.closeModal(e15)); } }, { key: "onKeydown", value: function(e16) { 27 === e16.keyCode && this.closeModal(e16), 9 === e16.keyCode && this.retainFocus(e16); } }, { key: "getFocusableNodes", value: function() { var e17 = this.modal.querySelectorAll(n); return Array.apply(void 0, t(e17)); } }, { key: "setFocusToFirstNode", value: function() { var e18 = this; if (!this.config.disableFocus) { var t12 = this.getFocusableNodes(); if (0 !== t12.length) { var o7 = t12.filter(function(t13) { return !t13.hasAttribute(e18.config.closeTrigger); }); o7.length > 0 && o7[0].focus(), 0 === o7.length && t12[0].focus(); } } } }, { key: "retainFocus", value: function(e19) { var t14 = this.getFocusableNodes(); if (0 !== t14.length) { if (t14 = t14.filter(function(e20) { return null !== e20.offsetParent; }), this.modal.contains(document.activeElement)) { var o8 = t14.indexOf(document.activeElement); e19.shiftKey && 0 === o8 && (t14[t14.length - 1].focus(), e19.preventDefault()), !e19.shiftKey && t14.length > 0 && o8 === t14.length - 1 && (t14[0].focus(), e19.preventDefault()); } else t14[0].focus(); } } } ], e(i1.prototype, a1), r1 && e(i1, r1), o3; }(), a = null, r = function(e21) { if (!document.getElementById(e21)) return console.warn("MicroModal: \u2757Seems like you have missed %c'".concat(e21, "'"), "background-color: #f8f9fa;color: #50596c;font-weight: bold;", "ID somewhere in your code. Refer example below to resolve it."), console.warn("%cExample:", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", '')), !1; }, s = function(e22, t15) { if (function(e23) { e23.length <= 0 && (console.warn("MicroModal: \u2757Please specify at least one %c'micromodal-trigger'", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", "data attribute."), console.warn("%cExample:", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", '')); }(e22), !t15) return !0; for(var o9 in t15)r(o9); return !0; }, { init: function(e24) { var o10 = Object.assign({}, { openTrigger: "data-micromodal-trigger" }, e24), n6 = t(document.querySelectorAll("[".concat(o10.openTrigger, "]"))), r3 = function(e25, t16) { var o11 = []; return e25.forEach(function(e26) { var n7 = e26.attributes[t16].value; void 0 === o11[n7] && (o11[n7] = []), o11[n7].push(e26); }), o11; }(n6, o10.openTrigger); if (!0 !== o10.debugMode || !1 !== s(n6, r3)) for(var l2 in r3){ var c = r3[l2]; o10.targetModal = l2, o10.triggers = t(c), a = new i(o10); } }, show: function(e27, t17) { var o12 = t17 || {}; o12.targetModal = e27, !0 === o12.debugMode && !1 === r(e27) || (a && a.removeEventListeners(), (a = new i(o12)).showModal()); }, close: function(e28) { e28 ? a.closeModalById(e28) : a.closeModal(); } }); "undefined" != typeof window && (window.MicroModal = l); exports.default = l; },{"@parcel/transformer-js/src/esmodule-helpers.js":"j7FRh"}],"j7FRh":[function(require,module,exports) { exports.interopDefault = function(a) { return a && a.__esModule ? a : { default: a }; }; exports.defineInteropFlag = function(a) { Object.defineProperty(a, "__esModule", { value: true }); }; exports.exportAll = function(source, dest) { Object.keys(source).forEach(function(key) { if (key === "default" || key === "__esModule" || dest.hasOwnProperty(key)) return; Object.defineProperty(dest, key, { enumerable: true, get: function() { return source[key]; } }); }); return dest; }; exports.export = function(dest, destName, get) { Object.defineProperty(dest, destName, { enumerable: true, get: get }); }; },{}]},["cwTCW","cxc0x"], "cxc0x", "parcelRequire94c2")