[Alg] GUI layout advies gezocht *

[Alarmnummer]

Ik ben bezig met een applicatie en afgezien van het onderstaande scherm ziet het er allemaal strak uit (als ik anderen mag geloven). Ik zit dus alleen met het onderstaande scherm.



Die lange comboboxen maken het geheel nogal onaantrekkelijk (vooral op hogere resoluties). Maar aan de andere kant vind ik een fixed size combobox erg onpraktisch omdat er misschien wel lange namen in komen te staan.

Verder is van te voren ook nooit bekend hoe lang ze gaan worden, want de hele applicatie wordt geconfigureerd mbv een XML bestand. Hierin wordt de interne structuur van het programma beschreven.

[whoami]

Wat wil je nu?
* whoami mist een vraag.

Je kan natuurlijk die comboboxen veranderen, door bv. een label en een knop. Je klikt op de knop, en je krijgt een nieuw (modal) venster te zien (dat resizeable is) met daarin de mogelijkheden waaruit je kan kiezen.
Je kiest een mogelijkheid door op OK te klikken, het scherm sluit, en de geselecteerde waarde komt in de label terecht.

[djluc]

Ik vind het best wel om aan te zien eigenlijk. Van mij zou die gradiënt er niet op hoeven, dan wordt het wat duidelijker. Eventueel zou je die items die zijn ingesprongen met een lijntje kunnen verbinden ala windows verkenner.

[Alarmnummer]

whoami schreef op 21 August 2003 @ 15:05:
Wat wil je nu?
* whoami mist een vraag.

Advies hoe ik ervoor kan zorgen dat die lange comboboxen wat minder lelijk worden.

[Alarmnummer]

djluc schreef op 21 August 2003 @ 15:06:
Ik vind het best wel om aan te zien eigenlijk. Van mij zou die gradiënt er niet op hoeven, dan wordt het wat duidelijker. Eventueel zou je die items die zijn ingesprongen met een lijntje kunnen verbinden ala windows verkenner.

Dat is alleen een look and feel.

Dit is met de standaard look and feel van windows. (Dit is trouwens ook mijn standaard kleur)

[faabman]

Ik neem aan dat je wel voorzichtig van een maximale lengte van een naam uit kan gaan, ik zou mijn boxen daarop instellen (en die enkele naam die dan langer is heeft dus gewoon pech)

Maar, los van hoe je applicatie er uit ziet is uiteindelijk de acceptatie door de gebruiker het belangrijkst. En die acceptie gebeurt niet alleen op basis van uiterlijk (al speelt dat zeker in het begin wel mee....)

[Croccifixio]

Ik heb dit op de volgende manier opgelost in Deplhi (voor een db applicatie), misschien is dat in jouw ontwikkelomgeving ook mogelijk.

Als je echt die lange boxen niet wilt, zou je kunnen overwegen om op de 1 of andere manier de tekst die je daar laat zien korter te maken. Bijvoorbeeld door te werken met initialen en achternaam. Vervolgens maak je van doe boxen lookup velden. Zodra er op de box wordt geklikt, doe je een lookup in de database op basis van de waarde van het veld en laat je het volledige veld (inclusief die ongelooflijk lange naam van je) zien in de popup die tevoorschijn komt.

Op deze manier hou je kleine boxen, maar kan je wel lange regels erin kwijt.

[Rataplan]

Alarmnummer schreef op 21 August 2003 @ 15:07:
[...]

Advies hoe ik ervoor kan zorgen dat die lange comboboxen wat minder lelijk worden.

Lelijk? Als je mij mag geloven - en dat mag best, van mij - valt het reuze mee. Ik doe het zelf regelmatig op precies dezelfde manier.

Ik zou die inspringende boxen (fiets) ook aan de andere kant laten inspringen, de rechterkant van die combo's iets meer naar links moven (marges content links en rechts zijn nu ongelijk - edit: het lelijkste is nog dat "preselectie" en "eigenschappen" niet even breed zijn), en eventueel hier en daar een lijntje of wat extra ruimte tussen de groepjes. Hoewel de functionaliteit van vijf boxjes met "dader" me volkomen ontgaat, dus misschien moet je dat ook wel niet doen

Maar lelijk, nee hoor. Fixed is een groter probleem, en met dynamische width geef je de controle helemaal uit handen.

Dus doe eens lekker efficient: laat het zoals het is. Als iemand inhoudelijke kritiek heeft (dus iets anders dan "niet strak") praten we verder

mbravenboer schreef op 21 August 2003 @ 15:18:
Zijn probleem is nu: hoe maak ik de comboxen in deze GUI nu klein, terwijl ze nog wel erg groot kunnen worden?

Scherm initieel smaller maken?

[ Voor 19% gewijzigd door Rataplan op 21-08-2003 15:20 ]

[mbravenboer]

FvKnijff: Ik neem aan dat je wel voorzichtig van een maximale lengte van een naam uit kan gaan, ik zou mijn boxen daarop instellen (en die enkele naam die dan langer is heeft dus gewoon pech)

Dat is dus een typische windows mentaliteit . Native windows GUIs zijn om een of andere reden zelf of nooit resizable en dat is uiterest irritant. Alarmnummer gebruikt natuurlijk netjes layoutmanagers, dus zijn GUIs zijn keurig resizable.

Zijn probleem is nu: hoe maak ik de comboxen in deze GUI nu klein, terwijl ze nog wel erg groot kunnen worden?

[alienfruit]

Ach, je zou ook altijd nog het principe kunnen toepassen zoals Microsoft die bij Outlook ook gebruikt, namelijk een listbox waarbij je de filters/regels (ik neem aan dat dit ook een soort regel is die je samenstelt) kunt aanpassen door op een knop te drukken, waar vervlgens een combobox/listbox of ene dialoog te voor zijn komt. Lijkt me eigenlijk nog best wel efficient werken hiervoor. Ik heb ook zoiets dergelijks gebruikt voor een van mijn programma, en tot heden nog niet echt veel problemen over gehoord.

Bijvoorbeeld:

[Alarmnummer]

FvKnijff schreef op 21 August 2003 @ 15:13:
Ik neem aan dat je wel voorzichtig van een maximale lengte van een naam uit kan gaan, ik zou mijn boxen daarop instellen (en die enkele naam die dan langer is heeft dus gewoon pech)

Er kan van alles in die comboboxen komen te staan, van Daders tot Rechtbanken, van Uitspraken tot beschrijvingen van pornografisch materiaal. Ik kan dus nooit van een max-size uitgaan.

Maar, los van hoe je applicatie er uit ziet is uiteindelijk de acceptatie door de gebruiker het belangrijkst. En die acceptie gebeurt niet alleen op basis van uiterlijk (al speelt dat zeker in het begin wel mee....)

Ik weet het. Gelukkig hadden we ook al een oud systeem die door een groot aantal juristen is getest en daaruit kan ik een aantal zaken meenemen, en wat als minder prettig werd ervaren aanpassen:

beantwoorden van vragen. (Oude scherm is echt rotding)


Oplossingen bekijken


Oplossingen bekijken in de solution-browser. Dynamisch worden er pagina`s gegenereerd waardoor je heen kan browsen. Ik moet trouwens nog sleutelen aan de die expressie printer om het aantal haakjes zo laag mogelijk te houden. Verder is dit scherm nog in zijn begin fase).

[ Voor 8% gewijzigd door Alarmnummer op 21-08-2003 15:26 ]

[ATS]

Die comboboxen op zich storen mij niet, hoewel de relatie ertussen niet helder is. Die vijf keer Dader onder elkaar is m.i. niet inzichtelijk. Als je hier de mogelijkheid wil geven om vijf daders te selecteren, waarom dan niet een combinatie van twee listboxen waarbij je uit de totale lijst van daders er 0, 1, 5... etc. kan selecteren in je 'preselectie'?

Verder is het storend dat de frames van de preselectie en de eigenschappen niet strak onder elkaar staan. Het meest hinderlijke is echter helemaal onderaan te vinden: de tabbladen. Tabbladen met de tabjes aan de onderkant van het scherm zijn in de UI-wereld een "big no-no". Die horen dus bovenaan te staan... Het is in deze opmaak niet duidelijk dat de preselectie en de eigenschappen eigenlijk maar een pagina zijn, en dat er nog drie zijn. Dat komt ook omdat de marges om het tabblad heen, vooral boven, links en rechts, te klein zijn. Als je de tabs bovenaan zet heb je boven overigens maar weinig extra ruimte nodig, omdat het niet doorlopen van de tabs naar rechts genoeg visuele clues geeft.

[Alarmnummer]

ATS schreef op 21 August 2003 @ 15:24:
Die comboboxen op zich storen mij niet, hoewel de relatie ertussen niet helder is. Die vijf keer Dader onder elkaar is m.i. niet inzichtelijk. Als je hier de mogelijkheid wil geven om vijf daders te selecteren, waarom dan niet een combinatie van twee listboxen waarbij je uit de totale lijst van daders er 0, 1, 5... etc. kan selecteren in je 'preselectie'?

Die 5 heb ik er even in geplakt zodat het scherm even wat voller is (zoals in werkelijk ook het geval zal zijn). De betekenis van die boxen is dus niet interessant.

Verder is het storend dat de frames van de preselectie en de eigenschappen niet strak onder elkaar staan.

Ben ik met je eens. Ik heb dat etterbakje nog niet kunnen fixen.

Het meest hinderlijke is echter helemaal onderaan te vinden: de tabbladen. Tabbladen met de tabjes aan de onderkant van het scherm zijn in de UI-wereld een "big no-no". Die horen dus bovenaan te staan...

Als je even naar boven kijken, dan zie je ook een oplossingen scherm staan. Hierbij heb je dus ook al een keer tabbladen boven aan staan.

Je kan dat oplossingen scherm dus 'demaximizen', zodat je een internal frame krijgt.

Het is in deze opmaak niet duidelijk dat de preselectie en de eigenschappen eigenlijk maar een pagina zijn, en dat er nog drie zijn

Als je beneden op start drukt (nadat je een regel hebt geselecteerd), ga je automatisch naar het vragen scherm, en als je klaar bent met antwoorden ga je automatisch naar het oplossingen scherm. Verder is het noodzakelijk dat de gebruiker uiteindelijk naar ieder tabblad kan kiezen. Hij kan terug gaan van de oplossingen om alsnog vragen opnieuw te beantwoorden, of hij kan kiezen om een andere regelsessie te beginnen.

Dat komt ook omdat de marges om het tabblad heen, vooral boven, links en rechts, te klein zijn. Als je de tabs bovenaan zet heb je boven overigens maar weinig extra ruimte nodig, omdat het niet doorlopen van de tabs naar rechts genoeg visuele clues geeft.

Als zal hier even naar kijken.

[ Voor 7% gewijzigd door Alarmnummer op 21-08-2003 15:39 ]

[Bosmonster]

Lijkt me meer een W&G issue.. daar zitten de interaction en graphic designers...

[ATS]

Tabs boven én onder is nog erger dan alleen onder... Als ik zo kijk naar je screenshots die de later gepost hebt, dan is m.i. totaal niet helder welke tab je nu precies aan het bekijken bent. Ik denk dat tabs in dit geval niet de beste oplossing zijn, in ieder geval niet voor zowel boven als onder.

[faabman]

mbravenboer schreef op 21 augustus 2003 @ 15:18:
[...]

Dat is dus een typische windows mentaliteit .

offtopic:
Ach, ik ben dan ook geen programmeur, maak alleen maar webapplicaties (in ASP) en plaatste dus ook vanuit dat oogpunt (en misschien de theorie die ik bij al die informatiemanagement vakken heb gehad mijn opmerking ).

Wat ik persoonlijk altijd het belangrijkste vind is dat gebruikers de applicatie werkbaar vinden...

[Alarmnummer]

ATS schreef op 21 August 2003 @ 15:38:
Tabs boven én onder is nog erger dan alleen onder... Als ik zo kijk naar je screenshots die de later gepost hebt, dan is m.i. totaal niet helder welke tab je nu precies aan het bekijken bent. Ik denk dat tabs in dit geval niet de beste oplossing zijn, in ieder geval niet voor zowel boven als onder.

Ok ben het met je eens dat het niet echt duidelijk is, maar weet jij een betere oplossing? (no offence). Ik heb zelf namelijk nog niets beters kunnen bedenken.

[ Voor 7% gewijzigd door Alarmnummer op 21-08-2003 15:44 ]

[ATS]

Daar is moeilijk een antwoord op te geven als ik de structuur van je programma, of liever, van het probleem dat je wil oplossen met je programma, niet ken. Misschien kan je hier wat helderheid in verschaffen?
Wat ik nog wel uit de screenshots kan halen is een ander probleem: met je geminimaliseerde oplossingen-vensters, is het totaal onduidelijk waar dit een oplossing van is. Dat lijkt me niet de bedoeling... Een titel doet wonderen denk ik.

Nog een tip: de = waar/onwaar in de tree-views is niet makkelijk leesbaar. Ik zou een extra icoontje toevoegen met een groen vinkje of een rood kruisje, of zelfs een extra kolom met deze informatie. Daarnaast is ja/nee voor veel mensen inzichtelijker dan waar/onwaar.

[ Voor 24% gewijzigd door ATS op 21-08-2003 16:12 . Reden: extra tip toegevoegd ]

[Alarmnummer]

ATS schreef op 21 August 2003 @ 16:07:
Daar is moeilijk een antwoord op te geven als ik de structuur van je programma, of liever, van het probleem dat je wil oplossen met je programma, niet ken. Misschien kan je hier wat helderheid in verschaffen?

Als je mijn 1e plaatje bekijkt, dan kan je een selectie maken uit een regelbestand en daarna drukken op de startknop.



Als je vragen wilt beantwoorden (aanvullende gegevens gebruiken) dan kom je uit bij de volgende tab: vragen beantwoorden.



Ben je klaar met het geven van antwoorden of wou je geen antwoorden geven, dan kom je bij de oplossingen tab.

Een oplossing kan je op meedere manieren bekijken:
-oplossingen naast elkaar.
-oplossingen per goal
-context splitsingen (dit is trouwens alleen iets dat zeer geavanceerde gebruikers krijgen te zien, omdat dit een redelijk complex concept is. Veel functionaliteit (zoals bv de mislukte oplossingen, wordt trouwens pas beschikbaar als je userlevel hoog genoeg is, dit is allemaal gedaan om het instap nivo zo laag mogelijk te maken, maar als het moet toch genoeg informatie te kunnen laten zien.)

Verder zit er in de oplossingen tab automatisch een internal frame die gemaximaliseerd is.


Deze kan je ook demaximaliseren en dan krijg je het onderstaande plaatje.

Wat ik nog wel uit de screenshots kan halen is een ander probleem: met je geminimaliseerde oplossingen-vensters, is het totaal onduidelijk waar dit een oplossing van is. Dat lijkt me niet de bedoeling... Een titel doet wonderen denk ik.

Ik zou aan de titel wel kunnen toevoegen met welk regelbestand het is gemaakt, en welke versie dit intussen is (je kan namelijk meerdere keren een vragensessie doorlopen voor dezelfde rulebase). Dat is idd wel een goed idee.

[ Voor 9% gewijzigd door Alarmnummer op 26-03-2004 12:08 ]

[Brothar]

Als dit vrijwilligerswerk is, heb ik wel zin om te helpen.
Waar heb je trouwens de analyse (hoofdvragen & feitelijkheden) vandaan ?

(Overigens, GUI-ontwerp: max een 7 items is mij altijd geleerd; ik zal even zoeken wat ik nog meer heb)

[ Voor 30% gewijzigd door Brothar op 21-08-2003 16:28 ]

[Janoz]

Om te voorkomen dat er straks een CLI wordt aangeraden volg ik het advies van bosmonster op. In /13 zitten IIRC de meeste interaction designers

PW -> WG

[Bosmonster]

Alarmnummer schreef op 21 augustus 2003 @ 15:44:
[...]

Ok ben het met je eens dat het niet echt duidelijk is, maar weet jij een betere oplossing? (no offence). Ik heb zelf namelijk nog niets beters kunnen bedenken.

Een 'uitklapknop' misschien zoals de fileviews in Windows Explorer. Die kun je gewoon in de toolbar van het venster verwerken. Bijkomend voordeel is dat je de tabs ook naar boven kunt verplaatsen, want tabs onderaan het scherm zijn (inderdaad) niet aan te raden.

(Overigens, GUI-ontwerp: max een 7 items is mij altijd geleerd; ik zal even zoeken wat ik nog meer heb)

Het enige waar het nummer 7 op slaat is dat je als je een berg woorden onder elkaar hebt het maximum wat je in AANTAL kunt herkennen meestal 7 is. Dus voor 8 zul je meestal moeten gaan tellen, t/m 7 zie je in 1 keer. Maar het gaat hier dus enkel en alleen om het AANTAL en niet om de INHOUD. Voor menu's bijvoorbeeld is het dus niet relevant. Het enige wat interaction design zegt is dat je de hoeveelheid zoveel mogelijk moet beperken

[ Voor 49% gewijzigd door Bosmonster op 21-08-2003 17:09 ]

[alienfruit]

Ik vraag me of het duidelijker wordt als je vliegende vensters gebruikt zoals op het plaatje van die Oplossingen. Zelf vind ik het een beetje onduidelijk, twee oplossingen vensters? Onderaan één tab oplossingen (huh? had toch twee oplossingen vensters?!?!). Misschien zo je wat kunnen doen met die navigation bar...

Intressante links en boek(en):

Boeken
Designing Visual Interfaces: Communication Oriented Techniques (boek)
The Design of Everyday Things
Usability Engineering
The Windows Interface Guidelines for Software Design (misschien wel wat te veel Windows, maar blijft toch nog een handig bevat handige regeltjes etc.)
About Face 2.0 (Amazon)

Links
http://axp16.iie.org.mx/Monitor/v01n03/ar_ihc2.htm
http://msdn.microsoft.com/ui/

Verder had ik laatst nog een ander leuk artikel op MSDN gevonden, alleen kan het nu niet terug vinden jammer genoeg.
Microsoft Inductive User Interface Guidelines

[ Voor 34% gewijzigd door alienfruit op 21-08-2003 17:28 ]

[Alarmnummer]

alienfruit schreef op 21 August 2003 @ 17:20:
Ik vraag me of het duidelijker wordt als je vliegende vensters gebruikt zoals op het plaatje van die Oplossingen. Zelf vind ik het een beetje onduidelijk, twee oplossingen vensters? Onderaan één tab oplossingen (huh? had toch twee oplossingen vensters?!?!). Misschien zo je wat kunnen doen met die navigation bar...

Het moet in ieder geval mogelijk zijn om meerdere oplossingen naast elkaar te leggen. Automatisch wordt de nieuwste oplossing gemaximaliseerd in dat gedeelte, zodat je dus de andere oplossingen niet ziet (en dus geen last van hebt). Als je die oplossing demaximaliseerd, dan zie je dus een aantal internal frames. Dit leek mij de meest voor de hand liggende oplossing, maar het kan idd zijn dat het nog eenvoudiger moet zijn, omdat je meer rekening moet houden om de complexiteit erom heen. Het probleem is alleen dat ik geen eenvoudigere oplossing weet.

Intressante links en boek(en):

Boeken
Designing Visual Interfaces: Communication Oriented Techniques (boek)
The Design of Everyday Things
Usability Engineering
The Windows Interface Guidelines for Software Design (misschien wel wat te veel Windows, maar blijft toch nog een handig bevat handige regeltjes etc.)
About Face 2.0 (Amazon)

Ik zal er even naar kijken. Ik vond trouwens dat ik het nog niet eens zo slecht had gedaan als je kijkt naar de gemiddelde java interface, maar gui programmeren is verder ook niet het gene dat ik het meeste doe.

[crisp]

op verzoek toch maar weer terug naar P&W

[Yellow|A]

In About Face staat ongeveer als eerste regel dat een P&W mensachtige zich nooit met Userinterface design bezig mag houden. Give or take, maar dat staat er ongeveer. Deel een tenminste

[Tomatoman]

Er is al heel veel gezegd over je user interface, maar niemand heeft iets genoemd wat in Windows-termen echt 'fout' is: je gebruikt niet altijd hele werkwoorden, je gebruikt hoofdletters niet altijd correct en (het belangrijkste) je bent daarbij inconsequent. Een paar voorbeelden:

Er staat: Laad Gui
Er moet staan: GUI laden

Er staat: draai regelbestand
Er moet staan: Regelbestand draaien (had je inmiddels zelf al veranderd)

Er staat: aanvullende gegevens gebruiken
Er moet staan: Aanvullende gegevens gebruiken

Er staat: Reload
Er moet staan: Herladen (wel consequent zijn in de gekozen taal)

Merk trouwens op dat in het Engels in een koptekst (en dus ook vaak een label) ieder woord met een hoofdletter wordt geschreven, behalve (soms) tussenwoorden zoals 'the' en 'from'. In het Nederlands is dat niet nodig, je begint het eerste woord met een hoofdletter en laat bij alle volgende woorden de hoofdletter achterwege. Uiteraard schrijf je eigennamen en dergelijke wel met een hoofdletter. Dus:

Engels: Push This Button
Nederlands: Op deze knop drukken (dus niet: Druk op deze knop)

GoT houdt zich hier ook niet aan en is in Windows-termen dus 'fout'.

[alienfruit]

http://digilander.libero....ng/iarchitect/index-1.htm
Nog een leuke URL gevonden Toch eens bookmarks zetten

[Sjaaky]

"Preselectie", "vragen beantwoorden" en "oplossingen bekijken" zijn (als ik het goed begrijp) 3 stappen die je in die volgorde uitvoert. Uiteraard kun je terug om wijzigingen te maken, maar een bepaalde stap zal alleen invloed hebben op een latere stap.
Je kunt dan gebruik maken van <<back en next>> knoppen of een balk met iets als "Stap: 1 -> 2 -> 3" erin.
_{Volgens About Face moet je mijn advies niet opvolgen :-)}

[Verwijderd]

Je kunt ook de volgende twee dingen proberen:

1 -
Geef een vast grootte op, die voor de meeste items toch genoeg is.
Gebruik een tooltip/hint voor items die niet helemaal op passen.
Nadeel:
-Gebruiker weet mischien niet (meteen) dat ie als ie met de cursor over de item gaaat dat het dan volledig in een hint zichtbaar wordt

2 - pas de breedte dynamisch aan, na het laden van de items (of tijdens het laden van de items) loop je de items een voor een langs, en pas je de breedte aan aan de grootste item.
Nadeel:
Risico dat de combobox niet op je from past, maar dat kun je afvangen en overgaan op manier 1.

[Alarmnummer]

tomatoman schreef op 22 August 2003 @ 23:50:
Er is al heel veel gezegd over je user interface, maar niemand heeft iets genoemd wat in Windows-termen echt 'fout' is: je gebruikt niet altijd hele werkwoorden, je gebruikt hoofdletters niet altijd correct en (het belangrijkste) je bent daarbij inconsequent. Een paar voorbeelden:

Er staat: Laad Gui
Er moet staan: GUI laden

Er staat: draai regelbestand
Er moet staan: Regelbestand draaien (had je inmiddels zelf al veranderd)

Er staat: aanvullende gegevens gebruiken
Er moet staan: Aanvullende gegevens gebruiken

Er staat: Reload
Er moet staan: Herladen (wel consequent zijn in de gekozen taal)

Merk trouwens op dat in het Engels in een koptekst (en dus ook vaak een label) ieder woord met een hoofdletter wordt geschreven, behalve (soms) tussenwoorden zoals 'the' en 'from'. In het Nederlands is dat niet nodig, je begint het eerste woord met een hoofdletter en laat bij alle volgende woorden de hoofdletter achterwege. Uiteraard schrijf je eigennamen en dergelijke wel met een hoofdletter. Dus:

Engels: Push This Button
Nederlands: Op deze knop drukken (dus niet: Druk op deze knop)

Thanx voor de tips...

GoT houdt zich hier ook niet aan en is in Windows-termen dus 'fout'.

En dat kan geloof ik alleen maar goed zijn

[Harribo]

He ziet er strak uit

modbreak: coole kick ja. enig nut?

[ Voor 61% gewijzigd door curry684 op 04-09-2003 19:30 ]