Bir web sitesinde veya uygulamada gezinirken nasıl çalıştığını anlayamamanın yarattığı hayal kırıklığını hiç yaşadınız mı? Elbette yaşadınız.
Hayal kırıklığınızın ardındaki neden büyük olasılıkla, sezgisel bir şekilde gezinmenize izin vermeyen kötü tasarlanmış bir arayüzdür. Bunun yerine, nasıl çalıştığını ve ne işe yaradığını anlamak için durup her bir öğeyi analiz etmeniz gerekir.
Kötü ürün tasarımına yol açan en yaygın hatalardan biri, kullanıcı arayüzündeki tutarsızlıktır.
Yaygın hatalardan biri olmasının yanı sıra, genel olarak düzeltilmesi veya önlenmesi de oldukça kolaydır. Öyleyse kullanıcı arayüzü tutarsızlığının ne olduğunu ve kullanıcılarınızın bundan uzak durmasını nasıl sağlayabileceğinizi anlayalım.
Kullanıcı Arayüzü Tutarlılığını Anlamak
Adından da anlaşılacağı gibi, kullanıcı arayüzü tutarlılığı; ürününüzde aynı türdeki eylem veya varlık için aynı kullanıcı arayüzü öğelerine, atomik tasarıma ve genel kullanıcı deneyimine sahip olmakla ilgilidir.
Arayüzünüzde birden fazla yerde birincil düğmeler varsa, hepsi aynı görünmeli (kullanıcı arayüzü) ve aynı şekilde çalışmalıdır (kullanıcı deneyimi). Örneğin, Dropbox hesabınıza giriş yapıp farklı bölümlere göz atarsanız, tüm birincil eylem düğmelerinin aynı olduğunu fark edersiniz.
Daha yakından bakarsanız, Dropbox'ta görünüm açısından tutarlı olanların yalnızca birincil eylem düğmeleri olmadığını, neredeyse tüm öğelerin tutarlı olduğunu görürsünüz.
Tasarım ekiplerinin tutarlı kullanıcı arayüzü tasarımına büyük önem vermesinin birkaç önemli nedeni vardır. Bunlar:
- Temiz görünür ve göze hoş gelir. Kullanıcı arayüzlerinde çeşitlilik her zaman en iyi şey değildir. Öğeler için çok fazla görsel türünün kullanılması arayüzü ağırlaştırır ve okunabilirliği engeller.
- Profesyonel görünür. Temiz bir kullanıcı arayüzü profesyonellik ve uzmanlık izlenimi bırakır. Kullanıcılar, web siteleri veya ürünleri iyi tasarlanmışsa markalara daha fazla güvenme eğilimindedir.
- Kullanıcı deneyimini iyileştirir. Dropbox'ta bir yerde siyah bir düğme görür ve onu birincil eylem olarak tanımlarsanız, aynı görünen bir düğmeyi her gördüğünüzde bunun da birincil eylem olduğunu bilirsiniz. Bu nedenle, böyle bir düğmeyle her karşılaştığınızda ne yapması gerektiğini düşünmek zorunda kalmazsınız.
Son olarak, bu arayüzü geliştirme faktörü de vardır. Ürününüzün her yerinde tutarlı kullanıcı arayüzü öğeleri varsa, ön yüz ekibinin her yeni öğeyi sıfırdan geliştirmesi gerekmez. Bunun yerine tek bir öğe oluşturup geliştirmeleri gereken yeni ekranlarda yeniden kullanırlar. Böylece yeni arayüzler ve işlevler oluşturmak için gereken süreyi büyük ölçüde azaltırsınız.
Kullanıcı deneyimi üzerindeki önemine ve etkisine rağmen, tutarlı tasarım her yerde bulunmuyor. Büyük teknoloji ürünleri bile bu sorundan sorumlu. Android'in ayarlar menüsü en sevdiğim örnektir.
Lütfen bu listedeki farklı öğelere bakın ve hangilerinin tıklanabilir (düğmeler), hangilerinin ise yalnızca bilgilendirici metin olduğunu söyleyin. Aynı menüyü telefonunuzda açıp her şeye dokunmaya başlamadığınız sürece bunu söyleyememe ihtimaliniz yüksek.
Doğru tahmin etmiş olsanız bile ("Google Hesabı verileri" ve "Fotoğraflar & videolar"), bunu yapmak için biraz bilişsel işlem gerçekleştirmeniz gerekti.
Kullanıcı deneyiminin çalışma şekli bu değil. Sonuçta, kullanıcı deneyimi gurusu Steve Krug'un meşhur sözü şöyledir:
Beni düşündürme.
Bu arada, Don Norman'ın kullanıcı deneyimi için yazdığı “kutsal kitap” niteliğindeki kitabıyla birlikte onun Gündelik Şeylerin Tasarımı kitabını okumanızı şiddetle tavsiye ederim.
Buradaki genel fikir, kullanıcılarınızın kullanıcı arayüzünüzdeki öğeleri ne oldukları hakkında düşünmek zorunda kalmadan otomatik olarak tanıyabilmeleri ve uygulamanızda “kas hafızası” düzeyinde gezinebilmeleridir.
Kullanıcı Arayüzü Tasarımının Temelleri
Tasarımınızı nasıl tutarlı tutacağınızı anlamaya geçmeden önce, kullanıcı dostu bir kullanıcı arayüzünü ve tutarlılığı mümkün kılan temel tasarım ilkelerini yeniden ele alalım.
Have an account? Log In
Açıklık ve Sadelik
Kullanıcı arayüzünde yanıp sönen gif'lerin ve gökkuşağının tüm renklerinin yer aldığı web sitelerinin günleri geride kaldı (Y kuşağı, onları hatırlıyor musunuz?).
Daha fazla kişi interneti kullanmaya başladıkça, kullanıcı arayüzü ve kullanıcı deneyimi tasarımcıları, kullanıcı arayüzlerini algılama ve bunlarla etkileşim kurma biçimlerine daha fazla dikkat etti.
Kısa süre içinde fark ettikleri şey, çok fazla renk ve görsel öğe bulunmasının, kullanıcıların yapmak istedikleri görevleri gerçekleştirmesini engellediğiydi. Bunun yerine, bu tür kullanıcı arayüzlerinde gezinmekten elde ettikleri tek şey göz yorgunluğudur.
Bu nedenle doğal olarak minimalizme ve sadeliğe yöneldik. Aslında kullanıcı arayüzü tutarlılığı, arayüzünüzü daha sade hâle getirmenin başka bir yoludur.
Görsel Hiyerarşi
Ekranınızda çok sayıda öğe olduğunda, bunlar arasındaki ilişkiyi anlamanız zorlaşır. Örneğin, belirli bir metin parçasının makale başlığı mı yoksa metnin yalnızca bir parçası mı olduğunu nasıl anlarsınız?
Görsel hiyerarşi sayesinde kullanıcılarınızın bu ilişkileri anlamasına yardımcı olursunuz. Öğeleri üst kısma yerleştirerek, daha büyük, renkli ve kalın hâle getirerek ve diğer yöntemleri kullanarak, kullanıcıların bunların ekrandaki diğer öğelerden daha önemli olduğunu kolayca anlamasını sağlayabilirsiniz. Böylece kullanıcılar, ikinci öğeye geçmeden önce sezgisel olarak ilk olarak o öğeye bakacaktır.
Görsel hiyerarşinin sihrini gösteren ünlü bir meme vardır.
Buradaki metni okurken gülümsediniz, değil mi? İşte aynen öyle; diğer tüm insanlar gibi sizin görüşünüz de görsel hiyerarşiyi takip edecek şekilde programlanmıştır.
Geri Bildirim
Kullanıcınız ürününüzde her işlem gerçekleştirdiğinde, bu işlemin gerçekleşip gerçekleşmediğini anlamayı bekler.
Silme düğmesine tıklarsanız ve ardından hiçbir şey olmazsa kafanız karışabilir. Silme işlemi gerçekleşti mi, yoksa bir hata mı oluştu? Kullanıcılara bu konuda yardımcı olmak için onlara işlemin sonuçlarını bildiren görsel (veya işitsel, hatta dokunsal) geri bildirim sağlamanız gerekir.
Sisteminiz silme isteğini başarıyla işlediyse öğenin silindiğini onlara bildirin. Bunun yerine bir hatayla karşılaşırsanız yine bunu onlara bildirin. Böylece öğelerinin silinmediğini ve tekrar denemeleri veya destek için sizinle iletişime geçmeleri gerektiğini bileceklerdir.
Kullanıcı Arayüzü Tutarlılığını Sağlamak İçin En İyi Uygulamalar
İlk bakışta kullanıcı arayüzü tutarlılığı oldukça basittir ve her tasarımcı bunu sağlayabilmelidir. Ürün üzerinde çalışan tek kişinin siz olduğunuzu ve ürünün kendisinin küçük ve basit olduğunu varsayarsak bu doğrudur.
Daha büyük bir ekibin parçası olarak çalışmaya başladığınızda (her tasarımcının kendine özgü bir tarzı olduğunda) ve onlarca sayfa ve özellikten oluşan bir ürün üzerinde çalıştığınızda, öğeleri tutarlı tutmak gerçek bir zorluğa dönüşür.
Tüm ürünün her bir öğesinin nasıl göründüğünü fiziksel olarak hatırlamanız ve üzerinde çalıştığınız yeni özellikte bunu yeniden oluşturmanız mümkün değildir.
Neyse ki tasarımınıza tutarsızlık ekleme riskini azaltmanızı sağlayan birçok süreç ve çerçeve vardır. Sektör standartları olarak kabul edilen üç tanesi şunlardır.
Stil Kılavuzları: Bu, ürününüzün tasarım standartlarını ana hatlarıyla açıklayan ve marka kimliğinizi yansıtan bir belgedir. Farklı metin türleri (ör. başlıklar, gövde metni, yorumlar vb.) için tipografiyi (diğer adıyla yazı tiplerini, boyutlarını, konumlandırmalarını vb.), ikonografiyi, renk paletinizi ve diğer temel tasarım öğelerini içerir.
Bir stil kılavuzuyla tüm tasarım ekibinin aynı genel standartlar çerçevesinde çalışmasını ve içeriğinizin, renklerinizin ve simgelerinizin tüm ürün genelinde tutarlı kalmasını sağlarsınız.
Apple, stil kılavuzunu ürünleri için uygulama geliştiren şirketler de dâhil olmak üzere her yerde uygulamaya koymanın muhtemelen en iyi örneğidir.
Buradaki örnek, kullanıcıların uygulamanızı App Store'dan indirmesine olanak tanımak için web sitenize yerleştirebileceğiniz düğmenin stil kılavuzudur. Gördüğünüz gibi Apple, bu düğmeyi nasıl kullanabileceğiniz konusunda oldukça nettir.
Desen Kütüphaneleri: Bu, tasarım standardınızın düşük seviyeli ayrıntılarını açıklamaya odaklanan başka bir kılavuz belgedir; önceki belge ise size üst düzey tasarımın temel unsurlarını sunar. Tasarım desen kütüphaneleri, ekibiniz atomik tasarım uyguladığında ortaya çıkan yaygın bir çıktıdır.
Atomik tasarımın amacı, bir araya getirildiğinde daha karmaşık öğeler oluşturan, açıkça tanımlanmış küçük kullanıcı arayüzü öğelerine sahip olmaktır. Bu çerçevede öğelerin ve bunların birleşimlerinin yaygın kategorileri şunlardır:
- Atomlar (dolayısıyla adlandırma): Formlar, düğmeler, simgeler ve diğerleri gibi temel öğeler. Bunlar daha fazla parçaya ayrılamayan öğelerdir.
- Moleküller: Belirli bir amaca hizmet eden atomların birleşimi. Listeleriniz için sayfalandırma, gezinme için içerik haritaları ve benzerleri örnek olarak verilebilir.
- Organizmalar: Varlıkları temsil eden, birden fazla atom ve molekülden oluşan daha karmaşık arayüz öğeleri. Kartlar, arama çubukları ve diğerleri bunlara örnektir.
- Şablonlar: Sayfalarınıza ekleyebileceğiniz yeniden kullanılabilir organizma birleşimleri. Bunlar arama sonuçları listeleri, ürün açıklaması bölümleri ve benzerleri olabilir.
- Sayfa: Tasarımınızın nihai sonucu ve kullanıcının etkileşimde bulunduğu yer. Adından da anlaşılacağı üzere bunlar, ürününüzdeki ana sayfanız gibi farklı sayfalardır.
Desen kütüphanesi, tasarımınızda kullanabileceğiniz standartlaştırılmış moleküller ve organizmalardan oluşan bir koleksiyondur. Kullanıcılar belirli bir sayfayı açtıkları anda öğeyi tanıyacağı için ürününüzün farklı bölümlerinde aynı öğeleri yeniden kullanarak tutarlılık sağlarsınız.
Tasarım Sistemi: Bu, üst düzey stil kılavuzlarının, yazı karakterlerinin, renk şemalarının ve küçük kullanıcı arayüzü öğelerinin açıklamalarının genel birleşiminin yanı sıra hem tasarımınızda hem de ürünü geliştirirken kullanabileceğiniz hazır kullanıcı arayüzü bileşenleri koleksiyonudur.
Görsel tutarlılığı sağlamak için neredeyse tüm büyük teknoloji şirketleri kendi tasarım sistemlerini geliştirir. Google'ın Material'ı, Shopify'ın Polaris'i ve Apple'ın Human Interface'i vardır. Ayrıca ürününüze kolayca entegre edebileceğiniz ve ücretsiz kullanabileceğiniz bağımsız açık kaynaklı sistemler de bulunur. Bunlar arasındaki favorim ant.design.
Diğer tasarım sistemleri gibi bu sistem de hem Figma'da veya diğer popüler araçlarda kullanabileceğiniz bir tasarım kütüphanesi hem de geliştiricilerinizin kodlarında kullanabileceği, popüler çatılarda önceden kodlanmış bir bileşen kütüphanesiyle (ör. react) birlikte gelir.
Kullanıcı Arayüzü Tutarlılığını Korumaya Yönelik Araçlar
Tasarımınızı tüm ekipleriniz ve ürününüzün tüm bölümleri arasında tutarlı tutmak için kılavuzlarınızı belgelemeniz ve tüm ekibinizin bunlar üzerinde iş birliği yapmasını sağlamanız gerekir.
Tasarım standartlarınızı belgelemek ve bunları günlük özellik ve ekran tasarımlarınıza uygulamak için birçok modern tasarım aracının özel özelliklerinden yararlanabilirsiniz.
Örneğin Figma, tasarım sistemi dosyanızda depolayabileceğiniz ve şirketinizdeki herkesin kullanmasına izin verebileceğiniz ölçeklenebilir bileşenler oluşturmanıza olanak tanır.
Ayrıca Figma'nın kütüphanesinden indirebileceğiniz ve ürünlerinizde kullanabileceğiniz, önceden hazırlanmış bir tasarım kılavuzları ve kuralları kütüphanesi olan kullanıcı arayüzü kitlerini de destekler. İşte Google'ın Material Design'ı için bir kit.
Bu özel kit, Google'ın tasarım standartlarına uygun bir Android uygulaması tasarlamak için çok çeşitli öğeler sunar.
Şimdi de iş birliği kısmına gelelim. Tasarım ekibinizde uygun bir iş birliği olmadan, kılavuzlarınıza uymayan ve görsel tutarlılığınızı bozan öğelere sahip olmanız kaçınılmazdır. Neyse ki iş birliğini teşvik etmeye yönelik UX/UI tasarım araçları da bulunuyor.
Örneğin Zeplin, tasarımın geliştirici dostu sürümlerini oluşturarak tasarımcılarınızın ve geliştiricilerinizin daha etkili bir şekilde iş birliği yapmasına yardımcı olur. Bu sürümlerde kodlama ekibi, öğelerin kesin CSS özelliklerini bulabilir ve tasarımdaki görselleri, simgeleri ve diğer varlıkları kolayca indirebilir. Ayrıca tasarımlarınızı oluşturduğunuz yerden Zeplin'e kolayca aktarmanıza yardımcı olmak için diğer kullanıcı arayüzü geliştirme araçlarıyla da entegre olur.
More Articles
Kullanıcı Arayüzü Tutarlılığı İçin Test Etme ve Yineleme
Ürün gereksinimleriniz veya stratejiniz gibi tasarım kılavuzları da statik belgeler değildir. Her zaman bunlarda değişiklik yapar ve güncel tutarsınız.
Kılavuzlarınızı değiştirmenizin yaygın nedenlerinden bazıları şunlardır:
- Kütüphanede bulunmayan yeni öğelerin eklenmesi.
- Yeni tasarım trendlerinin ve en iyi uygulamaların benimsenmesi.
- Düzeltilmesi gereken sorunların ve “tasarım hatalarının” bulunması.
Son olarak, tasarım ekibinizin bunu zaman zaman incelemesine ve üzerinde küçük iyileştirmeler yapmasına olanak tanımak harika bir uygulamadır.
Tasarımınızın genel görünümünü ve kalitesini iyileştirmenin yanı sıra, ikincisi, tasarım ekibiniz tasarım sisteminizdeki tutarsızlıkları aktif olarak arayıp düzelttiğinde “arayüz tutarlılığı testi” adı verilen bir şeyi gerçekleştirmenize de olanak tanır.
Benzer bir testi tamamlanmış tasarımlarınızda da gerçekleştirebilirsiniz. Birkaç özelliğin Kullanıcı Arayüzü Kitinde bulunmayan öğeler içermesi veya olması gerektiği gibi görünmemesi her zaman mümkündür.
Dahili testler gerçekleştirmenin yanı sıra, kullanıcılarınızı da test sürecine aktif olarak dahil etmenizi öneririm. Bunu yapmanın iki yolu vardır.
- Tasarım hakkında geri bildirim isteyin, kullanıcılarınızın ihtiyaçlarını anlayın ve onların yorumlarına göre tasarımı aktif olarak yineleyin.
- Arayüzünüzdeki tutarlılık düzeyini anlamak için kullanılabilirlik testleri gerçekleştirin.
İkincisiyle ilgili olarak, birincil eylem düğmenizi ürününüzün 10 farklı yerinde kullandığınızı düşünün. Kullanıcılarınızın bu 10 durumun tamamında bunun birincil eylem olduğunu anlayacağından emin misiniz?
UX aracınızla oluşturduğunuz prototiplerle moderatörlü veya moderatörsüz kullanılabilirlik testleri gerçekleştirmediğiniz ve kullanıcıların bununla nasıl etkileşim kurduğunu görmediğiniz sürece emin olamazsınız.
Bu testlere ve kullanıcı geri bildirimlerine dayanarak, verilerle desteklenen tasarım kararları alabilirsiniz.
Beni Düşündürme
Tutarlılık, harika bir kullanıcı arayüzü tasarımının temel unsurlarından biridir. Her şeyi basit ve görsel olarak aynı tutarak kullanıcılarınızın arayüzünüzde kaybolmamasını sağlarsınız. Bunun yerine, ekranlarındaki her öğenin amacını sezgisel olarak anlar ve görevlerini kolayca gerçekleştirirler.
Daha fazla ürün yönetimi kaynağı ve kılavuzunun yanı sıra sektör liderlerinden ve uzmanlarından en güncel podcast'leri, röportajları ve diğer içgörüleri almak için bültenimize abone olmayı unutmayın.
