Kullanıcılarınızın odağını nasıl yönetebilirsiniz?
Tasarladığınız deneyim ister bir web sitesi ya da uygulama için, ister bir fiziksel ürün için olsun, dikkate almanız gereken en önemli şey, kullanıcınızın onun için tasarladığınız senaryolara bağlı kalarak amacına ulaşabilmesi olmalı. Peki kullanıcınıza sunduğunuz arabirim karmaşık işlevler içeriyorsa, kullanıcınızın dikkatinin dağılmamasını nasıl sağlayabilirsiniz? Bu yazımızda kullanıcı arabirimlerinin dikkat dağıtıcı virüsüne, context-shifting’e ve arabirimlerimizde bunu önlemenin yollarına değinmek istedik.
Tasarladığınız deneyim ister bir web sitesi ya da uygulama için, ister bir fiziksel ürün için olsun, dikkate almanız gereken en önemli şey, kullanıcınızın onun için tasarladığınız senaryolara bağlı kalarak amacına ulaşabilmesi olmalı. Peki kullanıcınıza sunduğunuz arabirim karmaşık işlevler içeriyorsa, kullanıcınızın dikkatinin dağılmamasını nasıl sağlayabilirsiniz?
Bu yazımızda kullanıcı arabirimlerinin dikkat dağıtıcı virüsüne, context-shifting’e ve arabirimlerimizde bunu önlemenin yollarına değinmek istedik.
Context-shifting nedir?
Context-shifting (bağlam değişimi) kavramını ansiklopedik bir tanım yerine bir örnekle açıklamak en verimli yol olacak sanırım. Bir arkadaşınızla sohbet ederken başka bir arkadaşınızın birden, sizi umursamadan size başka şeyler söylediğini; siz iş yerinizde bir görev üzerinde çalışırken daha elinizdeki görev bitmeden size yeni görevler atandığını ya da bir web sitesinde makale okurken birden karşınıza çıkan reklam ya da abonelik pencerelerini düşünün. Her biri odağınızı dağıtacak, kısa bir süre için bile olsa o sırada zihninizde olan şeylerin bir anda uçup gitmesine neden olacak ve verimliliğinizi azaltacaktır ve bu gayet “normal”. Çünkü beynimiz, art arda gelen bu taleplerin hepsini karşılayacak şekilde tasarlanmadı.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Peki bu, kullanıcı deneyimine nasıl zarar veriyor?
Kullanıcılarımızın çoğu yeni bir arabirimle karşılaştıklarında içten içe dehşete düşer ve öncelikle bu arabirimin nelerden oluştuğunu “anlamaya” çalışırlar. Bu süreci kısaltabilmek için, tasarladığımız arabirimlerde onların zaten bilmekte ve tanımakta oldukları bileşenleri kullanmayı seçer, böylece “kendilerini evlerinde hissetmelerini sağlamaya” çalışırız. Bunun yerine kullanıcılarımıza beklemedikleri ya da kolayca tanımlayamadıkları arabirimler sunarsak, örneğin öğelerin yerlerini ya da içeriklerini etkileşime bağlı olarak değiştirirsek ve en önemlisi bu değişikliklerin neden gerçekleştiğini kullanıcılarımıza iyi anlatamazsak, kullanıcılarımız bu arabirimi tanımadıklarını hissedecek ve bu arabirimin akıcı bir deneyim sunmadığını düşünerek daha fazla mücadele etmeyeceklerdir.
Bu riski nasıl azaltabiliriz?
Arabirimler ve arabirim öğelerinin “durum”ları (state), etkileşim süresince elbette değişiklik gösterebilir fakat arabirimin görünümü kadar davranışları da, kullanıcıya sunduğumuz deneyimin karakterini oluşturur. Bu karakter ise paternlerden ve anti-paternlerden oluşur ve kullanıcının ona sunduğumuz arabirimi deneme-yanılma metodlarına başvurmadan, sezgisel olarak “tanımasını” mümkün kılar.
Bu patern ve anti-paternleri tasarlamak, kullanıcı deneyiminin DNA’sını tasarlamaktan farklı değildir. Bilgilendirmeler, destekleyiciler, yardımcı öğeler, kullanıcı aksiyonları, sistem geri bildirimleri gibi birçok bileşen bu DNA’yı oluşturur. Aşağıda paylaşacağımız birkaç yaklaşım, tutarlı ve karakterli bir kullanıcı deneyimi DNA’sı tasarlamak için yardımcı olabilir. Elbette tek şartla; abartmadan. Zira herhangi bir unsur ya da yaklaşımın abartılı kullanılması, kullanıcıda “sağlıksız” bir deneyim izlenimi bırakabilir ve tereddütlerinin artmasına yol açabilir.
Belirme, ortaya çıkma ve başkalaşım (morph)
Kullanıcının karşısına birden çıkan modal pencerelerle kullanıcıyı istediğimiz bilgiye ya da etkileşime yönlendirebilmemizi sağlar, ama bu genellikle kullanıcının o sırada içinde bulunduğu deneyimden kopmasına ve ilgisinin dağılmasına neden olur. Kullanıcının görüntülemekte olduğu arabirimi ve modal pencerenin görüntülendiği görünümü birer durum (state) olarak ele alalım; eğer bu iki durum arasındaki geçiş ani şekilde gerçekleşirse bu kullanıcıda olumsuz bir etki oluşturabilir. Fakat eğer bu iki durum arasındaki geçişi kullanıcının görebilmesini ve algılayabilmesini mümkün kılarsak, bu artık kullanıcı için beklenen bir değişimdir ve kullanıcı, bu dönüşümü tanımlayabilir.
Modal pencereleri genişleterek, büyüterek ya da bir kart gibi kendi etrafında döndürerek ortaya çıkarmak, kullanıcının algı bariyerini aşmamızda büyük bir kolaylık sağlayacaktır. Buna benzer dönüşümler sadece modal pencerelerde değil, durumunu değiştiren tüm arabirim öğelerinde benzer şekilde olumlu bir sonuç doğurabilir.
Bu tarz animasyonların UX ile ilgisi için Val Head’in A List Apart’ta yayınladığı makalesini okuyabilirsiniz.
Bu durum değişiklikleri için bir diğer teknik de morph tekniğidir. Bir elementin bir durumdan diğerine dönüşümünü kullanıcı için kolayca anlaşılabilir hale getirerek, odak dağılmalarını azaltabilir ve kullanıcıya rehberlik edebiliriz.
Yukarıdakilerin devamı için Transformicons web sitesine göz atabilirsiniz.
Başkalaşım ve dönüşüm bir arada ve art arda kullanıldığında kolay algılanabilen bir arabirimin kapılarını aralamakta bize yardımcı olabilir.
İzolasyon
Kullanıcı arabiriminiz ne kadar sade ya da temiz olursa olsun, kullanıcılarınız arabirim öğelerinize tamamen odaklanamayabilir ve arabirim öğelerini ayrıştıramayabilir. Gözlerimiz, Saccade adı verilen bir fenomenle hareket ederek görüntülenmekte olan arabirimin bir haritasını çıkarırken arabirimin bir bölümüne odaklanabilir. Arabirimdeki öğeleri kullanıcılarımız için taranabilir ve ayrıştırılabilir hale getirmek, kullanıcılarımızın bu arabirimi sezgisel olarak daha kolayca kullanmalarını mümkün hale getirebilir.
Aşağıdaki örnekte öğelerin üzerine gelerek neden bahsettiğimizi daha iyi anlayabilirsiniz:
Öğelerin bir kısmını gizleyerek, öğelerden birini ortaya çıkarmak mümkün. Fakat bir öğeyi izole etmek yerine tüm öğeleri görüntülemeyi, ancak bir kısmını vurgulamayı isteyebiliriz. Bu durumda, ister stil ister davranış farklılıklarıyla ya da bu ikisini bir arada değerlendirdiğimiz karakteristik farklılıklarla öğeleri diğerlerinden ayrıştırabiliriz.
Anahtar renkler seçerek bunların arabirimimizde öne çıkmasını sağlayabilir, ya da sadece hareket ve davranış farklılıklarıyla bazı öğelere ya da işlevlere farklı karakterler tanımlayabiliriz. Arabirimimizdeki öğelerin farklı sarı tonlarında olduğunu düşünelim; bu durumda kırmızı renkli bir buton diğerlerinden daha fark edilir olacaktır. Bu durum, hareket tasarımı için de geçerli.
Bütün öğelerin doğrusal bir ivmeyle hareket ettiği bir arabirimde, bir uyarıyı zıplama (bounce) ivmesiyle hareket ettirerek diğer öğelerden öne çıkmasını sağlayabiliriz.
Kullanıcıdan bazı öğeleri seçmesini istediğimizi düşünelim. Bunun için standart seçim kutuları (checkbox’lar) kullanabiliriz; böylece kullanıcı, seçtiği öğelerin yanındaki işaretleri görerek etkileşimine yönelik geri bildirim alabilir. Bir de bu etkileşimi biraz daha zenginleştirerek ele alalım. Kullanıcının seçtiği öğeleri sürüklediğini ve onun için tanımlanan alana bıraktığını, işlemini tamamladığında ise arabirimin animatik bir geri bildirim verdiğini hayal edelim. Hangisi daha akıcı ve zengin?
Kullanıcı deneyiminde sağlıklı ve tutarlı bir bağlam değişimi oluşturmak için tek çözüm animasyonlardan faydalanmak değil. Animasyonlardan yararlansanız da yararlanmasanız da, iyi hesaplanmış öğe yerleşimleriyle sağlıklı bir akış sağlamak mümkün. Bunun en basit yolu, birbiriyle akışsal açıdan bağlantılı olan elementleri birbirine yakın konumlandırmak. Peki, bu sandığınız kadar basit mi?
Birçok linkten, görselden, veri girişi alanından oluşan ve kullanıcıya aynı anda birkaç olası akış sunan bir arabirimde bu yöntemi hayata geçirmek her zaman çok kolay olmayabilir. Bunu sağlayabilmek için arabirimin kendisine değil, deneyimin özünü oluşturan hikayeye ve hedeflere odaklanmakta fayda var. Bu hikayeyi tasarlayabilmek için, hikaye haritalarından (Story Map’ler) yararlanmak verimli olabilir. Daha sonrasında verimli ve amaca uygun bir görsel hiyerarşi oluşturmak için Fitts Kanunu’nu dikkate almakta fayda var.
Yardımcı belirteçler
Sağlıklı bağlam akışları oluşturmak için bu yöntemler yeterli olmayabilir. Arabirimde ya da arabirim öğelerindeki durum değişimlerini; bir değişiklik olduğunu ya da bir değişikliğin gerçekleşeceğini görsel ipuçlarıyla belirtmek kullanıcının deneyim kalitesini artırabilir. Gelin bu durumlara bazı örnekler verelim:
Bir dropdown menüde yapılan seçimin arabirimdeki diğer elementlerin durumunu değiştirmesi
İçeriğin yükleniyor olma durumu
Bir butonun basılması
Bir kullanıcı girişi işleminin başarısız olması
Bir formun gönderilmekte olma durumu
Bir verinin kaydediliyor olma durumu
Bu tarz durum değişiklikleri olduğunda devasa bildirimlere gerek olmayabilir, ama kullanıcıyı bu durumlar hakkında bilgilendirmek her zaman faydalı olacaktır.
Kullanıcılarımızla iletişim kurmamızı sağlayan araçlar sadece sözcüklerden, görsellerden ya da seslerden ibaret değil. Onlara sözcüklere ihtiyaç duymadan da birşeyler anlatmamız ve onları davranışsal olarak yönlendirmemiz gerekiyor.
Bunu sağlayabilmek için yukarıdaki tekniklere ek olarak birçok yeni çözüm yaklaşımı geliştirebileceğinizden eminiz fakat burada dikkat edilmesi gereken şey her zaman olduğu gibi denge; ne çok fazla, ne çok az.
