Arayüz Tasarımında Dikkat Edilmesi Gereken Noktalar

Hakan Kurt
Sep 7, 2018 · 7 min read

Bölüm 2

Serinin önceki bölümünde; aktörler, doğru içerik, ifade edilmek istenen, görsel kalite, geleneksel bağlılık, sanatsal yansıma, taslak çizimler, yazı tipleri ve renklerden bahsetmiştim.

Bu bölümde ise hikaye, altın oran, ızgara, kaba kuvvet ve rakip analizi gibi kavramlara değineceğim. Ayrıca arayüz tasarımı ile ilgili altın önerilerde bulunmaya devam edeceğim.

Makalenin sonunda da birkaç güzel arayüz örneğini paylaştım.

Hikaye

Genelde onepage ve hızlı satış sitelerinde kullandığımız hikaye kavramı, içeriğin tam da istediğimiz bir kurguda kullanıcıya sunulmasıdır.

Bu kısmı örneklemeden anlatmak biraz zor o yüzden açacağım.

Bize gelen brief’te “Metabolizmayı hızlandıran kırmızı çay” gibi bir ürün olduğunda, direkt dökülmüş bir çayı header görseli olarak koyduğumuzda ürünün etkisini anlatabilir misiniz?

Özellikle web sitelerinde kullanıcıları karşılayan ana sayfa çok önemlidir. Sitede var olan içeriğin, ürünün veya hizmetlerin doğru algılanması, google tarafından sitede gezilen sayfa sayısının çok önemli olması, ayrıntılı içerikten önce bir ön açıklamanın önemli oluşu, kullanıcılara daha öz içeriği de istediğimiz doğrultuda kurgulama sayesinde etkiyi artırabiliriz.

Az önce brief’te bahsettiğim “Metabolizmayı hızlandıran kırmızı çay”ı güzel grafikler ile analiz sonuçları içeren bir şekilde istediğiniz gibi tasarlayın. Arayüz bir hikaye etrafında dönmüyorsa, google ortalaması olan “3saniye” gibi bir sürede kullanıcı siteden çıkabilir.

Ürünün hizmetin tarihsel dönüşümünü ve son 5 yılın üretim/hizmet istatistiğini de çıkardıktan sonra brief’imizi “Sri Lanka dağlarında üretilen mucizevi çay: kırmızı çay!” hikayesi etrafında kurgulayabiliriz.

Elimizdeki çayın, Sri Lanka’daki üretim hikayesini, yöresel fotoğraflar ile harmanlayarak arayüzde kullanıcı ile paylaştığınızda, düz bir tasarımın uyandırmadığı duyuları harekete geçirdiğiniz için bir bağ oluşturursunuz.

O bağı kuvvetlendirmek için gerçek istatistik ve analiz raporlarının maksimum birer paragraflık detaylarını da paylaşabilirsiniz.

Tabiki bu brief’e hikaye kurgulamak için nasıl yaklaşmanız gerektiği ile ilgili bir tavsiyem. Sadece bu kısım bile ticari projelerde satışı inanılmaz derecede artıran en önemli faktördür.

Altın Oran

Fibonacci Serisi, diğer adıyla Altın Oran kavramını duymadıysanız size şaşırtıcı gelebilir. Zira doğada size güzel gelen çoğu şeyin kitle dağılım oranı altın oran’a çok yakındır. Kaba olarak detaylandırmak gerekirse; ağaçlarda dallarının çıkacağı yerler ile insanın gözü ile burnunun uzunlukları aynı orana sahiptir. Kıyılara vuran kasırgalar ile deniz kabuklarının ölçüleri de altın orana sahiptir.

1, 1, 2 (1+1), 3 (1+2), 5 (2+3), 8 (3+5), 13 (5+8), 21 (8+13), 34 (13+21), 55 (21+34), 89 (34+55), 144 (55+89), 233 (89+144), 377 (144+233), …

Bu özel dizilim, bu kuralı keşfeden Fibonacci isimli matematikçinin adı ile anılır ve “Fibonacci serisi” olarak bilinir. Bu kural estetik mükemmellik manasına gelir ve resim, heykel, mimari gibi alanlarda temel bir ölçü olarak kullanılmaktadır.

Doğada çok sık rastlanılan bu oran kullanıcıya etkili gelebilecek; ince hesaplar ile tasarımı yansıtmada önemli bir anahtardır.

Altın Oran ile ilgili hazır şablonlar bulabilir (golden ratio psd vb.) ve birkaç aramayla yapılan örneklere (golden ratio design vb.) ulaşabilirsiniz.

Izgara

Daha önceki makalemde ayrıntılı olarak anlatmıştım. Sözlükte grid olark geçen ızgara’lar bizim için çok önemlidir. Kullanacağımız imajların, butonların, menülerin birbirine uyumlu gözükmesi için uyumlu ölçülerde tasarlamak zorundayız. Grid sistemi bu yüzden kullanıyoruz aslında.

Tasarladığımız arayüzü programlayan geliştiriciler (frontend developer) ızgara kullanmaktadır. Siz projenizi piyasada kullanılan ızgara sistemlerine (grid systems) göre tasarlarsanız hem kullanıcı deneyimi açısından başarılı bir başlangıç yapmış olursunuz, hem de biraz altın oran ile tasarımını yoğurursanız tadından yenmez.

Kaba Kuvvet

Aslen algoritmik bir terim olan “brute force”un Türkçe halidir diyelim. Düzenli, tertipli, mockup’ları çizilmiş, renk paletleri çıkarılmış, fontları import edilmiş şekilde tasarıma başlamanın dışında bir de “rastgele ve yanyana geldiğinde bile güzel durmayan” şeyleri deneme biçimidir.

Kaba kuvvet tasarım biçimi, yeni formlar bulma, alakasız renklerin ortaya çıkardığı ruhu yakalama, karmaşıklığın özgür ruhundan faydalanarak tutkulu bir arayüz ortaya çıkarmada denenmesi gereken bir türdür.

Terminolojide, Estetik Olmayan (Anti Aesthetic) bir post-modernizmi yansıtma biçimidir. Genelde Grunge ve Abstract kavramlarıyla birlikte yansıtır. (Anti aesthetic, aesthetic, grunge, abstract kelimeleri ile arama yapabilirsiniz.)

Rakip Analizi

Bazen bir arayüzü tasarlamadan önce, elinizdeki brief’e uygun olarak benzer projeler üretmiş rakipleri analiz etmek en doğrusudur.

Yansıtmak istediğiniz aksiyonları rakibiniz nasıl yansıtmış, ürünleri nasıl dikkat çekici sıralamaya çalışmış, kurumsallığı ne kadar önplanda tutmaya çalışmış, renk paletini oluştururken nelere dikkat etmiş, cesur mu yoksa o da rakiplerini kopyalama yoluna mı gitmiş…

Bu gibi soruları sorarak rakiplerinizin projelerini değerlendirebilir ve sizi öne çıkaracak etkenleri kolayca masanızın üzerinde sergileyerek arayüzü oluştururken kullanabilirsiniz.

Türkiye’de çoğu firma/proje ilkleri kopyalayarak ilerlemeyi tercih etmekte.

Rakip analizi yaparken projeyi aynen kopyalamak yerine eksiklerini ve sizin projenize yansıyacak kısımları irdeleyerek yeni bir tarz yaratmanız daha doğru olacaktır.

Denemekten Korkmayın

Çok iyi projeler ve çok iyi fikirler hep beklenmedik zamanlarda ortaya çıkar. Bu nöropsikolojik bir olgudur. Çok fazla odaklandığınız zamanlarda değil hiç umursamadığınız yada yoğun stres altında olduğunuz anlarda denediğiniz etmenler muhteşem sonuçlar verebilmektedir.

Cesur davranın, hiç olmayacak tasarım elementlerini harmanlamaya çalışın, fontları olması gerektiğinden büyük/küçük kullanarak kullanıcının dikkatini çekin, menüyü alışılagelmişin dışında yerlerde konumlandırmaya çalışın, uyumsuz renklerin karmaşasından yeni bir ruh yaratmaya çalışın.

Bazen de sadece photoshop’u (vb) açarak yan sekmede saçma sapan denemeler yapın, tüm taslağınızı değiştirebilecek çılgın fikirlerin havada uçuştuğu bir özgür ortam yakalamanız an meselesidir.

Siz arayüz tasarlarken ne kadar cesur ve korkusuz davranırsanız, projeye yansıması da o derecede etkili olacaktır. Arayüz tasarımını müzik yapmak gibi düşünün, ekleyeceğiniz minik bir etken bile tüm altyapınızın ana iskeletini etrafından toplayarak farklı bir tarz ortaya çıkarabilir.

Vizyon Sahibi Olun

Herhangi bir mühendislikten bile nadir uygulanan bir mesleğe sahip olduğunuzu aklınızdan çıkarmayın. En iyi projeler bile arayüz tasarımı olmadan kendini doğru ifade edemez. Ürünün/hizmetin etkisini/faydasını doğru şekilde yansıtabilecek en önemli ifade şekli tasarımdır.

Yapacağınız arayüz tasarımını “bitsin de paramı alıp kenara çekileyim” mantığı ile yapacaksanız o işe hiç başlamayın.

Arayüz tasarımı artık web siteleri ile sınırlı değil. Cep telefonu uygulamaları, televizyon uygulamaları, sanal gerçeklik gözlükleri, fabrikalarda kullanılan büyük robotik makinelerin yönetim ekranları, büyük şehirlerde ve metrolardaki led ekranlar artık sizin oyun alanınız.

Genişleyebilir/daraltılabilir ve grid sistemlerine uygun bir arayüz tasarlayıp, hiçbir güncelleme yapılmadan dahi yıllar boyu kullanılabilecek arayüzler tasarlamaya özen gösterin.

Vizyonunuz gelecek teknolojilerini hedeflemek olduğunda daha yaratıcı ve özgün arayüzler tasarlayabilirsiniz.

Geribildirimler Alın

Uygulamanızı, sitenizi ya da projenizi hayata geçirdikten sonra belirli araçlarla kullanıcılardan ya da profesyonellerden geribildirim alarak arayüzünüzü değiştirebilir/geliştirebilirsiniz.

Bazı önereceğim uygulamalar : https://www.trustpilot.com/ , https://mouseflow.com/, https://www.freshworks.com/, https://www.fullstory.com/, https://usersnap.com/

Eğer bir takımın içerisinde arayüz tasarımı yapıyorsanız, her eklediğiniz/ekleyeceğiniz yeni katman ile ilgili fikir/geridönüş için ekibinize danışmaktan asla çekinmeyin. Sizin göremediğiniz noktalar hakkında ipuçları elde edebilir, yazılımsal açıdan imkansız olan kısımları daha uyumlu hale getirebilirsiniz.

Sosyal Bir Arayüz Tasarlayın!

Türkiye nüfusunun %60'ı interneti aktif kullanıyor. Bu kullanıcıların %90'dan fazlası da sosyal medyayı aktif/yarı aktif kullanıyor. Eğer projeniz direkt sosyal medya ile ilgili değilse, içeriklerinizi sosyal medyada paylaşılabilir şekilde tasarlamanız çok önemlidir.

Kullanıcılar tasarladığınız arayüzde paylaşılabilir bir etken gördüğü zaman gözünün önünde paylaşım yapabileceği bir buton, yorum yazabileceği bir kutucuk vs olduğunda, proje ile bağ kuruyor ve paylaşma fikri ona olumlu geliyor.

Başarılı Birkaç Arayüz Tasarımı Örneği

Siz de ilham alabileceğiniz arayüzlere https://tr.pinterest.com/, https://dribbble.com/ gibi sitelerden ulaşabilirsiniz.

Şimdilik benden bu kadar :) Makalemi faydalı buluyorsan paylaşabilir, alkış gönderebilirsin. Benimle iletişim kurmak istersen profilimdeki bağlantılardan faydalanabilirsin.

Hakan Kurt

Written by

UI / UX — Digital Art Director — hakankurt.info

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade