Mevcut Arayüzünü Yenilemek İsteyen Şirketler İçin UI/UX Tasarım
Arayüzünüz yıllar içinde büyüdü; her yeni özellik bir yere sıkıştırıldı. Önce kullanılabilirlik denetimiyle nerede kan kaybettiğinizi çıkarıyor, ardından etki sırasına göre modül modül yeniliyoruz. Kullanıcı alışkanlığı tek gecede kırılmıyor.
- Denetim bulguları etki sırasına göre
- Kademeli geçiş planı
- Mevcut kod tabanına uyumlu design system
- Figma kaynak dosyaları size ait
Arayüz bozulmadı; ürünle birlikte büyümedi.
Yenileme ihtiyacı çoğu zaman tek bir şikâyetle değil, birikmiş küçük işaretlerle belli oluyor. Aşağıdakiler, arayüz denetimlerinde en sık karşımıza çıkan tablolar.
- Her yeni özellik menüye bir madde eklediNavigasyon bir zamanlar beş başlıktı, bugün yirmi. Kullanıcı aradığını menüden değil, arama kutusundan buluyor.
- Destek ekibi aynı soruyu tekrar tekrar yanıtlıyor'Şu ayarı nereden yapacağım' sorusu düzenli geliyorsa sorun eğitimde değil, ekranın kendisinde.
- Aynı işlev iki yerde, iki farklı görünümdeYıllar içinde farklı ekipler farklı kalıplar kurdu. Tutarsızlık kullanıcıyı her ekranda yeniden öğrenmeye zorluyor.
- Mobilde kullanılabilir değil, sadece görünüyorEkran küçüldüğünde tablo taşıyor, buton parmakla vurulamıyor, form alanları üst üste biniyor.
- Yeni özellik eklemek her seferinde tartışmaOrtak bir bileşen dili olmadığı için her ekleme sıfırdan tasarlanıyor; geliştirme süresi tahmin edilemiyor.
- Kullanıcı en çok kullandığı ekranda en çok yoruluyorGünde onlarca kez açılan ekran, yılda bir açılan ekranla aynı özeni görmüş. En yüksek kazanç tam da burada duruyor.
Önce ölç, sonra sırala, sonra değiştir.
Yenilemenin riski, hepsini aynı anda değiştirmekten doğuyor. Biz işi denetim, önceliklendirme ve kademeli geçiş olarak ayırıyor; her adımın sonunda ölçülebilir bir çıktı bırakıyoruz.
- Kullanılabilirlik denetimiMevcut arayüzü heuristik ölçütlerle tarıyoruz: gezinme, geri bildirim, hata önleme, tutarlılık, erişilebilirlik. Her bulgu ekran adı ve etkisiyle birlikte kayda giriyor.TeslimBulgu envanteriEkran bazlı notErişilebilirlik gözlemleri
- Veri ve kullanıcı tarafıAnalitikte nerede kopuş var, destek kayıtlarında hangi soru tekrarlanıyor, kullanıcı hangi adımda vazgeçiyor — bulguları gözlemle değil veriyle destekliyoruz.TeslimKopuş noktalarıDestek kaydı temalarıKullanıcı görüşme notları
- Etki / efor önceliklendirmesiHer bulguyu kullanıcıya etkisi ve uygulama eforu ekseninde puanlıyoruz. Yenileme sırası buradan çıkıyor; ilk sıraya en çok kullanılan ekran geliyor.TeslimEtki / efor matrisiYenileme sırasıÖlçüm ölçütleri
- Yeni tasarım ve design systemTanıdık kalıpları koruyarak yeni görünümü kuruyor, bileşenleri token'larla tanımlıyoruz. Böylece sonraki ekranlar sıfırdan tasarlanmadan üretilebiliyor.TeslimYeni ekran tasarımlarıBileşen kütüphanesiGeçiş kılavuzu
- Kademeli geçiş ve ölçümYeni görünümü sınırlı bir gruba açıyor, eski/yeni karşılaştırmasını izliyor, geri bildirime göre düzeltip kapsamı genişletiyoruz.TeslimKademeli açılış planıKarşılaştırma raporuDüzeltme turu
On soruda arayüz sağlık kontrolü
Aşağıdaki maddeler, kullanılabilirlik denetimlerinde ilk baktığımız başlıkların kısaltılmış hâli. Kendi arayüzünüz için işaretleyin; puan ve en zayıf üç başlık anında hesaplansın. Hiçbir veri kaydedilmez.
- Yeni bir kullanıcı, ana işini yardım almadan bulabiliyor mu?Gezinmeağırlık 3
- Kullanıcı her ekranda nerede olduğunu anlıyor mu?Gezinmeağırlık 2
- Yanlış yapılan bir işlem geri alınabiliyor mu?Kontrolağırlık 3
- Her işlemden sonra ne olduğu ekranda görünüyor mu?Kontrolağırlık 2
- Hata mesajları ne yapılacağını söylüyor mu?Hataağırlık 3
- Formlar hatayı gönderimden önce yakalıyor mu?Hataağırlık 2
- Aynı işlev her ekranda aynı görünüyor mu?Tutarlılıkağırlık 2
- Boş ve ilk kullanım durumları tasarlanmış mı?İçerikağırlık 2
- Arayüz küçük ekranda gerçekten kullanılabiliyor mu?Düzenağırlık 3
- Klavyeyle gezinme ve metin kontrastı gözetiliyor mu?Erişilebilirlikağırlık 3
Tüm maddeleri yanıtladığınızda hangi yenileme türünün size uyduğunu ve önerilen ilk adımı burada göreceksiniz.
Bu kontrol listesi, kapsamlı bir kullanılabilirlik denetiminin kısaltılmış bir özetidir ve yerine geçmez; sonuç kendi değerlendirmenize dayanır. Gerçek denetimde bulgular ekran ekran, veri ve kullanıcı gözlemiyle birlikte çıkarılır.
Yenileme projesinde neler yapıyoruz?
Aşağıdakiler bir paket değil, bir menü. İlk fazda genellikle denetim, öncelik haritası ve en kritik iki üç ekranın tasarımı açılıyor; design system ve kalan ekranlar sıraya giriyor.
- KeşifKullanılabilirlik denetimiHeuristik tarama, ekran bazlı bulgu envanteri ve etki notları.
- KeşifAnalitik ve destek kaydı incelemesiKopuş noktaları, tekrar eden destek talepleri ve arama sorguları.
- DoğrulamaKullanıcı görüşmeleriMevcut kullanıcılarla moderasyonlu oturumlar; 'neden' sorusunun yanıtı.
- YapıBilgi mimarisi revizyonuMenü ve sayfa hiyerarşisinin görev odaklı yeniden kurgusu.
- ÇekirdekEkran yeniden tasarımıÖncelik sırasına göre ekranların yeni düzen ve görsel dille tasarımı.
- ÖlçekDesign system ve bileşen envanteriTekrar eden kalıpların tek dile getirilmesi, token ve varyant tanımları.
- GeçişKademeli geçiş planıHangi modül hangi sırayla, hangi kullanıcı grubuna açılacak.
- ÖlçümEski / yeni karşılaştırma düzeniÖlçütlerin tanımı, karşılaştırma kurgusu ve sonuç raporu.
Yenileme, erişilebilirlik borcunu kapatmak için en uygun an: kontrast, odak sırası, klavye erişimi ve dokunma hedefi kararlarını yeniden tasarlanan her ekranda gözetiyoruz. WCAG ölçütlerini referans alıyoruz; resmî uygunluk beyanı ise geliştirme bittikten sonra yapılacak ayrı bir denetimin konusudur.
Arayüz yenilemesi URL yapısına veya içerik hiyerarşisine dokunuyorsa taşıma planını baştan kuruyoruz — SEO kaybetmeden taşıma yazımız kontrol listesini veriyor. Kurumsal site yenilemelerinde web tasarım, uygulama tarafında ise web yazılım geliştirme ekibimiz aynı design system üzerinden ilerler.
Örnek bir yedi haftalık yenileme fazı
Aşağıdaki plan, orta ölçekli bir web uygulamasının ilk yenileme fazı için hazırlanmış örnektir. Sizin planınız ekran sayısı, kullanıcı grubu ve geliştirme kapasitesi netleştikten sonra çıkar.
| Hafta | Ne yapılır | Hafta sonunda elinizde ne olur |
|---|---|---|
| 1. hafta | Kullanılabilirlik denetimi | Bulgu envanteri, ekran bazlı notlar |
| 2. hafta | Analitik ve destek kaydı incelemesi | Kopuş noktaları, tekrar eden talepler |
| 3. hafta | Kullanıcı görüşmeleri | Gözlem notları, doğrulanan bulgular |
| 4. hafta | Önceliklendirme ve ölçüt tanımı | Etki/efor matrisi, yenileme sırası |
| 5–6. hafta | Öncelikli ekranların tasarımı | Yeni ekranlar, bileşen envanteri |
| 7. hafta | Geçiş planı ve teslim | Kademeli açılış planı, handoff dokümanı |
Sonraki fazlarda kalan ekranlar aynı design system üzerinden iki üç haftalık paketler hâlinde yenileniyor; her paketten sonra eski ve yeni görünüm tanımlı ölçütlerle karşılaştırılıyor.
- HizmetUI/UX TasarımHizmetin tamamı: araştırma, prototip, design system ve teslim kapsamı.
- HizmetWeb TasarımKurumsal site tarafında görsel dil, dönüşüm ve SEO odaklı yenileme.
- HizmetWeb Yazılım GeliştirmeYeni tasarımın mevcut kod tabanına uygulanması.
- HizmetTeknik DanışmanlıkYenileme mi yeniden yazım mı — bağımsız bir değerlendirme.
- ProjeLexigateKendi ürünlerimizden biri; arayüz kararlarını kendi ekibimizle yaşadığımız yer.
- RehberWeb sitesi yenileme: SEO kaybetmeden taşımaYenileme sırasında trafiği korumanın kontrol listesi.
- RehberKurumsal web sitesi için teknik SEO denetimiYenileme öncesi bakılacak teknik başlıklar, adım adım.
- RehberYazılım firması seçerken dikkat edilmesi gerekenlerYenileme teklifi karşılaştırırken sorulacak sorular.
Sık sorulanlar
Kapsam, kullanıcı tepkisi, SEO etkisi ve ölçüm hakkında en çok sorulanlar.
Önce arayüzünüze birlikte bakalım
Ekranlarınızı bize gösterin; ilk görüşmede en çok kan kaybettiğiniz akışı beraber tespit edip gerçekçi bir yenileme sırası çıkaralım. Keşif görüşmesi ücretsizdir ve sizi bağlamaz.
- ✓ Keşif görüşmesi ücretsiz
- ✓ Bulgular etki sırasına göre
- ✓ Figma dosyaları size ait
Kullanıcılarınızı kaybetmeden yeni deneyime geçin
Denetimle başlıyor, etki sırasına göre modül modül yeniliyor ve geçişi kademeli açıyoruz. Nereden başlayacağınızı birlikte belirleyelim.