Share
Durante questa serie guarderò dietro l'interfaccia utente di Facebook e, nel processo, ti mostrerò come creare la tua app blog Facebook integrata attraverso un feed RSS.
Lo adori o lo odi. Facebook è diventato parte integrante della vita delle persone. Per molti è uno strumento che ci permette di raggiungere vecchi amici, condividere foto o pianificare le nostre serate con i nostri amici. Tuttavia, dietro l'interazione sociale si trova una complessa struttura di un'attenta pianificazione dell'interfaccia utente che è stata ottimizzata e modificata nuovamente.
Nei primi giorni di Facebook non sono mai stato un fan del suo "aspetto noioso" e ho sempre avuto la sensazione che potesse avere molto di più in termini di design. Tuttavia, è solo grazie alle mie conoscenze e alla mia esperienza di progettista dell'interfaccia utente che ora mi rendo conto che è la semplicità e la facilità d'uso di Facebook che le ha permesso di raggiungere un tale successo. Il suo design è certamente qualcosa che dovrebbe essere ammirato.
In questa serie di tutorial, valuterò l'interfaccia utente di Facebook attraverso una serie di casi di studio, ricerca, implementazione e analisi, in modo da capire come alcuni dei suoi principi di progettazione possono aiutarti a creare un'app per Facebook dall'aspetto originale . Volevo creare qualcosa che, si spera, potesse tornare utile ai lettori di Webdesignt + + e ho pensato "Non sarebbe bello se potessi mostrarti come trasformare il tuo blog in un'app nativa di Facebook". Beh, gente, sei fortunato, perché questo è esattamente quello che ho intenzione di fare nei prossimi 3 articoli. Quindi, resta con me, preparati una tazza di tè e una progettazione felice!
Fin dai primi giorni, la semplicità è stata al centro di Facebook
Nel febbraio 2004 thefacebook.com ha aperto le sue porte agli studenti di Harvard, per poi aprirlo al pubblico il 26 settembre 2006. Il concetto generale per il sito rimane simile al suo stato originale. Ha ancora l'intestazione blu, lo sfondo bianco pulito, le intestazioni blu delle colonne con schede e lo stesso carattere che usa oggi, Lucida Grande. Naturalmente molto è cambiato dai primi giorni. Mark Zuckenberg è cresciuto e il sito è cresciuto con lui. È difficile comprendere appieno esattamente quale sia stato il processo di pensiero di Zuckenberg nei primi giorni di Facebook, ma sembra che il suo obiettivo principale fosse concentrarsi sulla funzionalità dell'interfaccia utente. Zuckenberg fornisce alcune informazioni sulle sue prime considerazioni di progettazione:
Dalla sua incarnazione Facebook ha gettato più denaro che senso. Con questo arrivarono miglioramenti nel design di Facebook; a poco a poco, poco a poco. Facebook aggiorna regolarmente la sua interfaccia utente solitamente per fasi e spesso viene accolta con critiche prima di essere apprezzata dalla maggioranza.
Allora, perché vorresti progettare la tua app come Facebook? Spetta esclusivamente a te progettare la tua app di Facebook. Alcuni di voi opteranno per nativi e altri progetteranno qualcosa di completamente nuovo che si spera complimenterà con Facebook. Non esiste un modo giusto o sbagliato di progettare la tua app, ma spero che comprendendo la logica dietro il design di Facebook darà al tuo progetto le migliori possibilità di successo.
Forse il più grande vantaggio del design nativo è che sarà familiare ai tuoi utenti. Non dovranno imparare da zero un nuovo concetto di interfaccia utente, dato che conosceranno già come funziona Facebook.
Accanto alla familiarità risiede la sicurezza. Senza dubbio i tuoi utenti si sentiranno sicuri e a loro agio in un ambiente che già conoscono, al contrario di un design straniero che si trova su Facebook. Se stai pensando di vendere articoli tramite la tua app, questa sensazione di sicurezza da parte degli utenti potrebbe potenzialmente portare a tassi di conversione più elevati.
Come designer abbiamo il desiderio naturale di voler creare qualcosa di nuovo ed eccitante, quindi seguire le linee guida di stile di Facebook potrebbe non piacere direttamente a te, ma che ne dici se dovessi metterti alla prova e progettare qualcosa nello stile di Facebook che Facebook non fa hai uno stile diretto? Vi siete mai chiesti che aspetto potrebbe avere un tavolo nello stile di Facebook? Mettiti in gioco e crea qualcosa che non esiste ancora. Posso assicurarti che questa sfida può essere altrettanto divertente quanto inventare un nuovo concetto da zero.
Molte grandi organizzazioni hanno una guida di marca o di stile. Layout di Facebook le loro linee guida nei principi di progettazione di Facebook. Sebbene siano vaghi e possano essere interpretati in vari modi, ti aiutano a capire cosa sta cercando di ottenere Facebook attraverso il design del loro sito web. Come dice Facebook:
Ci sono certe convinzioni che teniamo su Facebook, alcune qualità che cerchiamo nel nostro lavoro. È ciò che ci permette di discutere se qualcosa è "Facebook" o "Non è Facebook", è ciò che ci consente di valutare se qualcosa che stiamo progettando potrebbe essere migliorata.
La dichiarazione di missione di Facebook è di rendere il mondo più aperto e questo ha una forte influenza sul design. L'interfaccia utente di Facebook deve funzionare in tutte le culture, in tutti i continenti del mondo in tutte le lingue. Questo non significa che devi tradurre la tua app in tutte le lingue del pianeta, ma è qualcosa che devi tenere a mente quando crei la tua app.
Assicurati di leggere la documentazione dell'API del grafico e assicurati che ciò che pensi di fare sia raggiungibile. Ad esempio, quando ho ideato il concetto per creare questa app per blog, ho pensato che sarebbe stata una buona idea includere le immagini di anteprima accanto ai post del mio blog. Tuttavia, (sfortunatamente) il feed RSS di Feedburner (che porteremo il feed da) non introduce l'url per le immagini di anteprima. Questo semplicemente impone il fatto che dovresti pianificare attentamente la tua app. Più progetti, più facilmente lo realizzi per te stesso. Non c'è niente di peggio di aver progettato e codificato la tua app in HTML / CSS solo per scoprire che cosa avevi intenzione di fare non è disponibile o possibile.
Un altro punto da fare è non fuorviare le persone con falsi elementi dell'interfaccia utente di Facebook come il pulsante Mi piace - Facebook ti penalizzerà per questo che potrebbe causare la sospensione della tua app.
Assicurati di progettare all'interno di 760px per le app o se miri a mettere la tua app in una pagina non più grande di 520 px.
Come con qualsiasi buon sito web, è importante pianificare. Sono lontani i giorni in cui è accettabile passare direttamente a un editor di codice e codificare il tuo sito. Al giorno d'oggi è possibile risparmiare un sacco di mal di testa e tempo abbozzando un wireframe. Questa rappresentazione grafica limitata della tua app può aiutarti a pianificare la navigazione, i percorsi e le informazioni presenti che saranno più utili per i tuoi utenti. Ti dà la possibilità di analizzare e valutare le tue decisioni senza essere influenzato dal design. Fortunatamente per noi oggi c'è tutta una serie di software e risorse per aiutarci a far saltare i wireframe in pochi minuti.
Se guardiamo il wireframe della nostra app di Facebook, puoi vedere come abbiamo pianificato:
Fino a poco tempo fa non mi è mai piaciuta la navigazione dell'app di Facebook. Ho sempre pensato che le nostre app fossero nascoste e che non ci fosse una chiara direzione o organizzazione di esse. Fortunatamente le cose sono migliorate ultimamente e hanno semplificato la navigazione della home page. Ciò rappresenta un grande vantaggio per noi sviluppatori di app in quanto rende l'accesso alle nostre app più facile e più all'avanguardia nella home page.
Facebook dice:
Stiamo rendendo più facile per gli utenti l'accesso e il reinserimento facilmente con le applicazioni che utilizzano più spesso. Le applicazioni della piattaforma ora hanno pari opportunità per gli immobili sulla home page. Possono occupare le posizioni attualmente detenute da Dashboard applicazioni, Dashboard giochi e Foto, a seconda delle applicazioni con cui l'utente interagisce maggiormente.
Quindi la prima cosa che avrai notato è che Facebook usa il blu come uno dei suoi colori base primari. È una scelta sensata da Facebook. Vi siete mai chiesti perché così tanti siti web (Twitter, Facebook, LinkedIn, Paypal, ecc.) Usano il blu come colore principale? È perché il blu è visto come il colore più universalmente accettabile. In molte culture diverse il blu è associato a credenze religiose, porta pace o è pensato per tenere lontani gli spiriti maligni. Il blu è un colore a cui la maggior parte di noi ha acquisito familiarità inconsciamente; è il colore del cielo e del mare. Universalmente siamo arrivati ad associarlo con calma. Facebook sembra avere l'equilibrio giusto con la sua intestazione blu e lo sfondo bianco pulito come troppo blu può evocare sentimenti di freddezza, tristezza e depressione.
Dai uno sguardo sopra e puoi vedere alcuni degli altri colori usati da Facebook nel suo sito.
Facebook conserva ancora lo stesso carattere principale utilizzato nel giorno di apertura, il font sans-serif Lucida Grande. Questo è seguito da una serie di caratteri di fallback. Se diamo un'occhiata al CSS di Facebook, possiamo vedere direttamente la famiglia di font completa come:
famiglia di font: "lucida grande", tahoma, verdana, arial, sans-serif;
Il carattere disegnato da Charles Bigelow e Kris Holmes è considerato da alcuni come un riflesso di minimalismo, formalità e qualità. Tutte qualità che ne fanno la scelta perfetta per il più grande social network del mondo.
Il testo del paragrafo di Facebook è di 11px con un'altezza di riga di 16 px. Questo gli dà un buon rapporto di circa 1,5 permettendo di essere facilmente leggibile e uniformemente distanziati. L'altezza della linea è estremamente importante sul testo quando lavori su progetti puliti e minimali. Se si ottiene un'altezza di riga errata sul proprio testo, ciò potrebbe facilmente trasformare un buon disegno in uno solo OK. Sono questi attributi di carattere che abbiamo deciso di utilizzare per l'app del nostro blog.
Analizzando i campi di input dell'utente di Facebook, possiamo scoprire quali sarebbero più adatti al tipo di app che stiamo creando. Facebook ha generalmente cinque tipi di campi di input dell'utente. Questi sono:
Se il tuo utente ha dovuto registrare alcuni dettagli con la tua app, forse un indirizzo email per una competizione, la scelta più ovvia sarebbe quella di utilizzare il tipo di input di iscrizione per consentire agli utenti di inserire i propri dettagli. Queste sono una buona scelta per questo tipo di cose, in quanto questi grandi campi attirano l'utente e aiuteranno con la conversione della registrazione. Se la tua app include una ricerca, perché provare a reinventare la ruota? Perché non utilizzare la ricerca in stile Facebook? I tuoi utenti saranno già in grado di relazionarsi con la ricerca nativa e immediatamente sapere che li aiuterà a trovare ciò che stanno cercando. È questo tipo di dettaglio, quando si progetta la tua app che lo renderà il massimo in termini di facilità d'uso e alla fine le darai le migliori possibilità di successo!
Un'altra opzione sarebbe quella di fare ciò che abbiamo fatto con la nostra app del blog di Facebook e creare qualche lieve alterazione che non è in Facebook. Notate nel diagramma sopra come i commenti e gli input di login hanno entrambi padding di 3px, beh, abbiamo preso questo e usato il tratto di confine dall'input dell'aggiornamento di stato. L'utilizzo di questo tipo di combinazione rimarrà sempre all'interno del design e darà comunque la sensazione di essere nativi mentre stiamo estendendo il foglio di stile di Facebook continuando a rispettare le regole.
L'ambizione di Facebook nel loro design è quella di agire come una tela bianca da cui i loro utenti possono vivere. Questo ha senso perché il design non dovrebbe intromettersi su ciò che gli utenti stanno cercando di ottenere quando sono nella tua app. Facebook crede che:
Uno spazio minimale e luminoso favorisce la partecipazione e una comunicazione trasparente e onesta.
Come designer è talvolta difficile fare un passo indietro. Siamo così abituati a stratificare i nostri progetti con sfumature, ombre e raggio di confine "che a volte dimentichiamo che il più semplice dei disegni può essere il più efficace. Essere in grado di farlo può spesso essere un compito abbastanza difficile, ma è qualcosa che ogni progettista dell'interfaccia utente dovrebbe padroneggiare ed essere in grado di fare. Peter Soyer ha scritto un interessante articolo sul design minimale. Se hai bisogno di idee o ispirazione per questo genere di cose, allora dovresti assolutamente dare un'occhiata a questo post 60 siti web puliti e minimalisti per trarre ispirazione.
Oppure, ovviamente, puoi sempre dare un'occhiata a Facebook e vedere quali elementi puoi attingere dai loro attuali stili puliti.
Qualcosa che potresti non aver notato prima quando stai navigando su Facebook, è quanto Facebook utilizza i pattern all'interno della sua progettazione dell'interfaccia utente. Questo per incoraggiare gli utenti a familiarizzare con il loro layout. Facebook spiega come funziona
Abbracciando i modelli possiamo riconoscere che la nostra usabilità è notevolmente migliorata quando parti simili sono espresse in modi simili. Le nostre interazioni parlano agli utenti con una sola voce, creando fiducia. Ridurre, riutilizzare, non riprogettare.
Nella nostra app del blog puoi vedere che abbiamo adottato gli ideali di Facebook riutilizzando parti come le intestazioni delle schede nella barra laterale. Questo facilmente lo scompone per i nostri utenti e consente loro di scansionare rapidamente il contenuto per trovare quello che stanno cercando.
In prima linea su Facebook è l'interazione sociale. Gli utenti non si limitano più a digitare nei computer; stanno interagendo e connettendosi con le persone che conoscono. Arrivano su Facebook perché vogliono essere circondati dai loro amici. La tecnologia e il design dovrebbero rimanere sullo sfondo e non sminuirlo. Spesso è una buona idea provare e rendere la tua app più umana e interattiva. Fortunatamente per noi Facebook offre l'API del grafico di Facebook, che ci consente di rendere la nostra app più interattiva e connettersi con il loro potente social graph.
Parleremo più dell'API del grafico nelle prossime esercitazioni come parte di questa serie. Facebook offre anche modi più semplici per incorporare questi tipi di interazioni utilizzando uno qualsiasi dei relativi plug-in sociali come pulsante, pulsante di invio, commenti e molti altri.
Sono sicuro che avrai notato che Facebook aggiorna il suo aspetto e le sue funzionalità abbastanza frequentemente. Questo non è solo qualcosa che infastidisce gli utenti, ma può anche infastidire noi progettisti e sviluppatori. Questo perché ha la capacità di rovinare tutto il duro lavoro che abbiamo fatto. Perché non prepararsi al peggio, così se Facebook fa un aggiornamento inaspettato, allora siamo pronti a prenderli. Dalla mia esperienza personale, la chiave per farlo è rendere gli elementi riutilizzabili e semplicemente stilizzati.
Ovviamente non sappiamo mai quando o come Facebook verrà aggiornato, ma può venire fuori e morderti nel culo quando meno te lo aspetti. In effetti tant'è vero che mentre stavo scrivendo a metà del tutorial che accompagna questa serie, Facebook è andato e ha aggiornato la sua pagina di canvas dell'applicazione, costringendomi a reindirizzare alcuni dei miei progetti. Grazie a Facebook!
Se dai un'occhiata al .PSD che accompagna questo tutorial, sarai in grado di dare un'occhiata e vedere come alcuni dei punti che abbiamo toccato oggi riguardano il nostro design. Il nostro design è stilizzato in modo simile a Facebook, mentre allo stesso tempo è ancora unico per la nostra app. Abbiamo preso in prestito e seguito i principi di progettazione di Facebook in modo che la nostra app abbia un aspetto e un aspetto nativo per Facebook. Alcuni elementi che abbiamo adottato per la nostra app sono:
All'inizio del 2011 ho tenuto tre focus group con utenti regolari di Facebook per scoprire le loro abitudini di utilizzo all'interno di Facebook. Alcuni dei risultati mi hanno sorpreso, anche se erano rilevanti per l'applicazione in cui ero coinvolto. È importante capire che Facebook ha una base di utenti estremamente ampia e non dovresti fare affidamento sulle informazioni che ho raccolto: dovresti condurre il tuo possedere ricerche per i propri criteri e dati demografici.
Gli utenti che abbiamo intervistato hanno affermato di aver trascorso almeno 30 minuti a un'ora su Facebook ogni giorno. Mi ha sorpreso il fatto che la maggior parte delle persone volesse che la nostra app apparisse nativa su Facebook e che ogni utente dicesse che si sarebbe sentito più sicuro acquistando articoli da un'app tramite Paypal che pagando con carta di credito. Quindi potrebbe essere qualcosa da tenere a mente se hai intenzione di vendere qualcosa tramite la tua app.
Lo stile dell'interfaccia utente di Facebook e la psicologia dietro di esso è sicuramente qualcosa che dovrebbe essere ammirato. È tra i siti web di maggior successo di tutti i tempi e una parte della ragione di ciò è dovuta al fatto di prendere le giuste decisioni quando si tratta del loro design. Pensaci, Facebook avrebbe avuto il successo se il loro colore primario di canvas era nero? È difficile giudicare solo quanto del loro successo dipenda dalle loro decisioni sull'interfaccia utente, ma penso che sicuramente meriti un po 'di credito per il suo successo.
Adottando e prendendo in prestito idee dai principi di progettazione semplici ma efficaci di Facebook e incorporandole nella tua app, sono certo che la tua app avrà le migliori possibilità di diventare un successo.
Nella prossima parte del tutorial vedremo come codificare la nostra app blog .PSD in HTML / CSS. Quindi fino ad allora, la progettazione felice fa capolino!
Accentsconagua