Arayüz ne demek? Kullanıcı arayüzü (UI) ve UX’ten farkı

Arayüz, bir web sitesinde ya da uygulamada menüler, düğmeler ve form alanları üzerinden yazılım ile kullanıcının etkileşimini sağlayan, kullanıcının yapmak istediği işi ekranda gerçekleştirmesine aracılık eden düzenlenmiş ekran görüntüsüdür. Kullanıcı arayüzünün İngilizce karşılığını UIUser InterfaceKullanıcı arayüzü; kullanıcının gördüğü ve etkileşime girdiği ekran öğeleri. kısaltmasıyla ifade ederiz.

Biz bir ekranı değerlendirirken kullanıcının nereye bakacağını, hangi işlemi seçeceğini ve işlemden sonra ne göreceğini birlikte düşünürüz. Bir teklif formunda alanların görünümüyle formu tamamlama deneyimini ayrı ayrı inceleriz. Düğmenin okunması arayüzle, kullanıcının talebini iletirken geçtiği adımlar ise deneyimin bütünüyle ilgilidir.

Arayüz ne demek?

Arayüz, kullanıcının yazılımla etkileşim kurmasını sağlayan düzenlenmiş ekran görüntüsüdür. TDK’nin bilişim tanımı da yazılım ile kullanıcı arasındaki bu etkileşimi esas alır. İngilizce interface sözcüğünün Türkçe karşılığı arayüzdür; user interface ise kullanıcı arayüzü anlamına gelir.

Bir web sitesinde hizmetler menüsünü açmak, teklif formuna mesaj yazmak ve gönderme düğmesine basmak arayüz üzerinden gerçekleşir. Bir uygulamada menüden ilgili bölümü seçmek ve seçimden sonra gösterilen mesajı okumak da aynı ilişkinin örneğidir. Biz ekranı, kullanıcının yazılımla iletişim kurduğu alan olarak ele alırız.

Arayüzün kapsamına görünen metinlerle birlikte öğelerin yerleşimi de girer. Formun başlığı, alan etiketleri, düğmenin konumu ve işlem sonucunu bildiren mesaj birlikte çalışır. Biz bu parçaları aynı işin devamı olarak tasarlarız. Kullanıcının ne yapacağını anlaması ve yaptığı işlemin sonucunu görmesi, ekranı değerlendirirken takip ettiğimiz temel ilişkidir.

Kullanıcı arayüzü (UI) nedir?

Kullanıcı arayüzü, kullanıcının gördüğü ve etkileşime girdiği menü, düğme, form alanı, yazı tipi, renk, simge, boşluk ve geri bildirim mesajlarının bütünüdür. UI, İngilizce User Interface ifadesinin kısaltmasıdır. Biz bu öğelerin her birini ekrandaki göreviyle birlikte belirleriz.

Örneğin teklif formunda başlık, kullanıcının hangi işlemi yapacağını anlatır. “Ad soyad”, “E-posta” ve “Mesajınız” etiketleri beklenen bilgiyi gösterir. “Gönder” düğmesi formdaki birincil eylemi taşır. Biz alanların, etiketlerin ve düğmenin birbirleriyle ilişkisini kurar, kullanıcının formu nasıl okuyacağını kontrol ederiz.

Boşluk, yazı tipi ve renk de bu düzenin parçalarıdır. Başlık ile alan etiketi arasındaki farkı, düğmenin çevresindeki alanı ve mesajın okunurluğunu birlikte inceleriz. Bir hata oluştuğunda gösterilen metni de tasarımın içine alırız. Bizim için arayüz çalışması, ekranın başlangıç görünümüyle birlikte kullanıcının işlem sırasında karşılaştığı durumları da kapsar.

UX nedir?

UX, kişinin bir ürünü, sistemi ya da hizmeti kullanmasından veya kullanmayı öngörmesinden doğan algı ve tepkileri kapsayan kullanıcı deneyimidir. ISOISOUluslararası Standardizasyon Örgütü; ürün, hizmet ve süreçler için uluslararası standartlar yayımlar.’nun tanımı, kullanımdan önceki beklentiyi de bu kapsamda ele alır.

Kullanıcı deneyiminde ihtiyaç, akış, bulunabilirlik, hız, erişilebilirlik ve destek birlikte değerlendirilir. Biz teklif isteyen kişinin hizmet bilgisini nerede bulduğunu, forma nasıl ulaştığını, hangi sorularla karşılaştığını ve talebini nasıl tamamladığını inceleriz. Formun kendisi bu deneyimin içindeki etkileşim alanıdır.

UX tasarımında kullanıcının amacını ve bu amaca ulaşırken izlediği yolu çalışırız. Kullanıcı görüşmesinde neye ihtiyaç duyduğunu dinler, kullanılabilirlik testinde verdiğimiz görevi nasıl gerçekleştirdiğini izleriz. Destek taleplerini de incelemeye katarız; kullanıcının yardım istediği adımı akış içinde değerlendiririz.

Biz araştırma bulgusunu somut bir tasarım sorusuna dönüştürürüz. Formu bırakan kişinin hangi soruda durduğunu belirler, o sorunun ihtiyaçla ilişkisini inceleriz. Sonraki düzenlemeyi bu bulguya dayandırırız.

UI ile UX arasındaki fark nedir?

UI, ekrandaki öğeleri ve görsel dili; UX ise ihtiyaçtan işin tamamlanmasına uzanan deneyimin bütününü kapsar. UI, UX’in görünen parçasıdır. Biz düğmenin rengini ve yazısını UI kararı, formun kaç adımda tamamlandığını ve neden yarıda bırakıldığını UX sorusu olarak ele alırız.

Biz görev dağılımını bu sorulara göre yaparız. UI tasarımcısı ekran öğelerini ve görsel dili çalışır; UX tasarımcısı ya da araştırmacısı kullanıcı ihtiyacını ve akışı inceler. Küçük ekipte aynı kişi her iki sorumluluğu üstlendiğinde de görünüm ve akış için ayrı sorular sorarız.

Bir form değerlendirmesinde bu çalışmalar birbirini besler. Kullanıcı düğmeyi görmüyorsa görünümünü ve yerini inceleriz. Düğmeye ulaşıp formu bitirmiyorsa akıştaki soruları araştırırız. Biz tasarım kararını, gözlenen davranışın hangi aşamada ortaya çıktığına göre veririz.

İyi bir arayüz nasıl tasarlanır?

İyi bir arayüzü, kullanıcının yapacağı işi belirleyerek, akışı kurarak ve ekranı gerçek kullanıcıyla sınayarak tasarlarız. Biz görsel kararları bu işin gerektirdiği öğeler üzerinden veririz.

1. Kullanıcının yapacağı işi yazarızTeklif istemek gibi somut bir görevi ve kullanıcının ulaşmak istediği sonucu belirleriz.
2. Akışı adım adım çizerizKullanıcının başlangıç noktasından işi tamamlayana kadar geçtiği ekranları ve karşılaştığı soruları sıralarız.
3. Öğeleri ve birincil düğmeyi belirlerizMenü, form alanları ve mesajları yerleştirir, ekrandaki temel eylemin hangi düğmede olduğunu açıkça gösteririz.
4. Kontrastı ve okunurluğu kontrol ederizYazı ile arka planı karşılaştırır, etiketlerin ve geri bildirim mesajlarının okunmasını kontrol ederiz.
5. Gerçek kullanıcıyla test ederizKullanıcıya görevi verir, nerede durduğunu, hangi öğeyi seçtiğini ve işi nasıl tamamladığını izleriz.
6. Yayından sonra ölçer ve düzeltirizTerk noktalarını, oturum kayıtlarını ve destek taleplerini inceleyerek sorun görülen adımı yeniden ele alırız.

Kendi sitemiz markention.com’u yeniden tasarlarken şu kuralları koyduk. Çerçeveli bir yüzeyin içine ikinci bir kutu koymayız. Kırmızıyı her bölümde, yalnız seçili ya da kazanılan durumda kullanırız. Parlak, metalik veya üç boyutlu yüzeyler yerine düz ve sakin renkler seçeriz. Sahnelerde derinliği doku ve yavaş hareketle veririz.

Kırmızıyı yalnız seçili durumda kullanmak, kullanıcının gözünü ekrandaki birincil eyleme yöneltir. Çerçeve kullanımını, seçili öğenin rengini ve yüzeyin görünümünü aynı tasarım kararı içinde değerlendiririz. Kullanıcı testinde ise kişinin hedeflenen öğeyi bulup bulmadığını ve görevi tamamlayıp tamamlamadığını izleriz.

Arayüzde erişilebilirlik neden önemlidir?

Arayüzde erişilebilirlik, kullanıcının metni okuyabilmesini, öğeleri ayırt edebilmesini ve yapmak istediği işi sürdürebilmesini doğrudan etkiler. Biz renk, yazı ve düğme kararlarını bu kullanım ihtiyacıyla birlikte değerlendiririz.

WCAGWCAGWeb içeriğini engelli kullanıcılar dahil herkes için erişilebilir kılmaya yönelik W3C yönergeleri.’nin AA düzeyindeki minimum kontrast ölçütü, metin ile arka plan arasındaki oranı esas alır. Biz başlıkları, alan etiketlerini ve geri bildirim mesajlarını kendi arka planları üzerinde kontrol ederiz. Büyük metin için verilen oranı normal boyuttaki metne uygulamayız.

Bir teklif formunda hata mesajının açık olmasıyla okunabilir olması birlikte değerlendirilir. Biz mesajın ne söylediğine, yazı boyutuna ve arka planla ilişkisine bakarız. Mobilde düğmenin dokunma alanını ve yazının boyutunu ayrıca test ederiz. Aynı sayfanın tarayıcıda farklı görünmesini incelerken tarayıcı kontrollerini de uygularız.

Okunurluk incelemesini formun bütün durumlarında sürdürürüz. Başlangıçtaki alanları, kullanıcının seçiminden sonraki görünümü ve hata mesajını ayrı ayrı kontrol ederiz. Tasarımda seçtiğimiz rengin her kullanımını bulunduğu yüzeyle birlikte değerlendiririz.

Arayüz sorunu nasıl teşhis edilir?

Arayüz sorununu, gerçek kullanıcıya görev verip hangi öğede veya adımda takıldığını izleyerek teşhis ederiz. Biz gördüğümüz davranışı kaydeder, inceleyeceğimiz alanı bu davranışa göre belirleriz.

Her durumun karşılığı ayrı:

1. Kullanıcı düğmeyi görmüyor ya da yanlış yere tıklıyor → UI tarafında konumu, kontrastı, boyutu ve etiketi kontrol ederiz.
2. Kullanıcı adımları anlıyor ama işi bitirmiyor → UX tarafında akışı, adım sayısını ve beklenmeyen soruları inceleriz.
3. Kullanıcı sitede aradığını bulamıyor → Bilgi mimarisini ve menü yapısını gözden geçiririz.

Kullanılabilirlik testinde görevi verir, kullanıcının ilerleyişini izleriz. Görüşmede ise takıldığı noktayı nasıl yorumladığını dinleriz. Biz ısı haritası ve oturum kaydını incelerken de kullanıcının hangi öğelere yöneldiğini ve hangi adımda durduğunu takip ederiz.

Analitikte huni ve terk noktalarını, destek taleplerinde yardım istenen konuları inceleriz. Bulguları aynı görev etrafında bir araya getiririz. Örneğin teklif formunu ele alıyorsak menüden forma ulaşmayı, alanları doldurmayı ve gönderme adımını birlikte değerlendiririz. Düzeltilecek öğeyi bu incelemenin sonunda belirleriz.

Arayüz değişikliğinin etkisi nasıl ölçülür?

Arayüz değişikliğinin etkisini, düzenleme öncesinde ve sonrasında kullanıcının aynı görevi nasıl tamamladığını, nerede durduğunu ve nerede ayrıldığını karşılaştırarak ölçeriz. Biz ölçülecek işi değişiklikten önce tanımlarız.

Sık karşılaşılan durumları ve her birinde izlenen yolu tabloda topladık.

Teklif formundaki düğmeyi değiştirdiysek düğmeyle etkileşimi ve formun tamamlanmasını birlikte takip ederiz. Biz kullanıcı görüşmesini, kullanılabilirlik testini ve destek taleplerini de değerlendirmeye katarız. Kullanıcının yarıda bıraktığı adımı bulduğumuzda bir sonraki düzenlemeyi oraya yöneltiriz.

Biz UX/UI hizmeti kapsamında ekran kararlarını kullanıcı ihtiyacı, akış ve ölçümle birlikte ele alırız. Yayından önce tek birincil düğmeyi, okunur kontrastı, mobilde dokunma alanını ve hata mesajının açıklığını kontrol ederiz. Yayından sonra aynı görevi yeniden izler, düzeltilecek noktayı bulgularla belirleriz. Aynı arayüzü iOS ve Android’de sunma kararını Flutter nedir yazımızda, sayfa üstüne açılan katmanların deneyime etkisini pop-up ne demek yazımızda, renk kodlarının baskı ve ekran farkını Pantone ne demek yazımızda ele aldık. Sayfa yapısı ve kullanım kontrolleriyle ilgili yazdıklarımızın devamı web geliştirme yazılarımızda.

Sık sorulan sorular