Y Combinator'ın genel ortağı Aaron Epstein'a, Notion'a satılan Cron'un kurucusu Raphael Schaad, yapay zeka tasarımlı web sitelerinde yapılan yaygın hataları tartışmak üzere katıldı. Vibe kodlayıcıların web sitelerinde yaptığı ve kaçınılması gereken yedi yaygın hatayı belirlediler.
Olumlu ve Olumsuzlar
Podcast, bir web sitesini titreşimle kodlayabilmenin, sırf tasarımcı olmadıkları için kötü sonuçlanması gerekmeyen olumlu bir şey olduğunu kabul ederek başladı. Daha sonra titreşim kodlu web sitelerini ziyaret etmeye ve aşağıdaki yedi kategoriye uyan birden fazla sorunla karşılaşmaya başladılar.
1. Genel Tasarım Trendleri
Vurguladıkları ilk sorun, yapay zekanın görünüm ve hislere karar vermesine izin verme eğilimidir. Twitter'da yakın zamanda yapılan bir tartışma, yapay zekaya yönelip “bana modern bir şey ver” diye soran ve sonunda genel bir şey elde eden insanlara dikkat çekti. Ve bu şaşırtıcı olmamalı çünkü seçimleri bir Yüksek Lisans'a bırakırsanız en yaygın tasarım seçeneklerini %100 elde edersiniz.
Tasarım tek başına modern görünebilir ancak benzersiz olmadığı, tanıdık, genel ve orijinal olmadığı için marka değerini kaybeder. Örneklerden biri, iyi göründüğünü ancak aynı zamanda orijinal olmadığını söyledikleri bir bento-kutuya (düzgünce paketlenmiş bir Japon öğle yemeği) benzeyen bir yerleşim ızgarasıdır.
Başka bir örnek, genel yazılım kontrol paneliydi; asıl nokta onun genel yönüydü. Bu tür bir hata, bir şeyin profesyonel göründüğü ancak genel olduğu herhangi bir noktada ortaya çıkabilir.
Aaron Epstein şu yorumu yaptı:
“Buradaki mühendisler sekmesine geri dönün.
Şimdi, eğer bu onların ürünüyse, gözüme çarpan diğer şeylerden biri de, burada kırmızı, yeşil, mavi, mor gibi belirtme çizgilerinin olduğu bir tür kontrol panelidir.
Bu, birçok yapay zeka tasarım aracının gerçekten yaratacağı klasik şeylerden biri.”
Genel Yazılım Kontrol Panelinin Ekran Görüntüsü
Raphael cevap verdi:
“Evet, her sahte kontrol paneli temelde buna benzer bir şeye benziyor.”
Aaron Epstein:
Açık arka plan renginin daha koyu versiyonu olan simgelere sahipler. Genellikle Google'ın renkleri gibi, bilirsiniz, kırmızı, sarı, yeşil, mavi gibi.
Raphael Schaad:
“Fisher-Price ön seçimi…”
Aaron Epstein:
“Böylece… çok şey görmeye eğilimliyiz.”
Genel tasarım trendlerine beş örnek verdiler:
- Mor degradelerin aşırı kullanılması
- Genel AI tasarım modellerinin tekrarlanması
- Bento-box düzenlerini özgünlük olmadan kullanma
- Yazılım kontrol paneli örneği gibi genel görsel öğeler
- Standart simgelere veya emoji benzeri öğelere güvenme
Yüksek Lisans'ların dayandığı tüm tasarım trendleri, yapay zeka tarafından oluşturulmuş diğer sitelere benzeyen görsel bir deneyim yaratıyor.
Raphael açıkladı:
“Tüm bunlar, gece geç saatlerde, bu günlerde start-up'ların açılış sayfalarında muhtemelen titreşim kodlu pek çok aptal fareyle üzerine gelme efekti gördüğümü düşündüğüm ve tweet attığım zaman başladı. Ve bu yüzden oradaki katmanı soymayı merak ettim.
Bunlar, benim aptalca etkiler olduğunu düşündüğüm şeyler nasıl oldu, nasıl yüksek lisansa dönüştüler ve neden şimdi her yerdeler?
O zamanlar mor gradyanlara benzeyen birkaç trend daha vardı. Birdenbire tüm startup web sitelerinin her yerinde mor renk geçişleri görülmeye başladı. Veya bu bölümler içeri girdikçe, kaydırdıkça kayboluyor ve bir görünüp bir kayboluyor.
Aaron, tüm bu tasarım trendlerinin doğası gereği kötü olmadığını belirtti. Şimdi onları kötü yapan şey, Yüksek Lisans'ların onları yaygın hale getirmesi ve böylece eskiden sahip oldukları özgünlükleri yok etmeleridir.
Raphael, bunun nasıl gerçekleştiğini açıklayarak Aaron'un değerlendirmesine katıldı:
“Ve en önemli şeylerden biri, bir tür trend oluşturan iyi bir web sitesi olduğunda, eski dünyada başkalarının bu trendleri kopyalamayı sevmesi biraz zaman alıyordu.
Ancak şimdi Yüksek Lisans'larda, mor renk geçişli iyi bir web sitesi varsa, Yüksek Lisans'a giriyor çünkü Yüksek Lisans, birçok bağlantıya sahip iyi örnekler gibi eğitiliyor. Ve sonra birdenbire, tıpkı gelecek hafta olduğu gibi, tüm startup web siteleri aynı görünmeye başlıyor.”
2. Beklenmeyen Kullanıcı Etkileşimi Geri Bildirimi
Kullanıcı etkileşimi geri bildirimi önemlidir çünkü bir tıklamanın bir şey yaptığını kabul ederek belirsizliği ortadan kaldırır. Kullanıcı etkileşimi geri bildirimi, bir şeyin tıklanabilir olduğunu gösterir. Bunların hepsi site ziyaretçilerinin görmeyi beklediği tasarım dilinin bir parçasıdır.
Beklenmedik etkileşim geri bildirimi, kullanıcının bir web sitesini ziyaret ettiğinde beklediği modeli bozduğu için kötü bir kullanıcı deneyimidir. Lobide yürümek ve odanın ortasındaki cam bir duvara çarpmak gibi. Orada olmaması gerekiyor ve dikkat dağıtıcı ve kafa karıştırıcı, kötü bir kullanıcı deneyimi.
Podcast şu yedi etkileşimden kaçınılmasını önerdi:
- Kullanıcıyı sayfada takip eden çizgiler
- İmleci takip eden ışıklar
- Gereksiz arka plan animasyon efektleri
- Otomatik geçişler
- Düğmeleri taşıma veya kullanıcı arayüzü öğelerini değiştirme
- Öğeleri net bir amaç olmadan hareket ettiren vurgulu efektler
- Üründen daha çok dikkat çeken animasyonlar
3. Bozuk veya Kafa Karıştıran UX Modelleri
Bunlar, etkileşim modelinin belirsiz olması nedeniyle sayfanın kullanımının zorlaştığı hatalardır.
- Kaydırma kriko
- Standart olmayan navigasyon
- Atlayan veya tutarsız davranan menüler
- Açıkça davranmayan tıklanabilir görünümlü öğeler
- Hareket eden veya otomatik ilerleyen düğmeler
- Yalnızca üzerine gelindiğinde etkileşimler
- Fareyle üzerine gelmenin arkasında gizli işlevsellik
- Yinelenen veya garip yapışkan başlık davranışı
Kaydırmanın ele geçirilmesi, karşılaştıkları en yaygın sorunlardan biriydi; tarayıcı kaydırmayı ele geçiren başka bir site hakkında yorum yapmak için dört kez durdular.
Bir noktada Raphael şu yorumu yaptı:
“Ama yine de pek çok şey yaşıyormuş gibi hissettiriyor… Tüm bu animasyonları yapacak kancalara sahip olmak için JavaScript ile süslü bir şey yapmak üzere… gerçek yerel tarayıcı kaydırma özelliğini ele geçirmek gibi.”
Kaydırmanın başka bir örneği, yüklenen ve kullanıcının ilerlemesini engelleyen bir animasyonun yan ürünüydü.
Aaron Epstein bir sayfayı aşağı kaydırırken şu yorumu yaptı:
“Daha aşağıya indiğimizde ne olur?
…Değer veriliyor ve güveniliyor, tamam, her yere giden bir sürü hattımız var. Pekala, sayfa düzeninde yine seni takip eden bir çizgi var.”
Ekran görüntüsü: “Ve şimdi kaydırmalı durumdayız”
Bu noktada devam eden animasyonlar nedeniyle sayfa yanıt vermeyi bıraktı ve Raphael şunları söyledi:
Ve şimdi kaydırmalı durumdayız.
Bu animasyonu oluşturmak için web sitesindeki bu konuma kilitlendik.
Ve bana ne söylemek istediğini merak ediyorum, örneğin, bu animasyonu oluşturmak için beni bu noktada burada yakalamak neden önemli, onu zaten yapım aşamasında göstermek nasıl bir şey?”
Aaron, animasyonun ve kaydırma hareketinin kendisini sayfanın iletmeye çalıştığı şeyden uzaklaştırdığını belirtti.
Şunu gözlemledi:
“Ve tüm dikkatimi, burada sol tarafta söylenenlerden ziyade animasyonun çektiğini görüyorum. Yani bunların hiçbirini fark etmiyorum bile.
Ve bu, sağ tarafta bana ne yaptıkları veya ürünün nasıl çalıştığı hakkında değerli bir şeyi iletmek için yeterli görsel bilgi vermediği anlamına gelmiyor.
Bu yüzden buradaki her şeyi özlüyorum.
Animasyon çok dikkat dağıtıcı.”
Buradaki temel sorun, sitenin kullanıcıların beklediği gibi davranmayı bırakmasıdır. Bu, sürtüşme, kafa karışıklığı ve bazen güvensizlik yaratır, ancak kesinlikle kafa karışıklığı yaratır; bu da bir web sitesinin yapması gereken şeyin tam tersidir: netlik sunmak ve iletişim kurmak.
4. Zayıf Mesajlaşma ve Ürün Açıklaması
Bunlar tasarımın etkileyici görünmesine rağmen ziyaretçinin ürünü anlamadığı hatalardır.
- Belirsiz değer teklifi
- Ürünün ne yaptığına ilişkin eksik veya belirsiz açıklama
- Ürünün kime yönelik olduğu açıkça belirtilmedi
- İzleyicinin neden bunu umursaması gerektiğini açıklamamak
- Ekranın üst kısmında çok az yararlı bilgi var
- Yeterli bağlama sahip olmayan ürün demoları veya örnekleri
İçeriği okuduğunuz ve sayfadaki hiçbir şeyin ürünün veya hizmetin ne olduğunu açıklamaya yetmediği, hatta neden umursamam gerektiğini bildirmediği B2B tipi sitelerde bu tür şeyleri çok görüyorum. Geçmişte bu, kulağa daha çok teknoloji meraklısı ve ileri düzeyde ilgi duyan biri tarafından yazılan insan saçmalığıydı. Ancak günümüzde içeriğin amaçtan yoksun olduğu ve birden fazla anlamı olan belirsiz sözcükleri veya herhangi bir iş yapmadığı, hiçbir şeyi başaramadığı, topu sahaya doğru hareket ettirmeyi başaramadığı için temelde sadece tembel olan sözcükleri kullanmaya eğilimli olduğu yapay zeka eğilimi var.
Açılış sayfası bir müşteri edinme kanalıdır. Ziyaretçiler ürünü ve değerini hızlı bir şekilde anlayamıyorsa tasarım başarısız olmuştur.
5. Zayıf Bilgi Hiyerarşisi ve Yapısı
Bunlar, sayfada çok fazla rakip görsel veya metin öğesinin bulunduğu hatalardır. Burada önemli olan site ziyaretçisinin dikkatini çekmek için yarışan görsel veya metinsel unsurlardır.
- Çok fazla metin stili
- Anlam katmayan ekstra etiketler
- Logo, başlık, alt başlık ve destekleyici metin arasındaki zayıf hiyerarşi
- Görsel olarak aşırı inşa edilmiş gibi görünen bölümler
- Netliği artırmadan dikey alan ekleyen dekoratif öğeler
Yapay zeka tasarlanmış gibi görünen bir yapı ekleyebilir ancak yapı, okuyucunun sayfayı işlemesine yardımcı olmayabilir. Yapay zekanın, meşgul iş yapıyormuş gibi görünen ancak hiçbir iş yapmayan içerik öğelerini ortaya çıkarma eğiliminde olduğunu her zaman unutmayın. Ve iş dediğimde, bir amaç uğruna bir şeyi yapmayı kastediyorum. Her kelimenin ve görsel unsurun bir işe yaraması, bir şeyler başarması gerekiyor. Yapay zeka ile tasarım yaparken bu dikkate alınması gereken bir şeydir.
6. Tutarsız Marka ve Görsel Sistem
Bunlar, sitenin birleşik bir kimliğe sahip olmadığı hatalardır. Site ilgi çekici görsel öğeler içerebilir ancak bunlar tutarlı bir markanın veya görsel tarzın parçasıymış gibi hissetmezler. Bunlar, yerleşik bir görsel dil veya sistem olmadan, modern, modaya uygun veya şık bir şey yapmaya yönlendirilen bir yapay zekanın ayırt edici özellikleridir.
- Bölümler arasında tutarsız görsel dil
- Logo veya markayla uyumlu görünmeyen renkler
- Açılış sayfası stiliyle eşleşmeyen ürün görselleri
- Ayrı ayrı oluşturulmuş gibi görünen bölümler
- Kasıtlı olmaktan ziyade yapay zekanın varsayılanlarından miras alınan marka seçimleri
7. Deneyime Dayalı Muhakeme Eksikliği ve Yapay Zekaya Aşırı Güvenme
Bu, kötü kodlanmış web siteleriyle ilgili her sorun kategorisinin ardındaki temel sorundur. Yapay zeka, herkesin bir site tasarlamasına ve resim ve metin varlıkları oluşturmasına olanak tanır. Ancak deneyim ve uzmanlığa sahip birinin sağlam yönlendirmesine ihtiyacı var. Çıktının kalitesi tamamen istemin kalitesine, yani girdinin kalitesine bağlıdır.
Sorun, yapay zekanın yapay zekayı çökertmesi değil. Tecrübe eksikliği, uzmanlık eksikliği, eğime yol açan şeydir.
Kötü tasarlanmış, titreşim kodlu web sitelerine yol açan sorunlar şunlardır:
- Tüm AI değişikliklerini kabul etme
- Lezzet konusunda LLM'ye dış kaynak kullanımı
- Yapay zekanın marka yönüne karar vermesine izin vermek
- Marka stratejisi yerine yapay zeka çıktısından başlamak
- Kazanılan zamanı daha net düşünmek yerine daha fazla efekt üzerinde harcamak
- Artık editörün insan olduğunu unutmak
Zayıf titreşim kodlu web sitelerini incelemenin içgörüsü ve çıkarımı, yapay zekanın teknik anlaşmazlıkları ortadan kaldırdığı, ancak deneyim ve uzmanlıktan gelen yargının yerini almadığıdır. Bir web sitesini kodlayan kişinin, site ziyaretçisine ve iş hedefine en iyi neyin hizmet edeceğine karar vermesi gerekir.
Podcast'i izleyin: Vibe Kodlu Web Sitelerinde Yaygın Yapılan Hatalar
Shutterstock/Cast of Thousands'dan Öne Çıkan Görsel
Bir yanıt yazın