Mengatasi kurangnya keterampilan desain UI umum di pengembang [ditutup]


17

Saya telah diberitahu, dan telah menemukan untuk diri saya sendiri, bahwa banyak pengembang tidak pandai desain UI (saya tidak tahu seberapa benar ini) tetapi setidaknya benar tentang saya .

Dalam pengembangan web, keterampilan pengembangan kode yang baik tidak cukup tanpa keterampilan hebat dalam desain UI untuk mengikutinya.

Jadi bagi saya, dan banyak pengembang seperti saya, yang hanya memiliki setengah dari itu (keterampilan pengembangan yang baik) bagaimana kita harus menyelesaikan setengah dari yang lain selain membayar untuk seorang desainer?

Apakah menggunakan templat web Open Source dengan sedikit modifikasi solusi terbaik untuk ini, atau ada opsi lain?


12
"Sebagai orang UX dengan keterampilan pengembangan yang buruk, bagaimana saya harus mengembangkan situs, tanpa membayar pengembang?"
Steven Evers

Anda harus melihat apa yang saya kerjakan pada bencana UI sekarang. Saya tidak berpikir ada orang yang mengerjakan proyek ini pernah melihat panduan desain UI. Hal yang sama berlaku untuk proyek saya sebelumnya, hanya pada proyek yang saya lakukan masalah dan melibatkan desainer grafis, tetapi ada beberapa bagian dari kode yang di luar kendali saya yang benar-benar mengerikan.
Skizz

7
Pekerjakan seorang desainer. Itu satu-satunya cara untuk memastikan.
SF.

1
Pertanyaan ini bermasalah. Anda mungkin juga berbicara tentang mengatasi kurangnya keterampilan pemrograman pada desainer.
Alex Feinman

Jawaban:


11

Saya seorang pengembang yang juga tidak begitu hebat dalam desain. Saya berusaha sekuat tenaga, ketika mengerjakan sebuah proyek di mana saya harus mendesain, untuk menjaga hal-hal sesederhana mungkin. Saya mengambil pendekatan dan desain yang sangat logis hanya untuk pengalaman pengguna. Saya tidak bisa membuatnya terlihat sangat indah, tetapi saya bisa membuatnya ramah pengguna dan relatif menyenangkan bagi mata.

Saya telah membaca beberapa buku ini: http://www.uxbydesign.org/2009/06/24/20-user-experience-books-you-should-own/ dan mereka benar-benar membantu saya.

sunting favorit saya pada daftar itu adalah Jangan Bikin Aku Berpikir: Pendekatan Akal Sehat untuk Kegunaan Web, Edisi ke-2 oleh Steve Krug


Saya tidak tahu mengapa pengembang merasa mereka harus menjadi segalanya untuk semua orang setiap saat. Saya sudah menjadi pengembang, perancang, arsitek, analis bisnis, dukungan produksi, dan QA. Ini masih belum cukup dan saya harus menjadi DBA sekarang juga.
maple_shaft

3
Baik sebagai freelancer Anda juga perlu memiliki semua keterampilan sendiri, atau dipaksa untuk melakukan outsourcing bagian dari suatu proyek. Jika Anda sama sekali tidak dapat melakukan sesuatu, maka sangat buruk Anda harus mencari orang lain. Tetapi jika Anda dapat mempelajari keterampilan maka mengapa tidak, dan buat diri Anda mampu menghasilkan lebih banyak dan menjadi pengembang yang lebih menarik dari perspektif klien potensial.
Sydenam

2
Saya tahu dan setuju dengan Anda, saya hanya merasa jijik dengan apa yang terjadi di industri ini. Saya dikelilingi oleh orang-orang yang membenci pekerjaan mereka dan terlalu banyak bekerja, dan punya ide bodoh bahwa mereka berharap akan menjadi Angry Birds berikutnya dan mereka bertanya kepada saya apakah mereka dapat membayar satu India $ 6 / per jam untuk melakukan SEMUA PEKERJAAN dan hanya membuka sumber untuk semuanya tanpa berkontribusi karena sumber terbuka itu GRATIS. Kemudian mereka berharap menghasilkan jutaan dan berhenti dari pekerjaan mereka. Para pemegang ide-ide buruk ini berharap semakin banyak dan lebih banyak lagi tanpa uang. Itu hanya membuatku sakit.
maple_shaft

5

Desain (apa pun) adalah negosiasi antara kebutuhan berbagai pemangku kepentingan (pelanggan, pengembang, pengguna). Tak satu pun dari para pemangku kepentingan biasanya dalam posisi yang baik untuk menciptakan desain terbaik karena mereka cenderung memahami kebutuhan mereka sendiri dan menempatkan mereka di atas kebutuhan para pemangku kepentingan lainnya. Seorang perancang yang baik dapat mengidentifikasi kebutuhan berbagai pemangku kepentingan - seringkali membutuhkan yang tidak disadari oleh pemangku kepentingan sendiri - dan menghasilkan solusi yang bekerja untuk semua orang.

Anda mungkin sudah sering melihatnya sendiri. Pengguna berpikir tentang bagaimana mereka harus berinteraksi dengan suatu sistem, biasanya dalam hal beberapa sistem lain yang sudah mereka kenal. Pengembang kebanyakan berpikir dalam hal bagaimana sistem bekerja. Pelanggan biasanya menginginkan sesuatu yang akan menyelesaikan semua masalah mereka, atau mereka ingin menyelesaikan beberapa masalah yang sangat spesifik dengan biaya paling murah.

Untuk menjadi perancang yang baik, Anda harus belajar berhenti berpikir ke depan tentang bagaimana Anda akan menerapkan sesuatu. Sebagai gantinya, Anda harus fokus pada apa yang dikatakan oleh pemangku kepentingan lain tentang apa yang mereka butuhkan dan inginkan, dan Anda harus bisa membaca yang tersirat. Seperti pengembang, pelanggan dan pengguna sering memiliki beberapa solusi yang ada dalam pikiran, dan mereka cenderung menggambarkan solusi itu daripada persyaratan yang mendasarinya. (Yang mengatakan, penting untuk menyadari bahwa kadang-kadang pelanggan berarti apa yang mereka katakan ketika mereka memberi tahu Anda apa yang mereka inginkan; jika Anda tidak yakin, tanyakan.)

Lebih dangkal, desain estetika UI juga merupakan sesuatu yang bermasalah dengan beberapa pengembang. Saya pikir itu sebagian karena pengembang perangkat lunak sering tidak memiliki banyak pelatihan estetika - siswa CS mungkin tidak punya banyak waktu untuk kelas seni. Ini juga sebagian lagi karena kita lebih tertarik pada bagaimana sesuatu bekerja daripada apa yang kita lihat; kami hanya tidak peduli jika sudut tombol memiliki jari-jari 9-pixel atau 10-jari-jari. Kedua faktor ini pasti terkait. Kadang-kadang Anda dapat mengatasinya dengan mengandalkan solusi kalengan dalam bentuk kerangka UI, dan menggunakan komponen pra-desain memiliki keuntungan menyatukan pekerjaan Anda secara visual dengan aplikasi lain pada sistem yang sama. Anda dapat meningkatkan keterampilan estetika Anda dengan membaca, melihat pekerjaan orang lain, dan memperhatikan detail visual yang mungkin Anda abaikan di masa lalu. Anda juga harus mencoba memahami logika di balik perbedaan visual: Apakah tombol sudut persegi berarti sesuatu yang berbeda dari tombol bulat? Bagaimana warna digunakan? dll.


1
terima kasih atas jawaban gr8 apakah ada sumber daya, buku, situs berbicara tentang topik ini: "logika di balik perbedaan visual: Apakah tombol sudut persegi berarti sesuatu yang berbeda dari tombol bulat? Bagaimana warna digunakan? dll."
Ali

Di samping catatan dan semata-mata karena penasaran, apakah tombol sudut persegi berarti sesuatu yang berbeda dari tombol bulat? Apakah ini sudah dialamatkan pada UX SE?
Sean Hanley

Warna dan tombol bulat adalah masalah grafis dan benar-benar tidak ada hubungannya dengan UX. Pertanyaan yang lebih baik untuk UX adalah "apa yang pengguna pikirkan tentang situs kami dengan skema warna x vs skema warna y" dan penempatan tombol tersebut.
Nic

@ Yadyn, itu tergantung pada konteksnya. Tombol geometri dapat memberi pengguna petunjuk tentang fungsi dan perilaku: tombol terpojok membentuk kelompok yang menarik dan sering bekerja dengan baik untuk memilih opsi atau mode. Tombol bulat tidak menumpuk dengan baik dan sering menunjukkan operasi yang berbeda. Tetapi jenis isyarat visual ini hanya membawa makna jika digunakan secara konsisten dalam suatu aplikasi atau (lebih baik) di seluruh GUI.
Caleb

@ Melee, saya datang pada ini dari sudut pandang pengembangan aplikasi. Ada cenderung lebih banyak variasi dalam antarmuka di web, dan saya setuju bahwa lebih sulit untuk membuat kasus ini dalam konteks itu. Tetapi jika Anda menggunakan aplikasi desktop biasa di Mac dan berkata "Tombol biru tampak hebat - mari kita buat semua tombolnya biru!" Anda akan membuat banyak kebingungan bagi pengguna karena pengguna melampirkan makna pada warna dan bentuk tombol. Contoh di sini (Apple HIG): tinyurl.com/6agv54v
Caleb

3

Berikut adalah beberapa hal yang saya temukan membantu saya:

  • Perhatikan apa yang Anda suka / tidak suka di perangkat lunak lain. Kami adalah programmer, kami menghabiskan sebagian besar hidup kami di depan komputer. Coba dan catat apa yang Anda sukai / benci saat menggunakan perangkat lunak. Tidak masalah apakah itu perangkat lunak komputer, permainan video, perangkat seluler, dll. Cobalah dan awasi apa yang nyaman dan mudah digunakan, dan apa yang tidak.

  • Temukan alat sketsa yang mudah digunakan untuk membuat sketsa UI untuk Anda dan pengguna Anda. Saya suka menggunakan Balsamiq karena cepat, sederhana, dan versi web gratis untuk digunakan.

  • Ingatlah bahwa Anda tidak perlu menemukan seseorang yang berspesialisasi dalam desain perangkat lunak untuk membantu Anda merancang sesuatu - pengguna mana pun akan melakukannya. Saya sering menjalankan sketsa saya oleh beberapa orang yang sama sekali tidak terkait dengan proyek hanya karena saya tahu mereka ada di sekitar perangkat lunak sepanjang hari dan dapat memberi tahu saya jika ada sesuatu yang terlihat OK atau ramah pengguna. Hanya perlu diingat bahwa mereka akan sering memberi Anda ide-ide gila tentang apa yang harus dilakukan, dan Anda harus tahu apa yang akan "keren" untuk dilakukan, dan apa yang sebenarnya akan meningkatkan produktivitas.

  • Jangan ragu untuk bertanya di /ux// untuk pertanyaan terperinci


1
Saran bagus, alat bagus
NoChance

2

Sejujurnya, merancang UI semuanya merupakan hal yang berbeda. Pengembang selalu memikirkan desain yang halus dan tidak terlalu kreatif dalam hal mendesain. Pendekatan yang pasti saya rasakan adalah mempertahankan pengembang yang berbeda untuk desain UI. Meskipun menambah biaya tetapi pasti akan membantu Anda mencapai hasil yang lebih baik.

Untuk seseorang yang melakukan kedua hal sendiri, tidak pernah benar-benar memberikan hasil terbaik Jadi, IMHO dua aspek berbeda ini harus ditetapkan untuk dua pengembang berbeda. Sedikit pengetahuan tentang HTML dan CSS untuk menguliti dan pengembangan tema direkomendasikan dalam kasus CMS yang berbeda, tetapi ketika Anda perlu mengembangkan desain yang sama sekali baru, konsultasikan dengan desainer UI.



2

Desain UI bukanlah sesuatu yang alami bagi banyak orang. Namun, saya baru-baru ini menjadi jauh lebih baik dengan mengikuti beberapa prinsip mudah.

  1. Jangan panik, itu tidak sesulit yang Anda pikirkan.

  2. Modelkan struktur data dan mesin Anda terlebih dahulu. Buat model yang jelas dan sesuai dengan dunia nyata. Jelas ini mengasumsikan bahwa Anda telah meluangkan waktu untuk memahami apa yang dibutuhkan pelanggan.

  3. Sekarang, dengan selembar kertas dan pensil, duduk dan mulai menggambar tata letak layar logis. Ini biasanya hanya menyajikan model data Anda kepada pengguna secara terorganisir. Tujuan Anda seharusnya sederhana:

    Sebuah. Meniru lingkungan tempat aplikasi akan digunakan. Misalnya, jika itu adalah aplikasi windows, ia perlu berperilaku seperti aplikasi windows, jika itu adalah aplikasi web, ia harus berperilaku seperti aplikasi web serupa yang lebih populer daripada aplikasi Anda.

    b. Tujuan Anda adalah untuk memandu pengguna melalui model data Anda dengan cara yang MEREKA prediksi. Antarmuka pengguna dirancang dengan baik ketika pengguna melakukan sesuatu dalam aplikasi Anda dan melakukan apa yang mereka harapkan.

    c. Ini membutuhkan waktu dan itu adalah kurva belajar, tetapi siapa pun dapat melakukannya.

  4. Jangan khawatir tentang grafik, yaitu tombol, latar belakang, dll ... satu-satunya tujuan Anda pada saat ini adalah tata letak halaman yang logis.

  5. Anda memang perlu menguasai gui lib yang Anda gunakan apakah itu html, gtk, cocoa, android, Windows. data. Setiap pengembang harus dapat melakukan setidaknya ini.

  6. Tidak ada rasa malu untuk mendapatkan desainer grafis untuk mengambil alih dari sini. Tetapi Anda setidaknya harus bisa melewati langkah 5. Ini adalah 95% dari beban kerja untuk seluruh aplikasi.

Berikut adalah artikel yang membantu yang mengubah saya dari desainer gui miskin menjadi desainer gui yang jauh lebih baik.

http://www.joelonsoftware.com/uibook/fog0000000249.html


Saran yang bagus, tetapi saya tidak setuju dengan poin 2. Saya juga akan melibatkan pengguna dalam langkah-langkah di atas lebih lanjut.
NoChance

1
@Emmad Jika Anda menganggap aplikasi Anda sebagai serangkaian operasi yang dilakukan pada data, satu-satunya tujuan UI adalah menyediakan cara terorganisir untuk menerima input ke model data dan menampilkan model data. Alasan saya menempatkan 2 di sana adalah karena saya menemukan bahwa setelah memodelkan data, semacam UI hanya berlaku. Saya melakukan wawancara ekstensif dengan pengguna akhir sehubungan dengan data seperti apa yang ingin mereka lakukan? Itulah aplikasinya. Saya kemudian meletakkan barang-barang di halaman dan kemudian bertanya, sekarang bagaimana Anda ingin ini terlihat? Itu tidak pernah salah.
Jonathan Henson

1
Terlebih lagi, ketika saya mengizinkan desainer grafis untuk menggambar gui, itu selalu berakhir dengan bencana. Mereka tidak tahu bagaimana data harus diorganisasikan dan mereka hampir tidak pernah tahu apa itu dan apa yang tidak mungkin.
Jonathan Henson

Terima kasih telah menjelaskan, saya setuju dengan Anda bahwa desainer grafis tidak boleh ditugaskan dengan manajemen informasi.
NoChance

1

Anda juga dapat mencari contoh sukses situs "serupa" untuk mendapatkan ide tata letak, grafik, dan desain. Dengan sedikit penyesuaian dalam program cat favorit Anda, Anda dapat meminjam banyak ide dan menjadikannya milik Anda. Jangan menyalin langsung - itu bukan hanya perilaku buruk, mungkin juga ilegal dalam banyak kasus.

Setelah Anda meminjam beberapa kali, Anda akan mulai merasakan desain situs sukses yang lebih baik, dan Anda akan mengenal alat untuk membuat desain itu juga (dengan tweak kecil Anda).


1

Dengan diperkenalkannya HTML, membuat situs sederhana yang tidak terlihat jelek menjadi tantangan. Meskipun Anda mungkin memiliki konsep, dibutuhkan beberapa trik, alat, grafik siap pakai dan pengetahuan CSS untuk melakukannya dengan benar. Juga, teknik kegunaan dan faktor manusia lainnya yang mempengaruhi proses desain diperlukan untuk menghasilkan halaman yang terlihat tajam.

Pengembang menghabiskan sebagian besar waktu mereka berjuang mempelajari bahasa yang kompleks, OOP, ORM, SQL, T-SQL, dll. Mereka juga jarang berinvestasi dalam alat untuk membuat situs web (kebanyakan mahal).

Akibatnya, banyak pengembang menderita dari ketidakmampuan mereka untuk menghasilkan halaman web yang menakjubkan. Saya percaya bahwa jika Anda mempelajari alat-alat yang diperlukan, Anda akan dapat membuat halaman yang bagus juga.

Penting juga untuk mengetahui apa gulungan Anda dalam proses pengembangan aplikasi. Anda mungkin menemukan bahwa desain web bagus untuk memiliki keterampilan daripada keterampilan wajib. Dalam proyek besar, itu seharusnya bukan tugas programmer karena alasan yang disebutkan di atas setidaknya.

Saya menemukan bahwa alat ini adalah alat yang hebat, dapat membantu Anda:

Artis

Lihatlah dan coba demo, ini sangat bagus.


1

masih dalam pengembangan web keterampilan pengembangan yang baik tidak cukup tanpa keterampilan hebat dalam mendesain

Saya tidak tahu apakah pernyataan ini benar, saya pikir itu tergantung di mana Anda bekerja.

Misalnya perusahaan yang lebih kecil mungkin akan mengharuskan Anda untuk lebih fleksibel dengan keahlian Anda, sedangkan perusahaan besar mungkin tidak memiliki harapan yang sama dan Anda benar-benar dapat menghabiskan seluruh waktu Anda berkembang sementara tim desain bekerja pada perancangan.

Microsoft sebenarnya telah memperbarui perangkat mereka untuk menyoroti pemisahan yang jelas antara pengembang dan desainer. Mereka telah memperkenalkan Expression Blend dengan WPF yang sekarang berarti bahwa pengembang dapat bekerja pada fungsionalitas perangkat lunak dan orang lain dapat melakukan desain untuk itu. Mereka berdua menggunakan alat yang berbeda, keduanya dapat bekerja pada proyek pada saat yang sama tetapi satu berfungsi dan satu mengerjakan desain.

Pengembang menentukan titik data dan perancang menampilkannya.


terima kasih, saya memikirkannya saat melakukannya tanpa tim saat melakukannya sebagai freelancer sendiri!
Ali

Jelas tidak benar dengan perusahaan besar. Ini memiliki tim desain dan pengembangan yang terpisah, dan keduanya hanya membutuhkan pengetahuan minimal satu sama lain (tahu apa yang mungkin, tahu apa yang rusak).
SF.

1

Ingatlah bahwa desain juga dapat diuji, bukan hanya kode. Mulai dari yang sederhana, coba desain Anda pada sekelompok kecil orang, catat tanggapan mereka dan mulailah dari sana. Ini dapat membantu Anda mengidentifikasi masalah dengan desain Anda dan memberi Anda ide tentang apa yang bisa / harus dilakukan berbeda. Kemudian merevisi desain dan beralih.


0

Anda hanya perlu memalsukannya dan menyalin desain lainnya. Hindari sesuatu yang mewah kecuali satu atau dua fitur yang akan bermanfaat besar bagi pengguna. Ikuti beberapa praktik dasar membatasi font, warna, dan kekacauan.

Jangan takut untuk mengirim pertanyaan di UI.stackexchange.com


+ 1- Poin bagus tentang batasan warna, dll. Tanda UI seorang programmer biasanya berlatar belakang neon dengan tanda kedip di sekitar semua tombol dan tag tenda di sekitar yang lain. Situs web yang terlihat bagus menggunakan default (latar belakang putih, font biasa, dll.) Untuk 90%, dengan beberapa penyimpangan keren.
Morgan Herlocker

0

Meskipun ini bukan bidang keahlian Anda, saya pikir selalu menarik untuk mempelajari cara membuat UI. Saat ini sebagian besar halaman web sangat dinamis dan mengetahui beberapa keterampilan UI pasti akan membantu ketika membuat komponen dan mengatur interaksi mereka dengan elemen halaman Anda. Saya datang dari latar belakang pengembangan backend-only dan saya terkejut melihat betapa banyak yang terlibat ketika membuat antarmuka.

Ada buku yang sangat bagus yang saya baca tentang desain web dan yang ditujukan untuk pengembang:

Desain Web untuk Pengembang: http://pragprog.com/book/bhgwad/web-design-for-developers

Ini adalah buku yang mudah dibaca yang menyentuh semua fase saat membuat antarmuka: dari sketsa polos dan prototipe UI hingga membuat desain dengan HTML + CSS.

Untuk lebih meningkatkan keterampilan UI Anda, saya juga merekomendasikan screencast terbaru PeepCode dengan Ryan Singer: http://peepcode.com/products/ryan-singer-ux


0

Saya pikir mengambil beberapa dasar-dasar UX / UI / grafik / tipografi tentu saja merupakan upaya yang berharga. Tentu saja Anda tidak selalu memiliki tim spesialis yang "serba". Banyak kali orang harus memakai beberapa topi. Pengembang yang baik akan melihat nilai dalam menghabiskan waktu mempelajari hal-hal di luar domainnya dan setidaknya harus bisa mengenali pekerjaan yang baik dalam desain.

Namun, ada sesuatu yang bisa dikatakan untuk apa yang desainer lakukan. Seorang pengembang hanya dapat melakukan begitu banyak di bidang desain (diakui beberapa lebih dari yang lain). Secara khusus, proyek-proyek besar yang dihadapi publik yang menjangkau ceruk sempit sangat diuntungkan dengan mempekerjakan para profesional desain yang sebenarnya. Dan saya tidak hanya bermaksud orang-orang yang dapat berkeliling kode warna css dan html. Maksud saya orang-orang yang telah bertahun-tahun mempelajari hal-hal seperti tipografi, yang telah membaca dan memahami buku Josef Alber tentang warna , yang dapat membuat sketsa yang indah dengan arang yang hancur di atas kertas koran. Ini adalah keterampilan yang berharga dan proyek yang mengenali itu dan yang dapat menempatkan keterampilan ini untuk penggunaan terfokus memiliki keunggulan dalam persaingan.

Yang mengatakan, ada beberapa bidang di mana desainer dan pengembang dapat tumpang tindih keterampilan mereka. Terutama UX dan subdomainnya, UI. Saya merekomendasi ...


0

Pekerjakan seorang profesional.

Serius, UI dari pengembang memiliki reputasi buruk. Ini bukan karena pengembang di bawah rata-rata di desain, melainkan karena pengembang di bawah rata-rata dalam meminta bantuan.

Seorang pengembang memiliki kecenderungan untuk menghadapi setiap tantangan digital yang menghadang mereka.

(Saya adalah pengembang profesional selama 10 tahun dan istri saya adalah desainer antarmuka pengguna selama 20 tahun)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.