Sifter traieste de peste sapte ani si se apropie rapid de opt. In acea perioada, am consumat-o pentru caini, am ascultat feedback-ul clientilor si intrebari, am sapat in valorile de afaceri si de utilizare, precum si analize despre site-ul nostru de ajutor. Combinate, aceasta a furnizat o cantitate incredibila de informatii despre locul in care Sifter s-a scurtat. Acum facem cateva imbunatatiri pentru a rezolva aceste deficiente si vreau sa impartasesc sincer ceea ce au fost si sa aratam cum le abordam.
Nimic din cariera mea nu m-a ajutat sa cresc in calitate de designer mai mult decat sa sustin in prim-plan pentru propria mea lucrare de proiectare.
Un lucru este sigur. Nimic din cariera mea nu m-a ajutat sa cresc in calitate de designer mai mult decat sa sustin in prim-plan pentru propria mea lucrare de design. Cu Sifter, am facut si invatat din mai multe greseli decat mi-ar placea sa recunosc si, pe masura ce incepem sa abordam acele greseli, speram ca aceasta partajare ii poate ajuta pe altii sa evite aceste greseli.
O previzualizare rapida
Voi incepe cu cateva capturi de ecran previzualizate ale paginilor cheie din Sifter. Acestea vor ajuta la furnizarea de context pe masura ce revizuim greselile si modificarile rezultate din iteratiile anterioare. In timp ce modificarile au loc in Sifter, examinarea paginilor de detaliere a listelor si a problemelor ofera o idee destul de buna despre diferenta. 1 & 2
Cea mai mare parte a fost concentrata pe navigare si notificari, dar am facut si alte cateva imbunatatiri, cum ar fi atributele de problema lipicioase, astfel incat sa puteti vedea intotdeauna starea actuala a problemei, indiferent cat de mult in jos a paginii pe care ati defilat-o. 3
1 Pe langa antet, am eficientizat si alte cateva elemente ale designului. Sortirile grupate includ acum numarul de probleme din grup. Filtrele si sortarile sunt mai prietenoase HiDPI si sunt putin mai putin ocupate vizual, astfel incat este mai usor sa vezi ce este selectat dintr-o singura privire. 2 Cea mai mare schimbare cu pagina de detalii a problemei este tonifierea barei de stare, astfel incat fila selectata sa fie legata de pagina. Acest lucru ne permite, de asemenea, sa migram datele de stare in bara laterala cu toate celelalte metadate, astfel incat acestea sa fie localizate central. Butonul follow / unfollow a fost, de asemenea, mutat intr-o locatie mai pragmatica. 3Dupa ce starea problemei a migrat la sectiunea atribute de problema, intreaga sectiune defileaza de asemenea cu dvs. astfel incat, chiar si pentru probleme deosebit de lungi, puteti vedea intotdeauna detaliile privind starea curenta a problemei, fara a fi nevoie sa derulati inapoi in partea de sus. Acest lucru poate fi deosebit de util la comentarii.
Un lucru pe care il puteti observa este gradul in care aceste actualizari ar trebui sa se simta familiare in ciuda imbunatatirilor semnificative ale utilizabilitatii. Vrem sa imbunatatim Sifter fara sa fortam pe toata lumea sa reinnoiasca interfata aplicatiei. Daca exista alte lectii pe care le-am invatat de-a lungul anilor, este faptul ca chiar si modificari modeste ale interfetei unei aplicatii pot afecta drastic productivitatea oamenilor. Schimbarea prea mult prea drastic la un moment dat, indiferent de cat de bune ar parea imbunatatirile, va rani invariabil unii clienti. Deci, in general, este mai bine sa lucrezi spre evolutie, mai degraba decat spre revolutie.
Deci, ce a fost gresit?
Putine persoane, daca exista, va vor solicita vreodata sa va facilitati utilizarea aplicatiei. Daca este dificil de utilizat, pur si simplu merg mai departe. Si, daca utilizabilitatea unei aplicatii aluneca in timp, nu este imediat evident. Este un fel de moarte cu o mie de compromisuri. De-a lungul anilor, am devenit atat de prins sa ma concentrez pe caracteristicile tangibile pe care oamenii le-au solicitat, ca nu am reusit sa petrec timp pe partile din Sifter unde stiam ca lucrurile nu merg bine, dar nu am avut feedback explicit pentru clienti care sa justifice timpul de a face. schimbarile.
Schimbarea prea mult prea drastic la un moment dat, indiferent de cat de bune ar parea imbunatatirile, va rani invariabil unii clienti. Deci, in general, este mai bine sa lucrezi spre evolutie, mai degraba decat spre revolutie.
In cele din urma, am dat deoparte ceva timp pentru a remedia zonele Sifter unde am simtit ca lucrurile au devenit mai putin impresionante. Aceste ajustari se bazeaza pe anumite preferinte personale, dar si din ascultarea mesajelor care stau la baza acestora atunci cand vorbesc cu clientii. In loc sa aratati pur si simplu ce este nou, s-a considerat ca cea mai buna explicatie este sa impartasiti actualizarile in contextul greselilor care au determinat modificarile.
Greseala nr. 1: reducerea prea mare
Am incercat sa reduc amprenta vizuala a antetului pentru a permite mai mult accentul pe continut. In timp ce nu incercam in mod special sa-l reduc, am incercat sa simplific navigarea pentru a crea mai mult accent pe continut. Baiatul a facut focul acela. Acest lucru a dus la compromisuri in etichetare, navigatie si ierarhie structurala. Amprenta antetului a fost redusa, dar la fel a fost utilizabilitatea acesteia. 4
4 In timp ce versiunea cu cereale de lemn nu a vazut niciodata lumina zilei (mai multe despre asta mai tarziu) pe masura ce a trecut timpul, imi lipsea padurea pentru copaci si ma concentram pe minimizare si reducere in detrimentul utilizabilitatii. Cu noul antet, remediem asta. Daca priviti cu atentie, intr-un fel noul antet este, intr-o oarecare masura, mai asemanator cu abordarea noastra initiala.
Greseala 2: Lipsa Ierarhiei si a contextului
Un element care a fost consecvent pe parcursul acestor iteratii este plasarea aproximativa a proiectului si numele companiei care va arata cu ce proiect lucrati in prezent. 5 Din pacate, la fel de important ca acest element este definirea contextului paginii, chiar si modificari subtile ale amplasarii sale pot confunda problema, mai degraba decat clarificarea acesteia.
5 Un element consecvent care a fost cheie pe tot parcursul este numele proiectului si al companiei care defineste domeniul de aplicare al locatiei dvs. actuale, facandu-va sa stiti ce proiect vizionati. In timp ce locatia a fost destul de constanta, ultima iteratie a mutat-o intr-o locatie mai putin decat perfecta.
Este subtil, dar relatia obiectului proiectului cu celelalte elemente din antet a devenit mai putin evidenta. Acest lucru a fost agravat de doua lucruri. In primul rand, comutatorul de proiect si navigarea proiectului au avut aproximativ aceeasi pondere vizuala. In al doilea rand, linia orizontala din antet a grupat vizual comutatorul de proiect cu navigarea globala. 6
6 Din greseala principala cu cea mai recenta iteratie a fost crearea unei divizari orizontale in antet, care a facut ca legatura dintre domeniul de aplicare al proiectului si navigarea proiectului sa fie mai putin clara din punct de vedere vizual.
Deoarece toate elementele din antet aveau aceeasi greutate vizuala, nu exista o ierarhie mica. Nu conta daca oamenii foloseau linkurile „Setari proiect” doar o data pe luna. Este la fel de mare. De fapt mai mare, avand in vedere ca are mai multe litere si cuvinte. Acest lucru a creat zgomot vizual. Cu noul antet, setarile proiectului sunt clar corelate cu proiectul si au scazut semnificatia si dimensiunea vizuala, fiind inca disponibile.
Putine persoane, daca exista, va vor solicita vreodata sa va facilitati utilizarea aplicatiei. Daca este dificil de utilizat, pur si simplu merg mai departe.
Unul dintre cele mai mari sacrificii inainte de aceasta noua actualizare a fost pierderea contextului in care va aflati la nivel global in cadrul aplicatiei. Pentru a-l incurca, am venit cu acest concept al „Reveniti la proiecte si probleme” cand a trebuit sa va gestionati contul, profilul sau utilizatorii. Acest context important redus va ajuta sa stiti unde va aflati in aplicatie. 7
7 Proiectarea antica a antetului a fost elaborata cu accent pe cazul de utilizare primara in care exista un proiect care sa defineasca sfera de aplicare. Cu toate acestea, atunci cand ati navigat in alte domenii precum profilul, contul sau conducerea echipei, acel element cheie de design a disparut si a dus la un „hack” al unei solutii.
Cand nu ai fost in sfera de aplicare a unui proiect sau a tuturor proiectelor, nu aveam elemente de navigare relevante pentru a le pune acolo. Daca as fi fost cu adevarat atenta, as fi recunoscut acest lucru ca un semn ca mergem intr-o directie gresita. In schimb, m-am dublat in jos si s-au prins de legatura de retur. 8
8 Initial, navigarea globala care organiza domeniile principale ale aplicatiei a furnizat un context unificat. „Tabloul de bord” ar fi trebuit sa fie numit „Proiecte si probleme” si a fost corectat scurt inainte ca antetul sa fie redus si mai mult. Cu noul antet, am revenit la o abordare similara pentru organizarea aplicatiei.
Greseala 3: Gruparea vizuala slaba
Unul dintre cele mai bune exemple de solicitari de asistenta care expun probleme a fost frecventa cu care oamenii erau ingrijorati de faptul ca Sifter nu a oferit o modalitate de a grupa utilizatorii in companii sau organizatii. Legatura „Companie noua” a fost diferita, dar a fost pusa pe partea dreapta si nu atat de evidenta pe cat ar putea fi. Am corectat temporar acest lucru adaugand un link destul de obtuziv si neplacut la „Adaugati o noua companie sau organizatie…” chiar in partea de sus a paginii, astfel incat sa nu poata lipsi. 9
9 Odata ce am aflat ca legatura „Compania noua” nu era suficient de evidenta, am trecut peste piraterie intr-o solutie temporara. Noul antet reorganizeaza lucrurile putin si recunoaste care elemente sunt cele mai importante pentru oameni.
Este posibil sa observati, de asemenea, trecerea de la „Companie” la „Organizare” pentru terminologie. Aceasta schimbare a fost facuta pentru a sustine faptul ca nu toate grupurile de persoane sunt companii tehnice. Multe dintre acestea sunt „non-profit”, pentru care cuvantul companie se simte penibil. Mai mult, unii clienti ii folosesc ca departamente sau echipe. In momentul acestei scrieri, sunt inca tentat sa folosesc cuvantul „Grup” in locul organizarii, dar ma tem ca este prea casual si nu face suficient de clar faptul ca diviziunile sunt semnificative. Vom vedea.
Greseala nr. 4: Lipsa variatiei si ponderarea slaba
Pe langa greseala de a face antetul mai mic, am redus si variatia. Rezultatul a fost o incercare de a proiecta antetul in jurul domeniului de aplicare al proiectului, deoarece a fost elementul cheie de navigare si de gasire a modului. Incercand sa economisesc spatiu, am redus starea de navigare selectata la cea mai mica diferenta efectiva. 10 Adica, articolele selectate au fost facute pur si simplu in bold. Acest lucru poate functiona in unele cazuri, dar efectul a fost prea subtil si a scazut zona de clic perceput. (Mai multe despre asta mai tarziu.)
10 Cu cea mai timpurie abordare, a fost intotdeauna foarte clar care sunt elementele de navigare active. Acest lucru v-a ajutat sa intelegeti unde va aflati in aplicatie. Urmatoarea iteratie a incercat sa reduca greutatea vizuala a antetului, dar a facut ca aceste elemente sa fie prea subtile. Cu cea mai recenta iteratie, cantitatea de variatie ajuta la comunicarea ierarhiei si a starii active cu o cantitate mai potrivita de contrast.
In aceeasi linie, o alta greseala subtila a fost tratarea legaturii „Setari de proiect” ca doar o alta legatura de navigare primara, in ciuda faptului ca nu a fost accesata nicaieri aproape de alte link-uri principale de navigatie. 11 Cu noul antet, legatura cu setarile proiectului devine una dintre putinele pictograme din antet.
11 In ciuda faptului ca a fost accesat mult mai rar, link-ul „Setari proiect” a primit un tratament vizual egal ca celelalte legaturi din navigarea proiectului. Cu noul design de navigatie, i se ofera o greutate si un tratament mai naturale si mai adecvate pentru a ajuta la diferentierea acesteia, fara a o face sa iasa in evidenta prea mult.
Trecerea de la „Setari proiect” la o simpla pictograma de viteza indeplineste mai multe obiective:
- Pictograma economiseste spatiu, deoarece angrenajul este o pictograma destul de universal acceptata pentru a reprezenta setarile.
- Dimensiunea mai mica faciliteaza plasarea legaturii mai aproape de numele proiectului, facandu-l mai intuitiv.
- Diferenteaza vizual setarile proiectului de celelalte elemente mai des utilizate.
Iteratiile anterioare au dus la un antet mai mic, dar mai putin intuitiv, si am ramas cu el prea mult timp. Putini oameni trimit vreodata feedback de design vizual, dar acordand o atentie deosebita solicitarilor de asistenta pentru clienti si analizand statisticile pentru documentele noastre de ajutor, precum si traficul si utilizarea acestora, greselile au devenit vizibile. Navigarea si antetul nu s-au corelat bine cu modelele de utilizare si modelele mentale ale oamenilor. Aceste schimbari subtile, dar importante, toate se reunesc pentru a face navigarea mult mai usoara si mai rapida.
Greseala nr. 5: Arhitectura clunky Information
O alta greseala de lunga durata a fost separarea „profilului” si „contului”. 12 Profilul este axat pe informatii personale, cum ar fi numele, parola si e-mailul, in timp ce zona contului se refera la facturare si gestionarea contului. Singura distinctie reala este aceea ca gestionarea contului este disponibila numai titularului contului, iar aceasta a fost distinctia initiala care a condus separarea.
Aceasta distinctie conteaza pentru noi intern, dar nu este important pentru clienti. Linkurile sau filele sunt prezente sau nu. Unificarea tuturor setarilor si a optiunilor administrative posibile intr-o singura zona face ca gestionarea profilului si a contului sa fie mult mai usoara si face o treaba mai buna de a expune toate optiunile disponibile.
porno .ro http://saudades.com/__media__/js/netsoltrademark.php?d=adult66.net/
categori porno http://vetspets.com/__media__/js/netsoltrademark.php?d=adult66.net/
filme porno cu nemtoaice http://www.evantodd.com/__media__/js/netsoltrademark.php?d=adult66.net/
classic porno http://davidshawphoto.com/__media__/js/netsoltrademark.php?d=adult66.net/filme-porno/amatori
family porno tube http://www.ajstutzinc.net/__media__/js/netsoltrademark.php?d=adult66.net/filme-porno/anal
alina plugaru porno http://keyconstruction.net/__media__/js/netsoltrademark.php?d=adult66.net/filme-porno/asiatice
porno clasic http://uslandsforsale.com/__media__/js/netsoltrademark.php?d=adult66.net/filme-porno/beeg
porno mature cu tineri http://icbill.com/__media__/js/netsoltrademark.php?d=adult66.net/filme-porno/blonde
grup porno http://spiralbrushes.org/__media__/js/netsoltrademark.php?d=adult66.net/filme-porno/brazzers
türk ifşa porno http://emc2group.com/__media__/js/netsoltrademark.php?d=adult66.net/filme-porno/brunete
filme porno noi cu eleve http://isadoctoronboard.com/__media__/js/netsoltrademark.php?d=adult66.net/filme-porno/chaturbate
porno gay romania http://kisscatalog.biz/__media__/js/netsoltrademark.php?d=adult66.net/tanara-studenta-este-fututa-de-2-colegi-de-facultate
porno romanesc vechi http://interswiss.info/__media__/js/netsoltrademark.php?d=adult66.net/o-prostituata-frumoasa-face-sex-pe-bani
el nino porno http://www.barchartspublishing.net/__media__/js/netsoltrademark.php?d=adult66.net/ii-baga-pula-adanc-in-fund-sex-anal
porno for her http://www.shineforchrist.org/__media__/js/netsoltrademark.php?d=adult66.net/tipa-cu-curul-mare-este-fututa-in-anus-de-iubitul-ei
filme online porno romanesti http://tangophone.com/__media__/js/netsoltrademark.php?d=adult66.net/o-fute-de-ziua-ei-a-implinit-18-ani-si-face-gang-bang
loredana groza porno http://funflag.com/__media__/js/netsoltrademark.php?d=adult66.net/cuplu-de-amatori-se-filmeaza-in-timp-de-fac-sex
porno lenjerie intima http://dgpinc.net/__media__/js/netsoltrademark.php?d=adult66.net/blonda-miniona-violata-de-vecinul-ei
filme/porno http://landersbrothersautogroup.net/__media__/js/netsoltrademark.php?d=adult66.net/ii-place-sa-calareasca-pula-are-16-ani-si-se-fute-in-draci
young porno http://nurturingwellness.com/__media__/js/netsoltrademark.php?d=adult66.net/ia-pula-intre-sani-si-o-freaca-pana-iese-slobozul
12 Initial, „Profil” si „Cont” au fost separate doar pentru ca aveau un nivel de permis diferit pentru acces, dar, pe masura ce a trecut timpul, a devenit clar ca aceasta a fost o distinctie irelevanta pentru clientii nostri. Noua abordare le unifica intr-o singura zona „Contul dvs.” si afiseaza / ascunde filele relevante din acea zona pe baza rolului utilizatorului.
Cu capacitatea de a crea probleme prin e-mail, notificarile noastre de gestionare a respingerilor si intentioneaza sa ne extindem optiunile de notificare, structura existenta a fost prea rigida. In mod similar, de-a lungul timpului, am extins optiunile pentru accesarea datelor dvs. Asadar, a fost necesar sa cream o locatie centrala pentru rezumarea optiunilor dvs. pentru exportul de date. Unificarea contului si a profilului face mai usor unificarea informatiilor conexe, in timp ce inca puteti ajusta optiunile disponibile pe baza rolurilor utilizatorului. Cu aceasta schimbare subtila, nimeni nu trebuie sa se intrebe daca doreste sa verifice sub profil sau cont si putem extinde si imbunatati mai usor zonele individuale fara a coplesi o singura zona.
Greseala # 6: Tiny Tiny
In retrospectiva, ar fi trebuit sa fie imediat evident cat de mici au devenit tintele de clic pentru navigarea primara. Acesta este jenant de evident in urma, deoarece a fost o frustrare obisnuita a mea. Dar, indiferent de motiv, am trecut cu vederea.
Cu noul antet, nu numai ca elementele cele mai importante sunt mai mari din punct de vedere vizual decat alte elemente din apropiere, dar si zona de clic asociata este crescuta. Si, facand un pas mai departe, exista un spatiu alb sporit intre elementele disparate pentru a ajuta la minimizarea clicurilor accidentale.13
13 Cu noul antet, tintele de clic sunt diferite noaptea si ziua. Nu numai ca tintele sunt mai mari, dar exista mai mult spatiu sigur intre diferite tinte pentru a evita orice clic accidental pe elementele gresite.
Greseala nr. 7: Iconografia inutila
Undeva pe parcurs, m-am indragostit de icoane. In profunzime, stiam mai bine decat sa simplificam pictogramele aici si acolo, si totusi, asta am facut. Icoanele sunt foarte bune pentru diferentierea sau consolidarea, dar le-am folosit mai degraba ca o carja de design decat ca un element util.
Intrucat toate elementele de navigare au sfarsit sa fie aproximativ la aceeasi dimensiune si greutate, am decis sa adaug ceva pentru a ajuta legaturile globale sa iasa in evidenta in felul lor. Asadar, in loc sa imbunatatesc navigarea, acum subliniam linkurile cel mai putin utilizate in intregul antet. 14
14 S-ar putea sa credeti ca stiu mai bine decat sa stropiti cu icoane pentru a sublinia cea mai putin folosita portiune de navigare, dar ati gresit. Am fost atat de concentrat pe reducerea amprentei, incat am rezolvat o problema de arhitectura informaton prin adaugarea de mai mult zgomot vizual, decat sa ma adresez organizatiei de baza.
De parca nu ar fi fost suficient de rau, in timp ce am inceput sa explorez idei pentru aceasta noua versiune de navigare, am petrecut o perioada incredibila de timp jucandu-ma cu o abordare care a mers si mai departe cu icoane pana la proiectarea unei structuri de navigatie cu carne mister cu un mic bob de lemn minunat. 15
15 In ciuda faptului ca stiu foarte bine ca pictogramele fara etichete reprezinta o practica inerenta proasta 99% din timp, tot am petrecut mult timp explorand ideea doar in scopul reducerii amprentei navigatiei in Sifter.
Daca nu as fi impartasit acea munca cu nimeni, probabil as fi continuat fara sa intru prea adanc in gaura iepurelui. Totusi, pentru ca a fost un fel de distractiv, l-am impartasit, iar receptia catre machete a fost foarte pozitiva. Desigur, cu machetele, nimeni nu incearca sa foloseasca si sa interactioneze cu designul. Comenteaza doar artfulness, asa ca habar nu aveau cat de dureroasa ar fi fost sa o foloseasca. Stiam asta, dar m-am indepartat cu gandul ca il pot face sa functioneze.
Cu cat am explorat aceasta abordare, cu atat mi-am dat seama ca era mai draguta decat functionala si in cele din urma am trecut mai departe. De cand m-am indepartat de aceasta abordare, am dat peste mai multe aplicatii care folosesc o abordare similara si, desi destul de usor de privit, au fost frustrati si confuzi pentru a-mi aminti ca navigarea misterioasa a carnii nu este niciodata o abordare buna.
Cu noul antet, atat greutatea tipografica cat si locatia fizica ajuta la consolidarea scopului elementelor de navigatie globala, in timp ce etichetarea imbunatatita reduce nevoia de iconografie. Icoanele sunt intotdeauna cele mai bune atunci cand sunt utilizate in mod prudent.
Concluzie
Nu pot sa spun suficient, dar nimic nu mi-a imbunatatit constientizarea si empatia in calitate de proiectant mai mult decat sa acorde asistenta clientilor de prim rang pentru munca mea. Chiar si atunci cand un client nu ofera feedback direct despre ceva, frecventa unei intrebari date sau situatii cu clientii confuzi vorbeste despre volumul in care am gresit. Help Scout 1 a fost uriasa in ceea ce priveste aceste informatii. 16
16 Pe langa cererile de asistenta, care furnizeaza feedback explicit pentru clienti si analize de trafic care ajuta la afisarea paginilor care sunt cele mai active, una dintre celelalte arme secrete a fost raportul „Docs” din Help Scout care ne permite sa vedem ce termeni cauta oamenii. in cadrul site-ului nostru de ajutor. Deci, de exemplu, daca vedem ca oamenii cauta frecvent „Cum adaug un utilizator?”, Atunci stim ca trebuie sa o facem mai evidenta.
Desi aceasta actualizare a ajuns sa fie mult mai departe decat ne-am anticipat, atunci cand privesti cu adevarat lucrurile, nu este la fel de drastica cum pare la prima vedere. Unele elemente s-au schimbat putin. Aproape totul a fost eficientizat. Dar peste tot, ar trebui sa se simta foarte familiar. Mai bine. Aceasta metoda de abordare a imbunatatirilor ca evolutie, mai degraba decat revolutie ne ajuta sa imbunatatim viata pentru clienti, reducand in acelasi timp sarcina utilizarii unei noi interfete.
Gata pentru mai mult? In articolul urmator, vom explora actualizarile la notificarile si alertele Sifter si ne vom scufunda in imbunatatirile si deciziile de proiectare care stau la baza acestor modificari.
- Help Scout este fantastic si nu-l pot recomanda suficient. Raportarea este utila, dar este doar o scadere a galetii in ceea ce priveste impactul asupra capacitatii noastre de a-i servi mai bine clientilor nostri.↩
