Siti ai Raggi X: Mum Made + [Sondaggio]

Scritto da fedeweb il 10 novembre 2010 con 3 Commenti | Pubblicato in Analisi Siti


Appuntamento con la rubrica Siti ai Raggi X, dove si vanno ad analizzare siti web di qualità da cui prendere esempio per futuri progetti.

Se ti sei perso gli altri 2 appuntamenti eccoli qui:

Oggi vediamo Mum Made, un sito e commerce che vende prodotti per neonati, premiato da CSS Awards come sito del giorno il 7 novembre.

Siti ai Raggi X - Mun Made

Primo impatto

Il primo impatto è stato molto positivo, con questi contrasti molto leggeri e l’utilizzo delle texture, proprio a indicare tranquillità e pace. Molto bella l’idea del fiocco, che va un po’ sopra lo slide.

Mi ha fatto venire voglia subito di approfondire la ricerca nel sito e non di abbandonarlo dopo 30 secondi.

Aspetti positivi

Less is more: la parte superiore dell’home page ha la classica struttura con logo a sinistra, menu a destra, slide che scorre con alcuni prodotti di rilievo e sotto un breve messaggio che spiega dove vengono realizzati i prodotti e la cura con cui vengono fatti.

Poi vengono mostrati i prodotti migliori e gli ultimi arrivi, anche questi presentati in maniera elegante con uno slide. Ottima l’idea di mostrare subito i prezzi che consente all’utente di capire subito se valga la pena di approfondire la visita o meno.

Voglio farti notare quanto poco è bastato per raccontare già molte cose sul sito.

Footer: è il primo sito che analizzo dove è stata data molta importanza al footer. Purtroppo capita spesso di trascurare questo elemento, che invece può dare molte informazioni aggiuntive all’utente.

In questo caso troviamo i link per i social network e poi si mostrano le categorie dei prodotti, alcune informazioni generali e la possibilità di iscriversi alle newsletter, il tutto incorniciato da una grafica molto accattivante.

Analisi sito Mum Made - Footer

Shopping: la parte di e commerce è davvero ben organizzata, con tutte le categorie presenti sulla sinistra e poi i diversi prodotti disponibili subito a fianco.

Probabilmente molti di noi avrebbero usato un menu mega drop down per gestire tante categorie e invece ecco la prova che esistono delle soluzioni alternative, dal punto di vista dell’usabilità più efficaci.

Inoltre ho trovato molto originale la galleria del singolo prodotto, con le miniature disposte una sopra l’altra, che compaiono per intero al passaggio del mouse.

Analisi sito Mum Made - Galleria prodotti

Pagina about: una pagina che spesso si sottovaluta, ma è essenziale per instaurare una fiducia con l’utente.

In questo caso la scelta è stata davvero ottima con la foto dell’autrice del sito con in braccio la propria figlia (credo). Poi non ci si è limitati a poche righe di testo, ma una lunga descrizione che inizia proprio parlando di se stessa e della sua famiglia, di fatto aprendosi subito agli utenti mentre dopo spiega come è nato Mum Made.

Una pagina da prendere da esempio.

Aspetti negativi

Anche in questo sito è dura trovare dei difetti, però qualcosa sono riuscito a trovare.

Spazi troppo ampi: le spaziature sono molto importanti, ma in alcuni casi si è esagerato. Mi riferisco in particolare ai prodotti e agli articoli del blog, dove la distanza tra il nome del prodotto/categoria e le foto (oppure tra il titolo e il testo dell’articolo) è davvero esagerata e sembrano quasi due elementi distinti.

Analisi sito Mum Made - Spazi Grandi

Link social e newsletter: anche in questo sito non viene data troppa importanza all’aspetto social, con i link posizionati nel footer, come  anche le newsletter.

Posizionare questi elementi in alto, magari vicino al logo darebbe maggiore risalto all’aspetto social di Mum Made.

Form contatti: a volte l’utilizzo di jQuery può far dimenticare aspetti importanti come l’accessibilità o l’usabilità.

Infatti c’è scritto che i campi con l’asterisco sono obbligatori, però poi nei campi non è presente nulla.

Solo una volta che si va sul campo e lo si lascia vuoto, allora esce un messaggio di avviso. Se si lasciano vuoti tutti e 3, addirittura i messaggi si sovrappongono. Io personalmente avrei solo messo il classico asterisco ed eventualmente poi far comparire dei messaggi con dei suggerimenti su come compilare i campi.

Analisi sito Mum Made - Contatti

Tecniche usate

In questo sito si è usato molto jQuery, in particolare per gli slide, le gallery dei singoli prodotti, il login e il form.

Slide: si sono utilizzate queste tre semplici righe di codice, applicate rispettivamente allo slide dei prodotti preferiti, ai nuovi prodotti e allo slide principale.

//slide preferiti
$('#homepage .half:eq(0) .slideshow').slideshow({speed: '800',
delay: '900', pause: '1000' /*, autoSlide: false*/});
//slide arrivi
$('#homepage .half:eq(1) .slideshow').slideshow({speed: '800',
delay: '1800', pause: '1000' /*, autoSlide: false*/});
//slide principale
$('#mainPanel').slideshow({speed: '1000'});

Gallery prodotti: per la gallery dei prodotti si è invece utilizzato questo codice, anche questo di appena 3 righe.

$('.product .views a').click(function(){
//caricamento immagine
$(this).parents('.product').find('.image .inner').prepend($('
').addClass('loadImg').html('').hide().fadeIn('fast')); //viene caricata l'immagine $(this).parents('.product').find('#product-img').attr('src', $(this).attr('href')).load(function(){ //rimozione icona caricamento $(this).parents('.product').find('.loadImg').fadeOut('fast', function() { $(this).remove(); }); }); return false; });

Login: si è scelto di utilizzare una finestra stile lightbox: nel caso di Mum Made è stato realizzato a manina, ma si esistono diversi plugin che consenstono di ottenere questo effetto, come nyromodal di cui se ne è parlato anche recentemente in un tutorial.

Analisi sito Mum Made - Login

Form: per inserire i campi di suggerimento nel form esistono diversi plugin adatti allo scopo: ti invito a vedere questa lista di tutorial per migliorare un form, dove è anche spiegato come aggiungere dei campi di suggerimento.

Conclusioni

Lo stile grafico utilizzato è davvero perfetto per lo scopo del sito e il target di utenza a cui è rivolto: utilizzo di texture con un contrasto poco elevato con il testo, intuitivo e semplice da navigare, non ci si trova mai nella situazione di chiedersi quale sarà il passaggio successivo.

Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

437 download

711 download

About fedeweb

Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

3 Commenti

  1. Come sempre un’ottima analisi di un bel sito molto curato nei dettagli e ottima scelta nei colori. Io avrei sostituito a quel grigio usato nelle scritte un colore leggermente più scuro per far evidenziare il menù ed altri particolari…

    Comunque complimenti..

    Ps. Anche il mio sito è stato priemiato in più siti :-)

  2. Ciao Luigi, si sono d’accordo per il font più scuro, ma penso che sia stato voluto quel contrasto così leggero.

    Anche il tuo sito è tra i palpabili per una prossima analisi quindi occhio! ;)

  3. Sono pronto… mi attrezzerò!!! :D Ciao buona giornata

Lascia un commento