Sfaturi de navigare LuckyTemplates

În postarea de astăzi pe blog, voi discuta despre cum să creați o experiență de navigare fluidă și fluidă atunci când vizualizați un tablou de bord. Personal tratez navigarea LuckyTemplates ca pe un set complex de diverse butoane cu diferite scopuri și aplicații.

Aceasta este o continuare a seriei mele despre dezvoltarea transparenței rapoartelor. Puteți consulta prima tranșă în care vorbesc despre designul de layout aici .

Cuprins

• Patru tipuri de navigare LuckyTemplates
• Plasare eficientă în navigare
• 3 soluții alternative pentru navigare suplimentară
• Efect de colaps și extindere
• Utilizarea imaginilor personalizate
• Concluzie

Patru tipuri de navigare LuckyTemplates

Există patru tipuri de navigație . Navigarea în panoul principal vă oferă acces la secțiunile sau obiectele principale de analiză. Acesta este tipul de navigare pe care îl veți observa pe această pagină de prezentare specială.

Un exemplu perfect în acest sens ar fi butoanele de navigare care trec paginile de la o analiză a veniturilor la o analiză digitală a cheltuielilor sau o trecere de la o analiză a unei declarații de venit la un raport de date operaționale bazate pe volum.

În plus, puteți utiliza navigarea suplimentară , care vă duce la analize paralele în cadrul aceleiași secțiuni. De exemplu, analizați cheltuielile operaționale în vizualizarea de ansamblu, apoi treceți la o analiză de salarizare sau afișați cheltuielile în funcție de departament.

Este posibil să aveți și butoane suplimentare care schimbă modul de vizualizare a unei anumite date. De exemplu, comutarea între o diagramă cu bare stiva și o vizualizare tabelară sau comutarea între analiza veniturilor după tip sau linie de afaceri la veniturile contractantului sau facturi. Ar putea fi, de asemenea, un buton care vă navighează la aceeași diagramă cu valori diferite.

Cu toate acestea, în majoritatea cazurilor, este mai eficient să abordați astfel de tranziții utilizând formule DAX, cum ar fi funcția sau utilizând parametrii de câmp nou adăugați.

Și, în sfârșit, avem navigare funcțională, care vă oferă un control suplimentar asupra paginilor dvs. de raport, inclusiv funcții precum revenirea la pagina de pornire, revenirea la orice pagină utilizată anterior, resetarea tuturor filtrelor curente și revenirea la starea implicită în ceea ce privește selecția filtrelor. și setări de vizualizare.

Există, de asemenea, navigarea drill-through , care vă permite să detaliați până la un anumit punct sau categorie de date la o altă pagină cu analiză detaliată.

Plasare eficientă în navigare

Toate aceste tipuri de navigare vă ajută să structurați și să localizați eficient panourile de navigare cu butoane în locul potrivit în raport.

După cum puteți vedea pe această pagină, panoul principal de navigare a fost plasat în secțiunea din dreapta sus, din mijloc, a raportului. Aceasta este o plasare de navigare eficientă, deoarece reflectă mișcarea naturală a ochiului de la cele mai importante secțiuni din stânga la diferitele secțiuni din dreapta.

Aceasta este o formă de povestire și permite utilizatorului final să navigheze în mod natural de la stânga la dreapta. Plasarea panoului principal la stânga este, de asemenea, o modalitate excelentă de a vă localiza butoanele principale.

Locația depinde în general de câțiva factori, dar unul dintre aceștia este numărul de secțiuni date din raportul dvs., care determină numărul final de butoane individuale aplicate în panoul de navigare.

Pe această pagină anume, puteți vedea un exemplu de plasare a două tipuri diferite de navigare una lângă alta. Butoanele care servesc diferite destinații vor fi plasate chiar lângă vizualizările specifice pentru a oferi un mesaj ușor de înțeles. Aplicarea acelor butoane va afecta vizualul, dar nu și celelalte.

Dacă ne uităm îndeaproape la panoul de navigare principal, vom observa că într-o anumită pagină de raport, un buton este în modul activ și se distinge vizual de celelalte butoane, care sunt inactive. După cum puteți vedea în dreapta, există câteva setări diferite aplicate diferitelor stări ale butoanelor.

În timp ce setarea și personalizarea navigației este mai importantă decât numerele sau procentele precise pentru anumite state, există câteva reguli generale care, dacă sunt aplicate, pot îmbunătăți considerabil experiența utilizatorului.

Faceți butonul activ să fie cea mai vizibilă parte a panoului de navigare.

Aceasta va depinde de culoarea fundalului care este afișat în spatele butonului.

Încercați să aplicați o umplutură vizibilă împreună cu un chenar deschis dacă utilizați machete mai întunecate. Dacă utilizați un fundal mai deschis, selectați un chenar care se înfășoară vizibil în jurul butonului pentru al distinge de fundalul din jur. Doi pixeli cu chenar funcționează bine în majoritatea cazurilor.

Toate butoanele inactive rămase ar trebui să aibă mai multă umplere de amestecare, ceea ce poate fi obținut prin setarea unui nivel ridicat de transparență.

Culoarea fontului este importantă aici și ar trebui să fie suficient de deschisă pentru a face impresia că nu sunteți încă activ. Dar, în același timp, trebuie să dea impresia că se poate face clic.

Dacă trebuie să întunecăm culorile fonturilor pentru butoanele inactive, acestea vor părea incapabile să navigheze în diferite secțiuni.

După aceea, partea crucială este aplicarea efectului potrivit în timpul stării de hover. Pentru acest caz particular, am folosit un fundal solid într-o schemă de culori albastru-verde și un chenar mai gros pentru a face impresia că butonul este gata de utilizare.

De asemenea, puteți face unele ajustări la tipul și dimensiunea telefonului, cum ar fi să faceți butoanele îngroșate în modul de trecere cu mouse-ul. Cu toate acestea, consider că distrag atenția, așa că adopt aici o abordare mai implicită.

Efectele vizuale atunci când faceți clic pe buton nu sunt un pas crucial, deoarece durata clicului pe buton atunci când navigați către o altă pagină este marginală. Efectul nu este vizibil. Cu toate acestea, setarea dimensiunii fontului să fie puțin mai mică decât dimensiunea implicită în modul de trecere cu mouse-ul funcționează foarte bine.

3 soluții alternative pentru navigare suplimentară

Navigațiile suplimentare sunt folosite pentru a naviga la o analiză similară. Voi evidenția trei moduri diferite de a seta navigarea care este similară cu o aplicație web.

Evident, putem aplica un marcaj implicit sau un navigator de pagină , care este o caracteristică nouă în LuckyTemplates, dar prefer câteva soluții pentru a face acest lucru mai remarcabil.

Prima soluție este să includeți un buton simplist cu instrumentul dublu schimbător. A doua soluție este la fel ca prima opțiune care utilizează două butoane fără margini separate, dar cu o pictogramă suplimentară care indică pagina selectată. A treia opțiune este să folosiți atât butoanele formatate, cât și pictograma care este soluția optimă.

Acum să ne aruncăm în fișierul pbix pentru a vă arăta cum puteți configura cu ușurință o primă soluție simplistă cu comutatoare. Să presupunem că aveți două mese diferite. Veți avea nevoie de două imagini, două butoane separate și două comutatoare.

Deoarece acesta este primul nostru tabel, vom omite comutatorul (care indică alegerea din stânga) și vom ascunde celălalt comutator (care indică alegerea corectă).

Vom muta două obiecte diferite, care sunt imaginile din partea de sus, pentru a avea mai mult control și a ascunde unul dintre ele în acest scenariu.

În al doilea scenariu, vom opri prima masă și vom activa a doua masă. Vom crea un alt marcaj și vom programa acest buton special pentru a naviga la al doilea marcaj.

Acum avem o navigare gata de utilizare pe care o putem folosi pentru a trece de la o vizualizare la alta.

Și acum revenim la prezentarea noastră pentru a vedea o modalitate destul de unică de a încorpora navigarea suplimentară. Ideea principală din spatele aplicației este de a crea un efect de drill-through artificial care funcționează mai degrabă pe baza unor valori, decât pe categorii de date.

Permiteți-mi să vă arăt în practică cât de rapid și eficient putem ajusta vizualizarea raportului în funcție de ceea ce dorim să analizăm de fapt.

Avem aici pagina de rezumat unde putem structura efectiv navigarea. Acest lucru ne oferă posibilitatea de a trece la diferite vederi, în funcție de valorile pe care am dori să le analizăm. Făcând clic pe anteturi, putem schimba vizualizarea particulară.

În ceea ce privește execuția tehnică, putem doar grupa cele patru imagini diferite în funcție de numele anumitor măsuri. În momentul în care facem clic pe marcajul Număr de apeluri , activăm acel marcaj specific și ascundem toate obiectele grupate diferite care nu aparțin Numărului de apeluri .

Și invers, dacă am dori să analizăm timpul mediu de manipulare în minute, putem dezvălui doar această vizualizare specifică și apoi să le ascundem pe toate celelalte.

Apoi avem un exemplu de panou funcțional care oferă utilizatorului final control suplimentar asupra paginilor de raport.

Aceasta include butonul de reîmprospătare , butonul înapoi și butonul de pagină de pornire . După cum puteți vedea, există pictograme în cadrul butoanelor pentru a oferi utilizatorului final senzația de a activa o navigare diferită.

În mod ideal, pictograma ar trebui, de asemenea, schimbată într-o oarecare măsură atunci când treceți cu mouse-ul peste butonul dat. Acest lucru poate fi realizat prin setarea a trei straturi de obiecte. Forme precum dreptunghiuri rotunjite, de exemplu, sunt plasate pe buton, pictogramele sunt plasate în mijloc, iar butoanele sunt plasate deasupra.

Obiectul cel mai de sus (care este butonul) este setat la semi-transparent în stare completă. Face ca obiectul din mijloc (care este pictograma ușor gri) să indice inactivitatea butonului. După trecerea cu mouse-ul, butonul superior al obiectului este setat la complet transparent, ceea ce deblochează aspectul pictogramei originale.

În general, trecem de la un buton cu o pictogramă gri la un buton cu o pictogramă mai deschisă, care pare că a fost activat.

Permiteți-mi să vă arăt cum funcționează această navigare funcțională atunci când utilizați rapoartele LuckyTemplates. De exemplu, am făcut unele alegeri în funcție de anumite filtre. Putem restabili toate informațiile și toate vizualizările la starea implicită cu un singur clic înapoi la starea implicită.

Pe de altă parte, dacă doriți să reveniți la pagina anterioară, puteți utiliza doar al doilea buton pentru a vă ajuta să navigați înapoi la ea.

Și, în sfârșit, dacă doriți să reveniți la pagina de pornire, puteți obține acest lucru făcând clic pe butonul de pagină de pornire.

Efect de colaps și extindere

În ceea ce privește navigarea prin butoane, aș dori să vă prezint încă o aplicație posibilă care poate fi atât eficientă din punct de vedere analitic, cât și utilă în ceea ce privește proiectarea rapoartelor. Vă voi arăta cum butoanele și navigarea pot fi folosite pentru a modifica vizualizările prin declanșarea unui efect de restrângere și extindere.

Vă voi arăta cum puteți aplica efectul de extindere și colaps în unele elemente vizuale, cum ar fi tabele sau diagrame.

Făcând clic pe un buton, puteți vedea că am restrâns parțial tabelul pentru a dezvălui un alt tip de diagramă, care în acest caz particular este graficul cu linii care arată tendințele (diagrama de jos).

Lucrul tare aici este că putem selecta mai mulți contractori și putem obține imediat informații despre venituri și profituri pe graficul cu linii.

Utilizarea imaginilor personalizate

Aș dori să subliniez două elemente vizuale suplimentare care merită menționate. Aceste imagini nu sunt disponibile în panoul vizual LuckyTemplates implicit, dar le puteți descărca oricând de pe piață.

Acestea sunt Chiclet Slicer și Hierarchy Slicer . Dacă preferați să vă concentrați pe aspectele vizuale ale rapoartelor dvs., aceste slicere pot corespunde cu celelalte butoane de navigare, deoarece au o mulțime de opțiuni de formatare în panoul de formatare.

În general, Chiclet Slicer funcționează bine atunci când selectează sau filtrează date categorice sau comută valorile. Puteți seta caracteristici precum marginile rotunjite, puteți utiliza o culoare diferită când treceți cu mouse-ul pe butonul și puteți schimba culoarea fundalului pentru butoanele active și inactive.

Dezavantajele, cu toate acestea, includ incapacitatea de a schimba tipul fontului, nicio opțiune de a avea un buton suplimentar cu toate opțiunile selectate și un timp semnificativ de încărcare în comparație cu slicerele native.

Al doilea, care este Hierarchy Slicer , are, de asemenea, caracteristici excelente, cum ar fi capacitatea de a ajusta culoarea categoriilor activate, ceea ce este foarte util la proiectarea rapoartelor de aspect întunecat.

Principalul dezavantaj, totuși, este acela de a avea doar modul drop-down și timpul semnificativ de încărcare. Cu toate acestea, ambele opțiuni merită testate atunci când creați portofolii, rapoarte demonstrative și rapoarte pentru clienți.

Concluzie

În această postare de blog, am discutat despre diferite soluții pentru navigarea paginilor în rapoartele LuckyTemplates. Navigarea excelentă în rapoartele dvs. este crucială pentru o experiență excelentă pentru utilizator. Sperăm că sfaturile pe care le-am discutat v-au oferit o varietate de moduri de a face acest lucru în LuckyTemplates. 

Vă rugăm să aveți grijă la partea 3 a seriei mele despre dezvoltarea transparenței rapoartelor, unde voi discuta despre importanța DAX.

Toate cele bune,
Gustaw Dudek