GUI: kleurgebruik bij notificaties

[Roytoch]

Ik probeer voor een script dat gemaakt is in PHP een goede GUI in elkaar te zetten, maar nu zit ik met het volgende vraagstuk. Er zijn items die verwijderd kunnen worden uit een database. Je komt dan, als je iets hebt gewijzigd, toegevoegd, of verwijderd, weer in het overzicht van items. Tot nu toe alles logisch, maar zodra je dan weer in het overzicht komt wil ik bovenin een regel tekst weergeven dat het gelukt is (of mislukt natuurlijk, maar dat liever niet).

Op dit moment heb ik het zo:

• Toevoegen gelukt: Lichtgroen vlak met een donkergroene 'gelukt' tekst.
• Wijzigen gelukt: lichtgeel vlak, zelfde idee.
• Verwijderen gelukt: rood vlak, zelfde idee.

Maar ik dacht, misschien is het logischer om een groene boodschap weer te geven bij het lukken van een wijziging, verwijdering of toevoeging, en een rode bij het mislukken hiervan. Maar dan is er geen visueel onderscheid meer in de drie handelingen die hierboven zijn opgesomd, alleen nog tekst.

Wat ik mij afvraag is, hoe zien jullie dit? Wat is het meest logisch qua kleurgebruik in deze situatie? Ik denk erover om te switchen naar het groen: gelukt, rood: mislukt scenario, maar misschien is dit wel volstrekt onlogisch?

[Noork]

Ik zou het niet te complex maken. Groen = geslaagd, rood = mislukt lijkt me persoonlijk duidelijk genoeg. Ik zou niet ook nog eens een andere kleur gebruiken voor het type van bewerking. Wellicht kun je nog iets met icoontjes doen o.i.d.

[Roytoch]

Ja, ik dacht er inderdaad aan om een vinkje of een kruisje in te voegen bij gelukte en mislukte bewerkingen. Dan ga ik daar eens heel serieus over nadenken in ieder geval, werkt ook makkelijker, om maar 2 verschillende notificaties te hebben. Thanks in ieder geval voor de feedback!

[Verwijderd]

Of in plaats van enkel de tekst 'gelukt', de tekst 'gegevens [niet] toevoegd', 'gegevens [niet] gewijzigd' en 'gegevens [niet] verwijderd' weergeven, en wanneer een bewerking niet gelukt is, de tekst ook nog eens rood maken?

[Roytoch]

Ja, dat sowieso. Ik zat zelf aan het volgende te denken:



Het groene fade direct uit (nuja, na 2 seconden), maar de tussenruimte tussen zwarte balk en inhoud blijft. Dit omdat anders na 3 seconden de pagina verspringt, wat ontzettend irritant is (bijvoorbeeld, zoals als je hier vergeet op check images te klikken).

Ik weet trouwens dat het sorteer gedeelte rechts niet zo handig is! Ik ben dit nu aan het omvormen dat het klikken op table headers dit doet.

[ Voor 83% gewijzigd door Roytoch op 29-12-2008 01:48 ]

[harrald]

roy.ahuis schreef op maandag 29 december 2008 @ 01:33:
Ja, dat sowieso. Ik zat zelf aan het volgende te denken:

[afbeelding]

Het groene fade direct uit (nuja, na 2 seconden), maar de tussenruimte tussen zwarte balk en inhoud blijft. Dit omdat anders na 3 seconden de pagina verspringt, wat ontzettend irritant is (bijvoorbeeld, zoals als je hier vergeet op check images te klikken).

Ik weet trouwens dat het sorteer gedeelte rechts niet zo handig is! Ik ben dit nu aan het omvormen dat het klikken op table headers dit doet.

Wil wel even zeggen dat ik het er erg goed uit vind zien. Ik vind het zelf erg moeilijk een duidelijke en mooi ogende GUI te maken

[Roytoch]

Bedankt! Het is een roosterapplicatie voor een zorginstelling, welke via citrix geopend wordt (hoe precíes weet ik niet, ik ben niet van het hostingdeel), waardoor afbeeldingen al wat lastiger worden. In principe zijn alleen de icoontjes en het logo afbeeldingen, de rest is gewoon CSS. Er werken vooral mensen mee die minder verstand hebben van computers en dergelijke, dus het moet zo overzichtelijk mogelijk blijven. Nu is GUI absoluut niet mijn straatje, dus ik ben benieuwd hoe het in de praktijk ontvangen gaat worden. De testpoule is er in ieder geval blij mee, dus dat is al een leuke motivator natuurlijk!

[Verwijderd]

Zelf ben ik ook met zoiets bezig en het blijft leuk om hier over na te denken.

Zelf zie ik het zo:
- groen / vinkje: actie uitgevoerd, melding welke actie er voltooid is
- oranje / vraagteken: actie niet uitgevoerd, gebruiker heeft een fout gemaakt, melding wat er niet goed gedaan is
- rood / stopteken: actie niet uitgevoerd, systeem fout, melding welke fout er opgetreden is

Groen en oranje hebben betrekking op de gebruiker, rood mag goed afschrikken en doet zich alleen voor bij systeem fouten. Aangezien een gebruiker niks fout mag kunnen doen vind ik de kleur rood té opvallend voor een "form validatie" (oid) fout.

Het is altijd handig om gebruik te maken van kleuren én tekens. Niet iedereen kan kleuren even goed ongescheiden. Voor de mensen die dat wel kunnen werkt het juist makkelijker, ze hoeven zich dan niet te focussen op de balk, want in je ooghoeken zie je de kleur al goed genoeg. Om vragen eruit te laten springen kan je gebruik maken van een gray-out (zoals in LightBox), waardoor de centrale vraag eruit knalt.

Toch zou ik de balk met de melding niet laten verdwijnen, maar hier een centrale balk van maken die altijd zichtbaar is. Mocht de gebruiker twijfelen dat deze iets fout heeft gedaan, maar de groene balk blijft staan, zal de twijfel weggenomen worden. Want, hoe wil je dat bij een kritische fout doen? Die verdwijnt ook binnen 3 seconden? Dan moet de gebruiker gaan nadenken wat, bij een goed ontwerp, nooit de bedoeling is.

[ Voor 29% gewijzigd door Verwijderd op 03-01-2009 12:41 . Reden: Aanvulling. ]

[Copyman]

Naast groen en rood gebruiken wij in ons CMS ook nog een blauwe informatiemelding. Ik noem maar een voorbeeld: "Het dashboard is leeg, klik op bewerken om items toe te voegen."

De tekst wordt dan voorafgegaan door een info icon, ongeveer gelijk aan deze:

[ione]

Screenshot ziet er zeer goed uit.

Offtopic:
Ik ben zelf nu ook een beetje aan het kijken om Windows-applicaties om te zetten naar Web-apps, maar dat valt nog niet zo mee (vooral de GUI). Dit ziet er echt goed uit! Bouw je een dergelijke applicatie 'from scratch' of zit er een framework achter?

[Tarilo]

Ten eerste moet ik zeggen dat je GUI er erg goed uit ziet.

Wat betreft de kleuren, ik zou ook groen kiezen voor een geslaagde bewerking en rood voor en mislukte. Bij rood denk je al snel dat er iets fout is gegaan, als rood dan gebruikt wordt om een geslaagde bewerking aan te geven kan dat tot verwarring lijden.
Ik zelf zou bij een rode melding toch een keer goed lezen wat de melding is, omdat je er van uit gaat dat er iets fout is gedaan.

[Roytoch]

ione schreef op woensdag 07 januari 2009 @ 09:21:
Screenshot ziet er zeer goed uit.

Offtopic:
Ik ben zelf nu ook een beetje aan het kijken om Windows-applicaties om te zetten naar Web-apps, maar dat valt nog niet zo mee (vooral de GUI). Dit ziet er echt goed uit! Bouw je een dergelijke applicatie 'from scratch' of zit er een framework achter?

Ik heb deze van scratch af aan gebouwd in PHP met mysql database erachter. Ik heb wel een aantal zaken overgenomen, de volgende:

- gebruiker moet soms een kleur kiezen. Hiervoor heb ik een standaard js color picker
- een calender class gebruikt waarin mensen hun rooster kunnen nakijken
- thickbox voor invoervelden

Ik vind gui's ontwerpen ontzettend lastig, en ik weet ook dat degene die ik nu gebruik niet de beste ooit is. Hij is in ieder geval wel snel en geeft zonder gekke hacks goed weer in de normale browsers (ie6 7 8, ff3, opera, chrome, safari). Ik ga hier dus zeker op doorbouwen. Ik heb nog even zitten kijken naar gebruik van jQuery maar ik vind dit op dit moment dat het dan geen toegevoegde waarde heeft, en ik het stiekem alleen wil gebruiken vanwege de fancy effectjes en het feit dat ik het dan kan leren gebruiken. Niet echt de beste redenen ooit, er rekening mee houdende dat het progsel voornamelijk wordt gebruikt door mensen die basiskennis hebben van computers.

Eerlijk gezegd is het nogal 'basis'. Het doet wat het moet doen (helpen met roosteren, en mensen in staat stellen hun eigen rooster te bepalen), maar echt geavanceerde php en gekke javascript is het nog allemaal niet. Ik las ergens dat de meeste scripts nog simpel query tabel weergeven-werk is, en dat is dit feitelijk ook. Langzaamaan komt het wel tot een geavanceerd technisch goed programma.

Thanks allemaal voor de input!