Ana içeriğe geç

Görselleştirmeleri tasarlamada en iyi uygulamalar

Uygulamalarınızı sadeleştirme

Bir uygulamada bulunan çok fazla bilgi, önemli olan şeylerin görünmesini zor hale getirebilir. Günümüzün modern kullanıcı arayüzü stili daha açık, basit ve düz bir tasarım yaklaşımına sahiptir. Basitleştirilmiş bir tasarım, okuyucuya üstü kapalı bir şekilde rehberlik eder ve okuyucuların dikkatinin dağılmamasını sağlar.

Az ama öz

Kullanıcılar çoğu zaman bir uygulamaya çok fazla bilgi dahil etmeye çalışır. Birkaç hesaplamaya sahip çizgi grafikler, kafa karıştırıcı ve yorumlaması zor olabilir. Bu bilgileri sayfaya yaymak için birkaç tane daha küçük görselleştirme oluşturmayı deneyin. Bunun yapılması, yan yana olan görselleştirmelerin kullanıcı tarafından daha verimli bir şekilde kıyaslanmasını ve karşılaştırılmasını da sağlar. Ayrıca, okuyucunun hesaplamalar arasında hızla geçiş yapmasını sağlamak için görselleştirmeyi fazla kalabalıklaştırmadan alternatif boyutlar ve hesaplamalar ekleyebilirsiniz. Daha fazla bilgi için bkz. Görselleştirmenin verilerini değiştirme.

Uygulamanızın estetiğini ve işlevselliğini iyileştirebileceğiniz bir dizi farklı yol bulunur. Kitlenize ve vurgulamak istediğiniz verilere bağlı olarak, görselleştirmenizi tasarlama şekliniz, okuyucunun verileri yorumlamasını ciddi derecede etkileyebilir.

Sınırlarınızı bilin

Görselleştirmelerinizin tüketicileri, sınırlı ekran alanı veya çözünürlüğü ile çalışıyor olabilir. Qlik Sense, bu sınırlamalara yanıt vermek için uyumlu tasarımı kullanır. Ancak ekran alanı veya çözünürlüğü çok sınırlıysa belirli tasarım düzenleri gerekir. Bunlar arasında şunlar yer alabilir:

  • Sütun grafiklerde ve çizgi grafiklerde görüntülenmekte olan verilerin alt kümesi. Boyut değerleri sayısı görselleştirmenin genişliğini aştığında, kaydırma çubuğuna sahip mini bir grafik görüntülenir.
  • Veri filtrelerini seçmek için daraltılmış menüler. Boyut değerleri sayısı, filtre bölmesi için kullanılabilir alanı aştığında menü daraltılır. Uygulama tüketicilerinin, yeni bir bölme açmak için filtre bölmesinin başlığında boyut adına tıklaması gerekir. Yeni bölmede seçimlerini yapabilirler. Ek olarak, sınırlı alan olduğunda boyut adları, filtre bölmesi başlıklarında üç nokta olarak görüntülenebilir. Uygulama tüketicilerinin filtre bölmesinin adını görüntülemek için üç noktaya tıklaması gerekir.
  • Grafik göstergelerinde kısaltılmış adlar. Boyutlar ve hesaplamalar için mevcut alana sığamayacak kadar uzun olan adlar kısaltılır. Kısaltılmış adın sonuna üç nokta eklenir. Uygulama kullanıcıları, fare imlecini kısaltılmış adın üzerine getirerek adın tamamını görüntüleyebilir.
  • Göstergeler, etiketler ve başlıklar eksik.

Uygulama tüketicileri, bu sorunların bazılarını ele almak için görselleştirmeleri genişletebilir. Ancak, uygulamaların kullanılıyor olabileceği cihazlarda uygulamalarınızı test etmenizi öneririz. Firefox ürününde uyumlu tasarım modu gibi çeşitli araçları da test için kullanabilirsiniz (Ctrl + Shift + M). Gerekirse, görselleştirmeleri yeni sayfalara taşıyabilir, görselleştirmelerde gösterilen veri miktarını azaltabilir vb. işlemleri yapabilirsiniz.

Renk erişilebilirliği

Renk görme bozuklukları olan kişiler için renk spektrumu daha dardır. Bu kişiler görselleştirmelerinizi amaçladığınızdan farklı bir şekilde yorumlayabilir.

Örneğin, bazı kişiler kırmızı ve yeşil, daha çok sarı veya kahverengi olarak görünür. Bu kırmızı-yeşil görme bozukluğu en yaygın türdür. Başta finans olmak üzere, veri görselleştirmesinde kırmızının çoğu zaman olumsuz bir çağrışıma sahip olması nedeniyle bu durum önemlidir.

Kırmızı veya yeşil bir KPI durumu kafa karıştırıcı olabilir. Tasarımlarınızı daha erişilebilir kılmak için performans göstergeleri olarak farklı şekiller ve renkler kullanabilirsiniz. Örneğin, kötüyü göstermek için boş bir kırmızı daire, iyiyi göstermek için içi dolu bir yeşil daire ve yalnızca bir KPI durumu kabul edilemez düzeyde olduğunda görünen bir uyarı sembolü olarak bir üçgen kullanın.

Çizgiler, sütunlar ve pasta dilimleri, renkler bozulduğunda ayırt edilmesi güç hale gelebilir.

Daha fazla bilgi için bkz. Görselleştirmenin görünümünü değiştirme.

Filtre ve simge yerleşimi

Filtreler ve simgeler, veri görselleştirmesinin temel bir parçasıdır, ancak bunların nereye yerleştirileceğine ve bunların nasıl sıralanacağına karar vermek zor olabilir. Birkaç oturmuş tasarım ilkesini temel alarak kullanıcının nereden okumaya başlayacağını çoğu zaman tahmin edebilirsiniz.

Sol tarafa yerleşim

Birçok popüler web sitesi, sol taraftaki gezinme kutucuklarını ve filtreleri kullanır. Bu, birçok dilin soldan sağa okunmasından kaynaklanır. Sonuç olarak bu okuyucular ekranın sol tarafına daha fazla bakarlar. Gözleriyle içeriği tarayan kullanıcılar, ekranın sol tarafına yönelme eğilimindedir. Nesneler ne kadar sağ tarafta olursa kullanıcılar bunlara o kadar az bakacaktır. Tüm filtreleriniz ve simgeleriniz dikey bir şekilde sola yığınlanırsa eşit ağırlığa sahip olurlar.

Metnin sağdan sola yazıldığı dillerde ise bunun tersi doğrudur. Uygulamalarınız bu dillere çevriliyorsa bu göz önünde bulundurulmalıdır.

Üst tarafa yerleşim

Simgeler ve filtreler için başka bir yaygın yerleşim seçeneği de uygulamanın üst kısmıdır. Filtreler veya simgeler sola yerleştirilmediğinde dikkat dağıtan menüleri olan daha büyük görselleştirmeler için daha fazla alan sağlanır. Filtreler ve simgeler görselleştirmenin üzerine yerleştirildiğinde, altındaki içerikten de ayrı gibi görünürler. Bu yöntem, filtrelere veya simgelere öncelik verdiğinizi okuyucuya göstermenize yardımcı olabilir. Tüm filtreleriniz ve simgeleriniz üst kısımda yan yana yer alırsa sola en yakın olan daha fazla ağırlığa sahip olur ve buna okuyucu tarafından öncelik verilir.

Daha fazla bilgi için bkz. Sayfaları kullanarak bir uygulamayı yapılandırma.

Bilgi hiyerarşisi

Bazen okuyucu için belirli görselleştirmeleri diğerlerinden daha öncelikli hale getirmek istersiniz. Tasarıma dair birkaç temel en iyi uygulamadan faydalanarak bilgi hiyerarşisini gösterebilirsiniz. Örneğin, bazı görselleştirmeleri vurgulamak için farklı boyutlar kullanabilirsiniz. Daha büyük olan bilgi daha önemli olarak görülür; yazı tipi veya grafik boyutlarını artırarak ilk nereye bakılacağını okuyucuya gösterebilirsiniz.

Bilgi hiyerarşisinde sayfa yerleşiminin de payı vardır. Sayfanın üst kısmındaki bilgiler ilk önce okunduklarından, sayfanın alt kısmındaki bilgilerden daha önemli olarak algılanır. İlk sayfadaki bilgiler, son sayfadaki bilgilerden daha önemli olarak algılanır.

KPI'lara bağlam ekleme

KPI'lar, uygulamanızda bazı büyük fikirleri iletmenin harika bir yoludur. Ancak KPI değerleri, sayılara veya perde arkasında gerçekleşen hesaplamalara hiçbir bağlam sağlamaz. KPI’nın yanındaki yeşil ışık, hedefe çok az ulaşıldığı veya hedefin hayli aşıldığı bilgisini okuyucuya vermez.

KPI'larınıza bağlam getirilmesine yardımcı olmak için, destekleyici bilgileri sağlayan değerin yanına daha küçük bir metin ekleyin. Örneğin, geçerli KPI değerini geçen senenin rakamıyla karşılaştırabilirsiniz. Ayrıca, geçerli eğilim hakkında bilgi sağlamak için eksen veya değer içermeyen küçük bir sütun grafik ekleyebilirsiniz.

Veri görselleştirmede tehlikelerden kaçınma

Veri görselleştirmelerinin avantajlarından faydalanmak için tehlikelerden kaçınmanız gerekir. Bazı yaygın olanlar şunlardır:

Aşırı renk kullanımı

Renk kullanımında aşırıya kaçmayın. Yanlış yerdeki yanlış rengin, aydınlanmadan çok kafa karışıklığına yol açabileceğini unutmayın. Ayrıca aynı renk, dünyanın farklı yerlerinde farklı şeyleri de ifade edebilir.

Pasta grafiklerinin hatalı kullanımı

Pasta grafiklerini karşılaştırmak için yan yana getirmekten kaçının. Bu grafiklere çok fazla bilgi sıkıştırmamaya çalışın.

Görsel karmaşıklık

Çok fazla bilgi, netlik sağlama amacına zarar verir. En fazla dokuz KPI kullanın ve görsel karmaşıklığı giderin.

Stil ve içerik karşılaştırması

Güzel bir görselleştirme, etkili bir görselleştirme olmayabilir. Her zaman en iyi tasarım uygulamalarından yararlanın.

Hatalı veriler

Verilerinizdeki sorunları, verileri sunmadan önce tespit edip düzeltin. Hatalı bilgiler için suçu görselleştirmeye atmayın.

Bu sayfa size yardımcı oldu mu?

Bu sayfa veya içeriği ile ilgili bir sorun; bir yazım hatası, eksik bir adım veya teknik bir hata bulursanız, bize bildirin, düzeltelim!