Sızıntı: Google, Material 3'ün İfade Edici Tasarımını Nasıl ve Neden Geliştirdi?
Google, bu ay merakla beklenen duyurusundan önce, şirketin en son tasarım yönelimi olan Material 3 Expressive Design'ın arkasındaki düşünce ve araştırmaları ayrıntılarıyla anlatan bir blog yazısı yayınladı.
Makalenin tamamı blogda arşivlendi Wayback Makinesi (Aşağıda arşivlenmiş versiyonda gösterilmeyen görsellerle birlikte gösterilmiştir.) İşte ana noktalar:
Material 3 Expressive, Google'ın "tasarım için cesur yeni bir yön" olarak adlandırdığı şeyi temsil ediyor ve "Google'ın tasarım sisteminde şimdiye kadarki en çok aranan güncelleme". Google, uygulamaların "temiz" ve "sıkıcı" tasarımların ötesine geçerek, insanlarla duygusal düzeyde bağ kuran arayüzler oluşturmasını hedefliyor. Tam ismine ek olarak, “M3 Expressive” veya kısaca “ifade edici tasarım” olarak da anılıyor.
Material 3 Expressive, araştırmanın bir sonucu olarak ortaya çıktı. Bu, tasarım kararlarını verilere devreden 41 Shades of Blue tarzında bir araştırma değil, araştırma, tasarım ve mühendisliği içeren iş birlikçi bir soruşturmadır.
2022'de Material Design ekibi şunu merak etmeye başladı: "Neden tüm bu uygulamalar bu kadar benzer görünüyor? Çok sıkıcı mı? Daha fazla his için yer yok muydu?"
Son üç yıldır bu diyaloğun etkilerini araştırdık ve Malzeme Tasarımının bir sonraki evrimini bulmak için düzinelerce tasarım ve araştırma turu gerçekleştirdik. Dünyanın dört bir yanından 46'den fazla katılımcının yer aldığı, yüzlerce tasarıma sahip 18000 ayrı araştırma çalışması sonucunda, son derece kullanışlı ve güzel bir sistem geliştirdik. Material 3 Expressive'in ilkeleri sağlam araştırmalara dayanıyor ve yerleşik kullanılabilirlik en iyi uygulamaları üzerine kurulu, bu nedenle tasarımcılar bu yeni bileşenleri ve ilkeleri güvenle kullanabilir, kullanımı kolay ve insanların bağ kurabileceği bir şey oluşturduklarını bilerek kullanabilirler.
Bu araştırma çalışmaları şunları içermektedir:
- Göz takibi: Kullanıcıların dikkatlerini nereye odakladıklarını analiz edin. Göz takibi, kullanıcı davranışlarını anlamak ve tasarımda iyileştirme yapılabilecek alanları belirlemek için güçlü bir araçtır.
- Anketler ve odak grupları: Farklı tasarımlara verilen duygusal tepkilerin ölçülmesi. Bu yöntemler kullanıcıların tasarımları duygusal düzeyde nasıl algıladıklarını anlamamıza yardımcı olur.
- Deneyler: Duyguları ve tercihleri toplayın. Kullanıcıların hangi tasarımları tercih ettiğini belirlemek ve farklı unsurların kullanıcı deneyimi üzerindeki etkisini değerlendirmek için deneyler önemlidir.
- Kullanım kolaylığı: Katılımcıların arayüzü ne kadar çabuk anladıklarını ve kullandıklarını öğrenin. Kullanılabilirlik, herhangi bir tasarımın başarısının kritik bir ölçüsüdür ve kullanıcıların hedeflerine ne kadar kolay ve verimli bir şekilde ulaşabileceklerini belirler.
Google, "İfade edici tasarımın temel parçaları renk, şekil, ölçek, hareket ve sınırlamanın kullanımıdır." diyor. Ek olarak: “Material 3 Expressive, şekil ve rengin cesurca kullanımını öne çıkarıyor ve keyifli kullanıcı deneyimleri yaratıyor.” Etkileyici ve akılda kalıcı kullanıcı deneyimleri yaratmayı amaçlayan Material Design 3 Expressive'in temel bir parçası, cesur renklerin ve şekillerin kullanılmasıdır.
Bu tasarım unsurları, arayüzün önemli unsurlarına dikkat çekerek, örneğin temel eylemleri vurgulayarak ve benzer unsurları bir arada gruplayarak ürünü daha kullanıcı dostu hale getirmek için de önemlidir. Bu, kullanıcı deneyimini iyileştirir ve daha akıcı ve verimli hale getirir.
Yüzen araç çubuğu Material 3 Expressive tarafından üretilen bir bileşendir. Konsept tasarımlarda ekranın tüm genişliğini kaplamayan hap şeklinde bir alt çubuk görüyoruz. Sonuç olarak arka planın küçük bir kısmını görüyoruz, kenardan kenara tasarımlar daha belirgin hale geliyor. Bu, bugün Google Chat'te bulunan özelliklere benziyor.
Google araştırması, "ifade edici tasarımların kullanımının daha kolay olduğunu" ve kullanıcıların "her ekrandaki ana eylemi hızla keşfetmelerine ve daha hızlı gezinmelerine" yardımcı olduğunu gösteriyor.
…Katılımcılar, temel kullanıcı arayüzü öğelerini 4 kata kadar daha hızlı belirleyebildiler ve bu tasarımların kullanıcının dikkatini ekranın en önemli kısmına çektiğini gösterdiler. Bu düzeyde iyileştirmeye ulaşan pek çok uygulama gördük ve bu, yalnızca göz sabitleme sürelerinin ötesine geçiyor. Ayrıca test ettiğimiz farklı tasarımlarda, önemli eylemlere tıklamanın aldığı sürede saniyeler bazında bir azalma gördük.
Tekrar vurgulamak gerekir ki bunlar sadece konsept tasarımlar olup gerçek ürünleri yansıtmamaktadır. (Daha kesin bir şey söylemek gerekirse, sızdırıldı. Google Saat Yeniden Tasarımı (Hafta sonu.) Ancak, aşağıdaki "önce" örneği açıkça mevcut Gmail kullanıcı arayüzüdür.
Aşağıda gösterilen e-posta uygulaması vaka çalışması gibi belirli tasarımlara baktığımızda, ifade edici tasarım ilkelerinin faydasını ilk elden görebiliriz. Örneğin, yeni tasarımda Gönder butonu daha büyük, doğrudan klavyenin üzerinde yer alıyor ve dikkati çekmek için ikincil bir renk kullanıyor. Bunu, ekranın üst kısmındaki araç çubuğuna küçük bir "Gönder" butonu ve dosya ekleme gibi diğer kontrollerin yerleştirildiği ifadesiz tasarıma benzetebiliriz. Uygulamada katılımcılara "e-postayı gönder" denildiğinde, emoji tasarımında gözlerin butonu 4 kat daha hızlı gördüğü görüldü. Bu, kullanıcı deneyimini iyileştirmede “ifade edici tasarımın” önemini yansıtıyor.
Diğer konsept tasarımlar bir saat uygulaması, ses girişi, fotoğraf düzenleyici, ödemeler ve bir cüzdanı gösteriyor:
Yeni kullanıcı arayüzünün benimsenmesinin başarısı ya da başarısızlığı, uygulanmasının ne kadar kolay olduğuna ve M3'ten ne kadar sorunsuz güncellendiğine bağlıdır. Jetpack Compose'un şu sıralar çok daha iyi bir konumda olduğu görülüyor, bu yüzden ihtiyatlı bir iyimserlik içindeyim.
Bu arada, araştırma ve kullanıcı testleri "iOS'un İnsan Kullanıcı Arayüzü Yönergeleri'ni izleyen ifadesiz tasarıma kıyasla iyi uygulanmış ifadeli tasarımın her yaştan insan tarafından güçlü bir şekilde tercih edildiğini" ortaya koydu.
Google, özellikle marka çekiciliği açısından "ifade edici tasarımların harika" olduğunu buldu: "Araştırmamız, M3 Expressive tasarımının kullanılmasının, bir ürünün insanlar için ne kadar "havalı" olduğunu artırdığını gösterdi."
- …Alt kültür algısında %32'lik bir artış bulduk; bu da etkileyici tasarımın bir markanın daha alakalı ve "bilgili" görünmesini sağladığını gösteriyor.
- …%34 oranında tazelik artışı, markanın taze ve yenilikçi görünmesini sağlıyor.
- …isyan oranında %30'luk bir artış, etkileyici tasarımın markayı normdan kopmaya hazır, cesur ve yenilikçi bir lider olarak konumlandırdığını gösteriyor.
Yoruma kapalı.