Nel post precedente abbiamo dedicato ampio spazio alla “teoria” riguardante l’user experience (UX), l’interaction design e il perchè ricercare interazioni eleganti sia importante per il nostro sito.
In questa seconda ed ultima parte elenchiamo le sette regole da rispettare per rientrare nei canoni stabiliti dall’interaction design – le gif animate qui di seguito sono state realizzate e commentate originariamente da Petras Baukys sul portale SitePoint.
Evitare il “teletrasporto”
Il passaggio dallo stato A allo stato B di un determinato elemento della pagina non deve essere mai istantaneo (ecco perchè si parla di teletrasporto) ma sempre evidanziato da una transizione. In tal modo ci si assicura che l’attenzione dell’utente resti focalizzata in quella determinata area.
Cambiamenti di stato su singolo bottone (toggle)
I cambiamenti di stato di un elemento devono essere relegati ad un unico bottone (toggle) e non a due bottoni separati (uno per lo stato A ed uno per lo stato B).
I punti d’origine devono essere nelle vicinanze
Ogni transizione ha un punto di origine (trigger). Per mantenere alta l’attenzione dell’utente e condurlo al punto di destinazione che abbiamo stabilito, bisogna sempre fare partire l’interazione nelle immediate vicinanze del punto di origine.
La durata della transizione deve essere adeguata all’interazione
Non esiste una regola aurea per quanto riguarda la durata delle transizioni; si tratta di un lavoro delicato (anche alcuni millesimi di secondo possono fare la differenza) nel quale giocano un ruolo importante anche il gusto e l’occhio del designer. In generale è opportuno non utilizzare per ogni elemento i medesimi intervalli di transizione.
Le transizioni inverse devono essere immediate
Se nel mezzo di una transizione l’utente cambia idea cliccando nuovamente sul trigger, l’animazione inversa che seguirà dovrà essere eseguita nel minor tempo possibile. In questo modo il visitatore avrà sempre la sensazione di avere il controllo della situazione. Una risposta ritardata può portare a risultati controproducenti per l’user experience.
Pianificare attentamente la successione di azioni
Le interazioni possono portare l’utente a svolgere una serie di azioni. Un susseguirsi di azioni deve essere il più fluido e scorrevole possibile. Ad esempio: quando l’utente clicca su un determinato bottone che attiva la comparsa di una finestra di dialogo (box) da compilare, il campo destinato all’inserimento dei dati dovrebbe essere già selezionato automaticamente – l’utente salta il passaggio di dover cliccare nuovamente.
Esplicitare sempre l’avvenuta conclusione di una transizione
L’utente deve essere sempre in grado di capire quando l’interazione che ha avviato è giunta a termine. Nel caso che il designer non riesca in tale intento, l’utente potrebbe ritrovarsi ad avviare più volte la stessa interazione.
