(Part 3) Tingkatkan Desainmu Dengan Mengupas Prinsip Continuation dan Common Fate

Pada dua bagian pertama dari seri ini, kami melihat prinsip similarity dan proximity untuk memahami bagaimana elemen dapat diatur oleh keterkaitan mereka dengan elemen lain, dan kami melihat prinsip closure dan figur/ground untuk memahami bagaimana hubungan terbentuk melalui penggunaan ruang positif dan negatif. Pada bagian akhir dari seri ini, kita akan fokus pada prinsip kelanjutan dan nasib umum, yang melibatkan gerakan, baik tersirat dan animasi, untuk menciptakan hubungan.

Seperti dalam artikel sebelumnya, pertama-tama kita akan menggali bagaimana prinsip bekerja dan kemudian melihat contoh dunia nyata sehingga Anda dapat menggunakannya secara efektif dalam desain Anda sendiri. Mari kita masuk membahas mengenai continuation.

Continuation

Sebuah jalan membentang ke kejauhan. Tangga mendaki bukit yang tinggi. Sebuah sungai yang berkelok-kelok melalui sebuah kota. Setiap hari kita mengalami pemandangan serupa yang menuntun mata kita melalui mereka, bahkan tanpa menyadarinya. Kita cenderung mengikuti terus menerus, gerakan tanpa gangguan, berikut elemen yang sejajar dalam garis lurus atau kurva. Kita melihat elemen sejajar ini sebagai pengelompokan terkait lebih daripada kita melakukan elemen dalam garis dan kurva yang tidak selaras. Ini adalah prinsip continuation.

Street cutting through a city
Mata ditarik ke jalan, melalui kota, ke cakrawala.

Continuation menentukan bagaimana kita menafsirkan arah dan gerakan melalui komposisi. Pikiran kita memilih jalan yang paling tidak berlawanan, memahami baris sebagai melanjutkan sepanjang arah yang telah ditetapkan. Dalam contoh di bawah ini, mata kita mengikuti jalan yang kurang mendadak, mengikuti garis lurus atau jalan melengkung melalui komposisi di sebelah kiri, lebih daripada jalan yang menggelegar di sebelah kanan.

continuation exmaple
Kami secara naluriah mengikuti jalan yang paling tidak resisten, melanjutkan arah yang telah ditetapkan.

CONTINUATION DALAM PRAKTEKNYA

Saat mendesain, kita dapat menggunakan Continuation untuk memandu mata kita terhadap desain kita, membangun hubungan antara elemen serta mengarahkan perhatian ke kelompok atau elemen tertentu.

Seperti yang terlihat di situs Nike, ditunjukkan di bawah ini, deretan sepatu yang baik selaras, memungkinkan mata kita untuk mengikuti jalan yang teratur dari kiri ke kanan. Continuation memandu mata kita melalui setiap baris, mengelompokkannya bersama-sama dan berkomunikasi dengan kita bahwa mereka adalah produk terkait. Continuation lebih ditingkatkan lagi dengan semua sepatu menunjuk ke arah yang sama, mendorong gerakan dari kiri ke kanan. Omong-omong, saya harus menambahkan bahwa banyak dari prinsip yang telah saya bahas dalam artikel sebelumnya juga di tempat kerja di sini. Continuation sering dibantu oleh similarity dan proximity, dan, dalam contoh ini, prinsip membantu untuk menyelaraskan sesuatu dengan mengelompokkan item serupa berdekatan, untuk membentuk sebuah hubungan.

Nike website
Kelanjutan menetapkan arah dan memimpin kita secara horizontal melalui setiap baris.

Pada perangkat mobile, real estat sangat terbatas, dan dalam konteks di bawah ini, Continuation membantu dalam membimbing mata melalui pilihan dalam setiap kategori di Apple’s App Store. Meskipun kami hanya melihat beberapa aplikasi pertama, kami memahami bahwa lebih banyak opsi yang ada di sebelah kanan. Continuation bekerja untuk membangun jalan ini dan arah bagi kita untuk diiikuti, bergerak horizontal dari kiri ke kanan. Sekali lagi, banyak prinsip yang bekerja di sini untuk membantu continuation, termasuk similarity dan proximity, tetapi juga closure, karena pikiran kita akan mengisi kekosongan dari apa yang diharapkan beberapa aplikasi pertama dapat dilampaui. Selain itu, karena item yang bergerak bersama-sama dianggap berhubungan, common fate berfungsi di sini, juga (kita akan menggali lebih ke dalam ini segera). Continuation dapat digunakan untuk menyiratkan arah untuk mengikuti ketika ruang terbatas.

Meskipun, Continuation tidak hanya cocok untuk gerakan horisontal. Hal ini juga dapat memimpin mata secara vertikal melalui komposisi, menarik kita untuk menggulir untuk melihat item. Dalam contoh di bawah ini dari Trulia, elemen konsisten rapi selaras dan dikelompokkan ke dalam kartu, yang memandu mata ke bawah melalui listing.

Trulia website
Kelanjutan menetapkan arah dan memimpin kita secara vertikal melalui listing.

Selain itu, kolom informasi, seperti apa yang Anda temukan di hasil penelusuran Google, juga menggunakan continuation untuk memandu mata. Kolom utama hasil di sebelah kiri, serta kotak informasi di sebelah kanan, keduanya mendorong gerakan secara vertikal melalui informasi.

Google search results
Kelanjutan mengarahkan mata secara vertikal melalui kolom informasi.

MENGGANGGU ALIRAN

Sementara continuation dapat digunakan untuk memandu pengguna melalui komposisi, kita juga dapat mengacaukan untuk memusatkan perhatian atau menggambarkan awal atau akhir bagian.

Gangguan di sini mungkin disengaja atau mungkin tidak disengaja. Kita perlu berhati-hati bahwa setiap gangguan yang kita perkenalkan adalah disengaja dan melayani tujuan. Gangguan tertentu dapat membahayakan. Membiarkan terlalu banyak ruang di antara elemen atau menggunakan elemen atau gambar besar yang tampaknya tidak menampilkan tujuan dapat secara keliru menandakan akhir dan menyebabkan pengguna berhenti saat Anda tidak menginginkannya. Hal ini terutama diucapkan pada perangkat mobile, di mana vertikal bergulir ruang terbatas.

MENCIPTAKAN CONTINUATION YANG EFEKTIF

Seperti yang kita lihat dalam contoh, continuation memandu gerakan melalui Desain, mengurangi upaya untuk menavigasi komposisi, sekaligus menciptakan hubungan antara elemen dan pengelompokan. Untuk menciptakan continuation yang efektif, kita dapat mengikuti beberapa praktik terbaik yang sederhana:

  • Hindari gangguan, atau gunakanlah untuk keuntungan Anda. Untuk mendorong gerakan, Hindari elemen dalam desain Anda yang dapat mengganggu arah gerakan yang telah ditetapkan, seperti terlalu banyak ruang putih di antara elemen atau grafik atau gambar besar. Sebaliknya, Anda dapat menggunakan gangguan untuk memusatkan perhatian pada elemen penting atau untuk menandakan awal atau akhir bagian atau pengelompokan.
  • Pastikan keselarasan dan konsistensi yang baik antar elemen. Pastikan bahwa elemen membangun arah sejajar dengan baik dan secara konsisten ditata. Kurang selaras atau tidak konsisten elemen gaya akan merusak arah gerakan atau menyebabkan mata kehilangan arah pada hal yang ingin ditetapkan. Seperti yang terlihat dalam contoh Trulia, elemen baik – selaras dan gaya konsisten akan meminimalkan beban kognitif pada pengguna saat mereka menavigasi komposisi.
  • Gunakan isyarat untuk menyarankan arah. Untuk scrolling horisontal, seperti yang kita lihat di App Store, ditunjukkan bahwa ada lebih banyak yang melihat ke kiri atau kanan untuk membantu menetapkan arah gerakan.

Mengikuti aturan ini akan membantu memandu pengguna melalui desain Anda dan membantu mereka untuk lebih memahami pengelompokan terkait.

Cukup mudah, kan? Continuation pasti cukup mudah, prinsipnya sederhana untuk dipahami, dan mudah untuk dikenali dalam desain dan diterapkan dalam pekerjaan kita sendiri. Kita sering menggunakannya tanpa perencanaan atau bahkan berpikir tentang hal itu. Namun, mengenali dan memahami bagaimana mendorong gerakan melalui desain akan membantu Anda memiliki pengalaman yang lebih baik bagi pengguna Anda.

Prinsip kami yang berikutnya sedikit lebih rumit, menggabungkan animasi untuk membentuk hubungan. Mari kita lihat apa artinya.

Common Fate

Common fate adalah prinsip kuat bagi perancang untuk dipegang, karena melibatkan gerakan dan animasi. Gerakan dapat digunakan untuk memperjelas hubungan antara elemen, membantu pengguna untuk melihat bagaimana kelompok elemen yang berbeda bersama-sama, serta untuk mengarahkan perhatian ke tempat yang kita inginkan. Ketika elemen bergerak ke arah yang sama, mereka dianggap lebih terkait daripada elemen yang tidak bergerak atau yang bergerak ke arah yang berbeda atau pada kecepatan yang berbeda.

Ambil ikan, misalnya. Kita semua mungkin melihat sebuah sekolah ikan berenang bersama-sama dalam gerakan yang sinkron. Mereka melakukan ini, dalam bagian, sebagai mekanisme pertahanan untuk menjaga terhadap predator – dengan menempel bersama-sama, mereka cenderung mewakilkan common fate yang indah. Ketika ikan berenang bersama seperti ini, mereka benar-benar berbagi common fate, berbagi gerakan yang sama, arah dan kecepatan untuk mencapai tujuan mereka untuk bertahan hidup. Kami melihat ikan secara keseluruhan, terkait, bergerak massa, bukan ribuan ikan individu. Sebuah sekolah ikan bergerak bersama-sama menunjukkan prinsip common fate dengan baik.

Keterkaitan elemen yang bergerak bersama ini dianggap paling kuat ketika elemen tersinkronisasi — bergerak ke arah yang sama dan pada waktu dan kecepatan yang sama. Bahkan ketika elemen dikelompokkan berdasarkan kesamaan, seperti yang kita lihat di bawah, elemen yang bergerak bersama dianggap terkait, terlepas dari pengelompokan sebelumnya.

Synchronous movement
Common fate mengalahkan elemen dikelompokkan oleh kesamaan, membentuk hubungan baru.

Ketika arah, waktu atau kecepatan bervariasi, hubungan akan melemah. Seperti yang kita lihat di bawah, ketika lingkaran bergerak ke arah yang berbeda dan pada kecepatan yang berbeda, kita kehilangan hubungan yang kita miliki ketika mereka bergerak bersama pada kecepatan yang konsisten dan dalam arah yang konsisten. Sekarang, tidak ada perintah atau gerakan yang tersinkronisasi untuk menunjukkan mana yang berkaitan.

Non-synchronous movement
common fate kehilangan kekuatannya ketika gerakan tidak disinkronkan.

COMMON FATE DALAM PRAKTEKNYA

Anda mungkin tidak menyadarinya tapi common fate pasti ada di sekitar Anda, setiap harinya. Hal ini dapat dilihat lewat lalu lintas, seperti saat mobil bergerak bersama menyusuri jalan, dan di alam, seperti kawanan burung terbang bersama diatas kepala kita. Dalam desain, kita menggunakan common fate untuk mendefinisikan elemen terkait, membedakan antara elemen yang paling penting dan dalam konteks saat ini, menjaga pengguna supaya tetap fokus.

Seperti yang terlihat di aplikasi Paper Facebook, bahkan sesuatu yang biasanya menjadi tempat untuk melakukan swipe-ing dalam artikel menunjukkan tindakan common fate. Di sini, selama kartu bergerak ke arah yang sama, mereka dianggap sebagai konten terkait, terpisah dari alat navigasi dan gambar artikel yang lebih besar di atas. Gerakannya memandu perhatian terhadap kartu, memberi mereka lebih banyak arti penting dan menjaga fokus mereka pada tugas pemindai artikel.

Demikian juga, common fate dalam tindakan seperti contoh dari Epicurious, sebuah aplikasi untuk menemukan resep dan membuat daftar belanja. Di sana, ketika tombol Sortir ditekan, kita melihat bahwa opsi bergerak bersama menjadi satu kesatuan, menyebabkan kita jadi menganggap mereka sebagai elemen terkait yang melakukan tindakan yang sama. Gerakan ini juga membuat perhatian terfokus pada tugas yang ada. Elemen yang bergerak bersama dianggap terkait dan melakukan tindakan serupa.

web epicurious via google.

Contoh bagus lainnya dari prinsip dalam aksi terlihat di aplikasi kalender Peek. Peek menggunakan common fate di seluruh aplikasi untuk menyampaikan hubungan antara elemen. Misalnya, seperti yang terlihat di bawah, ketika tanggal ditekan, konten terbuka dan bergerak ke bawah, mengekspos peristiwa yang ada hari itu. Gerakan ini berfungsi untuk menghubungkan peristiwa dengan hari yang dipilih dan untuk memusatkan perhatian pada peristiwa di dalam.

peek via google.

MENGGANGGU SINKRONISASI

Seperti yang telah kita lihat, ketika elemen bergerak bersama dalam arah dan kecepatan yang sama, mereka membentuk hubungan kuat yang berbeda dari elemen lain dalam desain. bagaimanapun, kekuatan sebenarnya dari common fate muncul ketika gerakan ini terganggu. Ketika sesuatu bertentangan disinkronkan dengan gerakan biji-bijian, itu mengganggu harapan kita. Di sinilah kita dapat memandu perhatian pengguna ke elemen atau pengelompokan dalam desain, mengklarifikasi hubungan antara pengelompokan atau negara.

Ketika gelombang mikro saya baru-baru ini ada di Fritz, saya meluncur ke aplikasi Home Depot untuk melakukan penelitian kecil dan tersandung pada tindakan common fate didalamnya. Setelah men-swipe melalui gelombang mikro, bergerak naik dan turun melalui daftar, saya memutuskan untuk membandingkan beberapa model. Mengetuk tombol “Bandingkan” di bagian atas, memindahkan listing sedikit ke kanan, mengekspos kotak centang untuk memilih gelombang mikro untuk dibandingkan. Gerakan tak terduga ini menciptakan kontras yang cukup dengan gerakan men-swipe listing sehingga memfokuskan perhatian saya pada konteks baru dalam memilih produk untuk dibandingkan.

Salah satu favorit saya yang menggunakan common fate adalah Houzz App. Houzz adalah aplikasi perbaikan rumah guna untuk menemukan desain dan produk untuk menginspirasi desain rumah Anda sendiri. Common fate digunakan sangat cemerlang untuk menarik perhatian pada produk untuk di eksplorasi dan dibeli dalam aplikasi. di bawah ini, ketika kita men-swipe melalui gambar, mencari inspirasi, kita terlibat dalam common fate sebagai gambar yang bergerak ke arah yang sama. Meski demikian, gerakan ke depan mendadak terganggu oleh Tag produk yang berayun berwarna hijau di dalam gambar. Gerakan tak terduga ini mengganggu gerakan swipe, merebut perhatian kami dan membuat kita menjadi ingin lebih mengeksplorasi produk dalam gambar. Gerakan tak terduga membuat kita jadi memfokuskan perhatian di tempat yang kita inginkan.

Akhirnya, PBS menggunakan common fate untuk menarik perhatian ke artikel berikutnya untuk dibaca. Ketika kita sampai di akhir artikel, artikel berikutnya yang disarankan dapat di slide dari kanan, mengganggu gerakan vertikal bergulir dan menarik fokus perhatian kita pada elemen. Jika ini hanya link statis di bagian bawah layar, mungkin diabaikan, terutama dengan link media sosial yang berjuang untuk menarik perhatian. Tapi dengan menganimasikan elemen artikel berikutnya dan membuatnya bergerak melawan scrolling vertikal, perhatian kita akan difokuskan padanya, bukan elemen di sekitarnya.

MENCIPTAKAN COMMON FATE YANG EFEKTIF

Melalui gerak, common fate membantu pengguna untuk memahami elemen mana yang terkait, dan juga yang penting. Kita dapat mengikuti beberapa praktik terbaik untuk menciptakan common fate yang efektif dalam pekerjaan kita sendiri:

  • Tetap Membuat gerakan tersinkronisai. Seperti yang kita lihat dalam contoh Paper, elemen atau pengelompokan yang bergerak bersama dianggap berkaitan. Untuk membuatnya efektif, jagalah arah dan kecepatan konstan.
  • Gunakan kontras untuk memusatkan perhatian. Mengganggu gerakan dapat menyebabkan pengguna menjadi fokus pada gangguan, seperti yang kita lihat dalam contoh Houzz. Gunakan kontras ini untuk memusatkan perhatian pada elemen penting atau untuk menandakan perubahan dalam keadaan.

Kesimpulan:

Sekarang anda memilikinya: dua prinsip yang dapat Anda gunakan untuk menciptakan pengalaman yang lebih baik bagi pengguna Anda. Dengan continuation, kita dapat membimbing dan mendorong gerakan melalui desain. Dengan common fate, kita dapat membantu pengguna memahami elemen atau pengelompokan mana yang terkait, serta mengarahkan perhatian ke tempat yang kita inginkan.

Dengan menggunakan prinsip ini, bersama dengan prinsip similarity, proximity, closure dan figure/ground, maka akan memperkuat keterampilan desain Anda sendiri dan membantu Anda menciptakan pengalaman yang lebih baik bagi pengguna Anda. Oh, dan satu hal terakhir, setelah menerapkan prinsip ini, pastikan untuk menguji desain Anda dengan pengguna untuk melihat apa yang terbaik bagi mereka.

sumber: smashingmagazine.com

Latest articles

12.6k Followers
Follow

Related articles