Daha İyi Kullanıcı Katılımı için Odaklanmış Arabirimler Tasarlama

Kullanıcı etkileşimi farklı projeler için farklı şekillerde elde edilebilecek zor bir ölçümdür. Çoğu tasarımcı arayüzey etkileşim hakkında konuşurlarsa sayfa içeriği Ayrıca kullanıcı etkileşimini teşvik edebilir. Daha iyi bir kullanıcı katılımı için, önemlidir ilgi çekici içerik yaz, ve bu içeriği sun akılda kalıcı bir tasarımda.

Söylemesi yapmaktan çok daha kolay, ama bazı temel bilgileri öğrenirseniz, harika içerikli odaklanmış UI projeleriniz için.

Bu yazıda, nasıl arttırılacağını göstereceğim kullanıcı etkileşimi ve içerik etkileşimi web tabanlı arayüzlerde. Bunlar, bir ziyaretçiyi çekmek için en yaygın kullanılan iki yoldur. deneyimi optimize etmek sayfa metrikte bu kazançlı zamanı artırmada sorun yaşamazsınız.

Yenilik Yakalama

Kavramı yenilik Bağlam temelli, genellikle yeni, genellikle çok yeni ve benzersiz bir olayı veya şeyi tanımlar.. Yeni olaylar dikkatimizi çek çünkü onlar dikkat çekmek. Bu aynı zamanda görünen unsurları temsil eden yeniliklerle arayüz tasarımı için de geçerlidir. sayfadan atlamak.

Geçenlerde, yenilik söz konusu olduğunda nişanlanmanın önemini tartışan harika bir yazı buldum. Kullanıcılar görünüyor yeni deneyimlere, arayüzlere ve kullanıcı arabirimi öğelerine odaklanın çünkü onlar farklı. Farklı tasarlanma tek gerçeği çoğu zaman dikkat çekiyor.

Yaygın bir örnek, çoğu açılış sayfasında bulunan harekete geçirme ifadesi düğmesidir. Ayrıca yenilikler de oluşturabilirsiniz. arkaplan fotoğrafları, resimler veya uygulama ekran görüntüleri, Uber for Business açılış sayfasındaki gibi.

Bu sayfada harekete geçirme ifadesi var, ancak hemen ilgileniyorum ekran görüntülerine gider. İlk yüklendiklerinde canlanırlar, böylece bu birleşir tasarım ile hareketin yeniliği dikkatini çekmek.

Bir alternatif kullanarak GiftRocket olabilir bağlantılar olarak resimli simgeler siteye daha fazla dalmak.

Bu örneklerin her ikisi de yenilikçiliği kendi avantajlarına kullanmak. İnsanları siteye her zaman daha fazla çekemezsiniz, ancak dikkatlerini çekerseniz daha iyi sonuçlar göreceksiniz visseral düzeyde ilk.

Tasarım ilk şey Ziyaretçiler görüyor ve dikkatlerini çekmeniz gerekiyor. saniye içinde daha fazla katılımı teşvik etmek.

Skimmable Tipografi

Çalışmalar çoğu kullanıcının bu olduğunu buldu web sayfasını tara kelime kelimesini okumak yerine. Muhtemelen insanları içeriğinizi okumaya çekmek isteyeceksiniz, ancak yalnızca bu kadarını yapabilirsiniz.

En iyi alternatif yaratmak yağsız içerik başlıkları, koyu metinleri ve ne söylemeye çalıştığınızı gösteren resimlerle. En azından düşünebilirim üç güçlü yazma tekniği içeriğinizde çalıştırabilirsiniz okunabilirliği arttır:

1. İçeriği böl net altyazılı
2. Paragrafları böl onları daha küçük yapmak
3. Madde imli listeleri kullan puanlarınızı daha hızlı paylaşmak için

Amaç, okuyucularınızı tutmaktır sayfayı aşağı taşı gerekli olan ne olursa olsun. İçeriği küçük tutarak ısırık büyüklüğünde topaklarda dikkat çekmek ve insanları siteye daha fazla yönlendirmek için çok daha kolay bir zamana sahip olacaksınız.

Bu yazı stilinin bir örneği için Quick Sprout bloguna göz atın. İçerik Neil Patel tarafından yazılmıştır ve sıklıkla çok uzun biçimli içerik yazar. paragrafları yıkar Her biri 1-3 cümleye.

Eğer varsa uygun başlıklar, ve kullan görüntüler / madde işaretleri içerik boyunca insanların kaymağını ve daha fazla okumalarını sağlar. Ayrıca emin olun boşluk miktarını artırmak paragraflar arasında. Kenar boşlukları ve dolgular Her ikisi de düzen tasarımında ve okunabilirlikte büyük rol oynar.

Metni tasarlayın, böylece gerçekte okumak eğlenceli. Sıkıcı kopya cazip olmaz, ancak çok küçük veya kontrastı olmayan eğlenceli kopyalar da.

Göz Alıcı Görüntüler

Backlinko tarafından yapılan son bir vaka çalışması, bu sayfaları önerdi en az bir resim ile genellikle rütbe görüntü içermeyen sayfalardan daha. Bu bir SEO perspektifinden harika.

Peki ya kullanıcı katılımı? Eğer o resmi saklayabilirsen kıvrımın üstünde veya üste yakın aynı zamanda ziyaretçilerin sıçramadan önce dikkatini çekecek. Yeni sayfa öğelerinin etkileme eğiliminde olduğunu unutmayın.

Sayfa boyunca serpiştirilmiş bir resim (veya çok sayıda resim) olduğunda, monotonluğu bozmak sıkıcı metin blokları. Kullanıcılar yapabilir okumaya ara vermek görüntüyü takdir etmek veya görüntü ile yazılı içerik arasında bağlantı kurmak için. Ancak çoğu tasarım tekniğinde olduğu gibi, kalite miktardan daha değerlidir.

Bir Moz vaka çalışması, yüksek kaliteli görüntülerin eğiliminde olduğunu buldu. ziyaretçi tut Sayfada çok daha uzun. Öte yandan, düşük kaliteli görüntüler iyi çalışma ve bazı durumlarda ziyaretçilerin hemen çıkma görüntü olmadan. En az bir resim eklemeye çalışmalısınız içerikle alakalı ve şu okuyucuya değer sağlar.

TechCrunch bunu, çoğu zaman bulacağınız makalelerinde öne çıkan resimlerle yapıyor ekranın üst kısmında öne çıkan fotoğraf.

WordPress küçük resim özelliği ile öne çıkan görüntülerin eklenmesini kolaylaştırır. Yazdığınız her yazı için ayrı bir fotoğraf ayarlayabilir ve bunları sayfanın başında görünmeye zorlayabilirsiniz. Bu ziyaretçilere bir bakış atmak için mükemmel bir yoldur içeriğin ne hakkında olduğu, ve artırmak TO Ayrıca küçük resmi içeren ilgili yayın widget'ları için.

Sayfa Öğeleri Karşıtlığı

Sayfadaki belirli bir alana dikkat etmeniz gerekiyorsa, asimetri senin en iyi arkadaşın. Kontrast Bir tasarımın belirli alanları veya belirli içerik blokları arasında sert bir kama kullanıyor.

Ziyaretçi doğal olarak kontrastı arttırmak çünkü farklı. Renk, boyut ya da beyaz boşluğun büyük yan yana dizileri gözü çizer çünkü her şeyin kalıbını kırar düzende.

Sayfa öğelerini zıtlamak için en sevdiğim örnek belki Sketch'in ana sayfasıdır. Çok fazla kontrast bulundu iki harekete geçirme ifadesi düğmesi arasında, Biri bir Sketch deneme sürümü indirmek için, diğeri bir kopya satın almak için.

Satın alma düğmesi tam arka plan rengini kullanır çok daha parlak başlıktaki diğer renklerden daha. Düğme metni de ücretsiz deneme düğmesine kıyasla daha parlak. Bu, ziyaretçileri Şimdi Satın Al düğmesine yönlendirir sadece görsel uyarıcılardan.

Fark edeceksiniz benzer teknik Optin Canavar ana sayfasında. Bu üstbilgide, Get OptinMonster Now Alın etiketinde yalnızca bir düğme bulunur. Görüşte başka yeşil unsur görünmeyen mavi bir arka plan üzerinde parlak yeşil bir düğme.

Renk, boyut ve şekil, tüm dikkatinizi çeker çünkü her şey ile zıt başlığında. Düğmenin doğrudan yanında video önizlemesi için küçük bir metin bağlantısı bulunur. Muhtemelen harika bir video ve dikkatleri hak ediyor, ancak deneme / kayıt CTA butonu kadar değil.

Bir blogda, kullanıcı katılımı için farklı niteliklere sahip olabilirsiniz. Ortak bir seçenek bültene kayıt formu Aeolidia örneğinde olduğu gibi.

İçeriğin altına doğru kaydırırsanız, bir fantezi-shmancy kayıt kutusu Sadece bülten formu için tasarlanmıştır. İle sayfanın geri kalanından sıyrılıyor benzersiz bir arka plan rengi, eğlenceli tipografi ve sevimli bir King Triton simgesi.

Kontrastlı tasarım yapmanın en iyi yolu, örnekleri incelemek ve sadece deney yapmaktır. Neyin işe yarayıp yaramadığını görün A / B testiyle ölçümlerin takibi. Daha fazla örnek arıyorsanız, bu Codrops'ların canlı asimetrik web sitelerinin ipuçlarını ve ekranlarını gösteren yazılarını inceleyin..

Kullanıcı Etkileşimini Teşvik Edin

Ziyaretçilerin bir siteyle ilgilenmelerini sağlamak için birçok yol var, ancak en yaygın olanı bir şeyler yapmalarını sağlayın. Bu hem statik bloglar hem de dinamik sosyal siteler için geçerlidir. Bunun için tek bedene uyan hileler yok. Kullanıcıları yapmak için ne gerekiyorsa yapabilirsiniz sayfa ile meşgul hissediyorum.

İçinde statik site, çok fazla ekleyebilirsiniz İlgili Bağlantılar daha fazla okumak için görüntü slayt gösterileri. Ayrıca form ekle kullanıcı yorumları veya bir e-posta bülteni için.

Gelince dinamik arayüzler, Sitenin amacı genellikle kullanıcının katılımını teşvik etmektir. En büyük engel kullanıcılara öğretmek site nasıl çalışır ve arayüz ile düzgün bir şekilde nasıl etkileşime girilir?.

Bu mesaja, KissMetrics tarafından kullanıcı katılım teknikleri hakkında konuşurken bakın. Bulduğum en iyi stratejilerden biri rehberli bir tur tasarlayın ziyaretçileri yönlendiren birincil özelliklerin her biri.

Twitter beklentisinin nasıl yepyeni bir kullanıcı için kafa karıştırıcı olacağını düşünün. Eğer kimseyi takip etmiyorlarsa ve takipçileri yoksa, neden tweet atıyorlar??

“Önerileri izleyin” Kayıt sırasında kutu yeni kullanıcıların yardımcı olur Twitter'ın nasıl çalıştığını öğrenin. Bu özellik yeni kullanıcılar için kullanıma hazırlar ilgi duymaya başla platform ile ve özellikleri denemek şöyle, tweets ve özel mesajlar gibi.

Rehberli bir turun yanı sıra arayüzü basitleştirmek. Başlıca özellikler olmalı 1-2 tıklama uzakta Kullanıcının gösterge panosundan veya ana sayfasından. Sezgisel arayüzler açıklamaya ihtiyacım var, ve basitlik dikkat çeker çok daha hızlı.

Tüm bu teknikleri anlayarak, bu arayüzleri oluşturmak için daha kolay bir zamana sahip olacaksınız. kullanıcıların sorunlarını çözebilir, ve yeni kullanıcıları katılmaya teşvik et. Daha fazla arıyorsanız UX tasarım sözleşmesi ipuçları Bu ilgili mesajları kontrol edin:

• Katılımın Artırılması için Kullanıcıya Takma Taktiği (Thinkapps.com)
• Kademeli Katılımda Bir Ders (Uxbooth.com)
• Yeni kullanıcıların ürününüzü nasıl kullanacaklarını öğrenmek istediklerini sanmayın. (Uxdesign.cc)