Yeni Arayüzümüz ve Anket Sonuçları...
https://www.enpedi.com/2013/11/yeni-arayuzumuz-ve-anket-sonuclar.html
Çoğunuzun bildiği gibi 2 ayı aşkın bir süredir site arayüzünü yeniden tasarlamakla meşguldüm. Artık -ufak tefek sorunlar olsa da- yeni arayüzümüz devreye tamamen geçti. Bu yazıda bu arayüz ile ilgili kısaca bilgi verdikten sonra yine bu arayüzle ilgili yaptığım anketin sonuçlarını paylaşacağım...
Yeni arayüzün ismi Enpedi-Fold.
En büyük özelliği esnek tasarıma sahip olması. Yani site her ekran çözünürlüğüne kendini adapte edebiliyor. Altta Enpedi'yi farklı çözünürlükte ekrana sahip cihazlarda açtığınızda arayüzün nasıl davrandığını görüyorsunuz;
Esnek tasarım (Responsible Design) Web sitelerinin tasrımında yeni bir trend ve çoğu internet sitesi bu tasarıma sahip arayüzlere geçmiş durumda. Ancak gerek -nispeten- yeni bir tasarım şekli olması gerekse çok fazla ekran çözünürlüğünün olması sebebiyle bu tasrımın bazı sorunları yok değil.
Ayrıca her internet tarayısının hatta aynı tarayıcının farklı sürümlerinin kodları farklı yorumlaması da sorunlara yol açabiliyor. Böyle bir durumla karşılaşırsanız tavsiyem tarayıcınızın önbelleğini temizleyin veya farklı bir tarayıcı ile sayfayı açmayı deneyin.
Tarayıcıların sayfaları farklı yorumladığı durumlarla karşılaştığımda temel tarayıcı olarak Chrome'u aldım. Bunun sebebi siteyi ziyaret edenlerin yarısından fazlasının Chrome tarayıcısını tercih etmesi. Bu yüzden siteyi en doğru olarak Chrome ile görüntüleyebilirsiniz. Altta merak edenler için siteyi son 3 ayda ziyaret edenlerin tarayıcıya göre dağılımını görebilirsiniz;
Sitenin görüntülenmesinde en önemli faktörlerden biri doğal olarak çözünürlük. Siteyi ziyaret edenlerin %85'i bilgisayar ekranı ya da bilgisayar ekranı çözünürlüğüne sahip. Bu yüzden de siteyi tasarlarken -her ne kadar daha düşük çözünürlüklere adapte olabilse de- yüksek çözünürlüklere iltimas geçerek yüksek çözünürlüklerde daha uyumlu olacak şekilde tasarladım.
Yeni arayüzün önemli bir diğer özelliği de kolay erişim çubuğu. Sitenin en üstünde yer alan bu çubuk sayesinde sitedeki önemli içeriğe bulunduğunuz sayfadan ayrılmadan ulaşabileceksiniz;
Yeni arayüzdeki bir diğer yenilik de sayfaya eklenebilen modüller. Geri dönüşlerden anladığım kadarı ile pek sevmemiş ve kafa karıştırıcı bulmuşsunuz ama ben önemli olduklarını düşünüyorum. İleride daha aktif olarak kullanacağım şimdilik atıl durumdalar;
1- Kolay erişim çubuğundaki Performans sekmesinde kullandığım tablolarda esnek tasarıma sahip. Ancak bu tablolara ait kodlar site genelindeki tabloları etkilemiş durumda. Bu ise işlev kaybı olmasa da estetik olarak kötü duruyor. Konuyla ilgileneceğim.
2- Bir etikete tıklattığınızda eğer etikete ait çok fazla girdi varsa tamamı listelenmiyor ve fazlasını yükle butonu belirmiyor, sıralama şekli seçilemiyor. Konuyla ilgileneceğim.
3- Yazıların kronolojik olarak sıralandığı bölümde var olan daha fazla yazı yükleme seçeneği kullanışlı değil. Alt tarafa sayfa numaralarının yer aldığı bir gezinme opsiyonu ekleyeceğim.
4- Sitede 3 tane reklam alanı mevcut: Makale üstü, makale altı ve yan kolon. Makale üstü ve altındaki reklamlarda esnek yani çözünürlüğe duyarlılar. Ancak bu reklamlar yalnızca ilk sayfa yüklemesinde esnek. Sayfa boyutunda bundan sonra (ör. ekran yönü değiştirildikten sonra) yapılan değişiklikler yeni bir reklam boyutunun görüntülenmesine neden olmaz. Bu kısıtlamayı Google ileride giderecek. Altta bu durumu açıklayan ekran alıntıları görüyorsunuz;
5- Arama kısmındaki Ara butonu her tarayıcıda farklı yorumlanıyor. Şu an için düzgün görüntülendiği tek tarayıcı Chrome. Bununla ilgileneceğim.
I- İlk yükleme esnasında fark edebileceğiniz gibi üstteki menü daha geç yükleniyor. Bu esnada da üstte bir boşluk oluşuyor. (Alttaki resim-I)
Bunun sebebi bu menüyü oluşturan kodları gecikmeli olarak yüklenecek şekilde ayarlamam. Bu sayfa hızı performansı açısından bir gereklilik ve Google'ın yeni Web standartlarından.
II- Yine aynı sebeple bazı özel fontlar daha geç yükleniyor. (Üstteki resim-II)
Maalesef ankete istediğim kadar katılım olmadı. Ancak yine de yol gösterici olacaktır. Sonuçları burada görebilirsiniz. Buna göre;
Anlatmaya çalıştığım üzere sorunlar olabilir. Arayüzde gördüğünüz sorunları veya arayüz ile ilgili mennun olmadığınız konuları bildirmeniz son derece makbule geçecektir. Bildirimlerinizi lütfen alttaki şartlara uygun olarak yapın;
Yeni yazılarıma 1-2 gün içinde başlayacağım. Kalın sağlıcakla...
Giriş...
Yeni arayüzün ismi Enpedi-Fold.
En büyük özelliği esnek tasarıma sahip olması. Yani site her ekran çözünürlüğüne kendini adapte edebiliyor. Altta Enpedi'yi farklı çözünürlükte ekrana sahip cihazlarda açtığınızda arayüzün nasıl davrandığını görüyorsunuz;
Esnek tasarım (Responsible Design) Web sitelerinin tasrımında yeni bir trend ve çoğu internet sitesi bu tasarıma sahip arayüzlere geçmiş durumda. Ancak gerek -nispeten- yeni bir tasarım şekli olması gerekse çok fazla ekran çözünürlüğünün olması sebebiyle bu tasrımın bazı sorunları yok değil.
Ayrıca her internet tarayısının hatta aynı tarayıcının farklı sürümlerinin kodları farklı yorumlaması da sorunlara yol açabiliyor. Böyle bir durumla karşılaşırsanız tavsiyem tarayıcınızın önbelleğini temizleyin veya farklı bir tarayıcı ile sayfayı açmayı deneyin.
Tarayıcıların sayfaları farklı yorumladığı durumlarla karşılaştığımda temel tarayıcı olarak Chrome'u aldım. Bunun sebebi siteyi ziyaret edenlerin yarısından fazlasının Chrome tarayıcısını tercih etmesi. Bu yüzden siteyi en doğru olarak Chrome ile görüntüleyebilirsiniz. Altta merak edenler için siteyi son 3 ayda ziyaret edenlerin tarayıcıya göre dağılımını görebilirsiniz;
Kolay erişim çubuğu...
Yeni arayüzün önemli bir diğer özelliği de kolay erişim çubuğu. Sitenin en üstünde yer alan bu çubuk sayesinde sitedeki önemli içeriğe bulunduğunuz sayfadan ayrılmadan ulaşabileceksiniz;
Modüller...
Yeni arayüzdeki bir diğer yenilik de sayfaya eklenebilen modüller. Geri dönüşlerden anladığım kadarı ile pek sevmemiş ve kafa karıştırıcı bulmuşsunuz ama ben önemli olduklarını düşünüyorum. İleride daha aktif olarak kullanacağım şimdilik atıl durumdalar;
Bilinen sorunlar;
1- Kolay erişim çubuğundaki Performans sekmesinde kullandığım tablolarda esnek tasarıma sahip. Ancak bu tablolara ait kodlar site genelindeki tabloları etkilemiş durumda. Bu ise işlev kaybı olmasa da estetik olarak kötü duruyor. Konuyla ilgileneceğim.
2- Bir etikete tıklattığınızda eğer etikete ait çok fazla girdi varsa tamamı listelenmiyor ve fazlasını yükle butonu belirmiyor, sıralama şekli seçilemiyor. Konuyla ilgileneceğim.
3- Yazıların kronolojik olarak sıralandığı bölümde var olan daha fazla yazı yükleme seçeneği kullanışlı değil. Alt tarafa sayfa numaralarının yer aldığı bir gezinme opsiyonu ekleyeceğim.
4- Sitede 3 tane reklam alanı mevcut: Makale üstü, makale altı ve yan kolon. Makale üstü ve altındaki reklamlarda esnek yani çözünürlüğe duyarlılar. Ancak bu reklamlar yalnızca ilk sayfa yüklemesinde esnek. Sayfa boyutunda bundan sonra (ör. ekran yönü değiştirildikten sonra) yapılan değişiklikler yeni bir reklam boyutunun görüntülenmesine neden olmaz. Bu kısıtlamayı Google ileride giderecek. Altta bu durumu açıklayan ekran alıntıları görüyorsunuz;
Sayfayı 1366x768p ekranda açtınığınızda reklam böyle görüntülenir...
Daha sonra tarayıcıyı yeniden boyutlandırır (Örneğin, ufaltırsanız) reklam birimi bu çözünürlüğe adapte olmayacak ve sadece bir kısmı görüntülenecektir.
Oysa aynı boyutta sayfayı tekrar yüklerseniz reklam birimi çözünürlüğe adapte olacak
ve farklı bir boyutta belirecektir.
5- Arama kısmındaki Ara butonu her tarayıcıda farklı yorumlanıyor. Şu an için düzgün görüntülendiği tek tarayıcı Chrome. Bununla ilgileneceğim.
6- Modüllerin bazı türlerinde resimlerde bir ölçeklendirme sorunu var. Bu yüzden resim yatay olarak genişliyor ve ölçeği bozuluyor. Bu sorunu ne kadar uğraştıysam da çözemedim.
Sorun gibi görünen ama sorun olmayanlar;
I- İlk yükleme esnasında fark edebileceğiniz gibi üstteki menü daha geç yükleniyor. Bu esnada da üstte bir boşluk oluşuyor. (Alttaki resim-I)
Bunun sebebi bu menüyü oluşturan kodları gecikmeli olarak yüklenecek şekilde ayarlamam. Bu sayfa hızı performansı açısından bir gereklilik ve Google'ın yeni Web standartlarından.
II- Yine aynı sebeple bazı özel fontlar daha geç yükleniyor. (Üstteki resim-II)
Anket sonuçları,
Maalesef ankete istediğim kadar katılım olmadı. Ancak yine de yol gösterici olacaktır. Sonuçları burada görebilirsiniz. Buna göre;
- Yeni arayüzümüz genel olarak beğenilmiş.
"Evet. Çok güzel olmuş!", "Evet, ama iyileştimeler gerekiyor..." cevaplarını seçenlerin toplamı %81. Ayrıca "Diğer" seçeneğini seçerek yorum bırakanları da orantıya eklediğimde bu oran %90'a yaklaşıyor. - Sitenin kullanışlılığının arttığını düşünenlerin oranı %63.
"Birşey fark etmedi" cevabını verenlerin oranı olan %24'ü eklediğimizde ankete cevap verenlerin %87'sinin en azından eskisinden kötü olmadığını düşündüğünü söyleyebiliriz. - Hızlı erişim menüsünü en beğenilen özellik olmuş. Yararlı olduğunu düşünenlerin oaranı %72. Kaldırılsın diyenlerin oarnı ise %5'te kalmış.
- Sitenin yüklenme hızı ise %85 katılımcıya göre fena değil. Bu oranın %64'ünün yüklenme hızından memnun olduğunu belirteyim.
"Diğer" seçeneğini seçen kullanıcıların şikayetleri ise şunlar;
- Yazı tipi değişimi ve daha yumuşak tasarımlar olabilir.
Bu konuda bazı iyileştirmeler yaptım ve yapmaya devam edeceğim.
- Yeşil rengin tonu bence okunurluğu azaltmış.
- beyaz arkaplanlarda yeşil parlıyor,yeşilin tonu biraz mat olursa daha okunaklı olur
Yeşil renk daha önceden ziyaret edilen (Visited) linklerde vardı. Bunu kaldırdım. Dolayıyla ana sayfada yeşil ile görüntülenen herhangi bir karakter kalmadı.
- Mobilden giriş yaptığımda bazı küçük sorunlar oluşuyor
Yazının başında da anllatığım üzere esnek tasarım biraz sorunlu bir tasarım bu tip sorunlar maalesef olabiliyor. Aynı sorunlar Microsoft'un da, Asus'un da vs. sitesinde var.
Bildirimde bulunun!
Anlatmaya çalıştığım üzere sorunlar olabilir. Arayüzde gördüğünüz sorunları veya arayüz ile ilgili mennun olmadığınız konuları bildirmeniz son derece makbule geçecektir. Bildirimlerinizi lütfen alttaki şartlara uygun olarak yapın;
- Kullandığınız işletim sistemini belirtin.
- Kullandığınız tarayıcıyı ve sürümünü belirtin.
- Ekran çözünürlüğünüzü belirtin.
- Konuyu açıklayan bir ekran alıntısı ekleyin.
Yeni yazılarıma 1-2 gün içinde başlayacağım. Kalın sağlıcakla...