Styling win- en webforms

Door Eguna op woensdag 10 juni 2009 23:47 - Reacties (27)
Categorie: Software, Views: 5.264

Zo laatst schreef ik een stukje over een nieuw programma wat ik aan het maken ben, waarin ik ook enkele screenshots toonde. Het programma is een winforms applicatie dat als een kleurrijk, vernieuwend geheel in elkaar is gezet. Er werdt echter gepost door enkele leden dat dit eigenlijk slecht is, té grafisch perfect zelfs, en dat winforms applicaties eigenlijk in eenheid moeten zijn met Windows zodat gebruikers precies hun weg weten te vinden. Dit hoor ik vaker in het veld waar ik werk maar vandaag begon ik mij eigenlijk af te vragen, ``Waarom?``

http://tweakers.net/ext/f/K8asuRbf4ouEV6leCwvPBIW1/full.jpg


Als het gaat om winforms moet het lijkt wel zo oud en stijf mogelijk zijn, terwijl internet applicaties oneindig veel layouts met nog meer verschillende soorten kleuren en styling hebben. Dit wordt met alle gloss van web 2.0 en noem maar op juist lijkt wel weer ontzettend toegejuigd. Ontwerpen van websites staan voor een hoop geld op veilingsites te koop en mensen kunnen er geen genoeg van krijgen.

http://www.tec-i.com/images/Mcpm3ScreenShot.png


Ik vraag me echt af wat het verschil is, en waarom winforms eenduidig moeten zijn terwijl webforms met allerlei verschillende layouts geaccepteerd worden.

http://farm4.static.flickr.com/3294/2947628470_80d11b5bfa.jpg


Dus, aan de tweakers, wat vinden jullie hiervan? Vind je juist dat winforms applicaties eigenlijk ook wel vooruit mogen, of juist niet? Ik lees graag je mening!

Volgende: Lieve Sander 09-'10 Lieve Sander
Volgende: The Resistance! 06-'09 The Resistance!

Reacties


Door Tweakers user Icyzer, woensdag 10 juni 2009 23:57

Ik vind dat je ook tijdens het werk wel een mooi 'uitzicht' mag hebben, al dat grijs en zwart tegenwoording.
Maar mensen veranderen moeilijk dus het is een beetje gewenning

Door Tweakers user ggx, woensdag 10 juni 2009 23:58

Maakt niet uit hoe het eruit ziet, zolang het maar duidelijk is.

Door Tweakers user Adion, donderdag 11 juni 2009 00:07

Ik heb er zelf ook geen probleem mee dat een programma een eigen stijl heeft, je moet er alleen op letten dat je zeker als je eigen controls maakt er ook voor zorgt dat die helemaal werken zoals de standaard controls.

Een goed voorbeeld van hoe het niet moet zijn de vele types scroll bars die je in flash applicaties terugvind, maar die bijna allemaal ontzettend moeizaam werken.
Zorg je dat deze ook volledig werkt zoals het hoort, dan is er voor mij geen probleem (gebruik van pijltjestoetsen, scroll wheels, de grootte van de balk binnen de hele scrollbar, ...)

Door Tweakers user !GN!T!ON, donderdag 11 juni 2009 00:10

wat ik op windows mis een "standaard" zoals op de mac, op windows past niks bij elkaar en dat vind ik jammer. niet dat ik daarvoor nou overstap op mac, maar dat vind wel een van de pluspunten van dat systeem.

Door Tweakers user DOT, donderdag 11 juni 2009 00:43

Ik weet niet precies wat je met winforms/webforms bedoelt, maar het is de bedoeling om je aan de stijl van de GUI toolkits te houden zodat ze er goed uit zien in verschillende thema's. Jouw applicatie zal er bijvoorbeeld compleet out-of-place uitzien in een omgeving waar alle knopjes rond zijn.

En mensen die een donker thema hebben krijgen pijn aan hun ogen van de felle kleuren die je gebruikt.

Als je wilt dat je programma er mooi uit ziet, dan zal je het heel netjes volgens de regels moeten maken, en vervolgens een mooi thema uitkiezen op je systeem. Als mensen kiezen voor een grijs systeem, dan zullen ze daar wel een reden voor hebben, nietwaar?

Het internet heeft niet dezelfde stijl-mogelijkheden als een operating system. Er is geen theming engine die je kan aanspreken. En de default-stijl van HTML is nogal kaal. Op zich zou je een custom CSS stylesheet kunnen schrijven voor Firefox, en die dan gebruiken in plaats van het meegeleverde stylesheet van sites, maar als je ziet hoeveel sites bagger-HTML gebruiken, dan kan je er niet van op aan dat de sites het met een andere stylesheet nog doen.

Overigens is dat onderste plaatje een site die de Mac stijl nabootst.

[Reactie gewijzigd op donderdag 11 juni 2009 00:44]


Door Tweakers user Trinsec, donderdag 11 juni 2009 01:03

Een van de hoofdredenen om je aan de Windows GUI te houden is zodat je software dat over de GUI gaat (extra knopjes naast de minimize/sluiten, of weetikveel watnogmeer) daar ook mee kan werken. Niets zo irritant als software dat besluit helemaal zijn eigen skin te hebben en dus zich niet kan aanpassen aan je wensen.

Als men het 'gekleurd' wilt, gaat men wel gewoon zelf even in de Windowsinstellingen de thema aanpassen. Er is een goede reden waarom ik mijn thema zet op de oude Win98 look. Zo min mogelijk fratsen langs de randen, zoveel mogelijk ruimte voor de inhoud.

Door Tweakers user Patriot, donderdag 11 juni 2009 03:53

Wat hier een beetje mee samenhangt is een bepaalde structuur die een programma heeft. Die structuur moet gelijk zijn aan dat wat het gros van de programma's gebruikt, zodat ook onervaren gebruikers je programma's kunnen gebruiken. Als mensen gaan zoeken en niet snel vinden wat ze zoeken, dan haken ze erg snel af.

Voor de ervaren gebruiker doe je het niet, je doet het voor de nieuwe gebruiker die niet zo goed met computers om kan gaan en daarom eenheid wil in ál zijn software. Als iets er anders uitziet, of iets niet precies werkt als een ander programma, dan raken ze in de war.

De mensen die hier posten (ik wíl niet dat het er anders uit ziet), is volgens mij (weet het niet zeker) echt niet de grootste groep.

Door Tweakers user gast, donderdag 11 juni 2009 07:35

Een mooie GUI is erg belangrijk IMO, maar éénheid met het systeem waarin je werkt ook. Het programma is toch een onderdeel van het geheel, het is mooi en wennig als dat een eenheid vormt. Maar let's face it, met de Windows Classic omgeving wil je geen eenheid vormen, dat ziet er niet uit :S. Het is het kiezen uit twee kaden.

Door Tweakers user Kaasplank, donderdag 11 juni 2009 08:23

Ik heb er zo'n hekel aan wanneer een programma er compleet anders uit ziet dan standaard windows. Een van de ergste programma's die ik tegen ben gekomen is media info plus. Hoe iemand zo'n gedrocht kan maken en vervolgens denkt van "jah.. zo is het goed". Wat een ramp om mee te werken is dat zeg.

Door Tweakers user Afvalzak, donderdag 11 juni 2009 09:04

Het is inderdaad kiezen tussen 2 kanten, als je een applicatie met een eigen GUI kan maken die niet uit de toom valt tussen andere applicaties is het geen probleem.
Het kan door die kleuren, grotere knoppen etc. natuurlijk een stuk overzichtelijker worden. Zo vind ik die van je Ezilas er erg netjes uit zien.

Het probleem zit hem in een goede middenweg vinden tussen mooi en gebruiksvriendelijk. En als je doelgroep alleen zakelijke gebruikers zijn denk ik dat je al snel op een 'saaie,grijze' GUI terug valt.

Door Tweakers user RoadRunner84, donderdag 11 juni 2009 09:53

Wat belangrijk is, is dat een applicatie consistent is. In Windows / OS X zijn GUI guidelines. Het is van belang dat een gebruiker bepaalde verwachtingen kan hebben van een app, ook als hij die nog niet eens gezien heeft.
Een voorbeeld is: op het kruisje drukken vraagt of ik wijzigingen wil opslaan als dat nog niet gebeurd is. Als een applicatie ineens komt aanzetten met de melding dat ik eerst de huidige bewerking moet afronden, dan zorgt dat voor verwarring.
Een oplossing is door een dialoog te openen voor de transactie, zo kan de applicatie niet gesloten worden voordat de transactie as afgerond of geannuleerd (door op het kruisje van dat dialoog te drukken).
Een ander voorbeeld: ctrl-S slaat het bestand op. Als ik ctrl-S voor een "stand-by" ofzo gebruik, maak ik het programma rommelig.

Dan even over je leden programma: De optie "hoofdmenu" is plat t.o.v. leden, bestuur, etc. Als er een menu "hoofdmenu" is dat de parent is van de andere opties, zet hem dan bovenaan en maak oftewel een tree structure, ofwel een lijnte eronder zodat het als groepkop lijkt te dienen.
Wat doet de optie "afsluiten", als ik de applicatie wil sluiten dan druk ik op het kruisje, ik heb bij dit screenshot geen idee wat deze optie zal gaan doen. Misschien sluit het een database of de edit modus voor dit lid...
Waarvoor dient de optie "terug" bij het lid? Annuleer ik wijzigingen, ga ik terug naar het hoofdmenu, ga ik terug naar het leden overzicht? "Terug" is onderdeel van een hierarchie, maak een breadcrumb balk bovenaan (zoals in vista's explorer vensters waar vroeger de adresbalk was) als je belang hecht aan deze hierarchie, zoniet, laat het dan weg, want via de "leden" optie in de sidebar verwacht ik hetzelfde effect te bereiken.

Door Tweakers user mithras, donderdag 11 juni 2009 10:51

Het is natuurlijk ook niet voor niks zo dat form elementen in websites een standaard style hebben ;) Dat is juist iets wat eenheid geeft te midden van alle verschillen tussen websites.

Ik vind het nog belangrijker dat een OS eenduidigheid geeft. Daar werk je toch altijd mee (en je gebruikt niet altijd websites voor je pc gebruik). Eenduidigheid in je OS is dan ook een stuk belangrijker.

Helaas is Microsoft zo met de Winforms dat alles er nog steeds ouderwets uitziet. Een mooi alternatief vind ikzelf Qt, wat in KDE wordt gebruikt op Linux. Met de release van Qt4 ziet alles er super strak en modern uit. En het mooie: alles ziet er uniform, gelijk en overzichtelijk uit. Er zijn zelfs guidelines over de volgorde van Cancel en Ok bij dialogen! Voor een voorbeeld moet je maar eens zoeken op 'KDE4 screenshots'.

Conclusie: eenheid en duidelijkheid is het belangrijkste. Houd je daarom ook aan de stijlen van de toolkit. Het is vervolgens aan de ontwikkelaar van de toolkit om de grafische elementen te moderniseren en aan de gebruiken om de mogelijkheid te krijgen om ze te stijlen (in kleur, bijvoorbeeld). Dan behoud je in ieder geval uniformiteit binnen je OS.

Door Tweakers user Apache, donderdag 11 juni 2009 11:27

Bij client apps prefereer ik persoonlijk eerlijk gezegd dat applications zich zoveel mogelijk aanpassen aan het platform waar ze op draaien. Maar anderzijds zien we bij webapplicaties zo'n enorm diversiteit en dit lijken mensen ook te aanvaarden.

Ik ben zelf nu al een tijdje bezig met flex, heb ook een jaar op een Flex/j2ee project gezeten, nu jammer genoeg enkel nog j2ee maar als ik de kans krijg wil ik zeker nog eens een flex positie.

De zin om te flexen is niet weg en ben dan ook aan het starten met een klein project samen met een collega waarbij we de tijd hebben genomen om wat te experimenteren qua layout.
http://bbox.homelinux.net:8080/~blacky/cvapp/cvapp.png
en
http://bbox.homelinux.net:8080/~blacky/cvapp/gradients.png

Het voordeel is dat je de vrijheid krijgt om de style volledig aan te passen hoe je wil omdat het standaard toch al niet matched aan het os Een flex applicatie ziet er niet uit als een windows of een mac applicatie want het is cross platform, natuurlijk kan je skins toepassen op elk platform zodat het er toch uitziet als een native applicatie maar dan steek ik liever die tijd en moeite in userfriendly components en presentaties van bijvoorbeeld zoekresultaten te maken dan weer de zoveelste standaard tabel of datagrid waarin je moet liggen turen om de gegevens die je zoekt eruit te vissen.

Dus volgens mij als je van de standaard afwijkt, of het nu in een web omgeving is waar het meer aanvaard word of als client application, maar je doet het met goede ideeën en een stijlvolle UI moet je zeker een een applicatie kunnen neerzetten waar gebruikers graag mee werken.

Door Tweakers user Dred, donderdag 11 juni 2009 12:23

*tegen sommige schenen schopt*

Je applicatie is bedoeld voor verenigingen, niet voor kantoorgebruik in grote bedrijven (^^ grijze omgeving). Daar vind ik dat een beetje kleuren wel kan, natuurlijk kan je kijken voor de boel themebaar te maken enz, maar dat lijkt me voor jouw doeleinden niet nodig.

Persoonlijk vind ik jou layout mooi en duidelijk, lekker grote tekst (met die resoluties van tegenwoordig zit ik op 10cm van me scherm om alles te kunnen lezen, dus wat jij doet vind ik TOPPIE).

Verder zie ik een grote analogie met gewone winforms. Dit is hoe ik het zie:
- links heb je een opengeklapt menu (of een deel hoofdingen van tabbladen)
- titels van "subformulieren"/tabbladen zijn duidelijk groot en vet weergegeven
- de data is op een natuurlijke wijze gegroepeerd, niet alles opeen, geen rare onderverdelingen

mindere puntjes:
- sluit knop: een applicatie word gesloten dmv het kruisje rechtsbovenaan zoals we die al kennen sinds win 3.11 (meer manieren om 1 iets te doen brengt de gebruiker in de war)
- de "simpele" gebruiker zal niet direct weten welk tabblad er open is, ik adviseer een pijltje erbij te zetten en/of een meer opvallende kleur te gebruiker
- waarom staat "Hoofdscherm" onderaan, terwijl het logischer zou zijn om die helemaal bovenaan te zetten?
- Waarom is huisarts in een ander kleur? (waarschijnlijk omdat je erop kan klikken voor meer info of te veranderen ofzo, maar dit is NIET wat een "simpele" gebruiker zal denken ;-) )

dingen om mee op te passen:
- wat gebeurt er als de applicatie geresized word? schaalt alles goed mee?
- voelt het natuurlijk aan, je kan zelf kijken of de performance goed is, maar vraag iemand anders (liefst een NIET-ICT'er) om eens een paar handelingen te doen, observeer tijdens en vraag achter die handelingen of het vlot ging (tip: als hij 5 minuten zoekt achter een knop of een veld mag je terug naar de tekentafel)


Iets dat niets met de layout te maken heeft: toppie zoekfunctie, als iedereen nou eens voor SIMPELE zoekforms gewoon 1 textbox zet ipv een form met 20 verschillende textboxjes voor naam, voornaam, telefoonnummer, blablabla, dan zijn we al een heel stap verder in zake usability!

Door Tweakers user DOT, donderdag 11 juni 2009 12:55

Je applicatie is bedoeld voor verenigingen, niet voor kantoorgebruik in grote bedrijven (^^ grijze omgeving). Daar vind ik dat een beetje kleuren wel kan, natuurlijk kan je kijken voor de boel themebaar te maken enz, maar dat lijkt me voor jouw doeleinden niet nodig.
Het is zo makkelijk: doe helemaal niets, en dan is het perfect themebaar. Hou je aan de regels, en het ziet er fantastisch uit in kleurrijke themes.

Waarom zou jij bepalen dat iemand z'n desktop niet grijs mag zijn? Of donker? Of oranje? Ik heb iemand gezien met een groen-gele desktop. Daar past geen enkele custom skin bij.
Persoonlijk vind ik jou layout mooi en duidelijk, lekker grote tekst (met die resoluties van tegenwoordig zit ik op 10cm van me scherm om alles te kunnen lezen, dus wat jij doet vind ik TOPPIE).
Dit komt doordat je je DPI-instellingen niet hebt aangepast aan je hoge-resolutie scherm. Een 1920x1200 scherm heeft een DPI van 133. Dan ziet 96 er natuurlijk wel erg klein uit. ;)

Door Tweakers user H!GHGuY, donderdag 11 juni 2009 13:03

Helaas is Microsoft zo met de Winforms dat alles er nog steeds ouderwets uitziet. Een mooi alternatief vind ikzelf Qt, wat in KDE wordt gebruikt op Linux. Met de release van Qt4 ziet alles er super strak en modern uit. En het mooie: alles ziet er uniform, gelijk en overzichtelijk uit. Er zijn zelfs guidelines over de volgorde van Cancel en Ok bij dialogen! Voor een voorbeeld moet je maar eens zoeken op 'KDE4 screenshots'.
Winforms past zich mooi aan aan de stijl van jou PC. Als jij de WinXP teletubby look gebruikt dan krijg je teletubby knoppen. Gebruik ja classic Win2k stijl dan krijg je de standaard grijze knoppen. Heeft iemand nog een andere theme ingesteld dan volgt jou knop die mooi.

MS heeft al eeuwen die guidelines die onder andere de volgorde van OK en Cancel specifieren. Lees je dus eerst even goed in.

Door Tweakers user Eguna, donderdag 11 juni 2009 13:18

Bedankt voor alle reacties! Wederom is het duidelijk dat de meningen verschillen. Ook bedankt voor enkele puntjes van kritiek van sommige, ik ga dit mee nemen in mijn applicatie. Zo ga ik denk ik 'Hoofdscherm' veranderen in 'Welkomscherm' o.i.d. want dat is het eigenlijk meer, het is slechts een scherm waar het programma mee start, en toont de naam van de vereniging. Ook ga ik 'Terug' waarschijnlijk hernoemen naar 'Terug naar zoeken'. Een breadcrumb idee bovenaan is nogal lastig, 'Zoeken -> Ledenkaart van Pietje Puk -> Wijzigen van adresgegevens' gaat niet passen, en voegt ook weinig toe vind ik zelf.

Wat theming betreft, ik begrijp dit punt heel goed, maar wederom, in het veld waar ik werk kan ik concluderen dat gebruikers niet eens van het bestaan afweten. Ben het namelijk nog nooit tegengekomen.

Het programma zal ook goed uitrekken met andere DPI instellingen, en is ook te vergroten naar ieder formaat en alles rekt mee, met als minimale grote 1024x768.

@DOT,
Ik betwijfel of het aanpassen van de DPI aan de hand van de gekozen resolutie écht gebruikelijk is. Al sinds de kleine schermpjes is het 96 DPI geweest, en 96 is prima leesbaar op alle schermen naar mijn idee.

@Apache,
moet even zeggen dat die screenshots er -erg- goed uitzien, heel goed ontwerp! Ik ben blij ook om te zien dat ik niet helemaal alleen ben met een 'alternatief' ontwerp :)

Bedankt nogmaals voor alle tips.

[Reactie gewijzigd op donderdag 11 juni 2009 13:21]


Door Tweakers user DOT, donderdag 11 juni 2009 13:49

@DOT,
Ik betwijfel of het aanpassen van de DPI aan de hand van de gekozen resolutie écht gebruikelijk is. Al sinds de kleine schermpjes is het 96 DPI geweest, en 96 is prima leesbaar op alle schermen naar mijn idee.
Ik ken een hoop mensen van zo in de 50, die de DPI hoger instellen op hun laptops omdat ze het anders allemaal niet kunnen lezen. Ik heb het ze niet eens verteld!

Door Tweakers user Eguna, donderdag 11 juni 2009 13:53

True, in dat geval ben ik het er mee eens dat de DPI verhoogd wordt. Ik doelde echter op je post waarin min of meer stond dat resolutie / DPI samen schalen. Hoe dan ook, DPI is geen enkel probleem, ookal heb ik gekozen voor een standaard iets groter dan normaal font.

Door Tweakers user DOT, donderdag 11 juni 2009 14:02

Ook dat is een kwestie van theming volgen. De gebruiker stelt in hoe groot (in points) hij z'n fonts wil hebben. DPI en resolutie schalen weldegelijk samen, omdat een correcte DPI de fysieke afmetingen van een point waarborgt.

Windows Vista of 7, ik weet niet precies, vraagt ook of je de DPI hoger wilt instellen.

Door Tweakers user RoadRunner84, donderdag 11 juni 2009 15:34

Zo ga ik denk ik 'Hoofdscherm' veranderen in 'Welkomscherm' o.i.d. want dat is het eigenlijk meer, het is slechts een scherm waar het programma mee start, en toont de naam van de vereniging.
Ook ga ik 'Terug' waarschijnlijk hernoemen naar 'Terug naar zoeken'.
Wat is er mis met het gewoon bij de rest te zetten en het "Vereniging" te noemen?
Ik zou het gewoon "Zoeken" noemen, tenzij de inhoud van het zoekveld hetzelfde blijft, maar ook hier: ik verwacht dat als ik op "Leden" klik, ik ook de zoekfunctie tepakken krijg.
Een andere optie is om de zoekbalk bovenin te laten staan, met een pulldown pijltje ernaast, zodra je op het pijltje drukt of een nieuwe zoekquery typt komt het zoekscherm weer tevoorschijn.
My second dime...

Door Tim, donderdag 11 juni 2009 17:06

Onbegrijpelijk hoe weinig respect sommigen hebben voor het door iemand gekozen thema.

De gebruiker is degene die hoort te bepalen hoe een applicatie eruit ziet, en softwareleveranciers hebben daar in principe NIETS mee te maken. Je breekt de gehele look en feel van een omgeving. Ik hoop maar dat mensen met een visuele handicap niet gehinderd worden door je regenboogkleurige fouten, mocht dat wel zo zijn, dan ben je pas echt fout bezig.

Door Tweakers user Apache, donderdag 11 juni 2009 20:28

@Eguna, bedankt, maar er is nog enorm veel werk en dat was voornamelijk een mockup om wat uit te testen :)

Maar de mensen die nu zo hard gekant zijn tegen applicaties die er "anders" uitzien, webapplicaties zoals gmail, windows live applicaties, yahoo mail, alles heeft zijn eigen UI, dat accepteren mensen gewoon, zouden jullie dat liever ook allemaal in dezelfde stijl hebben?

Door Tweakers user DOT, donderdag 11 juni 2009 22:23

Liever wel, en dat is ook mogelijk:

Je komt al een heel eind door met forms aan de slag te gaan. Zolang je buttons, tekstvelden, etc geen stijl geeft, dan volgt dat perfect het system theme. Vervolgens kan je in je stylesheet de kleuren afstellen op system colors. In CSS3 worden de mogelijkheden nog wat uitgebreid: System Appearance.

Maar aangezien het web sowieso een grote "pile o' shit" is, maakt het me verder weinig uit. Webapps zijn imho ook niet het ei van columbus. Er wordt al 20 jaar gepraat over dat alles webbased gaat worden, maar intussen zitten we nog steeds met client apps die gebruik maken van internet services.

Door Tweakers user TheFes, donderdag 18 juni 2009 21:23

Ik zag dat je op mijn persoonlijk profiel gereageerd had :) Ik bedoelde meer dat ik het een erg interessant programma vindt, vooral om te gebruiken binnen de scouting groep waar ik actief ben. Dus als je nog iemand zoekt die het wil testen en actief bugs en verbeterpunten wil doorgeven en daar verder niets (behalve dan het gebruiksrecht op het programma) voor terug wil dan laat het maar weten :)

Je kunt eventueel reageren via de mail, dan zie ik het wat sneller ;) Mijn e-mail adres staat in mijn profiel.

Door Tweakers user Stiggy, dinsdag 14 september 2010 14:06

Een beetje late reactie, maar ik vind consistentie op een platform toch ook wel prettig. Ik hou er zeker van als iets er mooi uit ziet, maar sommige UI's lijken wel ter meerdere eer en glorie van de designer gemaakt te zijn, en niet uit het oogpunt van de gebruiker (die tooltjes die je bij je moederbord krijgt zijn een berucht voorbeeld).

Wat me opvalt is dat niemand hier WPF noemt. Met deze WinForms opvolger kun je een desktop applicatie maken waarbij de de vrijheid van web based technologie mbt styling e.d. hebt. Als ik Eguna's verhaal lees dan lijkt me WPF de ideale technologie voor wat hij wil bereiken.

Door Tweakers user jediah, donderdag 23 september 2010 09:52

Dat is natuurlijk de grootste onzin dat alles er zo koud en stijf uit moet zien, het kan helemaal geen kwaad om er een mooie lay-out aan te geven. Ik denk gewoon dat de meeste programmeurs niet in staat zijn om er een design op te bouwen.

Reageren is niet meer mogelijk