Considerazioni sulla progettazione di app per dispositivi mobili per i web designer
Ovunque tu giri in questi giorni, le persone parlano di app mobili . App per questo, app per questo.
Anche le statistiche sono state sconcertanti. Uno studio recente di Raffica, ha dimostrato che i consumatori hanno trascorso 81 minuti al giorno utilizzando app mobili, rispetto ai 74 minuti di navigazione web.
Dato che sempre più persone iniziano a dedicarsi alle app rispetto a Internet, ci si potrebbe chiedere se la progettazione di app per dispositivi mobili sia un'area da esplorare e quanto siano trasferibili le tue capacità di progettazione web.
In questo post, abbiamo fatto il check-in con un numero di esperti del settore per ottenere le loro prospettive. Ci uniscono a noi Robin Nixon, Aaron Maxwell, Sarah Lynn, Mike Gualtieri, Josh Clark e JD Biersdorfer.
Robin Nixon
Robin Nixon è un autore tecnico e sviluppatore web ed è l'autore del nuovo libro HTML5 per iOS e Android: Guida per principianti .
s Che consiglio daresti ai web designer che stanno pensando di entrare nell'area della progettazione e dello sviluppo di app per dispositivi mobili?
Dal mio punto di vista il modo più rapido per entrare nello sviluppo di app è quello di essere aggiornato con gli ultimi standard HTML (versione 5) e CSS (versione 3), e sono il più fluido possibile con JavaScript, perché molto presto è probabile che ci saranno soluzioni per scrivere una singola app web che può essere trasformata in app native per tutti i sistemi operativi iOS, Android, Web, Windows Phone e altro. Ciò ti eviterà di dover imparare più linguaggi complessi e ambienti di sviluppo come Java, Objective C, .NET e così via, e il tempo necessario per trasferire un progetto su diversi dispositivi.
Ad esempio, con una solida base in HTML, CSS e JavaScript, puoi facilmente assemblare grandi app web che puoi trasformare in app standalone usando le informazioni nel mio libro HTML5 per iOS e Android, oppure ci sono prodotti disponibili su Internet per aiutare a semplificare il processo.
Con Microsoft che afferma che le app di Windows 8 verranno create in HTML e JavaScript ci sono ancora più motivi per assicurarti di avere una conoscenza approfondita di queste tecnologie, in particolare perché Microsoft si sta muovendo verso il concetto di un'interfaccia utente singola entro il 2015 (simile a quello visto ora in Windows Phone 7 - e in particolare il suo prossimo aggiornamento Mango).
Quanto sono trasferibili le competenze web?
Le competenze Web sono altamente trasferibili verso lo sviluppo di app, se si utilizzano le tre tecnologie di HTML, CSS e JavaScript per crearle. Ma se hai intenzione di prendere la rotta nativa e scrivere le tue app in Objective C (per iOS) o Java (per Android), allora hai bisogno di più di un background di programmazione rispetto a uno di sviluppo web, e c'è una curva di apprendimento piuttosto ripida per ogni .
Fortunatamente, per la maggior parte delle app, è possibile utilizzare le tecnologie web per ottenere risultati simili alla scrittura di codice nativo. È solo quando si arriva a funzioni critiche nel tempo, come i requisiti di frame rate elevati dei giochi di azione rapida, che è necessario tornare alla lingua nativa di un dispositivo o sistema operativo.
Secondo te, quali app pensate siano buoni esempi di un'app ben progettata?
Non mi piace molto parlare di app particolari come rappresentazioni di un buon design dal momento che ce ne sono così tante, ma dal momento che hai fatto la domanda, indubbiamente un'app eccezionale è Theodore Grey's Gli elementi , che è un'esplorazione 3D interattiva di tutti gli elementi, in cui puoi quasi immaginare di toccarli perché puoi ruotare ogni campione, spostandoli con le punte delle dita e persino visualizzarli in 3D. Per me questo è un esempio di dove un eBook (che è ciò che realmente è) diventa molto più di un semplice libro per la traduzione eBook (che è la maggior parte degli altri eBook), portando i libri a un livello completamente nuovo.
Gli elementi
Come vedi questa volta nel web design?
Robin Nixon: Credo che in questo momento sia il momento più emozionante per programmatori e sviluppatori dai primi anni '80, quando i microcomputer sono apparsi per la prima volta. Una volta che il PC ha conquistato il trono del computer, solo i Mac e il sistema operativo Linux hanno offerto una vera competizione (e poco prezioso). Ma ora le guerre del sistema operativo sono di nuovo attive, questa volta alimentate dall'esponenziale espansione di dispositivi mobili come telefoni e tablet e dal fenomenale download di app per loro, il che significa che c'è un mondo di opportunità là fuori. Dal mio punto di vista, "C'è oro nelle loro colline".
Aaron Maxwell
Aaron Maxwell è il fondatore di Mobile Web Up, a web design mobile agenzia.
A cosa dovrebbero pensare i web designer quando si imbarcano nell'area delle applicazioni web?
Molti degli stessi concetti si applicano ancora. Come designer, pensa a quali azioni desideri che l'utente sia in grado di fare, quali esperienze desideri che siano in grado di avere. Questo focus è spesso il miglior punto di partenza.
I menu sono più efficaci quando non sovraccaricano con troppe scelte. Organizzare in una struttura gerarchica, drill-down, con non più di una dozzina di scelte per ogni livello. Considerare se l'utilizzo di una navigazione a schede aiuterà l'utente a prendere rapidamente le diverse azioni di cui ha bisogno.
La spaziatura degli elementi è complicata per i dispositivi mobili. Il riempimento extra è una tecnica molto utile sul desktop per il raggruppamento semantico; puoi mettere insieme un gruppo di widget, immagini o caselle di testo che sono correlati e distinguerli da un gruppo diverso semplicemente separando lo spazio verticale e orizzontale.
Ma su uno schermo mobile, ci sono così tanti immobili con cui lavorare. Quindi il progettista deve essere più economico con il modo in cui gli elementi sono separati spazialmente, con pochi pixel invece di dozzine. Questo può funzionare includendo altri segnali. Gli angoli arrotondati attorno a un perimetro aiutano a raggruppare. E i colori di sfondo diversi possono anche comunicare un cambiamento di contesto.
Quello che ometti è importante almeno quanto quello che hai inserito. Pensalo in questo modo: ogni elemento che aggiungi al menu delle impostazioni, ad esempio, ha un costo in termini di complessità, tempo e attenzione dell'utente. Valuta attentamente se valga la pena di attribuire funzionalità o elementi, specialmente considerando il tipo di ambienti ad alta distrazione che le app mobili tendono ad utilizzare.
Secondo te, quali app esemplificano il buon design?
È importante studiare altre app mobili di grande successo per trovare ciò che è efficace. Guarda i nomi famosi: Facebook, Skype, qualunque sia il client Twitter più popolare questa settimana. Chiedi ad amici e parenti quali app usano di più e cerca di capire perché. (Indizio: potrebbero non sapere consapevolmente perché, quindi chiedere loro direttamente non aiuterà molto.) Studio Modelli di interfaccia utente mobile.
Sarah Lynn
Sarah Lynn è un web designer e creativo e il proprietario di Sarah Lynn Design.
Come suggerisci ai designer di imparare a progettare app per dispositivi mobili?
Ho trovato alcuni dei modi migliori per imparare a progettare le app, ricercando il mercato. Guarda alcune delle app là fuori, analizzando le loro funzionalità, quali elementi utilizzano che fanno già parte delle offerte del telefono e come potrebbero essere migliorate per essere più facili da usare. Studia le interazioni di diversi elementi e in che modo le diverse app si confrontano tra loro. Molte aziende hanno già messo il tempo di fare test approfonditi sugli utenti. Impara da ciò che hanno già sviluppato e scopri come costruire su di loro e migliorarli.
Ci sono molti bei libri là fuori per iniziare. Uno consiglio vivamente di intitolare un libro di Suzanne Ginsburg Progettare l'esperienza utente di iPhone . Se, naturalmente, sei interessato al mercato iOS. Parla dei test degli utenti e di come pianificare una progettazione di app. Un ottimo punto di partenza quando non si è sicuri su come procedere nella progettazione di un'app.
Imparare come ottenere il feedback degli utenti e pianificare pesantemente sulla carta prima di andare al computer è una grande abilità per qualsiasi progettista di app (o designer interattivo in generale). Un altro ottimo modo per imparare è entrare in contatto con un designer di app che sta già producendo un ottimo lavoro. Chiedi loro di essere un mentore e di darti qualche suggerimento che sono disposti a offrire. La maggior parte dei designer è disposta a trascorrere qualche momento del proprio tempo se lo chiedi gentilmente. Ricevi feedback dai tuoi amici e da altri designer che potresti conoscere. Mostra loro i tuoi prototipi e ottieni il loro feedback.
Secondo te, quanto sono trasferibili le competenze di web design per la progettazione di app?
Un po 'trasferibile. Direi che cade di più nel regno dell'interaction design nel suo complesso. Che li comprende entrambi.
Ci sono molte cose diverse che devi considerare, date le dimensioni dei dispositivi, i requisiti delle diverse piattaforme e semplicemente il modo in cui gli utenti interagiscono con le app rispetto a un sito web. I profili degli utenti mobili possono variare un po ', dal tipico utente mobile in movimento, all'utente mobile che è semplicemente troppo pigro per afferrare il proprio laptop e usa le proprie app mentre gironzola per casa (incluso me stesso). Quindi studiando questi i modelli e la progettazione per adattarsi ai diversi stili di vita possono essere simili in un certo senso alla progettazione di un sito web. Non importa quale sia il mezzo che stai sempre cercando di progettare intorno al tuo pubblico di destinazione.
Imparare a pensare in un formato più piccolo e spesso meno flessibile può essere una sfida. Lo stesso vale per pensare a landscape vs vertical e come potresti adattare la tua app a lavorare in entrambi i modi. Sfruttare gli strumenti integrati del dispositivo mobile è un'altra ragione per cui la ricerca è così importante quando si tratta di progettare app. È quasi preferibile scegliere una piattaforma e apprenderne i dettagli, piuttosto che cercare di impararli tutti. Può essere piuttosto scoraggiante e travolgente se si tenta di imparare tutto in una volta.
Proprio come ogni nuovo mezzo, richiede la volontà di imparare e tenersi aggiornato con il mercato frenetico per avere successo.
Mike Gualtieri
Mike Gualtieri, è un analista principale presso Forrester Research e l'autore del nuovo report, Best practice per la progettazione di app per dispositivi mobili .
A cosa deve prestare particolare attenzione un designer per le app nel progettare una buona esperienza utente?
Le aspettative degli utenti sono più elevate per le app mobili rispetto a quelle per i siti web. Le app per iPhone di Apple hanno portato l'app di design alle app mobili. Inoltre, le funzionalità touch e gestuali offrono nuovi modi di interagire con le app. Il primo passo per progettare fantastiche app è capire meglio i tuoi utenti di quanto non capiscano loro stessi. La ricerca quantitativa e qualitativa tradizionale è importante per creare personaggi (persone fittizie che rappresentano i tuoi utenti). Il grande design viene dall'immaginazione-designer che immagina ciò che un utente potrebbe trovare utile, utilizzabile e desiderabile nel contesto dell'app.
In particolare, per le app mobili, i designer dovrebbero considerare le cinque dimensioni del contesto di progettazione mobile: posizione, locomozione, immediatezza, intimità e dispositivo.
Fonte: Forrester Research, Inc.
Che consiglio daresti ai web designer pensando di andare in questa direzione?
Fallo. La progettazione di app mobili per smartphone e tablet è un'opportunità in crescita. Tutti hanno bisogno di un grande design. Esistono tre percorsi per lo sviluppo di app per dispositivi mobili:
- App native. Se possiedi abilità Javascript, hai alcune capacità di programmazione. Non farti intimidire da Objective C per iPhone o Java per Android. Sfoglia un libro su entrambi e sarai in grado di ottenere una rapida idea se questo è qualcosa che puoi affrontare. Non tutti i web designer saranno in grado di farlo senza ulteriore addestramento.
- HTML5. applicazioni
- Ibrido. È un'applicazione nativa che esegue il rendering di HTML5 al suo interno.
Tutti questi percorsi di sviluppo richiedono design.
Josh Clark
Josh Clark è un designer, sviluppatore e autore di Tapworthy: progettazione di grandi app per iPhone e Le migliori app per iPhone: la guida per scaricare i discaricatori .
Che consiglio daresti ai web designer che sono interessati a passare alla progettazione e allo sviluppo di app? Che cosa hanno bisogno di imparare?
In termini di tecnologie di progettazione attuali, potrebbe non esserci nemmeno bisogno di imparare molto di più. Puoi creare potenti interfacce per app utilizzando i nostri amici provati e veri HTML, CSS e JavaScript. Non sto parlando solo di app web tradizionali qui, ma anche di cosiddette "app ibride". Si tratta di app le cui interfacce sono progettate con HTML ma fornite come app native nei vari negozi di app. È come distribuire la tua app Web attraverso l'app store. Per i web designer, questo è un modo accessibile per iniziare a progettare applicazioni web senza imparare un linguaggio di programmazione.
Jonathan Stark ha scritto due fantastici libri che forniscono una panoramica su come farlo, utilizzando un progetto open source chiamato PhoneGap, che raggruppa l'app Web nel proprio browser come app nativa: Creazione di app per iPhone con HTML, CSS e JavaScript e Costruire app Android con HTML, CSS e JavaScript .
Ecco la cosa: mentre puoi fare cose straordinarie con HTML5 e CSS3, queste tecnologie non riescono proprio a eguagliare lo smalto e il pizazz delle app di Real McCoy, un software costruito con la lingua nativa del dispositivo. Se vuoi creare app con grafica strabiliante, animazioni, widget nativi e pieno accesso all'intero dispositivo, è meglio andare nativo. Ciò significa che devi codificare le app iPhone in Objective-C, le app Android in Java e così via. Questi sono linguaggi di programmazione che non scherzano e possono rappresentare una scalata difficile da imparare per i web designer. Se segui questa strada, potresti voler collaborare con un programmatore più esperto per fare in modo che i tuoi progetti prendano vita. Nel frattempo, tuttavia, sperimentare la progettazione di app con HTML, CSS e Javascript può essere un ottimo modo per familiarizzare con la piattaforma e persino creare prototipi rapidi per app native.
Per quanto riguarda il processo di progettazione vero e proprio, la progettazione di esperienze mobili differisce in modo importante dal design del desktop. I due trucchi per i neofiti sono l'ergonomia e il contesto.
Per i dispositivi touchscreen, hai problemi ergonomici onesti con cui confrontarti. Stai progettando un'interfaccia per dita e pollici, e questo significa che devi considerare i problemi di comfort dove il tuo pollice si ferma naturalmente sullo schermo? Più di questo, ci sono problemi di visibilità. Quando lavori un'interfaccia a mano, stai ovviamente oscurando lo schermo. Ciò significa che devi progettare i controlli in modo che non interferiscano con il contenuto. Entrambe queste considerazioni - comfort e visibilità - spiegano perché la maggior parte degli smartphone touchscreen visualizza i controlli principali e la navigazione nella parte inferiore dello schermo. È qui che il tuo pollice si ferma quando si usa il telefono con una sola mano, e significa anche che puoi lavorare sui controlli senza intralciare il contenuto. Questo è esattamente l'opposto di quello a cui siamo abituati sul desktop, in cui i menu ei controlli principali si trovano nella parte superiore dello schermo.
L'altra area che è nuova da considerare è il contesto. Come e dove useranno questa app le persone? In che modo ciò influenza le loro priorità e le caratteristiche che dovresti mettere in primo piano? Devi stare attento qui. Un mito si è evoluto sul fatto che esiste un solo tipo di utente mobile: affrettato, in fretta, distratto. Questo è certamente il caso, a volte, ma non sempre. Il cellulare non è solo in viaggio: è sul divano, in cucina, aspetta all'aeroporto per un volo in ritardo. Tutte queste situazioni sono momenti in cui il tuo pubblico ha molta attenzione e può davvero passare del tempo con la tua app. Allo stesso tempo, i dispositivi mobili possono anche fare di più dei computer desktop perché sono caricati con tutti questi sensori che danno loro effettivamente dei superpoteri: GPS, microfono, fotocamera, touch, giroscopio, bussola. Questo contesto del dispositivo definisce in che modo il pubblico utilizza il proprio telefono e si aspetta di utilizzare la tua app.
Tutto ciò significa che è necessario considerare in che modo il contesto del dispositivo influisce sulle priorità dell'utente e tali priorità sono probabilmente diverse dalle priorità del desktop. Ma c'è una svolta delicata a questo: non si può confondere questo contesto con l'intento dell'utente. C'è un istinto comune a semplificare eccessivamente le app mobili, per renderle desktop lite. È sbagliato. Al giorno d'oggi facciamo tutto sui nostri telefoni e ogni volta che dici "Le persone non vogliono farlo sul cellulare", ti sbagli. Abbiamo tutti vissuto quell'esperienza su un sito web sul tuo smartphone e sei stato urtato alla versione mobile del sito, dove hanno estratto esattamente la funzione o il contenuto che stai cercando. Solo perché sei su uno schermo piccolo, raramente vuoi dire che vuoi fare di meno. È come dire che solo perché un libro tascabile è più piccolo, dovremmo rimuovere i capitoli. Non confondere il contenuto del dispositivo con l'intento.
Quello che sto dicendo è che credo che, nella maggior parte dei casi, le app e i siti web per cellulari debbano avere contenuti e caratteristiche simili per i loro cugini desktop. La presentazione e la priorità potrebbero cambiare molto bene per adattarsi alla mentalità mobile, ma il contenuto dovrebbe quasi sempre essere lo stesso. In effetti, in molti casi, le versioni mobili dovrebbero fare di più, perché i dispositivi sono in grado di fare di più. Ecco perché l'app mobile di Amazon può fare cose che il sito Web non può fare: scansione di codici a barre, per esempio, per cercare oggetti.
Per i web designer, questo significa che devi iniziare a pensare in modo più flessibile su come costruire siti web. Lo stiamo sbagliando da oltre 15 anni, costruendo siti web solo per la navigazione desktop. Questo non è ciò per cui è stato progettato il web. È stato progettato per essere neutrale rispetto alla piattaforma, per essere visualizzato su qualsiasi tipo di schermo o dispositivo. Semplicemente non sai come verrà visualizzato il tuo sito web ora. Ci sono un milione di dispositivi tutti con diversi fattori di forma che possono accedere al tuo sito web ora, e questo significa che è importante creare siti web che possano adattarsi a qualsiasi dispositivo. Per la maggior parte di noi, questo è un nuovo modo di pensare alla creazione di siti Web: non si tratta di generare un sito web mobile separato e un sito Web desktop separato. Invece, significa costruire un sito web che si adatta con garbo ai vincoli e alle capacità di ogni dispositivo.
Siamo molto fortunati qui sul pianeta terra che viviamo insieme al ragazzo più intelligente dell'universo su come progettare questo tipo di sito responsive, e il suo nome è Ethan Marcotte. Ethan ha appena scritto un nuovo grande libro chiamato Web design reattivo che descrive come andare sulla costruzione di siti che adattano il loro design e funzionalità per qualsiasi dispositivo. È un genio e puoi anche essere un genio leggendo il suo libro. Questa roba è importante per la salute e il futuro del nostro mestiere come la campagna degli standard web dell'ultimo decennio. Ogni web designer dovrebbe mettere da parte alcune ore per respingere quel libro.
JD Biersdorfer
JD Biersdorfer è un giornalista di tecnologia e autore di numerosi libri su gadget tra cui Le migliori app per iPhone .
Secondo te, cosa rende un'app ben progettata e una buona esperienza utente?
Dopo aver esaminato 400-500 app per il libro, Best iPhone Apps, penso che le app che funzionano meglio siano quelle in cui l'interfaccia utente è stata progettata specificamente per lo schermo del piccolo telefono e non per quelle che adottano l'approccio desktop (con un sacco di icone e menu) e cercare di stipare troppo nello spazio. Una buona app è anche un'app stabile, ben collaudata e relativamente priva di incidenti.
Ci sono app particolari che vengono in mente per essere dei buoni esempi di design?
Sebbene non l'avessi incluso nel libro in quel momento perché l'ho trovato ingombrante e disordinato, "AccuWeather" ha ridisegnato la sua app per iPhone in un programma meteo davvero stupendo con una grafica grande e colorata e un'interfaccia abbastanza intuitiva in modo da non Devo scavare attorno a diversi schermi solo per vedere quanto è caldo - e quanto sarà caldo. Le app gratuite e quelle a pagamento differiscono leggermente nel design, ma entrambi utilizzano gli stessi elementi visivi per trasmettere rapidamente le condizioni meteorologiche.
AccuWeather
Mi piace anche l'app "Kayak" per le cose che gli sviluppatori ci hanno messo oltre alla solita parte di prenotazione volo-e-hotel. Ad esempio, c'è una sezione che puoi toccare per scoprire quanto ogni compagnia ti addebita per controllare le valigie, un'altra per scoprire quali negozi e ristoranti si trovano nell'aeroporto in cui sei bloccato, un convertitore di valuta e persino una lista di controllo per imballare è un'applicazione di viaggio pratica a tutto tondo che è facile da navigare.
Dal punto di vista delle notizie, penso ancora che l'app "BBC News" sia perfetta per i segugi. I creatori dell'app riescono a trovare un modo leggibile per mettere nove migliori storie (con titoli e piccole immagini) sulla schermata iniziale, insieme a un banner di Breaking News e un pulsante da toccare in modo da poter ascoltare lo streaming in diretta della BBC Radio. È molto facile modificare le categorie di notizie che si desidera seguire e ci sono collegamenti a video e clip audio preregistrati che è possibile riprodurre in streaming, come il breve video di World News Summary.
Questo post ti è stato offerto dall'offset stampa di opuscoli compagnia, volantini del giorno dopo.
Quali sono le tue esperienze con la progettazione di app per dispositivi mobili? Quali applicazioni ritieni dimostrino i buoni principi di progettazione e l'interfaccia utente? Fateci sapere nei commenti qui sotto.