Daha İyi Bir UX Tasarımı İçin: Bunu Tıklayabilir miyim?

Yayınlanan: 2020-02-05

Küçük Değişiklikler TO'nuzu Nasıl Artırabilir?

Herkes daha fazla tıklama istiyor. Daha fazla musluk. Daha fazla kullanıcı 'evet, bana ne veriyorsan onunla ilgileniyorum' diyor. Kullanıcıların daha fazla tıklamak istemesini sağlayan birkaç yola bakmak istedik, işte burada UX tasarımı devreye giriyor!

Web'in her yerinde oldukça iyi sıvanmış: Kullanıcıların tıklamasını sağladığınızda, ince bir değişiklik uzun bir yol kat edebilir. Bu ince değişikliklerin tam olarak ne olabileceğine ve dönüşümleriniz üzerindeki etkilerine baktık.

Yazı Tipleri

Yazı tiplerinin çılgınca muazzam bir etkisi olabilir. Örneğin, 2009'da Tropicana büyük ölçüde yeniden markalaştı ve bunun büyük bir kısmı yazı tiplerini yeniden yapmaktı. Tropicana yazı tipinin aynı zamanda logoları olduğunu unutmayın.

tropikana yeniden markalama

Vital Design ile Görüntü

Satışlar anında %20 düştü.

Yazı tipleri aynı zamanda insanları tıklatırken güvenebileceğiniz en kararlı şeylerden biridir.

Genel olarak, yüksek kontrastlı kalın, sans serif yazı tipi harika olacaktır.

Neden? Niye? Okuması en kolayı. Bunun örnekleri internette her yerde var. Basecamp, BaseCRM,, Evernote, mHelpDesk – tüm bu şirketler aynı görünen CTA'lara sahiptir – yüksek kontrastlı, kalın sans serif yazı tipi. Görmesi kolay, okuması kolay. Bu yüzden şirketler serif yazı tipleri üzerinde kullanma eğilimindedir. (Aynı şey posterler için de geçerli – bunu çok uzaklardan okuyabilirsiniz). Ayrıca, sans serif'i bilgisayarda okumak daha kolaydır, bu yüzden okuyucunun tıklamasını istediğinizde onu kullanmak istersiniz - her şeyden önce ne söylediğinizi bilmeleri gerekir.

Evernoteücretsiz deneme düğmesi yeşil2 ay boyunca ücretsiz basecampyardım masası

Alt gölgeler + 3D efektler

Alt gölgelerin ve bir şeyi 3B yapmanın insanların üzerine tıklamasını sağlaması inanılmaz. Düz tasarımın gerçekten en büyük dezavantajı. (Şu anda. Diğeri ise, eninde sonunda, çılgın tarihli olacak.) Her şey gerçekten düz olduğunda, harika görünüyorlar, ancak neyin tıklanabilir olup olmadığını bilmek o kadar kolay değil. Jakob Nielsen, 2012'de Windows 8'i değerlendirirken bunu tartıştı.

İnsanlar aslında düğmeler, yuvarlak kenarlar veya alt gölge gibi göründüğünde daha fazla tıkladıklarından, neyin tıklanabilir olup olmadığını bilmeyi gerçekten kolaylaştırır.

(profesyonel ipucu: bunlara kiosk stili düğmeler denir).

Buton Bu aslında ilginç bir problem sunuyor. Kiosk tarzı düğmeler, eskiden oyun salonlarında ve diğer yerlerde kullanılıyordu. Dijitalleştiğimizde bu norm devam etti. Bu mantıklı, ancak bir noktada, 3D düğmeler eğimli olmak adına eğimli ve 3D düğmeler haline geliyorlar, çünkü kimse nereden geldiklerini gerçekten hatırladığı için değil. Disket kaydetme simgesi gibidir – skeuomorfik kök sonunda keyfi hale gelir ve artık skeuomorfik değildir.

Bütün bunlar, insanların şu anda kiosk tarzı düğmelere daha rahat tıkladığını söylemek için, ancak düz bir tasarım birkaç yıl daha orada kalabilirse, istikrarlı bir hareket görebiliriz.

Hareket

Pek çok insan, tıklanabilir 3D bir şey yapmakla hareketi birleştiriyor, ancak bence önce UX perspektifinden ve ikinci olarak düz tasarım için ne anlama geldiği için bir kategoriyi kendi başına garanti altına almak yeterince önemli.

Bir UX perspektifinden

Kullanıcıların eylemleri için geri bildirime ihtiyaçları vardır. Kullanıcıların nerede olduklarını ve ne yapacaklarını anlamalarına yardımcı olmanın 1 numaralı yolu.

Bir şeyi tıklanabilir yapmanın ilk işi, kullanıcılara tıklanabilir olduğunu söylemektir.

Örneğin, düğmeler söz konusu olduğunda, yalnızca en ufak bir eğim değişikliği harikalar yaratabilir. Örneğin, Eventbrite ana sayfası, tıklanabilir olduklarını göstermek ve kullanıcının nerede olduğunu pekiştirmek için simgelerinde hafif gradyan değişikliği kullanır:

Eventbrite

Bir başka harika örnek de eTecc/Interactive'in web sitesi ana sayfasıdır. Aslında, kullanıcıya bir şeyin tıklanabilir olduğunu bildirmek için bir dolgu kullanırlar.

Kullanıcılara nelerin tıklanabilir ve nelerin tıklanabilir olmadığı konusunda nasıl bilgi verileceğini bulmanın çok kolay bir yolu. Ve işler düzleştikçe düzleştikçe, bu görsel geri bildirim giderek daha önemli hale geliyor. İşin garibi, bu Apple'ın geliştirebileceği bir şey. Apple.ca ana sayfasına göz atın.

En üstteki bağlantılar tıklanabilir gibi görünüyor ve bunlar, kullanıcı için bu bilgiyi yeniden doğrulamak için küçük bir gradyan değişikliği var. Ayrıca galeri seçeneğinin de tıklanabilir olduğunu varsayabiliriz ve yine bunu güçlendirmek için bir renk değişikliği var.

elma ana sayfası2

Ancak sorun şu ki, tüm ekran aslında tıklanabilir! Kullanıcı için son derece sezgisel değil ve çok fazla tıklayan biri olarak sayfanın neden sürekli değiştiğini anlamam biraz zaman aldı. Bu hiç de sezgisel bir kullanıcı arayüzü değil.

tıklanabilir ekran elma

Düz bir perspektiften

sadece yaratıcı Yani Apple bunu %100 başaramamış olsa da, oldukça yakınlar. Hareket, tasarımcıların istedikleri düz arayüzleri oluşturmalarına olanak tanırken, kullanıcılara neyin tıklanabilir olup neyin olmadığını bilmelerine izin verir. Tüm örneklerin son derece düz tasarımlar olduğuna dikkat edin? Tam açıklama bunu planladım. Geri bildirim olduğu sürece düz tasarımın bir düğme için çalışabileceğini gösterir.

İşte geribildirimsiz düz(imsi) bir tasarım örneği – bunun bir düğme olduğu benim için açık olsa da, geri bildirim olmadan biraz bilgisayarımın çalışmadığını hissediyorum.

Kontrast + Renk

Ne yazık ki, insanların tıklamasını garanti eden belirli bir RGB kodu yok. Ancak, size yardımcı olacak, izlemeniz gereken bazı mükemmel kurallar var. Kullanıcıların bir şeye tıklamasını istiyorsanız, öne çıkmasını istersiniz. Bu, bir markanın renk paletinden kopmak anlamına gelse bile, etrafındaki her şeyle çarpıcı bir şekilde kontrast oluşturması gerektiği anlamına gelir.

Örneğin, David Hamill, köprüler için başka hiçbir şey için kullanılmayan bir renk kullanılmasını önerir. Sitesinde, her bağlantı pembe renkte yapılır. Bir kullanıcı olarak neyin bağlantı olduğunu ve neyin olmadığını bilmek kolaydır. Fareyle üzerine geldiğinizde bir değişiklikle birlikte, bir şeye tıklayabileceğiniz kullanıcı için gerçekten açıktır.

David Hamill

Bu tür bir renk ve kontrast sorunu, genellikle harekete geçirici mesajlar (CTA) ve düğmelerle ortaya çıkar ve renkteki küçük bir değişiklik, kârda büyük bir değişiklik yapabilir. Örneğin, Vibethink CTA'lar ve düğmeler hakkında yazdı ve bir düğmenin rengini ve şeklini değiştirmenin dönüşümleri (okuma: tıklamaları) %35 artırdığını bildirdi. Artan kontrastın, kullanıcıların tıklamasını kolaylaştırdığını hissettiler.

VibeThink

Ama iki şeyi değiştirdiler, yani bu kesinlikle bilimsel değil. 2011 yılında Hubspot, kırmızı ve yeşil düğmeler üzerinde bazı A/B testlerinin sonuçlarını yayınladı ve kırmızı düğmenin yeşil düğmeden %21 daha iyi performans gösterdiğini buldu.

merkez noktası

Dolayısıyla renk ve kontrast, kullanıcıların bir şeylere tıklamasını sağlamada büyük rol oynayabilir.

Sarmak

Şeytan ayrıntıda gizlidir. Tasarımcılar, geliştiriciler, kullanıcı deneyimi uzmanları ve pazarlamacılar olarak, tıklanabilir bir şey yaptığımızda, kullanıcıdan bir şey yapmasını isteriz. Buraya Tıkla. Başvuruyu Gönder. Bize Ulaşın. Şimdi al. Her ne ise, ihtiyacımız olan onlarda var. Öyleyse neden bunu basitleştirmiyorsunuz? Kullanıcılarınızın tıklamasına yardımcı olmanın (ve dolayısıyla muhtemelen size de yardımcı olmanın) en iyi yolu, tıklamayı kolaylaştırmaktır. Kiosk tarzı tasarımla butonları beklentilere uygun hale getirerek, yazı tiplerini ekranda (küçük olsalar bile) okumayı kolaylaştırarak ve butonlar ve tıklanabilir içerikler hakkında geri bildirim sağlayarak kullanıcılarınızın hayatını kolaylaştırıyorsunuz.

İşte bu, gerçekten. Bir şeyi tıklanabilir hale getirirken, aynı zamanda kullanıcılarınızın hayatını da kolaylaştırın.

Bu gönderiyi beğendiniz mi? Ayrıca Web Sitenizi Geliştirmek için Kullanıcılarınızı Anlayın UX Tasarım yazımızı veya Her UX Tasarımcısının Sahip Olması Gereken Harika Ürünlerimizi de okumak isteyebilirsiniz!