Bir web projesinin 2.0 versiyon hikayesi (eğitim içerik portalı)
Öncelikle deneysel başlayan hadi eğitim içeriklerini paylaşacağımız bir web sitesi kuralım işinin; hikayesine şahit olacaksınız :)
Yukarıdaki ön yüzü boyama kitabı tadında başlayan tasarımımızı nasıl evrildiği ile başlayalım.
Öncelikle çizilen projeyi html css ve javascript kullanarak koda döktükten sonra back-endi php ile yazdığımız sisteme giydirdik. Sistemi kurduktan sonra bot hızında içerikler eklendiği* için bir anda ciddi bir data oluştu ve bu datayı kontrol edemiyorduk :) Kar topu etkisi yarattı… * A. Oğultegin hocamın hızına yetişmek ne mümkün :) Saygılar…
Altyapıda yaşadığımız zorlukları front-end developer olarak doğru bir anlatım yapamayabilirim ama ilerleyen aşamalarda yorumlarımı sunmaya devam edeceğim yanlışlar olursa affola.
- İlk tasarımda en büyük problemlerden birisi kullanıcıyı çok fazla aşamadan geçirdikten sonra sonuca ulaştırıyorduk.
Ana sayfa > Sınıf seçimi > Ünite seçimi > kategori seçimi > varsa alt kategori seçimi > içerik tipi > varsa alt içerik tipi > içerik
v1.0 akış diyagramı #
şekilleri en son okulda görmüştüm hatalı ise kusura bakmayın lütfen :)
- Çok ciddi bir efor sarf ettikten sonra içeriğe ulaşılıyordu. Bu yaptığımız ilk hataydı v2.0’da buna fazlasıyla dikkat ettik.
- İkinci en büyük hatamız ise; yanlış slider scripti kullanmak. Bunun sonucunda kullanıcı deneyimi açısından nasıl bir kabus olduğunu finalde anlayabildik…
Owl Carousel 2 kullandık ve fark ettik ki kaydırırken kullanıcılar yanlış seçenek açıyorlar. Bu scriptin bu gibi olayları olduğunu (kronik sorun) edindiğimiz geri bildirimlerden deneyimledik. (trick bilgi olarak verebilirim; bence swiper kullanın daha stabil ve realtime responsive yapıyor ve bu muhteşem bir olay)
— v2.0 sürümünde slider kullanmamaya karar verdik :)
aogultegin.com v2.0
Arayüzü tamamen yeniledik ve daha kolay ama basit olmayan bir hale getirdik.
“Her şey olabildiğince kolay olmalı, ama ‘basit’ değil.”
— Albert Einstein
— Figma ile arayüzü çizip front-end HTML5/CSS3 (scss)/JS kullanarak kodlandı.
— PHP yazılan scripti çöpe atıp yeniden yazıldı ve Laravel framework kullanıldı. *
— Eski veritabanındaki tüm içerikler ciddi zaman harcanarak taşındı. *
* back-end‘i geliştiren F. Eşki’ye selamlar :)
— Yeni sunucu alımı yapıldı ve sistem gereksinimleri kuruldu. **
** N. Alpay’a teşekkürler :)
v2.0 akış diyagramı #
Yeni yapıda nelere dikkat ettik? #
- İçeriğe daha hızlı erişmeyi mümkün kıldık.
- Seçimleri çerezlere attık ve ana sayfayı tekrar ziyaret ettiği zaman sayfayı özelleştirdik.
- — Giriş yaptığı saate özel mesaj çıkardık.
- — Özel günlerde sitenin tüm renklerini ve mesaj alanını güncelledik.
- — Sınıf seçimini hafızada tuttuk ve ana sayfa öne çıkanlar ve son eklenenler içeriklerini güncelledik, sınıf seçimini sol açılır menüye ve sağ seçeneklere görünür halde ekledik.
- — Sınıf seçimini hafızada tutmamız sayesinde sınıf seçimi alanını ünite seçimi ile değiştirdik.
- Bonus içerikleri kategorilendirdik ve ayrıştırdık.
- İçerikleri yeni bir sayfa yerine popupda açtırmayı tercih ettik.
ve daha nice geliştirme ama en önemlisi bunlar olduğu için kısaca özetlemek istedim :)
Geliştirmelere nasıl devam ediyoruz? #
sıcaklık haritası
Sıcaklık haritası için Yandex.Metrica kullanıyoruz. Kullanıcı hareketlerine göre kullanıcı deneyimini şekillendiriyoruz.
* UI olmadan UX olur mu sorusuna güzel bir örnek sanırım :)
Hak verirsiniz ki sitenin gelir ve trafiğini paylaşamıyorum fakat yukarıdaki sıcaklık raporu ortalama 30k kullanıcı istatistiği.
Eski tasarım ve yeni tasarım trafik kıyaslaması #
Bu gelişimin en büyük etkenlerinden birisi olan içeriği de atlamamak lazım.
A. Oğultegin hocam kaliteli içerik üretiyor ve çözemediğimiz bir şekilde hızlı :)
Şu an sitede 4.000+ içerik mevcut ve her geçen gün bu sayı büyüyor.
Teşekkürler A. Oğultegin hocam. Selamlar…
Bir sonraki makale de görüşmek dileği ile…