Membantu AI Melihat dengan Jelas: Studi Kasus Desain Dasbor

Diterbitkan: 2022-03-11

Kecerdasan buatan (AI) bekerja keras di banyak industri saat ini. Ini membantu pengecer mengelola inventaris dan memprediksi permintaan, memudahkan dokter untuk mengidentifikasi kanker dalam pemindaian paru-paru, dan memungkinkan mobil mengemudi sendiri.

Namun otomatisasi bertenaga AI terus berkembang dan masih membutuhkan campur tangan manusia. Dalam studi kasus desain dasbor ini, saya merinci bagaimana saya mengembangkan UI yang membantu operator manusia meningkatkan proses pengenalan AI.

Klien

Kliennya adalah perusahaan rintisan AS yang membantu pelanggannya memecahkan kesalahan pengenalan gambar AI untuk beberapa industri secara real time. Solusi yang diberikannya meningkatkan sistem otomatis yang memungkinkan pemetaan medan, klasifikasi tanaman, identifikasi produk ritel, pemindaian kode batang, dan banyak lagi.

Sistem pengenalan gambar AI dilatih untuk mengenali dan menafsirkan input visual dan membuat keputusan berdasarkan apa yang mereka "lihat". Namun terkadang sistem ini menemukan pengecualian—gambar yang tidak dapat mereka proses karena objek memiliki tampilan yang tidak terduga. Pengecualian dapat menyebabkan sistem AI gagal mengidentifikasi informasi penting atau salah mengidentifikasi apa yang dilihatnya. Misalnya, pemindai produk kelontong mungkin tidak mengenali sekotak jus jeruk karena wadahnya telah berubah atau robot pertanian yang dapat mengemudi sendiri mungkin menjadi bingung karena rintangan. Masalah seperti ini dapat menyebabkan penundaan atau gangguan pada operasi bisnis.

Untuk mengatasi masalah ini, perangkat lunak klien terintegrasi dengan sistem AI pelanggannya, memungkinkan operator manusia untuk meninjau dan menyelesaikan masalah pengenalan secara real time. Tetapi operator melakukan lebih dari sekadar memecahkan pengecualian: Mereka juga mengajarkan sistem AI apa yang harus dilakukan saat mereka menemukan hal serupa di lain waktu. Ini menghasilkan sistem AI yang lebih siap untuk mengidentifikasi rentang gambar yang lebih luas.

Singkat

Selama dua bulan, saya bekerja dengan klien untuk memberikan desain untuk dasbor operator dan dasbor pelanggan. Saya juga menyiapkan pustaka komponen dan panduan gaya yang menyertai kiriman ini.

Pendekatan saya mengikuti proses pemikiran desain, yang melibatkan penelitian, brainstorming, pembuatan prototipe dengan ketelitian rendah, pembuatan prototipe dengan ketelitian tinggi, dan pengujian pengguna. Saya selalu menyesuaikan proses ini berdasarkan ketersediaan waktu, modal, dan orang.

Selama proyek, saya bekerja erat dengan tim pendiri klien dan pengembang front-end, berbagi pembaruan harian yang membantu semua orang tetap mendapat informasi tentang kemajuan saya. Saya juga berkolaborasi dengan dua operator yang memberikan wawasan berharga tentang pekerjaan mereka sehari-hari.

Meningkatkan Dasbor Operator

Inti dari produk klien adalah dasbor operator—antarmuka yang digunakan spesialis AI untuk menyelesaikan masalah pengenalan gambar. Saat sistem AI mengalami masalah dalam mengidentifikasi gambar, gambar itu dikirim ke dasbor operator. Operator secara manual melabeli gambar dengan menandai setiap objek dan mengklasifikasikannya berdasarkan label yang telah ditentukan, seperti “manusia”, “pohon”, atau “halangan besar”.

Konsep dasbor operator disediakan untuk Fellype oleh klien. Sebagian besar halaman ditempati oleh gambar yang akan ditinjau. Di sebelah kanan adalah panel kontrol yang menunjukkan ikon yang sangat bergaya yang menunjukkan tindakan yang dapat dilakukan operator.)
Konsep awal dasbor operator yang disediakan oleh klien

Ketika saya mewawancarai operator klien, mereka menunjukkan kepada saya keadaan terkini dari perangkat lunak yang mereka gunakan dan mengizinkan saya untuk mengamati mereka melakukan pekerjaan mereka. Dari penelitian awal ini, saya mengumpulkan wawasan, poin rasa sakit, dan peluang untuk perbaikan yang akan menginformasikan desain saya.

Saya menemukan bahwa fungsi penting hilang dan tugas-tugas tertentu tidak perlu rumit, yang membuat antarmuka sulit digunakan. Misalnya, untuk memberi label pada gambar, operator harus bolak-balik antara bilah alat dan gambar setiap kali memilih, memberi label, meninjau, dan mengirimkan. Demikian juga, kemampuan untuk membatalkan atau mengulang suatu tindakan juga hilang, yang berarti operator harus mengulang tugas atau mengambil langkah ekstra ketika mereka melakukan kesalahan.

Kekhawatiran lain adalah bahwa antarmuka tidak memiliki tampilan dan nuansa terpadu karena sebagian besar mengandalkan campuran komponen yang sudah jadi. Ketidakkonsistenan ini membuat elemen dan fungsi tertentu sulit ditemukan atau digunakan.

Dengan mempertimbangkan peluang peningkatan ini, saya melakukan brainstorming konsep awal dan membuat gambar rangka, yang saya bagikan dengan dua operator. Setiap hari, selama seminggu, saya mempresentasikan wireframes kepada operator dan mendiskusikan kesan awal mereka melalui sesi umpan balik virtual. Sesinya sangat kolaboratif dan membantu saya mengumpulkan ide untuk menyempurnakan dasbor.

Satu hal menarik yang muncul selama sesi umpan balik melibatkan jumlah informasi yang ditampilkan pada toolbar sebelah kanan, di mana operator memilih tindakan mereka. Desain asli saya menyarankan solusi yang sangat minimalis—toolbar yang dapat diciutkan menjadi panel sempit yang hanya menampilkan ikon. Ini, saya yakin, akan memungkinkan fokus berada pada citra sentral.

Namun, operator tidak menyukai gagasan itu karena sulit untuk memahami sekilas apa arti ikon dan apa tindakan utamanya. Dengan wawasan penting itu, saya menyadari bahwa sederhana tidak selalu lebih baik. Dalam hal ini, membiarkan lebih banyak informasi terlihat membantu operator bekerja lebih efisien.

Setelah meningkatkan dan menyempurnakan gambar rangka awal, saya membuat prototipe interaktif dengan ketelitian rendah di Figma dan mengirimkannya ke operator dan pemangku kepentingan sehingga mereka dapat mengujinya. Setelah saya menerima umpan balik mereka, saya mengulangi desain sampai semua orang puas.

Tangkapan layar prototipe skala abu-abu yang sangat mendasar yang menunjukkan tata letak umum dasbor operator. Ada bingkai tengah besar tempat gambar yang akan ditinjau akan pergi, desain sampel untuk pemilihan bentuk, contoh menu kontekstual, dan panel kontrol kanan tempat perintah akan berada.
Prototipe antarmuka operator dengan kesetiaan rendah

Seperti yang saya sebutkan, dasbor asli dibuat menggunakan campuran komponen UI yang sudah jadi, dan pengalaman dalam produk tidak konsisten secara keseluruhan.

Namun, demi kepentingan waktu dan anggaran, para pemangku kepentingan ingin mempertahankan komponen yang sudah jadi jika memungkinkan. Jadi, bekerja dengan pengembang front-end, saya menyesuaikan komponen yang ada, termasuk tombol, formulir dan bidang, dan elemen UI lainnya, agar sesuai dengan tampilan dan nuansa dasbor baru. Tweak ini memengaruhi warna, tipografi, spasi, dan detail lainnya. Dalam kasus di mana tidak mungkin untuk memperbarui komponen yang ada, seperti animasi kemajuan live-view, kami membuat yang baru. Sebagian besar dasbor operator dibuat dari awal dengan cara ini.

Saya kemudian menghasilkan prototipe fidelitas tinggi yang dapat dinavigasi yang menggabungkan warna dan jenis foto yang biasanya dilihat operator dalam perangkat lunak. Saya juga menyertakan alat pemilihan seperti persegi panjang, pensil, dan poligon, dan menambahkan panel di bagian bawah layar tempat operator dapat membuat peningkatan gambar. Akhirnya, saya mengirim prototipe, bersama dengan spesifikasi untuk interaksi mikro yang dianimasikan di After Effects, ke pengembang front-end sehingga mereka dapat membangun dasbor.

Tangkapan layar dasbor yang menunjukkan foto besar dua orang pria yang sedang memuat bal jerami ke atas traktor. Elemen tertentu dari gambar ditandai dengan kotak berwarna di sekelilingnya. Di sebelah kanan adalah panel kontrol yang memungkinkan operator memberi label pada gambar di dalam kotak.
Prototipe fidelitas tinggi yang mewakili dasbor operator akhir

Merancang Dasbor Pelanggan Dari Awal

Fase kedua dari proyek ini adalah dasbor pelanggan yang memungkinkan pemilik sistem AI untuk mengamati kemajuan penyelesaian masalah mereka. Klien ingin meningkatkan pengalaman ini sebelum meluncurkan produk ke lebih banyak pelanggan.

Awalnya, pelanggan klien harus meminta laporan kemajuan melalui email. Setiap laporan adalah file PDF atau CSV yang menunjukkan pengecualian mana yang diselesaikan atau masih dalam proses. Klien membutuhkan cara bagi pelanggan untuk memeriksa status setiap pengecualian secara sekilas.

Tangkapan layar dasbor monokrom dasar yang menampilkan kolom gambar dengan deretan metadata yang mengawali setiap gambar. Beberapa gambar sepenuhnya jenuh, menunjukkan penyelesaian, sementara yang lain sebagian besar transparan untuk menunjukkan bahwa mereka masih dalam proses. Di sebelah kiri adalah panel yang menunjukkan navigasi dasar.
Prototipe rendah kesetiaan dari dasbor pelanggan

Dengan dasbor yang saya rancang, pelanggan dapat masuk dan memantau kemajuan setiap pengecualian secara real time. Mereka dapat melihat gambar yang masuk, yang sedang ditinjau, dan pengecualian yang telah diselesaikan. Mereka juga dapat melihat detail setiap solusi untuk lebih memahami bagaimana masalah tersebut diselesaikan.

Dasbor menampilkan grafik dan visualisasi untuk membantu pelanggan lebih memahami data ringkasan seperti keterlibatan total dan resolusi total. Pelanggan juga dapat dengan mudah mengakses dan mengelola aspek bisnis akun mereka, termasuk metode pembayaran dan informasi login.

Untuk prototipe dasbor pelanggan, saya membuat animasi di After Effects untuk menunjukkan bagaimana elemen UI tertentu akan berperilaku. Misalnya, saya membuat animasi kemajuan untuk menunjukkan pengecualian dalam peninjauan, yang menjadi tanda centang ketika pengecualian telah diselesaikan. Saya juga mendesain titik yang berdenyut untuk menunjukkan saat sebuah proyek ditayangkan.

Tangkapan layar dasbor yang menampilkan 12 gambar dalam kotak. Empat gambar di atas masing-masing menunjukkan tanda centang hijau, yang menunjukkan bahwa mereka telah diselesaikan. Gambar yang tersisa berwarna abu-abu dengan roda progres biru yang ditumpangkan di atas masing-masing gambar, menunjukkan bahwa gambar tersebut masih dalam proses.
Tampilan dasbor pelanggan akhir, menampilkan animasi kemajuan yang saya rancang. Resolusi yang sedang berlangsung berwarna abu-abu dan dilambangkan dengan roda kemajuan berwarna biru. Resolusi yang telah selesai dibuat dalam warna penuh dengan tanda centang hijau.

Membangun Pustaka Komponen di Figma

Salah satu aspek penting dalam mendesain produk yang skalabel dan mudah dirawat adalah membuat pustaka komponen dan panduan gaya. Memiliki komponen desain yang terstandarisasi dan dapat digunakan kembali memastikan konsistensi dan kecepatan saat menskalakan dan menambahkan fitur ke produk digital.

Saya memilih untuk menempatkan perpustakaan klien di Figma karena memudahkan untuk memodifikasi komponen dan memperbaruinya di mana pun mereka muncul dalam sebuah desain. Semua komponen dan gaya didokumentasikan menggunakan kisi delapan titik. Pustaka menyertakan komponen inti seperti menu, bilah sisi, tab, ikon input, dan tombol, sedangkan panduan gaya mencakup elemen seperti tipografi, warna, ikon, spasi, dan kisi.

Di masa depan, perpustakaan komponen dapat berkembang menjadi sistem desain yang lengkap. Namun untuk saat ini, ini berfungsi sebagai landasan untuk mengembangkan produk dan sebagai referensi bagi desainer masa depan, baik itu staf internal, pekerja lepas, atau profesional agensi.

Cuplikan layar pustaka komponen, ditata dalam kisi dengan setiap kotak berisi semua informasi untuk setiap komponen, termasuk jenis huruf, warna merek, desain tombol, dan ikon.
Pustaka komponen gabungan dan panduan gaya

Masalah Penelitian Pengguna

Proyek ini bermanfaat karena memberi saya kesempatan untuk menyempurnakan produk digital yang meningkatkan sistem otomatis di berbagai industri dan membentuk cara AI menafsirkan dunia. Ini juga memperkuat pentingnya penelitian pengguna dan pengamatan langsung. Mampu menyaksikan operator melakukan pekerjaan mereka dan mengajukan pertanyaan sangat penting untuk memberikan dasbor yang memungkinkan mereka bekerja lebih efisien dan efektif. Seorang desainer tidak dapat meningkatkan cara seseorang bekerja sampai mereka memahami pengalaman mereka sejak awal.

Bacaan Lebih Lanjut di Blog Toptal:

  • Desain Dasbor – Pertimbangan dan Praktik Terbaik
  • Konsistensi Adalah Kunci – Bagaimana Membangun Sistem Desain Figma
  • Teknik Penelitian UX dan Aplikasinya
  • Nilai Penelitian Pengguna
  • ROI Sejati dari UX: Meyakinkan Suite Eksekutif