Heeft u problemen met het kiezen van het juiste pictogram voor een specifiek probleem? Werken met uw ontwikkelaar om het best mogelijke resultaat te behalen voor uw klant? Dit artikel geeft je inzicht in principes, probleemoplossing en samenwerking die nodig is om iets te bedenken dat past!
Pictogrammen behoren tot de belangrijkste visuele aspecten van webontwerp. Het niveau van detail, stijl en toepassing is afhankelijk van een aantal verschillende dingen. Ik heb onlangs gewerkt aan een aantal websites die zeer specifieke pictogrammen vereisen om subtiele metaforen te communiceren.
Dit bericht gaat door een recent voorbeeld, waarin ik een waarschuwingspictogram moest maken voor een documentstoringsstatus. Het zal een lineaire gids zijn van mijn denkproces en samenwerking met de ontwikkelaar, maar ook de volgende stadia raken: -
Deze post is niet bedoeld om uitgebreid te zijn, maar zal je helpen door een voorbeeld uit de echte wereld te bekijken.
Soms bouwt u uw website helemaal opnieuw en moet u een aantal pictogrammen genereren om bepaalde dingen visueel te communiceren. Vaak ontvang je een aanvraag van een ontwikkelaar of klant voor een uniek pictogram. Het verzoek in dit voorbeeld kwam van een ontwikkelaar. Hij had een foutstatuspictogram nodig voor een document. Eerst stelde hij een pictogram voor een donkere pagina voor met een X erachter om te gebruiken in gevallen waarin een documenttype niet wordt ondersteund, of een document om de een of andere reden niet wordt geladen. Hij had zoiets als dit in gedachten:
Niet slecht toch? Ik heb het een beetje gestript en naar hem gestuurd ...
Maar we waren het erover eens dat het op de een of andere manier moest verwijzen naar het documentpictogram, omdat het specifiek bedoeld was voor een fout bij het laden van documenten.
We moesten het pictogram als geheel beschouwen, dus we hebben een paar andere ideeën omgegooid.
"Hoe zit het met het pictogram 'meldingen'?"
wij dachten. Maar dat was al in gebruik voor klinische waarschuwingen.
Bij het werken met een complete icon set is het belangrijk om inzicht te hebben in de set iconen. Anders zou je per ongeluk een metafoor kunnen hergebruiken die al ergens anders is gebruikt.
Vervolgens hebben we het documentpictogram met een driehoek eromheen beschouwd:
Dit was slechts een suggestie van de ontwikkelaar, maar de ervaring vertelde me dat het te ingewikkeld was. Het zorgde voor een ongemakkelijke metafoor die niet direct genoeg communiceerde.
Vervolgens deed ik de suggestie om binnen een cirkel een grote 'X' te gebruiken.
Dit was ook niet optimaal, omdat het gecommuniceerde bericht er een was Gevaar! Het was waarschijnlijk veel te overdreven.
De les hier is om de context van uw pictogram te bekijken. Kleur en zichtbaar gewicht is een belangrijke manier om dit te communiceren. Rood wordt bijvoorbeeld traditioneel gebruikt om mensen te waarschuwen, terwijl lichtere kleuren zoals grijs neutraler zijn en sub - communiceren dat alles in orde is!
Subcommunicatie is een semiotische taal; iets dat ook in de typografie thuishoort.
Een decoratief lettertype sub-communiceert bijvoorbeeld een vrouwelijk karakter, terwijl een met de hand getekend lettertype iets meer speels en kindvriendelijker kan communiceren..
Wat probeer je te sub - communiceren met je icoon?
Met het documentfoutpictogram probeerde ik bijvoorbeeld foutmeldingen op te roepen die sub-communiceerden op een manier die niet al te veel paniek veroorzaakte.
Ik herinnerde me de foutmeldingen die ik kreeg als mijn internetverbinding verbroken werd; ze waren perfect. Niet overdreven, maar op subtiele wijze laat de gebruiker weten dat er iets mis is.
Absoluut de juiste richting.
Dit laatste voorbeeld uit de Chrome-browser was perfect voor wat ik nodig had! Subtiel, maar de gebruiker laten weten dat er iets mis is. Alles, van de grootte van het pictogram tot de gebruikte grijze kleur, helpt de gebruiker de ernst van het probleem te begrijpen, maar is niet zo overdreven dat het paniek veroorzaakt.
Het laatste pictogram gemaakt in dit geval was eenvoudig, maar communiceerde ook de juiste boodschap.
De kunst om pictogrammen te gebruiken is iets dat een beetje ervaring en een oog voor ontwerp nodig heeft, maar het kan worden aangepakt door bepaalde principes te volgen zoals die we hebben besproken. Als uw pictogram te dubbelzinnig is, maar de metafoor past, overweeg dan een label te gebruiken als een visuele cue om gebruikers te helpen de informatie te identificeren. Bedankt voor het lezen, voel je vrij om je eigen ervaringen met icoonontwerpen te delen in de reacties!