Personal tools

navigation

Jun 15, 2015

I 10 migliori esempi di menu di navigazione originali e creativi

Navigation design

I 10 migliori esempi di menu di navigazione originali e creativi

Filed Under:

Vuoi rendere la vita più facile ai visitatori del tuo sito web, ma con un pizzico di fantasia? Fallo con un design di navigazione efficace e funzionale!

Riuscite a immaginare un sito web senza la navigazione? Sarebbe come viaggiare su strade senza indicazioni o cartelli.

Gli utenti spesso abbandonano i siti che non possono navigare, mentre se possono trovare senza problemi ciò che stanno cercando sono più propensi a rimanere. Una navigazione efficace può garantire la fruibilità del sito e migliorare la user experience degli utenti.

Altrettanto fondamentale è il design di navigazione, che deve essere accattivante. Il menu di navigazione deve invogliare l’utente a navigare il sito, deve stuzzicare la sua curiosità.

La navigazione può essere realizzata in diversi modi: posizionata nell'intestazione o a pié di pagina, su fasce laterali, può essere fissa oppure scorrere insieme all’utente, nascondersi e poi riapparire, comprimersi ed espandersi.

In questo post ho selezionato 10 diversi menu di navigazione di siti web i cui realizzatori hanno speso tempo e fatica per far si che la loro navigazione diventasse qualcosa di speciale. Vedrete molti stili e approcci diversi, alcuni fuori dagli schemi e non certo convenzionali.

 

Rally Interactive

Possiamo navigare questo sito in due modi: il primo tramite il frecce al centro della pagina, che fanno scorrere la pagine orizzontalmente, il secondo tramite il menu a scomparsa in alto a destra. La grafica completa l'opera perché rende tutti gli elementi omogenei tra loro e armonizza l'apertura del menu. L'effetto è veramente interattivo come indica il nome stesso del sito.

Rally Interactive2.pngRally Interactive1.png

read more

Sep 10, 2013

Anonimi indesiderati? Tienili fuori con iw.rejectanonymous

Tu non puoi passare! ...spero

Anonimi indesiderati? Tienili fuori con iw.rejectanonymous

Hai un portale che vuoi mantenere privato e non vuoi perdere il senno tra workflows e permessi? Un semplice prodotto ti dà una mano a tenere gli anonimi fuori

Un caso d'uso tipico è lo sviluppo di una intranet accessibile anche all'esterno della rete interna.
Questo portale dovrà quindi essere accessibile solo dagli utenti del sito, e inibire la visualizzazione agli utenti anonimi.

Per fare ciò, ci sono di solito due alternative:

  • si inserisce un'autenticazione basic nel webserver che pubblica il sito
  • si personalizzano i vari workflow e rolemap per impedire azioni da parte degli anonimi.
read more

Aug 01, 2011

Sottositi in Plone: la nostra soluzione

Approfittando della migrazione a Plone 4, ci siamo presi il tempo di rilasciare finalmente, nella consueta ottica del riuso in stile PloneGov, il prodotto Plone per gestire sottositi in uso da qualche anno nel Comune di Modena

La priorità: capire cosa è un sottosito

Prima di addentrarsi nella scelta di una delle soluzioni Plone per gestire sottositi, è bene iniziare il tutto con un'esame della propria organizzazione (o di quella del Cliente che vi ha richiesto "Plone e sottositi") per capire che cosa è un sottosito agli occhi dell'utilizzatore finale.

Può sembrare un passo inutile e dal risultato ovvio in quanto ogniuno di voi avrà in questo momento un'idea ben precisa ma posso assicurarvi che in questi anni abbiamo potuto vedere come questo concetto possa essere percepito in modo molto diverso.

Diamo innanzi tutto una definizione abbastanza generica da poter essere corretta in ogni caso (che dite, la scrivo anche su Wikipedia?).

Un sottosito è una porzione di un sito più grande ma che risente di un certo grado di indipendenza, pur mantenendo un legame col sito principale o con eventuali sottositi fratelli.

Fin qui tutto ok ma in seguito inizieranno ad emergere dettagli e molto spesso le similitudini tra le differenti richieste finiranno qui.

Le variabili in gioco sono le seguenti: indipendenza e legame col sito principale. Tutti vedono queste due caratteristiche in modo molto diverso.

Il nostro lavoro in questi casi è sempre stato analizzare innanzi tutto che cosa l'utente vuole ottenere.

Non ci siamo sorpresi quando alle volte il concetto di sottosito si è fermato alla richiesta di avere un dominio diverso col quale poter navigare una parte del il sito principale (e.g: sottosito.ente.it) oppure alla semplice applicazione di un tema differente. Non c'è nulla di male: un logo differente, o poco più, alle volte è tutto quello che i vostri utenti si aspettano e basta ai visitatori del sito per dare il giusto messaggio.

Gradi di indipendenza dal sito madre

Vediamo i vari scenari che si possono presentare.

Indipendenza 0%, legame col principale 100%

E' l'esempio fatto poco fa. Stiamo quindi parlando di siti dove l'indipendenza è nulla mentre il legale col sito principale è completo. L'utente ha solo bisogno di un richiamo visuale che identifichi l'entrata in un dipartimento diverso, una sottosezione dell'ente o della compagnia, etc.

Indipendenza 100%, legame col sito principale 0%

Altro non infrequente esempio è lo sviluppo di tanti piccoli sottositi, potenzialmente diversi tra loro in tutto.

Al termine dell'analisi di queste situazioni ci vede essere da parte vostra la lecita domanda "Ma perché dite che vi serve un sottosito? Quale è il legame col sito principale?".
Anche in questo caso non stupitevi se la risposta a volte è "Nessun legame!".

Molto spesso l'utente ha davvero bisogno di siti Plone completamente separati che condividono semplicemente:

  • i prodotti installati
  • una base dati utente comune (ma non è detto)
  • l'uso di un dominio principale condiviso (ente.it/sottosito oppure sottosito.ente.it)

In questi casi Plone risolve da solo brillantemente la necessità, permettendovi di creare siti Plone separati nella stessa istanza Zope. Non vi serve altro!

La verità sta nel mezzo

Ovviamente nella maggior parte dei casi si ha "la sana via di mezzo".

In questa zona grigia molto spesso non vi serve chissà quale prodotto installato, ma qualche piccolo accorgimento.

Un esempio reale:

"i sottositi dovranno essere completamente indipendenti ma il link "Home" delle briciole di pane deve puntare al sito principale".

Quindi la Home del sottosito parte in realtà dalla seconda voce. Come otteniamo una cosa simile? Una semplice modifica che personalizzi la viewlet che genera questo elemento, per inserire un link assoluto al sito base. Per il resto: siamo ancora in presenza di un ambiente altamente indipendente. Il vostro "Plonista di fiducia" può farvi ottenere questo comportamento con poche ore di lavoro!

Da qui possiamo incontrare casi dove l'indipendenza cala piano piano e i prodotti da personalizzare ed installare crescono e si complicano...

Quando arrivate a questo, vale la pensa guardarvi attorno a capire che cosa vi serve davvero, e verificare che cosa Plone vi offre.

Altri prodotti che SI OCCUPANO DI sottositi

La necessità di ottenere sottositi è largamente sentita in Italia (forse anche legata alle recenti norme di razionalizzazione dei siti esistenti per gli Enti Pubblici) ma assai meno all'estero.

Al termine della Plone Conference di Budapest ho partecipato ad un Open Space dove si è parlato di sottositi, ma per il resto abbiamo dovuto faticare, inviare segnalazioni, discutere ed aspettare perché Plone ci facilitasse questo comportamento. Anche le discussioni a riguardo non sono poi tante (vale la pena leggere "Subsites in Plone: Review of info and call for sharing products, experiences, and best practices").
Ad oggi l'unico prodotto che sembra abbastanza mantenuto e aggiornato che si occupa di questa necessità è Lineage.

... almeno fino al rilascio del nostro prodotto! :-)

Ad ogni modo con la release 4 il nostro CMS preferito è diventato un ottimo ambiente per avere sottositi.

Fare sottositi in Plone senza usare Plone: redturtle.subsite

La natura di redturtle.subsites si riassume in questo. Spostare al di fuori di Plone (Apache) tutta una serie di problematiche che, grazie a funzionalità native di Plone (anche se poco conosciute) è possibile gestire senza codice aggiuntivo.

Il prodotto nasce da alcuni esperimenti di RedTurtle ma viene portato poi avanti grazie alle esplicite richieste del Comune di Modena, che ha sentito da molti anni questa necessità in alcune installazioni ed è quindi un precursore dell'esplorazione dei sottositi in Plone.

Siamo in presenza di sottositi dove il rapporto "indipendenza/legame col principale" è variabile, ma comunque molto spostata verso un livello di bassa indipendenza ed altra integrazione: i sottositi fanno tutti parte della Rete Civica e questo non viene mai completamente nascosto.

Descriviamo nel dettaglio le richieste originali.

Back-end

I redattori dei sottositi devono poter accedere ad un indirizzo di back-end (anche detto "back-office") riservato, e si autenticano da quell'indirizzo (qualcosa come redazione.ente.it).

La caratteristica del back-end è quella di nascondere completamente tutto ciò che identifica i sottositi e mostrare il sito Plone principale. I sottositi risultano quindi semplici cartelle all'interno del portale visitato.

Anche il tema grafico può essere personalizzato fino ai limiti dello spartano, eliminando tutto quello che occupa spazio visivo nello schermo del redattore (o perché no, aggiungendovi elementi che abbiano il solo scopo di facilitare la redazione).
Il tema diventa quindi un vero e proprio tema riservato al back-end (ma non è obbligatorio).

Il redattore può quindi facilmente eseguire link interni (usando l'editor di Plone) tra documenti di sottositi diversi, creare collezioni che catturino informazioni da più sottositi, ...

Front-end

Questo comportamento deve cambiare nel front-end. Quando il visitatore accedere ad un sottosito deve ovviamente vedere il tema applicato a questo, ma deve avere un livello di integrazione col sito principale molto più basso.

I link alla home del sito, dal logo e dalle briciole di pane, devono riferirsi al sottosito corrente, non a quello principale.

Se non fosse per le ricerche effettuate nel sito o per la presenza di collezioni che qua e là possono mostrare contenuti proveniente dagli altri sottositi fratelli, potrebbe quasi sembrare di trovarsi all'interno si un sito Plone separato.

Con Plone è estremamente semplice (leggasi "senza installare nulla") isolare una cartella perché questa funzioni come un sito indipendente, ma questo influenzerebbe sia il back-end che il front-end (livello di indipendenza troppo elevato).

La nostra soluzione

Il nostro prodotto offre un modo estremamente semplice e poco invasivo di avere:

  • un back-end che nasconda completamente i sottositi
  • un front-end che mostri alcune cartelle come sottositi
  • una metodologia semplice per creare temi aggiuntivi per questi sottositi

Creare uno di questi temi per i sottositi, o personalizzare un tema esistente, è estremamente semplice.

Il prodotto offre già alcune piccole personalizzazioni di Plone (modificandolo il meno possibile) per non dover sviluppare nessun codice aggiuntivo. Abbiamo anche fornito un tema di esempio per un sottosito Plone.

Le altre caratteristiche fornite sono:

  • la navigazione di front-end interna al sottosito è altamente limitata al sottosito stesso (briciole di pane, link alla radice, ...)
  • le ricerche sono eseguite a livello globale
  • le collezioni comprendono tutto il sito (viene lasciato quindi al redattore il compito di limitarle, se lo desidera)
  • ipotetici redattori di front-end (utenti esterni alla redazione) sono fortemente limitati, come se stessero lavorando in un sito Plone indipendente

Conclusioni

Il prodotto redturtle.subsite è semplicemente un aggregatore di tutta la splendida tecnologia sottostante e la pagina ufficiale del prodotto può essere vista come un manuale dei sottositi in Plone, per chiunque volesse intraprendere la strada (anche senza voler per forza usare redturtle.subsite potreste trovare informazioni interessanti).

La sua limitata dimensione dimostra come Plone sia di per se uno strumento estremamente maturo e, lasciatemelo dire, ancora una volta pieno di belle sorprese!

 

Jul 14, 2010

New collective.navigationtoggle release: integration with any theme (I hope)

The new release only fixed a small bug, but also add some better integration with Plone themes. What if fun: a bug inside Sunburst theme was the demonstration that the approach is good!

I already talked about the features of collective.navigationtoggle in previous post, but the new release helped me to be sure of one thing: the unobtrusive approach chosen was good.

The new version also add some refactoring and support for other themes than the classic Plone one. Plone 4 is coming... we must live with this and luckily the products migration has begun.

What is more difficult, after years the default theme is changed (for what I remember, the default theme you all know is with us from Plone 2.0... maybe some changes was done to it at Plone 2.1, but the core never changed). All products that act on Plone UI must check also the new Sunburst theme.

Going back to navigationtoggle, I choosed an approach that was "use existing Plone navigation element to know how to render new ones".

For the new release I only empowered some existings feature, like also generate CSS classes for new element on the navigation.

Why? In Plone 3 navigation main node is like this:

<li class="navTreeItem visualNoMarker">
      <div>
        <a title="..." class="state-... navTreeFolderish" href="...">
            <img width="16" height="16" alt="..." src="...">
            <span>Foo</span>
        </a>
    </div>
   ...
</li>

And Sunburst is like this:

<li class="navTreeItem visualNoMarker">
        <a title="" class="state-... navTreeFolderish contenttype-..." href="...">
            <img height="16" width="16" alt="Folder" src="...">
            <span>Foo</span>
        </a>
   ...
</li>

Apart some node difference (no more containing DIV) the new theme also rely on a contenttype-xxx class.

What is funny (and what make me say "thanks navigationtoggle") is an unwanted behavior of the current Sunburst theme. A bug that double the content type icon: one given from the IMG tag and another ones from CSS, thanks to the new class.

I'm not interested in this bug (Irene says that probably it has been already fixed), but using navigationtoggle with this bugged version of Sunburst... also make the bug applyed to elements navigation nodes generated by our script!

This (uncommonly) is good as respect the original idea: the original theme use doubled icons?! Is not a problem of navigationtoggle, so do it!

Apr 11, 2010

Change navigation behaviour with jQuery: collective.navigationtoggle

A requirement from one of our customer lead us to develop a very tiny Plone add-ons... After all jQuery make all the dirty work!

Navigation collapsedOne of the navigation portlet in the main site of our customer is done like the one you see on the left.

The element with arrow icon is unique and very important, but is not the element itself that links to an important document. The real useful information for end users are elements inside the section with this special icon (the subelements).

If facts the different icon itself is not enough so the customer asked us to develop an expand/collapse feature to make possible to users to not be forced to visit the not-important-section, then choose one of the subelements. For user experience the first click is only a waste of time (it's matter of usability) as the general element you see in the navigation is only a way to keep together and categorize the real infos.

Question: how many not-important-section you have in your Plone sites? Folder that only show folder_listing view or useless welcome pages?

Navigation expandedHowever: what we developed in the first version of this site was a very simple (and not configurable) expand/collapse feature, you'll see on the right.

This was a Plone 2.1 site and what you see wasn't a real Plone navigation portlet. Important subelements were all loaded with the page and a simple Javascript script make them visible/invisible.

As we recently migrated this site to Plone 3, the question was: can we reproduce the same effect keeping the Plone real navigation... and this time make the feature more reusable?

Some of you can say at this point that there are already other dynamic Javascript/AJAX navigation system for Plone (for example, I well remember collective.portlet.explore) but the problem here is different... we don't want to make all navigation(s) entries expansible/collapsible but only one (or few).
Another important fact: this is the site of an italian public company, so it must follow the Stanca Act accessibility requirements (so very restrictive in matter of client side scripts technology) and a complete Javascript UI is not a good choice.

The role of jQuery

Instead of developing some new funny navigation system, our work was focused on making the most possible client side (whit an eye on graceful degradation like the Law say).

We used jQuery to obtain a cross-browser, configurable and simple plugin for Plone that make possible to chose on which navigation elements apply the expand/collapse feature. All this client side!

Welcome to collective.navigationtoggle.

The only server side component is a simple view that query the Plone catalog to show all element inside a given folder, and return all information needed by jQuery to generate navigation sub-elements on the fly (quite simple, isn't it?).

The view return only a JSON data structure, so the HTML is generated client side. How? The code create new navigation elements cloning existing ones from the navigation itself (using parents of the trigger element), then filling them using response data.

Is this way is possible that even a non-standard Plone navigation could works normally with this product (not so sure of this... to be honest some assumption are done, like the main element structure of the navigation that must be composed of UL and LI elements).

Cache

Two different problem there: prevent browser from caching server response for a too long time, but also prevent that if a user begin to click 10.000 times onto the navigation element this will send to the server one non cached request for every click.

The first problem is quite simple playing a little bit with HTTP header sent by the server, and adding timestamps with the client side request.

For the second problem we rely on jQuery.data() fantastic method, caching the generated HTML and preventing that expand/collapse actions will ask the server for the same data.

Configuration

Right now we have a real well-know problem to solve, so the product is targeted on developers. To configure it you must provide a tiny Javascript with line(s) of code like this:

jq.collective_navigationtoggle.toggle_elements.push("/foo1/foo2");

This is a simple Javascript array stored in the jQuery plugin namespace. Data provided must be the final part of the href attribute of links inside navigations portlet. This link will no more move the user to the target page but will be gifted with the expand/collapse feature.
All the magic left is done by the power of jQuery.

Plone 4 and jQuery 1.4

The product works on Plone 4 also... no problems with jQuery 1.4 (delivered with the next version of our favorite CMS, while Plone 3.3 still rely on jQuery 1.3), in facts dropping jQuery 1.3 support can reduce the Javascript code size and complexity (jQuery 1.4 has new fantastic features... take a look!).

However a real and pretty integration like with the Plone 3 theme right now is not available in Plone 4 also. Maybe in future I can work on this (Plone 4 Sunburst is not using anymore the IMG tag, instead it generate icon usin CSS classes). If you are interested and wanna help, you are welcome!