UI/UX tasarım
UI/UX tasarım: geliştirmeden önce kullanıcı akışını netleştirin
Ekranları doğrudan kodlamak yerine; kullanıcının ne yapmaya geldiğini, hangi adımlardan geçeceğini ve hangi ekranı nerede göreceğini önce tasarlıyoruz. Böylece geliştirme, üzerinde anlaşılmış bir plana göre ilerliyor.
Dönüşüm oranı veya kullanılabilirlik puanı garantisi vermiyoruz. Kullanıcı testi veya ölçüm hizmeti kapsama dahilse ayrıca belirtiriz; örnek akışlar temsilîdir.
Neden önce tasarım?
Doğrudan kodlamanın maliyeti nerede çıkar?
Yanlış ekran geliştirilir
Kullanıcının asıl görevi netleşmeden yapılan ekranlar, geliştirme bittikten sonra değiştirilir. En pahalı değişiklik, kod yazıldıktan sonra fark edilen akış hatasıdır.
Herkes farklı bir şey hayal eder
Yazılı bir akış ve tıklanabilir prototip olmadığında işveren, tasarımcı ve geliştirici aynı cümleden farklı ekranlar anlar. Anlaşmazlık genellikle demo aşamasında ortaya çıkar.
Boş ve hata durumları unutulur
Mutlu senaryo kolayca çizilir; veri yokken, arama sonuç vermezken veya form hata verirken ne görüneceği çoğu zaman sona bırakılır ve eksik kalır.
Mobil sonradan sıkıştırılır
Masaüstü için tasarlanan ekran mobile daraltılınca bilgi sırası bozulur. Mobil davranış baştan düşünülmediğinde kullanıcı en çok kullandığı ekranda zorlanır.
Kavramlar
UX, UI ve bilgi mimarisi aynı şey değildir
| Katman | Sorduğu soru | Teslimi |
|---|---|---|
| UX / kullanıcı akışı | Kullanıcı ne yapmaya geldi, hangi adımlardan geçecek? | Görev tanımı, kullanıcı akışı, ekran durumları. |
| Bilgi mimarisi | İçerik nasıl gruplanacak, kullanıcı aradığını nerede bulacak? | İçerik envanteri, gruplama, gezinme ve adlandırma. |
| UI / arayüz | Ekran nasıl görünecek, hangi bileşenler kullanılacak? | Görsel tasarım, bileşenler, durum ve etkileşim detayı. |
Teslimler
Projede neyi teslim ediyoruz?
Kullanıcı görevi ve akış
Her önemli kullanıcı için (ör. teklif isteyen ziyaretçi, bilgi arayan müşteri) hangi adımlardan geçtiğini gösteren bir akış. Nerede karar verdiği ve nerede vazgeçebileceği işaretlenir.
Bilgi mimarisi
İçeriğin gruplanması, menü yapısı ve sayfa adlandırması. Ziyaretçinin aradığını kaç adımda bulduğu açıkça görülür.
Wireframe (düşük detay)
Renk ve görselden önce, ekranda neyin nerede duracağını gösteren iskelet. Erken aşamada ucuz ve hızlı değiştirilebilir.
Tıklanabilir prototip
Ana akışların tıklanarak denenebildiği prototip. Geliştirmeden önce akışın gerçekten çalışıp çalışmadığı birlikte görülür.
Ekran durumları
Dolu, boş, yükleniyor ve hata durumları ayrı ayrı tasarlanır. Geliştirici hangi durumda ne göstereceğini tahmin etmek zorunda kalmaz.
Geliştirmeye devir
Bileşen listesi, boşluk/tipografi kuralları ve ekran notlarıyla birlikte, geliştirmenin referans alabileceği düzenli bir devir paketi.
Süreç
UI/UX projesini nasıl yürütüyoruz?
- 1
Görev ve kapsam
Hangi kullanıcıların, hangi görevleri yapacağını ve projenin bu aşamada neyi kapsadığını birlikte netleştiririz.
- 2
İçerik ve bilgi mimarisi
Mevcut içerik envanteri çıkarılır; gruplama, gezinme ve adlandırma kararlaştırılır.
- 3
Akış ve wireframe
Önce kullanıcı akışı, sonra düşük detaylı wireframe üzerinde anlaşılır; değişiklikler bu ucuz aşamada yapılır.
- 4
Arayüz ve prototip
Onaylanan iskelet, mevcut marka diline uygun arayüze dönüştürülür ve tıklanabilir prototip hazırlanır.
- 5
Devir
Ekran durumları, bileşenler ve notlarla birlikte geliştirmeye hazır bir devir paketi teslim edilir.
Kapsam
Bu hizmete dahil olanlar ve olmayanlar
Hizmetin temel kapsamı
- Kullanıcı görevi ve akış tasarımı
- Bilgi mimarisi ve gezinme planı
- Wireframe ve tıklanabilir prototip
- Dolu/boş/yükleniyor/hata ekran durumları
- Mobil öncelikli davranış kararları
- Geliştirmeye düzenli devir paketi
İhtiyaca göre ayrıca planlananlar
- Yazılım geliştirme ve kodlama
- İçerik metinlerinin yazımı (ayrı planlanır)
- Moderasyonlu kullanıcı testi (talep edilirse ayrı kapsam)
- Fotoğraf ve video prodüksiyonu
Tasarım onaylandıktan sonra geliştirmeyi web tasarım ve geliştirme hizmetimizle sürdürebilir, reklam kampanyası için landing page tasarımına geçebilirsiniz.
Sık sorulanlar
UI/UX tasarımı hakkında sorulanlar
UI/UX tasarımı geliştirmeden ayrı mı alınır?
İkisi birden alınabilir ya da yalnızca tasarım aşaması alınabilir. Özellikle iç ekip veya başka bir geliştiriciyle çalışacaksanız, net bir akış ve devir paketi için tasarımı bağımsız bir aşama olarak almak işi netleştirir. Tasarımı biz yaparsak geliştirmeye de aynı ekiple devam edebiliriz.
Kullanıcı testi yapıyor musunuz?
Moderasyonlu kullanıcı testi her projenin standart kapsamında değildir; gerektiğinde ayrı bir kapsam olarak planlarız. Bu sayfadaki örnek akışlar gerçek test sonucu değil, yöntemi göstermek için hazırlanmış temsilî örneklerdir.
Hangi araçla çalışıyorsunuz?
Prototip ve tasarım dosyalarını tıklanabilir biçimde paylaşıyoruz; ekibinizin inceleyip yorum bırakabileceği bir ortamda ilerliyoruz. Araç seçimi projeye göre netleşir; önemli olan akışın denenebilir olması ve geliştirmeye düzgün devredilmesidir.
Mevcut sitemizin tasarımını koruyabilir miyiz?
Evet. Mevcut marka dili, renk ve bileşenleriniz varsa UI katmanını bunların üzerine kurarız; sıfırdan görsel kimlik gerekmez. Amaç, var olanı bozmadan akışı ve ekran durumlarını netleştirmektir.
Tasarım bitince dönüşüm artacak mı?
Bunu garanti etmiyoruz. İyi bir akış ve net ekran durumları, kullanıcının görevini tamamlamasını kolaylaştırır; ancak dönüşüm reklam, teklif, fiyat ve pazar gibi birçok etkene bağlıdır. Ölçüm kapsama dahilse, yayından sonra gerçek veriye göre iyileştirme öneririz.
İlgili sayfalar
UI/UX tasarımıyla birlikte değerlendirebileceğiniz sayfalar
- Web Tasarım ve Dijital DeneyimKurumsal site, yenileme ve kampanya sayfalarını kapsayan genel web tasarım ve geliştirme hizmetimiz.İnceleyin
- Web Sitesi Hız ve Performans İyileştirmeMevcut sitede performans teşhisi, öncelikli düzeltmeler ve önce/sonra laboratuvar ölçümü; hız garantisi olmadan.İnceleyin
- Web Erişilebilirlik İyileştirmeKlavye, odak, form, kontrast ve ekran okuyucu sorunlarının incelenmesi ve düzeltilmesi; sertifika/uygunluk iddiası olmadan.İnceleyin
- Landing Page TasarımıGoogle Ads ve Meta reklamları için tek hedefe odaklanan, talebi doğru ölçen açılış sayfaları.İnceleyin
- Sanayi Firmaları İçin Web SitesiÜretici ve sanayi firmaları için ürün kataloğu, teknik doküman, teklif formu ve çok dilli B2B web siteleri.İnceleyin
- Ankara Web TasarımAnkara'daki işletmeler için yerel görüşme ve iletişim imkânıyla web tasarım hizmeti.İnceleyin
Kullanıcı akışınızı birlikte tasarlayalım
Hangi kullanıcıların hangi görevleri yapacağını konuşalım; geliştirmeden önce akışı ve ekranları netleştiren bir tasarım planı çıkaralım.
Bütün hizmet kapsamı için Web Tasarım ve Dijital Deneyim sayfamıza göz atabilirsiniz.