Wikipedia Redesign: cosa c'è in negozio?
Wikipedia attualmente sta subendo una riprogettazione tanto necessaria per migliorare l'esperienza dell'utente.
Chiunque può vedere in anteprima questa riprogettazione di creazione di un account, accesso e quindi facendo clic sul link "Prova beta" in alto a destra in qualsiasi pagina.
La "Wikipedia Usability Initiative" è stata divisa in due fasi. La fase 1 è stata la fase di prototipo e si è conclusa nell'estate del 2009.
Il team di progetto è attualmente nella seconda fase, che è la fase di sviluppo e test.
Il progetto è stato anche diviso in quattro rilasci ; al momento della stesura di questo articolo, la seconda versione (Babaco) è attualmente in fase di sviluppo.
In questo articolo discuteremo le modifiche al design di Wikipedia e le ragioni dietro di esse.
La Wikipedia Usability Initiative è programmata per essere pronta nella primavera del 2010. Ulteriori informazioni sul progetto possono essere trovate Qui .
La riprogettazione è incentrata sull'usabilità . Sebbene non siano stati apportati cambiamenti drastici, l'aspetto generale del sito Web è molto più pulito e moderno. L'interfaccia di modifica rinnovata è un aggiornamento importante di cui gli editori di Wikipedia saranno sicuramente entusiasti.
Come molte operazioni su piccola scala, Wikipedia non ha il budget per verificare sistematicamente come i visitatori utilizzano il sito web. Invece, si basa sul feedback degli utenti per individuare e risolvere i problemi.
Pulito
La nostra prima impressione della riprogettazione della beta è che sembra abbastanza nitido e ordinato. Il layout è ancora fondamentalmente lo stesso; questa riprogettazione probabilmente non causerà lo stesso oltraggio che Facebook mescolato con la sua riprogettazione a marzo 2009.
Il cambiamento più ovvio è che i vari componenti della pagina non sono più limitati alla propria casella. Le aree di navigazione e di contenuto principale non sono chiuse e si estendono fino al bordo della finestra del browser.
L'altro ovvio cambiamento è che Wikipedia ha ritirato l'immagine di sfondo del libro aperto. Questo pulisce in modo significativo il design e rende il logo molto più nitido.
Vecchio design:
Nuovo design:
Leggero cambiamento nei colori
Nel complesso, il nuovo design sembra più morbido . I link di navigazione nella barra laterale sinistra ora sono leggermente più grandi e più facili da leggere. I colori dei collegamenti sono stati leggermente modificati per renderli meno vivaci.
Cambiare il colore del link visitato dal viola al blu scuro è molto importante per rendere il sito più moderno. Semplifica anche la combinazione di colori e rende l'aspetto più professionale.
Rilocazione della barra di ricerca
L'unica modifica che potrebbe far scattare i visitatori regolari è il riposizionamento della barra di ricerca.
Non è più annidato nel mezzo della sezione di navigazione. È stato spostato in alto a destra della pagina. Questo posizionamento è diventato standard su molti siti Web ed è dove le persone guardano prima quando vogliono eseguire una ricerca.
La nuova posizione della barra di ricerca:
Schede riorganizzate
Anche le schede sono state riorganizzate. Hanno ricevuto un nuovo look e ora sono più facili da individuare. Dividendoli in due gruppi rende la loro struttura più logica. Anche la parte superiore in dissolvenza delle schede apre la pagina.
Vecchio design:
Nuovo design:
Modifica della pagina
La nuova interfaccia di modifica della pagina è meravigliosa. La combinazione di icone testuali e grafiche e il raggruppamento di opzioni di modifica rendono la modifica molto più semplice.
Per capire cosa ha fatto prima ciascun pulsante, l'utente ha dovuto posizionarsi sopra l'icona non intuitiva e attendere che il suggerimento venisse visualizzato; non più. E il nuovo riquadro a destra dell'area di testo aiuta gli utenti a navigare nella pagina.
Vecchia interfaccia di modifica:
Nuova interfaccia di modifica:
Per attivare le nuove funzionalità, vai su "Preferenze", quindi fai clic sulla scheda "Modifica". In fondo, troverai alcune caselle di controllo "Sperimentale".
Abilitazione delle funzionalità sperimentali:
L'ultima versione include nuove finestre di dialogo per l'inserimento di collegamenti e tabelle. Poiché l'area di testo può essere un po 'ingombra, queste finestre di dialogo sono utili per aiutare gli utenti a concentrarsi su un'attività alla volta.
La finestra di dialogo tabella potrebbe fare con più funzionalità (come permettere di modificare il contenuto delle celle di una tabella), ma questa versione è ancora in fase di sviluppo, quindi aspetterò di vedere se ne arrivano altre prima di aggiungere ufficialmente funzionalità alla mia lista dei desideri.
La finestra di dialogo per l'inserimento di un link:
La finestra di dialogo per l'inserimento di una tabella:
Cosa manca?
Poiché il progetto è ancora in beta, ora è il momento migliore per suggerire che altro si può fare per migliorare l'interfaccia utente di Wikipedia. Ecco le mie idee:
- Anteprima di AJAX BeautyTip sul link hover
Sarebbe bello se apparisse un suggerimento, tramite il BeautyTip jQuery plug-in, ogni volta che si passa con il mouse su un collegamento interno. Il suggerimento conterrebbe il primo paragrafo dell'articolo collegato. L'aumento della larghezza di banda da questa funzione potrebbe essere troppo grande, ma mi piacerebbe comunque vederlo testato. - Colorazione della sintassi nell'area di modifica del testo
Lavorare con il codice tutto nello stesso colore è molto difficile. L'occhio umano deve scansionare il testo in modo lineare per trovare quello che vuole. Suggerimenti visivi sarebbero di grande aiuto. Mentre ci siamo, l'area di testo dovrebbe avere anche una barra di scorrimento orizzontale in modo che le cose come le tabelle appaiano più belle nel codice. - Opzione per avere il corpo del testo a larghezza fissa
Quando sto leggendo un lungo passaggio di testo, mi piace ingrandire la finestra per ridurre al minimo le distrazioni. Così com'è, non posso farlo perché le righe di testo diventano più larghe del mio monitor widescreen. Mi piacerebbe essere in grado di correggere la larghezza dei paragrafi a circa 600 pixel per facilitare la lettura. - Aumentare il peso visivo del pulsante "Vai"
L'unica modifica a cui sono contrario è che il pulsante "Vai" abbia lo stesso peso del pulsante "Cerca". Il vecchio design ponderava leggermente il testo del pulsante "Vai", rendendo evidente che premere il tasto "Invio" equivaleva a fare clic sul pulsante "Vai". La differenza di peso era abbastanza piccola da consentire agli utenti di vedere la differenza solo guardandola direttamente. Questo dovrebbe essere riportato indietro.
Provalo!
Il nuovo design sembra abbastanza buono, ma non è ancora finito. Sono certo che il team di Usability Initiative di Wikipedia apprezzerebbe chiunque provasse la versione beta e inviasse feedback.
Wikipedia dipende dai suoi utenti per capire come migliorare il sito Web, e sono certo che la community di Depot di Webdesigner può proporre alcune grandi idee.
Infine, prendi in considerazione donare a Wikipedia . Perché essere in grado di leggere vecchi giochi Nintendo senza gli annunci di Evony che sporcano la pagina è piuttosto carino.
Scritto esclusivamente per WDD da Eli Penner .
Cosa ne pensi del prossimo design di Wikipedia? Come miglioreresti il design?