12 Trucchi di progettazione dell'interfaccia utente per app mobili e Web di cui nessuno ti ha parlato - Fino ad ora
Pubblicato: 2016-02-28[ Proto .io è uno strumento di prototipazione di app mobili utilizzato da imprenditori e startup per creare prototipi realistici completamente interattivi che sembrano app reali.]
Abbiamo chiesto a sette designer dell'interfaccia utente, sviluppatori e imprenditori quali trucchi per la progettazione dell'interfaccia utente di app mobili e web hanno imparato a proprie spese o che hanno imparato nel corso della loro carriera. O nessuno ha mai parlato loro di questi suggerimenti, o nessuno sembra conoscere i problemi quando li sollevano. In ogni caso, ecco 12 cose che ora non devi imparare per tentativi ed errori, a meno che, ovviamente, tu non l'abbia già fatto!
I 3 migliori trucchi di design di Duffy
John Geletka è Executive Vice President di Digital Strategy presso Duffy (@duffydesignx), un'agenzia con oltre 30 anni di esperienza nel design. Ecco alcuni trucchi che ha imparato nel corso degli anni.
Due può essere un numero magico.
“Con il design reattivo, progetta sempre due schermi contemporaneamente: verticale mobile (320 px) e desktop (1200 px). Rende il processo molto più veloce", afferma Geletka.
Inizia con un design a ossa nude.
“All'inizio riduci tutte le caratteristiche, campanelli e fischietti. Togliti di mezzo la spazzatura e concentrati sull'obiettivo dell'app", afferma Geletka. “Ciò significa inizialmente non aggiungere condivisione, salvataggio e ogni integrazione al tuo progetto. Assicurati di ottenere l'idea principale.
Non aver paura di prendere una penna.
"Gli strumenti digitali sono fantastici, ma a volte puoi fare di più sulla carta in 10 minuti", afferma Geletka. "Se sei bloccato o hai poco tempo, usa la carta."
Raggiungi l'equilibrio con questo trucco di progettazione dell'interfaccia utente dell'app Web
Brandon Termini è fondatore e direttore creativo di Handsome (@HandsomeMade), un'agenzia impegnata nella creazione di design dell'interfaccia utente di app web e prodotti digitali "intenzionalmente belli e deliziosi".
Utilizzare il peso ottico corretto.
“L'equilibrio è estremamente importante quando si creano interfacce di successo. Un buon equilibrio consente ai tuoi utenti di scansionare facilmente la tua app nel modo previsto", afferma Termini. “Vedo che questa regola viene infranta più spesso quando si utilizzano varie icone nelle interfacce. Alcune icone sono più pesate orizzontalmente mentre altre sono più verticali, ed è nostro compito assicurarci che una volta messe insieme si sentano ugualmente equilibrate".
Peso ottico e pulsanti di riproduzione
“Se stai progettando un pulsante di riproduzione, la risposta non è attaccare un triangolo di lati uguali orizzontalmente e verticalmente centrato all'interno di un cerchio. Certo, geometricamente sono centrati, ma otticamente il triangolo si sente più pesante a sinistra a causa della sua maggiore altezza", afferma Termini. "Non preoccuparti, puoi fare due cose per risolvere questo problema: sposta il triangolo leggermente a sinistra per ingannare l'occhio facendolo vedere centrato, oppure riduci leggermente la larghezza del triangolo per far apparire tutti i lati uniformi."
Dalla progettazione dell'interfaccia utente dell'app Web ai dispositivi mobili
I nostri prossimi tre trucchi per la progettazione dell'interfaccia utente di app mobili e web provengono da Christian Dodd, Vice President e User Experience Strategy Director e Nathan Koch, Creative Technology Director di Cramer-Krasselt (@cramerkrasselt). Cramer-Kasselt è la seconda agenzia pubblicitaria indipendente negli Stati Uniti, con clienti come Porsche, Corona Extra e Heinz, quindi Dodd e Koch attingono da una ricca riserva di esperienza per portarci questo consiglio:
Non dimenticare le interazioni con il passaggio del mouse sul Web durante il porting su dispositivi mobili e avere un piano chiaro per gestirle all'inizio della progettazione.
“Il contenuto nascosto dietro uno stato al passaggio del mouse su desktop può essere gestito in diversi modi su dispositivo mobile: direttamente sulla pagina e nascosto dietro un tocco. Nessuna soluzione per gestire gli eventi al passaggio del mouse sul desktop funziona in tutti i casi", affermano Dodd e Koch. “I contenuti esplicativi/di utilità spesso traggono vantaggio dall'essere mostrati sulla pagina e i contenuti esplorativi spesso hanno più senso dietro un tocco. In generale, man mano che gli utenti si sentono più a loro agio nello scorrere su tutti i dispositivi, nascondere i contenuti dietro gli stati al passaggio del mouse e nascondere/mostrare i widget sta diventando sempre meno necessario.
Raccomandato per te:
Cosa significa la disposizione anti-profitto per le startup indiane?
In che modo le startup Edtech stanno aiutando la forza lavoro indiana a migliorare le competenze e a diventare pronte per il futuro...
Azioni tecnologiche new-age questa settimana: i problemi di Zomato continuano, EaseMyTrip pubblica stro...
Le startup indiane prendono scorciatoie alla ricerca di finanziamenti
Piattaforma di marketing digitale Logicserve Borse INR 80 Cr Finanziamenti, rinomina come LS Dig...
Il rapporto avverte di un rinnovato controllo normativo sullo spazio Lendingtech
Cercare di far funzionare il video con riproduzione automatica sul Web mobile di solito non vale la pena.
“Gli sviluppatori di sistemi operativi mobili non consentono la riproduzione automatica dei video per un motivo. In generale, l'audio e il video sono più dannosi per l'utente sui dispositivi mobili", affermano Dodd e Koch. "Gli utenti mobili sono abituati a fare scelte deliberate per consumare i media".
C'è di più nel design reattivo oltre a ridurre il browser.
"Anche il rilevamento delle funzionalità è una parte importante dello sviluppo del Web mobile", affermano Dodd e Koch. "Non pensare di non poter indovinare gli eventi su un sito Web desktop, i dettagli dell'interazione mobile sono più sofisticati di quanto potrebbero sembrare".
C'è di più in La regola del tre di quanto pensi
Karolyn Hart è Chief Operating Officer di InspireHUB (@Inspire_HUB) e creatrice di IHUBApp, una delle prime app Web mobili di livello aziendale sul mercato.
Cerca di mantenere tutti gli elementi di progettazione dell'interfaccia utente dell'app Web in gruppi di tre.
“Ci siamo imbattuti nella 'Regola del Tre' mentre cercavamo come creare fiducia nella nostra interfaccia per i nostri clienti. La V1.0 della nostra piattaforma non ha colto nel segno", afferma Hart. “La ricerca mostra che tre è il numero ottimale che aumenta la fiducia. Meno di tre e le persone si sentono insicure, più di tre e si sentono sopraffatte”.
"Quindi abbiamo lanciato una sfida UX che tutto deve essere presentato in tre", afferma Hart, "dalle decisioni ai passaggi mentre i nostri clienti popolano le loro app. La norma ha trasformato il nostro strumento. Il nostro back-end è estremamente sofisticato per adattarsi alla semplicità del design, ma ne è valsa la pena!”
Mantenere i gesti semplici e intuitivi
Jason Suriano è fondatore e CEO di Rocketfuel Productions Inc. (@TrajectoryIQ). Con oltre 13 anni di esperienza nella progettazione dell'interfaccia utente di app mobili e web e dopo aver creato progetti online e basati su dispositivi mobili per aziende come Discovery Communications, Suriano ha raccolto alcuni suggerimenti professionali. Ecco il suo preferito:
Sul cellulare, supponi che tutte le dita siano goffe.
“Un trucco che abbiamo implementato durante la progettazione di giochi per dispositivi mobili è rendere l'intera schermata iniziale un'area toccabile. Ciò significa che se l'utente tocca il pulsante di avvio e manca, l'app caricherà comunque la schermata di gioco successiva, assicurando che l'utente continui nell'app", afferma Suriano.
"Poiché l'interfaccia utente/UX mobile è definita da tocchi, doppi tocchi, scorrimenti e gesti, un passo falso nella progettazione di qualcosa di semplice come una schermata iniziale può lasciare l'utente bloccato o frustrato, costringendolo a premere il pulsante Home e uscire dall'app", aggiunge .
Mantenere una mente aperta ai nuovi trucchi di progettazione dell'interfaccia utente dell'app Web
Nolan Kier ed è Project Manager e Business Development Associate presso Messapps (@Messapps), una società di sviluppo di app con sede a New York. "Nonostante sia stata fondata poco meno di tre anni fa, Messapps è già cresciuta rapidamente fino a diventare una delle società di sviluppo di app più rinomate e innovative nel campo dello sviluppo di app", afferma Kier, "e abbiamo imparato molto sull'interfaccia utente delle app Web trucchi di design in quei tre brevi anni.
Continua a cercare modi nuovi e migliori per portare a termine il lavoro.
"Molti trucchi o nuovi metodi per completare un compito che abbiamo appreso attraverso la ricerca del problema o scavando più a fondo in un particolare problema di sviluppo per determinare quali risposte potrebbero essere anticipate", afferma Kier. “Esempi di questo includono imparare a scrivere documenti interessanti scrivendo nuovi frammenti di codice su LaTeX, che è qualcosa di simile a un editor di testo con uno stile/formato di programmazione. Inoltre, Mathematica, che è come Mathcad per MacOS, aveva questa funzione nascosta che permetteva a un utente di creare uno schema 3D difficile usando il software.
"Per la progettazione, inciampare su come comprimere i fotogrammi usando cose come la modifica dei canali alfa e la capacità di comprimere singole immagini utilizzando algoritmi personalizzati sono stati piccoli trucchi che hanno aiutato il processo", afferma Kierk. “Essere nel business della progettazione e sviluppo dell'interfaccia utente di app Web richiede innovazione che corrisponda all'evoluzione della tecnologia. Di conseguenza, i nostri designer e sviluppatori rielaborano costantemente i nostri processi interni ed esterni per "reinventare la ruota" e scoprire nuovi modi di progettare e sviluppare".
Trovare le persone giuste con cui lavorare
Robert Pieta è un ingegnere iOS e CEO di Porter Key (@PorterKeyboard), una tastiera iOS intelligente che fornisce suggerimenti contestuali. Ecco il suo più grande consiglio sia come ingegnere che come imprenditore:
Trova un designer sviluppatore o uno sviluppatore designer.
"Qualcuno che comprende e ha esperienza senior da entrambe le parti aiuterà a risolvere i problemi di comunicazione e aiuterà a mantenere un progetto nei tempi previsti", afferma Pieta. “Ci sono due vantaggi principali in questo. In primo luogo, una persona con esperienza di progettazione e sviluppo può aiutare a colmare le lacune nella comunicazione. Sia la progettazione che lo sviluppo hanno i loro termini chiave, gergo, ipotesi implicite e tenant principali. Conoscendo entrambi i mondi, i problemi di comunicazione possono essere presi preventivamente.
"In secondo luogo, uno sviluppatore con esperienza di progettazione può stimare la complessità e i requisiti di risorse molto meglio di un singolo sviluppatore, singolo designer o persino product manager", aggiunge Pieta. “Spesso, piccole modifiche al design possono portare a una significativa riduzione dei tempi di sviluppo. Ciò è particolarmente vero sui dispositivi mobili, dove alcuni paradigmi di progettazione sono virtualmente predefiniti. Capire quali personalizzazioni sono facili da implementare e quali animazioni sono semplici da usare aiuterà a garantire che sia gli sviluppatori che i designer apprezzino il processo".
"Alcuni team esistenti possono affermare che incontri standup con sviluppatori e designer risolvono questi problemi", afferma Pieta, "ma spesso non è così. L'incontro è troppo breve per approfondire con precisione i presupposti di progettazione impliciti, le precedenti ricerche degli utenti, le decisioni sull'architettura del codice esistente, la scelta del linguaggio e altre scelte che definiscono il progetto. Solo una persona con esperienza in entrambi i mondi sarà in grado di colmare il divario in modo rapido ed efficace".
E un altro trucco da noi: usa lo strumento di prototipazione giusto
Alcuni trucchi per la progettazione dell'interfaccia utente di app mobili e web possono essere insegnati e alcuni possono essere appresi solo nel modo più duro, attraverso l'esperienza. Fortunatamente, i designer e gli sviluppatori di oggi possono costruire la loro esperienza, come si suol dire, sulle spalle di giganti.
[ Proto .io è uno strumento di prototipazione di app mobili utilizzato da imprenditori e startup per creare prototipi realistici completamente interattivi che sembrano app reali.]