🕕 👨🏾‍🍳 📶 Desain produk tanpa desainer 👩🏽‍💼 👨🏾 👼🏿

Saya telah bekerja di KORUS Consulting CIS selama 3 tahun, dan selama ini saya berpartisipasi dalam desain sembilan belas layanan B2B. Desain interaksi biasanya dikaitkan dengan Axure, InVision, Moqups, Framer, (masukkan opsi favorit Anda), tetapi alat saya adalah HTML, SCSS, dan AngularJs. Saya akan memberi tahu Anda bagaimana praktik biasa menyimpan templat HTML telah berkembang di almanak dari tata letak penuh, dan bagaimana sekelompok juru ketik yang dipimpin oleh direktur seni merancang interaksi dengan antarmuka semua produk KORUS Consulting CIS selama enam tahun.

Dan mengapa itu berhasil?

Dalam "Rumah sakit jiwa di tangan pasien" dalam bab "Dari mana desainer interaksi berasal", Alan Cooper menulis bahwa keterampilan yang diperlukan mudah ditemukan pada setiap peserta dalam pengembangan. Desain dapat dilakukan oleh manajer proyek, analis, penulis teknis, pemasar, pengembang. Ada baiknya ketika fungsi ini diambil alih oleh spesialis terpisah, lebih disukai seorang desainer. KORUS memberikan peran ini kepada pembuat kode. Tapi tidak sekaligus.

Menolak Photoshop

Hingga 2019, tidak ada desainer di KORUS. Dan hingga 2011, tidak ada yang mendengar tentang hal seperti Pengalaman Pengguna. Sebagai pengembang perangkat lunak yang menghargai diri sendiri, perusahaan berusaha untuk dengan cepat membawa produk ke pasar, dan analis dan pengembang bertanggung jawab atas penampilan dan perilaku antarmuka. Sebagian besar pengembang.

Oleh karena itu, ketika pada tahun 2011 seorang pembuat kode dengan keterampilan seorang desainer muncul di perusahaan, sebelum pengembangan ia hanya diizinkan pada tahap akhir.

Seorang spesialis baru (baca - tidak biasa) untuk KORUS menemukan skema pengembangan yang khas, di mana ia diizinkan untuk memindahkan piksel dan mengecat, ketika fitur utama sudah diterapkan. Kedengarannya seperti desain setelah pengembangan. Dan ini dijelaskan dengan sangat rinci di Rumah Sakit Jiwa, Tuan Cooper. KORUS dapat dianggap sebagai pahlawan buku teks dari ceritanya.

Photoshop atau editor grafis lain masuk ke proses pengembangan ini dengan susah payah. Sejak awal, kami lebih mengandalkan tata letak karena lebih mudah untuk diedit, terutama dalam menghadapi persyaratan yang terus berubah. Dan Anda bisa memberikan tata letak kepada pengembang. Merancang, mengatur huruf dan menginspirasi kecantikan pada saat yang sama jauh lebih efisien. Dengan pendekatan ini, menggambar di editor mana pun adalah tautan perantara yang tidak perlu, dan banyak yang mungkin akan setuju dengan itu di tahun 2011.

Penolakan alat desain membantu meletakkan jalur baru di atas skema yang sudah mapan dan mulai jauh ke desain antarmuka yang benar. Ketika waktu pengembangan terbatas, tata letak PSD menjadi hanya rekomendasi, tata letak lebih seperti seperangkat aturan, lebih sulit untuk berbalik dan melupakan kasus yang tidak terlihat. Atau pertimbangkan, berdasarkan ide Anda sendiri tentang kenyamanan.

Tata letak juga memungkinkan Anda untuk menyimpan komponen individual agar tidak membuang waktu di waktu berikutnya, dan halaman HTML pertama dengan komponen tersebut ditunjukkan di bawah ini:

Ini menjadi batu bata pertama untuk repositori kit masa depan pada AngularJs. Pada awalnya, formulir cetak dan halaman individual dari layanan manajemen dokumen elektronik kami (selanjutnya disebut sebagai Kurir) ditambahkan ke dalamnya.

Ketika repositori tumbuh, dan ada lebih banyak tata letak di dalamnya, itu disebut UIKIT dan kucing-ninja di logo:

Pada 2015, perusahaan kami melakukan semua upayanya untuk berinteraksi dengan Sberbank, dan timbul pertanyaan mengecat ulang layanan tersebut. KORUS telah berulang kali menggunakan fakta bahwa sudah ada pencapaian dalam komponen dan gaya: cukup untuk mengubah warna agar sesuai dengan gaya korporat Beeline, Alfa Bank, dll. Berkat pengalaman ini, Kurir dicat ulang hanya dalam satu jam.

Dan bayangkan, jika pada awalnya perancang mengecat ulang tata letak grafis, dan perancang tata letak kemudian mengubah gaya? Dua tugas - satu solusi: sudah tata letak di UIKIT.

Bagaimana cara menghentikan mereka dari melakukan "buruk"?

Anehnya, selama 4 tahun pertama, hanya satu spesialis yang menangani semua tugas desain. Perkembangan di UIKIT diselamatkan, ini adalah penghemat waktu yang serius: desainer berhasil terhubung ke pengembangan sedini mungkin dan mencegah solusi antarmuka yang mengerikan.

Perluasan portofolio produk secara alami menyebabkan munculnya desainer tata letak baru. Ini memungkinkan ninja paus mengalokasikan lebih banyak sumber daya, dan tata ruang menjadi lebih interaktif. Tidak cukup untuk menautkan tautan HTML satu sama lain, kami menginginkan lebih. JQuery dan AngularJs digunakan. Prototipe langsung dinilai oleh para analis. Anda dapat mengklik semua negara bagian, mengambil tangkapan layar, dan menempelkannya ke TK.

“Kami melakukan sesuatu yang mirip dengan BEM, tetapi bukan BEM, dan dengan demikian pergi ke penyatuan tata letak di semua proyek”

Namun, jika semuanya jelas dengan perancang tata letak, dapatkah perancang tata letak hanya dipandu oleh pedoman dan pengalamannya yang kaya dalam mengatur berbagai tata letak untuk merancang sesuatu yang sederhana? Desainer tata letak dapat membuat antarmuka sebagai desainer, dan tidak menunggu seseorang memberi tahu Anda di mana harus meletakkan tombol. Mereka telah melihat tombol ini di toolbar berkali-kali. Desainer menyebut ketidakjelasan ini. Dan KORUS membutuhkan kasus-kasus kehidupan yang dapat dimengerti, yang disebut "desain alami." Dan jika Anda ingat bahwa produk dari satu ekosistem biasanya mirip satu sama lain, dan keunikan hanya merugikan mereka, maka jawaban saya adalah ya.

Munculnya UIKIT telah mempercepat proses pembuatan prototipe. Demonstrasi tata letak yang dapat diklik digunakan untuk pra-penjualan, koordinasi detail dengan pelanggan sebelum dimulainya proyek. Dan akhirnya, para pengembang menerima input yang diperlukan tentang perilaku antarmuka, agar tidak muncul sendiri secara langsung dalam proses pengkodean.

“Bagian depan memudahkan mereka. UIKIT sebagian membuat saya melakukannya dengan benar. "

Interaktivitas dengan AngularJs

Justru skema kerja yang datang ke KORUS setelah munculnya UIKIT: kebutuhan muncul, diformalkan dalam persyaratan teknis, desainer tata letak segera mewujudkannya dalam prototipe web.
Tetap untuk mendapatkan beberapa kerangka kerja dari kedalaman Internet, mengecatnya kembali di bawah label hijau dan menerapkannya dalam produk untuk membuat tidak hanya tombol dan header yang seragam untuk semua layanan.

Selain kontrol kerangka kerja, UIKIT diisi ulang dengan seperangkat ikon, widget, pengembangan dan gaya sendiri.

Jika ada tugas untuk tata letak halaman yang mirip dengan sesuatu dari layanan kami, kami mengambil yang sudah jadi, mengubah konten menjadi persyaratan, dan pembungkus dan logika tetap sama. Transisi antar halaman dapat dikonfigurasi, semua tombol dan bidang dapat diklik, kita dapat menunjukkan validasi, modal windows, keberhasilan unggah file. Kami dapat menunjukkan seluruh jalur pengguna dari awal hingga akhir dengan skenario positif dan negatif, dalam representasi seluruh model peran.

Antarmuka seragam

Menggunakan kembali bagian antarmuka pra-desain bukanlah hal baru untuk tahun 2015. Bahkan sepuluh tahun yang lalu, desainer tata letak di studio web dengan demikian mengoptimalkan proses mereka agar tidak mengeset ulang elemen yang sama setiap waktu. Kami tidak menemukan galaksi, tetapi ini hanya permulaan.

Jelas bahwa semakin banyak kami menambahkan tata letak ke UIKIT, semakin banyak kami membahas kasus yang ada dan selanjutnya dapat menerapkannya untuk proyek baru.

Perlu tata letak pendaftaran pengguna baru? Kami sudah memiliki ini: kami menyesuaikannya dengan kebutuhan bisnis, menghabiskan tidak lebih dari beberapa jam, dan sekarang - pendaftaran siap untuk ditransfer ke pengembang, tetapi dalam layanan yang berbeda.

Perlu tabel dengan data perusahaan? Ini kebaikan dalam layanan kami dalam jumlah besar: CRTL + C CTRL + V.

Yang paling menarik untuk tim tata letak dalam hal ini adalah gaya seragam. Pedoman adalah hal yang menentukan kepada kita seperti apa elemen atom dari sebuah antarmuka. Tampaknya masuk akal untuk memperbaiki gaya komponen ini dan mengubahnya hanya sebagai pilihan terakhir. Tidak peduli berapa banyak tata letak produk baru yang kami perkenalkan di UIKIT, gaya dalam komponen ada di satu tempat. Untuk kebutuhan proyek itu sendiri, ada css produk terpisah di mana Anda dapat menyesuaikan sesuatu.

Di bawah pengaruh pedoman, pengoptimalan, dan pengalaman kami sendiri, kami selalu siap sedia:

Input, tombol, dropdown;
Tabel, sisi, menu, bilah alat;
Bentuk, garis waktu, jendela modal;
Seluruh aliran memproses beberapa jenis aplikasi pinjaman atau membuat dokumen pembayaran.

Dari semua ini, sudah dimungkinkan untuk merakit antarmuka lengkap, dan berkat AngularJs, di layout, interaktivitas produksi tercapai, yang sangat populer di kalangan pelanggan.

Secara rahasia, saya akan mengatakan bahwa kami melakukan demo untuk pelanggan beberapa kali di UIKIT, karena kami memiliki test stand yang jatuh tepat sebelum demo.

Sirkuit kerja

Waktu berlalu, inspirator ideologis dan pencipta UIKIT menjadi direktur seni, semakin banyak proyek. Siapa yang akan melanjutkan pekerjaan hebat ini - merancang antarmuka dalam HTML menggunakan fungsi yang sudah dikembangkan? Desainer tata letak, tentu saja.

Untuk mengatakan bahwa desainer tata letak sangat senang tentang prospek bekerja sama dengan analis dan secara mandiri memikirkan kegunaan adalah sedikit trik. Namun, semua orang (saya?) Terbiasa dengan kenyataan bahwa perancang tata letak adalah spesialis yang menerima tata letak dari perancang, memotong dan mengubahnya menjadi halaman web. Desain interaksi menambahkan di tempat-tempat kerja mekanik yang tidak biasa, belum dipelajari tanggung jawabnya. Tetapi kami terbantu oleh kehadiran seseorang yang terus-menerus merevisi pekerjaan kami, menyarankan cara melakukannya dengan benar. Dan dia tidak hanya meminta, tetapi merujuk pada sumber-sumber resmi, sehingga kami juga membacanya dan membuat lebih sedikit kesalahan. Direktur seni terus-menerus menunjuk ke beberapa undang-undang Fitts, kemudian ke aturan penulisan bisnis, atau untuk memformat teks, menekankan unsur-unsur ... Kami menolak, tetapi menyerap informasi.

Hari ini kita bisa meletakkan dua tombol hijau berdampingan - besok kita tidak melakukan itu karena kita tahu: tombol dengan aksi target harus satu per halaman.

Hari ini, semua input macet dengan lebar yang sama, besok kami akan membuat bidang untuk TIN persis untuk konten. Jadi pengguna membaca lebih baik berapa lama data diharapkan darinya.

Proses mulai berjalan. Desainer tata letak mengumpulkan antarmuka, mengandalkan persyaratan bisnis dari analis, mengoordinasikan keputusan mereka dengan direktur seni, dan memberikannya kepada pengembangan.

Kami tumbuh sebagai desainer, belajar membuat keputusan, memupuk kemandirian diri sendiri untuk memperluas berbagai tugas di mana perendaman yang mendalam dari direktur seni tidak diperlukan.

Di suatu tempat dalam pipa muncul GitLab, tinjauan tata letak, meningkatkan visualisasi menggunakan js.

Jika perancang tata letak dihadapkan dengan tugas yang sulit dan tidak standar, direktur seni terhubung dan membantu untuk menemukan solusi. Saat itu ia sendiri merancang konsep produk baru.
Kami menyediakan 2-3 pilihan untuk memahami masalah ini, dan ia memilih satu dan mengatakan bagaimana itu dapat diperbaiki. Kadang-kadang, dia hanya mengatakan "ok," dan kami senang memahami bahwa kami telah mencapai sasaran. Namun, terkadang kami tidak memiliki umpan balik yang cukup untuk memahami bagaimana solusi kami nyaman dan dapat dipahami oleh pengguna, dan bahkan apakah itu jelas bagi direktur seni. Keraguan membuat kami mencoba berulang kali untuk menafsirkan persyaratan dalam beberapa cara.

Pemimpin kami memiliki pendapatnya sendiri tentang ini. Dia mengatakan bahwa dengan cara ini membuat kami berpikir. Masing-masing dengan caranya sendiri mengevaluasi proses. Saya pikir saya telah menghemat waktu saya dan dia. Seperti, izinkan saya menunjukkan kepada Anda tiga opsi sekaligus agar tidak berjalan tiga kali. Semacam tes A / B / C pada artileri untuk saya.

Meskipun, tentu saja, kami telah belajar banyak (lihat saja bagaimana perancang tata letak ini mengutip buku desain).

Seperti yang Anda pahami, dalam proses ini tidak ada tempat untuk berpikir rinci tentang analisis UX dan UX. Meskipun dengan alat seperti itu akan menguji dan menguji. Apa yang direktur seni awalnya dimasukkan ke dalam tata letak pada tahap prototyping digunakan. Semua fitur baru telah ditemukan dan dijelaskan oleh para pemangku kepentingan, manajer dan analis. Bukan coders. Ini adalah minus, karena kami tidak selalu dapat secara meyakinkan menjelaskan mengapa solusi yang sudah ditemukan oleh bisnis tidak cocok.

Pada output, pengeset huruf menerima beberapa deskripsi dalam Confluence dari analis - seperti ini:

:
:
: « »
« » checkbox .
tooltip .

Mocap impersonal di kotak di Basilika bahkan diterapkan pada tugas untuk menunjukkan posisi dan tujuan elemen-elemen pada halaman.

Kadang-kadang kami menerima tugas dari analis dengan kata-kata berikut:

Meskipun UIKIT memasuki tumpukan alat perusahaan, tanpa analisis UX, tidak ada argumen berat yang menentang pengambilan keputusan antarmuka apa pun, kecuali kata terakhir direktur seni. Tetapi jalan kita menuju interaksi yang sempurna terus berlanjut.

Seiring waktu, kami dapat menemukan bahasa yang sama dan membagi area tanggung jawab untuk kualitas dan kegunaan antarmuka.

Secara total, seluruh proses pembuatan tata letak produk tampak seperti ini:

- , UIKIT. , , , ;
, . , -, , . ;
Perancang tata letak mengambil perbatasan proyek baru dan menambahkannya, membawanya di bawah tugas teknis yang lebih rinci. Jika pada awalnya pelanggan ingin mengisi aplikasi dalam satu langkah, dan kemudian dalam dua, perancang tata letak dengan mudah menerapkan ini. Di masa depan, tata letak bisa berubah melampaui pengakuan, dan dari versi aslinya hanya ada gaya yang, pada prinsipnya, tidak berubah. Semua ini secara bertahap, langkah demi langkah dibahas dengan art director. Pada tahap pertama, prototipe dialokasikan dari dua hari hingga beberapa minggu, kemudian pengembangan bisa berlangsung selama bertahun-tahun. Dalam proyek semacam itu, manajer kami sesekali “menggerebek” dengan desain ulang untuk mengimbangi peningkatan massa kritis fitur dan memikirkan kembali antarmuka dengan cara yang baru.

Butuh waktu 2 tahun bagi tim UIKIT untuk datang ke proses ini.

Demonstrasi visual

Pada semua tahap, tata letak tersedia untuk demonstrasi kepada pelanggan dan tim. Ini adalah salah satu keunggulan terkuat UIKIT.

Apa yang bisa lebih nyaman dan dimengerti bagi pelanggan selain mengikuti tautan dan mengklik sendiri tata letak, melihat perilaku antarmuka? Dia dapat mengevaluasi dan memperbaiki teks, yang kemudian diproduksi. Kadang-kadang tata letak yang dibuat di pelanggan mengubah ide tugas, dia bisa mengerti bahwa idenya tidak layak dan menyetujui perubahan. Jika dengan kata-kata dia yakin bahwa kuesionernya dengan 150 bidang akan dengan mudah masuk ke antarmuka, maka dalam tata letak dia jelas melihat bahwa itu memerlukan perbaikan. Yang paling penting, melempar profil ini di UIKIT murah.

Contoh kecil:

Persyaratan pertama dan terakhir yang tak terbantahkan:

Kompromi terlihat dalam proses:

Seseorang mungkin memperhatikan bahwa Axure, Figma, Marvel memiliki semua keunggulan UIKIT yang dijelaskan oleh saya ... Tetapi beberapa dari mereka tidak ada pada tahap pemilihan teknologi, yang lain ditolak sebagai tautan tambahan antara desain dan tata letak.
UIKIT adalah peluang untuk mengumpulkan bahkan bukan prototipe, tetapi antarmuka produk yang sudah jadi, yang kemudian front-end akan mulai beroperasi.

Pengakuan Perusahaan

Pada tahun 2020, UIKIT memiliki 38 mock-up proyek yang ada, dimana 13 sedang dalam pengembangan. Ini adalah pengalaman luas selama empat tahun, di mana Anda dapat menemukan seribu solusi dari spesialis yang berbeda, dari art director hingga tester. Mereka semua mematuhi aturan umum css dan pembuatan halaman.

Seiring waktu, kami harus menghubungkan plugin baru, mengatur beberapa singkatan UIKIT (internal kami untuk pengembangan saat ini dan eksternal untuk versi tetap, yang akan dikembangkan), menambahkan versi gaya, mulai mengimpor paket gaya ke artifactory dan nexus, dan kemudian memfasilitasi paket npm, Mentransfer file media ke CDN. Lalu kami beralih ke SASS. Kumpulan tata letak situs yang tampaknya biasa berubah menjadi proyek penuh dengan penerapannya, pembaruan dari tim, dan diskusi aktif tentang peningkatan di masa depan. Yaitu, proyek kami, yang pada awalnya hanya bantuan untuk prototyping cepat, berubah menjadi produk lengkap dengan proses yang melekat.

UIKIT disukai oleh pelanggan, analis, pengembang, dan kemudian penguji juga menghargainya.

Suatu hari, saya hanya menerima pertanyaan penting dari tim pengembangan klien kami:

“Kapan letak tata ruang di paus? Mereka jauh lebih nyaman daripada persyaratan. "

Bagi saya, sebagai perancang tata letak, frasa ini tersanjung. Tapi lebih baik tidak melakukannya, baca persyaratannya.

Sampai saat yang penting ini, tim UIKIT dengan keras kepala pergi ke pengakuan instrumen bahkan di antara rekan-rekannya. Nilai bisnis dari proyek ini adalah nol, yang berarti pengembangannya sepenuhnya terletak pada pengetik. Selain tugas saat ini, mereka terus mengoptimalkan pekerjaan mereka. Saya suka melihat seberapa banyak ninja kit kami telah berkembang selama bertahun-tahun, tidak kalah dengan kekuatannya pada Sosok modern, tetapi berkat tata letak yang telah selesai, dan melampauinya.

Kisah saya berikutnya adalah tentang detail teknis dalam mendesain menggunakan UIKIT, tentang bagaimana sirkuit kami telah bertahan lebih lama, dan langkah apa yang kami ambil untuk berkembang.

Desain produk tanpa desainer