{"id":3872,"date":"2026-10-02T01:16:51","date_gmt":"2026-10-02T01:16:51","guid":{"rendered":"https:\/\/specialskill.id\/article\/?p=3872"},"modified":"2026-10-02T01:16:54","modified_gmt":"2026-10-02T01:16:54","slug":"user-flow-ui-ux","status":"publish","type":"post","link":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/","title":{"rendered":"Dari Klik sampai Checkout: Memahami Alur Pengguna dalam Produk Digital"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Pernahkah kamu membuka sebuah website, menemukan produk yang dicari, lalu bingung harus menekan tombol apa berikutnya? Situasi seperti ini menunjukkan bahwa <em>user flow<\/em> dalam sebuah produk digital belum tentu berjalan dengan baik. Dalam UI\/UX Design, desainer perlu memahami bagaimana pengguna berpindah dari satu langkah ke langkah berikutnya untuk mencapai tujuan tertentu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bayangkan seseorang ingin membeli sepatu melalui sebuah website. Ia mungkin mulai dari halaman utama, mencari produk, membuka detail sepatu, memilih ukuran, memasukkannya ke keranjang, lalu melanjutkan ke pembayaran. Rangkaian langkah tersebut memberikan gambaran tentang bagaimana pengguna berinteraksi dengan produk digital.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Namun, pengalaman pengguna tidak hanya berhenti pada urutan klik tersebut. Pengguna juga bisa menemukan informasi dari media sosial, membaca ulasan, kembali ke website beberapa hari kemudian, hingga akhirnya melakukan pembelian. Karena itu, <em>UI\/UX Designer<\/em> perlu membedakan <em>user flow<\/em> dan <em>user journey<\/em> agar dapat melihat pengalaman pengguna dari sudut pandang yang lebih lengkap.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apa Itu User Flow?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>User flow<\/em> adalah rangkaian langkah yang pengguna lakukan untuk menyelesaikan tugas tertentu dalam sebuah produk digital. Fokusnya cukup spesifik, misalnya membeli produk, membuat akun, mengubah profil, atau melakukan pembayaran.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contohnya, pengguna ingin membeli sebuah laptop melalui website. Alur sederhananya dapat terlihat seperti ini:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Homepage \u2192 Cari produk \u2192 Detail produk \u2192 Tambahkan ke keranjang \u2192 Checkout \u2192 Pembayaran<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/1.-User-Flow-diagram-1024x572-1.webp\" alt=\"Contoh visual alur langkah praktis yang biasa dipakai desainer saat merancang proses checkout website\" class=\"wp-image-3875\" srcset=\"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/1.-User-Flow-diagram-1024x572-1.webp 1024w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/1.-User-Flow-diagram-300x167-1.webp 300w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/1.-User-Flow-diagram-767x428-1.webp 767w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/1.-User-Flow-diagram-1536x857-1.webp 1536w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/1.-User-Flow-diagram-2048x1143-1.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Urutan tersebut membantu desainer melihat jalur yang perlu pengguna lalui untuk menyelesaikan satu tujuan. Desainer juga dapat melihat halaman yang perlu pengguna buka dan tindakan yang perlu mereka lakukan pada setiap tahap.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dalam praktiknya, <em>user flow<\/em> tidak selalu mengikuti satu jalur lurus. Pengguna mungkin kembali ke halaman sebelumnya, mengubah pilihan produk, atau meninggalkan proses sebelum selesai. Karena itu, desainer perlu mempertimbangkan berbagai kemungkinan interaksi ketika pengguna menjalankan sebuah tugas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>User flow<\/em> biasanya cocok untuk tujuan yang spesifik dan berlangsung dalam waktu relatif singkat. Misalnya, proses pendaftaran akun atau pembelian produk. Desainer dapat menggunakan <em>flowchart<\/em>, <em>task diagram<\/em>, atau <em>wireflow<\/em> untuk menggambarkan proses tersebut secara visual.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Lalu, Apa Itu User Journey?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kalau <em>user flow<\/em> melihat langkah pengguna dalam sebuah tugas tertentu, <em>user journey<\/em> melihat pengalaman pengguna dalam cakupan yang lebih luas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>User journey<\/em> menggambarkan perjalanan pengguna ketika mereka berinteraksi dengan sebuah produk atau layanan untuk mencapai tujuan tertentu. Perjalanan tersebut dapat melibatkan berbagai titik interaksi, kanal, serta periode waktu yang lebih panjang. Dalam <a href=\"https:\/\/www.nngroup.com\/articles\/user-journeys-vs-user-flows\/\" rel=\"noopener\" target=\"_blank\">penjelasan Nielsen Norman Group tentang <em>user journeys<\/em> dan <em>user flows<\/em><\/a>, <em>user journey<\/em> memiliki cakupan yang lebih luas karena dapat melihat pengalaman pengguna dari berbagai titik interaksi dan dalam rentang waktu tertentu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contohnya, seseorang ingin membeli sebuah kursus online. Perjalanannya mungkin dimulai ketika ia melihat konten edukasi di media sosial. Setelah tertarik, ia mengunjungi website, membaca informasi kursus, membandingkan pilihan, mencari ulasan, lalu kembali beberapa hari kemudian sebelum akhirnya melakukan pembelian.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pada contoh tersebut, pengalaman pengguna tidak hanya terjadi di dalam website. Media sosial, mesin pencari, email, halaman website, hingga proses pembayaran dapat menjadi bagian dari perjalanan yang sama.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/2.-Diagram-User-Journey-1024x572-1.webp\" alt=\"Garis waktu perjalanan pengguna yang merangkum dari tahap kenal produk, menimbang-nimbang, sampai akhirnya mantap membeli\" class=\"wp-image-3876\" srcset=\"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/2.-Diagram-User-Journey-1024x572-1.webp 1024w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/2.-Diagram-User-Journey-300x167-1.webp 300w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/2.-Diagram-User-Journey-767x428-1.webp 767w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/2.-Diagram-User-Journey-1536x857-1.webp 1536w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/2.-Diagram-User-Journey-2048x1143-1.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>User journey<\/em> juga membantu desainer memahami apa yang pengguna lakukan, pikirkan, dan rasakan pada setiap tahap. Informasi tersebut memberikan konteks yang tidak selalu terlihat ketika desainer hanya melihat urutan interaksi di dalam sebuah aplikasi atau website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Karena cakupannya lebih luas, desainer biasanya menggunakan <em>journey map<\/em> untuk menggambarkan perjalanan tersebut secara visual.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>User Flow dan User Journey Itu Beda<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sekilas, <em>user flow<\/em> dan <em>user journey<\/em> memang terlihat mirip karena keduanya sama-sama membahas perjalanan pengguna. Perbedaannya terletak pada cakupan dan fokus pembahasannya.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/3.-Macro-vs-Micro-Lens-1024x572-1.webp\" alt=\"Perbandingan visual berdampingan antara fokus mikro user flow di dalam aplikasi dan makro user journey yang lintas kanal\" class=\"wp-image-3877\" srcset=\"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/3.-Macro-vs-Micro-Lens-1024x572-1.webp 1024w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/3.-Macro-vs-Micro-Lens-300x167-1.webp 300w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/3.-Macro-vs-Micro-Lens-767x428-1.webp 767w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/3.-Macro-vs-Micro-Lens-1536x857-1.webp 1536w, https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/3.-Macro-vs-Micro-Lens-2048x1143-1.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>User flow<\/em> berfokus pada interaksi yang lebih spesifik di dalam sebuah produk. Sementara itu, <em>user journey<\/em> melihat pengalaman pengguna secara lebih luas, termasuk interaksi yang terjadi di luar produk tersebut.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>User Flow<\/th><th>User Journey<\/th><\/tr><\/thead><tbody><tr><td>Fokus pada satu tugas tertentu<\/td><td>Fokus pada perjalanan pengguna secara keseluruhan<\/td><\/tr><tr><td>Cakupan lebih sempit<\/td><td>Cakupan lebih luas<\/td><\/tr><tr><td>Biasanya terjadi dalam satu produk<\/td><td>Dapat melibatkan beberapa kanal<\/td><\/tr><tr><td>Menunjukkan langkah dan interaksi<\/td><td>Menunjukkan tindakan, kebutuhan, pikiran, dan emosi<\/td><\/tr><tr><td>Cocok untuk melihat proses penggunaan produk<\/td><td>Cocok untuk memahami pengalaman pengguna secara menyeluruh<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Misalnya, proses memilih produk hingga melakukan pembayaran dapat menjadi sebuah <em>user flow<\/em>. Sementara itu, perjalanan seseorang sejak pertama kali mengetahui sebuah brand hingga melakukan pembelian dapat menjadi bagian dari <em>user journey<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dengan memahami perbedaan tersebut, desainer tidak perlu memilih salah satu dan mengabaikan yang lainnya. Keduanya justru dapat saling melengkapi ketika tim ingin memahami pengalaman pengguna secara lebih menyeluruh.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Bagaimana User Flow Berhubungan dengan User Journey?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bayangkan <em>user journey<\/em> sebagai gambaran besar perjalanan pengguna. Di dalam perjalanan tersebut, terdapat berbagai aktivitas yang pengguna lakukan. Beberapa aktivitas tersebut melibatkan interaksi langsung dengan produk digital.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Desainer dapat menggunakan <em>user flow<\/em> untuk melihat salah satu aktivitas tersebut secara lebih detail. Dengan begitu, tim tidak hanya memahami posisi sebuah aktivitas dalam perjalanan pengguna, tetapi juga dapat melihat bagaimana pengguna menjalankan aktivitas tersebut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Misalnya, sebuah <em>user journey<\/em> menunjukkan bahwa pengguna menemukan produk melalui media sosial, mengunjungi website, mencari informasi, dan akhirnya membeli produk. Pada bagian pembelian, desainer dapat membuat alur yang lebih spesifik:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Halaman produk \u2192 Pilih variasi \u2192 Tambah ke keranjang \u2192 Checkout \u2192 Isi data \u2192 Pilih pembayaran \u2192 Selesai<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>User journey<\/em> memberikan konteks mengenai mengapa dan dalam situasi apa pengguna melakukan aktivitas tersebut. Sementara itu, <em>user flow<\/em> membantu desainer memahami bagaimana pengguna menjalankan aktivitas tersebut di dalam produk.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pendekatan ini membuat desainer dapat melihat pengalaman pengguna dari dua sudut pandang. Mereka tidak hanya melihat apakah sebuah fitur dapat digunakan, tetapi juga memahami posisi fitur tersebut dalam keseluruhan perjalanan pengguna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca Juga: <a href=\"https:\/\/specialskill.id\/article\/2025\/03\/08\/tips-desain-ux-cara-mudah-ciptakan-pengalaman-pengguna\/\">Tips Desain UX, Cara Mudah Ciptakan Pengalaman Pengguna yang Nyaman dan Optimal<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kenapa Desainer Perlu Memahami Keduanya?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Memahami <em>user flow<\/em> membantu desainer menemukan bagian dalam produk yang mungkin membuat pengguna kesulitan. Misalnya, pengguna harus melewati terlalu banyak langkah sebelum menyelesaikan pembayaran. Desainer kemudian dapat mengevaluasi apakah setiap langkah memang diperlukan atau justru menambah beban bagi pengguna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sementara itu, <em>user journey<\/em> membantu desainer melihat masalah yang mungkin muncul sebelum atau setelah pengguna berinteraksi dengan produk. Bisa saja proses checkout berjalan dengan baik, tetapi pengguna kesulitan menemukan informasi produk sebelum masuk ke halaman tersebut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dengan melihat keduanya, desainer dapat menghubungkan masalah pada satu titik interaksi dengan pengalaman pengguna yang lebih luas. Cara ini juga membantu tim memahami bahwa masalah pengalaman pengguna tidak selalu muncul dari satu layar atau satu fitur saja.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pendekatan tersebut membantu tim produk berdiskusi dengan konteks yang lebih jelas. Tim dapat membahas masalah secara spesifik melalui <em>user flow<\/em>, lalu menghubungkannya dengan kebutuhan dan pengalaman pengguna melalui <em>user journey<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kapan Sebaiknya Menggunakan User Flow atau User Journey?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kamu dapat menentukan metode yang sesuai berdasarkan masalah yang ingin kamu pahami. Tidak semua kebutuhan desain membutuhkan pemetaan perjalanan pengguna dalam cakupan yang sama.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gunakan <em>user flow<\/em> ketika kamu ingin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>memahami langkah pengguna dalam menyelesaikan tugas tertentu;<\/li>\n\n\n\n<li>melihat alur interaksi di dalam aplikasi atau website;<\/li>\n\n\n\n<li>menemukan langkah yang terlalu rumit;<\/li>\n\n\n\n<li>merancang atau mengevaluasi proses seperti login, registrasi, checkout, atau pengisian formulir.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Sementara itu, gunakan <em>user journey<\/em> ketika kamu ingin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>memahami pengalaman pengguna dari awal hingga akhir;<\/li>\n\n\n\n<li>melihat berbagai titik interaksi dengan produk atau layanan;<\/li>\n\n\n\n<li>memahami kebutuhan, pikiran, dan perasaan pengguna;<\/li>\n\n\n\n<li>menemukan masalah yang muncul di beberapa kanal atau tahapan perjalanan.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dalam proyek tertentu, kamu bahkan dapat menggunakan keduanya. Mulailah dengan melihat perjalanan pengguna secara luas, lalu pilih bagian tertentu yang perlu kamu analisis lebih dalam menggunakan <em>user flow<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Jangan Hanya Melihat Jumlah Klik<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Saat membuat alur pengguna, desainer sebaiknya tidak hanya menghitung berapa banyak klik yang pengguna lakukan. Jumlah langkah memang dapat membantu menemukan proses yang terlalu panjang, tetapi angka tersebut belum cukup untuk menjelaskan kualitas pengalaman pengguna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Desainer juga perlu melihat tujuan pengguna pada setiap tahap. Pertimbangkan apakah pengguna sudah memahami tindakan yang perlu dilakukan dan apakah informasi yang mereka butuhkan tersedia. Perhatikan pula kemudahan ketika pengguna ingin kembali setelah melakukan kesalahan. Selain itu, pastikan sistem memberikan respons yang jelas setelah pengguna melakukan suatu tindakan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pertanyaan tersebut membantu desainer melihat <em>user flow<\/em> dari perspektif pengguna, bukan hanya dari struktur halaman atau fitur yang tersedia. Dengan pendekatan ini, evaluasi desain dapat berfokus pada kebutuhan pengguna dan bukan sekadar jumlah layar atau jumlah klik.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hal yang sama berlaku untuk <em>user journey<\/em>. Jangan hanya mencatat aktivitas pengguna tanpa memahami konteks di balik aktivitas tersebut. Ketika pengguna berhenti pada suatu tahap, misalnya, desainer perlu mencari tahu apakah mereka kehilangan informasi, mengalami kebingungan, atau memang belum siap melanjutkan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dengan cara tersebut, pemetaan alur tidak berhenti sebagai diagram. Hasilnya dapat membantu tim menemukan area yang perlu diperbaiki dalam pengalaman pengguna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Memahami perjalanan pengguna membuat desainer dapat melihat produk digital secara lebih utuh. <em>User flow<\/em> membantu melihat langkah-langkah pengguna ketika menyelesaikan tugas tertentu, sedangkan <em>user journey<\/em> membantu memahami pengalaman pengguna dalam cakupan yang lebih luas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keduanya memiliki fungsi yang berbeda, tetapi dapat saling melengkapi. Ketika desainer memahami hubungan antara keduanya, mereka dapat melihat bukan hanya apa yang pengguna klik, tetapi juga tujuan, kebutuhan, dan konteks yang berada di balik setiap interaksi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pada akhirnya, desain yang baik bukan sekadar membuat pengguna bisa mencapai halaman <em>checkout<\/em>. Desain juga perlu membantu pengguna memahami apa yang harus dilakukan, menemukan informasi yang mereka perlukan, dan menyelesaikan tujuan mereka tanpa kebingungan yang tidak perlu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>User flow membantu UI\/UX Designer memahami langkah yang dilakukan pengguna untuk mencapai tujuan tertentu dalam sebuah produk digital. Artikel ini membahas pengertian user flow, perbedaannya dengan user journey, contoh alur checkout, serta cara menggunakan keduanya untuk memahami pengalaman pengguna secara lebih menyeluruh.<\/p>\n","protected":false},"author":1,"featured_media":3879,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[4],"tags":[236,79,208,234,235,67,136],"class_list":["post-3872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-ux-design","tag-product-design","tag-ui-ux-design","tag-user-experience","tag-user-flow","tag-user-journey","tag-ux-design","tag-ux-research"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>User Flow dalam UI\/UX: Dari Klik sampai Checkout<\/title>\n<meta name=\"description\" content=\"Kenali user flow dan user journey, serta pahami perbedaannya dalam membantu pengguna mencapai tujuan di produk digital.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"User Flow dalam UI\/UX: Dari Klik sampai Checkout\" \/>\n<meta property=\"og:description\" content=\"Kenali user flow dan user journey, serta pahami perbedaannya dalam membantu pengguna mencapai tujuan di produk digital.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"Special Skill Article\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-02T01:16:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-02T01:16:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/012.-user-flow-ui-ux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"690\" \/>\n\t<meta property=\"og:image:height\" content=\"388\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Special Skill Indonesia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Special Skill Indonesia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/\"},\"author\":{\"name\":\"Special Skill Indonesia\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#\\\/schema\\\/person\\\/5a70cc85ea3b0d24c7fc30f0bfd00fec\"},\"headline\":\"Dari Klik sampai Checkout: Memahami Alur Pengguna dalam Produk Digital\",\"datePublished\":\"2026-10-02T01:16:51+00:00\",\"dateModified\":\"2026-10-02T01:16:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/\"},\"wordCount\":1456,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/specialskill.id\\\/article\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/10\\\/012.-user-flow-ui-ux.webp\",\"keywords\":[\"Product Design\",\"UI\\\/UX Design\",\"user experience\",\"User Flow\",\"User Journey\",\"UX Design\",\"UX Research\"],\"articleSection\":[\"UI\\\/UX Design\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/\",\"url\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/\",\"name\":\"User Flow dalam UI\\\/UX: Dari Klik sampai Checkout\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/specialskill.id\\\/article\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/10\\\/012.-user-flow-ui-ux.webp\",\"datePublished\":\"2026-10-02T01:16:51+00:00\",\"dateModified\":\"2026-10-02T01:16:54+00:00\",\"description\":\"Kenali user flow dan user journey, serta pahami perbedaannya dalam membantu pengguna mencapai tujuan di produk digital.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/#primaryimage\",\"url\":\"https:\\\/\\\/specialskill.id\\\/article\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/10\\\/012.-user-flow-ui-ux.webp\",\"contentUrl\":\"https:\\\/\\\/specialskill.id\\\/article\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/10\\\/012.-user-flow-ui-ux.webp\",\"width\":690,\"height\":388,\"caption\":\"user flow dan user journey dalam produk digital\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/2026\\\/10\\\/02\\\/user-flow-ui-ux\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\\\/\\\/specialskill.id\\\/article\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dari Klik sampai Checkout: Memahami Alur Pengguna dalam Produk Digital\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#website\",\"url\":\"https:\\\/\\\/specialskill.id\\\/article\\\/\",\"name\":\"Special Skill Article\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/specialskill.id\\\/article\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#organization\",\"name\":\"Special Skill Article\",\"url\":\"https:\\\/\\\/specialskill.id\\\/article\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/specialskill.id\\\/article\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/06\\\/cropped-Logo-SS-.png\",\"contentUrl\":\"https:\\\/\\\/specialskill.id\\\/article\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/06\\\/cropped-Logo-SS-.png\",\"width\":512,\"height\":512,\"caption\":\"Special Skill Article\"},\"image\":{\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/specialskill.id\\\/article\\\/#\\\/schema\\\/person\\\/5a70cc85ea3b0d24c7fc30f0bfd00fec\",\"name\":\"Special Skill Indonesia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ac2b128007e6729200fa8ea2218a6d997a793de871ecd161894a752dbc5fdd6c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ac2b128007e6729200fa8ea2218a6d997a793de871ecd161894a752dbc5fdd6c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ac2b128007e6729200fa8ea2218a6d997a793de871ecd161894a752dbc5fdd6c?s=96&d=mm&r=g\",\"caption\":\"Special Skill Indonesia\"},\"sameAs\":[\"https:\\\/\\\/specialskill.id\"],\"url\":\"https:\\\/\\\/specialskill.id\\\/article\\\/author\\\/specialskillid\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"User Flow dalam UI\/UX: Dari Klik sampai Checkout","description":"Kenali user flow dan user journey, serta pahami perbedaannya dalam membantu pengguna mencapai tujuan di produk digital.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/","og_locale":"id_ID","og_type":"article","og_title":"User Flow dalam UI\/UX: Dari Klik sampai Checkout","og_description":"Kenali user flow dan user journey, serta pahami perbedaannya dalam membantu pengguna mencapai tujuan di produk digital.","og_url":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/","og_site_name":"Special Skill Article","article_published_time":"2026-10-02T01:16:51+00:00","article_modified_time":"2026-10-02T01:16:54+00:00","og_image":[{"width":690,"height":388,"url":"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/012.-user-flow-ui-ux.webp","type":"image\/webp"}],"author":"Special Skill Indonesia","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Special Skill Indonesia","Estimasi waktu membaca":"9 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/#article","isPartOf":{"@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/"},"author":{"name":"Special Skill Indonesia","@id":"https:\/\/specialskill.id\/article\/#\/schema\/person\/5a70cc85ea3b0d24c7fc30f0bfd00fec"},"headline":"Dari Klik sampai Checkout: Memahami Alur Pengguna dalam Produk Digital","datePublished":"2026-10-02T01:16:51+00:00","dateModified":"2026-10-02T01:16:54+00:00","mainEntityOfPage":{"@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/"},"wordCount":1456,"commentCount":0,"publisher":{"@id":"https:\/\/specialskill.id\/article\/#organization"},"image":{"@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/012.-user-flow-ui-ux.webp","keywords":["Product Design","UI\/UX Design","user experience","User Flow","User Journey","UX Design","UX Research"],"articleSection":["UI\/UX Design"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/","url":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/","name":"User Flow dalam UI\/UX: Dari Klik sampai Checkout","isPartOf":{"@id":"https:\/\/specialskill.id\/article\/#website"},"primaryImageOfPage":{"@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/#primaryimage"},"image":{"@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/012.-user-flow-ui-ux.webp","datePublished":"2026-10-02T01:16:51+00:00","dateModified":"2026-10-02T01:16:54+00:00","description":"Kenali user flow dan user journey, serta pahami perbedaannya dalam membantu pengguna mencapai tujuan di produk digital.","breadcrumb":{"@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/#primaryimage","url":"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/012.-user-flow-ui-ux.webp","contentUrl":"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2026\/10\/012.-user-flow-ui-ux.webp","width":690,"height":388,"caption":"user flow dan user journey dalam produk digital"},{"@type":"BreadcrumbList","@id":"https:\/\/specialskill.id\/article\/2026\/10\/02\/user-flow-ui-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/specialskill.id\/article\/"},{"@type":"ListItem","position":2,"name":"Dari Klik sampai Checkout: Memahami Alur Pengguna dalam Produk Digital"}]},{"@type":"WebSite","@id":"https:\/\/specialskill.id\/article\/#website","url":"https:\/\/specialskill.id\/article\/","name":"Special Skill Article","description":"","publisher":{"@id":"https:\/\/specialskill.id\/article\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/specialskill.id\/article\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/specialskill.id\/article\/#organization","name":"Special Skill Article","url":"https:\/\/specialskill.id\/article\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/specialskill.id\/article\/#\/schema\/logo\/image\/","url":"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2025\/06\/cropped-Logo-SS-.png","contentUrl":"https:\/\/specialskill.id\/article\/wp-content\/uploads\/sites\/2\/2025\/06\/cropped-Logo-SS-.png","width":512,"height":512,"caption":"Special Skill Article"},"image":{"@id":"https:\/\/specialskill.id\/article\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/specialskill.id\/article\/#\/schema\/person\/5a70cc85ea3b0d24c7fc30f0bfd00fec","name":"Special Skill Indonesia","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/ac2b128007e6729200fa8ea2218a6d997a793de871ecd161894a752dbc5fdd6c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ac2b128007e6729200fa8ea2218a6d997a793de871ecd161894a752dbc5fdd6c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ac2b128007e6729200fa8ea2218a6d997a793de871ecd161894a752dbc5fdd6c?s=96&d=mm&r=g","caption":"Special Skill Indonesia"},"sameAs":["https:\/\/specialskill.id"],"url":"https:\/\/specialskill.id\/article\/author\/specialskillid\/"}]}},"_links":{"self":[{"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/posts\/3872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/comments?post=3872"}],"version-history":[{"count":5,"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/posts\/3872\/revisions"}],"predecessor-version":[{"id":3882,"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/posts\/3872\/revisions\/3882"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/media\/3879"}],"wp:attachment":[{"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/media?parent=3872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/categories?post=3872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/specialskill.id\/article\/wp-json\/wp\/v2\/tags?post=3872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}