UI/UX Design Temelleri ve Başlangıç Yolharitası

UI/UX Design hakkında pek bir şey bilmeyerek fakat konuya, kavramlara ilgim ve merakımı gidermek için yaptığım haftasonu okumalarım ve araştırmalarından bir rehber ve hatırlatıcı notlar tadında, sonrasında benim ve bu konuya ilgisi, merakı olan herkes için kullanmak üzere alınmış notlarım (Bu blog yazısını ileriye dönük araştırmalar ve keşifler ile güncellemeye çalışacağım)…

UX Design vs UI Design Karşılaştırılması

Birbiriyle sıkça birlikte kullanılan, bazen karıştırılan bu iki terimin farklarına birlikte bakalım

User Interface Design vs. User Experience Design

tldr: UI arayüzün nasıl göründüğü ile UX arayüzün nasıl işlediğiyle ilgilenir.

Birbirleriyle çok alakalı ve ilişkili olsalar da kendi içlerinde oldukça farklılardır.

• UX designerlık daha analitiksel, gözlemsel bir iş iken UI designerlık daha çok görselliğe odaklıdır (grafik tasarımı kapsar).
• İkisini çoğunlukla birlikte çalışırken görürüz. İkisi ya aynı takımdan çıkar ya da ikisini aynı anda yapan bir kişiden.
• Farklı araçlar ve yetenekleri kullanarak ortak problemlere farklı bakış açılarıyla yaklaşırlar.
• UX görsellikle ilgilenmez, tamamen hissiyat ve deneyime odaklanır. UI ise görsellik ile UX’a katkı sağlar.
• UX olmadan UI bir tuvaldeki birbiriyle uyumsuz rastgele renkler gibidir. UI olmadan UX içi boş, amacı belli olmayan bir heykel gibi.

UX Design

UX — Kullanıcı Deneyimi: Bir kullanıcının ürün ile etkileşimi sırasında yaşadığı deneyimlerin bütünüdür. Ürünün veya hizmetin nasıl tasarlandığına bağlı olarak kullanıcının deneyimi çok zevkli veya tam aksine sinir bozucu olabilir. Kullanım deneyimi kusursuz ve sezgisel mi yoksa aksak ve kafa karıştırıcı mı? Varolan etkileşimler mantıksal mı yoksa keyfi mi? Kullanıcı uygulama kullanımı sırasında amaçladığı şeyi gerçekleştirmeye yönelik adımları mı gerçekleştiriyor yoksa uygulamayla mücadele içinde mi? Kullanıcı deneyimini tanımlayan temel faktör arayüz elemanları ile etkileşimin zorluğu veya kolaylığıdır.

UX tasarımı özellikle kullanıcıların beklentileriyle ilgilenir. Bu beklentiler ise kullanıcıların hayatları boyunca kullanmış oldukları bütün uygulamalar sonucu oluşmaktadır. Eğer UX tasarımcısı son kullanıcının beklentilerine aşina değilse kendi beklenti ve alışkanlıklarıyla kendisine mantıklı gelen bir tasarım ile genel kullanıcı kitlesinin anlayışlarına ters gelen aksiyonlar uygulayabilir. İşlevler kullanıcıların beklentilerinden çok farklı davranışlar sergilerse uygulama hoş bir izlenim bırakmaz. Eğer alışkanlıkları yıkan bir tasarım yapılacaksa cidden iyi bir sebebi olmalıdır. örn: basılı tutma sonrası ekstra seçenekler, çift tıklama ile dosya açma gibi…

Bir User Experience Designer’ın sorumlulukları ve özellikleri

• Kullanıcının deneyimini şekillendiren bütün öğeleri göz önünde bulundur ve kullanıcıların ihtiyaçlarına, kullanım kolaylıklarına, tasarımın kalite ve efektiflikliğine yönelik tasarımlar ortaya atmalıdırlar.
• İnsanların herhangi bir uygulamayı işlevsel olarak ve severek, zevk alarak kullanabilmesi için kullanıcı dostu olması gereklidir. Normalde çalışma yapıları oldukça kompleks olan sistemleri son kullanıcıların rahatlıkla kullanabilmesini sağlayan köprüyü, katmanı oluştururlar.
• Ürün ve kullanıcı arasındaki katmandır. UX Designerlar sürekli olarak yapılan herhangi bir eylemi nasıl daha iyi bir deneyime dönüştürebilecekleri üzerine çalışmalar yaparlar.
• Zaman zaman analist, sanatçı, sosyolog gibi düşünce yapılarına girerler. Problem çözücü ve bilişsel bir düşünce yapısına sahiptir
• Ortaya kullanılabilir, yaratıcı ve kullanıcı dostu çözümler sunabilmek için kullanıcıların geçmiş alışkanlıkları iyi analiz etmeli, güncel yöntemleri takip etmeli, mevcut ve potansiyel kullanıcılar geri bildirimler alıp, etkileşimlerini gözlemlemeli bunları analiz edip değerlendirmeli, sürekli olarak testler gerçekleştirmelidirler.
• Benzer amaca hizmet eden rakipler analiz edilir.
• Her zaman user-first metodolojisiyle çalışırlar.
• Uygulamayı wireframeler ve prototiplerler. En iyi kullanım yapılarını test ederler.
• Bir UX designer mutlaka UI designer, Developerlar ile koordinasyon içinde çalışmalı ve herşeyin olması gerektiği gibi uygulandığındam emin olmalıdır.
• Bir ürün üzerinde işleri hiç bitmez. Bunun sebebi uygulamanın canlı bir yapı olmasıdır. Kullanıcıların isteklerine, ihtiyaçlarına, kullanım alışkanlıklarına ve yeni teknolojilere adapte olmak için sürekli evrim geçirmelidir. UX Designer uygulamanın geride kalmadığından emin olmalıdır.

UI Design

UI — Kullanıcı Arayüzü: Ürünün görsel/grafiksel arayüzüdür. Kullanıcının tıkladığı butonları, okuyacakları metinleri, resimleri, yazı girilen alanları ve kullanıcının etkileşim içinde olduğu diğer bütün öğeleri kapsar (ekran düzeni, geçişler, arayüz animasyonları…). Bu işlerle UI Designerlar ilgilenirler. Grafik tasarımcılarıdırlar, estetik kaygıları vardır. Projenin çekiciliği, görsel olarak harekete geçiriciliğini, farklı öğelerin birbiri ile ve uygulamanın genel yapısı ile uyumunu sağlamaya odaklanmıştır.

Bir User Interface Designer’ın sorumlulukları ve özellikleri

• UX designer kullanıcının ürünün kullanım deneyimini iyileştirmek iken UI designer görselliğe odaklanır (görünüm, hissiyat, sunum…). UX’a (kullanıcı deneyimi) katkı sağlar, tamamlar.
• Rakip analizi yapar, kullanım standartları üzerine araştırmalar yapar. Arayüzdeki renk, öğelerin uyumları, tipografi, etkileşim gibi tasarımsal öğeler üzerine çalışır.
• Grafik tasarım, web/uygulama tasarımı, marka tasarımı (markayı tasarlama sorumluluğu olmasa bile üründe markanın imzasını/tasarım dilini taşıyacak öğeleri kullanır), bazen de frontend geliştirmeyi kapsar.
• Developerlar ve User Experience designerlar ile koordine şekilde çalışır.
• Farklı ekranlara (masaüstü, mobil, tablet,tv, akıllı saat…) uyumlu olacak tepkisel (responsive) tasarımlar yapar.
• UI designerın amacı projenin ihtiyaçlarını, yapısını ve diğer detaylarını alıp (UX designer analizi sonrası…) ilgi çekici hale getirip bir ürüne dönüştürmektir.
• Bir nevi UX designer iskeleti tasarlarken, UI designer bu iskeletin derisini üzerine ekler ve oluşan vücudu giydirmekle sorumludur.

UI tasarımcıları yarattıkları uygulamanın kategorisine uygunluğundan emin olmalıdır. Kullanıcı davranışlarını öngörmelilerdir. Örneğin bir alışveriş uygulaması yapıyorsanız, mevcut uygulamaları araştırmak ve neyin nasıl tasarlandıklarını iyi incelemek gereklidir. Buna başka tasarımcıların yaptığı pozitif yönler ve iyileştirilebilecek kötü yönleri ile mutlaka çıkarılacak dersler vardır. Araştırmalarınız sonucunda örneğin insanların uygulamanın tipine göre kalın şekillerdense ince çizgili ikonlardan hoşlandığı gibi çıkarımlar yapılabilir. Uygulamanın estetik kısmı tasarımcıya kalsa bile belli prensipleri uygulamamak ve kullanıcı beklentilerini karşılayacak standartı tutturmamak risk almak olur. Kullanıcı belli öğelerin amacını ve neden orada oldukları konusunda kafa karışıklılığı yaşamamalıdır. Risk almak, alışagelmedik tasarımlar yapmak bazen diğerlerinin arasından sıyrılmak ve akılda kalıcı olmak için iyi olabilir. Ama yenilikçilik ile gelenekselciliğin dengesi iyi kurulmalıdır.

Düet

• UX/UI kavramları karşımıza daha çok dijital ve bilişsel sektörde çıkıyor olsa da aslına bakılırsa hayatımızın her alanındaki deneyimler için bu terimler kullanılabilir. Günlük hayatta her alanda iyisiyle kötüsüyle karşımıza çıkan deneyimler bulunmakta. Bu sebepten ötürü hepimizde oluşan bir İyi kullanıcı deneyimi beklentisi var. Karşılaştığımız her deneyimi kritize edip daha iyi nasıl olacağı hakkında yorumlar yapıyoruz.
• Bu iki kavram birbirinden bağımsız düşünülemez, birbirlerini tamamlar, geliştirirler. Örneğin: yeni bir işlev ekleneceği zaman yeni tuşlar ekleneceğinden, tuşların düzeni, boyut ve şekilleri etkilenecektir. UX Tasarımcısı tuşlar için en iyi dağılımı seçerken UI Tasarımcısı ise yeni tuşun mevcut düzene adaptasyonunu tasarlar.
• Sürekli iletişim ve takım çalışması içinde olmaları uygulama için müthiş bir geri dönüş sağlayacaktır
• Müthiş bir arayüz tasarımı aksak ve kafa karıştırıcı kullanıma sahip bir uygulamayı kurtaramaz. Aynı şekilde olması gerektiği gibi deneyime sahip bir uygulamayı ise kötü arayüz tasarımları uygulamayı berbat edebilir. Bu yüzden iki öğe de harmoni içinde olmalıdır.

Bir Projede İşleyen Süreçler

• Araştırmalar: Hedef kitlenin doğru seçildiğinden emin olunup belirlenen kitleden anketler, forumlar ve görüşmeler sonucu fikirler alınmalıdır. Kullanıcıların sorunları, ihtiyaçları, alışkanlıkları iyi dinlenip analiz edilmelidir.
• Akış diyagramlarına kullanım senaryoları dökülüp optimum senaryo ortaya çıkarılmaldır

Flowcharting

• Ortaya dökülen optimum fikir kabataslak çizimlerle (sketch) dijital ortama ya da kağıda dökülmelidir. Bu aşamada iyileştirmeler ve düzenlemeler yapılabilir.

Sketching

• Uygulamayı wireframeleyek iskeletini canlı görebilme imkanı kazanın, testlerinizi gerçekleştirin. Bu aşamada işlevsellik üzerine geliştirmeler yapılacak tasarım daha arka planda.

Wireframing and Prototyping

• Görsellik: Benzer amaca hizmet eden rakipler analiz edilir ve derlenir.

Rakip Analizi

• Fikirlerinizi karşılaştırıp en iyi Deneyim/Görsellik oranını olan tasarımla devam edin.

Karşılaştırma ve Eleme Süreci

Uygulamanın kimliği olacak öğeleri seçin veya yaratın: Renk paleti, tipografi, ikonlar ve illüstirasyonlar, isim, logo…

Temel İlkeler

• 1. Hiyerarşi: Kullanıcı uygulamada kaybolmamalı, bir özelliği bulmak için bakması gereken yeri çok düşünmemelidir.

• 2. Tutarlılık: Hedef platformun temel tasarım kurallarına ve kullanıcı alışkanlıklarına uygun tasarımlar ortaya koymalısınız.

Sağ alttaki oluştur butonu kullanıcı alışkanlığı haline gelmiş

• 3. Teyit etmek: Büyük veya geri dönüşü olmayan işlemler öncesi kullanıcıya mutlaka “Emin misiniz?” tarzı sorular yönlendirilmelidir.

Büyük güç büyük sorumluluk gerektirir.

• 4. Kullanıcı Kontrolü: Kontrolün kullanıcıda olduğu hissiyatını iyi verin. Buna yapılan hatayı geri alma imkanı (undo), arama özelliği için gelişmiş filtreleme seçenekleri, klavye kısayolları, dokunmatik gesturelar…

son bir şans

• 5. Erişilebilirlik: Kullanım engeli olabilecek kullanıcılarınızı düşünürek tasarlayın. Düzgün kontrast ve renk uyumu, ekran okuyucu uyumluluğu…

Bir UI/UX Designer’ın Araçseti

Bookmarklanası siteler ve her işinizi görecek yazılımlar

Görüntü Düzenleme

• Adobe Photoshop (Ücretli|Win/Mac)
• GIMP (Ücretsiz,Açık Kaynak|Linux/Win/Mac)
• …Adobe Lightroom, Darktable

Vektör Grafikler

• Adobe Illustrator (Ücretli|Win/Mac)
• Inkscape (Ücretsiz, Açık Kaynak|Linux/Win/Mac)
• …Vectr

UI/UX Tasarım & Prototipleme

• Figma (Ücretsiz, Online|Linux/Win/Mac)
• Adobe XD (Ücretsiz|Win/Mac)
• Sketch (Ücretli|Mac)

Topluluk/Portfolio Siteleri

• Dribble
• Behance
• Portfolio (Adobe)

İlham Verici Siteler

• Mobbin (app design)
• UI Sources
• Awwwards
• Reallygoodemails (e-posta template tasarımları)
• Bestfolios (portfolyo sitesi tasarımları)
• Invision
• Uplabs
• Adobe Stock
• …CSS frameworkleri template ve tema siteleri

Takım/Bireysel İş Yönetimi ve Planlama, TODO Takibi

• Trello
• Notion
• OneNote

Kullanıcı Deneyimi Araştırması

• Google Forms
• Miro
• TypeForm

Materyal Kaynakları

• İkonlar: material design icons, ionicons, iconmonstr, feather icons,font awesome, noun project, icofont, icons8, flaticon
• Fontlar: google fonts, dafont, apple fonts, adobe fonts,.fontsquirrel , fontmap
• Vektör Grafikler: undraw, vecteezy, freepik
• Fırçalar: brusheezy
• Renkler: colorhunt, adobe colors, coolors, paletton, webgradients, cssgradient, brandcolors
• Stok Resim: thestocks.im, unsplash, pexels

UI/UX Üzerine Okunması Gereken Kitaplar

• The Design of Everyday Things — Donald A. Norman
• Don’t Make Me Think — Steve Krug
• Universal Principles of Design — W. Lidwell, J. Butler, K. Holden

Yol Haritası

Farklı iş alanları ve kapsamları. Adeta bir derya deniz…

1. Temelleri Öğrenin
   Teoriyi kavrayın (kitaplar), platformlara özel tasarım dilleri dökümantasyonlarını inceleyin.
2. Süreçleri ve Kuralları Kavrayın
   Yapılmış projeleri, süreçlerini, career trackleri, temel checklistleri, metodolojileri, design practiceleri, design principleları, design systemleri inceleyin ve kayvarın. Erişilebilirlik üzerine araştırmalar yapın.
3. Topluluklara Katılın
   Yapılmış popüler çalışmaları inceleyin, kendi çalışmalarınızı yükleyin. Araçsetinde belirtilen topluluk siteleri harici lokal olarak meetup gibi uygulamalar üzerinden çeşitli tasarım üzerine yapılan etkinliklere katılıp networkünüzü genişletip, fikir alışverişleri yapabilirsiniz.
4. Günceli Takipte Kalın
   Şirketlerin tasarım bloglarını (Google, Uber, Microsoft…), Mediumdaki bağımsız topluluk ve yazarları takibe alın.
5. Araçlarınızı Öğrenin
   Tasarım araçları→Kullanıcı testi araçları →Prototip araçları →Animasyonlandırma araçları
   ++kolaborasyon araçları (zeplin…)

Yararlanılan Kaynaklar

• UX Collective
• UX Planet
• Career Foundry
• Jesse Showalter