Kullanıcı Deneyimi (UX) Tasarım, Kullanılabilirlik, İnsan Arayüz Tasarımı ve İnsan Merkezli Tasarım – bunlar giderek karşı karşıya olduğumuz terimlerden sadece birkaçı. Ama nedir bu? Neden özellikle kullanılabilirlik ve bir web tasarımcısı olarak kullanıcı deneyimi ilgi olmalıdır? Ve nasıl ux ekleyebilirsiniz bile ekibinizde bir UX tasarımcısı yok?
Benim son makalede uyumlu web tasarımı Sana kendi tasarım kurallarını nasıl oluşturabileceğinizi gösterdim. Ancak, harmonik web tasarımı çeşitli faktörler ile karakterizedir - bu yüzden bugün kullanıcı deneyimi suçlama kulüpler:
Neden UX ile ilgileneyim ki?
Birçok türk Tanıdığım tasarımcılar iletişim tasarımında güçlü bir geçmişe sahiptirler, bu yüzden yazılı medya yönünden gelirler. Burada, kesin bir mesaj sunan karmaşık kompozisyonlar oluşturulur.
Baskı tasarımında, iletişim yolu açıktır: bir verici (örneğin, bir poster veya broşür) ve bir alıcı (ortamın hedeflediği) vardır. Alıcının, iletiyi almaktan, anlamaktan ve sonra bir (satın alma) kararı almaktan başka yapacak başka bir şeyi yoktur.
Web tasarımı, diğer taraftan, interaktif: sadece bir mesaj buraya gönderilir, ama daha ziyade bir konuşma oluşturulur.
Kullanıcı Deneyimi: kullanıcı deneyimi
İnternetin başlangıcından bu yana, şirketler bu etkileşimlerin psikolojik yönleri ile ilgilendiler. O zaman, ancak, UX tasarımcıları hiçbir söz vardı, ama insan etkileşim tasarımcıları - ve meslek genellikle çok daha az bugün daha yaygındı.
Kullanıcı Deneyimi Nedir?
Bugünün standardına göre Kullanıcı Deneyimi, bir web sitesini ziyaret ettiğinizde başlamaz ve siteyi terk etmeyi bırakmaz. Bunun yerine, bir kullanıcının marka veya ürünle olan tüm deneyimini ilk temastan son temasa kadar açıklar.
Ancak, ben doğrudan bir web sitesi ile ilgili alt alan kendimi sınırlamak istiyorum: kullanılabilirlik. Bu nedenle ürünümüz den en az mümkün olduğunca keyifli ve sorunsuz bir şekilde geçilmelidir. Ancak, bütçeyi ve şirketin iç gereksinimlerini göz ardı etmemelisiniz.
İyi kullanılabilirlik satış rakamlarınızı önemli ölçüde etkilemez. Beni kişisel olarak harekete geçiren şey, bir web sitesi operatörü olarak kullanıcıyı hayal kırıklığına uğratmamaktır.
Uygun Fiyatlı, İşaretçiler ve Geri Bildirim
Basitçe söylemek gerekirse, Affordance genellikle mümkün ne açıklar. Örnek olarak bir masaüstü ekranı kullanmak, "tıklatma" seçeneği olacaktır. Eğer web sitesinde herhangi bir yerde gelişigüzel tıklamak zorunda olsaydı boş ve sinir bozucu olurdu bu yana, biz işaretçiler (göstergeler) yükleyin. Bunlar kullanıcıya bir şeyin nerede ve ne olduğunu gösterir.
En ünlü tabelalardan biri bir düğmedir. Etkileşim yüzeyini sınırlar. Buraya tıklarsak bir şeyler olacağını biliyoruz. Bu genellikle hover etkileri ile güçlendirilmiş - ya da imleç bir işaret parmağı ne zaman üzerinde gezinmek dönüşür. Bunlar da işaretçi.
Ne Affordances, Signifiers ve Geribildirim nelerdir?
Göze gelebilen genellikle etkileşimin mümkün olduğunu açıklar. İşaretçiler (göstergeler) etkileşimin mümkün olduğunu işaret eder. Geri bildirim, diğer taraftan, kullanıcının etkileşiminin bir şeyi tetiklediğini bilmesini sağlar.
Düğmenin etkin durumu, üzerine tıkladığımda bir şey olduğunu geri bildirim olarak gösterir. Her üç süreç de birleşir ve web sitenizin en başından itibaren temel sorular olarak daha kullanıcı dostu hale getirmenize yardımcı olabilir.
- Hangi etkileşimler genellikle mümkündür?
- Kullanıcılarıma bunların mümkün olduğunu nasıl gösterebilirim?
- "Doğru şeyi" yaptıklarını nereden biliyorlar?
Etkileşim yeteneği genellikle web sayfasına erişen aygıt tarafından tanımlanır: (standart) bir masaüstü bilgisayarda, kaydırma ve dokunma mümkün değildir, mobil cihazlarda gezinme etkisi yoktur.
Bu tam olarak ne işaret seçerken dikkate alınması gereken şeydir. Örneğin, bağlantılar sadece fare ile üzerlerinde gezinirken netleşir mi? Sonra bir mobil ziyaretçi etkileşim hiç mümkün olduğunu fark etmez.
Kullanıcılar fiziksel ve dijital olarak etkileşim
Uygun fiyatlı ve signifiers da web sitesi arayüzü ötesine gidebilirsiniz. Ziyaretçiniz dış koşullardan etkilenebilir veya belirli etkileşimleri başlangıçta amaçlanandan farklı şekilde kullanabilir. Örneğin, tarayıcının arka düğmesi web sitenizin dışında bulunan bir gerçektir.
Ziyaretçi yanlışlıkla sayfanızın istediğinizi bulamadığı bir bölüme gezindiyse, sayfanızdaki bağlantılar yerine arka düğmeyi kullanarak gezinmeleri olasıdır.
Etkileşimler kasıtlı olarak "yanlış" nasıl kullanılır - bir örnek
Sayfaları varsayılan olarak Almanca veya İngilizce olarak görüntülenmeyen yabancı bir servis sağlayıcı aracılığıyla sık sık uçuş rezervasyonu yaptırıyorum. Aniden, mobil sürümü üzerinden dil ayarlarını bulamadı. Ancak, ben zaten her şey standart İngilizce modunda görüntülendi uygulama üzerinden web sitesine eriştiğimi hatırladı. O zamandan beri, ben sadece "app" dolambaçlı üzerinden mobil web sitesine eriştik, çünkü bu hatırlıyorum ve ben hayal kırıklığı içinde bir mobil sayfada etrafında tıklamak için daha fazla iki tıklama yapmayı tercih çünkü.
Ancak, kullanıcılarınızı "yeniden eğitemeyeceğinizin" de farkında olmalısınız. Bu tür "yanlış" uygulamalardan kurtulamazsınız, ancak bu davranışı planlayabilir ve yeterli alternatif olduğundan emin olabilirsiniz.
Zaten her birimiz için baş ağrısı neden olan bir başka iyi örnek ne yazık ki hala yaygın olan modası geçmiş tarayıcılar veya Internet Explorer, kullanımıdır. Bazı mizanpajlar, örneğin Firefox veya Chrome'daki kadar yaratıcı olarak değerli görünmez. Bu can sıkıcı olsa bile, biz de tasarım ve bu kullanıcılar için program var.
Örneğin, sayfaya uygulama üzerinden erişmek ten veya arka düğmeyi kullanmaktan daha kötü olduğundan, sayfa ziyaretçisinin tamamen vazgeçmesidir – sitemizi kullanmak çok fazla hayal kırıklığı yarattığı ndan veya hata işlemeye çok az alternatif olduğu için.
Neden Kullanılabilirlik Testi?
Bu arada, bu tür davranışları gözlemleyerek bulmak en iyisidir. Web sitesini kim test ederse nispeten önemsizdir. Aslında daha sonra siteyi kullanan insanlar bulmak için gerekli değildir. Çünkü gerçekten brüt kullanılabilirlik hataları hemen hemen her kullanıcı ile oluşur.
Önemli olan test edene ne yapacağını ya da nereye varacağını söyleyememektir. Anahtar belirlemek ve web sitenizi daha kullanıcı dostu hale getirmek için potansiyel engelleri ve komplikasyonları kaydetmektir. Konuya ne kadar az söylerseniz, sonuç o kadar katkısız hale gelen bir sonuçtur.
4 farklı gösterge
Etkileşimleri vurgulamak için sayfanıza hangi sinyalleri koyabilirsiniz? Size kısaca sunduğum dört farklı kategoriyi ayırt ediyoruz.
1. Açık İşaretci
Açık işaretçiler metin biçiminde "Buraya Tıklayın" gibi bir istemden oluşur. Bunlar genellikle kişi formları veya düğmeler gibi diğer göstergelerle birlikte bulunur. Bunlar mümkün olduğunca açık ve kısa olmalıdır. Buna ek olarak, bir tanıdık formülasyonlar başvurmak ve sözde yaratıcı formülasyonlar ile dağıtmak gerekir.
Tanıma değeri, kullanıcının bir etkileşim sırasında ne gibi bir sonuç bekleyebileceğini neredeyse kesin olarak bilmesini sağlar.
"DAHA FAZLABAK" basit bir açık belirtici bir örnektir.
2. Tasarım Desenleri: Desenler ve Konvansiyonlar
Tasarım desenleri, artık herhangi bir açıklamaya ya da başka bir bildirime ihtiyaç duymadıkları için alıştıklarımız için yinelenen tasarımlardır. Nispeten çok var.
Örneğin, herkes logoya tıklamanın dizin sayfasına geri döneceğinin farkında olabilir. Ya da mavi altı çizili metin bir bağlantıdır. Bugün kullandığımız bir web sitesinin navigasyon çubuğu da böyle bir fenomendir. Onları bir tarafta belirli yerlerde bekliyoruz. Nav Bar'ın içeriğimiz olarak hizmet verdiğini ve web sitesi aracılığıyla bize rehberlik ettiğini biliyoruz. Mobil cihazlarda Hamburger simgesine dönüşen bir menü çubuğunun da başka bir açıklamaya ihtiyacı yoktur.
Son birkaç yılda öğrendiğimiz ortak kalıplar
Şaşırtıcı şey bu desenler de genellikle uluslararası olmasıdır. Dilini bilmediğiniz bir sayfada kendinizi yönlendirmek istiyorsanız, bunu özellikle iyi görebilirsiniz. Yani tekerleği yeniden icat etmemeye değer. Bunun yerine, yerleşik kalıplarla uğraşırken sitenizin daha iyi kullanılabilirliği önerilir.
Bu açıkça Moskova'da bir (rasgele seçilmiş) restoran bir sayfa örneğinde görülebilir. Ne Rusça konuşabilsem ne de Kiril okuyabilsem de, sayfada nasıl gezinebileceğimi hemen görebiliyorum. Hangi navigasyon noktasında olduğumu görüyorum ve en önemli bilgileri (iletişim) hemen filtreleyebiliyorum.
3. Gizli Signifier
Bunlar yalnızca gezinme ve kaydırma gibi belirli bir eylem aracılığıyla görülebilir.
Gizli işaretçiler, düzeni temiz ve düzenli hale getirme avantajına sahiptir. Böylece tasarımınızı daha ince yapabilirsiniz.
Ancak, onlar da bazı dezavantajları var. Bunlar yalnızca kullanıcı tarafından var olduklarını bildiklerinde veya yanlışlıkla tetikleyici etkileşimi gerçekleştirdiklerinde bulunur. Bu nedenle, bu sinyaller önemli için değil, en fazla ikincil eylem çağrıları (eylemlere çağrı) için uygundur.
Ayrıca, gizli işaretçiler kullanırken, her aygıt için ayrı bir çözüm bulunması gerekebileceğini unutmayın.
Pinterest tarafından iyi bir örnek verilmiştir:
Masaüstü sürümünde, gezinme yaparken yeni çağrı eylemleri görüntülenir. Kullanıcı, koleksiyonuna eklemek için görüntüyü sezgisel olarak tıklattığından, özelliğin algılanmamış olması olası değildir. Yine de, tasarımcılar bir B planı geliştirdik: Eğer görüntüye tıklarsanız tüm olası etkileşimlerin görülebilen büyük bir görünüme gelirsiniz.
Dokunmatik ekran sürümünde her şeyi çözmek için nasıl ilginç. Yine, gizli etkileşimler vardır - ama diğer amaçlar için.
Soldaki resimde sayfanın genel genel görünümünü görebilirsiniz. Aşağıdaki menü yalnızca kullanıcı yukarı kaydırıldığında girer – ilk başta yabancı gibi görünse de çok sezgiseldir. Navigasyonu aradığımızda, genellikle yukarı kaydırılırız.
Ancak, masaüstü sürümünde olduğu gibi ek eylemler çağrısı yalnızca resmi gerçekten tıklattığınızda kullanılabilir. Böylece, artık gizli anlamına erdiriciler vardır.
Ancak beni şaşırtan, Pinterest'in iki sürümde aynı etkileşim için iki farklı simge kullanmasıydı. Kullanılabilirlik açısından bakıldığında, bunun tavsiye edilir olduğunu sanmıyorum. Kullanıcı cep telefonundan masaüstü sürümüne veya tam tersi değişirse, aynı simgelerin kullanılması daha hızlı başa çıkabilmenizi sağlar. Bu kullanımı daha pürüzsüz hale getirir. Kullanılabilirlik böylece olumlu artırılır.
4. Mecazi İşaretci
Arama alanının burada olduğunu gösteren büyüteç. İleti göndermeyi temsil eden zarf. Üzerine basabileceğinizi gösteren düğme. Tüm prensiplerin ortak noktaları vardır ki onları gerçek dünyadan tanıyoruz.
Dijital dünyada onların kullanışlılığı bir tasarım deseni haline gelmiştir. Ancak, dikkatli olmak zorunda: Değiştirilmiş bir simge ile mecazi bir gösterge kullanıyorsanız, bu kullanıcılarınızın kafasını karıştırabilir.
Örneğin, tanınmış zarf yerine bir posta kutusu kullanırsanız, web sitenizin kullanılabilirliğine zarar verebilir. Neden? Kullanıcı duraklatmalı ve bir sonraki adımı göz önünde bulundurmalıdır. Bu sembolün başarmak istediği şeye uygun olup olmadığını sorgulamalı.
Sonuç
Kullanılabilirlik sadece ziyaretçilerinizin bir şekilde site üzerinden kendi yolunu bulacaksınız anlamına gelmez. Kullanılabilirlik burada odak bütünsel ziyaretçi üzerinde olduğu anlamına gelir - sizin tarafınızda "yolculuk" mümkün olduğunca sorunsuz olmalıdır.
Her kesinti - kullanıcı duraklatmak ve kendine sormak için her zaman , "Aslında burada sunulan nedir? Üzerine tıkladığımda ne olur? Geri gelecek miyim? Neredeyim ben? Buraya nasıl geldim?"
Bir sitenin kesintiye uğramaması için bir site inşa etmek mümkün mü? Muhtemelen hayır. Sunulan bilgilere bağlı olarak, bazı kesintiler, hedeflenen yansıma ve hafif hayal kırıklığı bile arzu edilebilir.
Kendi projeniz için uygun şekilde kullanabilmeniz için farklı araçları bilmek önemlidir.
Önerilen okuma
Kullanılabilirlik ile ilgili en ünlü kitaplardan biri "Beni düşündürme!" Steve Krug tarafından. Başlık burada program ve sonuçta ne her kullanılabilirlik yaklaşımı hakkında.
- "Don't Make Me Think, Revisited: Web Kullanılabilirlik için Bir Sağduyu Yaklaşım," Steve Krug
- "Günlük Şeylerin Tasarımı," Donald A. Norman
- https://www.uxpin.com/ ücretsiz indirmek için bazı çok ilginç e-kitap sunuyor