S04E02 — UI Elementleri
Merhabalar, ben Beste. İTÜ UX Topluluğu kapsamında yapmış olduğumuz Jumpstart eğitimlerinde ben de UI Elementleri konusunu arkadaşlarıma anlattım ve bunu bir yazı haline getirdim. İsterseniz Youtube’dan sunumumu izleyerek isterseniz de bu yazıyı okuyarak UI Elementleri konusu hakkında bilgi edinebilirsiniz. Ayrıca bize Instagram veya LinkedIn’den de ulaşabilirsiniz. Keyifli okumalar!
UI Nedir? Ne İşe Yarar?
User Interface (Kullanıcı Arayüzü), bir hizmeti sunan sistem ile bu sistemden yararlanan kullanıcı arasında kurulan bir iletişim ve etkileşim köprüsüdür. Kısacası kullandığımız sistemlerin örneğin; bir telefonun, bir bilgisayarın veya bir üretim makinesinin iletişime geçebildiğimiz, yapmak istediğimiz eylemleri daha rahat yapmamızı sağlayan ara birimdir. Bu arabirimin yani kullanıcı arayüzünün asıl amacı ise kullanım kolaylığı sağlamaktır.
UI Tasarımına Giriş
Kullanıcı arayüzü tasarımına başlarken markanıza ve markanızın amacına uygun olan bir “branding sheet” hazırlamanız iyi bir başlangıç olacaktır. Branding sheet marka kimliğinizi yaratmakta önemli bir adımdır. Logonuzu, marka renklerinizi ve tipografi gibi tasarım elementlerini barındıran branding sheet hazırlandıktan sonra UI tasarımına geçmek çok daha sistematik ve kolay olur. Bu konularda daha detaylı bilgi edinmek için arkadaşlarımın daha önce yazdığı yazılara bakabilirsiniz.
UI Elementleri
Kullanıcı Arayüzü Elementleri ise arayüz oluşturmada büyük kolaylık sağlayan, birçok amaca yönelik ve artık neredeyse her arayüzde görebildiğimiz, bize yardımcı olan elemanlardır. Bu elementleri markanıza uygun tasarlayarak bir UI Kit oluşturabilir ve ürününüzün bütününde görsel dil bütünlüğü sağlayabilirsiniz. Kullanıcı arayüzü elementleri Girdi (Input) Elementleri, Yönlendirme (Navigational) Elementleri ve Bilgilendirme (Informational) Elementleri olmak üzere 3 kategoriye ayrılır. İngilizce söylemleri daha terimsel ve daha bilinir olduğu için çoğunlukla element isimlerini hem Türkçe hem İngilizce olarak görebilirsiniz.
- Girdi (Input) Elementleri
Bu kategoride kullanıcıdan bilgi almak istediğimiz zaman kullanabileceğimiz elementleri göreceğiz.
- Onay Kutusu (Checkbox): Eğer kullanıcınızdan birçok seçenek arasından birkaçını seçmesi gereken bir eylem gerçekleştirmesini istiyorsanız bu elementi kullanabilirsiniz. Örneğin bir alışveriş sitesinin filtreleme alanında kullanılabilir.
- Seçenek Düğmesi (Radio Button): Birçok seçeneğin bulunduğu ancak kullanıcının bunların içinden sadece bir tanesini seçmesini istediğinizde kullanabileceğiniz elementtir.
- Açılır Liste (Dropdown List): Burada ise eğer seçenekleriniz çok fazla ise bir liste içerisine gizleyerek ve tıklama ile açılarak seçeneklerin gözükmesini sağlar. Kullanıcının bu seçenekler içinden bir tanesini seçmesine yarar. Örneğin bir siteye üye alımında yaşadığı ülkenin bilgisini alabilmek için tüm ülkeleri bir açılır liste içerisinde gizleyebilirsiniz.
- Liste Kutusu (List Box): Onay Kutusu ve Açılır Liste’nin harmanlanmış halidir. Uzun bir liste içerisinde birden çok seçim yaptırmayı sağlayan elementtir.
- Buton: Yapılan bir eylemi gerçekleştirmek ve onaylamak için kullanılan elementtir. Örneğin yazılan bir mesajı karşı tarafa iletmek için “gönder butonunu” kullanmak.
- Toggle: Togglelar iki durum arasında geçiş yaptırabilmek için kullanılır. Örneğin telefonunuzun ayarlarında bir şeyi açıp kapatmak veya uygulamalarınızı karanlık moda geçirmek için kullanılabilir.
- Metin Alanları: Tek satır veya birkaç satırın boş kutucuk olarak gösterildiği kullanıcının bir bilgiyi yazarak girmesini istediğimiz yerlerde kullanılır.
- Tarih ve Saat Seçiciler (Picker): Tarih ve saat bilgilerinin kullanıcı tarafından rahatça seçilebilmesini sağlayan elementtir. Özellikle havayolu veya otobüs firmalarının bilet satım sitelerinde görebilirsiniz.
2. Yönlendirme (Navigational) Elementleri
Bu kategoridekiler ise kullanıcıları bulundukları sayfadan başka bir sayfaya yönlendiren elementlerdir.
- Arama Alanı (Search Field): Bir “arama butonu” ile birlikte tasarlanan arama alanları kullanıcının istedikleri bilgiyi sistem içerisinde kolayca bulabilmeleri için arama yapmalarına yarayan elementtir.
- Breadcrumb: Artık terimselleşen bu kelime biraz da Hansel ve Gretel hikayesine dayanıyor. Kullanıcı kategoriler içerisinde gezinirken ana sayfadan bulunduğu sayfaya gelene kadar hangi sayfalardan geçtiğini gösteren ve genelde sayfanın üst kısımlarında bulunan elementtir. Alışveriş sitelerinde bolca kullanılır ve rahatlıkla üst kategorilere geçmeniz sağlar. Ekmek kırıntılarını takip edip ana sayfayı tekrar bulabilirsiniz!
- Sayfalandırma (Pagination): Fazla bulunan içerikleri sayfalara bölerek kullanımı kolaylaştıran elementtir.
- Etiketler (Tags): Genelde bir sitenin en aşağısında bulunur ve içeriği kategorilere ayırarak daha kolay bulunmasını ve o içeriğe yönlendirilmesini sağlar.
- Slider: Bir istemi belli bir aralıkta ayarlamak için kullanılan eylemdir. Örneğin alışveriş sitelerinde fiyat aralığı ayarlamak için kullanılabilir.
- İkonlar: Dil bariyerini ortadan kaldıran ikonlar imgesel olarak bulunup arayüzü rahatlatır. Bir arayüzde sayfalarca yazı okutmaya çalışmaktansa algıda farklılık yaratarak görselleştirme ile daha akılda kalıcı hale getirilebilir. İkonlardan en önemlisi ise “menü ikonları” diyebiliriz. Artık evrenselleşmiş bu tiplerden birini görmediğimiz bir telefon uygulaması yok denecek kadar az.
- Image Carousel: Birden çok içeriği görüntüleyip bunlardan birini seçmeye yarar. Yine alışveriş sitelerinde benzer ürünleri bu element ile sunabilirsiniz. Her bir ürüne girince bulunan yeni bir “image carousel” kullanıcını sitede daha uzun süre vakit geçirmesini de sağlar.
3. Bilgilendirme (Informational) Elementleri
Bu kategoridekiler ise kullanıcıya vermemiz gereken bilgileri iletebildiğimiz elementlerdir.
- Bildirim (Notification): Güncellenmiş bir bilgiyi kullanıcıya göstermek için kullanılır. Çoğunlukla bilginin geldiği kategorinin üzerinde yuvarlak bir simgenin içinde sayılarla belirtilir.
- İlerleme Çubuğu (Progress Bar): Eğer yapılacak sıralı eylemler varsa bu element kullanılarak kullanıcının bu sıralı eylemin hangi noktasında olduğu bilgisini verir. Bu elementi de örneğin online bankacılık uygulamalarında para gönderme işlemleri esnasında kullanabiliriz.
- İpucu (Tooltips): Bir işlemin nasıl işlediğini anlatmak için butonun üzerine gelindiğinde çıkan bilgilendirme kutucuklarıdır.
- Mesaj Kutuları: Kullanıcıyı bilgilendirmek için kullanılan küçük pencerelerdir.
- Açılır Pencere (Modal Window/Pop-up): Kullanıcının etkileşime girmesi istenen kutucuğun ayrı bir pencere olarak açılmasıdır. Bu bir bilgilendirme elementi olmasının yanında içerisinde girdi elementleri de bulundurabilir. Örneğin bir sitede eylemi gerçekleştirmek için üye girişi yapılması gerekiyorsa bu bilgiyi bir açılır pencere ile gösterebilir ve bunun içinde kullanıcı adı ve şifre için metin alanları bırakarak bir onaylama butonu ile de eylemi kullanıcıya onaylattırabilirsiniz.
- Akordeon: Birçok bilgi başlığı ve içeriğinin bir arada tutulmasıdır. Uzun içerikleri küçülterek kullanıcının isterse detaylı bilgiyi alabileceği bir elementtir. Eğer kullanıcı kesinlikle görmesini istediğiniz bir bilgi varsa sayfayı açarken o akordeon başlığının açık bir şekilde kullanıcının önüne gelmesini sağlayabilirsiniz.
Bu kadar element var ancak iyi bir UI için hepsini kullanmamız gerekiyor mu? Bu sorunun cevabı tabii ki hayır. İyi bir kullanıcı arayüzü tasarlamak için markanıza ve markanızın amacına uygun elementleri bu listeden seçerek marka kimliğinize uygun tasarlamanız gerekiyor. Bu elementleri nasıl markanızla uyumlu tasarlayıp kendinize bir UI Kit oluşturacağınızı merak ediyorsanız “UI Kit Nedir?” yazısını da okuyabilirsiniz.
Buraya kadar okuduğunuz için teşekkür ederim. Herhangi bir sorunuz olursa benimle LinkedIn üzerinden iletişime geçebilirsiniz!
Referans Kaynaklar
Görselleri ve bilgileri aldığım iki kaynağı da ayrıca inceleyerek daha fazla bilgi edinebilirsiniz.
