Exploded list view usability

[Verwijderd]

Ik ben een interface aan het maken om meerdere elementen uit een DOMtree te kunnen selecteren. Daarvoor wilde ik eigenlijk heel de tree in een oogopslag kunnen zien, maar wel de individuele node kunnen selecteren.

Wat ik daarvoor heb gemaakt is een sterk samengeperste versie van de tree, waardoor de struktuur meteen erg duidelijk is, maar wanneer je met de muis over een node gaat wordt het lokaal uitvergroot: http://www.rikkertkoppes.com/tests/test.htm (werkt het vloeiendste in Fx)

Ik wil het later nog duidelijker maken door als de boel klein is de tekst te vervangen door een zwart balkje

Het probleem waar ik mee zit is een usability probleem, vandaar dat ik dit ook in graphics post. Als je namelijk een bepaalde node beter wilt bekijken, bijvoorbeeld die ene bijna onderaan die in de een na laatste kolom iets heeft staan (een className), en je beweegt met je muis er naar toe, dan zit je eigenlijk meteen verkeerd. Dit komt omdat het uitvergrote deel plaats inneemt, zodat alles wat erna zit naar beneden schuift. Zoiets heb je niet als je bijvoorbeeld met een loep mieren zit te bekijken (alles binnen de loep verschuift wel, maar de echte wereld niet).

Ik wil dit dus oplossen, de vraag is alleen hoe. Waar ik eerst aan dacht was boven en onder het uitvergrootte deel de boel juist in te krimpen, zodat het totale stuk onder de loep even groot is als wanneer je niet zou uitvergroten. Dit lijkt me echter niet erg intuitief en je hebt dan ook wel erg veel ingekrompen nodes nodig om te compenseren

Ander idee was om het uitvergrootte deel zeg maar boven de hele lijst te plaatsen, zodat je eigenlijk een aantal nodes gewoon niet ziet (volgens mij is dit het geval "in het echt"), maar dat lijkt me ook weer niet super omdat juist de nodes die in de buurt zitten van die ene die je bekijkt, wel eens van belang kunnen zijn.

Ideeen?

[BtM909]

offtopic:
holy, dit ziet er strak uit

Eigenlijk zou je dus een view (met x amount of zoom) erboven moeten hebben die je onder je muis plakt en zichtbaar maakt... Is dit niet een beetje zoals men dat vaak in Flash doet?

[Savantas]

BtM909 schreef op donderdag 07 december 2006 @ 11:06:

offtopic:
holy, dit ziet er strak uit

offtopic:
Met BtM909

Quick en dirty zou je alles op een vaste regalafstand moeten zetten, maar dat is weer niet conform een vergrootglas... Je weet natuurlijk wel hoe groot je vergrootglas is en dus hoeveel ruimte het inneemt. Mogelijk kan je daar rekening mee houden.
Wat je misschien vergeet is dat je met een vergrootglas ook een deel van de (in dit voorbeeld aangehaalde) mieren niet ziet, namelijk die zich net aan de rand van je vergrootglas zitten. Dus zou je iets in moeten bouwen dat een deel rond de vergroting hidden word.

nog meer

offtopic:
Je moet wel erg op de Ctrl+ drukken in FF om de kleine tekst leesbaar te krijgen zeg!

/me Oeps, Savvie moet beter begrijpend lezen...

[ Voor 12% gewijzigd door Savantas op 07-12-2006 13:55 ]

[Verwijderd]

Volgens mij bedoelen jullie allebei wat ik in m'n laatste alinea zeg, dat je dus inderdaad de nodes (mieren) aan de rand van het vergrootglas niet ziet (implementatie zou dus idd zijn de zoom zwevend boven de eigenlijke samengeperste lijst, onder de muis).

Ik vraag me af of dat handig is, aangezien de nodes in de buurt van de focus dus ook wel eens best interessant kunnen zijn. Je lost er wel het verspring probleem mee op iig. Ik denk dat ik eens een versie bouw die zo werkt en dan naast elkaar leg.

Ik zal nog wel eea werkend laten zien (met domloader en xpath query interface), maar dat komt waarschijnlijk zaterdag pas. Ik develop op een pc zonder internet en als ik iets wil laten zien is het een kwestie van met floppies zeulen om up te loaden (don't ask...)

offtopic:
daar heb je nu juist het vergrootglas idee voor . Lettergrootte is 2px voor die kleine lettertjes

[ Voor 10% gewijzigd door Verwijderd op 07-12-2006 13:37 ]

[OnTracK]

Als je ervoor zorgt dat het vierde element van boven altijd op dezelfde (absolute) plek blijft staan, dan klopt het wel volgens mij. Hoe je dat dan technisch op zou moeten lossen, geen idee...

Dat zorgt ervoor, dat als je bovenaan begint en eroverheen hovert. Dat de eerste drie elementen omhoog schuiven. Misschien moet je het eerste (en tweede en derde) element ook al groter laten worden naarmate je er meer in de buurt komt vanaf boven, dat lijkt me intuïtiever.

Want als ik het goed begrijp klopt het wel degelijk als je er al middenin zit en alleen maar naar boven en onder schuift, dan verspringt er niets.

[ Voor 72% gewijzigd door OnTracK op 07-12-2006 13:45 ]

[Verwijderd]

kleine update
http://www.rikkertkoppes.com/tests/test2.htm

in IE gaat het wat schokkerig, wist eerst niet waarom, maar het is precies hetzelfde probleem.

IE vuurt namelijk alleen een mouseover af als de muis beweegt. Wat er dus gebeurt is het volgende:

- muis over een bepaald element
- elementen boven en onder dat element worden vergroot
- hierdoor zakt het element wat waardoor ie niet meer onder de muis zit (dit is ook intuitief een probleem)
- er gebeurd verder niks omdat het element wat nu onder de muis hangt geen mouseover vuurt, Fx doet dat wel dus krijg je:
- het nieuwe element vergroot, de boel verschuift een beetje zodat dit langzaamaan op het goeie element uitkomt (vandaar ook een ietwat stroperige respons, wat ik op zich wel fancy vind)

Het probleem kan je als volgt goed zien
- ga met de muis rechts naast de tabel staan, zodat de boel samenvalt
- beweeg naar links over een bepaald element, de boel vergroot, maar onder je muis heb je niet meer het element waar je eerst naar toe ging

edit: hmz, wordt een beetje verkloot door de minimale lettergrootte instelling in Fx, kan me niet herinneren dat ik dat ingesteld heb, is dat default bij de nieuwere versies?

[ Voor 7% gewijzigd door Verwijderd op 08-12-2006 18:32 ]

[Verwijderd]

Een nieuwe incarnatie:
http://www.rikkertkoppes.com/tests/test3.htm

heb nu de lens view apart (aparte tbody), probleem is dat als ik dat ding ga floaten onder de muis, dat dan de mouseovers van de rijen eronder niet meer afgevuurd worden, het effect kan je zien als je met je muis boven het nummertje op en neer beweegt, dat gaat niet lekker.

Er is nog wel een aardige emergent feature ontstaan en dat is dat de mouseevents met de complete rijen meegecopieert worden naar die lensview, daar kan je dus met de muis ook nog iets van scrollen door boven of onder het midden te gaan hangen

Note overigens dat er hier 214 rijen samengeperst zijn in 1 beter overzichtelijke tabel. Je ziet meteen structuur en elementen met een id cq class

Nadeel hiervan is heel duidelijk dat de info niet is waar je muis is, maar juist onderaan. Dat werkt niet imho

Zojuist bedacht dat ik het maar eens op de eerdere manier ga proberen (rijen gewoon vergroten zoals in test 2), maar dan tegelijkertijd rijen ook hiden, namelijk die "onder de lens" vallen. Morgen eens een probeersel aan wagen

[Savantas]

Kan me voorstellen dat je het meteen bij je muiscursor wil hebben, is intuïtiever. Maar toch heeft de laatste test ook wel wat, hoor.

[Verwijderd]

Even een enorme kick, want ik ben hier weer verder mee gegaan omdat het toch wel toepassingen gaat lijken te hebben:

http://www.rikkertkoppes.com/tests/test4.htm

het probleem dat ik niet wist boven welke rij ik hang omdat de mouseovers niet doorkomen als er een andere tabel overheen hangt is nu opgelost, ook het probleem van schokkerig bewegen in internet explorer is opgelost.

Het ding heeft verder verschillende features.
Met de scrollwheel ontkoppel je de lens van de muis en scroll je stap voor stap omhoog en omlaag. Als je met de muis buiten de lens beweegt koppelt ie weer vast (te zien aan de border van de lens)

Als je op shift drukt verdwijnt de lens en kan je met de muis boven een rij gaan hangen, shift weer los en je kan weer nauwkeuriger selecteren.

De bedoeling is dit te gaan gebruiken bij grote tabellen waar wel een structuur inzit, zoals dom bomen. Wellicht wil ik nog met kleuren gaan werken om zelfde elementen een zelfde achtergrond kleur te geven, of elementen in dezelfde class dezelfde kleur.

Ben erg benieuwd naar reacties hierover, of het een beetje intuitief werkt en nieuwe ideeen.

Note dat er nog wat gefixed moet worden als je boven of onderaan komt

Edit: geintje toegevoegd

Edit2: hmz, de IE6 anti schokoplossing werkt in IE7 juist weer averechts

[ Voor 7% gewijzigd door Verwijderd op 02-03-2007 09:43 ]

[Yellow|A]

Echt netjes gedaan ten eerste. Ik denk dat je het best snel zal wennen in gebruik, maar ik mis een beetje een feature. Als ik CTRL+F zoek naar iets, vind de browser het wel maar wordt het niet uitvergroot. Is het niet zo dat met het soort data wat je erin wilt zetten mensen vaak "zoeken" met een zoekfunctie? Kan me vergissen.

Anyway, netjes gedaan en goed verzonnen

[gvdh81]

Dat zou je op kunnen lossen met een onselect, denk ik, maar hoe je dan de lens daarheen zou moeten brengen is even vaag.