Membangun fondasi keunggulan: 9 dasar Intercom untuk desain interaksi yang hebat

Komunitas desain tidak lagi harus membuktikan nilai desain untuk mendapatkan kursi di meja. Desainer telah menunjukkan bahwa desain dapat menjadi pilar utama kesuksesan bisnis. Tapi mereka juga kehilangan sesuatu di sepanjang jalan.

Desainer telah melangkah keluar dari pulau mereka di mana desain yang apik, namun tidak efektif dan tidak praktis dibuat. Mereka telah merangkul hubungan lintas fungsi dan bekerja sama dengan mitra di seluruh organisasi. Lebih dari sebelumnya, mereka memahami siapa pelanggan mereka dan apa yang mereka pedulikan. Mereka merancang sistem, bukan tujuan. Dan alih-alih hanya memikirkan antarmuka, mereka memikirkan strategi produk. Mereka merancang untuk hasil bisnis.

Tetapi ketika Anda mendalami semua lapisan tambahan produk bangunan ini, mudah untuk melupakan pentingnya juga memakukan keahlian para desainer: desain interaksi, optimalisasi interaksi antara pengguna dan produk.

Ketika kami mengenali masalah ini di tim desain kami sendiri, kami menetapkan dasar-dasar desain interaksi yang baik. Mereka adalah pengingat tentang hal-hal yang sangat penting bagi kita, tetapi terkadang dilupakan.

Ini sama sekali bukan daftar yang lengkap dan karena mereka menggabungkan prinsip-prinsip desain produk kami, mereka tidak universal untuk setiap perusahaan. Mereka adalah dasar-dasar yang kami di Intercom pedulikan. Tapi mudah-mudahan mereka juga bisa menjadi pengingat bagi Anda dan bahkan mungkin membuat Anda berpikir tentang dasar-dasar desain interaksi yang penting bagi perusahaan Anda.

1. Sajikan objek yang sama dengan cara yang akrab di mana-mana

Interkom, dengan luas dan kedalamannya yang luas, bisa terasa luar biasa. Kami dapat mempermudah pelanggan kami dengan membuat objek inti dalam sistem (misalnya percakapan, pengguna, pesan, dll.) mudah dikenali dan memastikan mereka berperilaku sama di mana saja. Mengenali lebih mudah daripada mengingat.

Mengerjakan
Default untuk menampilkan objek dengan cara yang sama di mana-mana. Ketika Anda memiliki alasan yang kuat untuk menyimpang, buatlah terasa familiar dan pertimbangkan apakah objek tersebut perlu ditampilkan secara berbeda di tempat lain dalam produk.

Jangan
Buat pengoptimalan lokal yang tidak tercermin di tempat lain, atau tidak konsisten dengan konteks lain. Jangan membuat beberapa variasi yang mirip, namun sedikit berbeda, dari objek yang sama.

Bertanya:

• Bagaimana objek ini ditampilkan di tempat lain dalam produk?
• Bisakah kita menggunakan kembali komponen yang sama di sini?
• Jika tidak, bagaimana kita bisa membuatnya terasa akrab?
• Apakah kita perlu memperbaruinya di tempat lain dalam produk?

2. Tetapkan hierarki di antarmuka Anda

Dengan membangun hierarki visual yang jelas, kami dapat membantu pelanggan kami memahami cara kerja produk, hubungan antara bagian yang berbeda, apa yang penting, dan apa yang tidak.

Mengerjakan
Gunakan spasi, tipografi, pengelompokan, dan lekukan untuk mengomunikasikan hierarki dan hubungan antara berbagai bagian antarmuka dengan jelas.

Jangan
Mengaburkan garis antara tingkat hierarki yang berbeda dengan tidak memiliki kelompok yang dapat dibedakan. Jangan membuat terlalu banyak kotak di dalam kotak.

Bertanya:

• Apakah konten ditata dalam kelompok yang jelas dan dapat dibedakan?
• Apakah ada cukup ruang di antara kelompok-kelompok ini?
• Apakah informasi terkait dikelompokkan bersama?
• Apakah gaya teks yang benar digunakan untuk membuat hierarki informasi?

3. Ciptakan ritme dan keseimbangan visual

Jadikan antarmuka Anda mudah dipindai untuk membantu pelanggan memahaminya dengan cepat. Membuatnya estetis dapat meningkatkan persepsi mereka tentang betapa bergunanya itu.

Mengerjakan
Jangkar bagian terpenting dari antarmuka Anda dan gunakan berbagai gaya dan tata letak untuk menyeimbangkan desain Anda dan membuatnya lebih mudah untuk dipindai. Gunakan sistem grid dan perhatikan keselarasan.

Jangan
Letakkan semuanya dalam daftar datar. Jangan gunakan kalimat atau garis yang terlalu panjang.

Bertanya:

• Apakah mudah untuk memindai desain dan mengetahui bagian terpentingnya?
• Apakah itu terasa seimbang secara visual?
• Apakah antarmuka selaras dengan sistem grid?

4. Gunakan pola dan interaksi yang diterima secara umum

Kami dapat membantu pelanggan kami menjadi lebih akrab dengan Intercom dan menggunakannya secara lebih efisien dengan membatasi jumlah pola interaksi yang perlu mereka pelajari.

Mengerjakan
Gunakan pola yang ada dari sistem desain kami. Lebih suka pola desain interaksi umum daripada pengoptimalan dipesan lebih dahulu yang cerdas. Ikuti prinsip-prinsip desain interaksi standar industri.

Jangan
Perkenalkan variasi yang serupa, namun berbeda dari pola sistem desain kami yang ada. Jangan membuat pola kustom ketika ada standar industri yang sudah mapan. Jangan menyalahgunakan pola yang ada.

Bertanya:

• Bisakah pola sistem desain yang ada digunakan di sini?
• Jika tidak, seperti apa pola standar industri untuk ini?
• Jika Anda merasa membutuhkan pola baru, apakah Anda sudah berbicara dengan tim sistem desain dan desainer lain? Bisakah pola ini dimasukkan kembali ke dalam sistem desain untuk digunakan desainer lain?
• Apakah jelas bagaimana pola dapat berinteraksi?
• Apakah ada umpan balik yang jelas ketika pengguna berinteraksi dengannya?

5. Gunakan pengungkapan progresif

Dengan menggunakan pengungkapan progresif, kami dapat membuat Interkom menjadi sederhana bagi sebagian besar pelanggan kami sekaligus memungkinkan lebih banyak fleksibilitas untuk pelanggan tingkat lanjut kami.

Mengerjakan
Mulailah dengan default sederhana dan secara bertahap tunjukkan fleksibilitas. Optimalkan untuk kasus penggunaan yang paling umum.

Jangan
Membanjiri pelanggan dengan menunjukkan fleksibilitas penuh segera. Jangan kompromikan kasus penggunaan yang paling umum untuk kasus tepi.

Bertanya:

• Apa kasus penggunaan yang paling umum?
• Bagaimana seharusnya pengaturan default sehingga kebanyakan orang tidak perlu mengubahnya?
• Bagaimana kita bisa mengungkapkan informasi secara progresif?
• Apakah kita mengorbankan kasus penggunaan yang paling umum untuk kasus tepi?

6. Jelas dan ringkas

Bahasa adalah kunci untuk membantu pelanggan kami memahami cara kerja Interkom. Namun, terlalu banyak konten dapat memiliki efek sebaliknya, dengan pelanggan memindai halaman tanpa membacanya dan karena itu tidak mencapai apa yang perlu mereka lakukan.

Mengerjakan
Jadilah jelas dan ringkas. Bila perlu, ungkapkan informasi secara bertahap dengan menggunakan tooltips dan tautan untuk membantu dokumen mempelajari lebih lanjut. Gunakan ilustrasi untuk menjelaskan ide. Mengedit dengan kejam.

Jangan
Gunakan konten yang panjang dan mendetail untuk menjelaskan cara kerja sesuatu. Sebaliknya, pertimbangkan apa yang membuatnya rumit dan perbaiki masalah yang mendasarinya. Hindari jatuh ke dalam perangkap yang secara teknis benar, tetapi sulit untuk dipahami.

Bertanya:

• Apakah mudah untuk memindai dan memahami apa itu tanpa harus membaca semua konten dari awal hingga akhir?
• Bagaimana jika Anda harus memotong setengah dari isinya? Bisakah Anda melakukannya tanpa kehilangan makna?
• Apakah proposisi nilai jelas?
• Apakah jelas apa yang perlu dilakukan pengguna?
• Apakah ini akan jelas bagi seseorang yang tidak memiliki pengetahuan sebelumnya tentang konten tersebut?
• Apa yang bisa kita ilustrasikan secara visual daripada menjelaskan dengan konten?

7. Pertimbangkan daya tanggap dan kecepatan

Performa adalah fitur yang perlu dipertimbangkan dengan cermat. Ketika diabaikan atau salah urus, hal itu menciptakan ketidakpastian dan pengalaman pengguna yang tersendat-sendat.

Mengerjakan
Berikan umpan balik instan kepada pengguna saat mereka berinteraksi dengan produk dan tetapkan harapan pada waktu tunggu.

Jangan
Lupakan tentang status pemuatan.

Bertanya

• Apa yang terjadi tepat setelah berinteraksi dengan antarmuka?
• Apakah jelas bahwa tindakan telah diterima dan sedang diproses?
• Apakah jelas kapan pemrosesan akan selesai?

8. Pandu pengguna tentang apa yang harus mereka lakukan selanjutnya

Kami biasanya memulai dengan merancang jalur bahagia, tetapi bukan itu yang akan dialami sebagian besar pelanggan untuk pertama kalinya. Tanpa bimbingan yang jelas mereka mungkin tidak mencapai jalan bahagia sama sekali. Di situlah desain interaksi yang hebat masuk.

Mengerjakan
Jelaskan apa yang harus dilakukan pengguna selanjutnya dan membuatnya mudah untuk dicapai. Secara khusus pertimbangkan status kosong, pesan kesalahan, dan status akhir.

Jangan
Jangan membuat jalan buntu di mana pengguna harus mencari tahu sendiri apa yang harus dilakukan selanjutnya.

Bertanya

• Apa yang terjadi jika Anda tidak memiliki data untuk ditampilkan?
• Apa yang terjadi ketika ada kesalahan?
• Apakah jelas apa yang harus dilakukan pengguna selanjutnya?

9. Perhatikan aksesibilitas

Meskipun kami belum menetapkan standar untuk aksesibilitas, ada banyak hal yang dapat Anda lakukan untuk membuat desain Anda lebih mudah diakses.

Mengerjakan
Gunakan komponen sistem desain yang ada karena dibuat agar dapat diakses. Gunakan gaya dan ukuran teks yang mudah dibaca. Tambahkan kontras warna yang cukup. Jangan gunakan warna saja untuk menyampaikan makna.

Jangan
Perkenalkan warna atau gaya teks baru tanpa berbicara dengan tim sistem desain. Hindari memperkenalkan komponen khusus karena mungkin tidak dapat diakses.

Bertanya:

• Apakah ada komponen sistem desain, warna, atau gaya teks yang dapat Anda gunakan?
• Apakah teks cukup terbaca?
• Apakah ada cukup kontras?
• Apakah ada lebih dari sekedar warna yang digunakan untuk menyampaikan makna?

Fokus pada kerajinan inti kami

Meskipun disiplin desain produk telah berkembang pesat selama bertahun-tahun, penting bagi kita untuk tidak melupakan atau tidak memprioritaskan kerajinan inti kita. Peningkatan fokus pada kebutuhan pelanggan dan bisnis seharusnya tidak menjadi alasan untuk desain interaksi yang buruk. Dasar-dasar desain seperti ini membantu menetapkan dasar untuk kualitas desain interaksi, membantu menghindari kesalahan besar, dan pada akhirnya bertindak sebagai landasan untuk membangun perangkat lunak yang berfokus pada pelanggan yang sangat baik.

Ini awalnya ditulis sebagai dokumen internal untuk tim desain kami. Jika Anda tertarik dengan lebih banyak konten seperti ini, lihat halaman desain produk kami untuk konten lainnya dan peran terbuka kami.