AÖF Soru Bankası

Görsel Sistem TasarımlarıÜnite 8 Özeti

Ekrana Yönelik Tasarım Sistemleri

GİT305U-GÖRSEL SİSTEM TASARIMLARI

Ünite 8: Ekrana Yönelik Tasarım Sistemleri

Giriş

Ekrana yönelik tasarımlarda sistem kurgulamanın görsel iletişime katkısı olduğu oranda kullanıcı psikolojisine de olumlu etkileri vardır. Arayüz karşısında kendini yorulmamış ve hâkim hisseden kullanıcı ürünü benimsemeye daha yatkındır. Dolayısıyla verimli ve tutarlı bir sistem kurgulamak çağımızın en sık kullanılan grafik arayüzleri olan ekranlarda tasarım sürecinin en başat mücadelelerinden biridir.

Dijital arabirimler ve ekrana yönelik tasarım sistemlerinde de bu kaideler geçerliliğini değişmeden sürdürmektedir. Tıpkı basılı medyada olduğu gibi sayısal arabirimler de belirli görsel kimlik ve tasarım sistemlerine ihtiyaç duyar ve benimserler.

Dijital Arabirimlerde Tasarım Sistemlerinin Önemi ve Kullanışlılık İlişkisi

İnsan-Bilgisayar Etkileşimi alanının temel amacı makineler ve insanlar arasında olan tüm grafik ve fiziksel etkileşimleri verimli, kolay ve sezgisel hale getirmektir. İnsan-bilgisayar etkileşimi üzerine çalışmalar bugün artık günlük hayatımız içinde anonimleşen ve varlığını sorgulamadığımız pek çok grafik iletişim ve donanım buluşuna imza atmıştır. Alanın araştırma odakları grafik ve fiziksel arabirimler olmanın yanında aynı zamanda kullanıcı psikolojisi ve öğrenme bilimi üzerine de yoğunlaşmaktadır. Konuya daha geniş bir pencereden bakabilmek amacıyla kısaca arayüz tasarımlarının evrimine göz atmak ekran için tasarımda sistem geliştirmenin hikayesi ve kullanışlılık ilkeleri ile olan bağlantısını çözümlemek için yararlı olacaktır.

Alışkanlıklar İçin Tasarlamak: Ekranlar İçin Arayüz Tasarımının Görsel Evrimi

İlk ekranlı bilgisayarlardan bugünün mobil teknolojilerine dek arayüz tasarımları yeni buluş ve donanımların yarattığı iletişim boşluklarını doldurmaktadır. Dolayısıyla arayüz tasarımlarının evrimi de bu teknolojilere paralel ve ilişkili gerçekleşmektedir. Donanıma dair tüm yenilikler arayüz tasarımcılar için de çözümlenmesi gereken yeni etkileşimler ve tasarım problemleri sunmaktadır.

Süreçte öğrenme ve adaptasyon eğrisini etkileyen iki önemli faktör bulunmaktadır. Bunlardan ilki İnsan bilgisayar etkileşimi bilim dalı ve kullanışlılık testleri tarafından sürekli sağlanan veri akışının yıllar içerisindeki oluşturduğu bilgi kütüphanesidir. İkon, menü, form, buton gibi en küçük arabirim yapı taşlarının işlerliğinin zaman içerisinde araştırmalar ile optimize edilmesi, farklı arabirimlerde de olsa kullanıcıların en az zihinsel yük ile rahat iletişim kuracağı ortak bir dilin yaratılmasını sağlayan tasarım kütüphanelerini ve sistemlerini oluşturmuştur.

Arayüz Dilinin Dönüşümü

Adaptasyon eğrisini etkileyen bir ikinci özellikle ise ekran özelinde çalışan tasarım sistemlerinin temel çalışma odaklarından biri olan bilişsel yükün optimizasyonudur. Bu anlamda en erken arayüz tasarımlarının geliştirdiği strateji

skemorfik tasarım (taklit tasarım) prensiplerine dayanmaktadır. Skemorfik tasarım temelinde doğanın derinlik, ışık, renk ya da hareket gibi birebir taklidine dayanmaktadır.

Günümüze yaklaştıkça teknolojik okuryazarlığın yükselmesi, cihazların donanımsal olarak yeteneklerinin gelişmesi ve günlük hayat akışında dijital arabirimlerle olan etkileşim yoğunluğunun artması doğrultusunda grafik arayüzler de daha verimli hale gelerek yalınlaşma yoluna gitmiştir. Arayüz tasarımındaki bu evrimin temel amacının daha kalıcı ve iyi bir kullanıcı deneyimi yaratmak olduğunu söylemek yanlış değildir. Daha rahat, kolay, kullanıcısı adına ve onun için düşünen arayüz tasarımları bugün artık öne çıkmak için katma değer olmanın ötesinde bir gerekliliktir. İyi bir deneyim yaratmanın en etkili bileşenlerinden biri de kullanışlı ve sezgisel arayüzler kurgulamaktır. Bu bakış açısı devamında tüm dijital arabirim kullanıcıları tarafından kabul edilmiş tasarım sistemleri ve etkileşimlerinin geliştirilmesini beraberinde getirmiştir.

Deneyim yaratmak gibi kapsamlı bir pencereden tasarım sistemi anlayışı değerlendirildiğinde yaratılan iletişim modelinin yalnızca görsel öğeler üzerinde inşa edilmediğini de kavramak mümkündür. Bugün çağdaş dijital iletişim modelleri görsel sistemlerin yanına arayüz yazım dili, ses ve hareketi de tasarım sistemlerine eklemişlerdir. Dahası davranış ve hislerin tasarlanması da tasarım sistemlerinin bir bileşeni olmuştur. Dolayısıyla aynı çatı altında pek çok farklı ürüne altlık olabilecek kapsamlı ve kalıcı bir dijital tasarım sistemi geliştirebilmek içi münferit buton, yazıyüzü ya da pencerelerden öte deneyim dilini tasarlamak gereklidir.

Dijital Arabirimlerde Tasarım Sistemi Geliştirmenin Dinamikleri

Birçok tasarım ekibi, projeleri uygun ölçekte yönetmek ve genişletmek için kapsamlı tasarım sistemlerinden yararlanmaya başlamışlardır. Bu sistemlerin dinamiklerini tanımadan önce ekrana yönelik modellerde sistemin tanımı ve kapsamını belirginleştirmek yararlı olacaktır.

Tasarım Sistemlerinin Tanımı

Tasarım sistemi, farklı sayfalar ve kanallar arasında paylaşılan bir dil ve görsel tutarlılık oluştururken fazlalığı azaltarak tasarımı büyük ölçekte yönetmeye yarayan bir dizi standarttır. Kapsamlı bir Tasarım sistemi, Kullanıcı Arayüzü (UI) kalıpları ve Kullanıcı Deneyimi Tasarımı (UX) ilkelerini içeren oldukça kapsamlı bir tasarım standartları (stil kılavuzu) ve belgeler setidir. Bu set içerisinde arayüz görsel elemanları olduğu gibi önyüzde çalışan yazılım bileşenleri de bulunmaktadır.

Bir tasarım sistemine baktığımızda, tasarımcıların ve geliştiricilerin dijital ürünler oluşturmak ve ölçeklendirmek için ihtiyaç duyduğu tüm bileşenleri içerir. Sistem öğelerine kısaca göz atıldığında şu ana başlıklar altında toplanabilir;

• Marka yönergeleri • Erişilebilirlik yönergeleri • UI Tasarım yönergeleri


• Doğru uygulama örnekleri • Tasarım sistemi yol haritası ve geçmiş sürümlere ait belgeler • Kod parçacıkları ve CSS değişkenleri • Kullanılabilir UI kiti dosyaları

Sürdürülebilir, verimli ve ihtiyaçlara yönelik periyodik güncellenen bir tasarım sistemi tasarım ekibine geliştirme süreçlerinde pek çok açıdan verimlilik sağlar. Bu faydalar şunlardır; tasarım (ve geliştirme) çalışmalarının hızla ve farklı ölçeklere üretilebilmesi ve çoğaltılabilmesi, daha büyük, daha karmaşık sorunlara odaklanmak için tasarım ekibi üzerindeki yükü hafifletmesi, tasarım ekibinin farklı bileşenleri arasında ortak bir dil oluşturması, ürünler, kanallar ve departmanlar arasında görsel tutarlılık yaratması, tecrübesiz tasarımcılar ve içeriğe katkıda bulunanlar için bir eğitim aracı ve referans işlevi görmesidir.

Tasarım Sistemi Bileşenleri

Ekranlar için tasarım sistemi oluşturmayı tıpkı bir bina inşa etmeye benzetmek mümkündür. En küçük bileşen, renk ve tipografik kullanımlara karar verilmesiyle başlayan süreç her adımda daha bütüncül tasarım parçacıklarına doğru evrilir. Son adımda ise daha büyük çapta hazırlanmış tasarım kalıplarına dönüşür. Bu tasarım adımlarına oluşturulma sırasıyla göz atmak tasarım sistemi oluşturmanın aşamalarını kavramaya yardımcı olacaktır.

Stil rehberinin oluşturulması: Stil rehberleri grafik tasarımcıların en hâkim ve söz sahibi olduğu bileşenlerden biridir. Marka ile ilgili tipografik kullanım tercihleri, renk skalaları, layout(grafik düzen) önerileri, fotoğraf kullanımı gibi kararlar bu aşamada verilir.

Bileşen kütüphaneleri: Stil rehberinin bir sonraki adımı olarak konumlandırılabilir. Pek çok tasarım iştirakçisinin tasarım sistemleriyle en sık ilişkilendiği bileşenlerden oluşur. Bileşen kütüphaneleri bir öğenin nasıl göründüğü, davrandığı, kullanım senaryolarındaki değişkenleri ve önyüzde çalışan kodlarını belirli bir sisteme sokarak erişime açar. Bu sistem kısaca şu başlıklar altında özetlenebilir:

• Komponentin adı • Tanımı • Öznitelikleri • Objenin ‘durum’ları • Kod parçacıkları

Model Kütüphaneleri: Genellikle bileşen kütüphaneleri ile eş anlamlı olarak kullanılırlar fakat işlev ve kapsam olarak birbirlerinden ayrışırlar. Bileşen kütüphaneleri butonlar, menü öğeleri gibi daha küçük görsel elemanlara odaklanırken model kütüphaneleri bu elemanların birlikte çalıştığı daha geniş çaplı gruplara ya da yerleşimlere odaklanırlar.

Dijital Tasarım Sistemlerinin Geleceği

Bugün pek çok gelişmiş tasarım sistemi, ayrıntılı grafik yönergeler, düzenli güncellemeler ve birden çok kodlama

dilinde talimatlar sağlayabilir. Ancak yine de nispeten statiktirler, belgeleri yorumlayacak ve doğru bağlamda kullanacak tasarımcılara ve mühendislere ihtiyaç duyarlar. Bu tip mekanizmalarda bileşenler birbirleri ile etkileşim kurmaz, gerçek zamanlı ve esnek olarak güncellenemezler. Dolayısıyla bugünün zenginliği ve çeşitliliğini yönetmek konusunda tam performans çalışamazlar. Fakat tasarım sistemleri, farklı erişilebilirlik ihtiyaçları, dil çeşitliliği, donanım özellikleri ve mekânsal çeşitlilik için çok farklı ekran boyutlarında uygulamaların ve deneyimlerin var olduğu bir dünyada hayatta kalmak için değişime uğramaktadır. Böyle çeşitli ve karmaşık ekranlar ve arabirimler için bir sözlük gibi davranma yaklaşımı bugün yavaş yavaş evrim geçirmektedir.

Geleceğin Tasarım Sistemleri İçin Öncü Bir Fikir ‘Fonksiyonlar’

Fonksiyonlar verilen herhangi bir girdiye uygun şekilde yanıt vererek, tasarımda karar verme sürecini yeniden yaratmakta, objelerin ya da tasarım bileşenlerinin farklı şartlarda bir otomasyona bağlı biçimde farklı davranışlar geliştirebilmesini amaçlamaktadır.

Tasarım kararlarını esnek fonksiyon kümelerine dönüştüren bu sistem önerisi sayesinde çok ekranlı deneyimlerde tasarım sistemi geliştirme adına yepyeni bir yaklaşımın ortaya çıktığını söylemek zor değildir.

Açık Kaynak Sistemler

Tasarım sistemlerinin yarını adına bir diğer yaklaşımın da açık kaynak sistemler geliştirmek olduğu gözlenebilir. Açık kaynak geliştirmenin kodlama için yeni bir standart haline gelmesiyle aynı şekilde tasarımın da aynı eğilimi takip etmeye başlamıştır.

Tasarımı organizasyon içinde, küçük bir ekipte kilitli bir sır olarak tutmak yerine, artık pek çok kuruluş geliştirdiği tasarım pratikleri kullanıma açmakta. Paydaşlarına hizmet veren bu firmalar bu anlayış ile hem kendi çalışma ve tasarım modellerini güncelledi hem de paydaşlarını da bu sisteme davet ederek daha verimli bir entegrasyonu, iyi tasarımın yaygınlaşmasını ve kurumsal bağı arttıracak bir ekosistemin oluşmasını sağladılar. Yenilikçi ürünler geliştirmek isteyen organizasyonlar, öncelikli olarak kendi çalışma biçimleri ve sistemlerinde bu arayışı sürdürmeleri ve oradan yaratılan buluşçu yaklaşımları paydaşlarına aktarabileceklerdir. Açık kaynak tasarım sistemlerinin de amacı bu yenilikçi yaklaşımın aktarımına dayanmaktadır.

Açık kaynak bir tasarım sistemi ya da yazılım paylaşımı benimsemesi şirket değerleri adına bilgi paylaşımı, erişilebilirlik ve eğitim odaklı bir ilkesel model çizerken kapalı sistem bir üretim yaklaşımı benimsenmesi rekabetçi ve kar odaklı bir değerler şemasının tasarlanmasını doğurur. Bu piramidin basamaklarına kısaca değinmek Hugher’ın yeni sistem önerisini kavramak adına yararlı olacaktır:

Komponentler: Tasarım sistemlerinin genel geçer tanımlarında temel grafik arabirim öğelerini ve etkileşim


biçimlerini ifade eden komponentler Hugher‘ın ihtiyaçlar piramidinde bir davranış biçimi ile tanımlanırlar. ‘Kolaylaştırıcılık’ başlığı altında tariflenen bu davranış biçimi hem son kullanıcıyı hem de geliştirme ekibinin iç işleyişini kapsayacak bir bakış açısı olarak ifade edilebilir.

Hikayeler: Her ne kadar arayüz öğeleri tasarım sistemlerinin temelini oluştursalar da kullanıcılar ürünleri ne kadar hoş butonları ya da renkleri olduğu için tercih etmezler. Piramidin bu aşamasında kullanıcıların sistem ve ürün üzerinde bağlılıkları kullanım hikâye modelleri üzerinden değerlendirilir. Bunu yöntemi ise kullanıcıların deneyimini baştan sona öyküleştiren kurgular ve görsel senaryolar tasarlamaktadır. Bu sayede tasarımcılar kullanıcıların hayatlarına ve deneyimlerine farklı ve empati geliştiren bir bakış açısı ile yaklaşırlar.

Değerler: Değerler bilinçli ya da bilinçsiz deneyimler sonucu şekillendirilirler. Tasarımcılar her ne kadar tasarımın sahip olduğu tüm perspektifler üzerinde hakimiyet sahibi olduklarını düşünseler de iyi tasarımın değeri ışık tutulmayan kısımlara odaklanmaktan geçmektedir. Değerler yaklaşımı tasarım sisteminin ihtiyaçlar piramidini tersine çevirmeyi önerir. En temelde, erişilebilirlik, tolerans, güvenlik, açıklık, saygı gibi temel insani hakları tasarım sisteminin köklerine yerleştirir ve sistemin geri kalanını bu temeller üzerine inşa eder.

Bu ünitenin sorularını uygulamada çözŞıklar, doğru cevaplar ve süreli sınav modu AÖF Soru Bankası uygulamasında