Share
Het ontwerpen van effectieve en vriendelijke gebruikersinterfacemeldingen is een kunstvorm op zich. Terwijl ontwerpers veel tijd besteden aan het maken van het grootste deel van de hoofdgebruikersinterface, kan het ontwerpen van berichten een soort na-gedachte lijken. Feedback is eigenlijk de lijm tussen gebruiker en interface; zonder dit kunnen gebruikers in de war raken.
Voordat we verder gaan, moeten we misschien een kijkje nemen naar voorbeelden uit de praktijk van UI-feedbackberichten:
De meest voorkomende foutmelding die u zult tegenkomen is het 404-pagina niet gevonden bericht. Dit gebeurt wanneer een gebruiker per ongeluk de verkeerde URL heeft getypt of omdat de vorige URL niet langer toegankelijk is.
Website-downtime-berichten verschijnen wanneer de server letterlijk uitvalt, soms onverwacht:
Er zijn gevallen waarin het is gepland:
Deze berichten zijn ontworpen om de gebruiker een resultaat te laten zien nadat ze een actie hebben uitgevoerd:
In dit geval vertelt Versions de gebruiker dat de download is gestart en deze kan worden gevonden in de downloadmap:
Een standaard bericht in de top van de site dat gebruikers eraan herinnert om hun e-mail te verifiëren:
Zootool gebruikt een hele pagina om de gebruiker te vertellen hun e-mails te verifiëren voordat ze doorgaan:
En deze bedankt de gebruikers voor het verifiëren van:
Formulier-berichten worden ook regelmatig aangetroffen. De meest voorkomende voorbeelden worden ervaren tijdens de validatie, die optreedt wanneer een gebruiker een formulier verzendt waarna een script controleert of er fouten zijn opgetreden:
Er kan wat creatief gebruik van formulierberichten zijn, ze hoeven niet noodzakelijk alleen voor fouten te verschijnen. Ze kunnen worden gebruikt als handige handleiding die de gebruiker helpt een formulier in te vullen:
Dit is een voorbeeld van een bericht dat verschijnt nadat een formulier is ingevuld:
De lijnen tussen web en native applicaties worden steeds vager. Tal van webapplicaties zijn ontworpen om zich als een native applicatie te gedragen. Bijvoorbeeld, 750words.com heeft een gromachtig pop-upbericht wanneer u een sneltoets gebruikt om een item op te slaan:
U kunt ook berichten ontwerpen die op goed gepositioneerde gebieden worden weergegeven om gebruikers aan te moedigen aanvullende acties uit te voeren. Twitter.com informeert gebruikers dat ze updates hebben:
Het ontwerpen van berichten voor de mobiele interfaces is een andere uitdaging vanwege de kleine vormfactor; berichten moeten duidelijk zijn.
Nogmaals, indien goed getimed, kan een bericht zo worden ontworpen dat het als tip fungeert:
Het kan ook worden gebruikt als een vorm van aanmoediging voor de gebruiker om een taak te voltooien:
We moeten ons in de schoenen van onze gebruikers verplaatsen. Wat wilt u dat ze voelen als zij uw website bezoeken of uw applicatie gebruiken? Je zou willen dat ze het gevoel hebben dat ze je kunnen vertrouwen en het zou een extra bonus zijn als ze zich echt opgetogen zouden voelen tijdens het gebruik van jouw website. Als er niet voldoende wordt nagedacht over het ontwerpen van uw berichten, kan dit voor veel frustratie en teleurstelling zorgen.
De meeste gebruikers bezoeken een website of gebruiken een applicatie om een bepaald doel te bereiken. Om meer te weten te komen over een bedrijf, om een product te kopen, om een taak te volbrengen met behulp van een applicatie, enz. Stel je bijvoorbeeld voor dat je een gebruiker bent die iets op een website probeert te kopen. Kun je je voorstellen hoe de gebruiker zich zou voelen als er niets zou zijn gebeurd nadat hij op 'toevoegen aan winkelwagentje' had geklikt? Er moeten geschikte wegwijzers zijn die aangeven waar een actie verkeerd is gegaan:
Een ander scenario is een gebruiker die een belangrijke taak op uw website probeert uit te voeren. Misschien kan de gebruiker proberen om huur te betalen via een online financiële website waar u verantwoordelijk voor bent. Kun je je de angst, frustratie en zorgen voorstellen als de website plotseling stopt met werken in het midden van een financiële transactie??
Het bovenstaande foutbericht kan de oorzaak van de fout niet identificeren - mogelijk frustrerend voor de gebruiker die probeert een transactie te voltooien.
Laten we eens kijken naar enkele best practices met betrekking tot feedback en berichten.
Dit Dealotto-bericht is een goede demonstratie van simpel maar specifiek zijn:
Niemand zal deze validatiefouten missen op dit inschrijfformulier op Vimeo:
37signals hebben dit artsy looking blank lei-bericht gemaakt om gebruikers een idee te geven van wat ze moeten doen als ze geen items hebben:
Bent u ooit een interface tegengekomen die probeert elke centimeter van uw aandacht te krijgen? Het maakt gebruik van elke beschikbare UI-conventie, modale vensters, inline-berichten, berichtenberichten van topniveau om te proberen iets voor u te doen.
Te duidelijk of onophoudelijk zijn, kan het tegenovergestelde effect hebben; de gebruiker die opgeeft op de interface.
Dit modale venster verscheen eerder toen je voor het eerst een nieuwsartikel van Huffington Post probeerde te lezen. Het kan verwarrend zijn voor gebruikers die mogelijk gedacht hebben dat Twitter nodig was om het artikel te lezen.
Bij het weergeven van een bericht, of het nu om een fout of een melding gaat, zal het altijd nuttig zijn om extra tips of hulp aan de gebruiker te geven. Dit is vooral waar in de context van sitefouten, vaak zijn ze onvermijdelijk, maar we kunnen de ervaring zo pijnloos mogelijk maken.
Vimeo biedt nuttige handleidingen voor andere secties, compleet met een hulplink onderaan:
Kleine hulppictogrammen in uw formulier kunnen ongelooflijk nuttig zijn:
Deze helptooltip gaat iets verder, inclusief een link waarop de gebruiker kan klikken voor meer informatie:
Invisionapp biedt een handige tip terwijl de afbeelding wordt weergegeven:
Het ontwerpen van goede feedbackberichten draait allemaal om anticiperen. Dit omvat het anticiperen op:
Kicksend zag dat sommige van hun gebruikers hun e-mails niet verifieerden. Ze analyseerden hun gegevens en ontdekten dat ze simpelweg de verkeerde e-mailadressen typt door veel voorkomende typfouten. Daarom hebben ze een jQuery-plug-in, mailcheck.js, ontworpen om te controleren op veel voorkomende typfouten wanneer gebruikers hun e-mailadressen invullen. Met zo'n eenvoudige controle verminderden ze verificatie-e-mail met 50%:
Fab.com verwachtte dat sommige van hun gebruikers hun accounts zouden annuleren. Hier proberen ze een verloren oorzaak te redden door dit bericht te verstrekken wanneer u een account probeert te annuleren:
Soms kunnen anticiperende scenario's levensreddend zijn:
Of het kan helpen bij het terughalen van een mogelijk verloren verkoop:
Het draait allemaal om de kleine details. Dit inlogscherm van Gmail verwacht dat je misschien bent vergeten dat je je wachtwoord hebt gewijzigd:
Meer inspiratie van Gmail; Ik ben er zeker van dat dit voor ontelbare mensen nuttig is geweest door eenvoudig te anticiperen op een veelvoorkomende gebruikersfout zoals het vergeten van bestanden bij te voegen:
Voortgangsindicatoren vormen een belangrijke vorm van UI-berichten. Foursquare heeft een subtiel bericht ontworpen om gebruikers te informeren dat ze uw locatie krijgen en interessante plaatsen vinden terwijl de gegevens worden geladen. Dit levert een tweeledig doel op.
.
TeuxDeux anticipeert op synchronisatie is belangrijk voor een takenlijst en waarschuwt een gebruiker dat de internetverbinding verbroken wordt met een humoristische melding:
Er zijn een hoop andere voorbeelden over hoe je kunt anticiperen op en bouwen aan "verdedigingen" voor je gebruikersinterface.
We hebben al eerder gezegd dat het belangrijk is om te denken namens de gebruiker. Het minimaliseren van hun frustratie is cruciaal en we kunnen zelfs een stap verder gaan. Veel gebruikers staan voor een lange tijd voor een scherm. Door empathie te tonen of wat humor in te brengen, verandert het een frustrerend of alledaags scenario in een mogelijk amusant scenario.
Deze kapotte robot laat je glimlachen, toch??
Voor meer goede voorbeelden voor 404 pagina's, kunt u deze Pinterest-verzameling raadplegen. Afgezien van fouten, kunnen zelfs eenvoudige meldingen je laten glimlachen tijdens een lange dag:
Velen van ons worstelen met inbox zero, maar misschien is het de moeite waard voor Gmail:
Dit bericht van Buffer gebruikt een beetje vleierij en humor om meer aanmeldingen te ontvangen:
Een ander meldingsbericht dat waarschijnlijk een glimlach op uw gezicht tovert door middel van slimme copywriting:
Dit uitstekende kaartspel van Aaron Walter, hoofdontwerper van Mailchimp, is een goede introductie voor Emotioneel Ontwerpen voor diegenen die geïnteresseerd zijn in meer informatie.
Ik hoop dat deze achterstand op het maken van berichten voor je gebruikersinterface nuttig was. Ik heb hieronder aanvullende bronnen opgenomen voor verder lezen en verkennen. Er is geen zwart of wit in het ontwerpen van berichten, maar veel empathie, ervaring en natuurlijk feedback van gebruikers zelf.
Wees niet bang om een aantal iteraties te doorlopen om het gevoel van uw berichten goed te krijgen. Vraag mensen om feedback, begin met het communiceren van het bedoelde bericht aan de gebruiker, en als dat werkt, laat dan een beetje humor of emotie horen om de algehele ervaring te verbeteren. Probeer altijd behulpzaam te zijn!
Voel je vrij om vragen in het opmerkingenveld te plaatsen. Feedback is altijd welkom om ons te helpen nog betere artikelen voor u te schrijven bij Webdesigntuts+.
Accentsconagua