Sürüm 3.0: Bir Sayfa Oluşturucunun Nasıl Çalışması Gerektiğini Yeniden Düşünmek

version-3-0-rethinking-how-a-page-builder-should-workPage Builder Sandwich’i herkese açmamızın üzerinden 10 ay geçti. Artık yaklaşık 6.000 aktif yüklemeye sahibiz ve bu bizim için oldukça büyük bir başarı. Bu sayede hem iyi hem de kötü pek çok geri bildirim aldık. Yine de genel kanı, insanların piyasadaki diğer sayfa oluşturuculara kıyasla düzenler oluşturmanın ve içeriklerini hazırlamanın ne kadar kolay olduğundan keyif aldığı yönünde.

Aldığımız geri bildirimlerin büyük bir kısmı özellik istekleriydi ve son birkaç ayda bu özelliklerin birçoğunu ekledik. Ancak bunu yapmaya devam ettikçe, süreç içinde kullanıcı arayüzünü de yavaş yavaş değiştirmeye başladık. Ve sonuç olarak kullanıcı deneyimini de değiştiriyorduk… daha kötüye doğru. Fakat artık arayüzü yeniden düşünmemiz gereken bir noktaya gelmişti; çünkü artık sorunsuz çalışmıyordu ve farklı özellikler de onunla uyum sağlamıyordu.

Kullanımdan Kalkan Arayüz

PBS’in önceki sürümlerinde her şeyin düğme şeklinde olmasını istiyorduk. Neden mi? Çünkü düğmelerin kullanımı kolaydır. Sadece… üzerlerine tıklarsınız. Denetleyicinin (yukarıdaki resimdeki kenar çubuğu) eski sürümlerinde, bir düğmeye tıklamak değeri artırır, shift tuşuna basılı tutarak tıklamak ise azaltırdı. Kulağa yeterince kolay geliyor. Ancak döngüler (carousel), sekmeler, haritalar ve diğer yeni öğeler ile özelliklerin eklenmesiyle tüm bu düğmeler, farklı tasarımlara sahip farklı simgelerin bir karışımı haline geldi ve harika bir arayüzden ziyade hiyerogliflere benzemeye başladı. Bu durum deneyimli kullanıcılar için bir sorun değildi, ancak PBS’e yeniyseniz bakması oldukça ürkütücüydü.

İkinci olarak, denetleyicide birkaç sorun ortaya çıkıyordu. Asıl fikir, her şeyi denetleyicinin içinde basit ve erişilebilir kılmaktı. Ve her şey derken, metinleri başlıklara dönüştürmekten arka plan renklerini, yazı tipi renklerini değiştirmeye kadar akla gelebilecek her şeyi kastediyordum. Ancak mevcut durumunda denetleyici, artık fare tekerleğini sürekli yukarı ve aşağı kaydırmanızı gerektiren çok sayıda seçenek içeriyor. Kullanıcılar için yapmayı umduğum denetleyiciden oldukça farklı.

Son olarak, yakın zamanda favori eklentileriniz için kısa kod eşlemesini. Bu özellik, kısa kod düzenleme deneyiminizi daha keyifli hale getirmek için gereken metin alanları, sayı kaydırıcıları, onay kutuları ve ek yeni seçenek türleri oluşturmamızı gerektirdi. Başlangıçta iyi bir fikirdi ve evet, kısa kodları yönetmenizi kolaylaştırdı. Ancak yine bu özellik, “yalnızca düğmeler” arayüzümüzden saptı. Geriye dönüp bakıldığında, kısa kod niteliklerini değiştirmek için yalnızca düğmeleri kullanmak gerçekten imkansızdı. Şimdi, en son sürümde elimizde 2 tür denetim kaldı: düğmeler ve kısa kod alanları.

Arayüzümüzün artık etkili olmadığına (veya ihtiyaçlarımıza uygun olmadığına) karar vermemize neden olan birkaç neden daha var, ancak yukarıdaki noktalar başlıcaları. Yine de kesin olan bir şey vardı: arayüzü güncellememiz gerektiğini biliyorduk.

Bir Sayfa Oluşturucunun İdeal Olarak Nasıl Çalışması Gerektiğini Tanımlamak

Hemen işe koyulup bir şeyleri alelacele değiştirmek yerine, yüz adım geriye çekilip tüm sayfa oluşturucu deneyimine bir göz attık. Arayüze yeni bir soluk getirmek istiyorduk. Doğrusunu söylemek gerekirse, onu her yıl yeniden inşa edip durmak istemiyorduk. Bu  yorucu bir süreç ve WordPress topluluğuna kesinlikle kayda değer bir fayda sağlamıyor. Bu sefer işleri yavaş ve dikkatli bir şekilde yapmaya karar verdik. Page Builder Sandwich’in her köşesini ve onu neyin iyi bir sayfa oluşturucu yaptığını inceledik ve nihayetinde  tüm düzenleme deneyimini birkaç temel kavram etrafında somutlaştırdık.

Temel Kavram #1: Bir Şeyleri Düzenlemek İçin Doğrudan İçeriğinize Yazmak

Bir sayfa oluşturucu yüklemenin ana nedenlerinden biri, WordPress’in arka uç (backend) metin düzenleyicisinin kısıtlamalarından kurtulmaktır. Arka uç düzenleyicinin kötü olmasından değil, ancak web sayfalarınızı oluştururken sayfanızın site ziyaretçilerinize nasıl görüneceğini anında göstermez ve içeriğinizi tek sütunlu bir düzenin dışına çıkarmanıza da izin vermez. Orada yalnızca metninizi ve bazı görselleri görebilirsiniz, ancak daha ayrıntılı şeylerin hiçbirini (ör. iletişim formları) göremezsiniz. Kısa kodlar ekleyebilirsiniz, evet, ancak işlenmiş halleriyle görünmezler*.

* Bunu çözmek için başkaları tarafından yapılan Shortcake UI gibi eklentiler var, ancak konu bu değil.

İşte ön uç (front end) sayfa oluşturucular tam bu noktada devreye giriyor. Düzenleme deneyimini arka uçtan ön uca taşıyarak, sitenizi ziyaretçilerinizin gerçekten göreceği şekilde düzenlemenizi. Pippin’in ifadesiyle: Ne görüyorsanız onu alırsınız (WYSIWYG).

Ön uç düzenleyici olmanın bir diğer güzel yanı da metninizi doğrudan düzenlemenize olanak sağlamasıdır. Başlıkları ve paragrafları doğrudan yazmak, web sitesi oluştururken alışılagelmiş bir kelime işlemciyi kullanmanın kolaylığını sunar. Düğmeler ve sekme etiketleri de sadece üzerlerine tıklayıp yazılarak değiştirilebilmelidir.

Bu, diğer birçok sayfa oluşturucunun iyi bir performans sergileyemediği alandır. Çoğu, her şeyi düzenlemek için sizi bir metin alanının içine yazmaya zorlar. Yine, gerçek ön uç sayfa oluşturucularda durum böyle olmamalıdır. Metni doğrudan yazmak ve düzenlemek, sürüm 2’den bu yana Page Builder Sandwich’in güçlü bir yönü olmuştur ve bunun sürüm 3’te de korunduğundan emin olduk.

Temel Kavram #2: Hızlı İnce Ayarlar İçin Fareyi Kullanmak

Fare, sayfa oluşturucularda genellikle ihmal edilen güçlü bir araçtır. Sayfa oluşturucular genellikle fareyi kullanıcıların nesneleri sürükleyip farklı konumlara bırakmasına ya da düğmelere veya giriş alanlarına tıklamasına olanak tanımak için kullanır. Bu fena olmasa da, sayfa oluşturma açısından fare ile yapabileceğiniz çok daha fazla şey vardır.

Birincisi, özellikle dış kenar boşlukları (margins), iç kenar boşlukları (paddings) ve boyutlar gibi görsel özellikleri ayarlarken fareyi sayfayı düzenleme aracı olarak kullanmanın harika bir görsel geri bildirimi vardır. Artık öğelerinize ince ayar yapmak doğal bir deneyim haline geliyor.

PBS sürüm 3’te farenizi kullanarak birçok şeyi ayarlayabileceksiniz. Tek tek öğeler arasındaki kenar boşluklarını/mesafeleri, sütunlarınızın iç kenar boşluklarını ve ayrıca görsellerin, simgelerin ve haritaların boyutlarını ayarlayabilirsiniz. Sayısal değerleri değiştirmenizi sağlayan düğmeleri de kaydırıcılarla değiştirdik.

Temel Kavram #3: Metin Kolayca Biçimlendirilebilmelidir

Monitörünüzden bir adım geri çekilirseniz, web sayfalarınıza eklediğiniz şeylerin çoğunun metin içeriği olduğunu fark edeceksiniz. Evet, onlara eşlik edecek resimler ve simgeler de var – ve son zamanlarda sitelerimize daha büyük resimler ekleme eğilimindeyiz. Ancak önemli içeriğin büyük kısmı tamamen metindir: başlıklar, madde işaretli listeler, paragraflar, alıntılar vb. Bunun yanı sıra metnimizi tasarımlarımıza uyacak şekilde nasıl biçimlendirdiğimiz de önemlidir. Ya boyutlarını ve renklerini değiştiririz ya da kalın veya eğik yaparız. Bu, içeriğimizin ilgili okuyucularımız için daha okunabilir, amaca uygun ve çekici olması içindir.

Metinleri sık sık biçimlendirdiğimiz için stilleri değiştirmemize izin veren düğmeler oldukça erişilebilir olmalıdır. Önce açmamız gereken bir açılır kutunun (pop-up) içine tıkıştırılmış olmamalıdırlar. Çoğu sayfa oluşturucu bu dertten muzdariptir. Kullanıcı arayüzlerinin ‘düzenli/sade’ olarak adlandırılması için en çok kullanılan seçenekler bile göz önünden saklanır.

Bunu çözmek için en sık kullanılan kelime işlemcilere göz attık. Genellikle ekranın üst kısmına yakın bir yerde metni biçimlendirmek için kullanılan çok sayıda düğmeden oluşan bir satır olduğunu fark ettik ve sürüm 3 için aynı düzeni benimsedik. Artık tüm metin biçimlendirme düğmelerinin yer aldığı bir satır, ekranınızın üst kısmında her zaman hazır bulunuyor. Bu, biçimlendirmeyi gerçekten hızlı ve metin düzenleme alışkanlıklarınıza son derece doğal hale getiriyor.

Temel Kavram #4: Gelişmiş Biçimlendirme Seçenekleri Esnek Ancak Anlaşılması Kolay Olmalıdır

Bir sayfa oluşturucunun asıl amacı, insanların kolayca göz alıcı tasarımlar oluşturmasına olanak tanımasıdır. Bu da zorlu bir öğrenme sürecine yol açmadan çok sayıda farklı ayar ve seçenek sunmamız gerektiği anlamına gelir. Kenar boşluklarını, iç boşlukları ayarlayabilmek ve metni biçimlendirmek harikadır ancak bunlar bir yere kadar yeterli olur. İşi tamamlamak için arka plan görselleri, desenler, kenarlıklar, sabit arka planlar ve daha fazlası gibi çok daha kapsamlı seçeneklere ihtiyacınız olacaktır. Tüm bu farklı ayarları üst üste yığmak biraz bunaltıcı olabilir, bu nedenle sürüm 3’te işleri daha kullanıcı dostu kılmak adına bunların bazılarını basitleştirdik ve kategoriler halinde düzenledik.

Temel Kavram #5: Kısa Kod Desteği

Son olarak, sayfa oluşturucumuzun WordPress üzerinde yükseldiğini unutmayalım. Platformu ve özelliklerini kucaklamalı, onları kısıtlamamalı veya onlardan sapmamalıyız. WordPress’in sunduğu en büyük özelliklerden biri kısa kodlardır. Bu, tüm içeriğin kısa kodlardan oluşması gerektiği anlamına gelmez – bu karmakarışık olurdu – bunun yerine sadece onlarla uyumlu olmalıyız. Pek çok eklenti ve tema kısa kodlar kullanır ve hepsini görmezden gelmek büyük bir kayıp olurdu. Aslında kısa kodlar, sayfa oluşturma söz konusu olduğunda kullanıcılara maksimum esneklik sağlar.

Birkaç hafta önce kısa kod eşleme sistemimizi kullanıma sunduk ve bu sayede yüzlerce eklentiden yüzlerce kısa kodu eşledik. WordPress eklenti dizininde bulunan en popüler eklentilere öncelik verdik, bu nedenle kendi sitelerinizde bunlarla karşılaşma olasılığınız oldukça yüksektir. Bu durum sürüm 3 ile daha da güçlendi ve gelecekte de bunu geliştirmeye devam edeceğiz.

Sonuç

Yukarıdaki tüm bu temel özellikleri ele aldık ve Page Builder Sandwich sürüm 3’e entegre ettik. Şimdiye kadar WordPress için geliştirdiğimiz en iyi sayfa oluşturucu bu oldu. Kullanımı daha sezgisel ve daha doğal, daha hızlı performans gösteriyor, kullanımı daha kolay ve her zamankinden daha kullanıcı dostu.

Olmazsa olmaz bir sayfa oluşturucu özelliği hakkında herhangi bir fikriniz varsa, aşağıya yorum yaparak bize bildirin.