Kare Olmayı Durdur
Bir tasarım uzmanı olarak, tasarımın tüm unsurlarında artan bir şekilde çevrelerin kullanılmasına aşina (ve muhtemelen katkıda bulunmaya) vardır.
Yuvarlak çerçeveli aynalar ve donanım deposundaki el aletlerine baskılar gibi ev dekorlarından, daireler her yerdedir. Daireler, web sitemize girmiş, üstbilgilerde, menülerde görünmekte ve bazen sayfanın ortasına dabdan sokulmaktadır.
Birkaç tasarım sitesi, web tasarımında çevrelerin yaratıcı kullanımının harika ekran görüntülerini içeren blog gönderilerini bile oluşturdu. Bununla birlikte, tasarımdaki çevreleri kullanmanın arkasındaki psikoloji hakkında ya da kullanıcının çevreye verdiği yanıtın, mobil kullanımın büyüyen fenomenine nasıl etkili bir şekilde dahil edilebileceği hakkında pek az şey söylenmiştir.
Çevreleri sevdiğimizi biliyoruz, ama neden? Bir web tasarımcısı, duyarlı tasarımda kullanıcı deneyimini optimize etmek için çevreleri en iyi şekilde nasıl kullanabilir?
Daireler ve beyin
Biliş ve algı
Çevreler, insanlara hitap eder, çünkü anlaşılması zor olan şekiller ve nesnelerden daha kolay anlaşılır.
Göz, çevrelere ve içerdiği bilgilere çekilir ve beyni işlemenin sert kenarlı karelere ve dikdörtgenlere göre daha hızlı ve daha kolaydır.
İsviçreli matematikçi ve fizikçi Jurg Nonni, Görsel Algı'nın yazarı, kenarların kaldırılmasının bir nesneyi daha hızlı algılamamıza izin verdiğini öne sürüyor. Nonni'ye göre, “Keskin kenarlara sahip bir dikdörtgen, aslında aynı boyuttaki bir elipsin olduğundan biraz daha fazla bilişsel görünür çaba gerektirir. “Fovea-gözümüz”, bir çember kaydetmede bile daha hızlıdır. Kenarlar ek nöronal görüntü araçları içerir. Bu nedenle süreç yavaşladı. ”
Tanıdık ve rahatlatıcı eğriler
Beyinleri kareleri ve dikdörtgeni işleyebildiğinden daha hızlı işlemek için beynin bilişsel yeteneğine ek olarak, tanıdık olanlardan daha hızlı bilgi ve objeleri işleriz.
Herkes çevreleri tanır ve insanlar şekilleri evrensel kırmızı sekizgen “STOP” işareti gibi belirli eylem ve sonuçlarla birleştirmeyi öğrenirler. Apple'ın OS X İnsan Arayüz Yönergeleri'ne göre, “İnsanlar belirli davranışları, görünüşlerine göre belirli unsurlarla ilişkilendirmeyi öğreniyorlar. Örneğin, insanlar basma düğmelerini yuvarlak şekilleriyle tanır. ”
İkonik menü öğelerindeki çevrelerin etkili kullanımı Azonmedia Hizmetler sayfası.
Kültürler ve ortamlar boyunca birçok sıcak ve tehdit edici olmayan yollarla daireler, ovaller ve yuvarlak kenarlı nesnelerle karşılaşıyoruz. Bulutlar, yumurtalar, güneş, ve doğanın tüm ayı çıplak gözle yuvarlanır. Gülen yüzler, kekler, turtalar, kıvrımlı figürler duyulardan hoşlanır.
Beyinlerimiz, sert kenarlı nesneleri daha sert, daha tanımlı ve tehdit edici bir potansiyel olarak algılayarak çevrelere ve eğrilere iyi tepki verir.
Çevreler ve kullanıcı deneyimi
Çevreler, tam olarak bu sebeplerden dolayı web tasarımında etkilidir.
Çevrimiçi kullanıcılar çaresiz bir şekilde sabırsızdır ve çemberler daha kolay algılandığı ve anlaşıldığı için temsil ettikleri bilgileri işlemek için daha az zaman alır.
Mobil kullanıcılar daha da sabırsız. Ayrıca, genellikle hareket halindeyken, çok görevli ve el cihazlarını gezinmek için bir işaret parmağı veya başparmak kullanarak meşguller. ŞİMDİ bilgilerini istiyorlar. Çevreler, mobil kullanıcıların, aradıkları bilgileri daha verimli bir şekilde saptamasına yardımcı olur.
Daireler ve başparmak
Çevreci bir ilk ve duyarlı tasarım ortamında dairelerin bir başka yolu, dokunmatik ekran arayüzlerindeki elemanlar olarak uygunluğudur.
Dokunmatik ekranlı akıllı telefonlar ve tablet kullanıcıları parmakla dokundukça, aradıkları bilgiyi kaydırır veya yönlendirir, kullanıcıyı yönlendirmek için çevreleri kullanmak mantıklıdır. Parmak ucu şeklini taklit etmekle kalmaz, daireler ve yuvarlak kenarları basma düğmelerle ilişkilendiririz ve beynimiz gereken işlemleri hızlı bir şekilde gerçekleştirir.
Web geliştirici Oliver James Gosling
Çevreleri bir dokunmatik ekran arayüzüne eklediğinizde, en küçük ekrana göre tasarlayın. Dairenin içindeki metin veya resimler hala kolayca okunabilmelidir ve boyut en az parmak ucunun veya 44 pikselin boyutunda kalmalıdır.
Çevreler ve ekran alanı
Duyarlı tasarıma sahip dairelerin kullanılmasıyla ilgili iyi haberler, CSS3'ün kodlama gereksinimlerini büyük ölçüde basitleştirmesidir.
Kötü haber, çevrelerin çok fazla gayrimenkul alması ve daha açık bir ekran alanıyla sonuçlanması.
Akıllı telefonlardaki ve tabletlerdeki ekran alanı oldukça küçük olabildiği için, çevreleri bu kadar küçük olma konusunda endişelenmeden nasıl tanıtabilirsiniz, okumak, tıklamak veya tıklamak imkansızdır?
Basit bir mobil arayüz
Mobil arayüzünüzü basit tutmanıza yardımcı olur. Göz yine de çembere çekilirken, ekranın geri kalanını kullanıcının özleyeceği içerikle karıştırmanın bir anlamı yoktur.
Başlık veya logo parçası olmadıkça, daire kullanımını her sayfada en az bir veya iki kez tutun. Dairesel bir arama düğmesi kullanmayı deneyin veya "burayı arayın" veya "buradan kaydolun" gibi harekete geçirici mesajlarınız için birini kullanın.
Gravitate Tasarım Ana sayfada logoyu, portföyü ve metni göze çekmek için daire ve renk kullanır.
Arka planlar ve paylaşma düğmeleri
Herhangi bir tasarım öğesinde olduğu gibi, çevrelerin kullanımı sitenin içeriğine, ürününe veya hizmetine, stiline ve markasına uygun olmalıdır. Kullanıcı deneyimini geliştirmeli ve arayüzü basitleştirmelidir.
Bir harekete geçirme ifadesi kullanmak site için uygun değilse veya gezinme ve menü öğeleri bir daire içinde çalışmazsa, arka plana bir daire eklemeyi düşünün. Gözü sayfada en önemli içerik parçasına çekmek için arka planda daha geniş bir daire kullanın (metnin arkasında yarı saydam).
Unutmayın, içerik ilk önce mobil kullanıcının burada ne olduğudır. Dikdörtgen seçenekler yerine yuvarlak sosyal medya paylaşım düğmelerini seçerek kullanıcı katılımını teşvik edin.
Duyarlı tasarımda dairesel simgeler
Çevreleri web sitelerine dahil etmenin en popüler yollarından biri de menüdeki simgeler gibidir. Bu, uzun ve / veya kafa karıştırıcı metni daha basit bir görüntü ile değiştirdiğinden, duyarlı tasarıma iyi uyum sağlar.
Buza dikey mobil menüyü tamamlamak için daireler kullanır.
Dairesel bir simge, içerik için daha fazla alana izin vererek daha az yer kaplar. İyi görünüyor ve kullanıcı temsil ettiği şeyi hızla işlemektedir.
Ovaller veya yuvarlak köşeli dikdörtgenler
Belki de kollarını büyük bir eski dairenin etrafına sarmaya hazır değilsin. Sorun yok. Ama sert kenarlara yapıştırma.
Duyarlı tasarım araç takımınıza bazı yuvarlak dikdörtgenler veya ovaller ekleyin. Düzeltilmiş köşeler, dikkatinizi dış kenarlara çekmek yerine, eğrilerdeki içeriğe odaklanmayı kolaylaştıracaktır.
Son söz
Web tasarımcıları, kullanıcıların mobil tasarımla memnun olma söz konusu olduğunda, çevrelerin veya yuvarlak kenarlı dikdörtgenlerin keskin kenarlara karşı acı çekmesi için zaman harcayabilirler. Kullanıcı, basit ve kolay bulunabilen bir arayüzde sunulan ilgi çekici içerikler istiyor. Diğer her şey ikincil.
Duyarlı web tasarımı, ortama cevap vermeye çalışsa da, kullanıcının ihtiyaçlarına da cevap vermelidir. Kullanıcılar dairenin tanıdık şeklini tanır, hızlı bir şekilde algılar ve tıklanabilir noktayı ekrana kolayca aktarabilir. Bir sonraki duyarlı tasarım projenizde basit bir daire kullanın. Kullanıcılarınız bunun için size teşekkür edecek.
Harekete geçirici mesajlarınız için çevreler kullanıyor musunuz? Zarif bir şekilde yuvarlak dikdörtgenlerle oynar mısın? Aşağıdaki yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, daireler resmi Shutterstock üzerinden