it-swarm-tr.com

Simgeler ve metin içeren simgeler ne zaman sadece metin bağlantılarına karşı kullanılır?

Bir web uygulamasında simgelerin metinle simgelere karşı sadece metin bağlantılarının ne zaman kullanılacağına dair herhangi bir kural var mı?

Örneğin:

disk icon

vs.

disk icon save

vs.

save


Ekstra soru: disk icon kaydet -veya- kaydet disk icon Tercih edilir?

172
jmb

Simgeler, eğitim veya deneyim olmadan doğru şekilde yorumlanması çok zor olan etiketler olarak kötü bir şekilde etkisizdir. Çoğu durumda, kullanıcılar doğru metinleri yalnızca simgelerle değil, yalnızca metinle daha iyi öğrenirler. Bakınız: Wiedenbeck, S (1999). Son kullanıcı uygulama programında simge ve etiket kullanımı: Öğrenme ve elde tutma üzerine ampirik bir çalışma. Davranış ve Bilgi Teknolojisi, 18 (2), s68-82.

Simgeler, Fatura veya Teklif gibi soyut herhangi bir şey için özellikle kötüdür, çünkü soyut şeylerin genellikle güçlü bir görsel görüntüsü yoktur (hem Fatura hem de Teklif kağıt belgeler olarak temsil edilebilir, ancak bunları nasıl ayırt edersiniz?). Benzer şekilde, simgeler eylemler için özellikle kötüdür (ör. Kaydet, Yayınla); resimli bir süreci açıkça göstermek zor. Evet, simgeler araç çubuklarında eylemler için her zaman kullanılır, ancak araç çubukları uzmanlar için tasarlanmıştır ve yine de kullanıcılar genellikle onlar tarafından karıştırılır (ortalama olarak, kullanıcılar sadece altı Word araç çubuğu öğesini bilir düzenli olarak sonra iki yıl boyunca Word'ü kullanarak ).

Simgeler, metnin üzerinde, ancak tanıma karşılığında yer tasarrufu sağlayabilir. 16x16 piksel gibi küçük simgeler için, kullanıcıların bir resmin ne olması gerektiğini, hatta resmin neyi temsil etmesi gerektiğini tanıması çok zordur. Tanıdığım bir kullanıcı, kaydetmek için “disk” simgesinin bir TV'nin resmi olduğunu düşündü. (Disketin ne olduğunu bilecek kadar yaşlıydı.) Yıllarca kişisel olarak, Değişiklikleri İzle simgesinin bir çeşit stilize Rosetta Taşı olduğunu düşünerek kullandım. Uzman kullanıcılar bir kontrol seçmek için simge etiketleri yerine araç çubuğu kontrollerinin hafızaya alınmış fiziksel konuma güvenmeyi daha kolay bulur . Daha büyük simgeler (ör. En az 32 x 32 piksel) tanınmaya yardımcı olabilir, ancak çok fazla yer kaplar ve net bir metin etiketi için alanı daha iyi kullanırsınız. Alan sınırlıysa, genellikle kısaltılmış metinleri simgelerden daha iyi kullanırsınız.

Simgeleri doğru yapmak olağanüstü zor. Kapsamlı kullanıcı testi yinelemeleri olmadan yeni bir simge geliştirmeye çalışmayın. O zaman bile başarısız olabilirsiniz. Microsoft tasarımcıları, anahtar kontrollerinde metin etiketlerinden vazgeçip devam etmek öncesinde Outlook’un araç çubuğu için yorumlanabilir simgeler yapmak için her şeyi denedi.

Simge etiketleri de teknik desteği zorlaştırır (örneğin, "Mavi onay işaretli sarı sayfaya tıklayın" ve "" Kabul Et "e tıklayın).

Genel kural olarak, yalnızca aşağıdaki üç koşuldan en az ikisi geçerli olduğunda simgelere izin verilmelidir:

  1. Alan çok sınırlıdır (yani, yalnızca metin için çok küçüktür).

  2. Simgeler standartlaştırılmıştır (örneğin kaydetmek için disket görüntüsü)

  3. Simge, güçlü fiziksel analogu veya görsel özniteliği olan bir nesneyi (örneğin, yazıcı özniteliklerine erişmek için bir yazıcı simgesi veya bir sayfa arka planı kırmızı ayarlamak için kırmızı bir dikdörtgen) temsil eder.

Simgeler için tek başlarına kullanıldıklarında araç ipuçları gerekir, ancak metin etiketleri için zayıf bir alternatiftir. Kullanıcılarınızın bir şeyler için uğraşarak uygulamanızı kullanması gerekmez. Metin etiketlerinin asla grafik araç ipuçlarına ihtiyacı olmaması, metnin simgelerden daha iyi olduğuna dair iyi bir ipucudur.

Alan izin veriyorsa, metinle birleştirilen simgeler en iyisidir. (Sanırım bunu 1980'lerin sonlarından itibaren gösteren araştırmalar vardı, ancak bulamıyorum.) Metin içeren simgelerin seçici kullanımı, bazı öğelerin daha fazla öne çıkmasını veya görsel ilgi yaratmasını sağlıyor. Ayrıca öğelerin taranabilirliğini de artırabilir, ancak iyi metin etiketleri de bunu yapabilir. Kullanıcıların, bir uygulamanın simgeleri gerçekten varsa, performansı gerçekten artırmasalar bile, sübjektif olarak daha kolay olduğunu düşündükleri biliniyor (bkz. Yukarıda Wiedenbeck, 1999).

Genellikle metin etiketinin üstünde veya solundaki simgeyi görürüm. Bunun alternatiflerden doğal olarak daha iyi olduğunu düşünmüyorum, ancak yan yana kontrolleriniz varsa da takip etmeniz gereken bir konudur, böylece kullanıcı hangi metin etiketinin hangi simgeyle gittiğini söylemek için deneyime güvenebilir.

232

Simgelerdeki Neilson/Norman grubundan :

Özet: Bir kullanıcının bir simgeyi anlaması, önceki deneyime dayanır. Çoğu simge için standart kullanım olmadığından, anlamı iletmek ve belirsizliği azaltmak için metin etiketleri gereklidir.

Simgelerin Metin Etiketine İhtiyacı Var

Neredeyse tüm simgelerin karşılaştığı belirsizliğin üstesinden gelmeye yardımcı olmak için, bir simgenin yanında bir metin etiketi bulunmalıdır bu bağlamdaki anlamını netleştirmek için. (Standart bir simge kullanıyor olsanız bile, özellikle estetik tercihlerinize veya kısıtlamalarınıza uyacak şekilde simgeyi biraz değiştirdiyseniz, genellikle bir etiket eklemek daha güvenlidir.)

Simge etiketleri, kullanıcıdan herhangi bir etkileşim olmadan her zaman görünür olmalıdır. Gezinme simgeleri için etiketler özellikle önemlidir. Metin etiketlerini göstermek için imleci kullanmayın: yalnızca etkileşim maliyeti değerini artırmakla kalmaz, aynı zamanda dokunmatik cihazlarda iyi çeviri yapamaz.

sability.gov web sitesi, sitedeki her sayfada Yöntemler, Şablonlar ve Belgeler ve Yönergeler için gezinme simgelerini kullanır [ örnek w/metin & w/o metin ]. Bu makaleyi okuyan her kişiden bana Metodları temsil eden bir simge göndermesini isteseydim, eminim çok çeşitli tasarımlar alacağım. ana sayfa kullanılabilirliği için tasarım yönergeleri yıl önce belirttiğimiz gibi, “navigasyon için bir simge bulmayı düşünmeniz gerekiyorsa, bu kolayca tanınabilir veya sezgisel olmayacaktır. kullanıcılar için. " Sitenin mobil sürümü, bir anlam ifade etmek için metin etiketlerinin simgelere eşlik etmesi gerektiğini kabul ederken, masaüstü sürümü meraklı kullanıcı üzerine gelmeye karar verene kadar bu etiketleri gizler. Bu gezinme öğelerini, kullanıcılar kaydırdıklarında kullanılabilir durumda kalabilmek için sayfanın sol tarafına sabitlemek, kuruluşun önemli ve yararlı olduğuna inandığını gösterir. Ancak, metin etiketlerinin bu simgelerinin çıkarılması onları tamamen anlamsız kılar ve içeriğe kolay erişim sağlama amacına ters etki yapar.

18
KyleMit

Don Norman tarafından yapılan araştırmaya göre, simgeler tek başına en az iyi çalışıyor. Solo metin simgelerden daha iyi çalışır. Ve metin + simgeleri en iyi sonucu verir.

8
Hisham

Yukarıdaki cevaplara ek olarak, yapmam gereken bir nokta var.

Ne tür bir web sitesi?

Web sitesi nadiren kullanılacaksa, simgelerinizi etiketlemeniz gerekir. Ya da yeni kullanıcılar kullanıcı arayüzünü hantal bulabilir.

Web sitesi Gmail gibi sık sık kullanılacaksa, iyi yerleştirilmiş araç ipuçlarına sahip iyi simgeler kullanmaktan daha iyidir salt metin veya salt simge yaklaşımı. Google'ın bu soruyu aştığından eminim, çünkü geçmişte salt metin düğmeleri kullanıyorlardı, ancak şimdi Gmail'de simgeler + araç ipuçları kullanıyorlar. Bu yeni yaklaşım kullanılabilirlikten ödün vermeden temiz bir arayüz sağlar. Photoshop ve Notepad ++ bile benzer bir yaklaşım kullanır.

7
jackandjill

Her ikisini de varsayılan olarak kullanıcı seçsin.

Metin + Simge ilk kez kullanıcının simgeleri öğrenmesine yardımcı olur; ancak uygulamayı daha fazla kullandığından, kullanıcı simgeye alışacak ve metne artık ihtiyaç duymayacaktır. Simgelerin ne anlama geldiğini öğrendikten sonra, gereksiz Metin yerine daha büyük bir çalışma alanını tercih ederdi.

5
Lie Ryan

İlk olarak, bir kullanıcı arayüzü tasarladığınızda kullanılabilirlik ilkelerini (tutarlılık, uygunluk, vb.) Dikkate almanız gerekir. Affordance ana kavramlardan biridir ve arayüzünüzün sezgisel olması gerektiği anlamına gelir. Örneğin, simgeleriniz, Michael'ın kaydetme simgesi için yukarıda belirtilen örnek gibi aşağıdaki eylemin anlamı ile ilişkili olmalıdır. Bazı simgeler de standartlaştırılmıştır ve anlamını yeniden kullanabilirsiniz. Mesele şu ki, yalnızca araç çubukları vb. İçin simgeler kullanırsanız, simgenin anlamı ifade edecek kadar iyi olmaması durumunda araç ipucunu kullanmanız gerekir, ancak simgeleriniz yeterince izin veriyorsa bir etikete ihtiyaç duymazlar. araç ipucu yeterli olabilir.

Her durumda, sisteminiz belirli bir sistem için olduğunda ve simgeler tasarlamanız gerektiğinde simgeler tasarlamak zordur. Bu durumda, bazı tasarımlar önerebilir ve kullanıcılarla değerlendirebilirsiniz. Kullanıcının sisteminiz, görsel arayüzler ve simgeler hakkında ne düşündüğünü bilmek faydalı olabilir. Ayrıca gerçek testinizden bir gün sonra kullanıcıların simgelerinizi, anlamınızı veya simgelerinizi ya da sorduğunuz eylemi bulabilecekleri olası alanları hatırlayıp hatırlamadığını değerlendirmeye çalışarak tekrar hatırlanabilir bir test yapabilirsiniz. Ayrıca, simgeler için birden fazla tasarımınız varsa bir anket yardımcı olabilir.

Öte yandan, etiketi koymanız gerekirse simgenin altındaki etiketin daha iyi olduğunu düşünüyorum: [icon] [label]

Unutmayın, “Bir ağaçlandırma, bir nesnenin nasıl kullanılacağını açıkça ortaya koyan bir yönüdür. Kullanıcı arabirimi ekranlarında, uygunluk oluşturan özellikler genellikle görseldir. .. "Rosson, M. B. & Carroll, J. M. (2002) Kullanılabilirlik Mühendisliği, Morgan Kaufmann.

Ya da belki zamanınız varsa ... bunu okuyabilirsiniz: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf

Tasarım işlemi sırasında uygunluğu düşündüyseniz, belki etiketler gerekli değildir ve sadece araç ipucunu kullanırsanız, aksi takdirde simgelerin altındaki etiketleri düşünebilir ve kullanıcılarla değerlendirilecek daha fazla tasarım değerlendirebilir veya önerebilirsiniz (çok fazla değil) son kullanıcılarla test edilebilecek sürüme kadar başlangıçta meslektaş olun.

5
user1982

Mevcut trend Sistemin, sistem yönelimli terimlerden ziyade, kullanıcının dilini, kelimelere, kelime öbeklerine ve kullanıcıya tanıdık gelen kavramlarla konuşması gerekir. Bilginin doğal ve mantıklı bir sırayla görünmesini sağlayarak gerçek dünyadaki sözleşmeleri takip edin. İngilizce kullandığınızda harfleri daima sağ tarafta tutun. çünkü belli ki ikonlar ana cazibe merkezi olacak. Bu nedenle, kullanıcılar öndeki harfleri yoksayabilir.

örneğin iTunes- Medya kitaplığınızı içeren bir kitaplık olarak düzenlenmiştir: müzik, filmler, şovlar, sesli kitaplar. Kütüphanenin altında, Kütüphanenize koymak için daha fazla medya satın alabileceğiniz Mağaza bulunur.

enter image description here

ve Google palet tasarımı ve windows 2D döşemeleri gibi son trendler için simgeler önerir. ancak bir hızlı fareyle üzerine gelme araç ucu. iyi şanslar.

4
Miller

Tüm soruları okuduktan ve katılıyorum sonra ekstra bir bakış açısı eklemek istiyorum.

Simgeleri göstermeye karar vermeden önce, simgeleri göstermeyin, metnin etrafına metin ekleyin, metin eklemeyin, bazı soruları yanıtlamanız gerekir:

  • Simgeleri nereye eklemeyi düşünüyorsunuz?
  • Neden ikonlara ihtiyacınız var?
  • Bu simgeleri kim kullanacak?
  • Kullanıcılar tarafından simgeler/içerik/eylem hakkında bilgi nedir?
  • Bunun için simgeler kullanmak yaygın mıdır?
  • Kullanıcı etkileşimini kolaylaştıracak mısınız?

Ve bu soruları cevaplamak için bazı noktaları göz önünde bulundurmalısınız:

  • İnsanlar her gün, her zaman akıllı telefon kullanıyor ve Facebook, Youtube, Google, What's App, Instagram ve diğerleri gibi en ünlü simgelerin insanların bileceğini garanti etmek için bir etiket göstermeleri gerekiyor.

enter image description here

  • Word/Google Dokümanlar, metinsiz simgeleri başarıyla kullanıyor çünkü yıllardır aynı ve herkes zaten ne olduğunu biliyor, ancak farenin üzerinde bile, simgeyi açıklamak için bir metin gösteriyor.

enter image description here

  • Farklı coğrafi bölgeler simgenizi farklı anlayabilir. Örneğin İngiltere'de e-ticaret sepetini kullanmak daha yaygındır ve aksi takdirde ABD'de araba sepeti vardır. Bölgesel dil etkisi nedeniyle oluyor.

  • Karmaşık simgeler, yanlış anlama nedeniyle dönüşümünüzü durdurabilir.

enter image description here

Ve ödünç aldığım iyi bir karşılaştırmaya bakabilirsin Smashing Magazine .

enter image description here

Tüm cevapları göz önünde bulundurarak, vakaların% 90'ında bir simgeyle metin kullanacağım ve metnin konumu tasarım konseptinize ve kullanıcının bunları bağlaması kolay olup olmadığına bağlıdır.

Ve her zaman yorumlarımda söylediğim gibi, burada hiçbir şey kesinlikle doğrudur, test etmeli, web sitenizdeki/uygulamanızdaki kullanıcılarınız için karşılaştırmalısınız.

2
Rafael Perozin

Bu kullanıcılara bağlı olacaktır. Kullanılabilirlik açısından, hem simge hem de metne sahip olmak, simgelerin makul bir popülasyon tarafından kabul edilmesi koşuluyla, geri çağırma üzerinde tanınmayı izleyen daha iyi sonuçlar verir. Sadece simgeye sahip olmak, sembolik glifler için geçerlidir - küresel olarak anlaşılabilir olanlar. Yalnızca metin, öğeler isteğe bağlı olduğunda ve bunları temsil eden tanınabilir gliflere sahip olmadığında en uygunudur. Bu tür öğeler için, yalnızca metne sahip olmak belki de en iyisidir. Ancak, kullanılan isimlendirme uygun kullanım için test edilmelidir.

2
Kernan Kobaya