In tutto il Web, in qualsiasi momento, qualcosa sta andando storto. Non è un problema che prendiamo alla leggera, ma si verifica ancora! No, non sono qui per parlare della nostra eccessiva dipendenza dagli strumenti di terze parti o IE6 (in particolare), sono qui per parlare dei problemi del sito e di come evitarli.
Occasionalmente questi bug sono piccoli difetti visibili, che si verificano a seguito di codice mal gestito; o in molti altri casi, Internet Explorer. Altre volte derivano dal naturale processo di invecchiamento di un sito e dalla sua crescente raccolta di pagine. In questo articolo esploreremo il mondo dei singhiozzi basati sul sito e come possiamo garantire che i nostri siti non vengano associati alla balena fallita!
introduzione
Negli ultimi anni, abbiamo posto un grande sforzo come industria, seguendo gli argomenti che ricevono molta attenzione. I temi alla moda comprendono il design reattivo, l'esperienza utente, la psicologia e le lingue infuse di buzzword che usiamo quotidianamente come HTML5 e CSS3. Eppure, mentre questo sta accadendo, una delle parti fondamentali della proprietà del sito, il processo di manutenzione, raramente riceve molta attenzione. È fondamentale per l'usabilità, è fondamentale per progettare e senza di essa i siti sarebbero un disastro. Tuttavia, quando si tratta di ridurre i tassi di errore, molti siti (anche più piccoli, più facili da mantenere) sono molto al di sotto del livello.
Cos'è il design difensivo?
Combattere queste forze del male, che si tratti di bug o di errori ricorrenti, è una battaglia in corso che non può essere vinta durante la notte. Più o meno allo stesso modo di Ash dal franchise di Evil Dead, cariciamo all'infinito in azione con le nostre fidate motoseghe a codice e le bacchette magiche per salvare la situazione. Il processo di pulizia dei siti e la garanzia che siano il più user-friendly possibile viene indicato come design difensivo.
Essenzialmente, il nostro obiettivo è quello di supportare i nostri siti nei momenti di difficoltà, eliminare quegli errori relativi a file persi o l'indisponibilità delle risorse, assicurare che i nostri layout facciano ciò che dovrebbero, aiutare l'utente a completare le azioni ed evitare di gettare i visitatori un collo di bottiglia di confusione. Il design difensivo serve tanto a ridurre la confusione degli utenti quanto a iterare i bug fuori dal sistema.
Perché questa materia?
Dato che la maggior parte degli utenti di Internet sono mortali, non saggio per i problemi che i supereroi disadattati sono in grado di attraversare con facilità, abbiamo bisogno di fare attenzione per evitare di causare loro stress eccessivo. I visitatori sono creature temperamentali che potrebbero abbandonare il tuo sito alla ricerca di un'opzione di navigazione più semplice dopo aver subito troppi errori. Se è possibile fornire un sito che carica rapidamente, funziona in modo efficace, gestisce gli errori (nel modo migliore possibile) ed evita di alienare l'utente con i blocchi stradali, si aumentano le probabilità di successo. Dopo tutto, è più probabile che un utente felice e contento rimanga un cliente!
Legacy of the Lost
Se c'è una cosa che non sopporto, è l'obtrusività online. Quando le cose vanno seriamente male, in primo luogo può scoraggiare la visita del sito; o se frequenti regolarmente il dominio, preoccupandoti di tornare più tardi. In questa età moderna di accesso Internet globale 24/7; problemi come downtime, risorse mancanti o siti invadenti che si lamentano perché l'utente non ha JavaScript abilitato o Flash disponibile sul proprio dispositivo iOS non dovrebbe ancora accadere. Quindi vediamo come puoi ridurre questi problemi.
Server interruzioni
A un certo punto o in un altro, abbiamo tutti incontrato disavventure relative al server. Che si tratti di problemi DNS, di una spesa eccessiva per la larghezza di banda assegnata, di tempi di inattività per la manutenzione o di un semplice malfunzionamento che ha provocato il fallimento di Twitter. È il tipo di errore che non possiamo permetterci di ignorare perché, a meno che non facciamo qualcosa, il sito diventi non disponibile per tutti, il che è piuttosto un pensiero spaventoso!
Considera quanto segue:
Backup religiosamente: Questa è una considerazione semplice, ma è la più critica. La corruzione dei file, la perdita di dati e altro possono accadere (per te!), E chi non ha il backup ha più da perdere. Si dovrebbe se nient'altro svolge questa azione su base settimanale o mensile in modo coerente.
Accesso offline: Anche con la disponibilità di Internet così diffusa, non possiamo aspettarci che i nostri utenti abbiano accesso ai nostri siti 24 ore su 24, 7 giorni su 7. Garantire che le tue pagine funzionino in caso di perdita di una connessione, consentendo download e l'accesso offline faciliterà quelli con connettività instabile terminalmente.
Usa un CDN: Le reti di distribuzione dei contenuti sono sorprendenti. Memorizzano le cose che devono essere ripetute e possono ridurre i costi della larghezza di banda. Se non vuoi subire un'interruzione perché il tuo host dichiara di aver utilizzato tutta la larghezza di banda, questo può sicuramente aiutare i tuoi siti.
Pagine di stato: Se si prende un sito per manutenzione, ovviamente questo dovrebbe essere fatto solo in situazioni estreme. Ogni volta che si verifica un periodo di inattività pianificato o pianificato, informa i tuoi utenti sul punteggio e fornisci una pagina di stato con i tempi e i rapporti sui progressi.
Aggiornamenti social: I social network come Facebook e Twitter sono diventati estensioni dei nostri siti. Pertanto, se l'idea dell'hosting di backup non è la tua cosa e non hai bisogno di una rete di sicurezza al 100% di uptime, assicurati di tenere aggiornati i visitatori con tweet e commenti.
Risorse mancanti
Il temuto errore 404 è diventato parte della nostra cultura, con praticamente ogni sito che ne soffre in un determinato momento o in un altro, e ogni utente ne ha incontrato uno durante il suo tempo online. Ciò potrebbe includere un collegamento a un'immagine che è scomparsa da quando è stata riprogettata o una pagina che non esiste più negli archivi. Assicurati di cercare e distruggere queste bestie rotte e correggere gli errori invocati dall'utente.
Considera quanto segue:
Cerca e distruggi: Trattare con pagine o file mancanti inizia con la caccia ai gremlins su base regolare. Puoi individuarli quando fai clic sulle tue pagine oppure puoi cercare strumenti come il tuo pacchetto di analisi o rilevatori di errori automatici come Xenu Link Sleuth.
Informazione architettura: Se ci sono colpevoli di un tutt'uno, i progettisti non mantengono gli archivi dei loro siti e lasciano che le vecchie pagine cadano in rovina. Se si ridisegna un sito o si apportano aggiornamenti significativi, assicurarsi che i collegamenti morti vengano reindirizzati in modo appropriato alla nuova posizione.
Collegamenti di terze parti: Questa è una delle cause principali del link rot. Se si collega al sito di qualcun altro e scelgono di riprogettare (o pulire), i collegamenti alle pagine potrebbero evaporare. Anche se non possiamo costringere gli altri a seguire il nostro esempio, sii pronto a eliminare i link morti o rimappare la loro posizione.
Bug creati dall'utente: Amarli o odiarli, il tuo utente impone il loro viaggio intorno a un sito. Se un visitatore tenta di accedere a pagine che non esistono digitando un refuso, si verificheranno degli errori. Gli URL e i reindirizzamenti amichevoli possono aiutare a evitare questo, così come monitorare i registri di traffico per individuare eventuali errori.
404 pagine amichevoli: Come tutti sappiamo, i messaggi di errore del browser predefinito non sono molto amichevoli. La maggior parte delle persone non capirà che cos'è un errore 404, per non parlare di come risolverlo. Creando pagine di errore personalizzate, puoi indirizzarle nella giusta direzione e offrire alcuni consigli utili.
Tecnologia non supportata
Mentre le lingue come l'HTML hanno fornito un modo aperto, per lo più compatibile, per garantire che il nostro lavoro funzioni per tutti, le altre tecnologie non sono state così fortunate. In alcuni casi, il problema riguarda i livelli di adozione di un sistema proprietario, in altri; è solo il fatto che la cosa su cui facciamo affidamento può essere disabilitata. In tutti i casi, non possiamo permetterci di ignorare i problemi che ciò può causare.
Considera quanto segue:
Attenzione ai flash: Mentre HTML5 sta contribuendo a fornire una buona soluzione a questo problema, Flash non è così popolare come un tempo. Con Adobe che taglia lo sviluppo da molti dispositivi portatili e iOS che non hanno nulla da iniziare, è necessario degradare con garbo il contenuto alternativo.
Script non intrusivi: Siamo diventati dipendenti da JavaScript. Al di là della bella sorpresa che gli scripting non dovevano essere usati per il male (anti script di right-click) e il folle successo di jQuery, ora dipendiamo quotidianamente da esso. Assicurati solo che quelli senza di essa possano navigare anche nel sito.
Alternative di immagine: Un'immagine potrebbe dire 1.000 parole, ma per i non vedenti o un motore di ricerca, sarà utile quanto una teiera di cioccolato. Garantire che tutte le immagini contengano testo alternativo è essenziale se si vuole essere protetti da tali problemi di utilizzo.
Feedback del visitatore: Mantenere un sito è un lavoro duro, perché nella maggior parte dei casi, i bug sono non intenzionali dopo gli effetti che non si notano prima di andare in diretta. Incoraggia i tuoi utenti a farti sapere se individuano bug o errori, poiché probabilmente individueranno cose che ti mancheranno del tutto.
Formati del documento: Il design difensivo non riguarda solo il patching del codice. È inoltre essenziale assicurarsi che i file continuino a rimanere visibili negli anni futuri. Offri sempre più formati per il tuo testo e i tuoi file multimediali e non aver paura di aggiornare la selezione mentre aggiorni un sito.
Layout sostenibili
Sembra che molti Web designer stiano segretamente tradendo i loro coniugi, rannicchiati di fronte ai monitor dei loro computer dando occhiate occhiate ai responsive web design e pensando a quanto siano in pixel love. In questa epoca di desiderio di design, ha senso solo coprire alcuni dei problemi di cui abbiamo bisogno per difendere la nostra grafica contro.
Reattiva flessibilità
Il design difensivo non riguarda solo gli errori evidenti che infastidiscono i nostri utenti fino al punto di attirare i loro computer su un bel bagno caldo. Ci impone di pensare fuori dagli schemi e cercare di evitare i tipi di lamentele comuni, che possono rompere un layout o rendere un progetto inutilizzabile. Ci sono molte questioni generali relative all'estetica di una pagina, che possono essere risolte solo con un po 'di buon senso.
Considera quanto segue:
Evita il design del dispositivo: Viviamo in un'era in cui vengono utilizzati tutti i tipi di strumenti per accedere ai nostri siti. Dai tablet alle televisioni, dai telefoni ai PDA, dobbiamo assicurarci che i nostri siti funzionino su quante più piattaforme possibili. Per ridurre i problemi, rendere il tuo sito reattivo, aiuta davvero.
Multimedia adatto: Audio e video possono portare ulteriori livelli di profondità al tuo sito e aiutare a ritrarre il contenuto in un ambiente più coinvolgente. Se offri tale funzionalità, assicurati di offrire trascrizioni per coloro che non hanno la possibilità di utilizzare i media o che non dispongono della larghezza di banda.
Stampante compatibile: Potrebbe scioccare qualcuno di voi, ma le persone continuano a stampare pagine! Sì, per tutte quelle masse che bruciano gli alberi, ti consigliamo di assicurarti di offrire un layout adatto alla stampa che taglierà via tutto ciò che è inutile e non funzionale sulla carta: come pubblicità e navigazione.
Visualizzazioni incoerenti: Il modo in cui le persone sperimentano il tuo sito potrebbe essere diverso a seconda di cosa stanno utilizzando per navigare sul Web. Per evitare che i layout si interrompano su dispositivi come i telefoni che supportano il contenuto inclinabile in modalità verticale e orizzontale, assicurati di utilizzare le query multimediali per regolare se necessario.
Oggetti confusionari: Sottolineare il testo e colorarlo di blu non è mai una buona idea se quell'oggetto non è un link cliccabile. Inoltre, nascondere un link cliccabile tra una massiccia massa di testo equivale alla sua capacità di confondere gli utenti. Assicurati che i visitatori possano identificare dove devono fare clic su Avanti.
Supporto per browser incrociati
I browser Web sono diventati la rovina delle vite di molti designer. Trascorriamo dei giorni mettendo un certo codice in un bellissimo formato, solo per occasionalmente trascorrere ore aggiuntive, frustrando supplichevole con il browser che non farà come si dice. Se sei il designer, potresti voler dire "al diavolo", ma se sei un utente e segui la stessa filosofia, è un visitatore che hai perso per un problema visibile.
Considera quanto segue:
Regole di popolarità: Se un sito sta per resistere alla prova del tempo, deve assicurarsi che funzioni tra la varietà di browser disponibili per gli utenti. Verifica sempre il tuo sito con i più comuni (Chrome, Firefox, Safari, Opera) e quelli fastidiosi (Internet Explorer).
Codice non supportato: Quando si ha a che fare con linguaggi come SVG che soffrono persistentemente di livelli misti di supporto, assicurarsi di includere alternative pertinenti. Ciò potrebbe richiedere l'inclusione di un altro linguaggio (come VML per IE6-8), ma vale la pena evitare le funzionalità mancanti.
Standard Web: Più di una buona pratica di ogni altra cosa, paga i dividendi per convalidare il codice che scrivi e separare struttura, stile e comportamento. Non solo aiuterà a ridurre la probabilità che si verifichino anomalie del codice, ma aiuterà anche a mantenere le pagine con relativa facilità.
Supporto legacy: Abbiamo già menzionato la necessità di provare nei browser più diffusi, ma se utilizzi Internet Explorer, saprai che ogni versione si comporta come un browser completamente diverso. Assicurati di mantenere un ciclo di supporto per i vecchi browser (se ci sono abbastanza persone che li usano).
Script rotti: Se si utilizza lo scripting lato server, fare attenzione ai messaggi di errore che possono essere visualizzati sullo schermo dell'utente se si verifica un errore nel codice. Sarebbe più utile per gli script inviare via e-mail eventuali segnalazioni di errori generati e fornire una notifica di errore utente più amichevole.
Esigenze di accessibilità
Sebbene il design dell'esperienza utente sembri fare la maggior parte della gloria rispetto al fatto che anche i programmatori e i programmatori siano entusiasti di come mantenere felici i clienti, l'accessibilità in molti casi viene spesso trascinata sotto il tappeto. È una statistica spaventosa che la maggior parte dei siti oggi è ancora inaccessibile e questo deve cambiare. Soprattutto perché tali problemi potrebbero bloccare un'intera demografia dal tuo sito.
Considera quanto segue:
Solo testo Situazione: Garantire le credenziali di accessibilità richiede uno sforzo, ma un buon inizio è garantire che tutto ricada su un'alternativa testuale che può essere letta dagli screen reader. Scarica il browser di testo Lynx e scopri come funziona il tuo sito in un ambiente estremo.
Design simpatico: Uno dei motivi per cui i siti tendono a non riuscire ad aiutare gli utenti a raggiungere gli obiettivi è perché l'enfasi tende ad essere sulle immagini patinate. Mentre rafforzi il tuo sito, critichi e giustifichi tutto nella pagina, rimuovendo o semplificando ciò che non riesce a fare il suo lavoro senza intoppi.
Alternative utili: Gli utenti dipendenti dall'accessibilità tendono ad avere un margine inferiore per l'errore nella difesa del sito. Se qualcosa non viene tenuto in considerazione, può rendere totalmente inutile una parte critica di un sito. Se è possibile offrire più di un metodo per raggiungere un'attività richiesta, farlo!
Documentazione: Quando le cose vanno male, i visitatori chiedono risposte, non vogliono sentirsi come se fossero soli e indifesi. Se il tuo sito è piuttosto complesso o se stai fornendo un'app Web, assicurati di documentare tutte le funzionalità e fornire utili strumenti per la risoluzione degli errori.
Test di usabilità: Quando si avvia un nuovo sito o servizio, l'opportunità che si verifichino errori è spesso maggiore perché ampie parti della proprietà non sono ancora state messe alla prova. Per appianare bug iniziali, invitare beta tester e intraprendere regolarmente test di usabilità per impostazione predefinita.
Riduzione degli errori di input
Mentre l'estetica del nostro sito è importante, è ovvio che i problemi relativi all'input di moduli e all'interazione con la pagina sono spesso i più dannosi per l'utente. Possiamo farla franca con un sito che non sembra del tutto migliore in IE6, ma se un visitatore non può nemmeno utilizzare un modulo di contatto senza errori, puoi anche consegnarti alla polizia dell'usabilità per essere arrestato senza cauzione. Affrontare problemi di input può sembrare spaventoso, ma come ora scoprirai, si tratta solo di pensare in termini di praticità.
Feedback intelligente
I computer non sono molto intelligenti, siamo onesti. In termini di sviluppo Web, il più vicino possibile ottenere un feedback intelligente è esaminare ciò che l'utente sta facendo e provare a fare una previsione basata su come gli altri hanno utilizzato il servizio. Il principio alla base di questa tecnica è semplice: se riesci a identificare dove si verificano comunemente gli errori, puoi aiutare l'utente costringendoli a fare più attenzione.
Considera quanto segue:
Completamento automatico: Come i motori di ricerca hanno dimostrato, il potere delle persone può ridurre il potenziale di errori di ortografia. Se fornisci una ricerca basata sul sito, aiuta gli utenti a trovare ciò che stanno cercando suggerendo potenziali corrispondenze e anteprime per ciò che hanno digitato finora.
Correzione automatica: Se hai passato molto tempo a guardare i commenti su YouTube o Facebook, probabilmente temi già per il futuro della lingua inglese. Quando chiedi i dati, prova a correggere errori di battitura comuni e perdona il blocco delle maiuscole e gli spazi in cose come l'inserimento della carta di credito.
Evidenziamento dell'errore: Quando chiedono agli utenti di inserire un tipo specifico di informazioni, gli incidenti si verificano di volta in volta. Sia che tu usi JavaScript o una soluzione lato server, o entrambi, se vuoi la massima compatibilità, assicurati di indicare esattamente dove si trova il problema!
Conferma dell'utente: Alcune cose che un visitatore intraprende sono più importanti di altre. Ad esempio, cambiare una foto del profilo non è così preoccupante come pagare qualcosa. Nei casi in cui gli errori non possono essere forniti, chiedere agli utenti di verificare le loro voci in una pagina di post-invio.
Messaggi di avviso: I più grandi errori si verificano spesso in un istante, come fare clic sul pulsante sbagliato. Se un sito ha una funzione di eliminazione (o di altra criticità) che potrebbe essere disastrosa se attivata erroneamente, chiedere sempre all'utente di confermare l'azione. Soprattutto se non esiste un pulsante Annulla.
Assistenti in-page
Anche se fornire agli utenti un feedback durante il processo di input è utile, è anche opportuno fornire ulteriore supporto agli utenti per aiutarli a capire cosa viene loro richiesto prima di iniziare l'immissione dei dati. Mentre il feedback intelligente si concentra sulla individuazione e risoluzione degli errori man mano che si verificano, gli assistenti cercano di spiegare meglio il processo, per evitare che si verifichi in primo luogo.
Considera quanto segue:
Scorciatoie dati: Negli ultimi anni, c'è stato un aumento del numero di browser e prodotti che offrono il completamento automatico e aiuti utili per garantire il riempimento accurato dei moduli. Assicurati che i tuoi input di modulo abbiano ID adatti che questi prodotti riconosceranno.
Contenuto suggerito: Questo è un percorso molto semplice per garantire che gli utenti non commettano errori. Tutto ciò che devi fare è precompilare i campi con un valore predefinito che scompare al momento del clic o dell'inserimento dati e offrire una spiegazione descrittiva di ciò che richiede il campo (non solo un'etichetta).
Link spazio bianco: Soprattutto su schermi piccoli, i clic sbagliati sono abbastanza comuni. Se hai le dita grandi e provi a battere con precisione su un oggetto minuscolo, è logico che tu possa perdere il bersaglio. Assicurarsi che i collegamenti abbiano spazi bianchi adatti per evitare incidenti (come la cancellazione) che si verificano.
Entrata selettiva: Una delle cose che ammiro dei menu a discesa (seleziona) e delle caselle di controllo è che limitano il potenziale di errori offrendo una selezione, senza che l'utente debba digitare un valore specifico in una scatola. Se è possibile utilizzare questi di preferenza per l'immissione di testo, farlo.
Cartelli digitali: Mentre il riempimento del modulo occupa gran parte dello spettro di errori di input, collegamenti di scarsa qualità possono anche rendere gli errori più frequenti. Per evitare di inviare utenti a una pagina (o sito) che non intendevano raggiungere, etichettare i collegamenti in modo appropriato ed evitare la navigazione della carne misteriosa.
Correzione ritardata
Come abbiamo detto prima, gli errori si verificano e non importa quanta assistenza fornisci a un utente, troveranno sempre un modo per ignorare i tuoi suggerimenti utili o causare un problema tecnico che li mette in una situazione difficile. Come tale, oltre al processo di pre e post data entry, è importante che i visitatori possano modificare i loro dettagli, annullare azioni sbagliate e avere il potere di "aiutare se stessi" quando possibile.
Considera quanto segue:
Annulla azioni: Quando commettiamo un errore come premere un pulsante di cancellazione e ignorare l'avviso che ci chiede di confermare un'azione, proviamo subito senso di colpa, shock e paura di aver perso i dati per sempre. Offri un pulsante di annullamento per tornare a uno stato precedente per evitare perdite permanenti.
Ripristini predefiniti: Quando gli utenti hanno la possibilità di configurare qualcosa, sembrano avere la tendenza a giocare con l'interfaccia o la funzionalità e imparare per tentativi ed errori. A causa di questo tratto di navigazione ammirevole, è necessario consentire il ripristino dei valori predefiniti da una sessione o un modello.
Post produzione: Quante volte ti sei iscritto per qualcosa, solo per scoprire che hai fatto un errore sul modulo e ora non riesci a porre rimedio alla situazione? Anziché limitarsi a bloccare i campi di immissione, consentire agli utenti di modificare (e se necessario verificare) e correggere i problemi rilevati.
Tasto indietro: Ogni browser ne ha uno e lo usiamo regolarmente. Il pulsante Indietro è diventato l'ultima funzione di annullamento per la generazione Web. I siti che bloccano questo pulsante, tranne nei casi in cui transazioni come il pagamento potrebbero ripresentarsi, devono fermarsi e lasciare che questo strumento faccia il suo lavoro.
Dettagli del contatto: Quando tutto il resto fallisce e si verificano errori, gli utenti vogliono essere in grado di mettersi in contatto per segnalare il problema. Se non si dispone di un metodo di contatto (o peggio, non monitorarlo), assicurarsi di correggere questa situazione, in quanto di solito è l'ultima porta di chiamata prima che un visitatore abbandoni il sito.
La storia infinita
Se parli con uno sviluppatore di software, una cosa che ti diranno inevitabilmente è che nessun prodotto, non importa quanto semplice sia mai privo di errori al 100%. Il secondo qualcuno fa questa affermazione, un utente in qualche modo riesce a rompere l'applicazione, anche se è semplice come "ciao mondo". Inevitabilmente, non puoi difendere il tuo sito dai problemi in corso di errori in un solo colpo. Man mano che il tuo sito si evolve, dovrai continuare a rivisitare e riparare mentre lavori per assicurarti che ciò che era qui oggi non sia rotto domani!
La verità è che viviamo in un universo digitale infestato da link rot, contenuto mancante, codice rotto e obsoleto, e la situazione sembra solo peggiorare. Mentre non c'è molto che possiamo fare riguardo ai siti che il tempo ha dimenticato, potresti e dovresti migliorare la situazione per i tuoi utenti. Prenditi il tempo necessario per controllare il tuo sito, guardare indietro attraverso quegli archivi, tenere i test su più browser e non dare mai nulla per scontato, tanto più che i tuoi utenti ti criticano per gravi mancanze.
In termini di servizio clienti, puoi essere perdonato per aver commesso errori nei tuoi prodotti, indipendentemente da quanto duramente provi, le cose possono andare storte. Ma non considerarlo come un segno di rinuncia e lasciare che continuino ad arrivare gli errori, poiché è il modo in cui ti occupi di loro che conta di più. Se lavori rapidamente per risolvere un problema, i visitatori probabilmente si sentiranno meglio con te e il tuo sito; come ricompensa il loro feedback con le correzioni anziché punirle con errori continui. Ma se non fai il tuo sito sulla difensiva, potresti perdere i visitatori in silenzio, e questo non è qualcosa che nessuno di noi dovrebbe essere disposto ad accontentarsi.
Share
Accentsconagua