DESIGN PROCESS
TDK Sözlük Uygulması Vaka Çalışması
UI / UX DESIGN
Proje, Adem İlter ve Hakan Ertan’ın Twitter üzerinden yürüttükleri bir redesign projesi olarak karşıma çıktı. Ben de neler yapabileceğimi görmek için proje ile ilgili çalışmalara başladım.
Brief
TDK’nın kendi yayınladığı sözlük uygulamasının tüm fonksiyon ve sayfaları ile birlikte yeniden tasarlanmasını istiyorlardı.
Tasarım Süreci
Analiz & Araştırma
Sezgisel Analiz
İlk olarak var olan uygulamayı indirip hem UI anlamında hem UX anlamında detaylı bir analiz yaptım.
Bu analizin sonucunda gözüme çarpan problemler aşağıdaki gibiydi:
- Geçmiş ve Sık Kullanılanlar sayfasından herhangi bir öğe seçildiğinde sistemin görünebilirlik durumu bana görüntülediğim kelimeyi hangi sayfadan görüntülediğimi göstermiyordu.
- Bir kelime ile arama yaptığımda detay sayfasından arama listesi sayfasına geri dönemiyordum.
- Arama alanına tıklandığında klavyede olmayabilecek türkçe karakterlerin ekranın üst tarafında listelenmesi güzel bir düşünceydi fakat tıklanabilirlikleri çok kötüydü.
- Sık kullanılanlar veya geçmiş aramalarındaki kelimeleri tek tek silmek için grid elementini sola sürüklemek gerekiyordu, bu da ortalama bir kullanıcının fark edemeyeceği bir detay olabilirdi.
Rakip Analizi
Uygulama mağazalarında bulunan diğer uygulamaları inceleyerek onlardan fikirler almaya çalıştım. Bulduğum fikirleri bir alt kısımdaki ‘Fikirler’ kısmında belirttim.
Fikir
Analiz ve araştırma sonucunda yeni neler eklenebilir diye üzerinde düşünmeye başladım.
- Kelime detay sayfasında kelimenin google translate ile farklı dillerdeki varyasyonlarını göstermek güzel olabilirdi.
- Sık kullanılan ve geçmiş yapılan aramalara ana ekranda öncelik verilebilir.
- Sesli kelime arama konulabilir.
- Aratılan kelimeyi WhatsApp üzerinden arkadaşlar ile paylaşılabilir ve bu paylaşım paylaşılan kişiyi web sitesine yönlendirebilirdi.
- İmla ve yazım kuralları günümüzün en büyük problemleri bunlar hakkında ayrı bir alan olabilirdi.
- Noktalama işaretleri yine aynı şekilde önemli bir faktör olabilir.
- Arama filtresi konulabilir, kelime, deyim, atasözü gibi seçenekler konulabilir.
- Uygulama herkese hitap edeceği için ve bu herkesin içerisinde erişebilirlik sıkıntısı yaşayan kullanıcılar da olduğu için, renk kontrastlarına, sesli ve işitsel özelliklere dikkat edilmesi gerekiyor.
Site Haritası & Flow Chart
SITEMAP & FLOW CHART
Lo-Fi Wireframe
SKETCH WIREFRAME
Tasarım
Tasarıma başlamadan önce internette bulabildiğim tasarımları inceleyerek bir moodboard oluşturdum. Genel tasarım trendine karar verdikten sonra tasarımı yaparken bir yandan da renkleri, fontları, layout ve komponentleri barındıran bir stil şablonu oluşturdum.
Genel tasarım yapısı olarak 2020 trendleri arasında oldukça popüler olan Neumorphism kullanmaya karar verdim. Ana rengimiz zaten TDK’nın kendi rengi olan koyu bir kırmızı renk olarak mevcut. Yardımcı ve diğer renkleri de belirledikten sonra font olarak, normal başlıklarda serif ve normal yazılarda okunabilirliği güçlü kılmak için sans-serif font kullanmaya karar verdim.
DESIGN
STYLE GUIDE