Indonesian (Bahasa Indonesia) translation by Putri (you can also view the original English article)
Selama seri ini saya akan melihat di belakang UI Facebook dan, dalam prosesnya, menunjukkan kepada Anda cara membuat aplikasi blog Facebook terintegrasi Anda sendiri melalui RSS feed.
Suka atau benci Facebook telah menjadi bagian integral dari kehidupan orang-orang. Bagi banyak orang, ini adalah alat yang memungkinkan kita untuk mengejar ketinggalan dengan teman lama, berbagi foto atau merencanakan malam bersama teman-teman kita. Namun, di balik interaksi sosial ini terdapat struktur kompleks dari perencanaan UI yang cermat yang telah di-tweak dan di-tweak ulang.
Pada awal Facebook saya tidak pernah menjadi penggemar "tampilan dan nuansa membosankan" dan selalu merasa bahwa itu memiliki potensi untuk lebih banyak dalam hal desain. Namun, hanya sebagai pengetahuan dan pengalaman saya menjadi seorang perancang UI telah berkembang bahwa sekarang saya menyadari itu kesederhanaan dan kemudahan penggunaan Facebook yang telah memungkinkannya menjadi begitu sukses. Desainnya tentu sesuatu yang harus dikagumi.
Pengenalan
Dalam rangkaian tutorial ini, saya akan mengevaluasi UI Facebook melalui serangkaian studi kasus, penelitian, implementasi, dan analisis, sehingga Anda memahami bagaimana beberapa prinsip desainnya dapat membantu Anda dalam menciptakan tampilan dan nuansa asli aplikasi Facebook . Saya ingin membuat sesuatu yang diharapkan akan berguna bagi pembaca Webdesigntuts+ dan berpikir "Bukankah lebih bagus lagi jika saya bisa menunjukkan kepada kalian bagaimana mengubah blog web Anda menjadi aplikasi Facebook asli". Nah semuanya, Anda beruntung karena ini adalah apa yang saya rencanakan untuk dilakukan selama 3 artikel berikutnya. Jadi tetap besama saya, buatlah secangkir teh dan happy designing!
Sejarah Singkat tentang Desain UI Facebook
Sejak hari-hari awal, kesederhanaan telah menjadi jantung dari Facebook
Pada Februari 2004 thefacebook.com membuka pintunya bagi mahasiswa Harvard sebelum kemudian membukanya ke publik pada 26 September 2006. Konsep keseluruhan untuk situs tetap sama dengan negara asalnya. Masih memiliki header biru, backgound putih bersih, column header tab biru dan font yang sama yang digunakan saat ini, Lucida Grande. Tentu saja banyak yang berubah sejak awal. Mark Zuckerberg telah tumbuh dan situs itu tumbuh bersamanya. Sulit untuk sepenuhnya memahami dengan tepat apa proses pemikiran Zuckenberg selama masa awal Facebook, tetapi sepertinya fokus utamanya berkonsentrasi pada fungsionalitas atas UI. Zuckerberg memberikan beberapa wawasan tentang pertimbangan desain awalnya:
Lebih banyak uang daripada akal telah dibuang di Facebook sejak inkarnasinya. Dengan ini muncul perbaikan dalam desain Facebook; sedikit demi sedikit, sedikit demi sedikit. Facebook secara teratur memperbarui UI-nya secara bertahap dan sering disambut dengan kritik sebelum akhirnya dihargai oleh mayoritas.
Manfaat dari Rancangan Asli
Jadi mengapa Anda ingin mendesain aplikasi Anda seperti Facebook? Itu sepenuhnya tergantung pada bagaimana Anda mendesain aplikasi Facebook. Beberapa dari Anda akan memilih yang asli dan yang lain akan mendesain sesuatu yang benar-benar baru yang mudah-mudahan akan memuji Facebook. Tidak ada cara yang benar atau salah untuk merancang aplikasi Anda, tetapi semoga dengan memahami logika di balik desain Facebook, ini akan memberikan kesempatan terbaik bagi Anda untuk sukses.
Keakraban
Mungkin keuntungan terbesar dari desain asli adalah bahwa hal itu akan akrab bagi pengguna Anda. Mereka tidak perlu mempelajari konsep UI baru dari awal, karena mereka sudah terbiasa dengan cara kerja Facebook.
Keamanan
Bersama keakraban terdapat keamanan. Pengguna Anda pasti akan merasa aman dan nyaman di lingkungan yang sudah mereka kenal sebagai lawan dari desain asing yang ada di Facebook. Jika Anda mempertimbangkan untuk menjual barang melalui aplikasi Anda, perasaan keamanan dari pengguna ini dapat berpotensi menghasilkan rasio konversi yang lebih tinggi.
Sebagai desainer, kita memiliki keinginan alami untuk ingin menciptakan sesuatu yang baru dan menarik, jadi mengikuti pedoman gaya Facebook mungkin tidak menarik langsung kepada Anda, tetapi bagaimana jika Anda menetapkan tantangan dan mendesain sesuatu dalam gaya Facebook yang Facebook tidak ingin memiliki gaya langsung? Pernah bertanya-tanya bagaimana tampilan daftar dalam gaya Facebook? Tetapkan sendiri tantangan dan ciptakan sesuatu yang belum ada. Saya dapat meyakinkan Anda bahwa tantangan ini bisa sama menyenangkannya dengan konsep baru dari awal.
Prinsip Desain Facebook
Banyak organisasi besar memiliki panduan merek atau gaya. Pedoman Layout Facebook mereka dalam prinsip-prinsip desain Facebook. Meskipun tidak jelas dan dapat diinterpretasikan dalam berbagai cara, hal ini membantu Anda memahami apa yang ingin dicapai Facebook melalui desain situs web mereka. Seperti yang Facebook katakan:
Ada keyakinan tertentu yang kami pegang di Facebook, kualitas tertentu yang kami perjuangkan dalam pekerjaan. Itu yang memungkinkan kita untuk berdebat mengenai sesuatu "Apakah Facebook" atau "Bukannya Facebook," itu yang memungkinkan kita untuk mengevaluasi apakah sesuatu yang dirancang dapat ditingkatkan.
Pernyataan misi Facebook adalah untuk membuat dunia lebih terbuka dan ini memiliki pengaruh yang kuat pada desain. Antarmuka Facebook perlu bekerja di semua budaya, di semua benua di dunia dalam setiap bahasa. Ini tidak berarti Anda harus menerjemahkan aplikasi ke dalam setiap bahasa di planet ini, tetapi ada beberapa hal yang perlu diingat saat membuat aplikasi.
Hal yang Harus Dihindari
Pastikan Anda membaca dokumentasi API grafik dan pastikan apa yang Anda rencanakan untuk dilakukan dapat dicapai. Misalnya, ketika saya pertama kali datang dengan konsep untuk membuat aplikasi blog ini, saya pikir itu akan menjadi ide yang baik untuk menyertakan gambar pratinjau di sebelah posting blog saya. Namun, (sayangnya) feed RSS Feedburner (bahwa kita akan membawa feed dari) tidak membawa url untuk gambar pratinjau. Ini hanya memberlakukan fakta bahwa Anda harus merencanakan aplikasi Anda dengan hati-hati. Semakin banyak yang Anda rencanakan, semakin mudah Anda membuatnya sendiri. Tidak ada yang lebih buruk daripada mendesain dan mengkodekan aplikasi Anda dalam HTML/CSS hanya untuk mencari tahu apa yang Anda rencanakan tidak tersedia atau mungkin.
Hal lain yang harus dilakukan adalah jangan menyesatkan orang dengan elemen UI Facebook palsu seperti tombol suka - Facebook akan menghukum Anda karena ini dapat menyebabkan aplikasi Anda ditangguhkan.
Pastikan Anda mendesain dalam 760px untuk aplikasi, atau jika Anda bertujuan untuk menempatkan aplikasi Anda di halaman kemudian tidak lebih besar dari 520px.
Wireframe
Seperti halnya situs web yang bagus, penting untuk merencanakan. Lama berlalu adalah hari-hari ketika itu diterima untuk melompat langsung ke editor kode dan kode situs Anda. Saat ini Anda dapat menghindari sakit kepala dan waktu dengan membuat sketsa wireframe. Representasi grafis terbatas dari aplikasi Anda dapat membantu Anda merencanakan navigasi, jalur, dan informasi terkini yang paling bermanfaat bagi pengguna Anda. Ini memberi Anda kesempatan untuk menganalisis dan menilai keputusan Anda tanpa dipengaruhi oleh desain. Untungnya bagi kita hari ini ada banyak software dan sumber untuk membantu kita meretas wireframes dalam hitungan menit.
Jika kita melihat wireframe aplikasi Facebook, Anda dapat melihat bagaimana kita merencanakannya:
- Rute dan jalur pengguna akan mengambil sekali dalam aplikasi kita.
- Dimensi perkiraan untuk memastikan kita bekerja pada skala yang benar, dan bahwa aplikasi kita akan cocok di Facebook.
- Ukuran huruf perkiraan - Ini dapat berguna sebagai panduan ketika kita merencanakan CSS nanti. Saya biasanya tidak akan melakukan ini ketika membuat wireframe untuk sebuah situs tetapi dalam kasus ini ketika kita ingin agar style kita menjadi sangat sederhana, seringkali dapat berfungsi sebagai panduan yang baik untuk style dasar seperti heading tag h1, h2 dll .
- Tempat paling logis untuk konten kita. Perhatikan bagaimana posting blog semuanya telah ditempatkan di sebelah kiri. Ini adalah untuk menarik pengguna langsung ke konten segera setelah mereka mendapatkan aplikasi kita.
Navigasi
Sampai saat ini saya belum pernah benar-benar menyukai navigasi aplikasi Facebook. Saya selalu merasa bahwa aplikasi kita disembunyikan dan tidak ada arah atau organisasi yang jelas. Untungnya, banyak hal telah diperbaiki akhir-akhir ini dan mereka telah mempersingkat navigasi beranda. Ini memang memberikan keuntungan besar bagi kita para pengembang aplikasi karena membuat mengakses aplikasi kita lebih mudah dan lebih banyak di garis depan di beranda.
Facebook mengatakan:
Kami mempermudah pengguna untuk mengakses dan terlibat kembali dengan mudah dengan aplikasi yang paling sering mereka gunakan. Aplikasi platform sekarang memiliki peluang yang sama untuk real estate di halaman rumah. Mereka dapat menduduki posisi yang saat ini dipegang oleh Dasbor Aplikasi, Dasbor Permainan, dan Foto, tergantung pada aplikasi mana yang paling sering berinteraksi dengan pengguna.
Warna
Jadi hal pertama yang Anda perhatikan adalah bahwa Facebook menggunakan warna biru sebagai salah satu warna dasar utamanya. Ini adalah pilihan yang masuk akal dari Facebook. Pernah bertanya-tanya mengapa begitu banyak situs web (Twitter, Facebook, LinkedIn, Paypal dll) menggunakan warna biru sebagai warna utama mereka? Itu karena biru terlihat menjadi warna yang paling dapat diterima secara universal. Dalam banyak budaya yang beragam, biru diasosiasikan dengan keyakinan agama, membawa kedamaian atau dianggap menjauhkan roh jahat. Biru adalah warna yang sebagian besar dari kita telah terbiasa; itu adalah warna langit dan lautan. Secara universal kita telah menghubungkannya dengan ketenangan. Facebook tampaknya memiliki keseimbangan yang pas dengan header dan background putih bersih karena terlalu banyak warna biru dapat membangkitkan perasaan dingin, sedih, dan depresi.
Coba lihat di atas dan Anda dapat melihat beberapa warna lain yang digunakan Facebook di antara situsnya.
Fonts/Typography
Facebook masih mempertahankan font utama yang sama yang digunakan pada hari pembukaannya, font sans-serif Lucida Grande. Ini kemudian diikuti oleh serangkaian font fallback. Jika kita melihat CSS dari Facebook, kita dapat langsung melihat keluarga font lengkap sebagai:
1 |
font-family: "lucida grande",tahoma,verdana,arial,sans-serif; |
Font yang dirancang oleh Charles Bigelow dan Kris Holmes dianggap oleh beberapa untuk mencerminkan minimalis, formalitas dan kualitas. Semua kualitas yang menjadikannya pilihan font yang sempurna untuk jaringan sosial terbesar di dunia.
Teks paragraf Facebook adalah 11px dengan tinggi garis 16px. Ini memberi rasio yang bagus sekitar 1.5 sehingga mudah dibaca dan dibagi rata. Ketinggian baris sangat penting pada teks saat Anda mengerjakan desain yang bersih dan minimal. Jika Anda mendapatkan tinggi garis yang salah pada teks Anda maka ini bisa dengan mudah membuat desain yang baik menjadi hanya satu OK. Ini adalah atribut font yang diputuskan untuk digunakan untuk aplikasi blog kita.
Bidang Masuk Pengguna
Dengan memecah bidang masuk pengguna Facebook kita dapat mengetahui mana yang paling sesuai dengan jenis aplikasi yang kita buat. Facebook umumnya memiliki lima jenis bidang masuk pengguna. Diantaranya:
- Status Update
- Sign Up
- Comments
- Search
- Login
Jika pengguna Anda harus mendaftarkan beberapa rincian dengan aplikasi Anda, mungkin alamat email untuk kompetisi, maka pilihan yang paling jelas adalah menggunakan jenis masukan mendaftar untuk pengguna Anda untuk memasukkan detail mereka. Ini adalah pilihan yang baik untuk hal semacam ini karena bidang-bidang besar ini menarik pengguna dan akan membantu dengan konversi pendaftaran. Jika aplikasi Anda termasuk pencarian maka mengapa mencoba dan menemukan kembali roda? Mengapa tidak menggunakan pencarian gaya Facebook? Pengguna Anda sudah akan dapat berhubungan dengan pencarian asli dan langsung tahu bahwa itu akan membantu mereka menemukan apa yang mereka cari. Detail semacam ini, saat mendesain aplikasi Anda yang membuatnya menjadi yang terbaik dalam keramahan pengguna dan akhirnya memberikan kesempatan terbaik untuk sukses!
Pilihan lain adalah melakukan apa yang dilakukan dengan aplikasi blog Facebook kita dan membuat sedikit perubahan yang tidak ada di Facebook. Perhatikan pada diagram di atas bagaimana komentar dan masukan login keduanya memiliki padding 3px, baik kita telah mengambil ini dan menggunakan stroke perbatasan dari input pembaruan status. Menggunakan kombinasi semacam ini akan tetap berada di dalam desain dan akan tetap memberikan perasaan sebagai penduduk asli karena kita memperluas style sheet Facebook sementara masih menempel pada aturan.
Pikirkan Kebersihan
Ambisi Facebook dalam desain mereka adalah untuk bertindak sebagai kanvas kosong dari mana pengguna mereka dapat hidup. Ini masuk akal karena desain tidak boleh mengganggu apa yang pengguna coba capai ketika mereka ada di aplikasi Anda. Facebook percaya bahwa:
Ruang yang minim dan terang akan mendorong partisipasi dan komunikasi transparan yang jujur.
Sebagai desainer terkadang sulit untuk mundur selangkah. Kita sangat terbiasa menyusun desain dengan gradien, menjatuhkan bayangan dan radius perbatasan 'yang terkadang dilupakan bahwa desain paling sederhana bisa menjadi yang paling efektif. Mampu mencapai hal ini seringkali bisa menjadi tugas yang cukup sulit tetapi itu adalah sesuatu yang harus dikuasai dan dapat dilakukan oleh desainer UI. Peter Soyer menulis artikel yang menarik tentang desain minimal. Jika Anda membutuhkan beberapa ide atau inspirasi untuk hal semacam ini maka Anda pasti harus memeriksa posting ini 60 situs web bersih dan minimal untuk inspirasi.
Atau, tentu saja, Anda selalu dapat melihat Facebook dan melihat elemen apa yang dapat Anda tarik dari gaya bersih saat ini.
Pikirkan Konsisten
Sesuatu yang mungkin tidak Anda perhatikan sebelumnya ketika Anda menjelajahi Facebook, adalah seberapa banyak pola penggunaan Facebook dalam desain UI-nya. Ini untuk mendorong pengguna agar terbiasa dengan tata letaknya. Facebook menjelaskan cara kerjanya
Dengan merangkul pola kita dapat mengenali bahwa kegunaan kita sangat meningkat ketika bagian yang sama diekspresikan dengan cara yang sama. Interaksi kita berbicara kepada pengguna dengan satu suara, membangun kepercayaan. Kurangi, gunakan kembali, jangan mendesain ulang.
Di aplikasi blog kami, Anda dapat melihat kami telah mengadopsi cita-cita Facebook dengan menggunakan kembali bagian-bagian seperti header tab di sidebar. Ini dengan mudah memecahnya untuk pengguna dan memungkinkan mereka dengan cepat memindai konten untuk menemukan apa yang mereka cari.
Pikirkan Manusia
Di garis depan Facebook adalah interaksi sosial. Pengguna tidak lagi hanya mengetik ke komputer; mereka berinteraksi dan terhubung dengan orang yang mereka kenal. Mereka masuk ke Facebook karena mereka ingin dikelilingi oleh teman-teman mereka. Teknologi dan desain harus tetap berada di background dan tidak mengurangi hal ini. Sering kali adalah ide yang bagus untuk mencoba dan membuat aplikasi Anda lebih manusiawi dan interaktif. Untungnya bagi kita Facebook menawarkan API grafik Facebook, yang memungkinkan membuat aplikasinya lebih interaktif dan terhubung dengan grafik sosial mereka yang kuat.
Kami akan berbicara lebih banyak tentang API grafik dalam tutorial yang akan datang sebagai bagian dari seri ini. Facebook juga menawarkan cara yang lebih sederhana untuk jenis interaksi ini untuk digabungkan dengan menggunakan plugin sosial seperti tombol seperti, tombol kirim, komentar, dan beberapa lainnya.
Menjadikannya Adaptable/Updateable
Saya yakin Anda semua telah memperhatikan bahwa Facebook memperbarui tampilan dan fiturnya cukup sering. Ini bukan hanya sesuatu yang mengganggu pengguna tetapi juga dapat mengganggu kita dari para desainer dan pengembang. Ini karena ia memiliki kemampuan untuk menghancurkan semua kerja keras yang kita lakukan. Mengapa tidak mempersiapkan yang terburuk sehingga jika Facebook melakukan pembaruan yang tidak terduga maka kita siap untuk mengambilnya. Dari pengalaman saya sendiri, kunci untuk ini adalah dengan membuat elemen-elemen dapat digunakan kembali dan ditata dengan sederhana.
Tentu saja kita tidak pernah tahu kapan atau bagaimana Facebook akan memperbarui - itu bisa muncul dan menggigit Anda ketika Anda tidak mengharapkannya. Bahkan begitu banyak sehingga ketika saya setengah jalan melalui menulis tutorial yang menyertai seri ini, Facebook pergi dan memperbarui halaman kanvas aplikasi mereka membuat saya harus membaca ulang beberapa desain saya. Terima kasih Facebook!
Menempatkannya Semua Menjadi Tindakan!
Jika Anda melihat pada. PSD yang menyertai tutorial ini maka Anda akan dapat melihat dan melihat bagaimana beberapa poin yang disentuh hari ini terkait dengan desain. Desain kita ditata dengan cara yang mirip dengan Facebook sementara pada saat yang sama masih unik untuk aplikasi. Kita telah meminjam dan mengikuti prinsip desain Facebook sehingga aplikasi memiliki tampilan dan nuansa asli Facebook. Beberapa item yang diadopsi untuk aplikasi kita adalah:
- filter search bar: Terinspirasi oleh search bar asli Facebook.
- Paragraph text: Gaya sama dengan Facebook. Salah satu faktor terpenting dalam membuatnya terlihat asli.
- Page tabs: Meskipun tidak persis sama dengan tab asli Facebook, mereka masih membangkitkan perasaan tab halaman asli Facebook.
- Tab Headers: Tab headers kita ditata sama seperti di Facebook.
- Nama pengguna dan gambar profil: Untuk melanjutkan fokus Facebook pada interaksi manusia, kita telah menyertakan ini untuk membuat aplikasi blog menjadi lebih pribadi.
- Gaya sederhana: Kita menggunakan spasi di halaman secara efektif untuk memberikan ruang teks untuk bernapas dan untuk membawa cita-cita Facebook menciptakan kanvas kosong untuk mendorong partisipasi dan komunikasi transparan yang jujur.
Studi Pribadi saya
Pada awal tahun 2011 saya mengadakan tiga grup fokus dengan pengguna Facebook reguler untuk mencari tahu tentang kebiasaan menggunakan mereka di Facebook. Beberapa hasil mengejutkan saya, meskipun mereka relevan untuk aplikasi yang saya ikuti. Penting untuk memahami bahwa Facebook memiliki basis pengguna yang sangat besar dan Anda tidak harus sangat bergantung pada informasi yang saya kumpulkan - Anda harus melakukan penelitian Anda sendiri untuk kriteria dan demografi Anda sendiri.
Pengguna yang diwawancarai mengatakan bahwa mereka menghabiskan setidaknya 30 menit hingga satu jam di Facebook setiap hari. Ini mengejutkan saya bahwa sebagian besar orang ingin aplikasi kita terlihat asli Facebook, dan bahwa setiap pengguna mengatakan bahwa mereka akan merasa lebih aman membeli barang dari aplikasi melalui Paypal daripada membayar dengan kartu kredit. Jadi itu mungkin sesuatu yang perlu diingat jika Anda berencana menjual apa pun melalui aplikasi Anda.
Kesimpulan
Gaya UI Facebook dan psikologi di baliknya pasti sesuatu yang harus dikagumi. Ini adalah salah satu situs web paling sukses sepanjang masa dan sebagian alasannya adalah karena mereka membuat keputusan yang benar ketika datang ke desain mereka. Pikirkan tentang itu, apakah Facebook akan berhasil jika warna utama kanvas mereka adalah hitam? Sulit untuk menilai seberapa banyak kesuksesan mereka sampai ke keputusan UI mereka, tetapi saya pasti berpikir itu layak mendapat pujian atas keberhasilannya.
Dengan mengadopsi dan meminjam ide dari prinsip desain sederhana namun efektif dan menggabungkannya ke dalam aplikasi Anda sendiri, saya yakin bahwa aplikasi Anda memiliki peluang terbaik untuk menjadi sukses.
Di bagian selanjutnya dari tutorial ini kita akan melihat bagaimana cara meng-kode aplikasi blog kita. PSD ke dalam HTML/CSS. Jadi sampai saat itu, selamat merancang peeps!
Tautan, Bacaan, & Sumber Daya Lainnya
By
