100 punti da sapere su...
Eco-Design Web Development

Analizziamo la strategia di contenuti utilizzata dai creatori del seguente sito web: https://a-k-apart.com/.

Il sito You Are @ 10K Apart (a-k-apart.com) mira a creare un'esperienza web avvincente che può essere fornita in 10 KB e funziona senza JavaScript. Si tratta di ottimizzare ogni piccolo byte per far sì che il sito funzioni, a prescindere da tutto. La sfida di creare un'applicazione web con meno di 10 KB è stata annunciata sotto forma di concorso.

A tale scopo è stata costruita una pagina di concorso per l'interoperabilità, l'accessibilità e il miglioramento progressivo in meno di 10 KB.

Non ci soffermeremo su tutti i dettagli tecnici di come sono riusciti a farlo, poiché molti concetti non sono ancora stati svelati da questo modulo (quelli che riguardano immagini, video, font, codice, ecc.). Piuttosto, esamineremo la strategia dei contenuti utilizzata per creare questo micro sito web.

Il primo passo è stato quello di determinare il target di riferimento. È stato suddiviso in 2 gruppi principali:

• Concorrenti
• Spettatori

Entrambi i gruppi potevano potenzialmente sovrapporsi. Il compito era quindi quello di progettare il sito web per supportare entrambi i gruppi e garantire una facile transizione tra di essi. Questo obiettivo è stato raggiunto attraverso diverse fasi di sviluppo del sito web:

• Lancio: quando non ci sono iscrizioni;
• In corso: quando ci sono iscrizioni, ma il concorso non è ancora aperto;
• Chiusura: quando il concorso è chiuso e non si accettano nuovi lavori, ma si chiede ai partecipanti di votare i loro preferiti;
• Annuncio del vincitore: dopo che il giudizio dei professionisti e della comunità è stato effettuato e il vincitore è stato determinato (questa è la pagina che possiamo vedere attualmente).

Sulla base dello schema precedente, il contenuto di ogni pagina è stato pianificato in base a ciascuna fase.
Per prima cosa, gli autori hanno iniziato a eliminare i contenuti non essenziali per ogni fase. I creatori hanno seguito il modello "Mobile First" (per saperne di più, consultare la Nozione 10) e hanno eliminato tutto ciò che poteva distrarre l'utente o non aiutarlo a raggiungere il suo obiettivo in quella pagina. Poi è stato redatto il testo per ogni fase e il contenuto è stato pensato per essere raccontato come se si stesse parlando a un interlocutore seduto accanto a noi.

Successivamente, i contenuti sono stati organizzati in wireframe di base (diagrammi che raffigurano la struttura e la funzionalità del sito). Durante il lavoro sui wireframe, si è prestata attenzione ai punti in cui le dimensioni della pagina potevano essere ridotte o in cui si poteva utilizzare il markup (ad esempio, HTML5) per migliorare l'esperienza. Inoltre, è stata data importanza all'organizzazione dei contenuti sugli schermi più piccoli.

Per le interazioni più complesse, sono state utilizzate le IxMaps (diagrammi di flusso). Questo sistema permette di definire i diversi modi in cui l'utente può sperimentare l'interfaccia. Ad esempio, la pagina di ingresso mostra le informazioni più importanti: il nome del progetto, il nome del/i suo/i creatore/i, la descrizione del progetto e un link a una pagina web. La schermata del sito è utile, ma non necessaria. Pertanto, sono state utilizzate le IxMap per caricare pigramente le schermate solo quando JavaScript era disponibile. Inoltre, IxMap ha permesso di caricare un'immagine in un formato alternativo per i browser che supportano WebP (molto più piccolo di JPG o PNG).

Tutti questi passaggi precedenti hanno aiutato il designer a ottenere una buona panoramica delle esigenze dell'interfaccia utente del sito e a creare un sistema di progettazione invece di singole pagine.

Conclusioni

Cosa si è imparato su contenuti, strategia e informazioni:

• Ridurre le distrazioni concentrandosi sull'obiettivo principale.
• Scrivere per gli utenti come se si parlasse loro di persona.
• Dare priorità ai contenuti assicurandosi che il flusso porti gli utenti dove vogliono andare.
• Cercare opportunità di miglioramento eliminando i contenuti o riportandoli solo in determinati scenari.
• Cercare modelli per creare un sistema di design, non solo singole pagine.