Kullanıcı Arabirimi Öğeleri İnfografiği

Bu yazıda, sizinle bazı arabirim öğelerinin kısa tanımlarını ve infografiğini paylaşıyoruz. “E biz zaten bunları biliyoruz, günlük hayatta ne işimize yarayacak ki” diyebilirsiniz. Ama durun, önce bir dinleyin! Çünkü bu doküman, müşterilerinizle ya da kendi iç iletişimizde, arabirim tasarım süreciyle ilgili en çok problem yaşadığınız alanlardan birini, yani taksonomiyi kolaylıkla tanımlamanıza olanak sağlayacak.

Mesela müşteriniz, “Şurada lorem ipsum yazıyor, yanlış olmuş galiba. O kısmı düzeltebilir miyiz?” gibi bir cümle kurduğunda, hem zamanınızı hem de sabrınızı optimumda tutmak istiyorsanız, aşağıdaki infografik ve tanımları gönül rahatlığıyla kullanabilirsiniz.

Arabirim Öğeleri:

Açıklamalar

1. Adres Satırı

Ziyaret etmek istediği sitenin adresini girmenin yanı sıra, kullanıcıya tarayıcıya bağlı olarak ekstra navigasyon öğeleri sunan alandır.

2. Breadcrumbs

Site içerisindeki hiyerarşik yapıya bağlı olarak, kullanıcının bulunduğu sayfa ile ana sayfa arasındaki adımlar arasında gezinmesini sağlar. Breadcrumbs, adını Hansel ve Gretel’in evlerini bulmak amacıyla bıraktıkları ekmek kırıntılarından alır.

3. Ana Navigasyon

Kullanıcının sitedeki ana başlıklar arasında gezinmesini sağlayan temel navigasyon alanıdır. Ana navigasyon içindeki menü başlıkları, birer açılır menü olarak alt başlıklar şeklinde sunulabilir.

4. Arama

Arama alanı, kullanıcıların site içerisindeki içerikleri aramasını sağlayan giriş alanıdır. Kullanıcı arama alanına aramak istediği sözcüğü yazarak ya da yazım sırasında sunulan önerilerden birine tıklayarak site içerisinde arama yapabilir.

5. Lorem Ipsum Metni

Gerçek metin gibi görünen fakat okunamayan, taslak çalışmalarda kullanılan geçici (yer tutucu) metindir. Metnin nerede bulunacağını ve ne kadar alan kaplayacağını gösterir.

6. Carousel

Kullanıcının, öne çıkarılan içeriklere kolayca ulaşmasını sağlayan ve bunu teşvik eden, büyük görseller, ilgi çekici metinler ve buton içeren ve bu öğeleri dönüşümlü olarak görüntüleyebilen alandır.

7. İkon Destekli Butonlar

Butonlarda yer alan ikonlar, kullanıcının aksiyonu sitenin dilinden bağımsız olarak algılayabilmesine yardımcı olur.

8. Grafik Butonlar

Butonları birer grafik öğe olarak ele almak, butonun işlevi konusunda ipucu vererek kullanıcıya yardımcı olabilir.

09. Açılır Menüler

Kullanıcının birden çok seçeneği görüntüleyerek bu seçenekler içerisinden seçim yapmasını sağlayan ve içeriği kullanıcının isteğine bağlı olarak görüntülenen öğelerdir.

10. Aşama Göstergeleri

Kullanıcının anketler gibi birden fazla aşamadan oluşan bir deneyim süresince hangi aşamada bulunduğu konusunda bilgi almasını sağlar.

11. Tooltip (İpucu)

Kullanıcının ihtiyaç duyabilleceği bilgilerin arabirimde fazla yer kaplamadan ve kullanıcı ihtiyaç duyduğu anda görüntülenmesini sağlayan görsel öğelerdir.

12. Tab

Birden çok içeriğin, arabirimde aynı alanda kullanıcının isteğine bağlı olarak görüntülenmesini sağlayan öğelerdir.

13.Checkbox (Seçim Kutusu)

Kullacının çoklu seçim yapmasını sağlayan öğelerdir.

14.Radio Button (Opsiyon Butonu)

Kullanıcının aynı anda görüntülenebilen birden çok tercihten sadece birini seçmesini sağlayan seçim kutularıdır.

15. Dinamik Bildirimler

Kullanıcının bir butona tıkladığında karşılaşacağı içerik konusunda önceden bilgi almasını sağlayan ve içeriği deneyim süresince dinamik olarak güncellenebilen öğelerdir.

16.Mesajlar

Kullanıcınının yapmakta olduğu işlem konusunda bilgi almasını sağlayan, çoğu durumda ekranda kısa bir süre görüntülenen ya da kullanıcının gizlemesine izin veren bilgi amaçlı elementlerdir. Bilgi içeriğini renk ve ikonlarla beraber sunmak, kullanıcının mesajı ayrıştırabilmesini kolaylaştırır.

17.Açılır Takvim

Kullanıcıların tarih bilgisini, herhangi bir yazım formatına uyma zorunluluğu olmadan girmesini sağlayan ve kullanıcının isteğine bağlı olarak görüntülenen öğelerdir.

18. Video Oynatıcı

Kullanıcıya sunulan video içeriğinin başlatılması, durdurulması, ileri ya da geri sarılması, sesin açılıp kapatılabilmesi ve videonun ekranı kaplayacak şekilde görüntülenebilmesi gibi etkileşimler sunan öğelerdir.

19.Duruma Bağlı Gösterimler

Kullanıcının, butonlar başta olmak üzere tüm öğelerin etkileşim potansiyellerini algılamasını sağlayan durum gösterimidir. Öğeler standart durumda, aktif ve pasif durumlarda olabileceği gibi, kullanıcının deneyimine bağlı olarak imleçle üzerine gelme, odaklanma, seçili olma gibi durumlarda da farklı şekilde görüntülenebilir.

20.Görsel Hiyerarşi

Farklı işlevlerdeki öğelerin birbirinden farklı boyut ve stillerde görüntülenmesi, kullanıcının öğeleri ayrıştırabilmesini ve öğelerle etkileşim kurmasını kolaylaştırır.

21.Alt Navigasyon

Kullanıcının isteğine bağlı olarak görüntülenen ve birincil önceliği bulunmayan etkileşim öğelerini kapsayan navigasyon alanıdır.

22.Akordeon

Genişletilerek ve daraltılarak, içeriğin arabirimde kapladığı alanın verimli kullanılmasını sağlayan öğelerdir.

23.Bilgi Grafiği

Kapsamlı bilgilerin kullanıcı tarafından kolayca algılanmasını sağlayan görsel öğelerdir. Uzun metinlerle aktarılabilecek bilgiyi arabirimde daha az yer kaplayarak anlatmaya yararlar.

24.Modal

Kullanıcının deneyimine bağlı olarak görüntülenen ve kullanıcıdan etkileşim bekleyen öğelerdir.

25.Tablo

Bilginin organize edilerek ve sınıflandırılarak aktarılabilmesini sağlayan öğelerdir.

26.Anket

Kullanıcı kitlesinden belirli bir konudaki seçimlerine dair bilgi toplamak amacıyla görüntülenen ve birden çok seçenek barındıran öğelerdir.

27.İkonlar

Öğelerin ikonlarla desteklenmesi kullanıcı tarafından daha kolay anlaşılabilmesini sağlar.

28.Sayfalandırma

Kullanıcının, görüntülenmekte olan sayfa ve toplam sayfa sayısı hakkında bilgi sahibi olmasının yanı sıra sayfalar arasında gezinebilmesini sağlayan navigasyon öğesidir.

29. Footer

Çoğunlukla sitedeki her sayfada, sayfanın en altında bulunan, öncelikli site içeriklerine kolayca ulaşmayı sağlayan öğelerdir. Sitenin arama motorları tarafından indekslenebilmesini kolaylaştırır.