UI tipografi - cara baru untuk mengembangkan antarmuka pengguna

UI tipografi adalah konsep desain baru, filosofi yang diungkapkan dalam tiga kata: antarmuka adalah teks.

Sampai saat ini, semua konsep antarmuka pengguna (Kecuali untuk baris perintah) dapat dipahami dengan desain bentuk-bentuk elemen yang digunakan dalam antarmuka. Kita berbicara tentang bentuk tombol, menu, jendela dan bingkai lainnya. Tampilan UI apa pun sepenuhnya ditentukan oleh visualisasi bentuk-bentuk ini, dan gaya antarmuka ditentukan semata-mata oleh pendekatan terhadap gambar bentuk-bentuk ini.

UI alami

Klasik genre - gaya iOS. Tampilan antarmuka ini ditentukan terutama oleh bentuk ikon. Kanon ikon lukisan iOS adalah bahwa gambar formulir melambangkan konten internal secara maksimal. Anda melihat lensa - artinya setelah klik kamera dimulai, roda gigi - artinya di dalam pengaturan. Ini mirip dengan realisme bergambar akademik: apa yang saya lihat adalah apa yang saya tulis. Penampilan sesuai dengan konten, mulai dari lukisan gua. Hanya teknik gambar ditingkatkan, realisme ditingkatkan.

Malevich yang hebat menyebut gaya ini seni orang biadab: "Malu pada mereka ..." dan sangat mendorongnya untuk meninggalkan: "Dunia daging dan tulang harus pergi."

Kandinsky

Malevich bukan satu-satunya revolusioner yang menentang seni klasik. Juga patut dicatat Kamerad Kandinsky, pendiri seni abstrak. Karena abstraksionisme tidak melewati produk dari arah UI, mari kita bahas lebih rinci.

Kandinsky tidak datang ke abstraksionisme sekaligus, menderita untuk waktu yang lama, pikir. Tetapi karya kaum Impresionis mendorongnya ke kesadaran. Secara khusus, karya Monet "tumpukan jerami".



Warna tidak alami, yang tidak ditemukan di alam, mempengaruhi persepsi lebih kuat daripada warna alami. Kandinsky mengerti: jika Anda dapat meninggalkan bunga alami, maka mengapa tidak melangkah lebih jauh dan tidak meninggalkan bentuk alami. Perubahan realistis ke abstrak.

UI abstrak

UI klasik dapat dianggap sebagai Metro-desain. Berbeda dengan lukisan ikon alami iOS, ada beberapa ubin berwarna berbeda.

Apakah secara sadar, seperti Kandinsky, atau tidak, tetapi pengembang konsep Metro telah datang dari alam ke abstraksi. Kemungkinan besar, ini kecelakaan, kalau tidak pasar akan penuh dengan banyak contoh konstruksi UI semacam itu. Misalnya, lingkaran berwarna atau pil Damien Hirst akan terlihat bagus.



Konsep abstraksionisme dalam desain antarmuka pengguna saat ini tidak sepenuhnya diungkapkan. Kita dapat mengatakan bahwa pengembang Metro hanya membuka pintu ke dunia baru, tetapi yang lain tidak terburu-buru untuk menggunakannya. Ini semua tentang skeuomorfisme. Berakar dalam-dalam di benak pengembang, ia tidak membiarkan pintu ini dibuka lebar-lebar, karena mereka tidak melihatnya langsung, itu benar-benar terlihat tidak alami bagi mereka.

Layak untuk menghilangkan penutup mata dan keluar dari liang yang dalam, di mana tidak ada yang terlihat, kecuali keledai alami "unta, sarat dengan sampah yang berbeda" dan menciptakan liang ini - saat dunia baru terbuka - dari bentuk abstrak hingga tak berbentuk, dunia informasi murni.

Desain tak berbentuk

Abstraksionisme dalam desain dibandingkan dengan naturalisme, tentu saja, merupakan gerakan menuju minimalis. Tetapi sampai batas apa seseorang dapat pergi dengan melanjutkan gerakan ini? Apa batas-batas UI minimum? Apakah mungkin untuk sepenuhnya meninggalkan formulir dan apa yang akan tersisa pada akhirnya?

Kasus ekstrem dari UI minimum adalah satu piksel, tidak boleh kurang. Misalkan UI kita terdiri dari piksel ini. Setelah mengklik piksel ini beberapa fungsi harus dijalankan. Sekarang mari kita tempatkan UI kita di atas konten, yang sering terjadi, dan ambil gambar karya Monet sebagai konten.



Bagaimana? Lihat UI kami? Tidak ?! Tapi dia! Pixelnya sangat kecil sehingga digabungkan dengan latar belakang dan tidak dapat memberikan tingkat komunikasi yang dapat diterima untuk seseorang. Antarmuka piksel mungkin cocok untuk robot, tetapi tidak untuk manusia.

Dengan demikian, antarmuka pengguna grafis harus lebih besar dari satu piksel. Tetapi berapa banyak? Lagi pula, di mana garis minimalisme, setelah itu kita kehilangan kemungkinan komunikasi normal?

Untuk mencoba menemukan garis ini, kami menyarankan untuk beralih dari ukuran UI maksimum yang mungkin ke minimum, memotong semua yang tidak perlu di sepanjang jalan.

Area maksimum UI terbatas pada area kerja. Pertimbangkan sebagai gambar UI maksimum, yang menempati 100% layar. Mari kita ambil karya Monet yang sama dengan gambar seperti itu. Dan biarkan beberapa fungsi dieksekusi ketika Anda mengklik tumpukan jerami.

Seperti yang Anda lihat, pengguna tidak menerima informasi yang mengatakan kepadanya apa yang perlu dilakukan untuk menjalankan fungsi. Meskipun area fungsional UI - stack - membentuk hampir sepertiga layar, pengguna tidak tahu tentang fungsi ini, tidak ada petunjuk. Ada banyak informasi visual, tetapi tidak jelas bagaimana menafsirkannya.

Dalam kasus kami, UI maksimum dalam hal kemampuan untuk mengirimkan informasi yang berguna untuk komunikasi sebanding dengan minimum satu-pixel. Ini semua tentang entropi.

Semakin tinggi entropi, semakin sedikit pengguna yang memahami apa yang terjadi. Kekacauan. Aliran visualnya besar, tetapi kosong, seluruh jumlah informasi yang dikirimkan tersebar. Efisiensi rendah. Semakin tinggi entropi UI, semakin rendah efisiensi antarmuka.

Entropy, atau indikator ketidakpastian UI, adalah indikator bersyarat, masing-masing, karena ini adalah karakteristik persepsi. Sebagai contoh, sebuah antarmuka yang dibuat dalam warna yang tidak dapat dibedakan oleh buta warna akan memiliki entropi besar untuk mereka, tidak seperti orang lain. Dimungkinkan untuk menentukan entropi UI hanya secara empiris.

Namun kembali ke contoh di mana UI dibuat dalam bentuk gambar yang menempati 100% layar. Cukup bagi kita untuk menulis penjelasan di tempat yang tepat - dan situasinya berubah secara radikal.



Segera menjadi jelas di mana harus menuai. Dengan prasasti ini kami mengurangi entropi dengan tajam. Tidak ada yang lebih spesifik daripada teks.

Jika pada saat yang sama Anda membuang gambar itu sendiri (formulir) dan hanya meninggalkan teks, kualitas komunikasi tidak akan berubah, tetapi pada saat yang sama, antarmuka hanya menggunakan beberapa piksel layar yang dialokasikan untuk prasasti. UI singkat, semakin tinggi efisiensinya.

Gambar Monet pada antarmuka tidak berguna. Meskipun ini adalah karya seni yang hebat, ini bukan alasan untuk mendorongnya di semua tempat. Siapa pun yang ingin melihat Monet akan pergi ke pameran, atau membeli buku dengan reproduksi, atau menonton film dokumenter.

Begitu pula dengan bentuk lain, misalnya ikon. Jika ikon dengan teks membawa informasi berguna yang sama untuk komunikasi dengan teks tanpa ikon, lalu mengapa meninggalkan ikon? Jadi apa Untuk mempromosikan kreasi desainer ke massa? Namun di atas, kami sendiri menolak Monet ini, menunjukkan bahwa antarmuka bukan galeri gambar.

Kami memperbaiki apa yang dikatakan dengan contoh. Sebagai konten untuk latar belakang, kami mengambil tumpukan yang sama, dan sebagai UI kami mempertimbangkan dua opsi - dengan ikon dalam bentuk lingkaran Hurst dengan teks dan hanya teks.


Opsi 1

Dalam kasus pertama, ada perasaan tidak enak. Penambahan dua karya tidak memberi nilai tambah, melainkan nilai minus. Aturan ini berfungsi saat overlay gambar apa pun. Ini dikenal oleh mereka yang bekerja dengan antarmuka yang dibangun di atas konten (misalnya, di IPTV). Dalam kasus ekstrim, antarmuka dapat menggunakan gambar kontur, yang pada dasarnya dapat dianggap hieroglif.


Opsi 2

Pilihan kedua dengan UI tekstual terlihat lebih baik, tetapi komposisinya rusak oleh pemerataan teks. Keadaan ini dalam fisika disebut kematian termal. Tetapi masalahnya dapat diperbaiki, masalahnya dapat diselesaikan dengan beberapa cara: dengan memindahkan atau mengubah prasasti (mengikuti contoh bagaimana Kandinsky menyeret titik dari pusat untuk mencapai suara baru untuk komposisi - ia menyebut posisi di tengah sebagai titik tanpa suara) atau menggunakan animasi (Anda harus sangat berhati-hati untuk menghindari kejang epilepsi). Dalam kedua kasus, komposisi tanpa suara keseimbangan terganggu, ketegangan positif muncul, yang jelas ditangkap oleh persepsi manusia.

Seperti yang ditunjukkan di bawah ini, semua informasi dikelompokkan dan menempati ruang minimum, sehingga pengguna berhak untuk merenungkan konten ketika UI dihidupkan. Contoh ini juga menunjukkan bagaimana, karena offset, Anda dapat memilih elemen yang dipilih, memperbaiki pilihan dengan tagar tambahan.


Opsi 3

Bandingkan ini dengan opsi 1. Lihat berapa banyak informasi yang tidak perlu yang kami singkirkan tanpa kehilangan informasi, seberapa mudah tampilan antarmuka.

Teks di atas konten menyerupai sampul majalah yang mengkilap, di mana font yang dipilih dengan benar, dikombinasikan secara harmonis dengan gambar, bersama-sama membentuk satu kesatuan tunggal. Jika Anda mencoba, Anda dapat mengandalkan efek resonansi, ketika efek persepsi dari hasil overlay teks pada konten akan beberapa kali lebih tinggi daripada secara individual.

UI tanpa bentuk, yang hanya terdiri dari teks, adalah tren berani di zaman kita. Selain itu, antarmuka yang menggunakan bahasa berbasis alfabet lebih minimal daripada piktogram. Versi untuk robot adalah UI menggunakan kode biner.

Singkirkan formulir dengan informasi grafis yang tidak perlu yang memusnahkan perhatian pengguna, potong semua yang tidak perlu, kirim formulir ke tempat sampah, lakukan hanya teks. Seni kaligrafi dan tipografi membantu Anda. Oleh karena itu nama konsep - Tipografi UI.

Sekarang tugas membangun antarmuka direduksi untuk menciptakan komposisi teks yang diinginkan di ruang kerja. Selain itu, solusi komposisi yang sama dapat berbeda secara signifikan dalam hal dampak visual pada pengguna karena pemilihan kombinasi font. Font memainkan peran warna, mengatur suasana hati dan gaya. Kaligrafi adalah alat utama artis dalam UI seperti itu.

Tidak ada solusi universal yang cocok untuk menyelesaikan semua masalah. Tidak ada Cawan Suci, ini adalah konsekuensi dari teorema ketidaklengkapan Gödel dan teorema Tarski tentang kebenaran yang tidak dapat diekspresikan. Namun di kelas antarmuka untuk mengelola tampilan konten, pendekatan kami dapat melakukan pekerjaan apa pun.

UI tipografi lahir di ARES saat bekerja pada proyek IPTVPORTAL. TYPOGRAPHY - kami menyebutnya antarmuka pengguna untuk menonton televisi interaktif. Ini pertama kali diperagakan di CSTB-2018.

PS

Bagi mereka yang tidak menemukan UI dari piksel pertama. Petunjuk

Contohnya