web-gelistirme-sc.com

StackExchange sitelerinin sağ sütununda etiketler tarafından kullanılan alan nasıl optimize edilir?

StackExchange UI sitesi neye benzemesi gerektiği hakkında bu meta sor , ben site için bir tasarım üzerinde çalışıyorum (okuma: ile uğraşmak). Sayfanın CSS'sini düzenlemek için web tabanlı bir araç kullanıyorum, bu da beni sunucu tarafından oluşturulan HTML ile sınırlarken bir şeyleri değiştirmek için çok fazla özgürlük veriyor.

Bir şeyleri değiştirirken ve yeniden düzenlerken (çoğunlukla tipografi ve görsel ağırlık gibi öğeler) hemen hemen her StackExchange web sitesinde gösterildiği gibi sağ sütunun oldukça verimsiz olduğunu fark ettim. Meta sitede şöyle görünür:

How the tags look on beta sites

Etiketler (ve altındaki rozetler), dikey olarak yataydan daha büyük uzunluktaki küçük nesnelerdir. Her birinin birkaç özelliği vardır:

  • Nesnenin adı
  • Etiketin verildiği veya rozetin atandığı sayı
  • Nesne kavramını güçlendiren görsel bir unsur
  • Adın uzunluğuna bağlı olarak farklı yatay genişlik

İşlerin organize edilme şekli artık çok verimsiz geliyor:

  • Her etiket/rozet, tüm yatay genişliğe ihtiyaç duymasa da, bir satır yer kaplar.
  • Bu sayfadaki etiket ve rozet görsel temsili yetersizdir. Etiketler ve rozetler, örneğin bir soru üzerindeki bir etiket veya bir üye profilindeki bir rozet tarafından kendi başlarına görüntülenecek şekilde tasarlanırken, bu durumlarda meta verilere eşlik eder: etiketin uygulanma sayısı veya üye rozeti verilir. Ancak görsel sunum hala genel bir uygulama olduğunu varsayar.
  • Çoğu StackExchange sitesinde, bu öğelerin kenarlıkları vardır, bu da bir satırda otururken her öğe arasında çok fazla olumsuz boşluk yaratır.

benim yeniden tasarımım Bu görsel gürültüyü azaltmak için etiketlerin gücünü azaltmaya özen gösterdim (henüz rozetlerle mücadele etmedim), ancak etiketleri temsil etmek için iyi bir yol bulamadım henüz uygulanma sayısı ile kombinasyon halinde. Bazı fikirlerim vardı, ama hiçbiri doğru hissetmiyor:

  • Bunları bir etiket bulutunda oluşturun. Bu daha yatay ve daha az dikey alan kullanır. Ancak, etiket bulutları çoğunlukla taranabilir ve okunaklı değildir. Bu bir sorun olsa emin değilim.
  • Etiketin uygulama sayısı ile birleşimi için yeni bir görsel temsili düşünün. Belki sayıya etikete ekleyerek: <tartışma] x14 <tartışma | 14] olur. Veya etiket elemanının yüksekliğini artırarak ve adının altına "14" koyarak. Bu, genel olarak daha fazla dikey yer kaplar, ancak her satırda birkaç etikete izin verir.
  • Belirli sayıda uygulamaya yapılan başvuruyu kaldırın ve bunun yerine, kaç kez uygulandığını belirtmek için görsel bir metafor kullanın. Belki bir termometre paleti kullanarak: "sıcak" etiketler daha kırmızı, soğuk olanlar daha mavi olabilir. Bu yeni kullanıcılar için hemen belli olmaz.
  • Belirli sayıda uygulamaya yapılan referansı kaldırın ve bunun yerine sıcaklığı belirtmek için genişlik kullanın. Bir etiket ne kadar genişse (sağ sütunda) o kadar popüler olur. Ancak yukarıdaki gibi, bu başlangıçta biraz kafa karıştırıcı olacaktır.

Soru zamanı: Yalnızca CSS'yi değiştirebildiğim ve kurcalayamadığım için, etiketlerin ve rozetlerin sağ sütunda görüntülenme şeklini yeniden tasarlamanın etkili bir yolu ne olabilir? HTML?

8
Rahul

Çaba için Kudos - çok Güzel!

Sonunda liste hakkında birkaç yorumum var:

  • Şahsen etiket bulutlarının çok kullanışlı olmadığını hissediyorum.
    Elemanlar arasındaki düzen net değil, hangisinin daha büyük olduğunu görmek her zaman kolay değil ve etiketlerin ne kadar sıralandığını bilmiyorsunuz.
  • İkinci önerinize gelince, küçük bir iyileşme yaşayabilirim, ancak doğru da hissetmiyorsunuz - Genişliği kullanın, ancak etiketi daha geniş yapmayın - onları toplayın!
    Yani. her örnek için her etiketin sağında bir "gölge" göstermeniz yeterlidir.
    alt text
    Doğal olarak bir sınır koyacaksınız ve 10'un üzerinde herhangi bir şey üç noktaya sahip olacak (...)
    İsterseniz, görünümlerin sayısını yığının üzerine dahil edebilirsiniz, ancak yığın oluşturabilir.
7
Dan Barak

Belki yazı tipi boyutu ağırlıklı veya yazı tipi rengi yaklaşımını kullanın?


(kaynak: ljplus.r )

4
Kostya

Bu sitedeki göz korkutucu etiket listesinin bilinçaltı olarak beni bu kadar uzun tutarak korkutmasını önlediğini düşünüyorum. Sanırım hepsini görmek için bir seçenekle ilk on ile sınırlandırın, kullanıcının hızlı bir şekilde taramasını ve birkaç saniye içinde neler olduğunu görmesini sağlar.

Ayrıca, etiketlerin nasıl sıralandığını asla anlayamadım. Bana öyle geliyor ki, yenilikten ziyade sağdaki sayılara göre sıralanıyorlar. Bu nedenle, sayıları sola hareket ettirmek ve onları (sayılar) sağa hizalamak, bunların sıralandığını kesinleştirir. Tekrarlayan "x" işaretini ve her etiketin etrafındaki grafiği kaldırmak listenin dağınıklığını azaltır ve taranabilirliği artırır.

Ayrıca, etiketlerin bağlantılar gibi görünmesi, tıklanabilir olduğunu ve sizi başka bir sayfaya götüreceğini gösterir.

enter image description here

4
Denzo

Birkaç fikir, spark diğer hazır fikirler) her şeyden daha fazla:

  • Kaydırıcı (etiket panelleri art arda girip çıkıyor)
  • Etiketlerin hisse senedi
  • Statik etiket şeması
  • Etkileşimli etiket şeması
  • Digg Labs adresindeki görselleştirmelere benzer bir şey.
0
Virtuosi Media