Web'deki 3D Ürün Görüntüleyicisinde Kontroller Nasıl Tasarlanır?

Amaç: ziyaretçi ürüne bakmak istiyor

Bir 3D görüntüleyicinin başarısı, ziyaretçinin ilk saniyede ne yapacağını anlamasına bağlıdır. İnsanlar bir ürün sayfasına ürüne bakmak için gelir; arayüzü öğrenmek için değil. Karmaşık bir kontrol paneli, onlarca düğme ya da açıklanması gereken bir hareket, ürünün kendisinden dikkat çalar. İyi bir görüntüleyici neredeyse görünmezdir: ziyaretçi sürükler, ürün döner, bir renge dokunur, ürün rengini değiştirir ve gerisini düşünmez.

Kontrol tasarımının asıl ölçütü şu soruda toplanır: ziyaretçi bu görüntüleyiciyle ne yapmak ister ve bunu yapmak için kaç adım gerekir? Çoğu ürün sayfasında cevap şu dört eylemdir: ürünü çevirmek, ayrıntıya yaklaşmak, seçenekleri denemek ve yolunu kaybederse başa dönmek. Bunun dışındaki her eylem ikincil sayılmalı ve görsel olarak geri planda tutulmalıdır.

Bu yazı, web'de 3D ürün gösterimi için kontrollerin nasıl düşünülmesi gerektiğini anlatıyor. Modelin sayfaya nasıl ekleneceği ise model-viewer ile web sitesine 3D model ekleme yazısında kod örnekleriyle yer alıyor.

Temel kontroller

Dört temel kontrol, hemen her ürün için yeterlidir.

• Döndürme: fare ile sürükleme, dokunmatik ekranda parmakla kaydırma. Bu, görüntüleyicinin ana eylemidir ve ayrıca bir düğmeye ihtiyaç duymaz.
• Yakınlaştırma: tekerlek ve iki parmak hareketi (pinch). Sayfa kaydırmayı engellememesi için tekerlek yakalamasına dikkat edilmelidir. Ziyaretçi sayfayı aşağı kaydırmak isterken fare imleci görüntüleyicinin üzerinden geçiyorsa ve tekerlek 3D alanına yakalanıyorsa sayfa takılır; bu, görüntüleyiciden kaçınmak için en yaygın nedenlerden biridir.
• Sıfırlama: bir tıkla başlangıç açısına dönüş. Ziyaretçi ürünü yanlış bir açıya çevirdiğinde ya da çok yakınlaştırdığında geri dönmenin açık bir yolu olmalıdır.
• Seçenekler: renk ve malzeme düğmeleri. Seçenek varsa, seçili durumun açıkça görünmesi ve seçimin modelde anında yansıması gerekir.

Bunların dışındaki ekstralar, yani tam ekran, ekran görüntüsü alma, ölçü gösterimi ve AR gibi özellikler, ürüne ve hedef kitleye göre eklenir. Gereksiz her düğme, hem ekranda yer kaplar hem de karar yükünü artırır.

Fare, dokunmatik ve klavye: hangi hareket neye karşılık gelir?

Hareketlerin tutarlı olması gerekir. Masaüstünde sol tuşla sürükleme döndürme, tekerlek yakınlaştırma anlamına gelir; dokunmatik ekranda tek parmak döndürme, iki parmak yakınlaştırma demektir. Kaydırma (pan) gibi ek hareketler çoğu ürün için gerekmez ve gizli kalması, yanlışlıkla ürünü kadrajdan çıkarma riskini azaltır.

model-viewer gibi hazır bir bileşen kullanıyorsanız bu davranışların büyük kısmı ayar olarak gelir. Örneğin camera-controls özelliği sürükleme ve yakınlaştırmayı açar, disable-zoom ise yakınlaştırmayı kapatır. Dönüş ve yakınlaştırma sınırlarını camera-orbit ve alan genişliği ayarlarıyla belirleyebilirsiniz; ürünün altına bakmak anlamsız ise dikey dönüşü sınırlamak ziyaretçinin kaybolmasını önler. Küçük bir örnek:

<model-viewer
  src="urun.glb"
  alt="Ürünün kısa açıklaması"
  camera-controls
  min-camera-orbit="auto 20deg auto"
  max-camera-orbit="auto 95deg auto"
  interaction-prompt="auto"
  poster="urun-poster.webp">
</model-viewer>

Burada min-camera-orbit ve max-camera-orbit, kameranın dikey açısını sınırlar; böylece ziyaretçi ürünü yerin altından görmez. Parametre adlarını ve değerlerini, kullandığınız sürümün belgeleriyle doğrulamanızı öneririm. Bileşenler zamanla güncellenir.

Sıfırlama düğmesi

Sıfırlama, küçük ama ihmal edilmemesi gereken bir kontroldür. Birçok ziyaretçi ürünü bir kez döndürdükten sonra başlangıç görünümüne nasıl döneceğini bilemez. Basit bir düğme, görüntüleyicinin kamera ayarını başlangıç değerlerine döndürür:

<button type="button" id="sifirla">Başa dön</button>
<script>
  const gorunum = document.querySelector('model-viewer');
  document.getElementById('sifirla').addEventListener('click', () => {
    gorunum.cameraOrbit = '0deg 75deg 105%';
    gorunum.fieldOfView = 'auto';
    gorunum.jumpCameraToGoal();
  });
</script>

Başlangıç değerini kendi ürününüze göre seçin; önemli olan, ürünün en iyi göründüğü ön açıyı seçmek ve sıfırlamanın her zaman o açıya dönmesini sağlamaktır. Düğmenin üzerinde ikon yerine kısa bir yazı kullanmak (örneğin "Başa dön"), anlaşılırlığı artırır; sadece ikon kullanıyorsanız erişilebilir bir etiket eklemeyi unutmayın.

İpucu göstermek

İlk açılışta ürün hafifçe kendiliğinden dönebilir ya da "sürükleyerek döndürün" ipucu çıkabilir; kullanıcı ilk dokunuşta bu ipucu kapanmalıdır. İpucunun görevi, görüntüleyicinin etkileşimli olduğunu anlatmaktır. Ürün durağan bir görsel gibi görünürse ziyaretçi onu tıklamaya çalışmadan geçip gider.

İyi ipuçlarının ortak özellikleri şunlardır:

• Görünür ama tekrarlayan olmamalı. Sürekli yanıp sönen ya da her birkaç saniyede bir yeniden çıkan bir ipucu, rahatsız edicidir.
• Kısa olmalı. "Sürükleyerek döndürün" gibi iki üç kelime yeterlidir.
• İlk etkileşimde kaybolmalı. Ziyaretçi anladıktan sonra ipucu bir daha çıkmamalı.
• Gereksiz yere ürünü örtmemeli. Ürünün üzerinde değil, kenarında ya da altında yer almalı.

model-viewer içinde interaction-prompt özelliği bu davranışı hazır sunar; ipucunun ne zaman gösterileceğini ve tarzını ayarlayabilirsiniz. Bunun yanında, ürünün yüklendikten sonra bir kez yavaşça dönmesi (auto-rotate) de ipucu işlevi görür; ancak bu dönüşün ziyaretçi dokunduğu anda durması ve kendiliğinden yeniden başlamaması gerekir.

Renk ve malzeme seçimi

Seçenekli ürünlerde (kumaş rengi, deri tonu, ahşap türü) renk seçici görüntüleyicinin en değerli parçası hâline gelir. Tasarımında dikkat edilecek birkaç nokta var:

• Renk örnekleri, gerçek renge olabildiğince yakın olmalı ve küçük birer daire ya da kare olarak gösterilmeli.
• Seçili renk, belirgin bir çerçeve ya da işaretle gösterilmeli; yalnızca renk farkına güvenmek, renk körü kullanıcılar için yetersizdir.
• Renk adı ayrıca yazılmalı; sadece renge bakarak seçmek zorunda bırakmayın.
• Çok sayıda seçenek varsa gruplayın. Yüzlerce renk tek bir sıraya dizildiğinde seçim yorucu olur; malzeme ailesine göre sekmeler ya da bölümler daha okunaklıdır.
• Seçim, modelde anında görünmeli. Bir bekleme ya da yeniden yükleme hissi, deneme isteğini kırar.

Renk seçeneklerinin 3D ile yönetiminin neden avantaj sağladığını renk seçenekli ürünler yazısında anlattım.

Mobil için dikkat

Web'deki ziyaretçilerin önemli bir kısmı telefonda gezer; görüntüleyici mobilde de rahat çalışmalıdır.

• Dokunma hedefleri en az 44 piksel olmalı. Daha küçük düğmelere parmakla isabet etmek zordur.
• Dikey kaydırma ile 3D döndürme çakışırsa kullanıcı sayfada sıkışır; görüntüleyici alanı belirgin olmalı ya da bir etkinleştirme düğmesi bulunmalı. Tüm sayfayı kaplayan bir 3D alanı, ziyaretçinin sayfanın geri kalanına ulaşmasını engeller. Bir çözüm, sayfa kaydırmayı yatay döndürmeye öncelik tanıyacak şekilde ayarlamak ya da görüntüleyiciyi "dokununca etkinleşen" bir alan yapmaktır.
• Düşük güçlü cihazlarda model hafif olmalı: optimizasyon yazısı. Takılan bir görüntüleyici, hiç olmayan bir görüntüleyiciden daha kötü izlenim bırakır.
• Poster görseli kullanın. Model yüklenene kadar ürünün bir görselini göstermek, boş alan hissini ortadan kaldırır.
• Telefonda ürünü odaya yerleştirme (AR) imkânı varsa, bunun için ayrı ve net bir düğme koyun. AR'ın temelleri artırılmış gerçeklik ile ürün gösterme yazısında.

Erişilebilirlik

3D görüntüleyiciler erişilebilirlik açısından genellikle ihmal edilir, ama birkaç ilke büyük fark yaratır.

• Klavyeyle döndürme (ok tuşları) ve düğmelere odaklanabilme. Görüntüleyiciye Tab ile ulaşılabilmeli, odaklanıldığında görünür bir çerçeve belirmeli. Kullandığınız bileşenin klavye desteğini gerçekten test edin; belgede yazması, sizin sürümünüzde çalıştığı anlamına gelmez.
• Hareket azaltma tercihine saygı: kendiliğinden dönen animasyon kapatılmalı. Kullanıcıların işletim sistemi düzeyinde bir "hareketi azalt" tercihi olabilir; bunu CSS'teki prefers-reduced-motion medya sorgusu ya da JavaScript'te window.matchMedia ile okuyup otomatik dönmeyi devre dışı bırakabilirsiniz.
• 3D alanının metin alternatifi: ürünü anlatan kısa açıklama. alt özelliği ya da yanındaki açıklama metni, ekran okuyucu kullanan kişilerin neyin gösterildiğini anlamasını sağlar.
• Yeterli kontrast: düğmelerin ve metinlerin zemine karşı okunur olması.
• Renk dışında ipuçları: seçili durumu yalnızca renkle değil, çerçeve ya da işaretle de belirtmek.

Erişilebilirlik, yalnızca bir yükümlülük değildir; aynı zamanda herkes için daha net bir arayüz demektir. Klavyeyle çalışan bir görüntüleyici, mobilde dokunuşla çalışan görüntüleyici kadar kullanışlıdır.

Kontrollerin yerleşimi ve görsel ağırlığı

Kontrolleri nereye koyduğunuz, kaç tane koyduğunuz kadar önemlidir. Genel ilke, ürünün kadrajını boş bırakmak ve kontrolleri kenara çekmektir. Renk seçici görüntüleyicinin altında ya da yanında, sıfırlama düğmesi bir köşede, AR düğmesi (varsa) sağ altta gibi tutarlı bir düzen kurduğunuzda, ziyaretçi sonraki ürün sayfasında da aynı yerde aynı düğmeleri bulur. Aynı markanın tüm ürün sayfalarında aynı yerleşimi kullanmak, görüntüleyiciyi öğrenilmesi gereken bir şey olmaktan çıkarır.

Görsel ağırlık konusunda da basit bir sıralama yardımcı olur. Ürünün kendisi en baskın öğe olmalı; seçenekler ikinci, sıfırlama gibi yardımcı kontroller üçüncü sırada durmalıdır. Düğmeleri yarı saydam ve düşük kontrastlı yapıp ürünün üzerine bindirmek şık görünebilir, ama okunabilirliği düşürür ve ürünün bazı bölümlerini örter. Düğmeleri ürünün dışına almak daha güvenli bir seçimdir.

Yükleme, hata ve boş durumlar

Kontrol tasarımı yalnızca model yüklendikten sonraki durumu kapsamaz. Üç durumu da düşünmek gerekir.

• Yüklenirken: Poster görseli ve basit bir ilerleme göstergesi, ziyaretçiye bir şeyin geldiğini söyler. Model yüklenmeden kontrollerin etkin görünmesi yanıltıcıdır; bu durumda düğmeleri pasif gösterin ya da yükleme bitene kadar gizleyin.
• Yüklenemezse: Ağ sorunu ya da desteklenmeyen bir cihaz yüzünden model açılmayabilir. Bu durumda boş bir kutu yerine ürünün statik bir fotoğrafını ve kısa bir not göstermek, deneyimi kurtarır. Görüntüleyiciyi, ürünün sayfasının tek bilgi kaynağı yapmamak da bu yüzden önemlidir.
• Yavaş cihazlarda: Kare hızı düşerse etkileşim "yapışkan" hissettirir. Modelin boyutu ve doku çözünürlüğü, kontrollerin akıcılığını doğrudan belirler; bu yüzden kontrol tasarımı ile model optimizasyonu aynı işin iki yüzüdür. Sık yapılan yanlışları 3D ürünü web'e taşırken yapılan hatalar yazısında topladım.

Bunların hiçbiri gösterişli değildir, ama ziyaretçinin gördüğü şeyin kalitesini belirler. Şık bir görüntüleyici, yüklenmediğinde boş kalıyorsa kötü bir görüntüleyicidir.

Ne zaman 3D görüntüleyici gereksizdir?

Her ürün sayfasında 3D gerekmez. Ürün basit ve her açıdan aynı görünüyorsa, bir fotoğraf yeterli olabilir. Görüntüleyici kontrolleri tasarlamadan önce bu soruyu sorun. Bu karar çerçevesini web sitesinde 3D ne zaman gereksiz yazısında anlattım. Görüntüleyicinin getirdiği yük, ancak ürünün incelenmeye değer olduğu durumlarda karşılığını verir: farklı açılardan farklı görünen, renk seçeneği olan ya da ayrıntısı önemli ürünlerde.

Aura Reformer örneği

Aura Reformer çalışmasında her ürün sitede döndürülüp yakınlaştırılabiliyor, deri ve keçe renkleri seçilebiliyor; ayrıntılar vaka sayfasında. Çalışma altı ürün ve toplam 57 renk seçeneği içeriyor; böyle bir seçenek sayısında renk seçicinin düzenli ve gruplanmış olması, görüntüleyicinin kullanılabilirliği için belirleyicidir. Web için model hazırlama ise web için 3D ürün modeli sayfasında. Tasarım ve performans arasındaki dengeyi ise 3D web sitesinde tasarım ve performans yazısında ele aldım.

Yayına çıkmadan önce kontrol listesi

• İlk saniyede ürünün etkileşimli olduğu anlaşılıyor mu?
• Sürükleme, yakınlaştırma ve sıfırlama masaüstünde ve telefonda çalışıyor mu?
• Fare tekerleği sayfayı kaydırmayı engelliyor mu?
• İpucu ilk etkileşimde kayboluyor mu?
• Model yüklenirken poster ya da yer tutucu görünüyor mu?
• Renk seçenekleri anlaşılır, seçili durum belirgin mi?
• Klavye ile odaklanma ve hareket azaltma tercihi test edildi mi?
• Görüntüleyiciye bir metin açıklaması eklendi mi?
• Düşük güçlü bir telefonda akıcı mı?

Sık sorulan sorular

Sonuç

İyi bir 3D ürün görüntüleyicisi, ziyaretçiyi arayüze değil ürüne odaklar. Dört temel kontrol (döndür, yakınlaştır, seç, sıfırla), doğru zamanda kaybolan bir ipucu, mobilde rahat dokunma hedefleri ve erişilebilirlik temelleri çoğu ürün için yeterlidir. Fazlası genellikle dikkat dağıtır. Kendi ürününüz için web'de döndürülebilir bir model düşünüyorsanız, teklif al sayfasından ürününüzü ve hedefinizi anlatabilirsiniz.

İlgili çalışmaAura ReformerÜrün Modelleme · Müşteri Çalışması · Blender · EEVEE · 6 ürün

İlgili çalışmaGemiSinematik kamera yolu · Blender · EEVEE · 1.500 kare · 24 fps