Soluzioni / 04
Design UX/UI
Progettiamo come si usano e come appaiono siti, app e gestionali: dove si trova un'informazione, quanti passi servono per un acquisto, che faccia ha ogni schermata. Lo facciamo prima di scrivere il codice, quando cambiare idea costa ancora poco.
Il problema
Un'interfaccia confusa costa più di quanto sembra.
Carrelli abbandonati a metà, richieste che non arrivano, colleghi che tornano al foglio di calcolo perché il programma nuovo è scomodo. Quasi mai è colpa della tecnologia: è un problema di progetto.
Partiamo da chi userà lo strumento e da cosa deve riuscire a fare. Poi disegniamo, facciamo provare e correggiamo, finché la strada più semplice è anche quella giusta.
Esempi di design
Non c'è uno stile LivenBit. C'è quello giusto per te.
Trentadue esempi disegnati da noi, divisi in pagine intere, sezioni, funzioni e paragrafi, ognuno con un carattere diverso. Non sono modelli da riempire: servono a capire insieme che faccia deve avere il tuo progetto.
01
Pagine intere, ognuna con un carattere suo.
La stessa struttura di base, vestita in otto modi diversi: dall'immobiliare di lusso al barbiere con le luci al neon.
Immobiliare
Il sito che fa sembrare ogni casa una copertina
Foto a tutto schermo, un carattere con le grazie e un solo colore metallico. La ricerca resta sopra la foto: chi arriva per guardare, intanto filtra.
- Ricerca sulla foto
- Serif editoriale
- Intestazione trasparente
Prodotto digitale
La pagina che presenta un'app senza mostrarne gli screenshot
Fondo scuro, una sola sfumatura di colore e il telefono disegnato accanto al titolo. Il movimento accompagna la lettura, invece di rubarle la scena.
- Tema scuro
- Telefono disegnato
- Testo in sfumatura
Barbiere
Il sito che ha la stessa musica del negozio
Nero, rosa neon e un carattere stretto e alto, che si legge anche da lontano. Il listino scorre a righe numerate e il tasto per prenotare non sparisce mai.
- Tema scuro
- Video verticale
- Prenota sempre in vista
Salone
Il titolo è anche il menu
Niente foto in apertura: tre parole enormi, che sono anche i collegamenti alle tre sezioni del sito. Sotto, i capitoli si impilano come carte mentre si scorre.
- Solo tipografia
- Capitoli impilati
- Palette calda
Servizi alle imprese
Il sito che deve ispirare fiducia in tre secondi
Un blu profondo, un colore d'accento e i numeri dell'azienda subito in vista. Il telefono sta in cima a ogni pagina, perché chi cerca un fornitore spesso vuole chiamare.
- Numeri in evidenza
- Contatti sempre in vista
- Preventivo in un clic
Alimentare
Il sito che mette voglia prima ancora di leggere
Colori pieni, forme morbide e scritte a mano come su un'etichetta. Funziona quando il prodotto è allegro e il cliente decide con gli occhi.
- Forme morbide
- Scritte a mano
- Colori pieni
Architettura e interni
Il portfolio che lascia parlare i progetti
Molto spazio vuoto, caratteri sottili e immagini grandi in una griglia asimmetrica. Il sito si fa da parte, e il lavoro resta in primo piano.
- Griglia asimmetrica
- Molto spazio bianco
- Caratteri sottili
Software e SaaS
La home divisa in riquadri, uno per ogni funzione
Ogni riquadro mostra una funzione con un piccolo disegno, invece di descriverla in un elenco puntato. Si legge in qualunque ordine, anche dal telefono.
- Griglia a riquadri
- Piccole illustrazioni
- Tema chiaro e scuro
02
I blocchi con cui si compone una pagina.
Listini, recensioni, numeri, domande frequenti: ogni sezione ha un compito preciso, e un modo giusto di presentarlo.
Prezzi
Il listino che si confronta da solo
Tre colonne, le stesse voci per ciascuna e quella consigliata in risalto. L'interruttore mensile o annuale cambia i prezzi senza cambiare pagina.
- Piano consigliato
- Mensile o annuale
- Confronto a colpo d'occhio
Recensioni
Le opinioni dei clienti, dove servono
Il voto medio in grande, le stelle e tre opinioni che si alternano. Chi è indeciso trova la conferma che cerca vicino al tasto per prenotare.
- Voto medio
- Opinioni a rotazione
- Collegate a Google
Risultati
I numeri che contano, in una fascia sola
Quattro cifre grandi che si contano da sole quando entrano nello schermo. Funziona quando i risultati sono il miglior argomento di vendita.
- Contatori animati
- Fascia a contrasto
- Dati aggiornabili
Domande frequenti
Le risposte prima delle domande
Le domande che arrivano sempre, raccolte in una fisarmonica che apre solo quella che interessa. Toglie telefonate all'ufficio e dubbi a chi sta per scrivere.
- Fisarmonica
- Una aperta alla volta
- Leggibili da Google
Processo
Il percorso, tappa per tappa
Quattro passi numerati, collegati da una linea che si riempie mentre si scorre. Chi legge capisce subito quanto dura e cosa succede dopo.
- Passi numerati
- Linea di avanzamento
- Icone dedicate
Galleria
Le foto, impaginate come in una rivista
Formati diversi affiancati, come in un'impaginazione stampata. Un tocco apre la foto a tutto schermo, e si sfoglia con le frecce o con il dito.
- Formati misti
- Visore a tutto schermo
- Si sfoglia con il dito
Orari e contatti
Gli orari che sanno che giorno è
La riga di oggi si accende da sola, con l'avviso quando si sta per chiudere. Accanto la mappa e i due tasti che servono davvero: chiamare e farsi portare lì.
- Il giorno di oggi in evidenza
- Mappa senza tracciamento
- Chiama in un tocco
Prima e dopo
La differenza, da trascinare con il dito
Due foto sovrapposte e una maniglia nel mezzo: chi guarda la trascina e vede il cambiamento con le sue mani. Convince più di qualunque descrizione.
- Cursore trascinabile
- Funziona al tocco
- Leggero da caricare
Chiusura
L'ultima sezione, quella che chiede
Un fondo pieno con luci sfocate, una domanda e un solo tasto. Sotto, il piè di pagina con quello che si cerca alla fine: contatti, orari e dati dell'azienda.
- Un solo invito
- Luci sfocate
- Piè di pagina completo
03
Le parti del sito che fanno qualcosa.
Prenotare, configurare, cercare, pagare, organizzare il lavoro. Qui il design si misura in passaggi risparmiati, non in effetti speciali.
Prenotazioni
La prenotazione che non lascia dubbi
Servizio, operatrice, giorno e ora: una scelta per volta, con il riepilogo sempre in fondo. Gli orari già presi non si possono toccare, così nessuno prenota due volte lo stesso posto.
- Tre passi
- Orari in tempo reale
- Riepilogo sempre visibile
Configuratore
Il prodotto che si compone sotto gli occhi
Legno, misura e incisione si scelgono a destra e il disegno cambia a sinistra, prezzo compreso. Alla fine la configurazione parte già allegata alla richiesta.
- Anteprima dal vivo
- Prezzo che si aggiorna
- Configurazione allegata
Ricerca
Cerca con i filtri, guarda sulla mappa
I filtri diventano etichette che si tolgono con un tocco, e i risultati compaiono come prezzi sulla mappa. Lista e mappa restano allineate mentre si sposta la vista.
- Filtri a etichette
- Prezzi sulla mappa
- Lista e mappa insieme
E-commerce
Il carrello che non ti porta via dalla pagina
Si apre di lato, dice quanto manca alla spedizione gratuita e porta al pagamento in un tocco. Chi stava guardando i prodotti non perde il punto.
- Carrello laterale
- Soglia di spedizione gratuita
- Pagamento rapido
Gestionale
Il cruscotto che si legge in dieci secondi
Quattro indicatori con la variazione accanto, un grafico e le ultime righe da controllare. Il menu raggruppato a sinistra porta ovunque in un clic.
- Indicatori con variazione
- Grafici
- Menu raggruppato
Operatività
Il lavoro della giornata, in colonne
Ogni richiesta è una scheda che va da sinistra a destra, con un solo tasto per il passo successivo. Chi lavora non deve chiedersi cosa fare: lo legge.
- Colonne di stato
- Un tasto per passo
- Aggiornamento in tempo reale
Mobile
L'interfaccia pensata per il pollice
Una colonna sola, i tasti grandi in basso e le categorie che scorrono di lato. Il riepilogo segue chi scorre, e la conferma ha la forma di uno scontrino.
- Una colonna
- Barra in basso
- Tasti grandi
Moduli
Il modulo lungo, diviso in tre passi brevi
Una domanda per volta, risposte da toccare invece che da scrivere e una barra che dice quanto manca. È lo stesso principio del nostro configuratore.
- Barra di avanzamento
- Risposte da toccare
- Si torna indietro
Agenda
La giornata di tutti, su una schermata
Una colonna per persona e una riga per ogni mezz'ora. Gli appuntamenti si spostano trascinandoli, e ogni stato si riconosce anche senza i colori.
- Colonne per operatore
- Trascina per spostare
- Stati riconoscibili
04
Anche il testo si progetta.
Capolettera, citazioni, elenchi, note a margine: lo stesso contenuto si legge meglio, o peggio, a seconda di come è composto.
Editoriale
Il racconto impaginato come su un giornale
Capolettera, due colonne e un occhiello a colori: il testo lungo diventa una pagina che invita a leggere, invece di un blocco da scorrere in fretta.
- Capolettera
- Due colonne
- Serif da lettura
Citazione
Una frase sola, messa dove si nota
Le virgolette grandi, il testo in corsivo e chi lo dice accanto alla sua foto. Una citazione ben impaginata ferma lo scorrimento più di un titolo.
- Virgolette decorative
- Corsivo
- Autore in evidenza
Elenco
I passaggi, numerati come in un rituale
Numeri romani, un titolo breve e una riga di spiegazione per ogni passaggio. Un elenco così si legge come una sequenza, non come una lista della spesa.
- Numeri romani
- Righe sottili
- Due colonne
Messaggio
Le parole importanti, sottolineate a mano
Un testo grande, poche parole evidenziate come con un pennarello e una in corsivo. Chi legge di fretta coglie il senso anche saltando il resto.
- Evidenziatore
- Tratto a mano
- Una parola in corsivo
Approfondimento
Il titolo resta fermo, il testo scorre accanto
A sinistra la domanda, a destra le risposte divise in blocchi numerati. È l'impaginazione giusta per spiegare una cosa complessa senza perdere chi legge.
- Titolo fisso
- Blocchi numerati
- Lettura comoda
Guida
Note, avvisi e riquadri per chi deve fare qualcosa
Il testo principale resta pulito, e le informazioni di servizio stanno in riquadri riconoscibili: un consiglio, un'attenzione, una nota a margine.
- Riquadri colorati
- Note a margine
- Icone di stato
Hai visto uno stile che somiglia alla tua attività? Diccelo nel configuratore: partiamo da lì.
Configura il tuo progettoLe miniature sono ricostruzioni disegnate a scopo illustrativo: nomi, marchi, prezzi e testi al loro interno sono di fantasia.
Cosa costruiamo
Ricerca e analisi UX
Interviste, dati di utilizzo e percorsi attuali: capiamo dove le persone si fermano e perché, prima di decidere cosa ridisegnare.
Architettura e wireframe
Struttura dei contenuti, percorsi e schermate in bianco e nero. Si decide cosa va dove senza farsi distrarre dai colori.
Interfacce e identità visiva
Caratteri, colori, immagini e componenti coerenti con il tuo marchio, su ogni schermo: dal telefono al monitor dell'ufficio.
Prototipi cliccabili
Le schermate collegate fra loro come se il prodotto esistesse già. Lo provi, lo fai provare a chi lo userà, e si cambia prima che costi.
Design system
Componenti, regole e varianti documentate in una libreria sola: chi sviluppa dopo di noi, o insieme a noi, costruisce con gli stessi pezzi.
Accessibilità e prove d'uso
Contrasti, tastiera, lettori di schermo e prove con persone vere. Un'interfaccia accessibile è più facile per tutti, non solo per chi ne ha bisogno.
Cosa consegniamo
Consegniamo il progetto completo: la mappa dei contenuti, i wireframe dei percorsi principali, le schermate definitive per telefono, tablet e computer e un prototipo cliccabile da far provare a chi userà davvero lo strumento.
Insieme alle schermate arrivano il design system con componenti e regole d'uso, le specifiche per chi sviluppa e la verifica di accessibilità. Se lo sviluppo lo facciamo noi, il passaggio dal disegno al codice resta nella stessa squadra, e non si perde niente per strada.
Garanzie
Quello che è compreso, e non si paga a parte.
Un software non finisce il giorno della consegna. Queste sono le condizioni con cui lavoriamo su ogni progetto, scritte prima della firma e non trattate come un extra da quotare sei mesi dopo.
Assistenza 6 mesi inclusa
Su ogni progetto consegnato, compresa nel prezzo.
6 mesi di assistenza inclusa
Ogni progetto che consegniamo esce con sei mesi di assistenza compresi nel prezzo: correzione dei difetti, aggiornamenti di sicurezza e le piccole messe a punto che si vedono solo usandolo. Non è un canone da firmare a parte.
Privacy e GDPR, messi per iscritto
Ruoli, responsabilità e trattamento dei dati definiti
Quando il progetto comporta il trattamento di dati personali, definiamo i ruoli e le responsabilità delle parti e formalizziamo gli accordi necessari. Se LivenBit tratta dati per conto del cliente, predisponiamo gli accordi previsti dal GDPR e individuiamo le misure di sicurezza pertinenti. Le eventuali valutazioni d'impatto vengono affrontate quando richieste dalla natura e dai rischi del trattamento.
Dati protetti e infrastruttura europea
Cifratura in transito e a riposo, dove prevista
Proteggiamo le comunicazioni con connessioni cifrate e adottiamo misure adeguate per proteggere i dati archiviati. Per i progetti ospitati sulle nostre infrastrutture europee, verifichiamo la localizzazione dei servizi utilizzati e le condizioni dei fornitori coinvolti. Le misure applicate sono definite in base al progetto e ai rischi da proteggere.
Accessi minimi e tracciati
Ruoli, permessi e secondo fattore su tutto quello che tocca i tuoi sistemi. Ogni accesso è nominale e resta registrato, e alla chiusura del progetto le nostre credenziali si revocano: è una voce della checklist di consegna.
Backup verificati, non solo creati
Copie di sicurezza e prove periodiche di ripristino
Per i sistemi coperti dal servizio, prevediamo backup con frequenza e tempi di conservazione definiti. Le copie sono protette in base al rischio e, dove previsto dal piano di gestione, conservate su un ambiente separato. Verifichiamo periodicamente la possibilità di ripristino, per ridurre il rischio che un backup risulti inutilizzabile proprio quando serve.
I tuoi dati restano tuoi
I dati della tua attività restano tuoi. Prevediamo modalità di esportazione e consegna dei dati del progetto in formati utilizzabili, secondo le caratteristiche del software e gli accordi contrattuali. Le condizioni di accesso al codice sorgente, ai materiali e alle infrastrutture sono definite con chiarezza, senza sorprese al momento del passaggio a un altro fornitore.
Servizi collegati
Iniziamo
C'è qualcosa nei tuoi processi che merita di essere automatizzato?
Descrivici la situazione in poche righe. Rispondiamo con una valutazione su fattibilità, tempi e ordine di grandezza dei costi.