Google'ın Cihaz ve Hizmet Pazarlaması (DSM) kuruluşu, hem Google Store'dan hem de global üçüncü taraf satıcılardan edinilebilen akıllı telefonlar, saatler, kulaklıklar, tabletler, akıllı ev cihazları ve ilgili abonelikler gibi çok çeşitli ürünler için pazara açılma stratejilerini yönetmektedir. Kullanıcılar bu ürünler hakkında online ve fiziksel perakende satış mağazalarında bilgi ediniyor.
Bu ekibin sürekli karşılaştığı zorluklardan biri, tüketicilerini ve perakendecilerini Google donanım ekosisteminin ve gelişmiş yapay zeka deneyimlerinin kullanım alanları ve avantajları konusunda eğitmektir. Tüketicilerin ürünleri ve işlevleri daha iyi anlamalarına yardımcı olmak için DSM ekibi, bu zorlukların birçoğunu ele almak amacıyla gelişmiş web teknolojisine sahip bir 3B sanal alan oluşturdu. Bu örnek olay incelemesinde, ekibin müşteriler için nasıl daha etkileyici bir deneyim oluşturduğunu ve bu yeni deneyimleri geleneksel dijital öğelerin yarı fiyatına nasıl dört kat daha hızlı kullanıma sunduğunu öğrenebilirsiniz.
Zorluk: ürün eğitimi
Google donanım ürünlerini yeni kullanmaya başlayan satış görevlilerini ve müşterileri birlikte çalışabilirlik ve yapay zeka gibi özelliklerin avantajları konusunda eğitmek maliyetli ve zordur. Geleneksel ürün eğitimi stratejileri, fiziksel ürünler kullanılarak üretilen ve ardından dijital öğrenim platformlarında barındırılan dijital içeriğe dayanır. Bu öğrenme platformları ürünün teknik spesifikasyonlarını, resimlerini ve videolarını sunar ancak fiziksel veya bağlantılı ürünlere erişemez.
Video gibi eğitici içeriklerin oluşturulması pahalıdır, küresel pazarlar için yerelleştirmesi karmaşıktır ve ürünler arasında yeniden kullanılması neredeyse imkansızdır. İlk öğeleri oluşturmak için oyuncu kadrosu, giysi odası, yer keşfi, konum ücretleri, stüdyo ücretleri, film ekipleri ve post prodüksiyon işleri için bütçeler gerekir. Üretim maliyetleri ve teslimatlarının da yerelleştirmeyi hesaba katması gerekir. Varlıkların, konumların, ürünlerin, metinlerin ve yeteneklerin değiştirilmesi, geleneksel pazarlamanın geniş çapta yönetilmesini özellikle güçleştirir. Desteklenen ürünlerin çoğunda birkaç ayda bir özellik düşüşü yaşandığı düşünülürse bu öğeler, tamamlandıkları zamana kadar güncelliğini yitirmiş olur.
Ürün bilgilerini paylaşmanın daha iyi yollarını keşfetme
Ürün bilgilerini paylaşmanın daha iyi bir yolunu bulmaya çalışan DSM ekibi, bir uygulamada VR/AR deneyimleriyle denemeler yaptı. Elde edilen sonuçlar, hem daha güçlü etkileşim hem de satış noktalarında daha fazla sepet boyutuyla umut vericiydi. Bununla birlikte, uygulama indirme işlemleri hem satış görevlileri hem de müşteriler için girişin önünde önemli bir engel teşkil ediyordu. Uygulamanın yalnızca bir uygulamayla sınırlandırılması, store.google.com gibi diğer birinci veya üçüncü taraf mülklerine yerleştirilememesine neden oluyordu.
<model-viewer> ile basit çözümler
Ürün eğitimine yönelik 3B ürün modellerinin başarısını gören ekip, bu yaklaşımı web'e de taşımaya karar verdi. Bunu başarmanın yollarından biri, <model-viewer> kullanarak farklı ürünlerle 3D deneyimler oluşturmaktır.
<model-viewer>, 3D modeli bir web sayfasına bildirimli şekilde eklerken modeli kendi sitenizde barındırmanızı sağlayan bir web bileşenidir.
Bunu Google Store'daki Pixel Fold sayfasında görebilirsiniz. <model-viewer>, kullanıcıların Pixel Fold'u çeşitli açılardan katlanmış konumlarda görmelerine olanak tanır. 3D modeli, kamera açıları ve etkileşimli renk çeşitleriyle bir hikaye anlatmaya yarayan düğmelerle HTML kullanıcı deneyiminin geri kalanına entegre etmek kolaydı. <model-viewer> ile kullanıcılarınıza hayalini kurabileceğiniz her türlü deneyimi sunabilirsiniz.
3D modeller oluşturma
3B sanal deneyim geliştirmenin ilk adımı, 3D ürün modelleri oluşturmaktır. DSM ekibi, 3D modellerini CAD'de oluşturdu. Ürün CAD'si üreten tasarımcılarla yakın işbirliği içinde çalışan DSM ekibi, web için optimize edilebilecek düşük çoklu oluşturucuları dışa aktarabildi. Bunu başarmak için kullandıkları en iyi uygulamalardan bazılarını aşağıdaki alanlarda kullandılar.
- Geometri:
- Geometriyi (şekil ve ölçek) her açıdan doğru yapmaya odaklanın.
- Eğik kenarlar için normal haritalar kullanmaktan kaçının.
- Çıkartmaları ayrı bir geometri olarak oluşturun.
- Renkler ve malzemeler:
- Hedef: Fiziksel mülklerin tutarlı görsel temsili.
- Gerçek zamanlı ışıklandırma dinamiklerini göz önünde bulundurun.
- Her örgü türü (Opak, Şeffaf, Çıkartma) için ayrı doku grupları ve malzemeler kullanın.
- Başka ayarlamalar gerekirse tasarımları orijinal CAD tasarımcılarıyla tekrarlayın.
- Dosya boyutu:
- Modelin
<model-viewer>tarafından kullanılabilmesi için GLB biçiminde düşük çoklu model olarak dışa aktarın. - Geometrik ağları 3D tasarımcılar, tedarikçi firmalar veya DRACO (OS) gibi bir sıkıştırma yazılımı kullanarak manuel olarak sıkıştırın.
- Modelin
Bu 3D modeller cep telefonlarında sıkça kullanılacağından, eski nesil cihazları ve zayıf internet bağlantılarını desteklemek üzere 2 MB dokulu maksimum dosya boyutu ayarlanarak optimize edildi.
<model-viewer>
DSM ekibi, yeni oluşturulan 3D modelleri web sayfalarına yerleştirmek için Google'ın <model-viewer> açık kaynak web bileşenini kullanır. Birinci adımda oluşturulan modellerin <model-viewer> ile uyumlu olması için öğelerin gITF veya GLB biçiminde (.glb uzantısı) olması gerekir. Her iki biçim de kompakt ve sıkıştırılabilir olup GPU'ya hızlı bir şekilde yüklenir. <model-viewer> bileşeni, sürekli kullanılan tüm ana tarayıcılar tarafından desteklenir.
Bu adımda, DSM ekibinin karşılaştığı en büyük zorluk, Google donanımı renk paletinin doğru bir şekilde oluşturulmamasıydı. Ekip sonunda, kaybolan renklerden ACES ton eşlemenin (bir film endüstri standardı) sorumlu olduğunu keşfetti. Bu sorunu çözmek için yeni bir Khronos PBR Nötr Ton Haritacısı geliştirdiler. Bu harita, özellikle bu eksiklikleri gidermek ve renkleri hassas bir şekilde ekrana sunmak için geliştirildi. Aynı zamanda, doğrusal ton eşlemeyle ilişkili olarak ortaya çıkan uçuk vurgulardan ve ton kaymalarından da kaçındı.
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
<model-viewer> hakkında daha fazla bilgi edinmek için modelviewer.dev adresini ziyaret edin. 3D modellerinizi test etmek ve başlangıç web sitesinin tamamını indirmek için düzenleyicimizi deneyin.
üç.js ile ağır çözümler
<model-viewer>, tek bir 3D model görüntüleme ve bunlarla etkileşim kurmanın muhteşem ve etkili bir yoludur. Ancak bazen DSM ekibi, <model-viewer> ile mümkün olandan daha yoğun ve bağlantılı bir web deneyimine ihtiyaç duyuyordu. Nest Mini + C'nin kullanıma sunulması buna örnek olarak verilebilir. <model-viewer>, potansiyel müşterilerin bir ürünü web'de 3D olarak deneyimlemesini sağlayabilir ancak diğer Google Donanım ürünleri ve asistan gibi AI özellikleriyle birleştirildiğinde ürünün kullanışlılığını gösteremez.
Ekip, bu görev için <model-viewer>,three.js'yi temel alan kitaplığa yöneldi. Three.js, açık kaynaklı bir JavaScript oyun motorudur. Ekip, sanal bir ev ortamı için Nest iç mekan kameraları, ışıklar ve hoparlörleri içeren yeniden kullanılabilir öğelerden oluşan bir çerçeve oluşturabildi. Bu sayede ekip, cihazların birbirleriyle nasıl etkileşim kurduğuna dair gerçek zamanlı geri bildirim sağlayacak bir temel oluşturdu.
Dialogflow
Birbiriyle bağlantılı deneyimi oluşturmanın son adımı Google Asistan'ı eklemektir. Bu, kullanıcıların birbirine bağlantılı sanal deneyimle özgün komutları ve rutinleri deneyebilmesi anlamına geliyordu. Ancak, Google Asistan'ın kullanıcının mevcut hesabından eklenmesi, bir dizi sorunlu gizlilik endişesine yol açacaktır. DSM, gizliliğe önem veren bir çözüm oluşturmak için Google Cloud Dialogflow hizmetiyle birlikte çalışarak bu alanda Google Asistan'ı taklit etti. Aşağıdaki üst düzey şemada web uygulamasının Dialogflow'un API'sini nasıl kullandığı gösterilmektedir (Dialogflow Temel Bilgiler'den uyarlanmıştır). Web uygulaması, her konuşma dönüşü için Dialogflow'un amaç sınıflandırmasını kullandı ve API, hedefle eşleşen önceden belirlenmiş son kullanıcı ifadeleri döndürdü.
Dialogflow hakkında daha fazla bilgi edinmek için Google Cloud belgelerini inceleyin.
Son sonuç: yerleştirilebilir bir iFrame
Nihai sonuçta, müşterilerin bağımsız ürünler ve ürünlerin ara bağlantıları hakkında daha fazla bilgi edinmelerine yardımcı olmak için <model-viewer> ile bir web sayfasına yerleştirilebilen veya tam bir sanal ortamda kullanılabilecek bir öğe kitaplığı oluşur. Deneyimin hem özgün, ölçeklenebilir hem de uygun maliyetli olması. Bu ilk sanal deneyim Mayıs 2021'de kullanıma sunuldu. Google Store'un web sitesinde artık etkin olmasa da bu deneyimi deneyebilirsiniz.
Sonuçlar
Nest Mini +C'nin kullanıma sunulmasından bu yana DSM, son iki yılda Pixel portföyü lansmanının çerçevesini yeniden kullanabildi ve genişletebildi ve bu da daha fazla başarı elde etti. Ekip, bu 3D öğe ve deneyimlerin yinelemesini çalıştırarak şimdiye kadar etkileşimli ürün eğitimi deneyimlerini dörde, bu web teknolojisinden faydalanan ürün sayısını ise üçe katlayabildi.
Sonuç olarak önceki stratejilerden daha sürdürülebilir, tutarlı ve etkileşimli olan, geniş ölçekte kullanım alanları için gittikçe artan bir permütasyona sahip markalı, özgün ürün eğitimi ortaya çıktı. İleriye dönük olarak, DSM ekibi artık dinamik iş hedeflerine hızla uyarlayabilecekleri, kapsamlı bir deneyimin bileşenlerinden oluşan güçlü bir portföye sahip. Bu iyileştirmeler, DSM ekibinin yeni ürün eğitimi içeriklerini daha eski, daha geleneksel süreçlerine kıyasla dört kat daha hızlı ve yarıdan daha düşük bir maliyetle kullanıma sunmasını sağlıyor.