Büyük Ekranlara Uygun Web Sitesi Tasarımları

Mobil boyutlardaki ekranlar için yapılan tasarımlara bu kadar odaklanmışken web sitemizin tasarımını nasıl daha büyük ekranlara uygun hale getirebiliriz?

Dokunmatik ekranlar yalnızca telefonlarınızda veya tabletlerinizde değil, her yerdeler. Masaüstü bilgisayarlar boyunda, hatta daha büyük boyutlardaki ekranlar için tasarım yapmak çok daha farklı beceriler gerektirebilir.

Belirli boyutlardaki ekranlar için yapılan tasarımlara bu kadar odaklanmışken, tasarımları nasıl daha büyük ekranlara uygun hale getirebiliriz?

1. Doğal İşaretler Kullanın

"Sağa kaydırın" ve "sola kaydırın" komutlarının bu kadar popüler olmasının bir sebebi var. Bunlar doğal jestler ve el hareketleri.

Çok büyük boyutlu ekranları düşünürken parmak hareketlerinden fazlasını, bütün bir eli düşünmelisiniz. Çoğu kullanıcının büyük ekranlarda daha fazla kullanım alanı olacak çünkü bu tip ekranlar genellikle masa üzerinde kullanılıyorlar dolayısıyla ellerini meşgul eden bir durum söz konusu değil.

Büyük ekranlarda dokunma ve hareketlerin, mobil cihazlarda olduğu gibi rahat olmasını istiyor olabilirsiniz ama dokunma eylemlerini düşünmelisiniz. Kaydırma hareketleri küçük ekranlara göre daha abartılı ve dokunma eylemleri daha şiddetli olabilir.

Bazı durumlarda kol hareketleri gerektirdiği için büyük ekranlardaki kaydırmalar daha rahatsız ve yorucu olabilirler.

Diğer bir doğal "davranış" ise gözle takip etmedir. Bazı büyük ekranlar kullanıcıların her şeyi takip edebilmesi için fazla büyük olabiliyor. Kullanıcıların önemli bilgileri görebileceklerinden emin olmak ve tasarımla olan bağlılıklarını anlamak için göz hareketlerine göre tasarım yapmalısınız.

2. Metinleri ve Grafikleri Büyütün

Web tasarım uzmanları büyük ekranlarda görüntülenmesi için görsel elemanları büyütmek zorundalar. Tabii bu çoğu zaman olması gerektiği gibi olmuyor. Daha büyük ekran daha çok eleman demek değildir. Bunu farklı bir kullanıcı deneyimi olarak düşünün. Metinler ve grafikler de dahil olmak üzere bütün içeriklerin büyük ekranlar için yeniden boyutlandırılması gerekiyor.

• Kullanıcılar, daha fazla mesafelerde de tasarımla etkileşim kurabiliyorlar. Bu yüzden, bu elemanlar arasındaki farkı net olarak görmeliler.
• Ekrandaki elemanlar yönlendirmeye gerek kalmadan anlaşılabilir olmalı.
• Dokunma hedeflerini görmesi kolay olmalı ve kesin etkileşimler oluşturmalı.

3. Navigasyonların Her Zaman Erişilebilir Olduğundan Emin Olun

Büyük ekranlardaki navigasyon yollarının her zaman erişilebilir olmasını sağlamalısınız. Genel olarak kabul görmüş breadcrumb yollarındaki formatları kullanın.

Farklı bir içeriğe ulaşıldığında navigasyonun değişmeyeceğinden veya yok olmayacağından emin olmalısınız. Ana sayfa geleneksel navigasyon menüleri içermeden navigasyon butonları ile tasarlanmış olabilir ama diğer bütün sayfalar kullanım kolaylığı için geleneksel yollar içermeli.

Bu sayfalarda yazı temelli girişleri minimumda tutmaya çalışın. Klavyeler tuhaf ve yavaş olabilir ve kullanıcıları zorlayabilir. Eğer klavye temelli girişler kullanmak zorundaysanız navigasyona klavye gizleme komutunu da dahil edin. Bu şekilde kullanıcılar yalnızca ihtiyaç duyduğunda klavyeyi aktive edebilirler.

4. Fazla Seçenek Sunmayın

Ekran büyüdükçe seçimler daha can sıkıcı olabiliyor. Butonları ve etkileşimleri bir oyun gibi düşünün. Kullanıcılar belirli bir zaman aralığında seçim yapmalılar. Buradaki numara da seçim yapılacak iki eleman olmasıdır.

Bu konseptin iyi çıkarımlarından biri tasarımınızın basitleşecek olmasıdır. Her ekranda iki seçenek olması, tasarım elemanlarının ve karmaşıklığın azalması demektir ve bu şekilde arayüzünüz daha kullanışlı hale gelecektir.

Seçimleri tasarlarken her bir eylemin eşit derecede net olduğundan emin olun. Butonlar belirgin ve tıklaması kolay olacak kadar büyük olmalı. Etkileşimli elemanlarında ve daha popüler kullanıcı seçimlerinde dikkat çekebilmek için küçük animasyonlar kullanabilirsiniz.

Basitleştirilmiş seçimlerin önemi ekranın boyutuna göre de değişebilir. Bütün bir ekranın her zaman kullanıcının görüş alanında olamayabileceğini unutmamalısınız. Bu, seçimleri kendi başına sınırlayabilecek bir durumdur. Eğer erkenden seçimleri düzenlerseniz içinde bulundukları şartların kullanıcı seçimlerini sizin için eleme durumundan korkmanıza gerek kalmaz.

5. Gizliliği Düşünün

Bir kullanıcı toplum içinde kiosk ekranı kullanıyor diye herkesin onun ne yaptığını bilmesine gerek yok.

Ekran ne kadar büyük olursa diğer insanlar kullanıcının ne yaptığını o kadar rahat görebilirler. Konu dokunmatik ekranlara geldiğinde kullanıcıdan hassas bilgiler isteme konusunda dikkatli olmalısınız.

Bu konuda yapılacak en uygun şey formlar veya veri girişleri için tasarımınıza küçük pencereleri dahil etmektir.

6. İnternet Bağlantısı Sorunlarını Düşünün

Büyük ekranlar için en büyük problem bu olabilir. Bunların internet bağlantısı olmadan da çalışabilmeleri gerekir.

Halka açık alanlarda bulunan büyük ekranları veya taşınabilir kiosklar veya büyük tabletler gibi portatif cihazları düşünün. Bu cihazlarda internet bağlantısı sorunu sıklıkla yaşanabilir dolayısıyla tasarımınızın bağlantı olmadan da çalışabilir olmasını sağlamalısınız.

Tasarımın çalışması için gerekli bütün araçların, JavaScript'ten font kütüphanelerine ve veri toplama elemanlarına kadar, yerel olarak depolanmış olduklarından emin olun.

7. Butonları Belli Etkileşimler İçin Tasarlayın

Tasarımınız kullanıcılara ekranla nasıl etkileşim kuracaklarını göstermeli. Her kullanıcı ilk bakışta dokunmatik ekranı nasıl kullanacağını anlamayabilir.

Tasarımınızda kullanıcıları sürece dahil etmek için animasyonlar ve butonlar gibi görsel ipuçları kullanın. Büyük ekranların çoğu kullanıcılar için tek seferlik etkileşimler sunar ve bütün arayüzler birbirinden farklıdır. Daha anlaşılır elemanlar kullanarak tasarımın kullanımını ne kadar kolaylaştırırsanız, kullanıcılarınız tasarıma o kadar bağlanacaktır.

"Başlamak için buraya dokunun" gibi tanımlayıcı mikro metinler kullanın. Bu elemanlar size gereksiz kılavuzlar gibi gelebilir ama herkes arayüzü rahat kullanamayabilir. Kullanıcılara yardım edin.

Web sitesi projelerinizin şu an için büyük ekranlara uyumlu olmayabilir ama bu cihazlar git gide daha da popüler hale geliyorlar. Bu yüzden tasarımlarınızı şimdiden bu ekranlara uyumlu hale getirmek isteyebilirsiniz.

Web Sitesi Projeleriniz İçin Doğru Monitörü Nasıl Seçersiniz?

Bir tasarımcı olarak mükemmel monitörü seçmek için düşünmeniz gereken çok fazla şey var.

Doğru ekipmanlara sahip olmak web projenizin keyifli olmasını sağlayabilir. Bu durum özellikle de monitör seçiminiz için geçerli. Çünkü en sonunda mutlaka bu ekrana bakıyor olacaksınız.

Peki projeniz için en iyi monitörü nasıl bulacak ve satın alacaksınız? Cevap düşündüğünüz kadar basit olmayabilir. Alacağınız monitör için kullandığınız bilgisayarı (masaüstü/dizüstü), projenizin kapsamını ve kişisel tercihlerinizi göz önünde bulundurmak isteyebilirsiniz.

Masaüstü - Dizüstü

Öncelikle bir karar vermelisiniz. Siz bir masaüstü tasarımcısı mı, yoksa dizüstü tasarımcısı mısınız? Bu sorunun cevabı büyük ölçüde nasıl ve nerede çalıştığınıza göre değişebilir. Bir şirkette mi, evde mi, yoksa koşuşturma içinde mi?

Eğer cevabınız dizüstü ise, üzerine düşünmek isteyebileceğiniz birçok monitör özelliği mevcut. Bütün bu elemanlar dizüstü monitörünüzde çalışma şeklinizi etkileyecektir.

• Batarya ömrü
• Bağlantı
• Klavye boyutu
• Mouse, kalem veya dokunmatik kontroller
• Taşınabilirlik
• Ekran boyutu (Laptop boyutu)
• Ne Kadar Büyük Olmalı?

Dürüst olalım, diğer tasarımcıları masalarındaki monitörlerin boyutlarıyla yargılıyoruz. Genellikle ne kadar büyükse o kadar iyi. Yani bütün küçük detayları görmek istiyorsunuz değil mi?

Tabii monitörünüzün boyutu ile ilgili farklı durumlar mevcut. Bu da uzman olduğunuz tasarım alanına göre değerlendirilebilir. Eğer genel olarak tabletlerde oynanacak bir oyun tasarlıyorsanız çalışmanızı daha doğru değerlendirebilmek adına tablet ekranlarına daha yakın, küçük ekranlar tercih etmek isteyebilirsiniz.

Birçok tasarımcı monitör tercihlerinde 24-27inch tercih ediyorlar. 27inch monitörler oldukça popüler çünkü iyi bir görüş alanı sunuyorlar. Ayrıca birçok çalışma alanı için uygun ve ekonomik.

Çözünürlük

Çözünürlük -veya monitörün görüntüleyebildiği piksel sayısı-, monitör seçiminiz için göz önünde bulundurmanız gereken diğer bir faktör. Çözünürlük ne kadar yüksekse, detaylar o kadar iyi olacaktır.

İnsanların son günlerde daha çok retina ekranları tercih etmesinin altında da bu neden yatıyor. Şu an piyasada popüler olan cihazlardan bazıları HD TV'lerden çok daha fazla piksele sahip.

Çözünürlük; dikey piksel başına olan yatay piksellerle ölçülüyor. Shaun Anderson devamlı olarak web siteleri için en iyi çözünürlük listesini güncelliyor. Şu an için en popüler olanı ise 768-1366.

Panel Seçimi

Yapı bakımından bütün monitörler birbirinden farklıdır. Birçok türü 4 farklı kategoriye ayrılır ve fiyat/performans bakımından çeşitlilik gösterir.

1. TN (Twisted nemantic) Paneller: Monitörlerin en yaygın ve en ucuz olanlarındandır. Eğer sahip olduğunuz monitörü bilmiyorsanız muhtemelen budur. Bu monitörler hızlı ve çabuk yenilenme oranlarına sahiptir ama konu renk oluşturmaya geldiğinde çok da doğru bir seçim olmayabilir.
2. VA (Vertical alignment) Paneller: Bulması en zor olan monitör tiplerinden biridir. Fiyat bakımından listenin orta sıralarında yer alır ve TN modellerine göre renk oluşturmada daha iyilerdir.
3. IPS (In-plane switching) Paneller: Eğer olayınız renklerse, bu monitörü tercih etmeniz akıllıca olacaktır. Bütün açılardan hassasiyeti mükemmeldir fakat bu modellerin düşük yenileme oranları vardır (genellikle oyuncuların endişe edeceği bir durum). Birçok tasarımcı için oldukça pahalı bir seçenek sayılabilir.
4. PLS (Plane-line switching) Paneller: Bu modeller için, daha fazla özelliğe sahip IPS monitör diyebiliriz. Şu an sahip olduğumuz seçenekler arasında en pahalısıdır.

Renk

Renk ve renk düzeltmeleri tasarımcıların monitör seçimlerinde dikkat etmeleri gereken başka bir faktör. Seçtiğiniz monitörün renk düzeltme ve kalibrasyon özelliklerinin olmasını isteyebilirsiniz.

Gri gradyanları düşünün. Grinin tonları veya diğer renklerdeki geçişler ekranda kesinti olmadan görünüyorsa kalite yüksektir diyebiliriz. Biraz teknik olabilir ama bu, ekran kartındaki RGB sinyallerinin monitörün kendisine verdiği yanıtla ilgilidir. Daha iyi renk kalitesi için yüksek LUT sayıları olan monitörleri tercih etmelisiniz.

Renk kalibrasyonunu düşünecek olursak bunun için bir tür yazılıma yatırım yapmak isteyebilirsiniz. Monitöre karar verdikten sonra değerlendirebileceğiniz birçok seçenek bulabilirsiniz. Monitör seçiminiz için asıl düşünmeniz gereken şey ekran kartınızın kalitesidir.

Çalışma Alanınız

Monitörün kendisi dışında, bir karar almadan önce onu nerede konumlandıracağınızı da düşünmelisiniz. Çalışma alanınız için doğru monitörü tercih etmeden önce kendinize sormanız gereken birkaç soru var.

• Bu monitör çalışma alanıma veya masama uyacak mı?
• Nasıl bir ayaklığa ihtiyacım var? Kendi etrafında dönmeli mi?
• Çevrede göz alacak ışık kaynağı veya pencere var mı?
• Sahi olduğum ekipmanla bağlantı sorunu olur mu?

Bu sorulara cevap verdikten sonra hangi özelliklerin sizin için daha önemli olduğuna karar verin.

Bir Bütçe Belirleyin

Son olarak bütçenizi düşünmelisiniz. Web sitesi projeleriniz için en iyi monitörü arıyorsunuz, her şeyi aynı anda istemeniz normal ama gerçekçi olmalısınız. Gerçekten ne kadar para harcayabilirsiniz?

Gerçekten iyi bir monitör ucuz değildir. Küçük modeller için 500$ ve büyük -yaklaşık 32inch- modeller için 3000$ gibi bir fiyat aralığı mevcut. Eğer bütçeniz kısıtlıysa, pahalı bir monitör yerine ikinci bir küçük monitör tercih edebilirsiniz.

Bir tasarımcı olarak mükemmel monitörü seçmek için düşünmeniz gereken çok fazla şey var. Nasıl çalıştığınızı ve onlar olmadan yaşayamayacağınız özellikleri düşünün.