Share
Tijdens deze serie kijk ik achter de gebruikersinterface van Facebook en laat ik je zien hoe je je eigen geïntegreerde Facebook blog-app kunt maken via een RSS-feed.
Houd ervan of haat Facebook is een integraal onderdeel geworden van het leven van mensen. Voor velen is het een hulpmiddel waarmee we oude vrienden kunnen inhalen, foto's kunnen delen of onze avonden kunnen plannen met onze vrienden. Achter de sociale interactie schuilt echter een complexe structuur van zorgvuldige UI-planning die is geknepen en opnieuw is aangepast.
In de beginjaren van Facebook was ik nooit een fan van zijn "saaie uiterlijk en gevoel" en voelde altijd dat het zoveel potentieel qua ontwerp had. Het is echter alleen omdat mijn kennis en ervaring om een UI-ontwerper te zijn vooruit is gegaan en ik nu besef dat het de eenvoud en het gebruiksgemak van Facebook is waarmee het zo succesvol is geworden. Het ontwerp is zeker iets dat moet worden bewonderd.
In deze serie tutorials ga ik de gebruikersinterface van Facebook evalueren aan de hand van een reeks casestudy's, onderzoek, implementatie en analyse, zodat je begrijpt hoe sommige van de ontwerpprincipes je kunnen helpen bij het creëren van een native look and feel Facebook-app . Ik wilde iets maken dat hopelijk van pas zou komen voor de lezers van Webdesigntuts + en dacht: "Zou het niet geweldig zijn als ik jullie kon laten zien hoe je van je webblog een native Facebook-app maakt". Nou mensen hebben geluk, want dit is precies wat ik van plan ben in de komende 3 artikelen. Dus blijf bij mij, maak een kop thee en een gelukkig ontwerp!
Sinds de begintijd is eenvoud de kern van Facebook geweest
In februari 2004 opende thefacebook.com zijn deuren voor de studenten van Harvard voordat het later op 26 september 2006 voor het publiek werd opengesteld. Het algemene concept voor de site blijft vergelijkbaar met de oorspronkelijke staat. Het heeft nog steeds de blauwe kop, de schone witte achtergrond, de blauwe kolomkoppen met tabbladen en hetzelfde lettertype dat het vandaag de dag gebruikt, Lucida Grande. Natuurlijk is er veel veranderd sinds de begintijd. Mark Zuckenberg is opgegroeid en de site is met hem gegroeid. Het is moeilijk om ooit precies te begrijpen wat het denkproces van Zuckenberg was tijdens de eerste dagen van Facebook, maar het lijkt waarschijnlijk dat hij zich vooral concentreerde op functionaliteit boven gebruikersinterface. Zuckenberg geeft wel enig inzicht in zijn vroege ontwerpoverwegingen:
Sinds zijn incarnatie is er meer geld dan verstand naar Facebook gegooid. Hiermee kwamen verbeteringen aan het ontwerp van Facebook; beetje bij beetje, beetje bij beetje. Facebook werkt zijn gebruikersinterface regelmatig in fasen bij en wordt vaak begroet met kritiek voordat hij uiteindelijk door de meerderheid wordt gewaardeerd.
Dus waarom zou je je app als Facebook willen ontwerpen? Het is helemaal aan jou hoe je je Facebook-app ontwerpt. Sommigen van jullie zullen kiezen voor native en anderen zullen iets geheel nieuws ontwerpen dat hopelijk Facebook zal complimenteren. Er is geen goede of verkeerde manier om je app te ontwerpen, maar hopelijk zal je ontwerp de beste kans op succes hebben als je de logica achter het ontwerp van Facebook begrijpt..
Misschien is het grootste voordeel van native ontwerpen dat het uw gebruikers bekend voorkomt. Ze hoeven helemaal geen nieuw UI-concept te leren, omdat ze al bekend zijn met de manier waarop Facebook werkt.
Naast bekendheid zit beveiliging. Uw gebruikers zullen zich ongetwijfeld veilig en comfortabel voelen in een omgeving die ze al kennen, in tegenstelling tot een buitenlands ontwerp dat op Facebook staat. Als u overweegt items via uw app te verkopen, kan dit beveiligingsgevoel van uw gebruikers mogelijk leiden tot hogere conversiepercentages.
Als ontwerpers hebben we een natuurlijk verlangen om iets nieuws en spannends te willen maken, dus het volgen van de stijlrichtlijnen van Facebook is misschien niet direct aantrekkelijk voor jou, maar hoe zou het zijn als je jezelf een uitdaging zou stellen en iets zou ontwerpen in de stijl van Facebook dat Facebook niet heeft? heb ik geen directe stijl voor? Heb je je ooit afgevraagd hoe een tafel eruit zou kunnen zien in de stijl van Facebook? Stel jezelf een uitdaging en maak iets dat nog niet bestaat. Ik kan je verzekeren dat deze uitdaging net zo leuk kan zijn als het bedenken van een compleet nieuw concept.
Veel grote organisaties hebben een merk- of stijlgids. Facebook lay-out van hun richtlijnen in de Facebook-ontwerpprincipes. Hoewel ze vaag zijn en op verschillende manieren kunnen worden geïnterpreteerd, helpt het u te begrijpen wat Facebook probeert te bereiken via het ontwerp van hun website. Zoals Facebook zegt:
Er zijn bepaalde overtuigingen die we op Facebook hebben, bepaalde eigenschappen die we in ons werk nastreven. Dit is wat ons in staat stelt om te discussiëren of iets 'Is Facebook' of 'Is niet Facebook' is, dit is wat ons in staat stelt te evalueren of iets dat we ontwerpen, kan worden verbeterd.
De missie van Facebook is om de wereld opener te maken en dit heeft een sterke invloed op het ontwerp. De gebruikersinterface van Facebook moet in alle talen werken, verspreid over alle continenten van de wereld. Dit betekent niet dat je je app in elke taal op de planeet moet vertalen, maar er zijn enkele dingen waarmee je rekening moet houden bij het maken van je app.
Zorg ervoor dat u de API-documentatie voor de grafiek leest en zorg ervoor dat wat u van plan bent te doen haalbaar is. Toen ik bijvoorbeeld voor het eerst het concept bedacht om deze blog-app te maken, dacht ik dat het een goed idee zou zijn om de voorbeeldafbeeldingen naast mijn blogberichten op te nemen. Echter, (helaas) Feedburner's RSS-feed (waar we de feed vanaf zullen brengen) brengt de url niet voor preview-afbeeldingen. Dit dwingt alleen het feit af dat je je app zorgvuldig moet plannen. Hoe meer je plant, hoe gemakkelijker je het voor jezelf maakt. Er is niets erger dan dat je je app alleen in HTML / CSS hebt ontworpen en gecodeerd om erachter te komen wat je van plan was te doen, niet beschikbaar of mogelijk is.
Een ander punt om te maken is om mensen niet te misleiden met valse Facebook UI-elementen zoals de like-knop - Facebook zal je hiervoor straffen, wat ertoe zou kunnen leiden dat je app wordt opgeschort.
Zorg ervoor dat u binnen 760px ontwerpt voor apps, of dat u uw app op een pagina wilt plaatsen die niet groter is dan 520px.
Zoals bij elke goede website is het belangrijk om te plannen. Lang geleden zijn de dagen dat het acceptabel is om meteen naar een code-editor te gaan en uw site te coderen. Tegenwoordig kun je jezelf een hoop hoofdbrekens en tijd besparen door een draadframe te schetsen. Deze beperkte grafische weergave van uw app kan u helpen bij het plannen van navigatie, paden en huidige informatie die het meest voordelig is voor uw gebruikers. Het geeft je de kans om je beslissingen te analyseren en beoordelen zonder beïnvloed te worden door het ontwerp. Gelukkig voor ons is er tegenwoordig een hele reeks software en hulpmiddelen om ons in een kwestie van minuten te laten kloppen met wireframes.
Als we kijken naar het draadframe van onze Facebook-app, kun je zien hoe we het gepland hebben:
Tot voor kort heb ik Facebook's app-navigatie nooit echt leuk gevonden. Ik heb altijd het gevoel gehad dat onze apps verborgen zijn en dat er geen duidelijke richting of organisatie is. Gelukkig zijn dingen de laatste tijd verbeterd en hebben ze de navigatie op de startpagina gestroomlijnd. Dit geeft ons app-ontwikkelaars een groot voordeel omdat het de toegang tot onze apps gemakkelijker en meer in de voorhoede op de startpagina maakt.
Facebook zegt:
We maken het voor uw gebruikers eenvoudiger om eenvoudig toegang te krijgen tot en opnieuw gebruik te maken van de toepassingen die zij het vaakst gebruiken. Platformtoepassingen hebben nu gelijke kansen voor onroerend goed op de startpagina. Ze kunnen de posities innemen die momenteel worden ingenomen door het Toepassingsdashboard, het Spelletjesdashboard en Foto's, afhankelijk van de toepassingen die de gebruiker het meest gebruikt.
Dus het eerste dat je hebt gemerkt, is dat Facebook blauw als een van de primaire basiskleuren gebruikt. Het is een verstandige keuze van Facebook. Heb je je ooit afgevraagd waarom zoveel websites (Twitter, Facebook, LinkedIn, Paypal, etc.) blauw als primaire kleur gebruiken? Dat komt omdat blauw de kleur is die het meest universeel aanvaardbaar is. In veel verschillende culturen wordt blauw geassocieerd met religieuze overtuigingen, brengt het vrede of wordt gedacht de slechte geesten weg te houden. Blauw is een kleur die de meesten van ons onbewust bekend zijn geworden; het is de kleur van de lucht en de zee. Universeel zijn we dit gaan associëren met kalmte. Facebook lijkt de juiste balans te hebben met zijn blauwe kop en een schone witte achtergrond omdat te veel blauw gevoelens van kou, verdriet en depressie kan oproepen.
Neem een kijkje hierboven en u kunt enkele van de andere kleuren die Facebook gebruikt op haar site bekijken.
Facebook behoudt nog steeds hetzelfde primaire lettertype dat werd gebruikt op de openingsdag, het schreefloos lettertype Lucida Grande. Dit wordt dan gevolgd door een reeks fallback-lettertypen. Als we de CSS van Facebook bekijken, kunnen we de volledige lettertypefamilie direct zien als:
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
Het lettertype ontworpen door Charles Bigelow en Kris Holmes wordt door sommigen beschouwd als een weerspiegeling van minimalistisch, formaliteit en kwaliteit. Alle kwaliteiten die het de perfecte lettertype voor 's werelds grootste sociale netwerk maken.
De alinea-tekst van Facebook is 11px met een regelhoogte van 16px. Dit geeft een goede verhouding van ongeveer 1,5, waardoor het gemakkelijk kan worden gelezen en gelijkmatig verdeeld. Lijnhoogte is uiterst belangrijk voor tekst als u werkt aan schone, minimale ontwerpen. Als je de regelhoogte verkeerd hebt op je tekst, kan dit gemakkelijk een goed ontwerp maken in een OK-ontwerp. Het zijn deze lettertypekenmerken die we hebben besloten te gebruiken voor onze blog-app.
Door de gebruikersinvoervelden van Facebook op te splitsen, kunnen we uitvinden welke het meest geschikt zijn voor het type app dat we maken. Facebook heeft over het algemeen vijf soorten gebruikersinvoervelden. Dit zijn:
Als uw gebruiker bepaalde details bij uw app moet registreren, misschien een e-mailadres voor een wedstrijd, dan zou de meest voor de hand liggende keuze zijn om het aanmeldtype voor uw gebruikers te gebruiken om hun gegevens in te voeren. Dit is een goede keuze voor dit soort dingen, aangezien deze grote velden de gebruiker binnenhalen en helpen bij het aanmelden van conversies. Als uw app een zoekopdracht bevat, waarom probeert u dan het wiel opnieuw uit te vinden? Waarom zou je de Facebook-stijlzoekopdracht niet gebruiken? Uw gebruikers kunnen zich al in verbinding stellen met de native search en weten meteen dat dit hen zal helpen te vinden waarnaar ze op zoek zijn. Het is dit soort details, bij het ontwerpen van uw app die het de ultieme gebruikersvriendelijkheid zal maken en uiteindelijk de beste kans op succes zal geven!
Een andere optie is om te doen wat we hebben gedaan met onze Facebook-blog-app en een kleine wijziging aan te brengen die niet op Facebook staat. Let in het bovenstaande diagram op hoe de opmerkingen en login-ingangen beide een opvulling van 3px hebben, en we hebben dit genomen en de grensstreep gebruikt van de statusupdate-invoer. Het gebruik van dit soort combinatie zit nog steeds in het ontwerp en geeft nog steeds het gevoel native te zijn als we de Facebook-stylesheet uitbreiden terwijl we ons aan de regels houden.
De ambitie van Facebook binnen hun ontwerp is dat het fungeert als een leeg canvas waaruit hun gebruikers kunnen leven. Dit is logisch omdat het ontwerp geen invloed mag hebben op wat gebruikers proberen te bereiken wanneer ze zich in uw app bevinden. Facebook gelooft dat:
Een minimale, goed verlichte ruimte stimuleert participatie en eerlijke, transparante communicatie.
Als ontwerpers is het soms moeilijk om een stap terug te doen. We zijn er zo aan gewend om onze ontwerpen te combineren met verlopen, slagschaduwen en grensradius 'dat we soms vergeten dat de eenvoudigste ontwerpen het meest effectief kunnen zijn. Het is vaak een heel moeilijke taak om dit te kunnen bereiken, maar het is iets dat elke UI-ontwerper moet beheersen en kunnen doen. Peter Soyer schreef een interessant artikel over minimaal design. Als je ideeën of inspiratie nodig hebt voor dit soort dingen, dan zou je dit artikel zeker 60 schone en minimale websites moeten bezoeken voor inspiratie.
Of u kunt natuurlijk altijd op Facebook kijken en zien welke elementen u uit hun huidige opmaak kunt halen.
Iets dat je misschien nog niet eerder hebt opgemerkt tijdens het bladeren op Facebook, is hoeveel Facebook patronen gebruikt in zijn UI-ontwerp. Dit is bedoeld om gebruikers aan te moedigen vertrouwd te raken met hun lay-out. Facebook legt uit hoe dit werkt
Door patronen te omarmen, kunnen we herkennen dat onze bruikbaarheid aanzienlijk wordt verbeterd wanneer soortgelijke onderdelen op vergelijkbare manieren tot uitdrukking worden gebracht. Onze interacties spreken gebruikers met één stem en bouwen vertrouwen op. Verkleinen, hergebruiken, niet opnieuw ontwerpen.
In onze blog-app kun je zien dat we de idealen van Facebook hebben overgenomen door onderdelen zoals de tab-headers in de zijbalk te hergebruiken. Dit breekt het gemakkelijk af voor onze gebruikers en laat ze snel de inhoud scannen om te vinden wat ze zoeken.
In de voorhoede van Facebook is sociale interactie. Gebruikers typen niet langer gewoon in computers; ze communiceren en verbinden zich met de mensen die ze kennen. Ze komen op Facebook omdat ze omringd willen zijn door hun vrienden. Technologie en design moeten op de achtergrond blijven en daar geen afbreuk aan doen. Het is vaak een goed idee om te proberen uw app menselijker en interactiever te maken. Gelukkig biedt Facebook ons de Facebook-grafiek-API, waarmee we onze app nog interactiever kunnen maken en verbinding kunnen maken met hun krachtige sociale grafiek.
In de volgende zelfstudies bespreken we meer over de grafiek-API als onderdeel van deze serie. Facebook biedt ook eenvoudigere manieren om dit soort interacties op te nemen door een van hun sociale plug-ins te gebruiken, zoals de like-knop, verzendknop, opmerkingen en nog enkele andere.
Ik ben er zeker van dat jullie allemaal zullen hebben gemerkt dat Facebook zijn uiterlijk en functies behoorlijk regelmatig update. Dit is niet alleen iets dat gebruikers irriteert, maar dat ook de ontwerpers en ontwikkelaars kan irriteren. Dit komt omdat het de mogelijkheid heeft om al het harde werk dat we hebben ingebracht te ruïneren. Waarom niet voorbereiden op het ergste, zodat als Facebook een onverwachte update maakt, we klaar zijn om ze aan te nemen. Uit eigen ervaring is de sleutel hiervoor het herbruikbaar maken en eenvoudig stylen van elementen.
Natuurlijk weten we nooit wanneer en hoe Facebook gaat updaten - het kan opkomen en je bijten in de kont wanneer je het het minst verwacht. In feite zo veel dat toen ik halverwege het schrijven van de tutorial bij deze serie, Facebook ging en hun applicatie-canvaspagina bijwerkte, waardoor ik een deel van mijn ontwerp moest aanpassen. Bedankt Facebook!
Als u de .PSD bekijkt die bij deze zelfstudie hoort, kunt u een kijkje nemen en zien hoe sommige punten die we vandaag hebben aangeroerd betrekking hebben op ons ontwerp. Ons ontwerp is op dezelfde manier gestileerd als Facebook en is tegelijkertijd nog steeds uniek voor onze app. We hebben de ontwerpprincipes van Facebook geleend en gevolgd, zodat onze app een native look en feel heeft voor Facebook. Sommige items die we hebben goedgekeurd voor onze app zijn:
Begin 2011 hield ik drie focusgroepen met gewone Facebook-gebruikers om meer te weten te komen over hun gebruikspatroon op Facebook. Sommige resultaten verrasten me, hoewel ze relevant waren voor de applicatie waar ik bij betrokken was. Het is belangrijk om te begrijpen dat Facebook een extreem grote gebruikersgroep heeft en dat je niet sterk afhankelijk moet zijn van de informatie die ik heb verzameld - je zou je eigen onderzoek voor uw eigen criteria en demografisch.
De gebruikers die we interviewden zeiden allemaal dat ze elke dag minstens een half uur tot een uur op Facebook doorbrachten. Het verbaasde me dat de meerderheid van de mensen wilden dat onze app native leek op Facebook en dat elke gebruiker zei dat ze zich veiliger zouden voelen door items van een app via Paypal te kopen dan met een creditcard. Dus dat is misschien iets om rekening mee te houden als u van plan bent iets via uw app te verkopen.
Facebook's UI-stijl en de psychologie erachter is absoluut iets dat moet worden bewonderd. Het is een van de meest succesvolle websites aller tijden en een deel van de reden hiervoor is dat ze de juiste beslissingen nemen als het gaat om hun ontwerp. Denk er eens over, zou Facebook net zo succesvol zijn als hun primaire canvaskleur zwart was? Het is moeilijk om te beoordelen hoeveel van hun succes te danken is aan hun UI-beslissingen, maar ik denk zeker dat het enige erkenning verdient voor het succes.
Door ideeën van de eenvoudige maar effectieve ontwerpprincipes van Facebook te gebruiken en te gebruiken en deze in uw eigen app op te nemen, ben ik ervan overtuigd dat uw app de best mogelijke kans heeft om een succes te worden.
In het volgende deel van de tutorial zullen we kijken hoe we onze blog-app .PSD kunnen coderen in HTML / CSS. Dus tot die tijd, gelukkig ontwerpen piepgeluiden!
Accentsconagua