Mendesain Importir Data yang Menarik dan Dapat Digunakan untuk Aplikasi Anda

Artikel ini telah didukung dengan baik oleh teman-teman terkasih kami di Flatfile yang menciptakan pengalaman indah yang berpusat pada manusia untuk menghilangkan penghalang antara manusia dan data. Terima kasih!

Jika Anda pernah mencoba mengimpor data ke dalam aplikasi sebelumnya, Anda tahu, sebagai pengguna, betapa beragamnya pengalaman itu. Dalam beberapa kasus, pengguna kewalahan dengan instruksi tentang cara menggunakan importir. Di tempat lain, tidak ada arah sama sekali. Dan sementara itu mungkin terlihat lebih bagus daripada importir yang dibanjiri petunjuk dan tautan ke dokumentasi tentang cara menggunakannya, UI yang sama sekali tidak berguna juga akan membuat pengguna frustrasi begitu kesalahan yang tak terhindarkan mulai terjadi.

Jadi, saat Anda mendesain aplikasi atau perangkat lunak yang memerlukan pengimpor data, bagaimana Anda memastikan hal ini tidak terjadi pada pengguna akhir Anda ? Apakah Anda mencoba membuat custom build atau menemukan solusi Goldilocks yang memberikan keseimbangan yang tepat antara minimal dan informatif? Dan seperti apa seharusnya itu?

Hari ini, saya ingin melihat empat cara untuk memastikan bahwa desain antarmuka pengguna pengimpor data Anda tidak menghalangi pengalaman pengguna yang positif.

Catatan singkat sebelum saya mulai: Saya akan menggunakan contoh importir data langsung untuk mendemonstrasikan cara mendesain ini sendiri. Namun, jika Anda lebih suka menggunakan pengimpor data yang sudah jadi, tetapi tidak punya waktu untuk meninjau opsi yang ada terhadap praktik desain yang baik ini, Flatfile Concierge adalah yang Anda cari. Saya akan menunjukkan beberapa contohnya saat kita melanjutkan dan memberi tahu Anda lebih banyak tentangnya di akhir posting ini.

Tip Desain UI Untuk Pengimpor Data Perangkat Lunak Anda

Ada banyak tantangan dalam orientasi data untuk aplikasi dan perangkat lunak. Tetapi jika Anda bisa mendapatkan UI yang benar — dengan kata lain, menyediakan pengimpor yang menarik dan dapat digunakan kepada pengguna akhir Anda — Anda dapat meminimalkan tantangan tersebut secara efektif.

Berikut tampilan pengimpor data jika Anda ingin mewujudkannya bagi pengguna Anda:

1. Format Instruksi Untuk Keterbacaan

Tidak masalah seberapa mudah proses impor data. Anda tidak pernah dapat berasumsi bahwa pengguna akhir Anda akan secara otomatis mengetahui cara memformat file mereka, jenis file mana yang diizinkan dan jenis batasan ukuran file apa yang mungkin ada.

Jadi, halaman importir utama harus memiliki instruksi untuk mereka. Hanya berhati-hati tentang pergi ke laut.

Jika Anda meninggalkan mereka dengan dinding teks yang menjelaskan untuk apa importir itu, mereka akan terganggu dengan informasi yang berlebihan yang menahan mereka untuk memulai. Dan jika Anda menguraikan setiap langkah yang mungkin dengan detail yang sangat kecil, mata mereka akan berkaca-kaca. Skenario terburuk, mereka akan memulai pengalaman dengan perasaan seolah-olah mereka sedang diajak bicara. Tak satu pun dari hasil ini yang ideal.

Untuk menemukan sweet spot, lakukan hal berikut:

Sederhanakan instruksi menjadi 100 kata atau kurang.

Pengimpor faktur PayPal adalah contoh yang baik untuk ini:

Ada satu paragraf di halaman ini yang memberi tahu pengguna bahwa file perlu:

• Berformat CSV;
• Sertakan bidang untuk alamat email, nama barang, dan jumlah faktur;
• Sertakan tidak lebih dari 1000 faktur.

Bagi siapa pun yang melewatkan sedikit tentang format file, mereka akan mendapatkan pengingat di bidang unggah.

Informasi lainnya (tautan ke templat file dan FAQ tentang cara membuat faktur batch) ditautkan ke halaman lain, yang membuat halaman importir ini tetap bagus dan singkat.

Jika memungkinkan, saya sarankan untuk memformat instruksi menggunakan paragraf, bulletpoint, header tebal atau spasi putih . Ini akan mirip dengan bagaimana Anda akan menyusun teks agar mudah dibaca di halaman web atau aplikasi.

QuickBooks Self-Employed menunjukkan kepada kita bagaimana ini bisa bekerja:

Ada tiga langkah yang disajikan dan masing-masing dibuat singkat dan to the point. Dengan menambahkan ruang ekstra di antara dan di sekitarnya, membaca instruksi ekspor/impor akan tampak lebih mudah.

Satu hal terakhir yang dapat Anda lakukan adalah menonjolkan tombol “Impor” sehingga pengguna yang menggunakan pengimpor lebih dari sekali dapat dengan cepat melewati petunjuk penggunaan selanjutnya.

Berikut tampilannya jika Anda menggunakan Flatfile sebagai pengimpor data Anda:

Tombolnya terlihat jelas seperti siang hari di halaman ini. Dan bagi mereka yang telah menggunakan importir ini sebelumnya, mereka tidak perlu membaca instruksi di sebelah kanan untuk pengingat jenis file apa yang diizinkan. Ada catatan tepat di bawah tombol yang menjelaskan hal ini.

Terlebih lagi, tombolnya ada di pojok kiri atas, di mana sebagian besar mata pengguna awalnya fokus pada halaman baru. Jadi, warna tombol yang kuat ditambah dengan penempatan prioritas akan membantu pengguna dengan cepat memulai proses impor.

2. Tunjukkan Semua Opsi Impor Yang Tersedia

Konsumen sering mengharapkan perusahaan untuk memberi mereka pilihan. Ini adalah sesuatu yang sering kita lihat akhir-akhir ini di e-niaga, dengan pembeli menginginkan berbagai opsi pembelian yang tersedia (misalnya pengambilan di dalam toko, pengambilan di tepi jalan, pengiriman dua hari, dll.)

Jika masuk akal untuk melakukannya untuk aplikasi Anda, pertimbangkan untuk memberi pengguna Anda jenis fleksibilitas dan kontrol yang sama atas cara mereka mengimpor data mereka. Dan ketika Anda melakukannya, rancang setiap opsi sehingga jelas — hanya dengan melihatnya — tindakan apa yang akan dilakukan selanjutnya.

Misalnya, ini adalah importir pengeluaran dan pendapatan untuk AND.CO:

Blok dengan batas putus-putus memberi tahu pengguna bahwa mereka memiliki setidaknya satu opsi: Seret dan lepas file CSV mereka ke dalam widget untuk diunggah. Meskipun desain importir seperti ini tidak selalu memungkinkan klik untuk mengunggah, yang satu ini memungkinkan (sesuai petunjuk).

Flatfile menggunakan desain serupa di bagian atas halaman impor:

Perbedaan antara kedua contoh ini adalah bahwa Flatfile menyertakan tombol unggah di dalam kotak garis putus-putus sehingga jelas bahwa kedua opsi impor tersedia.

Ada juga opsi ketiga di bawah blok ini:

Sebaiknya sertakan opsi impor manual jika pengguna akhir Anda akan kembali ke importir untuk menambahkan segelintir data dan tidak ingin menyiapkan file setiap saat.

Salah satu cara terakhir untuk menyajikan opsi impor adalah melalui penggunaan logo perangkat lunak pihak ketiga seperti yang dilakukan Asana:

Opsi impor file CSV standar tersedia di bagian atas halaman. Namun, di bawahnya, ada aplikasi yang kemungkinan besar penggunanya telah menyimpan data proyek mereka.

Seperti yang Anda lihat, presentasi visual dari opsi impor sama pentingnya dengan instruksi yang diberikan. Jadi, daripada mencoba berkreasi di sini, cukup gunakan desain yang terbukti benar yang akan dikenal oleh pengguna akhir Anda dan akan membantu mereka secara instan mengidentifikasi opsi impor yang mereka sukai.

3. Jadikan Impor Kompleks Terlihat Mudah

Pada tahap proses impor data ini, hal-hal bisa menjadi sedikit rumit. Bahkan jika Anda memiliki proses impor yang sempurna di backend, cara itu disajikan kepada pengguna akhir Anda bisa menjadi masalah jika kerumitan proses mulai terlihat.

Ada dua hal yang dapat Anda lakukan dengan UI untuk mencegah hal itu terjadi. Poin ini akan mencakup apa yang dapat Anda lakukan jika proses impor itu sendiri rumit.

HubSpot adalah perangkat lunak pemasaran dan penjualan yang tangguh, jadi tidak mengherankan jika proses impor data akan memakan waktu cukup lama. Terlepas dari itu, itu dimulai dengan cukup sederhana, menanyakan pengguna apakah mereka akan mengimpor data mereka atau menariknya dari platform lain:

Sekarang, desain ini bertentangan dengan apa yang baru saja saya bicarakan di poin terakhir tentang mendesain halaman pertama. Namun, ada alasan mengapa ini adalah pilihan yang baik.

Katakanlah pengguna HubSpot ini memutuskan untuk mengimpor data mereka dari file CSV. Mereka akan memilih "Impor" dan kemudian pergi ke halaman ini:

Jika HubSpot menggunakan desain halaman impor yang khas, halaman ini akan mengharuskan pengguna untuk berhenti sejenak dan kemudian berkenalan dengan antarmuka baru sebelum melanjutkan.

Jadi, ini adalah sesuatu yang perlu dipertimbangkan jika Anda memiliki proses orientasi data yang kompleks yang perlu dipecah menjadi beberapa langkah sebelum impor yang sebenarnya dimulai.

Dengan asumsi pengguna hanya ingin mengimpor CSV, XLS atau XLSX, mereka akan menemukan diri mereka di sini selanjutnya:

Apa yang baik tentang pendekatan ini adalah bahwa hal itu mencegah pengguna dari keharusan melalui importir sekali untuk setiap file yang harus mereka unggah. Jika ada data terkait, mereka dapat memilih 'Beberapa file dengan asosiasi' dan importir akan membantu mereka membuat koneksi tersebut:

Dengan cara ini, bukan tanggung jawab pengguna untuk menggabungkan data dalam file mereka. Mereka juga tidak harus menghabiskan waktu berjam-jam menelusuri catatan yang diimpor untuk menggabungkan catatan terkait. Importir ini membantu mereka melakukannya.

Layar berikutnya mirip dengan "Berapa banyak file yang Anda impor?" layar. Yang ini muncul, bagaimanapun, ketika pengguna memilih "Satu file":

Ini sekali lagi ditujukan untuk mencegah pengguna mengimpor data dan kemudian menghabiskan banyak waktu untuk membersihkannya.

Selanjutnya, kami memiliki bagian dari proses di mana pengguna akhirnya melihat importir. Meskipun tidak persis seperti desain yang kita lihat sebelumnya, itu masih cukup intuitif di mana pengguna akan tahu cara mengunggah file mereka ke dalamnya:

Meskipun saya menyadari bahwa ini adalah banyak langkah untuk membuka halaman yang akan ditampilkan oleh perangkat lunak lain terlebih dahulu, pikirkan tentang seberapa cepat pengguna ini dapat masuk ke dalam HubSpot dan mulai bekerja.

Jika Anda memiliki proses unggah yang rumit (yaitu banyak file, asosiasi objek, dll.), pertimbangkan untuk menggunakan desain yang serupa dengan setiap pertanyaan pada halamannya sendiri serta opsi yang disajikan secara konsisten.

4. Gunakan Warna Untuk Mempercepat Pembersihan Data

Cara lain untuk menyederhanakan proses impor yang kompleks berlaku untuk semua pengimpor data. Secara khusus, tip ini berkaitan dengan langkah terakhir dalam proses orientasi data:

• Validasi data
• Sanitasi data

Sekarang, memiliki pengimpor data yang benar-benar dapat melakukan beberapa pekerjaan ini akan sangat membantu. Namun, pada akhirnya terserah pada pengguna akhir Anda untuk meninjau apa yang telah mereka impor dan menyetujuinya sebelum mereka mengizinkannya di dalam perangkat lunak.

Untuk membantu mereka agar tidak terlalu kewalahan dengan semua data dan semua yang perlu mereka tangani, gunakan warna untuk memandu mereka melewatinya.

Untuk contoh ini, kita akan melihat ClickUp. Dan jika itu terlihat familier bagi Anda, itu karena memang seharusnya begitu. Itu dibangun menggunakan pengimpor data Flatfile.

Mari kita mulai dengan bagian pertama dari proses validasi data:

Halaman ini cukup sederhana. Ini menunjukkan kepada pengguna cuplikan dari data yang diimpor dan menanyakan apakah baris yang ditunjuk berisi nama kolom.

Tapi lihat tombol hijau "Ya" . Meskipun ini adalah taktik desain yang kami gunakan untuk antarmuka web dan aplikasi (yaitu membuat ajakan bertindak yang diinginkan menjadi warna yang positif dan menarik), ada alasan lain mengapa ini terjadi.

Dengan asumsi nama kolom ada di sana dan ClickUp dapat dengan mudah menafsirkan data, inilah yang dilihat pengguna selanjutnya:

Ini adalah upaya pengimpor data untuk membuat validasi data menjadi ringan. Di sebelah kiri adalah semua kolom yang diidentifikasi dari file.

Di sebelah kanan adalah informasi tentang bagaimana kolom dicocokkan dengan bidang ClickUp. Ada juga tiga kemungkinan opsi validasi data:

1. Konfirmasi pemetaan (berwarna hijau) ;
2. Abaikan kolom ini (dalam tombol hantu abu-abu);
3. Sertakan sebagai bidang khusus (di tombol hantu lain).

Tombol hijau di sini cocok dengan apa yang kita lihat di layar terakhir. Jadi, pengguna telah dikondisikan untuk melihat tombol hijau ini sebagai afirmatif, yang akan membantu mereka dengan cepat menelusuri semua hasil dan mengonfirmasi bidang yang cocok dengan benar.

Hijau dan abu-abu bukan satu-satunya warna yang akan muncul di pengimpor data Anda.

Jika kesalahan muncul (yang bukan merupakan hal yang buruk), pengguna Anda harus memiliki kesempatan untuk memperbaikinya sebelum data diunggah. Tergantung di mana kesalahan muncul di aplikasi, Anda mungkin ingin mendesainnya secara berbeda.

Misalnya, ClickUp menggunakan simbol peringatan oranye untuk menyebutkan masalah dengan nilai selama validasi:

Ini memungkinkan ClickUp memberi tahu pengguna, “Ya, nama kolom cocok, tetapi nilai Anda tidak sesuai dengan apa yang kami gunakan.”

ClickUp kemudian menggunakan stabilo merah selama sanitasi data untuk menunjukkan kesalahan dengan bidang:

Ini adalah langkah terakhir sebelum mengunggah, jadi ini adalah upaya terakhir ClickUp untuk membuat penggunanya menyempurnakan impor data mereka. Dalam hal ini, ClickUp menyorot bidang berwarna merah jika ditandai sebagai wajib tetapi tidak berisi data.

Warnanya saja harus menarik perhatian ke bidang. Namun, bagaimana jika pengguna telah mengimpor file dengan ratusan atau ribuan baris dan tidak melihat merah pada pandangan pertama? Memberi mereka cara untuk membidik garis merah ini akan sangat berharga.

Dan tombol "Hanya tampilkan baris dengan masalah" ClickUp melakukan ini:

Mari kita hadapi itu: Kecuali jika pengimpor data Anda memberi tahu pengguna Anda kapan dan di mana ada masalah dengan data mereka, mereka mungkin tidak akan melihatnya sekilas. Artinya, tidak sampai mereka dalam perangkat lunak dan bertanya-tanya mengapa catatan mereka semua kacau.

Tentu saja, mereka akan menyalahkan importir dan perangkat lunak; bukan karena kelalaiannya sendiri. Jadi, menyediakan spidol warna-warni ini selama proses akan sangat membantu.

Membungkus

Seperti yang saya sebutkan sebelumnya, jika Anda tidak yakin bahwa Anda dapat melakukan tindakan penyeimbangan yang rumit antara membangun pengimpor data bebas gesekan dan kesalahan sambil mendesainnya agar menarik, intuitif, dan bermanfaat, lalu mengapa repot?

Seperti yang telah kita lihat, Flatfile Concierge adalah solusi importir data siap pakai yang tidak hanya dibuat untuk menangani berbagai skenario impor data, tetapi juga tampak hebat. Dengan membiarkannya mendukung proses impor data Anda, Anda dapat mencurahkan lebih banyak waktu untuk membangun produk dan klien Anda dapat mendedikasikan lebih banyak waktu untuk menyediakan layanan dan dukungan pelanggan yang lebih baik kepada pengguna mereka.