UI/UX Tasarım Nedir? Kullanıcı Deneyimi ve Arayüz Tasarımı, Küçük İşletme Sitesi Örnekleriyle

UX, ziyaretçinin siteyi kullanırken yaşadığı deneyimdir. UI ise ekranda gördüğü arayüzdür: renk, yazı, düğme, boşluk. Küçük işletme sitelerinde ikisini aynı sayfada birlikte çözüyorum, ama bir sırası var. Önce ziyaretçinin ne yapmak istediğine bakıyorum, görünüşe sonra geçiyorum.

UX ile UI farkını bir örnekle anlatayım

Telefondan bir pastane sitesine giren biri üç şey arar: ne sattığınızı, nerede olduğunuzu ve size nasıl ulaşacağını. Bunları kaç dokunuşta bulduğu UX sorusudur. Aradığı telefon numarasının hangi renkte, hangi büyüklükte durduğu ise UI sorusudur.

İkisi ayrı işler ama birbirine bağlı. Düğme çok güzel olsa da ilk ekranda yoksa ziyaretçi bulamaz. Düğme ilk ekranda olsa da gri zemin üstünde silik duruyorsa yine bulamaz.

Küçük işletme sitesinde UX nereden başlıyor

Önce ziyaretçinin hangi cihazdan geldiğine ve ne aradığına bakıyorum. Esnaf sitelerinde çoğu zaman cevap telefon ve WhatsApp oluyor. Bu yüzden iletişim düğmesini ilk ekrandan çıkarmıyorum.

Kendi sitemdeki analiz formunda tek alan var: site adresi. Yazıyorsunuz, WhatsApp'ta hazır bir mesaj açılıyor. Ad, e-posta, telefon, konu gibi alanlar istemedim, çünkü alan sayısı arttıkça formu yarıda bırakan çıkar diye düşündüm. Bunu kendi sitemde ölçmedim, bir tasarım kararı olarak yazıyorum.

Mobil uyumun bu işteki yerini mobil öncelikli tasarım yazımda, UX'i iyileştiren küçük değişiklikleri kullanıcı deneyimi ipuçları yazımda anlattım.

UI tarafında somut düzeltmelerim

Kontrast

47 sayfada axe-core taramasıyla 613 kontrast ihlali öğesi buldum. Yardımcı metinlerde kullandığım gri tonu açtım ve sayı 46'ya indi, kalanı arama motoruna kapalı demo sayfalarında. Gri üstüne gri yazı güzel görünür ama gün ışığında telefonda okunmaz. Bir fotoğraftan marka renklerini çıkarmak için Görselden Renk Paleti aracımı kullanabilirsiniz, seçtiğiniz renklerin zemin üstünde okunup okunmadığına yine de gözle bakın.

Mobilde taşan buton

Bir sayfada kart içindeki düğme satırı bölmüyordu ve ızgara sütununu genişletiyordu. Telefonda sayfa yana kayıyordu. Düğmeyi ızgaranın dışına aldım, mobilde metnin sarılmasına izin verdim. Sonra 291 sayfayı 375 piksel genişlikte taradım ve sorunlu sayfa kalmadı.

Kart ızgaralarında son satır

Beş kartı üç sütuna dizince son satırda tek kart yalnız kalıyor. Sütun sayısını sabitleyip son satırı ortalıyorum ya da kart sayısını sütun sayısına bölünecek şekilde seçiyorum.

Bir sayfaya nasıl başlıyorum

Dört soru soruyorum: ziyaretçi nereden geliyor, ne arıyor, hangi düğmeye basmasını istiyorum, o düğmeye basması için ilk ekranda ne görmesi gerekiyor. Cevaplar belli olunca renk ve yazı tipine geçiyorum. Süslü bir sayfanın ziyaretçiyi müşteriye çevirmediğini süslü web siteleri yazımda yazdım. Trendlerin nerede işe yaradığına web tasarım trendleri yazımdan bakabilirsiniz.

UX tasarımcısı ne yapar, ben ne yapıyorum

Büyük ürün ekiplerinde UX tasarımcısı kullanıcı araştırması yapar, akış şemasını çizer, ekran taslaklarını hazırlar, prototip kurar ve prototipi kullanıcılarla dener. Küçük işletme sitesinde bu zincirin çoğu tek kişide birleşiyor ve kısalıyor. Ben akışı yazıyorum, ekranı kuruyorum ve telefonda kendim deniyorum.

Bu sadeleşmenin bir bedeli var. Gerçek kullanıcıyla test yapmadığım için bir düğmenin yerini beğenip beğenmediğinizden fazlasını söyleyemem. Ziyaretçinin davranışı ancak yayından sonra GA4 ve Search Console verisinde görünüyor.

İyi bir arayüzün dört işareti

Yazı okunuyor: gövde metni telefonda en az 16 piksel olmalı. Benim sayfalarımda masaüstünde 18, mobilde 16 piksel kullanıyorum. Kontrast yeterli: WCAG normal metin için en az 4,5'e 1 oranını istiyor, ayrıntısı erişilebilirlik yazımda. Dokunma alanı rahat: parmakla basılan düğmeler genellikle 44 ile 48 piksel civarında öneriliyor. Boşluk yeterli: öğeler birbirine yapışıkken ziyaretçi yanlış yere basıyor.

Dördü ayrı ayrı küçük işler ama biri bozuksa ziyaretçi nedenini fark etmeden sayfadan çıkıyor. Bunu ölçmedim, gözlemim.

Telefonda kontrol ettiğim beş yer

Telefon numarası dokunulunca arıyor mu? WhatsApp düğmesi ilk ekranda mı? Sayfa yana kayıyor mu? Form alanına dokununca açılan klavye alanı kapatıyor mu? Metin tire ile kırılıyor mu? Bu beş soruyu siteyi teslim etmeden önce kendi telefonumda deniyorum. Cevaplardan biri hayırsa yayına almıyorum.

Bir değişikliğin işe yaradığını nasıl anlıyorum

Sitemde telefon ve WhatsApp tıklamalarını iletisim_tiklama olayı olarak, analiz formunun gönderimini analiz_talebi olayı olarak kaydedecek şekilde kurdum. Bir UX değişikliğinin işe yarayıp yaramadığını bu olayların önce ve sonra sayısına bakarak anlamaya çalışıyorum. Veri azsa sonuç çıkarmıyorum, iki üç tıklamalık farkı başarı saymıyorum.

Sayfada tek ana eylem

Bir sayfada ziyaretçinin yapmasını istediğim tek bir ana eylem seçiyorum. Kendi sayfalarımda ana eylem dolu yeşil düğme, ikincil eylem çerçeveli düğme. İki düğmeyi aynı güçle boyarsam ziyaretçi hangisine basacağını düşünmek zorunda kalıyor. Esnaf sitesinde ana eylem çoğu zaman ara ya da WhatsApp'tan yaz oluyor. Ana eylemi ilk ekranda bir kez, sayfanın sonunda bir kez daha tekrarlıyorum; ziyaretçi sayfayı sonuna kadar okuduğunda düğmeyi aramak zorunda kalmıyor.

Metin düğmelerinin üzerine WhatsApp simgesi koymuyorum. Düğmenin ne yaptığı yazıdan anlaşılıyor, simge eklemek yalnızca kalabalık yaratıyor.

Kaç sayfa yeterli

Çoğu küçük işletme için ana sayfa, üç dört hizmet sayfası, hakkında, sık sorulan sorular ve iletişimden oluşan sekiz on sayfalık bir yapı yeterli oluyor. Sayfa sayısını artırmak ziyaretçinin aradığını bulmasını kolaylaştırmıyor, zorlaştırıyor. Menüde her sayfaya yer vermek yerine ziyaretçinin en çok aradığı birkaç sayfayı öne çıkarıyorum, kalanını sayfa içi bağlantılarla ulaşılır tutuyorum. Sayfa sayısı arttıkça bakım yükü de artıyor. Güncellemeyi unuttuğunuz bir sayfa, hiç olmayan bir sayfadan daha kötü izlenim bırakıyor.

Yapmadığım işler

Isı haritası ya da kullanıcı testi gibi araştırma yöntemleriyle çalışan bir UX araştırma hizmeti sunmuyorum. Kararlarım Search Console, GA4, kendi telefonumdaki denemelerim ve işletmecinin müşterilerden duyduklarına dayanıyor. Yazının başında anlattığım düzeltmelerin dönüşüme etkisini ayrıca ölçmedim. Web sitesi çalışmalarımın tamamı web yazılım sayfamda duruyor.

Sık Sorulan Sorular