Kullanıcı Deneyimi Tasarımı Ünite -13

Kazanımlar

1- Amaca yönelik arayüz öğelerinin hepsini tanır ve etkili kullanır.
2- Kullanıcıdan doğru ve geçerli veri alabilmek için gerekli yöntemleri bilir.
3- İşlenen veriyi etkili bir biçimde sunar.
4- Kullanıcının uygulama içerisinde kaybolmaması için uygun navigasyon öğelerini belirler ve kullanır.
5- Önem derecesine göre yönlendirmeleri düzenler.
6- Ortama özgü arayüz öğesi tasarlar ve kullanır.
7- Web’den mobile, mobilden web’e yönlendirmeyi organize eder.

Birlikte Düşünelim Arayüz tasarımında kullanılan öğeler nelerdir? Kategorize etmek mümkün müdür? Kullanıcılar hangi öğelerle nasıl veri girişi yapabilir? Uygulama içi yönlendirme için hangi öğeler kullanılır? Mobil ve web ortamları arasında kullanılan öğeler arasında fark var mıdır? Bilginin sunumu için hangi öğeler, hangi amaçla kullanılır?

Başlamadan Önce Arayüz tasarımında kullanılan öğeleri anlamak ve öğrenmek, görevleri ve hedefleri kullanıcıya doğru aktarmanın en önemli yöntemidir. Bu öğelerin sınıfları, kullanım alanları ve özelliklerini öğrendiğimizde, etkili ve güçlü anlatımlar yaratabiliriz. Kullanıcıyı rahatsız etmeyen, sezgisel ve neredeyse görünmez arayüzler tasarlamak hedef olmalıdır. Bu ünitede, en yaygın arayüz öğelerini kapsamıyla ele alarak çözümlerimizi arayüze aktarma konusunda ipuçları sunacağız.

Arayüz Tasarımına Genel Bakış Tasarımda kullanıcı deneyimini çevreleyen öğeler arayüzde yer alır. Arayüz, web siteleri ve dijital ürünlerin görünür yüzü, kullanıcıların bir ürün veya hizmetle etkileşimde bulundukları ana platformdur. Kullanıcı arayüzü, bu deneyimi kullanılabilir ve sezgisel kılacak öğeleri kapsar. Tasarım sırasında, kullanıcı deneyimini iyileştirmeye yönelik bazı kriterlere dikkat edilmelidir:

1- Aşinalık ve Sezgisellik: Arayüz öğeleri kullanıcıya aşina olmalı, sezgisel olarak anlaşılabilir olmalıdır. Bu sayede kullanıcılar, arayüzde gezinirken fazla çaba sarf etmek zorunda kalmazlar.
2- Basitlik ve Görünmezlik: Kullanıcıların amacına hizmet eden ve fazla dikkat çekmeyen basit arayüz öğeleri tercih edilmelidir.
3- Hiyerarşi ve Okunabilirlik: Görsel hiyerarşi, kullanıcıların bilgileri doğru önceliklerle algılaması için kritiktir. Metin hizalamaları ve düzen konusunda özen gösterilmelidir.
4- Renk, Parlaklık ve Kontrast: Renkler dikkatli kullanılmalı, fazla göz yoran kontrastlardan kaçınılmalıdır. Kullanıcının arayüzde gezinmesi rahatlıkla sağlanmalıdır.

Girdi Arayüz Öğeleri Girdi arayüz öğeleri, kullanıcıdan veri toplamak için kullanılır. Bu öğeler kullanıcının uygulama ile doğrudan etkileşimde bulunduğu alanlardır. En yaygın örnekler arasında metin kutuları, seçim kutuları ve kaydırma çubukları bulunmaktadır.

– Metin Kutusu: Kullanıcıdan çeşitli bilgiler almak için kullanılan, evrensel bir girdi öğesidir. Etiket, metin kutusu ve isteğe bağlı olarak yardımcı metinlerle birlikte kullanılır. Kullanıcıya doğru klavye düzeni sunmak (sadece sayı girilmesi gerekiyorsa numerik klavye gibi) önemlidir.
– Seçim Kutusu: Kullanıcıya birden fazla seçenek arasından tercih yapma olanağı sunar. Kullanıcı deneyimini iyileştirmek için seçenekler belirgin ve anlaşılır olmalıdır.
Çıktı Arayüz Öğeleri Çıktı arayüz öğeleri, kullanıcıya bilgi sunmak amacıyla kullanılır. Verilerin etkili şekilde görüntülenmesi için kart tasarımları, akordeon yapısı, slider ve carousel gibi öğeler kullanılabilir. Bu öğeler kullanıcıya bilgileri parçalar halinde sunarak, bilişsel yükün azalmasına yardımcı olur.
– Kartlar: Kartlar, bilgilerin organize bir biçimde sunulmasını sağlayan ve kullanıcıya kolay gezinim olanağı sunan arayüz öğeleridir. Her bir kart, belirli bir bilgiyi temsil eder ve tıklanabilir özellikte olabilir.
– Akordeon: Kullanıcıya bilgileri parça parça görüntüleme olanağı sunan, etkileşimli bir öğedir. Bu sayede kullanıcı gereksiz bilgi yığınından kaçınır ve ihtiyacı olan bilgiye kolayca ulaşır.

Navigasyon Öğeleri Navigasyon öğeleri, kullanıcının uygulama veya web sitesi içerisinde kaybolmadan gezinmesini sağlamak için kullanılır. Navigasyon yapısı bilgi mimarisinin bir parçası olup, kullanıcıları hedeflerine en az sürtüşme ile ulaştırmayı amaçlar.

– Button: Kullanıcıyı eyleme geçmeye davet eden temel navigasyon öğesidir. Button’lar önem derecelerine göre (birincil, ikincil gibi) farklı tiplerde olabilir.
– Alt Gezinme Çubuğu: Mobil arayüzlerde kullanılan alt gezinme çubuğu, kullanıcıya uygulamanın ana bölümlerine hızlı erişim sağlar. Kullanılacak simgelerin aşina ve sade olması önemlidir.

Mobil ve Web Ortamları Arasındaki Farklar Mobil ve web ortamları arasındaki farklar, kullanıcı deneyimini önemli ölçüede etkiler. Mobil cihazlarda ekran boyutunun sınırlı olması, navigasyon ve girdi öğelerinin daha basit ve kompakt olmasını gerektirir. Web ortamı ise daha geniş alan sunduğu için, daha fazla bilgi ve içeriğin sunulmasını mümkün kılar. Bu nedenle, mobil arayüzlerde minimalizm ve süreklilik ön planda tutulmalı, web arayüzlerinde ise hiyerarşiyi sağlamak önemli hale gelir.

Bölüm Özeti Arayüz öğeleri; girdi, çıktı ve navigasyon öğeleri olarak üç ana kategoride incelenir. Bu öğelerin her biri, kullanıcının hedeflerine ulaşmasını sağlayan kritik bileşenlerdir. Arayüz tasarımında amacımız, kullanıcının çaba sarf etmeden arayüzü kullanabilmesini sağlamak ve bu sayede unutulmaz bir deneyim yaratmaktır. Özgün arayüz öğeleri ise bu deneyimi unutulmaz kılan anahtarlardır. Kullanıcının ihtiyacı olan bilgiyi hızlıca bulması ve bu süreçte olabildiğince az zorlanması, iyi bir arayüz tasarımının en temel hedefidir

1- Arayüz Tasarımında Aşinalık ve Sezgisellik Neden Önemlidir?

A) Kullanıcıların arayüzü hızlıca öğrenebilmesi için
B) Kullanıcıların daha fazla bilgiye ulaşması için
C) Tasarımın karmaşık görünmesi için
D) Renk ve kontrastı artırmak için

Cevap : A) Kullanıcıların arayüzü hızlıca öğrenebilmesi için

Açıklama : Aşinalık ve sezgisellik, kullanıcının daha önceki deneyimlerinden yararlanarak arayüzü hızlıca anlamasına yardımcı olur, bu da kullanıcı deneyimini iyileştirir.

2- Girdi Arayüz Öğelerinden Hangisi Kullanıcıdan Veri Toplamak İçin Kullanılır?

A) Akordeon
B) Kartlar
C) Metin Kutusu
D) Slider

Cevap : C) Metin Kutusu

Açıklama : Metin kutusu, kullanıcılardan bilgi almak için kullanılan evrensel bir girdi öğesidir.

3- Navigasyon Öğelerinden Hangisi Mobil Arayüzlerde Kullanılır?

A) Button
B) Alt Gezinme Çubuğu
C) Metin Kutusu
D) Akordeon

Cevap : B) Alt Gezinme Çubuğu

Açıklama : Alt gezinme çubuğu, mobil arayüzlerde kullanıcının ana bölümlere hızlı erişimini sağlamak için kullanılan bir navigasyon öğesidir.

4- Kart Tasarımı Hangi Amaçla Kullanılır?

A) Kullanıcılara bilgi sunmak ve kolay gezinim sağlamak için
B) Kullanıcılardan veri toplamak için
C) Tasarımın karmaşıklığını artırmak için
D) Renk düzenini değiştirmek için

Cevap : A) Kullanıcılara bilgi sunmak ve kolay gezinim sağlamak için

Açıklama : Kart tasarımları, bilgileri organize bir şekilde sunarak kullanıcılara kolay gezinim olanağı sağlar.

5- Mobil ve Web Arayüzleri Arasındaki Temel Fark Nedir?

A) Mobil arayüzler daha büyük ekran kullanır
B) Web arayüzleri daha karmaşıktır
C) Mobil arayüzler daha minimal ve kompakt olmalıdır
D) Web arayüzlerinde renk kullanımı daha fazladır

Cevap : C) Mobil arayüzler daha minimal ve kompakt olmalıdır

Açıklama : Mobil cihazların ekran boyutunun sınırlı olması nedeniyle, mobil arayüzler daha minimal ve kompakt olmalıdır.

1- Aşağıdakilerden hangisi mobil için uygun olmayan bir navigasyon türüdür?

A) Mega menu
B) Bottom
C) Hamburger
D) Tam sayfa

Cevap : A) Mega menu

Açıklama : Mega menüler, geniş ekranlara göre tasarlandığından mobil cihazlarda kullanışsızdır.

2- Kullanıcıdan tuttuğu takımı geçerli ve doğru bir şekilde istemek için hangi girdi arayüz öğesi kullanılmalıdır?

A) Metin kutusu
B) Seçim kutusu
C) Tekli seçim
D) Çoklu seçim

Cevap : B) Seçim kutusu

Açıklama : Seçim kutusu, önceden tanımlı seçeneklerden seçim yapmayı kolaylaştırır, hataları azaltır.

3- Kaydırma çubuğu hakkında aşağıda verilen ifadelerden hangisi yanlıştır?

A) Üç yönlü kullanılabilir.
B) Kesin değer için kullanılır.
C) Mobil dostudur.
D) Sürükle bırakla çalışır.

Cevap : A) Üç yönlü kullanılabilir.

Açıklama : Kaydırma çubukları sadece yatay ve dikey yönlerde kullanılabilir, üç yönlü kullanım mümkün değildir.

4- Arayüz animasyonları hangi amaç için kullanılmaz?

A) Duygusal bağ kurma
B) Marka hikayesini anlatma
C) Zaman yönetimi
D) Veri işleme

Cevap : D) Veri işleme

Açıklama : Arayüz animasyonları genellikle estetik ve duygusal bağ oluşturmak için kullanılır, veri işlemeye katkı sağlamaz.

5- Kart tasarımında aşağıdaki unsurlardan hangisi yer almaz?

A) Görsel
B) Video, Resim
C) Ses
D) Başlık

Cevap : C) Ses

Açıklama : Kart tasarımları genellikle görsel ve başlık içerir, ancak ses öğeleri nadiren kullanılır.