Web tasarımında yakınlık nedir ve nasıl kullanabilirsiniz?

İnsan zihninin nasıl çalıştığı büyüleyici. İnsanların dünyalarını görsel olarak nasıl algıladıklarını hiç merak ettiniz mi?

20. yüzyılda Alman psikologlar Max Wertheimer, Kurt Koffka ve Wolfgang Kohler bu soruya bir cevap bulmaya çalıştılar. Bir dizi çalışma yürüttüler ve sonuç olarak, insanların çevrelerindeki dünyayı nasıl gördüklerini açıklayan bir dizi basit kılavuz olan gestalt ilkelerini geliştirdiler.

Yakınlık, gestalt ilkelerinden biri olarak kabul edilir. Bu ilke, çağdaş kullanıcı arayüzü tasarımının estetiği üzerinde önemli bir etkiye sahiptir. Bu blogda sizlere Web Tasarımda yakınlığın ne anlama geldiğini ve bunu nasıl kullanabileceğinizi anlatacağım.

Web tasarımında yakınlık nedir?

Yakınlık kavramı, görsel olarak düzenlenmesi gereken unsurları ve mümkün olan en az miktarda karışıklık elde etme hedefini ifade eder. Aralarında bir bağlantının olmadığını vurgulamak için birbiriyle ilgisi olmayan içerikleri ayırmak önemlidir.

Örneğin, birkaç sosyal medya platformunun simgelerinin bir web sitesinde ayrı ayrı gruplanmadığını ve birlikte gruplandırıldığını fark etmiş olmalısınız. Her şeyi tek bir yere koyma tekniğine daha çok benzer.

Görsel belirsizliği en aza indirmek ve anlamayı teşvik etmek için yakınlığı kullanan düzenlerin anlaşılması daha kolaydır. Yakınlık ayrıca web sitesinin düzeninin yapısına da yardımcı olur. Yakınlığın uygun şekilde uygulanması, kullanıcı deneyimi üzerinde önemli ve faydalı bir etkiye sahiptir.

Tasarımcılar, yerleşim planlarını daha az karmaşık hale getirmek ve toplu olarak bağlantılı değişkenleri bir arada gruplandırmak gibi ana hedeflere ulaşarak yakınlık ilkesinden yararlanır.

Web tasarımında yakınlık nasıl kullanılır?

Beyaz boşluk

Tasarımda beyaz alanın önemini anlamak, tasarımda yakınlık kavramını başarıyla benimsemenin ilk adımıdır.

Tasarımlarda boşluk olmaması yaygın bir sorundur. Kullanıcı deneyimi söz konusu olduğunda, beyaz boşluk onu sayfadaki asıl içerik kadar etkileyebilir. Beyaz boşluk kullanıcının bakışını yönlendirir, kontrast oluşturur ve kullanıcının zihninde kalıcı bir etki bırakır.

Tasarımcılar tasarım yoluyla web sitesinin doğasını iletirler. Metin ve resimler yoluyla olabilir. Ancak etkili bir tasarım, bir web sitesindeki öğeleri artırabilecek iyi organize edilmiş beyaz alana sahip bir şeydir.

Görsel bir hiyerarşi oluşturun

Web sitesinin yapısı ve içeriğin düzenlenme ve sunulma şekli, verimli yakınlığın yapı taşlarıdır. Bir tasarımcı, bu etkili yakınlık hedefini gerçekleştirmek için çekici bir görsel içerik hiyerarşisi oluşturabilmelidir. Web sitenize net bir görsel hiyerarşi sağlamak önemlidir, bu nedenle beyaz alanı verimli kullanmak ve karşılaştırılabilir öğeleri bir arada düzenlemek önemlidir.

Web sitesi bölümlerini gruplamak ve daha fazla alt gruplandırmak, hiyerarşiyi yerinde tutmak için en iyi tekniktir. Kullanıcı, bu hiyerarşinin bir sonucu olarak nerede olduğunu ve nereye gitmek istediğini daha iyi kavrayabilir ve bu da web sitesinin amacını ifade etmeye yardımcı olur.

Kullanıcının bunu görebilmesi, ilgili bilgilerin nerede saklandığını bildiğini ve anladığını gösterir, bu da web sitesinin mesajını ve hedefini başarıyla ilettiğinizi gösterir.

İçeriğin anlaşılmasını geliştirin

İçerik kraldır. Birçok ürün için, içerik materyali, insanların onları ilk etapta kullanmaya başlamasının nedenidir. İyi netlik (bir okuyucunun yazılı bir metin içeriğini tanıması için kolaylık) ve okunabilirlik (bir okuyucunun sembolleri çözebilmesi için kolaylık) ürün tasarımının kritik noktalarıdır.

Yazı tipi ailesi, yazı tipi boyutu ve metin içeriği kontrastı gibi birçok öğe netlik ve okunaklılığa katkıda bulunabilir. Ancak, bir web sayfasındaki içerik malzemesini ek olarak gecikmeden şekillendirme biçiminiz, içerik malzemesinin okunabilirliğini ve netliğini etkiler.

Metin içeriği hiçbir biçimlendirme olmadan sağlanırken okunabilirlik devam edebilir. İçerik materyalini kısa, zahmetsizce taranabilir bloklar halinde sağlayarak (cümleleri paragraflar veya bölümler halinde gruplayarak ve bunları bir yığın boşlukla ayırarak) müşterilerin metin içeriğini test etmelerine ve incelemelerine yardımcı olursunuz.

Taranabilir bir düzene sahip olun

Bir hiyerarşi içinde yapılandırılmış ve mantıklı bir şekilde kategorize edilmiş içeriğin okunması ve taranması çok daha basit hale getirilmiştir. Bir web sitesi mimarisini ve tasarımını oluştururken, kullanıcıları içerikle aşırı yüklememek için yakınlıktan yararlanmalıdır.

Bu nedenle, sınırlı miktarda materyale sahip web sitelerinde yakınlık kavramlarını uygulamaya koymak nispeten basit olmasına rağmen, çok fazla içeriğe sahip web sitelerinde yakınlık çok daha önemlidir. Sonuç olarak, düzeninizin basit, okunabilir ve kullanıcı tarafından taranabilir olup olmadığını kontrol etmelisiniz.

Belirli öğeleri vurgulayın

Vurgu, kişi deneyimi (UX) tasarımının maksimum hayati kavramlarından biridir. Bir web sayfasındaki kesin faktörlere veya içerik materyaline öncelik vermek, tasarımcılar için sıra dışı olmayan maksimum yer sorumluluklarından biridir.

Tasarımcılar, uygun sonuçları elde etmek için (bir ayrıntıyı büyütmek veya ekstra kontrast dahil olmak üzere) birçok özel strateji kullanabilirken, orijinal ayrıntıda hiçbir değişiklik yapmadan aynı sonuçları elde etmek uygulanabilir. Bunun yerine, ayrıntıdaki zayıf alanların miktarıyla oynayabilirsiniz.

Yoksul alanlar ve kişisel ilgi arasında doğrudan bir bağlantı var. Yuvarlak ve ayrıntılı yüklediğiniz ekstra zayıf alan, izleyici için ekstra önem kazanacaktır. Bu doğal olarak gerçekleşir - çünkü kişinin ilgisi fazladan zayıf bir alana sahip bir ayrıntı yönünde yönlendirilebilir, çünkü o yerde ilgilerini çeken başka bir şey yoktur.

Bir internet sayfasında hangi detayın en fazla ilgiyi çektiğini anlamanın muhtemelen zor olduğunu gündeme getirmek gerçekten çok iyi. Bu nedenle, düzeninizin bir prototipini oluşturmak ve bunu 5-2. testle doğrulamak için bir internet düzeni yazılım programı uygulamanız teşvik edilir.

Kitlenizi oluşturan kişilere 5 saniye boyunca prototipinizi gösterin ve ardından onlara “Hatırlayabileceğiniz başlıca faktörler nelerdir?” diye sorun. Görmeleri gereken bir ayrıntıyı (veya faktörleri) ararlarsa, o zaman hepiniz iyisiniz.

İçerik boyunca izleyicinin gözüne rehberlik edin

Yakınlık ilkesi, izleyicinin gözünü bir faktörden diğerine yönlendirmek için iyi bir yol oluşturmanıza yardımcı olur. Beyaz alanı ayarlayarak, kullanıcının dikkatini açıkça çeken odak faktörleri veya bölgeleri zahmetsizce oluşturabilirsiniz.

Odak faktörleri oluşturmak, bir internet düzeni ızgarasını büyütmekle gelişmeye başlar, düzen faktörlerini (metinsel içerik, resimler veya pratik kontrollerle birlikte) her zaman düzen içinde çevrelemenize izin vermek için iyi bir yoldur.

Bir tablonuz olduktan sonra, temel içerik materyali bölümleri aracılığıyla manuel müşterilere yönelik faktörleri ayarlamak istiyorsunuz. Aşağıda görebileceğiniz gibi, Evernote'un metinsel içerik bloklarını resimlerle eşleştirme yardımıyla yaptığı tam olarak budur. Sonuç olarak, izleyicinin gözü bu sayfada gezinirken zikzak bir rota izler.

toparlamak

Farklı monitörler ve çözünürlükler için yerleşim planlarken UI faktörleri arasındaki göreceli mesafeye odaklanmak çok önemlidir. Büyük dizüstü bilgisayar monitörlerinde görünen tasarım, küçük hücresel monitörlerde hemen görünmez.

Düzeniniz daha küçük monitörleri barındıracak şekilde küçültüldüğünde, faktörler arasındaki boşluk en aza indirilebilir, bu da muhtemelen UI faktörlerinin varsayılan ilişkilerini bozabilir. Düzeninizin iyi ölçeklenip ölçeklenmediğini görmek için düzeninizi çeşitli monitörlerde ve çözünürlüklerde kontrol etmeniz önemlidir. Hücresel cihazları simüle etmek için Google Chrome Dev ekipmanı uygulamak uygundur.

Web sitesi kullanıcı deneyiminin nasıl iyileştirileceği de hakkında daha fazla bilgi edinmek isteyebileceğiniz bir şeydir. Web sayfanızı tasarlamak veya yeniden tasarlamak istiyorsanız bizimle iletişime geçin.