Share
I løpet av denne serien ser jeg bak brukergrensesnittet på Facebook, og i prosessen viser du hvordan du lager din egen, integrerte Facebook bloggapp gjennom en RSS-feed.
Elsker det eller hater det Facebook har blitt en integrert del av folks liv. For mange er det et verktøy som gjør at vi kan hente gamle venner, dele bilder eller planlegge våre netter med våre kamerater. Men bak det sosiale samspillet ligger en kompleks struktur med forsiktig UI-planlegging som har blitt tweaked og re-tweaked.
I de tidlige dagene av Facebook var jeg aldri en fan av sitt kjedelige utseende og alltid følt at det hadde potensial for så mye mer når det gjelder design. Det er imidlertid bare som min kunnskap og erfaring med å være en UI-designer har utviklet seg, og jeg skjønner nå at det er Facebooks enkelhet og brukervennlighet som har gjort det mulig å bli så vellykket. Dens design er absolutt noe som bør beundres.
I denne serien av opplæringsprogrammer skal jeg evaluere brukergrensesnittet til Facebook gjennom en rekke casestudier, forskning, implementering og analyse, slik at du forstår hvordan noen av designprinsippene kan hjelpe deg med å skape en innfødt utseende og følelse av Facebook-app . Jeg ønsket å skape noe som forhåpentligvis kunne komme til nytte for Webdesigntuts + leserne og tenkte "Ville det ikke vært bra hvis jeg kunne vise dere hvordan du kan slå din blogg i en innfødt Facebook-app". Vel folk har du lykke til, dette er akkurat det jeg planlegger å gjøre over de neste 3 artiklene. Så hold deg til meg, lage deg en kopp te og lykkelig design!
Siden begynnelsen har enkelhet vært hjertet av Facebook
I februar 2004 åpnet thefacebook.com sine dører for studentene i Harvard før de senere åpnet den for offentligheten den 26. september 2006. Det overordnede konseptet for nettstedet forblir likt dets opprinnelige tilstand. Den har fortsatt den blå hodet, den rene hvite bakgrunnen, kolonnehodene i den blå kategorien og den samme fonten som den bruker i dag, Lucida Grande. Selvfølgelig har mye endret seg siden begynnelsen. Mark Zuckenberg har vokst opp og siden vokser med ham. Det er vanskelig å noensinne fullt ut forstå nøyaktig hva Zuckenbergs tankeprosess var i de tidlige dagene av Facebook, men det var sannsynlig at hovedfokuset hans var konsentrert om funksjonalitet over UI. Zuckenberg gir noe innblikk i hans tidlige designhensyn:
Mer penger enn mening er blitt kastet på Facebook siden inkarnasjonen. Med dette kom forbedringer i Facebooks design; litt etter litt, litt etter litt. Facebook oppdaterer regelmessig brukergrensesnittet sitt vanligvis i etapper, og blir ofte møtt av kritikk før det til slutt blir verdsatt av flertallet.
Så hvorfor vil du utforme appen din som Facebook? Det er helt opp til deg hvordan du designer din Facebook-app. Noen av dere vil velge innfødte og andre vil designe noe helt nytt som forhåpentligvis vil komplimentere Facebook. Det er ingen riktig eller feil måte å designe appen din på, men forhåpentligvis ved å forstå logikken bak Facebooks design vil det gi ditt design den beste sjansen for suksess.
Kanskje den største fordelen med å designe innfødte er at det blir kjent for brukerne. De trenger ikke å lære et nytt brukergrensesnitt fra grunnen, da de allerede er kjent med hvordan Facebook fungerer.
Ved siden av kjennskap sitter sikkerheten. Brukerne dine vil uten tvil føle seg trygge og komfortable i et miljø de allerede vet i motsetning til et utenlandsk design som sitter i Facebook. Hvis du vurderer å selge varer gjennom appen din, kan denne følelsen av sikkerhet fra brukerne potensielt føre til høyere konverteringsfrekvenser.
Som designere har vi et naturlig ønske om å skape noe nytt og spennende, så følge Facebooks stilretningslinjer kan ikke appellere direkte til deg, men hva med om du skulle sette deg selv utfordring og designe noe i stil med Facebook som Facebook ikke gjør har jeg ikke en direkte stil for? Noen gang lurt på hvordan et bord kan se ut som Facebook? Sett deg selv en utfordring og opprett noe som ikke eksisterer ennå. Jeg kan forsikre deg om at denne utfordringen kan være like like morsom som å komme opp med et helt nytt konsept fra bunnen av.
Mange store organisasjoner har en merkevare- eller stilguide. Facebook layout deres retningslinjer i Facebook design prinsipper. Selv om de er vage og kan tolkes på mange måter, kan det hjelpe deg å forstå hva Facebook prøver å oppnå gjennom deres nettside. Som Facebook sier:
Det er visse tro vi holder på Facebook, visse kvaliteter som vi streber etter i vårt arbeid. Det er det som gjør det mulig for oss å diskutere om noe "Er Facebook" eller "Er ikke Facebook", det er det som gjør at vi kan vurdere om alt vi designer kan forbedres.
Facebooks oppgaveoppgave er å gjøre verden mer åpen og dette har stor innflytelse på designen. Facebook-brukergrensesnittet må jobbe på tvers av alle kulturer, på tvers av alle verdensdelene på hvert språk. Dette betyr ikke at du må oversette appen din til alle språk på planeten, men det er noen ting du må huske på når du lager appen din.
Pass på at du leser graf-API-dokumentasjonen, og sørg for at det du planlegger å gjøre er oppnåelig. For eksempel, da jeg først kom opp med konseptet for å lage denne bloggappen, trodde jeg det ville være en god ide å inkludere forhåndsvisningsbildene ved siden av blogginnleggene mine. Men, dessverre, Feedburners RSS-feed (som vi vil bringe innmatingen inn fra), bringer ikke inn URL-en for forhåndsvisningsbilder. Dette styrker bare det faktum at du bør planlegge appen din nøye. Jo mer du planlegger, desto lettere gjør du det selv. Det er ingenting verre enn å ha designet og kodet appen din i HTML / CSS bare for å finne ut hva du planla å gjøre er ikke tilgjengelig eller mulig.
Et annet poeng å lage er, gjør ikke villede folk med falske Facebook-grensesnittelementer som den samme knappen - Facebook vil straffe deg for dette som kan føre til at appen din blir suspendert.
Pass på at du designer innen 760px for apper, eller hvis du har som mål å sette appen din på en side, så ikke større enn 520px.
Som med enhver god nettside er det viktig å planlegge. Langt borte er de dagene da det er akseptabelt å hoppe rett inn i en kodeditor og kodes nettstedet ditt. I dag kan du spare mye hodepine og tid ved å skisse en wireframe. Denne begrensede grafiske representasjonen av appen din kan hjelpe deg med å planlegge navigering, stier og presentere informasjon som vil være mest fordelaktig for brukerne. Det gir deg muligheten til å analysere og vurdere dine beslutninger uten å være påvirket av designet. Heldigvis for oss i dag er det en hel rekke programvare og ressurser for å hjelpe oss med å slå på wireframes på noen minutter.
Hvis vi ser på wireframe fra vår Facebook-app, kan du se hvordan vi har planlagt:
Inntil nylig har jeg aldri likte Facebooks appnavigasjon. Jeg har alltid følt at våre apps er gjemt bort, og at det ikke var noen klar retning eller organisasjon av dem. Heldigvis har ting blitt forbedret i det siste, og de har strømlinjeformet hjemmesiden navigasjonen. Dette gir en stor fordel for oss apputviklere, da det gjør det enklere å få tilgang til appene våre og mer i forkant på hjemmesiden.
Facebook sier:
Vi gjør det enklere for brukerne å enkelt få tilgang til og reengage med programmene de bruker oftest. Platformapplikasjoner har nå like mulighet for fast eiendom på hjemmesiden. De kan besette stillingene som for øyeblikket holdes av applikasjonsdashbordet, spillets oversiktspanel og bilder, avhengig av hvilke applikasjoner brukeren samhandler med mest.
Så det første du har lagt merke til er at Facebook bruker blått som en av sine primære basfarger. Det er et fornuftig valg fra Facebook. Noen gang lurt på hvorfor så mange nettsteder (Twitter, Facebook, LinkedIn, Paypal etc) bruker blå som deres primære farge? Det er fordi blå er sett på å være fargen som er mest universelt akseptabel. I mange forskjellige kulturer er blå forbundet med religiøs tro, bringer fred eller tenkt å holde de dårlige ånene unna. Blå er en farge som de fleste av oss har blitt ubevisst kjent med; det er fargen på himmelen og havet. Universelt har vi kommet for å forbinde dette med ro. Facebook ser ut til å ha balansen omtrent rett med den blå hodet og ren hvit bakgrunn som for mye blå kan fremkalle følelser av kulde, tristhet og depresjon.
Ta en titt over, og du kan se noen av de andre fargene Facebook bruker blant sitt nettsted.
Facebook beholder fortsatt den samme primære skrifttypen som den brukte på åpningsdagen, sans-serif-fonten Lucida Grande. Dette blir deretter etterfulgt av en serie fallback skrifttyper. Hvis vi tar en titt på CSS fra Facebook, kan vi se full skriftfamilie direkte som:
font-familie: "lucida grande", tahoma, verdana, arial, sans-serif;
Fonten designet av Charles Bigelow og Kris Holmes anses av noen for å reflektere minimalistisk, formalitet og kvalitet. Alle kvaliteter som gjør det til det perfekte valget av skrift for verdens største sosiale nettverk.
Facebooks paragraftekst er 11px med en linjehøyde på 16px. Dette gir et godt forhold på rundt 1,5 slik at det enkelt kan leses og jevnt fordelt. Linjehøyde er ekstremt viktig på tekst når du jobber med rene, minimal design. Hvis du får linjens høyde feil på teksten din, kan dette lett gjøre en god design til bare en OK en. Det er disse skriftattributtene som vi har bestemt oss for å bruke til bloggen vår.
Ved å bryte ned Facebooks brukerinngangsfelt kan vi finne ut hvilke som passer best for typen app som vi lager. Facebook har generelt fem typer brukerinngangsfelt. Disse er:
Hvis brukeren din har registrert noen detaljer med appen din, kanskje en e-postadresse for en konkurranse, vil det mest opplagte valget være å bruke registreringsinngangstypen for at brukerne skal skrive inn sine opplysninger. Dette er et godt valg for denne typen ting, da disse store feltene tegner brukeren inn og vil hjelpe deg med registreringskonvertering. Hvis appen din inneholder et søk, så hvorfor prøve å finne frem hjulet? Hvorfor ikke bruke Facebook-stilssøk? Brukerne dine vil allerede kunne forholde seg til det opprinnelige søket og umiddelbart vite at det vil hjelpe dem med å finne det de leter etter. Det er denne typen detalj, når du utformer appen din som vil gjøre det til det beste innen brukervennlighet, og til slutt gi den den beste muligheten for suksess!
Et annet alternativ ville være å gjøre det vi har gjort med vår Facebook blogg app og opprette litt liten endring som ikke er i Facebook. Legg merke til i diagrammet ovenfor hvordan kommentarene og innloggingsinngangene begge har polstring på 3px, vel, vi har tatt dette og brukt grensestrengen fra statusoppdateringsinngangen. Bruke denne typen kombinasjon vil fortsatt sitte rett innenfor design og vil fortsatt gi følelsen av å være innfødt som vi utvider Facebook stilarket mens du fortsatt holder seg til reglene.
Facebooks ambisjon innenfor designen er at den skal fungere som et tomt lerret som brukerne kan leve av. Dette er fornuftig fordi designen ikke bør trenge inn på hva brukerne prøver å oppnå når de er på appen din. Facebook mener at:
En minimal, godt opplyst rom oppfordrer deltakelse og ærlig gjennomsiktig kommunikasjon.
Som designere er det noen ganger vanskelig å ta et skritt tilbake. Vi er så vant til å legge ut våre design opp med gradienter, drop shadows og border radius 'som vi noen ganger glemmer at de enkleste designene kan være mest effektive. Å være i stand til å oppnå dette kan ofte være ganske vanskelig oppgave, men det er noe som alle UI-designere skal mestre og kunne gjøre. Peter Soyer skrev en interessant artikkel om minimal design. Hvis du trenger noen ideer eller inspirasjon for denne typen ting, bør du definitivt sjekke ut dette innlegget 60 rene og minimale nettsteder for inspirasjon.
Eller selvfølgelig kan du alltid se på Facebook og se hvilke elementer du kan trekke inn fra deres nåværende rene stiler.
Noe du kanskje ikke har lagt merke til før før du surfer på Facebook, er hvor mye Facebook bruker mønstre i sitt UI-design. Dette er å oppmuntre brukerne til å bli kjent med deres layout. Facebook forklarer hvordan dette fungerer
Ved å omfavne mønstre kan vi gjenkjenne at bruken vår er sterkt forbedret når lignende deler uttrykkes på lignende måter. Våre samhandlinger snakker til brukere med en stemme, bygger tillit. Reduser, gjenbruk, ikke redesign.
I vår bloggapp kan du se at vi har vedtatt Facebooks idealer ved å gjenbruke deler som flipphodene i sidefeltet. Dette bryter det enkelt ned for brukerne, og lar dem raskt skanne innholdet for å finne det de leter etter.
I forkant av Facebook er sosial samhandling. Brukerne er ikke lenger bare å skrive inn i datamaskiner; de samhandler og forbinder med de de kjenner. De kommer inn på Facebook fordi de vil være omgitt av vennene sine. Teknologi og design bør forbli i bakgrunnen og ikke forringe dette. Det er ofte en god ide å prøve å gjøre appen din mer menneskelig og interaktiv. Heldigvis for oss tilbyr Facebook Facebook Graph API, som gjør at vi kan gjøre vår app mer interaktiv og koble med sin kraftige sosiale graf.
Vi snakker mer om graf-API i de kommende opplæringsprogrammene som en del av denne serien. Facebook tilbyr også enklere måter for slike interaksjoner å bli innlemmet ved å bruke noen av deres sosiale plugins, som for eksempel knapp, send-knapp, kommentarer og flere.
Jeg er sikker på at du alle har lagt merke til at Facebook oppdaterer utseendet og funksjonene ganske ofte. Dette er ikke bare noe som irriterer brukere, men kan også irritere helvete ut av oss designere og utviklere. Dette er fordi det har evnen til å ødelegge alt det harde arbeidet vi har satt inn. Hvorfor ikke forberede seg på det verste, slik at hvis Facebook gjør en uventet oppdatering så er vi klare til å ta dem på. Fra min egen erfaring er nøkkelen til dette ved å gjøre elementer gjenbrukbare og enkelt utformet.
Selvfølgelig vet vi aldri når eller hvordan Facebook skal oppdatere - det kan komme opp og bite deg i rumpa når du minst venter det. Faktisk så mye at jeg som halvveis gjennom å skrive veiledningen som følger med denne serien, gikk Facebook og oppdaterte deres søknads lerretsside, noe som gjør at jeg må lese noen av designene mine. Takk Facebook!
Hvis du tar en titt på .PSD som følger med denne opplæringen så kan du se og se hvordan noen av poengene vi har tatt på i dag, er relatert til vårt design. Vårt design er utformet på samme måte som Facebook, samtidig som det fortsatt er unikt for vår app. Vi har lånt og fulgt Facebooks designprinsipper slik at vår app har et innfødt utseende på Facebook. Noen elementer som vi har vedtatt for appen vår er:
I begynnelsen av 2011 holdt jeg tre fokusgrupper med vanlige Facebook-brukere for å finne ut om deres vaner i Facebook. Noen av resultatene overrasket meg, selv om de var relevante for søknaden jeg var involvert i. Det er viktig å forstå at Facebook har en ekstremt stor brukerbase, og du bør ikke stole på informasjonen jeg samlet - du bør gjennomføre din Egen forskning for dine egne kriterier og demografiske.
Brukerne som vi intervjuet alle sa at de brukte minst 30 minutter til en time på Facebook hver eneste dag. Det overrasket meg at de fleste mennesker ønsket at appen vår skulle se ut som Facebook, og at hver bruker sa at de ville føle seg tryggere å kjøpe varer fra en app via Paypal enn å betale med kredittkort. Så det kan være noe å huske på hvis du planlegger å selge noe gjennom appen din.
Facebooks UI-stil og psykologien bak den er definitivt noe som bør beundres. Det er blant de mest vellykkede nettstedene hele tiden, og en del av grunnen til dette skyldes at de tar de riktige avgjørelsene når det gjelder design. Tenk på det, ville Facebook være så vellykket hvis deres primærfarget lerret var svart? Det er vanskelig å bedømme hvor mye av suksessen deres er i deres UI-beslutninger, men jeg tror definitivt det fortjener litt kreditt til suksess.
Ved å vedta og låne ideer fra Facebooks enkle, men effektive designprinsipper og integrere dem i din egen app, er jeg sikker på at appen din er den beste muligheten til å bli en suksess.
I neste del av opplæringen vil vi se på hvordan du kan kode vår bloggapp .PSD til HTML / CSS. Så til da, gleder designen seg godt!
Accentsconagua