Desain olahraga itu keren, tapi itu menyakitkan pengguna – begitulah cara saya memperbaikinya – Beragampengetahuan

Desain olahraga adalah salah satu alat bermata dua di toolkit desainer. Jika Anda melakukan ini dengan cara yang baik, itu dapat membuat layar terlihat lebih baik, membantu orang tahu di mana harus mencari, membuat hal -hal penting menonjol, dan bahkan membuat momen yang akan dipertimbangkan orang nanti. Ketika dilakukan dengan buruk, itu dapat mengalihkan perhatian Anda, frustrasi dan bahkan mendorong penonton yang Anda targetkan.

Saya belajar ini ketika saya menggunakan efek pengguliran paralaks, dan tujuan sebenarnya dari nazzling dalam prototipe tetapi menyebabkan sakit kepala. Ini bukan untuk mengatakan bahwa teknik ini dalam teori, karena saya lebih tertarik pada olahraga yang bagus. Persis seperti itulah saya menggunakannya tanpa sepenuhnya mempertimbangkan kinerja, aksesibilitas, dan konteks.

Dalam artikel ini, saya akan mengeksplorasi mengapa desain olahraga terus memiliki tempat yang langgeng di dunia desain. Saya juga akan memilih beberapa perangkap umum, bahkan desainer berpengalaman, merinci pekerjaan saya sendiri dan studi kasus nyata yang dilakukan oleh apa yang telah saya pelajari darinya, dan berbagi beberapa praktik terbaik praktis untuk membuat desain olahraga Anda menarik dan ramah.

Pada akhirnya, Anda akan tahu cara menggunakan olahraga sebagai aset daripada tanggung jawab.

Mengapa Desain Olahraga Tidak Pernah Mati dalam Produk Digital

Olahraga selalu menjadi sesuatu yang digunakan orang untuk berbicara satu sama lain untuk waktu yang lama, bahkan sebelum kita memiliki layar, telepon, atau komputer. Orang -orang melambaikan tangan mereka, membuat wajah mereka, dan menggunakan gambar yang sepertinya bergerak dalam pikiran kita. Otak kita adalah melihat hal -hal yang memindahkan, dan hal -hal yang memindahkan lebih cepat dari sekadar gambar yang diam.

1. Itu menarik perhatian dan memandu fokusnya – Dari menyoroti fitur baru hingga menarik pandangan yang menyerukan tindakan, gerakan berfungsi sebagai highlighter visual. Kemenangan animasi Duolingo tidak hanya menyenangkan. Mereka berlabuh fokus pengguna dan memperkuat pembangunan kebiasaan

1. Ini mendukung bercerita – Merek seperti Apple menggunakan tindakan untuk membenamkan pengguna di dunia mereka. Efek kaca cair mereka pada iOS membuat transisi antarmuka terasa organik dan hampir taktil, memperdalam hubungan emosional dengan produk

1. Itu meningkatkan kepribadian merek – Mikrokoneksi mikro yang menyenangkan, seperti memuat layar dengan pesan santai atau ikon animasi halus, dapat mencerminkan nada yang ramah produk dan mudah didekati

Singkatnya, gerakan menggali sesuatu yang asli. Tidak ada niat, itu akan membanjiri daripada meningkatkan.

Perangkap Desain Olahraga

Bahkan jika itu bagus, olahraga dapat dengan mudah merugikan Anda. Di sinilah saya melihatnya dan melewatinya salah:

1. Transisi transisi – Sesuatu yang terasa anggun dalam konsep bisa menjadi waktu dalam praktik. Saya pernah melihat dasbor di mana setiap widget meluncur ke tempatnya dengan animasi kedua. Awalnya menawan, tetapi Anda akan merasa frustrasi saat Anda cemas
2. Korsel dan Penambahan Konten Otomatis – Pengguna memaksa ini untuk mengikuti desain daripada mengontrol proses mereka sendiri. Pengguna sering melewatkan detail kunci atau frustrasi, mencoba menjeda atau mundur
3. Hottleneck kinerja – Animasi JavaScript berat atau GIF yang tidak tersubstitusi dapat menyimpan laju bingkai tangki, terutama di perangkat Android kelas menengah atau koneksi yang lambat. Sesuatu yang terasa halus di laptop yang kuat dapat merangkak di tempat lain
4. Pengawasan aksesibilitas – Mengabaikan pengaturan tindakan yang disukai berarti Anda memaksa pergerakan kepada pengguna yang mungkin peka terhadapnya. Bagi sebagian orang, itu tidak hanya menjengkelkan. Secara fisik tidak nyaman atau hilang
5. Gaya melebihi zat – Latihan harus mencapai tujuannya. Tombol yang memantul tanpa alasan mungkin terlihat menyenangkan, tetapi jika tidak cocok dengan nada atau fungsi, itu mungkin menghadapi amatir dan mengganggu

Penyalahgunaan olahraga dapat membahayakan pengguna

Saya sedang mengerjakan proyek untuk memulai layanan online baru. Kami ingin beranda terasa dinamis dan maju, jadi saya datang dengan efek paralaks di mana latar belakang dan latar depan bergerak dengan kecepatan yang berbeda saat Anda menggulir. Dalam model desain, ini bagus. Gambar terasa berlapis, hampir sebuah film:

Realitas setelah pengujian dengan pengguna

Dalam pengujian kegunaan, jelas bahwa masalahnya terutama pada perangkat seluler. Pengguna desktop mengalami efek yang mulus dan mendalam yang saya inginkan. Tetapi di telepon, terutama model mid-range, inilah cerita yang berbeda:

• Pindahkan lag – Di ponsel mid-range, gagap gulir jelas
• Ketidaknyamanan Pengguna – Dalam tes, seorang peserta menggosok matanya dan bertanya apakah ada cara untuk “menutupnya.” Orang lain berkata “halaman bergerak lebih cepat dari otak saya”

• Pesan hilang – Proposisi nilai inti dari produk, kami ingin hal pertama yang diperhatikan pengguna secara harfiah karena latar belakang mencuri acara

Ini bukan masalah satu kali. Mempelajari cadangan reaksi ini. Parallax dapat menyebabkan penyakit motorik di sebagian pengguna dan sering dapat membahayakan ketersediaan yang dirasakan saat digunakan berlebihan.

Bagaimana cara memperbaikinya

Karena masalah utama berasal dari pengguna seluler, saya memiliki dua opsi yang jelas:

1. Hapus paralaks dari versi seluler sepenuhnya
2. Optimalkan untuk membuatnya berjalan dengan lancar, yang berarti mengompresi aset dan bekerja dengan pengembang untuk peningkatan kinerja

Saya akhirnya melakukannya. Mengapa? Karena masalah inti adalah pada perangkat seluler, pengguna desktop memiliki lebih banyak real estat layar dan perangkat keras yang lebih kuat, sehingga aksinya kurang bermasalah. Di ponsel, saya mengganti paralaks paling dekoratif dengan jumlah fade-in fade-in dan dengan lembut menerapkan efek pada kisaran daya tarik utama untuk bertindak. Animasi ini memandu perhatian tanpa mengurangi kinerja atau menyebabkan ketidaknyamanan:

hasil – Tes yang diubah ini menunjukkan ketidaknyamanan, cakupan waktu pemuatan yang lebih cepat dan pengguna memperhatikan pesan utama lebih cepat.

Praktik terbaik untuk desain olahraga

Berikut adalah daftar distilasi yang efektif untuk:

• Mulailah dengan tujuan – Olahraga harus memiliki pekerjaan: Pandu perhatian, perubahan sinyal, dan berikan umpan balik. Jika hanya “karena terlihat keren”, silakan pikirkan kembali
• Hormati preferensi pengguna – Menerapkan tindakan pengurangan preferensi dan mempertimbangkan perpindahan animasi secara manual dalam waktu lima detik
• Tetap cepat – Untuk sebagian besar animasi UI, durasi 200-500ms sangat seimbang tanpa kehilangan perasaan yang cepat dan responsif itu
• Hindari hal-hal penting yang bergantung pada olahraga – Jangan pernah membuat interaksi kritis sepenuhnya tergantung pada petunjuk animasi. Memberikan kesetaraan statis
• Pengujian lintas-perangkat – Selalu periksa pergerakan perangkat keras kelas bawah. Efek halus pada laptop desain Anda mungkin diikat di tempat lain
• Tingkatkan kejelasan dan tidak bersaing dengan konten – Gerakan harus membuat antarmuka lebih mudah dipahami, daripada mengganggu tugas

sebagai kesimpulan

Desain olahraga tidak hanya membuat daya tarik visual. Ini tentang meningkatkan kegunaan, komunikasi dengan jelas dan meningkatkan kepribadian merek. “Kegagalan paralaks saya” memberi tahu saya bahwa mosi itu tidak memiliki niat yang jelas dan eksekusi yang cermat akan merusak semua tujuan ini.

takeout? Perlakukan gerakan seperti elemen UX lainnya. Uji, ukur dampaknya, dan bersedia memanggilnya kembali ke pengguna. Saat bijaksana, berolahraga tidak hanya menghidupkan produk. Itu membuatnya terasa mudah.