Il realismo nel design dell'interfaccia utente è un tema caldo in questo momento. Ogni blog di design degno di tutto sta dicendo apertamente ad Apple che sono lontani nel suggerire che le app per iPad dovrebbero imitare la realtà.
Unisciti a noi mentre aggiungiamo un po 'di vita al dibattito affrontando alcune di queste nozioni. Andremo oltre quando il realismo è efficace e quando è distruttivo e come puoi maneggiarlo nei tuoi progetti senza rovinare la tua interfaccia.
L'iPad accende un dibattito
Fin dal rilascio dell'iPad, c'è stata molta discussione sull'uso del realismo nella progettazione dell'interfaccia utente. Apple incoraggia i designer a dare alle loro app per iPad una metafora visiva piuttosto che crearle per assomigliare alla tipica arte digitale che tradizionalmente vediamo nel design dell'interfaccia utente.
Per i principianti, a noi designer non piace particolarmente la gente che ci dice come fare il nostro lavoro. Inoltre, molti non sono affatto contenti dei suggerimenti di interfaccia utente di Apple o persino delle scelte di interfaccia di Apple in applicazioni iPad predefinite come Notes e Calendar.
Ciò ha portato ad alcuni severi avvertimenti da parte della comunità del design sull'uso di interfacce psuedo-realistiche. Sebbene questi avvertimenti siano ben intenzionati, ben argomentati e legittimi, il dibattito sembra essere un po 'unilaterale a questo punto, quindi mi piacerebbe introdurre una nuova prospettiva per mantenere le cose oneste e intelligenti.
Sulle spalle dei giganti
Gran parte della discussione odierna in questa arena si baserà su tre eccellenti articoli sull'argomento tratti da colleghi che rispetto molto:
- Progettazione per iPad: Reality Check di Oliver Reichenstein
- Realismo in UI Design di Lukas Mathis
The Uncanny Valley
Il titolo più appropriato per la lotta che stiamo affrontando con realismo nel design viene da Francisco Inchaust nel suo articolo di GetFinch.com. Nota che Masahiro Mori ha coniato il termine? Uncanny Valley? negli anni '70 per riferirsi a un punto nello sviluppo della robotica in cui le macchine diventano così simili agli umani che noi siamo inorriditi da loro, o per lo meno, messi a disagio dal loro aspetto.
Questa idea si applica perfettamente alla tendenza nel design dell'interfaccia utente. Reichenstein ha un eccellente esempio nel suo articolo: uno screenshot dall'interfaccia orribile psuedo-realistica di Kai PhotoSoap.
Trend-Bashing è solo un'altra tendenza?
È sicuramente un caso che stiamo assistendo a una rinascita del design dell'interfaccia in questa stessa ottica. Tuttavia, mentre i designer cominciano a riprendere questo e ad aggredire gli altri per questo, sto notando una certa esitazione nella comunità del design di applicare qualsiasi tipo di realismo per paura di essere vittima di bullismo. In un certo senso, Twitter, Dribbble e la blogosfera diventano un parco giochi e ci sono molti bambini che vogliono adattarsi e fare ciò che è bello senza offendere nessun altro.
Invece di picchiare il ragazzino che ha deciso di indossare la t-shirt Teenage Mutant Ninja Turtles, abbiamo la tendenza a deridere i designer che creano interfacce usando tutt'altro colori solidi e uno stile di design minimalista.
Il problema sorge quando le tendenze di attacco diventano semplicemente una tendenza stessa, senza un'analisi adeguata di ciò che è e non è il migliore dal punto di vista dell'utente. Designers dovrebbero essere criticato e tendenze dovrebbero essere identificati correttamente, ma dobbiamo assicurarci di non costruire regole rigide e basate sulla preferenza piuttosto che sulla logica.
Cosa c'è di così male nel realismo?
Gli articoli che ho citato sopra contengono alcuni esempi di design dell'interfaccia utente che sono visti come flirtare con la Uncanny Valley, il che significa che il loro realismo in realtà riduce l'esperienza.
Diamo un'occhiata a un paio di questi per vedere se possiamo davvero prendere di mira i problemi che si verificano. La prima è l'interfaccia di iBooks di Apple, mostrata sotto.
Ora, ho sicuramente scritto prima di come detesto l'interfaccia di lettura di iBooks. Tuttavia, penso che equiparare il problema qui alla valle di Uncanny è in realtà una diagnosi errata. L'interfaccia del libro è ovviamente piuttosto "toony"? e non così realistico da rendere il mio cervello diffidente nei suoi confronti. Non guardo quelle pagine impilate per pochi minuti pensando che siano così reali ma ancora lontane in qualche modo importante come faccio con la versione altamente modificata di Jeff Bridges in Tron Legacy.
Quindi qual è veramente il problema qui? Il problema è che la piccola e graziosa interfaccia di Apple è una distrazione completa che usa molto poco lo spazio disponibile. Quella piega che passa in mezzo alla pagina non mi rende eccitata dal realismo, ma semplicemente imita l'unica parte peggiore di leggere un vero libro!
Il realismo nell'interfaccia di iBooks interferisce con l'obiettivo dell'app: la lettura. Perché stavano facendo spazio alla loro metafora, ho meno spazio per la mia esperienza di lettura. Questo diventa ovvio quando guardiamo all'interfaccia iPad Kindle:
Questa è una boccata d'aria fresca rispetto a iBooks, ma perché? È possibile che il mio cervello sia finalmente libero dal tormento della valle di Uncanny o che l'interfaccia abbia molto più spazio per respirare e dia più spazio a ciò che voglio veramente vedere? Io invio il secondo. Si noti che il cursore in basso, che assomiglia molto ad un pulsante reale, che si può spostare avanti e indietro. Questo non mi disturba un po '. È sia attraente che, soprattutto, fuori dalla mia strada!
Una storia di efficienza
Penso che l'esempio sopra illustra chiaramente dove i bravi designer si sbagliano con il realismo. Certo, ci sono un sacco di progettisti di interfacce in grado di creare qualcosa che è semplicemente brutto per i suoi meriti, ma ci sono anche molti designer di grande talento che sono così coinvolti nella creazione della loro interfaccia realistica che dimenticano l'usabilità. La ricerca dell'ammirazione delle loro abilità di Photoshop fa perdere di vista l'obiettivo principale di un'interfaccia: rendere l'applicazione facile e divertente da usare.
Per esplorare ulteriormente questa idea, diamo un'occhiata a un altro esempio utilizzato da Inchauste: la vecchia interfaccia Cockpit per Mac, mostrata sotto.
Ancora una volta mi chiedo se il problema qui sia davvero il tentativo di realismo, o come questo abbia influito sull'efficienza dell'interfaccia. Ad essere onesti, le trame di vetro, gomma e metallo non mi fanno rabbrividire. Certo, sono alla moda ma in maniera abbastanza interessante.
La cosa che mi colpisce davvero è il controllo circolare confuso (che da allora è stato abbandonato) e tutto lo spazio vuoto attorno ad esso. I pulsanti sono stati inutilmente stipati in uno spazio minuscolo e ingombrante a causa di una metafora realistica del progetto che viene eseguita. Proprio come abbiamo visto in iBooks, abbandonare questa metafora consentirebbe un uso molto più logico e intuitivo dello spazio.
Inizia con efficienza
Quindi, come bilanciamo l'idea di Apple che le interfacce realistiche siano divertenti e desiderabili per gli utenti con il principio che questi tipi di interfacce spesso compromettono l'usabilità?
Un esempio appropriato esiste proprio sulla schermata iniziale dell'iPad e dell'iPhone. Questa interfaccia è iniziata sul primo iPhone con l'efficienza in mente. Il concetto di base originale era semplicemente una griglia di icone su un solido sfondo nero. Sotto possiamo vedere il layout della schermata principale dell'iPad semplificato per evidenziare la sua struttura.
Certo, il layout della griglia inizia a perdere la sua efficacia quando si hanno 75 app (a volte ucciderei per una vista elenco), ma per una manciata di contenuti ben organizzati, funziona alla grande. I progettisti utilizzano costantemente griglie per ogni cosa, da una galleria di miniature a interi layout del sito web. Si noti che abbiamo iniziato con una base solida, non una metafora costrittiva.
Quindi possiamo aggiungere un certo realismo qui senza distruggere la nostra usabilità? Ancora meglio, possiamo aggiungere realismo e aumentare effettivamente la nostra usabilità? Scommetti. Guarda quanto migliora quando aggiungiamo un po 'di vita alle icone.
Si noti che l'icona più astratta e non realistica qui è in realtà la più difficile da interpretare. L'icona dell'App Store, per chiunque non abbia familiarità con la cartella dell'applicazione di OS X, è decisamente confusa. Probabilmente tua nonna non avrebbe idea di cosa faccia quell'icona. Tuttavia, mostrale l'icona delle note realistiche e lei può dire immediatamente che cosa l'applicazione è destinata a fare. Lukas Mathis esplora idee simili riguardo al design di icone nel suo articolo.
Ora, possiamo portare il realismo ancora di più senza distruggere il design? E se gettassimo alcune di quelle trame alla moda che i designer odiano così tanto? Sicuramente questo lo ucciderà, giusto?
Per rispondere a questo, aggiungiamo uno sfondo da una delle dieci app più popolari per iPad a pagamento su App Store in questo momento (Pimp Your Screen). Se c'è un modo in cui gli utenti possono davvero votare per l'esperienza che preferiscono, è con i loro portafogli.
Qui abbiamo aggiunto una metafora visiva familiare. Ora, è questa la struttura di legno più bella? Certamente no. In realtà, direi che si sta pericolosamente avvicinando alla Valle Uncanny. Eppure, non ha davvero rovinato la nostra usabilità come fa l'interfaccia di lettura di iBooks (anche se prende a prestito pesantemente dalla griglia dello scaffale di iBooks). Ciò è dovuto al fatto che la nostra struttura principale, che è stata costruita sulla facilità d'uso e un layout efficiente, rimane intatta.
È interessante notare che se si applica lo sfondo sopra e quindi si gira l'iPad verticale, tutto è rovinato. Le icone non si allineano con gli scaffali e la metafora diventa fonte di distrazione.
Penso che questo sia la chiave per rimuovere le interfacce realistiche nel modo giusto. I problemi sorgono quando i designer iniziano con metafore di tendenza e il risultato è un'interfaccia utente che è allo stesso tempo inefficiente e inefficace. L'usabilità è sacrificata in nome di belle immagini. Tuttavia, quando si inizia con una base semplice e solida, strutturata con in mente l'usabilità, è possibile aggiungere gradualmente uno stile. Tieni presente che devi ancora giudicare ogni cambiamento e decidere se il cambiamento è migliorato, diminuito o neutro rispetto all'usabilità.
Il test
Un buon test per le tue interfacce è se puoi o meno rimuovere la metafora e avere comunque un layout sensato. Ad esempio, quando si estrae l'interfaccia di iBooks, si rimane con paragrafi spaziati che ovviamente non fanno un grande uso dello spazio disponibile. Questo perché la piega della pagina nel mezzo stava rovinando il layout.
Ora immagina se hai preso la Hit List, mostrata di seguito, e hai eliminato qualsiasi somiglianza con la carta per notebook o le schede tridimensionali. Il layout avrebbe ancora senso? La risposta è "perfettamente"? Il designer qui ha una struttura forte e familiare che è stata disegnata per renderla più attraente. Questo è molto diverso da un'interfaccia che è strutturata in modo goffo per andare d'accordo con un'idea visiva pre-concepita.
Il realismo è solo per i designer?
La discussione finora ha affrontato l'idea che il realismo può essere presente senza ostacolare l'usabilità, e nelle mani di qualcuno con un vero talento, può persino migliorarlo. Tuttavia, c'è un altro aspetto importante di questo dibattito che non viene affrontato: gli utenti lo vogliono?
L'implicazione che molti di noi stanno facendo in questo dibattito è che le interfacce realistiche viste in molte app per iPad sono costituite da eye candy realizzati dai designer per i designer. Gli utenti normali, secondo questo argomento, non si preoccupano di questi pixel prettificati e vogliono solo completare una determinata attività.
Credo che questo argomento sia ben lontano. Prima di tutto, non stai dando abbastanza credito alle persone comuni. Solo perché qualcuno non è un designer non significa che non sono in grado di apprezzare un design accattivante. Non sono un pittore, ma mi è piaciuta molto la storia dell'arte al college.
Troppo spesso sento i progettisti accarezzare il grande pubblico come persone che non apprezzano il "buon design". Se fosse vero, saremmo senza lavoro! Molte persone riconoscono e apprezzano il design attraente e ci assumono perché sanno cosa sono capaci di produrre da soli, non è vero?
In secondo luogo, trovo che per tutti? Una persona normale? a chi piace un'interfaccia realistica di tendenza, puoi trovare dieci designer che lo odiano. I designer pignoli sono le persone che criticano l'app di Apple's Calendar, mentre il resto del mondo compra iPad come caramelle, in parte a causa delle chiare interfacce che vedono sugli spot pubblicitari.
I designer come noi trascorrono ore a discutere i pro ei contro del realismo nella progettazione dell'interfaccia utente. Nel frattempo, Penultimate si trova al punto quattro per i download a pagamento. Questa app utilizza un'interfaccia realistica per notebook per imitare una vera esperienza di scrittura e gli utenti non ne hanno mai abbastanza.
Sono impressionato come designer dal realismo nell'interfaccia di Penultimate? Non da remoto. In effetti, non mi piace il modo in cui appare l'app. Tuttavia, il tuo proprietario medio di iPad joe pensa che sia fantastico.
Il mio punto è, l'argomento popolare lo fa all'indietro. L'effettivo realismo nella progettazione dell'interfaccia utente non è solo un foraggio di Dribbble foraggio, è qualcosa che gli utenti possono apprezzare e sono disposti a pagare un premio per ricevere.
Conclusione
Il realismo è abusato nel design dell'interfaccia utente? Scommetti. Le interfacce iPad realistiche sono una tendenza che passerà? Assolutamente. Sono per tutti? Assolutamente no. Le app minimali come iA Writer spesso vendono come hotcakes perché abbandonano il realismo a favore della pura efficienza.
Il punto che sto facendo in questo articolo è questo? Realismo? non è la parolaccia che i designer stanno facendo attualmente per essere. Come designer, non dovresti abbandonare un'idea di un'interfaccia davvero fantastica per paura che la polizia della Uncanny Valley venga a prenderti. Dovresti essere assolutamente consapevole di questo principio, nota che anche le interfacce di Apple si allontanano intenzionalmente dal fotorealismo, ma non devi temere che un po 'di texture possa far odiare la tua app dagli utenti.
I progettisti di successo dell'interfaccia utente sanno che una solida base utilizzabile è la base per qualsiasi applicazione di progettazione. Lo stile extra applicato dipende dal pubblico di destinazione e dal fatto che lo percepiranno come un aiuto o un ostacolo al design e al contesto dell'applicazione.
Porsi le seguenti domande: la mia metafora ha senso in questo contesto? Il layout rimarrà forte se la metafora viene portata via? Sto applicando il realismo per migliorare l'accettazione e l'usabilità dell'app, oppure perché sono incline a seguire le tendenze? Il mio pubblico di destinazione tende ad amare o odiare idee simili?
Lascia un commento qui sotto e facci sapere cosa ne pensi se esiste o meno un modo giusto e sbagliato di approcciare un'interfaccia realistica. Come valuta quando il realismo è efficace contro quando danneggia l'integrità di un progetto?