Animasi dan Transisi

Catatan

Panduan desain ini dibuat untuk Windows 7 dan belum diperbarui untuk versi Windows yang lebih baru. Sebagian besar panduan masih berlaku pada prinsipnya, tetapi presentasi dan contoh tidak mencerminkan panduan desain kita saat ini.

Penggunaan animasi dan transisi yang strategis dapat membuat program Anda lebih mudah dipahami, terasa lebih halus, lebih alami, dan berkualitas lebih tinggi, dan lebih menarik. Tetapi penggunaan animasi dan transisi yang syukur dapat membuat program Anda mengganggu dan bahkan mengganggu.

Animasi memberikan tampilan gerakan atau perubahan dari waktu ke waktu. Gunakan animasi untuk memberikan umpan balik, mempratinjau efek tindakan, memperlihatkan hubungan antar objek, menarik perhatian untuk mengubah, atau menjelaskan tugas secara visual.

Microsoft Windows menggunakan animasi flash latar belakang untuk memberikan umpan balik bahwa objek telah diklik.

Transisi adalah animasi yang digunakan untuk menjaga pengguna tetap berorientasi selama perubahan status antarmuka pengguna (UI) dan manipulasi objek, dan membuat perubahan tersebut terasa lancar alih-alih mengedipkan. Transisi yang baik terasa alami, sering memberikan ilusi bahwa pengguna berinteraksi dengan objek dunia nyata.

Gadget Desktop Windows menggunakan transisi yang lancar antara status ringkas dan detailnya.

Umumnya, animasi dan transisi terbaik digunakan untuk berkomunikasi dengan pengguna secara non-verbal, dan untuk membuat perubahan status lebih alami dan kurang terlihat. Sebaliknya, yang paling tidak efektif adalah gratifikasi karena mereka tidak berkomunikasi apa pun atau menarik perhatian yang tidak perlu. Animasi paling baik digunakan sebagai bentuk komunikasi sekunder. Mereka harus mengkomunikasikan informasi yang berguna tetapi tidak penting, dan agar dapat diakses, pengguna harus dapat menentukan informasi yang setara melalui cara lain.

Catatan: Pedoman yang terkait dengan branding perangkat lunak, suara, dan aksesibilitas disajikan dalam artikel terpisah.

Apakah ini antarmuka pengguna yang tepat?

Untuk memutuskan, pertimbangkan pertanyaan berikut.

Animasi

Apakah kondisi berikut berlaku?

• Animasi secara visual mengkomunikasikan sesuatu yang berguna, seperti memberikan umpan balik, menunjukkan hubungan, penyebab dan efek, atau menarik perhatian pada perubahan penting.
• Melihat animasi tidak penting. Informasi yang setara dapat diperoleh dengan cara lain. Pengguna mungkin tidak mendapat manfaat dari animasi jika:
  • Mereka telah mematikan animasi.
  • Perhatian mereka ada di tempat lain.
  • Mereka terganggu secara visual.
  • Animasi dikaburkan oleh jendela lain.
  • Animasi tidak diputar karena performa sistem yang tidak mencukup.
• Animasi tidak memengaruhi produktivitas pengguna. Yaitu:
  • Ini terjadi dengan cepat (200 milidetik atau kurang).
  • Ini tidak mengganggu interaksi atau dapat terganggu.
  • Pengguna harus tetap menunggu.
• Animasi tidak memengaruhi alur pengguna.
  • Ini adalah pusat perhatian pengguna, atau menarik perhatian pada sesuatu di luar pusat perhatian yang penting atau berguna dalam menyelesaikan tugas.
  • Ini mudah diabaikan, tidak mengganggu atau mengganggu.
  • Ini tidak menjadi melelahkan. Pengguna masih merasa sesuai dan menyenangkan bahkan setelah tampilan berulang.

Jika demikian, pertimbangkan untuk menggunakan animasi.

Transisi

Apakah status objek atau adegan berubah, dan melakukan semua kondisi di atas untuk menggunakan animasi serta salah satu kondisi berikut berlaku?

• Perubahan status secara konseptual membingungkan, membingungkan, atau sulit dipahami.
• Perubahan status secara visual berkedip, tidak memiliki kelangsungan atau kehalusan, atau berkedip; atau tampak tidak wajar, tidak dipoles, atau berkualitas buruk, terutama jika melibatkan area layar yang besar.
• Menggunakan transisi akan membuat perubahan status muncul lebih cepat.
• Perubahan status layak menjadi perhatian pengguna khusus.

Jika demikian, pertimbangkan untuk menggunakan transisi.

Konsep desain

Animasi dan transisi adalah cara efektif untuk mengomunikasikan informasi secara visual yang jika tidak memerlukan teks untuk dijelaskan atau mungkin terlewatkan oleh pengguna.

Salah:

Benar:

Menggunakan animasi mengkomunikasikan informasi yang sama, tetapi dengan cara yang alami dan tidak mengganggu. Yang akan Anda lebih suka melihat seribu kali?

Animasi dan transisi tidak perlu meminta perhatian untuk berhasil. Bahkan, mereka sering digunakan untuk menghindari menarik perhatian pada mekanika program yang tidak perlu diperhatikan pengguna. Banyak animasi yang berhasil sangat alami sehingga pengguna bahkan tidak menyadarinya; sebaliknya pengguna hanya akan melihat ketidakhadiran mereka. Frekuensi kemunculan meningkatkan kebutuhan akan kemulusan, sehingga menghemat efek yang menuntut perhatian untuk peristiwa jarang yang benar-benar layak mendapat perhatian.

Transisi menu Mulai yang menghindari menarik perhatian.

Selain membuat program Anda lebih mudah dipahami dan terasa lebih halus, animasi dan transisi yang dirancang dengan baik adalah cara yang bagus untuk menambahkan kepribadian, karakter, dan gaya ke program Anda. Mereka dapat membuat pengalaman pengguna lebih imersif dan menarik dengan memberinya nuansa alam, dunia nyata.

Windows 7 menyoroti tombol taskbar pada hover berdasarkan posisi mouse saat ini dan warna ikon program. Pendekatan ini secara visual menarik, namun halus, menyampaikan kepribadian yang sederhana.

Namun, animasi dan transisi paling efektif dan diterima ketika mereka melayani tujuan yang jelas. Mereka harus digunakan untuk meningkatkan kegunaan, kelancaran dan aliran, dan persepsi kualitas, tanpa merusak performa secara signifikan.

Meskipun beberapa jenis animasi digunakan untuk menarik perhatian pengguna, pastikan bahwa perhatian layak dan layak mengganggu pelatihan pemikiran pengguna. Mata manusia sensitif terhadap gerakan, terutama gerakan periferal. Mungkin sulit bagi pengguna untuk berkonsentrasi ketika ada tombol taskbar berkedip atau ikon area pemberitahuan berputar. Hindari menggunakan animasi untuk mengganggu atau mengalihkan perhatian pengguna, atau menarik perhatian pada hal-hal yang tidak menjamin perhatian pengguna.

Salah:

Program tidak boleh mem-flash tombol taskbar mereka kecuali pengguna harus segera melakukan sesuatu yang penting. Dalam hal ini, satu-satunya hal yang perlu dilakukan pengguna adalah mengaktifkan program.

Gunakan animasi dan transisi karena program Anda membutuhkannya, bukan hanya karena Anda bisa. Dan untuk aksesibilitas, jangan gunakan animasi sebagai satu-satunya cara untuk menyampaikan informasi penting. Pastikan bahwa pengguna dapat memperoleh informasi yang setara dengan cara yang berbeda.

Atribut animasi dan transisi yang baik

Animasi dan transisi yang baik mencapai keseimbangan yang tepat di antara atribut-atribut ini:

• Jelas sengaja. Animasi yang baik ada di sana karena mereka harus, apakah akan mengkomunikasikan informasi, membuat interaksi terasa nyata, atau menarik perhatian pada sesuatu yang perlu diperhatikan. Dan animasi yang bertujuan akurat; jika animasi menunjukkan bahwa tugas sedang dilakukan, itu karena tugas sebenarnya sedang dilakukan.

Salah:

Dalam contoh ini, animasi menunjukkan bahwa baterai yang terisi penuh sedang diisi dayanya.

• Terlihat halus dan berkelanjutan. Animasi yang baik dengan lancar menghapus jahitan antara adegan atau perubahan status elemen dengan menunjukkan hubungan dan memberikan rasa tempat dan konteks. Kontinuitas membantu pengguna memahami bagaimana mereka mendapatkan di mana mereka berada, dan bagaimana untuk kembali ke tempat mereka berasal.

Jendela taskbar Windows 7 mempratinjau morf untuk kelangsungan saat pengguna berpindah dari satu program ke program lainnya.

• Realistis. Animasi yang baik mensimulasikan sifat dan perilaku fisik dunia nyata objek. Ini membantu pengguna memprediksi dan memahami hasil interaksi mereka. Anda tidak perlu memodelkan dunia nyata dengan tepat, tetapi jika Anda menggunakan animasi realistis, Anda harus membuatnya konsisten dengan dunia nyata. Pengguna tidak boleh terkejut atau bingung dengan hasilnya, terutama dengan animasi yang digunakan untuk manipulasi langsung.

Dalam contoh ini, animasi "move out of the way" yang digunakan oleh taskbar Windows 7 terasa lebih realistis daripada titik penyisipan statis.

• Apakah otentik. Bahkan objek yang tidak ditemukan di dunia nyata dapat tampak alami dengan didasarkan pada perilaku dunia nyata dari objek yang berbeda, tetapi terkait. Metafora ini hanya berfungsi jika hubungan dengan jelas mengkomunikasikan tujuan dan perilaku yang dimaksudkan.

Dalam contoh ini, animasi "squeegee" jendela yang digunakan oleh Windows 7 terasa otentik karena konsisten dengan bagaimana jendela kaca mungkin bertingkah di dunia nyata.

• Gunakan pemetaan alami. Pemetaan alam baik fisik maupun budaya. Pemetaan alam berbasis budaya, misalnya, mungkin dimulai dari fakta bahwa dalam budaya Barat, orang membaca dari kiri ke kanan. Akibatnya, untuk mengekspresikan urutan waktu objek, objek tengah adalah saat ini, objek di sebelah kiri berasal dari masa lalu, dan objek di sebelah kanan berada di masa depan. Ke depan dalam waktu ditunjukkan oleh gerakan kiri-ke-kanan.

Dalam contoh ini, kontrol Pemutar Media Windows memiliki pemetaan alami karena bermain memindahkan posisi dari kiri ke kanan.

• Memiliki kepribadian. Animasi yang dipilih dengan baik adalah cara yang bagus untuk menambahkan kepribadian, karakter, dan gaya ke program Anda. Mereka dapat membuat pengalaman pengguna lebih imersif dan menarik. Sementara jenis animasi menentukan apa yang dikomunikasikannya, cara spesifik di mana animasi dilakukan menunjukkan kepribadian program. Animasi yang baik memproyeksikan kepribadian yang tepat untuk program Anda, baik serius atau whimsical, atau di suatu tempat di antaranya.

Dalam contoh ini, penggunaan teks animasi Zune dan perspektif dinamis membantu membentuk kepribadiannya.

• Lihat dan rasakan responsif. Animasi yang baik tidak membahayakan produktivitas pengguna dengan memblokir pengguna dari interaksi lain, atau memaksa pengguna untuk watch. Tidak peduli seberapa alami dan menarik animasi program Anda, tidak ada yang ingin menunggu mereka secara eksklusif. Animasi yang bagus juga terlihat responsif tanpa menjadi jarring dengan memiliki awal yang cepat dengan pendaratan yang lembut. Animasi responsif juga mendapat manfaat dari mengkomunikasikan tujuan mereka dengan cepat. Pengguna tidak perlu watch animasi untuk waktu yang lama hanya untuk mencari tahu apa yang dilakukannya atau ketika itu selesai. Untuk manipulasi langsung, animasi responsif sangat penting untuk mempertahankan nuansa dunia nyata yang langsung dan menarik. Agar terasa langsung, titik kontak objek harus tetap berada di bawah penunjuk dengan lancar di seluruh manipulasi. Setiap jeda, respons berpotongan, atau hilangnya kontak menghancurkan persepsi manipulasi langsung.

Dalam contoh ini, transisi sentuhan panning terasa responsif dengan menjaga titik kontak di bawah jari pengguna selama manipulasi.

• Menarik tingkat perhatian yang tepat. Animasi yang baik biasanya halus dan hanya menarik perhatian yang diperlukan untuk memenuhi tujuan mereka. Akibatnya, mereka tidak mengganggu, mengganggu, terlalu kompleks, terlalu panjang, atau berulang. Mereka tidak menjadi melelahkan setelah melihat berulang kali.

Dalam contoh ini, pencarian Windows untuk sementara menarik perhatian pada kata pencarian yang cocok, lalu memudar ke bawah.

• Lihatlah spesial hanya jika benar-benar istimewa. Frekuensi meningkatkan kebutuhan untuk kemulusan, sehingga interaksi umum membutuhkan animasi sederhana yang mengomunikasikan ide sederhana dengan cara yang sederhana. Pesan animasi khusus dan kompleks untuk pengalaman khusus dan jarang.

Dalam contoh ini, Windows menggunakan animasi yang menarik perhatian saat startup untuk membuat pengalaman terasa istimewa, tetapi animasi seperti itu tidak akan pantas di tempat lain.

Anda akan tahu bahwa Anda telah mencapai keseimbangan yang tepat ketika pengalaman keseluruhan akan dirugikan jika salah satu atribut ini dihapus.

Membuat kosakata animasi

Animasi yang baik adalah tentang komunikasi visual yang efektif, dan konsistensi sangat penting untuk efektivitasnya. Jika Anda menggunakan transisi tertentu, seperti mendorong adegan dari kanan untuk maju ke adegan berikutnya, itu harus menjadi satu-satunya transisi yang digunakan untuk tujuan tersebut dan transisi tersebut tidak boleh digunakan untuk tujuan lain. Menetapkan arti yang berbeda pada animasi yang sama membahayakan kemampuannya untuk berkomunikasi. Dengan menetapkan animasi dan transisi tertentu ke arti tertentu, Anda membuat kosakata animasi.

Masalah ini berlaku untuk animasi dan transisi yang memiliki arti, bukan untuk yang umum bahwa pengguna tidak mungkin menetapkan arti atau mereka yang tujuannya tidak dapat disangkal. Misalnya, animasi seperti pudar dan efek khusus seperti larut tidak memiliki arti khusus, sehingga dapat digunakan secara bebas.

Kosakata yang baik menetapkan animasi yang memodelkan dunia nyata objek, perilaku fisik. Jika Anda perlu menetapkan animasi ke objek atau tindakan yang tidak memiliki rekan dunia nyata, pilih animasi yang menunjukkan bagaimana objek mungkin berperilaku nyata.

Meskipun menu Mulai bukan objek dunia nyata, efek hover-nya menyala seperti objek dunia nyata mungkin ketika diaktifkan.

Setiap animasi dalam kosakata harus jelas berbeda. Animasi harus memiliki perilaku yang sama hanya jika tindakan terkaitnya terkait serupa. Misalnya, transisi gerakan menyarankan navigasi, sehingga Anda dapat menggunakan transisi pergerakan dari berbagai arah untuk menunjukkan berbagai jenis navigasi.

Anda akan tahu bahwa animasi dan transisi Anda tidak berkomunikasi dengan baik ketika pengguna menemukan hasilnya membingungkan, mengejutkan, atau tidak terduga. Umumnya, lebih baik untuk mencapai satu tujuan dengan baik daripada beberapa tujuan yang tidak begitu baik.

Idealnya, kosakata animasi Anda harus komprehensif di semua bidang program Anda yang membutuhkannya. Jika hanya beberapa interaksi yang memiliki animasi alami, itu akan menarik perhatian bagi mereka yang tidak.

Untuk mempelajari selengkapnya tentang kosakata animasi Windows, lihat bagian Pola penggunaan di artikel ini.

Merancang kepribadian yang tepat

Sementara jenis animasi menentukan apa yang dikomunikasikannya, cara spesifik di mana animasi dilakukan berbicara dengan kepribadian program dan memperkuat mereknya.

Kepribadian program Anda harus mencerminkan sifat tugas-tugasnya dan kepribadian penggunanya, jadi itu bukan pilihan arbitrer. Sebaliknya, kepribadian yang dirancang dengan baik harus terasa otentik; jangan pernah mencoba untuk memaksanya. Kepribadian harus membuat hubungan emosional dengan pengguna. Beberapa faktor yang perlu dipertimbangkan:

• Tugas: Serius atau menyenangkan; opsional atau diperlukan.
• Konsekuensi: Serius atau kecil.
• Biaya: Gratis atau dibeli; jika dibeli, harga sedang atau mahal.
• Fokus pengguna: Grup pengguna target yang relatif sempit, atau audiens umum yang luas.
• Lingkungan pengguna: Profesional, santai, atau rumah.
• Usia pengguna: Lebih muda atau lebih tua.
• Frekuensi penggunaan: Sering atau jarang.

Kombinasi faktor-faktor ini membantu menentukan kepribadian yang sesuai untuk program Anda. Berikut adalah beberapa kombinasi yang cocok untuk jenis program umum:

Aplikasi produktivitas

Secara alami, aplikasi produktivitas harus berfokus pada produktivitas. Meskipun beberapa pengalaman khusus dapat menonjol, sebagian besar animasi lainnya harus memiliki karakteristik ini:

• Kecil
• Alami, realistis
• Halus, subdus
• Cepat, efisien
• Santai

Utilitas

Utilitas biasanya digunakan secara singkat, sehingga penggunaan animasinya bisa lebih agresif:

• Realistis, ilustrasi, penjelasan mandiri
• Aman
• Terlibat

Hiburan, permainan

Karena tujuan dari program-program ini adalah untuk melibatkan dan menyenangkan pengguna, animasi dan transisi bisa jauh lebih agresif dengan memiliki karakteristik ini:

• Besar (mungkin menjadi bagian integral dari pengalaman)
• Buatan, surreal
• Berdampak, bersemangat
• Emosional, ceria, seru
• Energik

Membuat koneksi emosional sangat penting untuk program hiburan sehingga dapat diterima untuk menekuk beberapa aturan jika melakukannya membantu membuat pengguna jatuh cinta dengan program. Misalnya, dapat diterima jika animasi atau transisi menjadi melelahkan setelah kesekian kalinya jika sebagian besar pengguna tidak mungkin menggunakan program yang sering.

Umumnya, animasi dan transisi yang kecil, alami, tertunda, efisien, namun santai adalah taruhan yang paling aman. Transisi dengan karakteristik ini biasanya mengambil jalur terpendek dari awal hingga akhir, memulai dengan cepat, mengakhiri dengan lembut, dan tidak melakukan overshoot. Selain itu, transisi yang dirancang dengan baik dirancang untuk bekerja dengan baik di seluruh rentang jarak di mana mereka akan digunakan.

Performa animasi

Saat merancang animasi, pastikan animasi tidak memengaruhi kemampuan pengguna untuk menggunakan program Anda secara efisien. Umumnya, buat animasi Anda cukup lambat untuk memenuhi tujuan mereka, tetapi cukup cepat sehingga tidak mengganggu responsivitas, menuntut terlalu banyak perhatian, atau menjadi melelahkan.

Salah:

Meskipun halaman ini mengubah animasi memiliki nuansa dunia nyata yang menarik, ini mengurangi produktivitas pengguna dengan membutuhkan waktu lebih lama untuk mengubah halaman.

Transisi singkat (200 milidetik atau kurang) adalah kasus khusus (terutama ketika mereka sering bekerja dari penundaan) karena pengguna akan menyadari bahwa mereka harus menunggu sepersekian detik untuk mereka. Pengguna bersedia menunggu animasi tersebut jika:

• Penantian yang dirasakan sangat singkat (200 milidetik atau kurang).
• Transisi membuat interaksi terasa lebih halus dan alami.
• Transisi membuat interaksi terasa lebih responsif.
• Penundaan apa pun membantu menjaga pengguna tetap memegang kendali atas interaksi.

Pengguna akan menerima penundaan singkat untuk tombol taskbar menyusun ulang animasi karena sangat singkat dan itu membuat interaksi terasa lebih alami.

Ada tiga cara di mana animasi dapat berdampak buruk pada performa: kecepatan, responsivitas, dan persepsi.

Untuk kecepatan, beberapa animasi adalah veneer visual melalui tugas intensif CPU, jadi hal terakhir yang harus Anda lakukan adalah membuat tugas-tugas ini lebih lambat dengan animasi intensif CPU. Animasi yang paling intensif CPU (animasi "berat") cenderung:

• Libatkan banyak elemen yang bergerak secara independen.
• Putar untuk durasi atau jarak yang lama.
• Libatkan sejumlah besar ruang layar.
• Secara matematis intensif.

Animasi dengan dampak yang lebih sedikit pada performa:

• Libatkan satu objek.
• Putar untuk durasi atau jarak pendek.
• Libatkan sejumlah kecil ruang layar.
• Tidak intensif secara matematis.

Untuk memastikan performa yang baik, animasi berat harus digunakan hanya untuk tugas yang tidak intensif CPU, sedangkan animasi ringan dapat digunakan di mana saja.

Untuk responsivitas, sebagian besar animasi dan transisi harus dirancang sehingga pengguna dapat berinteraksi saat animasi sedang berjalan. Kecuali animasi adalah bagian dari proses, membuatnya independen dari interaksi utama pengguna dan memungkinkan pengguna untuk mengganggunya.

Animasi mungkin tidak berdampak buruk pada performa tugas pada kenyataannya, namun pengguna mungkin memiliki persepsi seperti itu. Misalnya, jangan gunakan animasi yang tampak berat untuk tugas yang lambat dan intensif CPU meskipun tidak membahayakan performa, karena pengguna mungkin menyimpulkan bahwa animasi adalah alasan tugas lambat. Jika ada yang terlihat lambat, akan terasa lambat, jadi lebih baik menggunakan animasi yang terasa sederhana, ringan, dan cepat. Menggunakan animasi dengan awal yang snappy untuk tugas intensif CPU membantu.

Berisiko:

Meskipun animasi dalam dialog salinan file Windows tidak membahayakan performa penyalinan file, animasi tersebut berisiko membuat pengguna berpikir bahwa itu terjadi.

Juga berisiko:

Dalam contoh ini, animasi kemajuan yang tampak lamban di bilah alamat Windows Explorer membuat beberapa tugas terlihat sangat lambat.

Animasi dan transisi tidak memiliki nilai jika kualitasnya sangat buruk sehingga membuat pengalaman kurang lancar dan kurang menarik. Untuk menjaga kualitasnya, animasi harus dirancang untuk diturunkan dengan baik setiap kali sumber daya sistem yang memadai tidak tersedia. Animasi dapat menurun dengan memiliki variasi yang memerlukan lebih sedikit sumber daya (seperti panjang yang lebih pendek atau kecepatan bingkai yang lebih rendah), atau bahkan tidak berjalan sama sekali. Terlepas dari sumber daya yang tersedia, pastikan animasi memiliki kualitas tinggi dan terlihat seperti animasi alih-alih bug perangkat lunak.

Terakhir, jika pengguna percaya bahwa animasi dan transisi program Anda berbeda dari produktivitas mereka, ada kemungkinan besar beberapa pengguna ingin menonaktifkannya. Untuk mendukung kemampuan ini, hormati opsi untuk Menonaktifkan semua animasi yang tidak perlu yang ditemukan di Pusat Kemudahan Akses Windows.

Menarik tingkat perhatian yang tepat

Meskipun hanya beberapa jenis animasi dan transisi yang dirancang khusus untuk menarik perhatian pengguna, mereka harus dirancang untuk menarik tingkat perhatian yang tepat untuk memenuhi tujuan mereka dengan baik. Apa saja cara yang berbeda untuk menarik perhatian, dan bagaimana Anda memilih yang tepat?

Efek animasi

Efek animasi yang berbeda menarik berbagai tingkat perhatian. Daftar berikut ini merangkum metode yang paling umum, dimulai dengan yang paling banyak mendapatkan perhatian:

• Cepat berkedip. Menuntut perhatian segera. Dapat merusak konsentrasi pengguna di mana pun flashing terjadi.
• Berkedip sedang. Sama, tetapi menuntut lebih sedikit perhatian dengan frekuensi yang lebih rendah.
• Memantul. Terlihat dalam penglihatan periferal, dan sifatnya relatif menuntut. Pengguna cenderung memperhatikan, tetapi dapat terus berkonsentrasi di tempat lain hanya jika durasi pendek.
• Gerak. Terlihat dalam penglihatan periferal, tetapi tidak menuntut. Namun, gerakan kompleks atau 3-D menarik perhatian lebih dari gerakan sederhana atau 2-D. Pengguna cenderung memperhatikan, tetapi dapat terus berkonsentrasi di tempat lain.
• Denyut nadi sedang. Terlihat tetapi tidak mengganggu penglihatan periferal. Pengguna dapat terus berkonsentrasi di tempat lain. Dapat pulse kecerahan, warna, dan ukuran.
• Pelan-pelan berkilau/bersinar. Terlihat tapi halang. Menarik lebih banyak perhatian daripada efek statis, tetapi pengguna mungkin tidak melihat animasi kecuali mereka sudah mencari.
• Memudar. Bahkan kurang terlihat. Menarik lebih banyak perhatian daripada efek statis, tetapi pengguna mungkin tidak melihat animasi kecuali mereka sudah mencari.
• Sorotan statis/cahaya. Terlihat jika pengguna memilih untuk melihat, tetapi tidak meminta perhatian jika berada di tempat lain.
• Sekitar/alami. Sengaja tidak terlihat dengan memiliki penampilan alami dan dunia nyata.

Untuk menentukan pendekatan yang tepat untuk program atau fitur Anda, pertimbangkan bagaimana faktor-faktor ini terkait dengan skenario fitur Anda.

Misalnya, Anda merancang program pesan instan dan seseorang hanya mengirim pesan kepada pengguna. Skenario ini membutuhkan perhatian pengguna, harus terlihat di mana saja, dan biasanya pengguna ingin merespons dengan cepat. Skenario ini menunjukkan bahwa animasi berkedip sedang akan menjadi pilihan yang baik. Sebaliknya, misalkan Anda ingin memberi tahu pengguna bahwa pekerjaan cetak telah selesai. Pengguna harus dapat terus berkonsentrasi dan bekerja secara produktif di tempat lain, dan dapat diterima jika pengguna tidak memperhatikan. Skenario ini menunjukkan bahwa pulsing atau bersinar sedang hingga lambat akan menjadi pilihan yang baik.

Durasi

Durasi yang sesuai untuk perhatian mendapatkan animasi tergantung pada skenario dan jenis animasi tertentu yang digunakan. Semakin diperhatikan tuntutan efek animasi, semakin pendek durasinya. Meskipun efek yang sangat halus yang menuntut sedikit perhatian (seperti denyut lambat) dapat dimainkan tanpa batas waktu, efek yang menuntut perhatian hanya boleh dimainkan antara 1 dan 3 detik. Apa pun yang lebih panjang berisiko membuat animasi luar biasa dan mengganggu.

Di Windows 7, taskbar berkedip untuk perhatian hanya sebentar. Lebih lama lagi akan mengganggu.

Efek membusukan

Anda harus merancang animasi yang mendapatkan perhatian berdasarkan asumsi bahwa jika pengguna tidak segera merespons, itu karena mereka sibuk melakukan sesuatu yang lain dan tidak ingin terganggu. Dengan demikian, tujuan Anda harus menarik perhatian tanpa menuntutnya.

Untuk mendapatkan keseimbangan yang tepat menarik perhatian tanpa menuntutnya, merusak intensitas efek dari waktu ke waktu. Misalnya, untuk menarik perhatian, Anda dapat membuat efek awalnya kuat, tetapi kemudian memperlambat efek dengan cepat. Dengan demikian, daya yang menarik sebagian besar ditentukan oleh efek awal, tetapi kesan keseluruhan pengguna ditentukan sebagian besar oleh penyelesaiannya.

Di Windows 7, efek lampu kilat taskbar melambat di akhir.

Bagaimana dengan PowerPoint?

Transisi Microsoft PowerPoint sering sengaja melanggar panduan ini karena dirancang untuk menarik perhatian pada transisi slide dan mengharuskan pengguna untuk menunggu mereka. Selain itu, mereka tidak memiliki arti tertentu sehingga mereka tidak berkomunikasi apa pun di luar fakta bahwa slide berubah.

Transisi gaya PowerPoint, jika digunakan dengan benar, memiliki tujuan berikut:

• Mereka memecah presentasi panjang menjadi potongan yang lebih kecil dengan memaksa penyaji untuk menjeda.
• Mereka menarik perhatian audiens terhadap perubahan dalam presentasi, membantu orang memfokuskan kembali jika pikiran mereka bertanya-tanya.
• Mereka memberikan ritme presentasi sehingga tidak terasa monoton atau luar biasa.
• Gaya mereka mencerminkan kepribadian penyaji atau materi.

Meskipun ini adalah tujuan penting untuk presentasi, transisi tersebut akan menarik perhatian yang tidak perlu di UI dari sebagian besar jenis program, dan akan menjadi melelahkan dengan cepat.

Intinya: Jangan gunakan transisi gaya PowerPoint sebagai model untuk program Anda.

Jika Anda hanya melakukan enam hal ...

1. Gunakan animasi dan transisi untuk membuat program Anda lebih mudah dipahami, dan merasa lebih halus dan lebih menarik. Mereka harus memiliki tujuan yang jelas. Jangan gunakan animasi hanya karena Anda bisa, atau untuk menarik perhatian yang tidak perlu pada program Anda.
2. Tentukan kosakata animasi dan gunakan secara konsisten di seluruh program Anda. Gunakan kosakata animasi Windows 7 jika sesuai.
3. Gunakan karakteristik animasi Anda untuk memberikan kepribadian program Anda dan memperkuat mereknya.
4. Buat sebagian besar animasi sederhana, singkat, dan halang. Ingat bahwa animasi tidak perlu meminta perhatian untuk menjadi sukses. Jika animasi sesuai dan alami, pengguna hanya akan melihat ketidakhadirannya.
5. Buat animasi Anda cepat dan responsif, dan beri mereka nuansa ringan. Tidak peduli seberapa menarik animasi Anda, tidak ada yang akan ingin merasa seperti mereka sedang menunggu mereka. Desain animasi yang lebih berat untuk memiliki degradasi yang anggun.
6. Desain untuk jangka panjang. Jika animasi mengganggu, mengganggu, atau melelahkan, desain ulang atau hapus.

Pola penggunaan

Animasi memiliki beberapa pola penggunaan:

Penggunaan	Deskripsi
Umpan balik hover untuk menunjukkan di mana titik interaksi berada.	Menunjukkan bahwa titik interaksi aktif. hover juga dapat ditampilkan melalui efek statis. kosakata windows: menampilkan efek hover (persegi panjang pembatas, sorotan, perbesar) dengan efek memudar masuk/memudar untuk kehalusan. Di pemutar media digital Zune, album menutupi sorotan dan menambahkan kontrol pemutaran pada hover.
Klik umpan balik untuk menunjukkan bahwa objek yang dapat diklik responsif dan menerima klik.	Menunjukkan bahwa objek telah diklik. kosakata windows: latar belakang objek flash pada peristiwa klik bawah. untuk menampilkan kontak sentuh, gunakan efek riak. Sentuhan menampilkan animasi riak sehingga pengguna tahu interaksi dikenali.
Umpan balik pilihan untuk memperlihatkan bahwa objek dipilih.	Menunjukkan bahwa objek dipilih. pilihan juga dapat ditampilkan melalui efek statis. kosakata windows: gambar persegi panjang pilihan dengan efek pudar masuk/pudar keluar untuk kehalusan. Di Zune, album mencakup blink saat diklik, lalu mendapatkan persegi panjang pilihan pada pilihan.
Umpan balik kemajuan untuk memperlihatkan bahwa tugas sedang dilakukan.	Umpan balik kemajuan menunjukkan bahwa tugas mengalami kemajuan, biasanya dengan indikator aktivitas, bilah kemajuan, atau animasi yang mengilustrasikan tugas. menentukan umpan balik kemajuan menunjukkan kira-kira berapa banyak tugas yang telah dilakukan dan berapa banyak yang tersisa, sedangkan kemajuan yang tidak ditentukan hanya menunjukkan bahwa tugas sedang dilakukan. kosakata windows: memutar indikator aktivitas, bilah kemajuan, latar belakang kemajuan, animasi ilustrasi. Dalam contoh ini, Windows Live Messenger menampilkan umpan balik kemajuan yang tidak ditentukan selama masuk.
Penarik untuk menunjukkan bahwa sesuatu membutuhkan perhatian pengguna.	Menarik tingkat perhatian yang tepat ketika objek yang signifikan dibuat atau membutuhkan perhatian (seringkali karena perubahan), atau peristiwa penting atau mendesak terjadi. lihat menarik tingkat perhatian yang tepat untuk teknik desain. kosakata windows: berkedip, bergerak, berkilau, bersinar, berkilau. Toolbar Windows Live menganimasikan pada penampilan pertama untuk membuatnya jelas di mana ia berada.
Hubungan untuk menunjukkan hubungan antara objek atau kausalitas dalam efek.	Tampilkan hubungan, terutama ketika hubungan mungkin tidak dipahami atau diharapkan, dengan cara yang tidak mengganggu atau membingungkan. kosakata windows: morfing, transportasi, perubahan fisik seperti membalik, tumbuh dari sumber titik, menyusut ke tujuan titik. Dalam contoh ini, animasi menunjukkan hubungan antara pengaturan gamma dan pengaruhnya pada tampilan.
Ilustrasi/Pratinjau untuk menjelaskan secara visual konsep, tugas, atau efek perintah.	Animasi atau video yang menjelaskan konsep atau cara kerja sesuatu secara visual, baik untuk melengkapi atau mengganti penjelasan tekstual. melakukannya memungkinkan pengguna untuk melakukan tugas atau memilih perintah secara efisien dan percaya diri. Dalam contoh ini, perintah Panel Input PC Tablet "tunjukkan saya" menggunakan ilustrasi untuk menunjukkan cara memperbaiki, menghapus, memisahkan, dan bergabung.

Transisi memiliki beberapa pola penggunaan:

Penggunaan	Deskripsi
Objek bertambah/menyusut/muncul untuk mengubah ukuran atau status objek dengan lancar.	Perubahan objek antar status, mungkin saat bergerak. transisi membuat pengguna tetap berorientasi selama perubahan. kosakata windows: morf, ubah ukuran, slide objek masuk atau keluar. Dalam contoh ini, morf Gadget Cuaca dari status ringkasnya untuk menampilkan kotak dialog Opsinya.
Konten memperlihatkan/menyembunyikan/mengubah untuk menampilkan, menyembunyikan, atau mengubah konten dengan lancar, biasanya untuk pengungkapan progresif.	Interior jendela muncul kembali untuk menampilkan konten yang lebih banyak, kurang, atau berbeda. transisi membuat pengguna tetap berorientasi selama perubahan. kosakata windows: panel slide masuk atau keluar. jendela flyout memudar masuk dan keluar. konten yang berbeda memudar atau bergulir masuk. Kalkulator Windows memiliki transisi yang lancar di antara mode tampilan.
Kontrol atau affordance show/hide untuk menampilkan atau menyembunyikan kontrol dengan lancar atau keterjangkauannya pada hover atau mouse bergerak untuk menyederhanakan tampilan visual normal.	Menampilkan kontrol saat pengguna mengarahkan kursor ke area perintah, atau menampilkan kesediaan saat pengguna mengarahkan kursor ke kontrol. mengarahkan kuarter ke area ini menunjukkan bahwa pengguna berniat untuk berinteraksi. ketersewaan dapat bersembunyi jika pointer menjadi stasium. Dalam contoh ini, kontrol Pemutar Media Windows memudar pada hover saat dalam mode layar penuh.
Transisi adegan untuk membuat transisi adegan halus dan mulus untuk menghindari perhatian.	Perubahan adegan yang mendadak dapat menjadi menguntit, terutama untuk area layar yang besar, jadi gunakan transisi adegan untuk menciptakan kelancaran dan kelangsungan, dan untuk memberikan konteks. transisi adegan dirancang untuk menjadi kunci alami dan rendah, untuk menghindari perhatian pada proses transisi itu sendiri. kosakata windows: memudar masuk/keluar; pudar silang; geser masuk/kiri, keluar/kanan, atas, bawah; mendorong dan menutupi. Dalam contoh ini, wallpaper desktop Windows dengan lembut memudar silang di antara gambar untuk membuat transisi terasa halus dan terkontrol.
Transisi adegan khusus untuk menarik perhatian pada perubahan adegan untuk membuatnya istimewa atau memfokuskan kembali perhatian pengguna.	Meskipun sebagian besar transisi adegan tidak boleh menarik perhatian pada proses transisi, beberapa dirancang untuk memutus aliran dan menarik perhatian untuk menekankan bahwa sesuatu yang berbeda akan terjadi. untuk menarik perhatian, transisi adegan khusus dirancang agar tidak alami dan memiliki dampak visual yang tinggi. Dalam contoh ini, PowerPoint menggunakan transisi yang menarik perhatian untuk menarik audiens ke dalam perubahan.
Manipulasi langsung untuk memperlihatkan efek manipulasi langsung (seperti memindahkan, menggulir/menggeser, memutar, dan memperbesar tampilan).	Transisi menunjukkan efek manipulasi secara real time. efeknya harus terasa halus, berkelanjutan, dan konsisten dengan dunia nyata. bergerak dan memutar mungkin tidak berkelanjutan di beberapa tempat untuk menunjukkan pembatasan atau kemungkinan pilihan yang disukai. zooming membuat konten lebih besar atau lebih kecil, mungkin mengubah tingkat detail yang sesuai. Dalam contoh ini, Pembesar memperbesar tampilan dengan lancar di antara tingkat.
Manipulasi langsung yang salah untuk menunjukkan bahwa manipulasi langsung (seperti memindahkan, menggulir/menggeser) telah dicoba tetapi tidak dapat dilakukan.	Transisi menunjukkan manipulasi yang sedang dicoba, tetapi kembali ke keadaan semula. seringkali efeknya terlihat seperti manipulasi tidak dapat dilakukan karena beberapa pembatasan fisik dunia nyata. animasi ini digunakan alih-alih pesan kesalahan berbasis teks, yang akan mengganggu nuansa dunia nyata dari manipulasi. kosakata windows: bounce Dalam contoh ini, dokumen memantul untuk menunjukkan bahwa pengguna telah mencapai akhir.
Mengurutkan, memfilter, menyusun ulang transisi untuk menunjukkan bahwa presentasi atau konten kumpulan item telah berubah.	Transisi menunjukkan (atau untuk perubahan kompleks, menunjukkan) efek perubahan. dalam contoh ini, pencarian visual bing menggunakan transisi filter. Dalam contoh ini, Windows Media Center menggunakan transisi urutan ulang sebagai pengalaman khusus saat lagu sedang diputar.
Transisi performa untuk membuat tindakan tampaknya terjadi lebih cepat.	Meskipun setiap transisi memiliki potensi untuk membuat tindakan tampaknya terjadi lebih cepat, tujuan utama transisi ini adalah untuk meningkatkan persepsi performa dan responsivitas. teknik yang baik adalah menunjukkan tugas yang dilakukan dalam langkah-langkah yang disengaja. sebaliknya, menunda tindakan, merender hasil dengan cara yang serampangan, atau menggunakan indikator aktivitas akan terasa lambat. kosakata windows: lakukan tindakan secara bertahap, dengan transisi yang lancar di antara tahapan. Dalam contoh ini, Taskbar Jump List segera menampilkan item standar, lalu meluncur keluar untuk menampilkan tujuan setelah daftar siap. Melakukannya menyamarkan waktu yang diperlukan untuk membuat daftar. Sebaliknya, menunda tampilan awal akan terasa tidak responsif, dan menampilkan daftar yang tidak lengkap atau umpan balik kemajuan akan terasa jauh lebih lambat.
Pengalaman khusus untuk melibatkan dan menyenangkan pengguna selama pengalaman khusus yang jarang terjadi yang penting bagi program Anda dan memiliki perhatian penuh pengguna.	Meskipun setiap transisi memiliki potensi untuk menjadi pengalaman khusus, transisi ini paling baik disediakan untuk pengalaman jarang yang benar-benar istimewa untuk program Anda. transisi kustom digunakan untuk memberikan nuansa khusus. branding dan kepribadian seringkali merupakan elemen desain yang penting. tidak seperti pola lain, pengalaman khusus dapat menuntut perhatian, menjadi berat, dan mengharuskan pengguna untuk menunggu sejenak. akibatnya, transisi ini aus dengan cepat jika terlalu banyak digunakan karena pengalamannya tidak lagi istimewa. Dalam contoh ini, Windows Media Center menampilkan animasi saat memuat untuk segera melibatkan pengguna.

Panduan

Komunikasi yang efektif

• Tentukan dan gunakan kosakata animasi untuk memastikan bahwa animasi dan transisi Anda memiliki arti yang konsisten, dan menggunakannya secara konsisten di seluruh program Anda. Sebagian besar kosakata harus mencakup entri untuk tampilan dan penghilangan adegan dan objek, navigasi, interaksi dasar (mengarahkan, memilih, mengklik), manipulasi dan interaksi objek (memindahkan, menjatuhkan, mengubah ukuran, menggulir, menggeser, memperbesar, memutar, memfilter), dan menarik perhatian. Makna yang konsisten sangat penting untuk komunikasi yang efektif.

• Setiap kali praktis, gunakan kosakata animasi Windows. Meskipun program Anda mungkin memiliki audiens yang berbeda dan kebutuhan yang berbeda, seringkali manfaat konsistensi dan keakraban lebih besar daripada manfaat menjadi berbeda. Jika kosakata program Anda harus berbeda, gunakan jenis animasi dasar yang sama dengan Windows, tetapi berikan kepribadian yang tepat untuk program Anda.

• Jangan menetapkan arti spesifik untuk animasi generik dan transisi dalam kosakata animasi. Transisi generik seperti pudar dan efek khusus seperti larut tidak memiliki arti khusus (di luar muncul atau menghilang), sehingga dapat digunakan dengan bebas.

  Salah:

  

  Dalam contoh ini, pudar silang salah digunakan untuk menavigasi ke item berikutnya. Karena lintas-pudar tidak memiliki arti tertentu, transisi ini tidak memberikan konteks.

• Buat entri kosakata dengan jelas berbeda. Tindakan terkait mungkin memiliki efek yang sama (misalnya, memperbesar dan memperkecil harus memiliki transisi terbalik), tetapi tindakan yang tidak terkait harus memiliki efek yang jelas berbeda (misalnya, zooming tidak boleh bingung dengan memutar).

• Menjaga efek dunia nyata tetap realistis dan konsisten. Jika Anda menggunakan animasi dan transisi yang realistis, jaga agar pengalaman tetap konsisten dengan dunia nyata. Pengguna tidak boleh terkejut, bingung, atau menyesatkan oleh hasilnya. Dan untuk konsistensi, jangan mencampur metafora.

• Berikan animasi terbalik pada tindakan terbalik. Melakukannya memenuhi harapan pengguna dan menyederhanakan kosakata. Misalnya, jika panel muncul dengan geser masuk, hapus dengan geser keluar tidak dengan beberapa efek lain.

• Membuat animasi dapat dipahami. Pengguna harus dapat memahami dengan cepat tujuan animasi. Dimungkinkan untuk membuat animasi terlalu kecil, terlalu singkat (kurang dari 50 milidetik), atau sangat halus sehingga pengguna tidak dapat memahami tujuan mereka. Dalam kasus seperti itu, desain ulang untuk memperjelas arti, atau menghapus.

  Salah:

  

  Dalam contoh ini, efeknya sangat kecil dan halus sehingga beberapa pengguna dapat memahami tujuannya. Lebih baik mendesain ulang atau menghapus.

Pola

Umpan balik hover

• Agar tampak responsif, upayakan untuk memutar animasi dalam waktu 50 milidetik setelah memasuki atau meninggalkan status hover.
• Agar tampak cepat, buat durasi animasi hover kurang dari 50 milidetik.
• Gunakan memudar masuk/memudar dari efek melayang. Melakukannya membuat efek hover jelas berbeda dari klik dan umpan balik pilihan.

Klik umpan balik

• Agar tampak responsif, upayakan untuk memutar animasi dalam waktu 50 milidetik dari peristiwa klik bawah. Klik peristiwa tidak perlu klik umpan balik.
• Agar tampak cepat, buat durasi animasi klik kurang dari 50 milidetik.
• Gunakan lampu kilat latar belakang atau efek berkedip. Melakukannya membuat efek klik jelas berbeda dari umpan balik hover dan seleksi. Karena mengklik memerlukan hovering, buat umpan balik klik sebagai tambahan yang halus untuk mengarahkan umpan balik.

Umpan balik pilihan

• Agar tampak responsif, upayakan untuk memutar animasi dalam 50 milidetik pilihan atau deseleksi.
• Agar tampak cepat, buat durasi animasi pilihan kurang dari 50 milidetik.
• Gunakan efek persegi panjang pilihan yang memudar masuk/memudar. Melakukannya membuat pilihan berbeda dengan jelas dari arahkan kurun dan klik umpan balik.

Umpan balik kemajuan

• Gunakan indikator aktivitas saat tindakan tidak dapat dilakukan dalam satu detik. Melakukannya menunjukkan bahwa perintah telah diterima.
• Gunakan bilah kemajuan saat tugas akan memakan waktu lebih dari lima detik. Untuk panduan selengkapnya, lihat Bilah Kemajuan.
• Gunakan animasi umpan balik kemajuan yang membantu pengguna memvisualisasikan efek tugas yang berjalan lama. Hindari animasi umpan balik kemajuan yang tidak perlu jika animasi tidak mengomunikasikan sesuatu yang berguna, gunakan bilah kemajuan sebagai gantinya.
• Memiliki penyelesaian dan status kegagalan yang dapat diidentifikasi dengan jelas. Pengguna harus dapat menentukan status akhir ini dengan cepat.
• Berhenti memperlihatkan kemajuan ketika tugas yang mendasar tidak mengalami kemajuan. Pengguna harus dapat menentukan apakah kemajuan tidak dibuat, dan bereaksi sesuai.

Penarik

• Gunakan penarik dengan pengekangan. Kecuali informasi tersebut mendesak, kritis, atau cenderung memengaruhi perilaku langsung pengguna, biasanya lebih baik mengubah status secara tidak mencolok dan memungkinkan pengguna menemukan perubahan itu sendiri. Memecahkan gangguan, bukan kemampuan penemuan.

  

  Dalam contoh ini, ikon area pemberitahuan jaringan nirkabel menggunakan animasi untuk masalah penting, tetapi memungkinkan pengguna menemukan sinyal lemah sendiri.

• Pilih animasi yang menarik tingkat perhatian yang tepat. Animasi penarik harus menarik perhatian yang cukup pada diri mereka sendiri untuk memenuhi tujuan mereka, tetapi tidak lebih. Jika pengguna harus segera bertindak, pilih efek yang menuntut perhatian di mana pun pengguna mencari. Untuk situasi lain, lihat bagian Menarik tingkat perhatian yang tepat untuk mendapatkan kombinasi perhatian, keterlihatan, dan urgensi yang tepat.

  Salah:

  

  Asisten Microsoft Office menarik perhatian yang tidak perlu untuk diri mereka sendiri.

• Jika pengguna tidak merespons, jangan ulangi animasi atau gunakan animasi berkelanjutan. Sebaliknya, asumsikan bahwa pengguna memilih untuk tidak bertindak sekarang, tetapi dapat bertindak nanti. Animasi berkelanjutan menyulitkan pengguna untuk berkonsentrasi pada hal lain.

Animasi hubungan

• Gunakan animasi hubungan untuk memperlihatkan dari mana objek berasal atau ke mana objek tersebut pergi.
• Animasi hubungan harus dimulai atau diakhir dengan objek terpilih. Jangan perlihatkan hubungan antara objek yang saat ini tidak berinteraksi dengan pengguna. Jika pengguna melihat sama sekali, apa yang akan mereka perhatikan adalah gangguan.

Ilustrasi/pratinjau

• Gunakan pratinjau untuk menunjukkan efek perintah tanpa pengguna harus melakukannya terlebih dahulu. Dengan menggunakan pratinjau bermanfaat, Anda dapat meningkatkan efisiensi dan kemudahan belajar program Anda, dan mengurangi kebutuhan akan uji coba dan kesalahan.
• Gunakan ilustrasi dan pratinjau yang memiliki interpretasi yang jelas. Mereka memiliki sedikit nilai jika membingungkan.
• Putar hanya satu ilustrasi pada satu waktu untuk menghindari pengguna yang luar biasa. Jika beberapa ilustrasi simultan dimungkinkan, gunakan mouse hover atau tombol putar untuk memungkinkan pengguna menunjukkan minat mereka.
• Putar ilustrasi secara otomatis jika itu adalah tujuan utama jendela atau halaman. Jika tidak, jika bersifat opsional, biarkan pengguna memutarnya saat mereka siap.
• Putar animasi dengan kecepatan optimal: tidak begitu cepat mereka sulit dipahami, tetapi tidak begitu lambat mereka melelahkan untuk watch.

Objek tumbuh/menyusut

• Jangan klip konten selama mengubah ukuran. Perluas kontainer sebelum menambahkan konten. Hapus konten sebelum mengurangi kontainer.

  Salah:

  

  Dalam contoh ini, konten diklip selama mengubah ukuran.

Isi perlihatkan/sembunyikan/ubah

• Tampilkan informasi penting secara statis. Pengguna tidak perlu mengakses informasi penting melalui pengungkapan progresif.

Kontrol atau kesempurnaan tampilkan/sembunyikan

• Tampilkan kontrol penting saat pengguna memposisikan penunjuk di mana saja di dalam jendela atau panel, atau, jika layar penuh, saat mouse bergerak. Pengguna seharusnya tidak perlu berburu kontrol ini, jadi pastikan penemuan mereka.

  

  Dalam contoh ini, Windows Media Center menampilkan kontrolnya setiap kali penunjuk berada di atas jendela.

• Tampilkan kontrol sekunder atau kontrol keterjanjian saat pengguna memposisikan pointer pada atau di dekat perintah. Agar mudah ditemukan, buat lokasi jelas dan target besar.

  

  Dalam contoh ini, Windows Live Messenger menampilkan perintah sekunder saat penunjuk berada di dekat sudut kanan atas.

Transisi adegan

• Membuat transisi adegan fisik konsisten dengan pemetaan alami. Orang membaca dari kiri ke kanan dalam budaya Barat, dan diagram hierarkis mengalir dari atas ke bawah. Akibatnya, ke depan dalam waktu ditunjukkan oleh gerakan kiri-ke-kanan. Transisi adegan fisik berikut memiliki pemetaan alami:

  Transisi	Makna
  Dari kiri	Kembali ke alur tugas
  Dari kanan	Maju dalam alur tugas
  Dari atas	Memindahkan hierarki tugas ke atas
  Dari bawah	Memindahkan hierarki tugas ke bawah

• Jika program Anda memutar suara, transisi adegan desain dan transisi audio bersama-sama. Misalnya, jika adegan memudar secara bertahap, suara apa pun harus memudar secara bertahap juga. Jangan merusak transisi visual yang mulus dengan transisi suara yang tiba-tiba. Untuk panduan suara lainnya, lihat Suara.

Manipulasi langsung

• Saat menggunakan gerakan fisik dalam interaksi (seperti tossing), rancang animasi agar terasa seperti respons alami terhadap gerakan. Tautkan penyebab interaksi dengan efek transisi. Berikan karakteristik fisik dunia nyata animasi seperti akselerasi, deselerasi, momentum, ketahanan, berat, bounce, dan rotasi.
• Untuk mempertahankan nuansa langsung, pertahankan titik kontak objek di bawah penunjuk dengan lancar di seluruh interaksi. Setiap jeda, respons berpotongan, atau hilangnya kontak menghancurkan persepsi manipulasi langsung. Objek tidak boleh hilang saat dimanipulasi.

Mengurutkan, memfilter, atau menyusun ulang transisi

• Untuk perubahan sederhana, tampilkan seluruh transisi. Pengguna akan dapat mengikuti seluruh transisi dengan mudah. Perubahan sederhana melibatkan empat item atau kurang.
• Untuk perubahan kompleks, tekankan akhir gerakan saat melambat, dan biarkan mata mengisi sisanya. Melakukannya membuat gerakan terasa jauh lebih responsif dan tertib.

Transisi performa

• Pertimbangkan untuk melakukan transisi lambat dalam dua atau tiga tahap untuk membuatnya tampak lebih cepat dan segera interaktif. Gunakan urutan komposisi berikut jika sesuai:
  • Bingkai eksternal
  • Background
  • Konten awal (menggunakan representasi sementara jika perlu)
  • Kontrol utama (sehingga pengguna dapat langsung berinteraksi)
  • Kontrol sekunder dan elemen UI yang tersisa
  • Konten akhir (jika representasi sementara digunakan) Gunakan transisi seperti pudar dan slide untuk membuat komposisi tampak halus, teratur, dan disempurnakan.

Saat menggulir tampilan "Mata burung", peta Bing menampilkan latar belakang kisi sementara. Melakukannya memungkinkan pengguna untuk terus segera menggulir, baik sebelum konten akhir dirender.

Animasi pengalaman khusus

• Pertimbangkan kembali layar percikan animasi (serta layar percikan statis). Seringkali layar splash hanya menarik perhatian pada berapa lama program membutuhkan waktu untuk memuat, dan mereka memakai sambutan mereka dengan cepat. Meskipun layar splash dapat diterima jika ditampilkan hanya ketika interaksi pengguna tidak dimungkinkan, setiap kali praktis alternatif yang lebih baik adalah merancang program Anda sehingga pengguna dapat langsung berinteraksi dengannya, bahkan saat masih dimuat.
• Berikan perintah Lewati Pengenalan jika layar splash animasi membutuhkan waktu lebih dari tiga detik. Mengklik di mana saja pada layar splash juga harus menutupnya. Atau, gunakan versi pendek animasi setelah periode awal.

Performa

• Jangan membuat pengguna menunggu animasi dan transisi program Anda. Gunakan animasi dan transisi singkat (kurang dari 200 milidetik) setiap kali praktis. Gunakan animasi yang lebih cepat (100 milidetik) untuk operasi yang lebih sering. Desain animasi yang lebih panjang (lebih dari satu detik biasanya umpan balik kemajuan, ilustrasi, dan pola pengalaman khusus) sehingga pengguna dapat terus bekerja saat mereka berjalan.

• Rancang animasi jangka panjang untuk memperjelas kepada pengguna bahwa mereka dapat berinteraksi saat animasi sedang berjalan. Pengguna tidak akan mencoba untuk terus bekerja jika petunjuk visual menunjukkan bahwa mereka tidak bisa.

  

  Dalam contoh ini dari Windows Internet Explorer, bilah kemajuan kunci rendah di bilah status menunjukkan bahwa pengguna tidak perlu menunggu penyelesaian sebelum mereka dapat berinteraksi.

• Gunakan animasi ringan untuk tugas intensif CPU. Melakukannya memberikan daya pemrosesan penuh pada tugas. Selain itu, pengguna tidak akan melihat bahwa animasi ringan adalah alasan mengapa tugas ini intensif CPU.

• Jangan tampilkan indikator aktivitas selama animasi atau transisi. Melakukannya akan menghancurkan efeknya. Desain animasi dan transisi sehingga mereka dapat segera memulai.

• Desain animasi untuk diturunkan dengan baik setiap kali ada sumber daya sistem yang tidak mencukuum. Animasi dapat menurun dengan memiliki variasi yang memerlukan lebih sedikit sumber daya (seperti panjang yang lebih pendek atau kecepatan bingkai yang lebih rendah), atau bahkan tidak berjalan sama sekali. Terlepas dari sumber daya yang tersedia, pastikan animasi memiliki kualitas tinggi dan terlihat seperti animasi alih-alih bug perangkat lunak.

  Salah:

  

  Dalam contoh ini, transisi pemulihan jendela digunakan meskipun tidak ada sumber daya sistem yang memadai untuk memainkannya dengan baik. Akibatnya, bingkai beku tampaknya merupakan bug. Jika sumber daya tidak tersedia, lebih baik hanya menampilkan jendela tanpa transisi.

Karakteristik animasi

Animasi dan transisi yang dirancang dengan baik umumnya memiliki karakteristik berikut:

• Durasi singkat. Sebagian besar animasi harus antara 100 dan 300 milidetik, sebaiknya 1/6 detik (167 milidetik) atau 1/4 detik (250 milidetik). (Pengalaman khusus dan umpan balik kemajuan bisa lebih lama.) Gunakan waktu animasi yang lebih cepat untuk operasi yang lebih sering. Umumnya, animasi yang lebih panjang membutuhkan lebih banyak waktu untuk diselesaikan, membutuhkan lebih banyak waktu untuk memahami, dan merasa lambat.

• Daya tanggap. Animasi harus dimulai dalam waktu 50 milidetik dari peristiwa yang memulai atau tindakan pengguna. Waktu mulai yang lebih lama terasa tidak responsif.

• Akselerasi/percepatan. Agar terlihat alami, sebagian besar efek animasi perlu dipercepat saat memulai dan mendeselerasi saat berhenti. Agar terlihat responsif, desain animasi untuk memulai dengan cepat. Agar tampak terkontrol, desain animasi untuk memiliki pendaratan lunak di akhir. Meskipun ini berlaku untuk efek gerakan, ini juga berlaku untuk efek apa pun yang menyarankan gerakan, seperti zoom dan bahkan memudar.

  

  Sebagian besar animasi harus memiliki awal yang cepat dan ujung yang lembut untuk memiliki nuansa responsif, namun terkontrol.

• Gerak. Animasi yang menggambarkan gerakan khususnya perlu mempercepat dan mempercepat, jadi jangan gunakan gerakan linier kecuali durasi animasi sangat pendek. Gerakan harus mengambil jalur pendek dari awal hingga akhir, tanpa overshooting. Jalur gerakan penuh tidak selalu diperlukan. Jika sesuai, tekankan akhir gerakan saat melambat, dan biarkan mata mengisi sisanya. Melakukannya membuat gerakan terasa jauh lebih responsif dan tertib. Saat menjiwai gerakan beberapa objek secara bersamaan, beri mereka jalur yang sedikit berbeda dengan pengaturan waktu yang sedikit berbeda untuk merasa lebih alami.

• Kecepatan bingkai. Sebagian besar animasi harus menggunakan kecepatan bingkai 20 bingkai per detik. Jika animasi untuk pengalaman khusus atau terkait dengan tujuan utama program, pertimbangkan untuk menggunakan laju yang lebih tinggi 24 30 bingkai per detik untuk meningkatkan kelancaran dan realisme.

• Menskalakan. Desain animasi agar berfungsi dengan baik di seluruh rentang penggunaan yang dimaksudkan. Misalnya, transisi halaman harus dirancang agar berfungsi untuk semua ukuran halaman.

• Kepribadian. Desain animasi agar terasa alami, subdus, dan efisien daripada buatan, whimsical, atau lambat.

Teks animasi

• Meskipun Anda dapat menampilkan teks menggunakan transisi, jangan terus menganimasikan teks. Teks animasi sering mengganggu dan lebih sulit dibaca daripada teks statis. Pengecualian:
  • Anda dapat menganimasikan teks dalam situasi di mana teks dianimasikan secara tradisional, dan Anda memberikan alternatif yang dapat diakses.
  • Anda dapat menganimasikan teks jika tujuan teks terutama dekoratif.

Dalam contoh ini, Zune menganimasikan teks tetapi tujuannya terutama dekoratif. Tidak ada masalah jika pengguna tidak membaca teks dengan hati-hati.

Mengurangi konsumsi daya

• Rancang animasi Anda untuk mengurangi konsumsi daya. Ketika dirancang dengan benar, animasi tidak boleh meningkatkan konsumsi daya secara signifikan. Untuk mengurangi konsumsi daya:
  • Berhenti menganimasikan saat layar mati. Tampilan mungkin nonaktif untuk tujuan menghemat daya.
  • Jangan gunakan animasi jangka panjang yang tidak dimulai pengguna. Animasi yang menggunakan timer berkala resolusi tinggi mengurangi efisiensi manajemen daya prosesor. Selain itu, pastikan untuk menonaktifkan timer berkala resolusi tinggi saat animasi selesai.
  • Tangguhkan semua animasi ketika sistem menjadi menganggur. Periode tidak aktifnya pengguna untuk menganggur ditentukan oleh Opsi Daya di Panel Kontrol.

Aksesibilitas

• Jangan gunakan animasi sebagai satu-satunya cara untuk menyampaikan informasi penting. Animasi harus mengkomunikasikan informasi yang berguna tetapi tidak penting, karena tidak dapat diakses oleh pengguna dengan gangguan visual.

• Pastikan informasi yang setara tersedia melalui cara lain, seperti:

  • Oleh inspeksi. Pengguna dapat menentukan informasi yang setara dengan melihat layar atau objek yang terlibat dalam animasi.
  • Dengan interaksi sederhana. Pengguna dapat menentukan informasi yang setara dengan mengarahkan kutipan, mengklik, atau mengklik dua kali.

  

  Halaman beranda Bing memiliki animasi awal yang mengungkapkan beberapa hot spot. Pengguna juga dapat menampilkan hot spot dengan memindahkan kursor di dekat mereka.

  Perhatikan bahwa "informasi yang setara" tidak berarti informasi yang identik. Informasi mungkin dalam format yang berbeda atau memerlukan pengurangan sederhana.

• Jika sesuai, atur fokus input pada objek yang diubah selama transisi. Melakukannya memungkinkan teknologi bantuan untuk mendeteksi di mana perubahan terjadi. Tetapi jangan mengubah fokus input saat pengguna menggunakan keyboard.

• Jangan gunakan animasi atau transisi yang berkedip atau mengubah ukuran objek dengan cepat. Berkedip dan perubahan layar cepat dapat menyebabkan masalah bagi orang dengan gangguan kejang dan gangguan neurologis lainnya.

• Perbolehkan pengguna mematikan animasi dan transisi program Anda. Untuk mendukung kemampuan ini, hormati opsi Matikan semua animasi yang tidak perlu di Pusat Kemudahan Akses di Windows.

  Pengembang: Anda dapat menentukan apakah animasi diaktifkan menggunakan SystemParametersInfo API.

• Tugas desain dengan asumsi bahwa pengguna akan menonaktifkan animasi program Anda. Pastikan bahwa melakukannya tidak mengganggu alur tugas secara signifikan.

Untuk panduan aksesibilitas lainnya, lihat Aksesibilitas.

Dokumentasi

• Hindari merujuk ke animasi jika memungkinkan. Sebagai gantinya, lihat objek yang dianimasikan dan, jika perlu, jenis animasi.
• Jangan mengacu pada transisi, kecuali dalam dokumentasi teknis. Sebagai gantinya, lihat objek dalam status akhir atau awalnya.
• Jika pengguna secara eksplisit memulai animasi, gunakan putar kata kerja; jika tidak, gunakan kata kerja untuk dokumentasi teknis.

Contoh:

• Anda akan tahu bahwa item membutuhkan perhatian Anda ketika ikonnya mulai memantul.
• Pertama, pilih foto yang ingin Anda cetak (perhatikan bahwa foto diperbesar saat dipilih).
• Gunakan transisi lintas pudar untuk mengubah status objek dengan mulus.