Güzel, kullanıcı dostu, insan merkezli UI tasarımları geliştirmek istiyorsanız bu on yönergeyi unutmayın. Bir web sitesi kullanıcı arayüzü tasarımı, birbirine bağlı sayfalardan oluşan bir koleksiyondan daha fazlasıdır. Bu bir arayüz, birçok şeyin çarpıştığı, etkileşime girdiği ve birbirini etkilediği bir yerdir – bu durumda, bir kişinin ve bir işletmenin veya bireyin çevrimiçi varlığıdır. Ziyaretçi, bu temasın sonucunda bir deneyim yaşayacak ve bu deneyimi olabilecek en iyi hale getirmek bir web tasarımcısı olarak sizin göreviniz.

Ve en önemlisi, her zaman için her şeyden önce kullanıcınızı akılda tutmaktır.

Web tasarımı, insan-bilgisayar etkileşimi (HCI) bilimsel çalışmasına çok şey borçludur. Ve HCI araştırmasından elde edilen bu dokuz ipucu, tasarım süreci boyunca müşterilerinize odaklanmanıza yardımcı olacaktır.

Arayüzlerin biçimine ve işlevine odaklanan arayüz tasarımı, büyük resme odaklanan kullanıcı deneyimi tasarımının bir alt kümesidir: yalnızca arayüz değil, bir bütün olarak deneyim. Kocaeli web tasarım firması olarak sizler için hazırladığımız 10 ipucunu inceleyin.

1. Müşterilerinizi Tanıyın

Her şeyden önce, dahili ve harici kullanıcılarınız hakkında kapsamlı bir anlayışa sahip olmalısınız. Evet, bu, analiz uygulamalarınızın toplayabildiği demografik verilerin derinlemesine anlaşılmasını gerektirir. Ancak daha da önemlisi, neye ihtiyaç duyduklarının ve onları hedeflerine ulaşmaktan neyin alıkoyduğunun farkında olmayı gerektirir.

Bu empati düzeyine ulaşmak için, verilerin kapsamlı bir şekilde incelenmesinden daha fazlası gerekir. Bu, web sitenizin ziyaretçilerini tanımakla ilgilidir. Bu, onlarla yüz yüze konuşmayı, ürününüzü (ve belki başkalarını) kullandıklarını görmeyi ve onlara "Bu tasarımı nasıl buldunuz?" sorusundan daha ayrıntılı sorular sormayı gerektirir.

Ne elde etmek istiyorlar? Hedeflerine ulaşmalarını engelleyen nedir? Bir web sitesi, insanların bu zorlukların üstesinden gelmesine veya üstesinden gelmesine nasıl yardımcı olabilir?

Yalnızca kullanıcılarınızın ne istediğini düşünmeyin. Neye ihtiyaçları olduğunu öğrenmek için daha derine inin. Ne de olsa istekler, karşılanmamış ihtiyaçların ürünüdür. Bir kullanıcının en temel ihtiyaçlarını karşılarken en derin ihtiyaçlarını karşılayabilmelisiniz, eğer onların en derin ihtiyaçlarını karşılayabilirseniz. Verileri analiz ederek ve müşterilerle etkileşim kurarak elde ettiğiniz içgörüler, insanların arayüzünüzü nasıl kullandığından o arayüzde vurguladığınız bilgi türlerine kadar verdiğiniz her kararı etkileyecektir.

2. Arayüzünüzün Kullanıcılar Tarafından Nasıl Kullanılacağını Belirleyin

Arayüzünüzü tasarlamadan önce, insanların onu nasıl kullanacağını tanımlamanız gerekir. Dokunmatik özellikli cihazların artan yaygınlığı göz önüne alındığında, bu düşündüğünüzden daha acil bir sorundur.

İnsanlar web siteleri ve uygulamalarla iki şekilde etkileşime girer: doğrudan (ürün arayüz bileşenleri aracılığıyla) ve dolaylı olarak (ürün arayüz öğeleri aracılığıyla) (ürün kullanıcı arayüzü tasarım öğeleriyle etkileşim kurarak). ürünün dışındaki web siteleri).

Yüz yüze görüşme örnekleri

• Bir düğmeye basma eylemi
• Satın alma işlemi yapmak için kredi kartı kullanın
• Bir öğeyi parmak ucunuzla sürükleyip bırakın

Dolaylı etkileşimler, iki veya daha fazla kişi farklı şekillerde etkileşime girdiğinde ortaya çıkan etkileşimlerdir.

• Fare ile işaretleyin ve tıklayın
• Tuş İfadelerini ve Klavye Kısayollarını Kullanma
• Bir form alanını verilerle doldurun
• Bir Wacom tablet üzerinde çizim yapın

Bazen bir etkileşim çok basit görünebilir.

Kararlarınızı, kullanıcılarınızın kim olduğuna ve hangi cihazları kullandıklarına dayandırmalısınız. Yaşlılar veya sınırlı fiziksel beceriye sahip olanlar için web tasarım yapıyorsanız, herşeye güvenmemelisiniz. Uygulamalarla fare yerine klavyeyi kullanarak etkileşim kurmayı tercih eden yazarlar veya programcılar için tasarım yapıyorsanız, zaman kazanmak için tüm yaygın klavye kısayollarını dahil etmek isteyeceksiniz.

3. Hedeflerinizi Belirleyin

Bir web sitesindeki veya uygulamadaki birçok etkinliğin sonuçları vardır: Bir düğmeye basmak sizi bir şey satın almaya, bir sayfayı silmeye veya büyükannenizin doğum günü pastası hakkında alaycı bir yorum yayınlamaya yönlendirebilir. Ve sonuçların olduğu her yerde endişe vardır.

Bu nedenle, kullanıcılar bu düğmeyi tıklamadan önce ne olacağını anladıklarından emin olun. Bu, tasarım ve/veya kopyalama yoluyla yapılabilir.

Tasarım Yoluyla Beklentileri belirlemek

• Amaçlanan eyleme karşılık gelen düğmenin seçimi ve seçimi
• Kopyalamayla birlikte iyi bilinen bir simge (silme düğmesi için çöp kutusu, bir şey eklemek için artı işareti veya arama yapmak için büyüteç gibi) kullanın.
• Belirli bir anlamı olan bir renk seçin ("git" için yeşil, "dur" için kırmızı)

Kopya İle Beklentileri Belirleyin

• Düğmenin kısa bir kopyasını oluşturun
• Boş aşamalarda yönlendirici/teşvik edici metin sağlayın
• Uyarı gönderme ve onay isteme

İnsanlara, bir şeyi kalıcı olarak kaldırmak gibi geri dönüşü olmayan sonuçları olan faaliyetlerden emin olup olmadıklarını sormak mantıklı görünüyor.

4. Hata Yapmaya Hazırlıklı Olun

İnsanlar hata yapar ama yaptıkları haytalar için her zaman cezalandırılmamalıdırlar. İki şeyden birini yaparak insan hatasının sonuçlarını hafifletmeye yardımcı olabilirsiniz:

• İlk etapta herhangi bir hata yapmadığınızdan emin olun.
• Bunlar meydana geldiğinde, çareler getirin.

E-ticarette ve form tasarımında bir dizi hata önleme tekniğiyle karşılaşacaksınız. Tüm alanlar tamamlanana kadar düğmeler devre dışı kalacaktır. Form, bir e-posta adresinin yanlış girildiğini algılar. Pop-up'lar, sepetinizi gerçekten terk etmek isteyip istemediğinizi soruyor.

Kusurları önceden tahmin etmek, genellikle olaydan sonra onları düzeltmeye çalışmaktan daha az ağırlaştırıcıdır. Bunun nedeni, "İleri" veya "Gönder" düğmesine basmakla gelen harika başarı hissinden önce ortaya çıkmalarıdır. Ancak, bazı şeylerin olmasına izin vermeniz gereken zamanlar vardır. Açıklayıcı hata mesajları şu anda gerçekten parlıyor.

Hata mesajları oluşturduğunuzda, bunların iki amaca hizmet ettiğinden emin olun:

Sorunu açıklayın. Örneğin, insanlığın henüz kolonileştirmediği "Mars'ta doğduğunuzu söylediniz".

Sorunun nasıl çözüleceğini açıklayın. Örneğin, "Lütfen burada, Dünya'da bir doğum yeri girin".

Aynı kitabın hatasız durumlarda kullanılabileceği belirtilmelidir. Örneğin, bir şeyi yanlışlıkla silersem ancak kurtarılabilirse, "Silinen öğeleri her zaman Çöp Kutunuza gidip Geri Yükle'yi tıklayarak geri yükleyebilirsiniz" yazan bir metin satırıyla bana bildirin.

Poka-yoke yaklaşımı, kullanıcı hatalarını tahmin etmenin bir yoludur. Poka-yoke, "anti-hata" anlamına gelen Japonca bir terimdir.

5. Anında Geri Bildirimde Bulunun

Gerçek dünyada çevre bize bir giriş sağlar. Söylediklerimiz başkaları üzerinde bir etkiye sahiptir (genellikle). Bir kedi bizim tırmalamamıza tepki olarak mırıldanır veya tıslar (kötü ruh haline ve kedinin tırmalamasından ne kadar korktuğumuza bağlı olarak).

Çok sık olarak, dijital arayüzler yanıt vermemeye başlıyor ve bu da bizi sayfayı yeniden yüklemek, dizüstü bilgisayarı yeniden başlatmak veya sadece onu ilk kullanılabilir pencereden atmak konusunda şaşırtıyor.

Bir web sitesi 5 saniyeden daha kısa sürede yüklenirse, yükleme süresini uzatacağı için ilerleme çubuğu görüntülemeyin. Bunun yerine, Mac'in klasik "kader makarası" gibi ilerleme içermeyen bir tasarım kullanın. Durum hiç de böyle değil. Sitenizde ilerleme çubukları kullanıyorsanız, daha hızlı yüklenmesini sağlamak için birkaç estetik numara kullanmayı düşünün.

6. Öğelerin Boyutuna ve Yerleşimine Dikkat Edin

Fitts yasası, insan-bilgisayar etkileşiminde (HCI) önemli bir fikirdir ve şunları belirtir:

Bir hedefin mesafesi ve boyutu, onu elde etmek için gereken süreyi etkiler.

Başka bir deyişle, bir şey ne kadar yakın ve/veya büyükse, imlecinizi (veya parmağınızı) üzerine o kadar hızlı yerleştirebilirsiniz. Bunun, web sitesi kullanıcı arabirimi tasarımı ve etkileşim taktikleri için bir dizi etkisi vardır ve bunların en önemlileri şunlardır:

Düğmeleri ve diğer "tıklama hedeflerini" görünür ve tıklanabilir yapın (simgeler ve metin bağlantıları gibi). Bu özellikle yazı tipleriyle, menülerle ve diğer bağlantı listeleriyle uğraşırken önemlidir, çünkü alan eksikliği kullanıcıların sık sık yanlış bağlantılara tıklamasına neden olur.

En popüler etkinlikler için düğmelerin boyutunu ve belirginliğini artırın.

Gezinmeyi, arama çubukları gibi diğer popüler etkileşimli görsel bileşenlerle birlikte ekranın kenarlarına veya köşelerine yerleştirin. Bu son yöntem mantığa aykırı görünebilir, ancak kesinlik ihtiyacını azalttığı için işe yarar: Kullanıcı artık tıklama hedefini kaçırma konusunda endişelenmek zorunda kalmayacak.

Öğe yerleşimini ve boyutunu düşünürken, etkileşim düzeninizi göz önünde bulundurun. Siteniz dikey kaydırma yerine yatay kaydırma gerektiriyorsa, değişikliği müşterilerinize nerede ve nasıl bildireceğinizi düşünmeniz gerekir.

7. Standartlar Söz Konusu Olduğunda Tembel Olmayın

Tasarımcılar, yaratıcılıkları nedeniyle bir şeyleri yeniden tasarlamaya meyillidir, ancak bu her zaman en iyi fikir değildir.

Neden? Niye? İyi bilinen bir etkileşimin veya arayüzün değiştirilmiş bir versiyonu "bilişsel yükü" artırdığından, insanları daha önce hakim olunan bir tekniği yeniden düşünmeye zorlar. Elbette tekerleği istediğiniz kadar yeniden icat etmenize izin verilir, ancak yalnızca tasarımı iyileştirmesi şartıyla.

8. Kullanıcı Arayüzlerinizi Olabildiğince Basit Tutun

Basitlikten bahsederken, insanlar genellikle Harvard psikoloğu George Miller'ın "Sihirli Yedi Numara, Artı veya Eksi İki: Bilgi İşleme Kapasitemizin Bazı Sınırları" adlı çalışmasına atıfta bulunur. Sonuçlara göre, insanlar kısa süreli hafızalarında yalnızca 5 ila 9 şeyi güvenilir bir şekilde tutabilirler. Miller bunu bir tesadüf olarak görmezden geldi, ancak bu, başkalarını bunun hakkında konuşmaktan caydırmıyor gibi görünüyor.

Buna göre, bir şey ne kadar basitse, kısa vadede onu hatırlamanın o kadar kolay olduğu sonucu çıkar. Bu nedenle, bir kullanıcının arayüzünüzü hızlı ve başarılı bir şekilde kullanması için hatırlaması gereken öğe sayısını en aza indirin. Bu, malzemeyi keserek veya küçük, kolayca sindirilebilir parçalara bölerek basitleştirilebilir.

Bu fikir, web sitesi kullanıcı arayüzü tasarımlarının arayüzlerini mümkün olduğunca basit hale getirmesi gerektiğini belirten Tesler'in Karmaşıklığın Korunması Yasası ile uyumludur. Bu, mümkün olduğunda bir uygulamanın karmaşıklığını basit bir arayüzün arkasına gizlemeyi içerebilir. Bu kritere meydan okuyan iyi bilinen bir ürün örneği Microsoft Word'dür.

İnsanların çoğu Word'ü yalnızca birkaç görev için kullanırken (örneğin yazarak), diğerleri ise onu çeşitli etkinlikler için kullanır. Öte yandan, herkes Word'ün aynı sürümü ve aynı kullanıcı arabirimi ile başlar ve uzman bir kullanıcı olmayan ortalama Joe'yu neredeyse hiç kullanmayacağı işlevlerin sayısı karşısında şaşkına çevirir.

Sonuç olarak, gelişmiş işlevselliğin ikincil arabirimlerin arkasına gömüldüğü aşamalı bir açıklama geliştirilmiştir. Kısa metin parçacıkları, ziyaretçileri daha fazla bilgi edinebilecekleri bir web sitesine yönlendirmeden önce bir ürün veya hizmeti tanıtır. Bu, web sitesi ana sayfalarında tipik bir durumdur. (Gezinmenin her zaman zor olduğu mobil tasarım için de harika bir tekniktir.)

Bağlantılarda ve düğmelerde, "daha fazla bilgi" ve benzeri spesifik olmayan terimleri idareli kullanın. Neden? Niye? Çünkü müşterilerin neyi “daha ​​fazla öğreneceği” net değil. İnsanlar genellikle bir web sitesinde onları gitmek istedikleri yere götürecek bir bağlantı ararlar ve 15 kez "daha fazla bilgi edinin" demenin onlara bir faydası olmaz. Bu, özellikle ekran okuyucu kullananlar için geçerlidir.

9. Karar Vermeyi Olabildiğince Basitleştirin

Henüz okumadığımız bloglara abone olmamızı isteyen modallar ortaya çıkıyor. Video geçiş reklamları ilerlememizi durdurarak zamanın nasıl geçtiğini anlamamıza neden oldu. Widget'lardan, açılır pencerelerden veya araç ipuçlarından bahsetmeyelim bile...

Bu, oluşturduğumuz hemen hemen her şeyi etkiler:

• Genel olarak, düzenler
• Gezinme menüleri
• Fiyatlandırma sayfaları mevcuttur.
• Blog dizinleri
• İçerik Akışı

Liste uzayıp gidebilir. Ancak asıl gerçek şu ki, tasarımlarımız ne kadar basit olursa, müşterilerimizin istediğimiz kararları vermesi o kadar hızlı ve kolay oluyor. Bu nedenle, açılış sayfalarında ve bülten dışı e-postalarda yalnızca bir harekete geçirici mesaj bulunmalıdır.

10. Bilgiye Çok Dikkat Edin

Hepimiz tasarımlarımızın yalnızca sanatsal değerlerine göre değerlendirilmesini istesek de, gerçek şu ki, tasarımınızı hedeflerine ulaşmak için optimize etmek de bir o kadar önemli.

Araştırma ve kullanıcı testleri, sitenizin amacına ulaşma konusunda tasarım kararlarınıza rehberlik edebilirken lansmandan sonra toplanan veriler paha biçilmezdir.

Bu nedenle, site analizlerinizi kurun ve bunları düzenli olarak tarayın. Birçok analiz aracı mevcuttur, ancak projenin türüne bağlı olarak Google Analytics ve/veya Mixpanel'i öneririm.

Mixpanel etkinlik odaklıdır ve ziyaretçilerin sitenizde yaptıklarına dayalı olarak veri toplarken, Google Analytics oturum süresi, trafik kaynakları ve diğer veriler gibi verileri toplayarak daha davranışsaldır. Her iki uygulama da her iki türde veri sağlasa da farklı alanlarda mükemmeldir, bu nedenle ihtiyaçlarınıza en uygun olanı seçin.

Bu araçların her ikisi de sınırlı sayıda veri noktası için ücretsizdir. API anahtar değişimi, analitik kurulumunu basitleştirmek için Webflow ve benzer teknolojiler için yaygın bir yoldur.

Kocaeli web tasarım firması adimweb bu konuda temel bilgileri size aktardı, şimdi devam etme zamanı.

Şimdi devam edin ve çekici ve kullanışlı kullanıcı arayüzleri tasarlayın. Ayrıca, internetin vahşi doğasında gördüğünüz web sitesi UI tasarımının en iyi ve en kötü örneklerini yorum olarak bırakmaktan ve yardım gerektiğinde olduğunda Kocaeli web tasarım firması adimweb ile iletişime geçmekten çekinmeyin.

Kocaeli Web Tasarım Firması – Web Tasarım, Yazılım ve Sosyal medya Danışmanlığı

Telefon : 0507 501 85 14

E-Posta : info@adimweb.com