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

Özlü Söz

“Bir resim bin kelimeye bedeldir. Bir arayüz bin resme bedeldir.”
Ben Shneiderman

Kazanımlar

1- Görsel tasarım ilkelerini bilir, arayüz tasarımında kullanır.
2- Görsel tasarım bileşenlerini yakından tanır, parametrelerini etkili uygular.
3- Biçimi tüm yönleriyle bilir, arayüz tasarlarken dikkatli ve özenli değerlendirir.
4- Tipografinin önemini ve gücünü fark eder, tasarlarken özel olarak düzenler.
5- Arayüz tasarımında piktogramları etkili kullanır, yerinde ve ölçülü ekler.
6- Piktogram ve simge arasındaki farkı bilir. İhtiyaç halinde değerlendirir.
7- Görsel tasarım bileşenlerini etkileşim tasarımının boyutlarına göre organize eder.

Birlikte Düşünelim

– Görsel tasarım ilkeleri arayüz tasarımına nasıl uygulanır?
– Görsel tasarımında kullanılan bileşenler nelerdir?
– Tasarım estetiği nereden başlar?
– Tipografide tasarım ne kadar önemli? Etkisi nedir?
– Akıcı bir kullanıcı deneyiminde piktogramın değeri nedir?

Başlamadan Önce

Arayüz tasarımı yüzeyle başlar. Yüzeyin planlı ve dikkatli bölümlenmesi, düzenlenmesi gerekir. Bu sayede kullanıcı sisteme hızlı şekilde aşina olur. Görsel tasarım ilkeleri yüzeyin yönetimi için güçlü bir araçtır. Öğeler, görsel tasarım bileşenleriyle sağlanır. Arayüzler, etkileşim tasarımının çıktısıdır ve zamanın yönetimi de bu sayede gerçekleşir. Bu bölümde arayüz tasarımını etkili planlamayı öğreneceğiz.

Görsel Tasarım İlkeleri

Etkili iletişim ve görsel düzen yaratmak için tasarım ilkeleri çok önemlidir. Bu ilkeler dikkatli şekilde kullanıldığında, kullanıcı güveni ve akıcı deneyim sağlanır.

Bütünlük

Bir öğenin tek başına değil, diğer öğelerle birlikte anlam ifade etmesi gereklidir. Tasarımdaki her bir öğe bütüne hizmet etmelidir.

Hiyerarşi

Görsel anlatının güvenli ve anlaşılabilir olması için hiyerarşi oluşturulmalıdır. Hizalama, kullanıcı güveni sağlar ve arayüzü öğrenmeyi kolaylaştırır.

Denge

Öğelerin görsel ağırlığı dengeli dağıtılmalıdır. Simetrik denge kolayken, asimetrik denge zordur fakat evrenseldir.

Vurgu

Tasarımın odak noktası vurguyla belirtilir. Vurgu olmadan dikkat çekmek mümkün değildir.

Kontrast

Kontrast, arayüzdeki öğelerin okunabilirliğini sağlar. Yüksek kontrast kullanımı özellikle tipografi öğeleri için kritik öneme sahiptir.

Yerleştirme
Bilgi, ekranda önemine göre yerleştirilmelidir. Okunması gereken öğeler üstte, daha az önemli öğeler ise altta olmalıdır.

Görsel Tasarımın Bileşenleri

Arayüz düzenleri, biçim, tipografi ve piktogram gibi üç ana bileşenden oluşur. Bu bileşenler, kullanıcıyla etkileşime girmeyen ancak görsel anlatıyı güçlendiren unsurlardır.

Biçim

Çizgi, ölçü, şekil, boşluk, doku, ton ve renk gibi unsurlardan oluşan biçim, arayüzün temelidir.

Tipografi

Tipografi, arayüzün modern ya da demode görünmesini belirleyen önemli bir bileşendir. Yazı tipi, aralığı, boyutu ve konumu gibi parametreler kullanıcıya estetik bir deneyim sunar.

Piktogram

Piktogramlar, evrensel anlam taşıyan görsellerdir. Simgelerle benzer görevleri üstlenirler, ancak semboller daha soyut anlamlar iletebilir. Piktogramlar, kullanıcının arayüzde rahat gezinmesini sağlar.

Tasarım Estetiği

Estetik, arayüz tasarımında kullanıcıların deneyimlediği subjektif değerler bütünüdür. Estetik tasarımlar kullanıcıları sisteme daha fazla bağlar, kullanımını teşvik eder.

Doherty Eşiği

John Doherty, kullanıcı etkileşiminde optimum tepki süresinin 400 milisaniye olduğunu belirlemiştir. Bu süreyi aşan sistemler, kullanıcıda negatif bir algı bırakır. Kullanıcı deneyiminin akıcı olması için bu eşik dikkate alınmalıdır.

Bölüm Özeti

Arayüz tasarımında biçim, tipografi ve piktogramlar önemli rol oynar. Etkili ve işlevsel bir arayüz, bu üç bileşenin dengeli kullanımına dayanır. Tasarım estetiği ve işlevselliği, kullanıcı deneyiminin merkezindedir. Ayrıca, arayüzde geçen zamanın yönetimi, kullanıcı deneyimini iyileştirir

1- Responsive design’ın hangi prensibi, içeriğin ekran boyutuna göre yeniden düzenlenmesini ifade eder?

A) Fluid grid (Akışkan ızgara)
B) Fixed layout (Sabit düzen)
C) Adaptive images (Uyumlu görseller)
D) Static layout (Statik düzen)

Cevap : A) Fluid grid (Akışkan ızgara)

Açıklama : Fluid grid, responsive tasarımda içeriklerin ekran boyutuna göre düzenlenmesini sağlar. Bu sayede farklı cihazlarda düzgün görüntüleme elde edilir.

2- Responsive design’da “mobile-first” yaklaşımı nedir?

A) Tasarımın önce masaüstü cihazlar için yapılması
B) Tasarımın önce mobil cihazlar için yapılması ve daha sonra diğer ekran boyutlarına uyum sağlanması
C) Tasarımın sadece tablet cihazlar için yapılması
D) Tasarımın renk uyumuna öncelik vermesi

Cevap : B) Tasarımın önce mobil cihazlar için yapılması ve daha sonra diğer ekran boyutlarına uyum sağlanması

Açıklama : Mobile-first yaklaşımı, tasarıma mobil cihazlarla başlanması ve ardından daha büyük ekranlara uyum sağlanması esasına dayanır. Bu, kullanıcıların mobil cihazlarda daha iyi bir deneyim yaşamasını hedefler.

3- Responsive design uygularken hangi yöntem kullanılarak içerik farklı ekran boyutlarına göre düzenlenir?

A) Fluid images (Akışkan görseller)
B) Fixed images (Sabit görseller)
C) Adaptive layout (Uyumlu düzen)
D) Static layout (Statik düzen)

Cevap : A) Fluid images (Akışkan görseller)

Açıklama : Fluid images, görsellerin ekran boyutuna göre yeniden boyutlandırılmasını sağlar. Bu, içeriklerin her cihazda düzgün görünmesine yardımcı olur.

4- Tasarım sistemi oluşturmanın hangi avantajı vardır?

A) Tasarım sürecinde maliyetleri artırmak
B) Tutarlılık ve verimlilik sağlayarak tasarım sürecini hızlandırmak
C) Tek tip bir tasarım anlayışı sağlamak
D) Yalnızca tek bir tasarımın oluşturulmasını sağlamak

Cevap : B) Tutarlılık ve verimlilik sağlayarak tasarım sürecini hızlandırmak

Açıklama : Tasarım sistemi, tasarım süreçlerini standartlaştırarak hem verimliliği artırır hem de sonuçların tutarlı olmasını sağlar.

5- Hangi bileşen, bir tasarım sisteminin en önemli parçalarından biridir ve yeniden kullanılabilir UI elemanlarını içerir?

A) Tasarım kılavuzları
B) Kullanıcı araştırma raporları
C) Bileşen kütüphanesi
D) Prototipler

Cevap : C) Bileşen kütüphanesi

Açıklama : Bileşen kütüphanesi, UI elemanlarını yeniden kullanılabilir hale getirir ve tasarım süreçlerinde zaman kazandırır.

1- Hangi arayüz ilkesi, kullanıcıların sistemle etkileşimde bulunurken doğal ve sezgisel hissetmelerini sağlamak için önemlidir?

A) Bütünlük
B) Gizlilik
C) Hiyerarşi
D) Denge

Cevap : A) Bütünlük

Açıklama : Bütünlük, kullanıcıların sistemle sezgisel ve doğal bir şekilde etkileşim kurmasını sağlar, çünkü tüm öğeler birbiriyle uyumlu çalışır.

2- Hangi arayüz ilkesi, kullanıcılara ihtiyaç duydukları bilgilere kolayca erişim sağlamak için içeriklerin mantıklı bir yapıda düzenlenmesini içerir?

A) Hiyerarşi
B) Denge
C) Vurgu
D) Kontrast

Cevap : A) Hiyerarşi

Açıklama : Hiyerarşi, içeriğin mantıklı ve kolay erişilebilir bir düzende olmasını sağlar, bu da kullanıcı deneyimini olumlu etkiler.

3- Doherty Eşiği ilkesi neden 400 milisaniye yanıt süresi önerir?

A) Bu süre, kullanıcıların dikkatinin dağılmaması için yeterlidir
B) Bu süre, sistemin daha hızlı çalışmasını sağlar
C) Bu süre, estetik bir tasarım elde etmek için gereklidir
D) Bu süre, kullanıcıların geri bildirimde bulunması için gereklidir

Cevap : A) Bu süre, kullanıcıların dikkatinin dağılmaması için yeterlidir

Açıklama : 400 milisaniyelik yanıt süresi, kullanıcıların dikkatini korumak ve sistemle kesintisiz bir etkileşim sağlamak için idealdir.

4- Doherty Eşiği’nin odaklandığı ana unsur nedir?

A) Estetik tasarım
B) Hızlı ve tutarlı sistem yanıt süresi
C) Güvenlik protokolleri
D) Kullanıcı verilerinin saklanması

Cevap : B) Hızlı ve tutarlı sistem yanıt süresi

Açıklama : Doherty Eşiği, kullanıcıların sistemle hızlı ve tutarlı bir şekilde etkileşime geçmelerini sağlamak için tasarlanmış bir ilkedir.

5- Hangi unsur tasarım estetiğinde dikkate alınmaz?

A) Renk uyumu
B) Tipografi
C) Kullanıcı verilerinin şifrelenmesi
D) Görsel hiyerarşi

Cevap : C) Kullanıcı verilerinin şifrelenmesi

Açıklama : Tasarım estetiği kullanıcı verilerinin güvenliğinden çok görsel öğelere odaklanır, bu nedenle şifreleme estetik bir unsur değildir.