Wireframes e Responsive Design nell'UX Design: concetti e applicazioni

LEZIONE 15

WIREFRAMES E RESPONSIVE DESIGN

Di cosa tratteremo:

• Wireframing
• Adaptability
• Responsive design
• Accessibility
• Wireflows

Perchè wireframes?

Supponiamo di avere una meravigliosa idea per un prodotto (un sito web, un'app, un videogioco, qualsiasi cosa). Se non siete in grado di trasmettere quell'idea ad altre persone, ognuno farà quello che pensa sia meglio. Questo significa che ognuno andrà in direzioni diverse! A meno che non si stia lavorando da soli, e anche in questo caso si può pensare di avere un'idea precisa del progetto che si sta pensando, ma in realtà non lo è. Qual è il modo migliore per chiarire un processo di pensiero che gli esseri umani hanno scoperto negli ultimi millenni? Inizia con carta e penna!

Landing Page Our Product Abou News O O 0 SHORT STATEMENT ABOUT THE TEAM < > = ACHLIGHT #:1 SHORT STATEMENT ABOUT THE COMPANY HIGHLIGHT 03

Che cos'è un wireframe?

Tornando allo sviluppo di un prodotto: I Wireframes sono progetti che aiutano la comunicazione tra progettisti e programmatori sulla struttura del sito web o app che stanno sviluppando. I wireframe rappresentano l'inizio della messa in pratica dell'architettura dell'informazione. L'attività di wireframing indica il processo di creazione di bozze di base di un sito web o di un'interfaccia di applicazione per dimostrare la sua struttura e layout.

Cosa può fare:

• Dare la prima forma visiva a un'architettura dell'informazione.
• Incoraggiare la discussione in seno al gruppo.
• Determinare le funzionalità dell'interfaccia utente.

Cosa non può fare:

• Dare la sensazione del look finale UI.
• Fornire funzionalità di lavoro.
• Garanzia che siete compresi :)

Esempio:

• No colori
• No immagini
• Font basico

... 4.0 Taxonomy Vertical interconnection and integration Use Case 1 Use Cose 2 - Use Case 3

Tipi di wireframes

Low-fidelity Wireframes:

Semplici schizzi dell'interfaccia, con particolare attenzione alla struttura e al layout.

High-fidelity Wireframes:

Rappresentazione dettagliata dell'interfaccia con tipografia di base, icone e dettagli della documentazione.

Adattabilità, responsive design e accessibilità

Il ruolo del contesto

Il contesto svolge un ruolo importante nel UX Design. Esempi di come il contesto può influenzare il comportamento e le preferenze degli utenti:

• Un utente che naviga su un sito web da un dispositivo mobile può avere esigenze e comportamenti diversi rispetto a un utente da desktop.
• Un utente con un alto grado di conoscenza nel dominio di un sito web può avere esigenze e preferenze diverse rispetto a un utente che non lo ha.

106Il contesto può includere una vasta gamma di fattori quali demografia degli utenti, dispositivi, ubicazione, cultura e esigenze di accessibilità. Per questo è importante condurre ricerche e test sugli utenti per comprendere i diversi contesti in cui gli utenti interagiranno con il progetto.

Adattabilità

Ricorda: Non stai progettando per te stesso! Questo implica due cose: 1. Gli altri pensano diversamente da te (differenze soggettive e/o culturali, ecc.). 2. Altri hanno esigenze e capacità diverse (competenze, capacità fisiche, ecc.). L'adattabilità nel design UX è un termine generico e si riferisce alla capacità di un design di adattarsi e rispondere alle diverse esigenze, contesti, competenze e preferenze degli utenti. Di solito, copre le nozioni di:

• Responsive design
• Accessibilità

Responsive design

Con l'esplosione del mercato dei dispositivi è arrivata una frammentazione delle diverse dimensioni di display disponibili. Inoltre, ogni dispositivo ha diversi layout, standard, icone ecc. Con l'uso crescente di dispositivi mobili per accedere a Internet, è fondamentale garantire che i siti web siano facilmente leggibili e utilizzabili su una vasta gamma di dispositivi. Il responsive design viene in aiuto come metodo di progettazione e codifica di pagine web, app, ecc., per adattarsi alle dimensioni e alla risoluzione dei diversi dispositivi. Il RD consente agli utenti di avere un'esperienza coerente sia che accedano al sito web su desktop, tablet o dispositivo mobile. Inoltre, facilita la manutenzione e l'aggiornamento del sito web da parte delle imprese, che devono mantenere una sola versione del sito.

Responsive design: tecniche

Griglia flessibile: una griglia flessibile permette agli elementi di adattarsi alle dimensioni dello schermo. Questo può essere ottenuto in molti modi, a seconda del framework che si sta utilizzando.

• Immagini flessibili: Rendere le immagini in scala e regolare la dimensione dello schermo.
• Media queries & breakpoints: consente di applicare stili diversi in base alle caratteristiche del dispositivo.

Responsive design: mobile first

Il mobile-first design è una filosofia di progettazione che dà la priorità al mobile rispetto al desktop. Questo approccio assicura che l'esperienza mobile sia ottimizzata prima di progettare per schermi più grandi. 107Progettando per mobile prima, i designer assicurano che il contenuto e le funzionalità più importanti siano facilmente accessibili su schermi di piccole dimensioni e che il sito sia facile da navigare con controlli touch. Questo approccio aiuta anche a garantire che il sito si carichi rapidamente su dispositivi mobili con connessioni internet più lente. Inoltre, il mobile-first design può contribuire a migliorare l'ottimizzazione dei motori di ricerca (SEO) assicurando che il sito sia ottimizzato per schermi più piccoli. Mobile-first consente un "progresso" di progettazione, il che significa che la progettazione inizia dalle funzioni minime e interazioni di base (di solito si trovano in smartphone), per poi costruire l'aggiunta di più interazioni ed effetti (di solito si trova in desktop). Ciò si contrappone alla "graceful degradation", che consiste nel partire da un progetto completo basato su dispositivi avanzati, per poi tagliare le caratteristiche per adattarsi a dispositivi più piccoli e meno capaci.

Responsive design: Altri consigli

• Mantenerlo semplice: Evitare di utilizzare layout complessi e mantenere il design minimalista.
• Dare priorità al contenuto: il contenuto dovrebbe essere l'elemento più importante della pagina, e dovrebbe essere facilmente leggibile su tutti i dispositivi.
• Design per il tocco: Assicurarsi che i pulsanti e collegamenti siano abbastanza grandi da poter essere facilmente toccati con un dito.
• Ottimizzare per il tempo di caricamento: Grandi immagini e altri elementi pesanti possono rallentare il tempo di caricamento di un sito, soprattutto su dispositivi mobili. Ottimizzare questi elementi può migliorare l'esperienza utente.
• Test, test, test: Testare il sito su una varietà di dispositivi per garantire che si guarda e funziona correttamente (possibilmente al di fuori del vostro "laboratorio").

Adaptive design (Progettazione adattiva)

Oltre al responsive design c'è un altro modo per rendere l'interfaccia automaticamente adattabile all'utente: il design adattivo.

• Il responsive design è un tipo di adattamento al dispositivo in modo fluido e flessibile.
• Progettazione adattiva, di solito sta per la creazione di layout diversi per ogni dispositivo. È più costoso, ma a volte è meglio (ad esempio, grandi aziende che devono rendere il loro sito web migliore per i dispositivi mobili, senza spendere tempo in retrofit la versione desktop)

Ma può esserci un altro modo in cui il sistema può adattarsi al l'utente.

• La differenza risiede nel contesto di utilizzo:
• dipende dal dispositivo utilizzato
• dipende dagli utenti stessi.

Design for adaptability User Device Accessibility Adaptive UX Responsive design Adaptive design RTN FTRI TET . TONNASO TURCHT - TIIN 24-35 Falt plants rusaraum 108

Adaptive UX

Come può un sistema adattarsi a un utente? Avendo un'informazione di base sull'utente (posizione tramite GPS, filtraggio collaborativo, o anche un modello utente da analytics) è possibile sfruttare per adattare l'interfaccia all'utente. Nel caso di filtraggio collaborativo:

• utente A piace X e Y
• e l'utente B piace X
• quindi l'utente B potrebbe essere interessato a Y

Insieme al filtraggio collaborativo, il filtraggio basato sul contenuto è un'altra possibilità, ma non si basa sugli utenti, bensì sui contenuti stessi.

COLLABORATIVE FILTERING CONTENT-BASED FILTERING Read by both users Read by user Similar users Similar articles Recommended to user Read by her, recommended to him!

Accessibilità

L'accessibilità in UXD è fondamentale perché assicura che tutti gli utenti possano accedere e interagire con i prodotti digitali, indipendentemente dalle loro capacità. Con l'uso crescente di prodotti e servizi digitali, è essenziale che i progettisti considerino l'accessibilità per assicurarsi che tutti possano utilizzarli. Ricorda: L'accessibilità aiuta tutti! Avere un prodotto che fornisce accessibilità, non è solo la cosa giusta da fare, ma è più utilizzabile per tutta la gamma di utenti. Per essere consapevoli dei possibili problemi di accessibilità, ecco un elenco di alcuni:

• Visivo (ad esempio, daltonismo)
• Mobilità/mobilità (ad esempio, problemi con l'utente di sedia a rotelle)
• Uditivo (difficoltà di ascolto)
• Convulsioni (in particolare epilessia fotosensibile)
• Apprendimento/cognizione (ad esempio dislessia)

Le barriere di capacità possono anche sorgere per qualsiasi utente:

• Incidentale (ad esempio, privazione del sonno)
• Ambientale (ad esempio, utilizzando un dispositivo mobile sotterraneo)

109