Maaf untuk mata pendarahan anda, tetapi ini penting.

Metodologi

50 Perkara Anda [Mungkin] Terlalu Reka Bentuk

Setiap PM: "Saya tidak marah, saya kecewa ..."

Cenderahati Kecil: Jika anda suka artikel ini, kongsi dengan rakan anda. Jika anda suka anak anjing, menyelamatkannya. Jika anda suka mayonis, simpannya.

Lihat, kita semua lupa untuk merancang sesuatu pada suatu masa. Itu betul-betul sejuk!

Baiklah, ia tidak sejuk ... tetapi seperti ... tidak apa-apa. Ia berlaku. Senarai ini akan menjadikan anda lebih baik. Atau sekurang-kurangnya lebih sedar. Atau mungkin anda hanya memberikannya beberapa kepak kerana anda mengenali seseorang menghabiskan masa mengkaji senarai ini dan meneruskan hidup anda. Nbd. Saya semua tentang kepak itu, dan bass itu. Dengan referensi Meghan Trainor dalam perenggan pertama, kita pergi ke permulaan yang gemuruh.

Ini hanya senarai perkara yang mungkin anda terlupa untuk mereka bentuk. Apabila anda berfikir betapa mudahnya aplikasi seperti Instagram atau Snapchat, mudah untuk melihat berapa banyak skrin, nyatakan, dan perkara yang masuk untuk membuat pengalaman pengguna yang benar-benar hebat.

  • Log masuk & Daftar barangan
  • Pengalaman Pertama
  • Semua Perkara Sedikit
  • Bahan Pelancaran
  • Perkara Profil
  • Aliran Mad

Jadi baca ini, mencerminkan, dan ... seperti ... jangan kecewa PM anda.

Log masuk mendaftar

1. Skrin Splash

Skrin yang muncul apabila anda melancarkan aplikasi mudah alih, atau apabila anda log masuk ke aplikasi web dan semuanya sedang dimuatkan.

Berikut adalah yang indah oleh James Jackson

2. Aliran Kata Laluan Lupa

Adakah "abcd1234" atau "1234abcd"? Ini sangat penting. Jangan lupa.

Majo Puterka tidak meninggalkan penggunanya yang terkunci keluar rumah dalam hujan.

3. "Terima kasih untuk mendaftar" halaman

Skrin ini biasanya datang selepas pengguna mencipta akaun dan memberitahu mereka untuk mengesahkan alamat e-mel mereka.

Apa yang akan datang? Tanya Hayley Cattlin.

4. E-mel Selamat Datang

Ini mengatasi garis antara reka bentuk produk dan pemasaran produk, tetapi ia benar-benar TENTANG PERTAMA yang anda dapati pada pengguna anda. Jadikan ia dikira. Ia adalah masa yang tepat untuk memperkenalkan nada yang lenguh pada produk anda.

Sama seperti ini. Oleh Brian Golatka.

5. Syarat Perkhidmatan & Halaman Privasi (ugh)

Hanya lakukan untuk orang-orang di sisi undang-undang. Mereka hanya cuba mengelak daripada didakwa.

Saya sangat menghargai bagaimana Marko Prljic cuba membuat Terma & Syarat lebih mudah didekati.

Pengalaman Pertama

6. Pemunggahan Pengguna

Terdapat banyak kaedah yang berbeza yang boleh anda gunakan. Berikut adalah lima favs saya:

Selamat menolong, oleh MuNa.

7. Negara Kosong Keluar dari Kotak

Ia seperti bergerak ke rumah dan anda tidak bergerak di mana-mana perabot. Kelihatan agak kosong, huh? Bantu pengguna anda dengan memberi mereka nudge ke arah yang betul. "Letakkan sofa di sini."

Saya mendapat perasaan Veli-Johan Veromann suka wira-wira.

8. Dokumen Bantuan

Sekiranya anda berada di sebuah syarikat besar, mungkin ada satu pasukan yang penuh dedikasi. Tetapi mereka masih akan menyesakkan anda untuk ilustrasi dan tangkapan skrin. Ini patut sebanyak (atau lebih) usaha sebagai halaman log masuk atau suapan aktiviti.

Maya Gao sangat membantu. Jadilah lebih seperti Maya.

9. Profil Profil Pengguna Lalai / Avatar

Mendaftar dengan akaun atau perkhidmatan sosial seperti Gravatar telah benar-benar membantu kami memamerkan wajah tersenyum kami, tetapi anda masih akan mendapat seorang lelaki yang tidak pernah mendapat sekitar untuk memuat naik foto profil. Beri sedikit bakat dan tunjukkan jenama.

Hermes Strange membuat barangan comel. Ini adalah AF comel.

10. Butang Log Keluar

Sayangnya, anda harus membenarkan pengguna meninggalkan. Hanya berpura-pura mereka menggunakan aplikasi anda di perpustakaan awam dan mereka perlu log keluar supaya sesetengah orang asing tidak menukar nama akaun mereka kepada "En. Butts ". Tidak sesuai.

Saya meneka Kristofer mungkin mencuri wang makan siang Henrik. Biarkan dia log keluar dan lari ke tempat kejadian.

Semua ... Perkara Kecil

11. App Footer

Kebanyakan masa saya menganggap laman-laman terus berjalan selama-lamanya, seperti ketika orang percaya dunia itu rata dan semacamnya terus menerus. Nota: Bumi tidak rata.

Ash Schweitzer mungkin hilang di hutan di suatu tempat. Seseorang membantu dia.

12. Favicon Penyemak Imbas

Anda tahu ... ikon kecil yang muncul pada tab penyemak imbas. Saya terus kehilangan tab Medium saya kerana ia tidak lagi hijau. Tetapi ia cantik!

Michael Flarup membuat template favicon yang hebat yang boleh anda muat turun.

13. 404 halaman

Rizvan terjebak dalam lubang itu. Bantu dia.

14. Default / Hover / Focus / Pressed / Disabled / Etc. Negeri input

Ugh, begitu banyak negeri. "Focus + Hover" mungkin menjadi kegemaran saya / paling tidak jelas. Tangkapan skrin di bawah datang daripada Sistem Reka Bentuk Alat Kuasa UX.

Nota sampingan untuk projek sampingan saya, anda pasti perlu menyemaknya:

15. Perintah Tab

Perintah Tab adalah ciri kebolehaksesan yang membolehkan pengguna menavigasi halaman menggunakan kekunci Tab. Saya tidak dapat mencari imej untuk mewakili ini, jadi saya mengambil screenshot dari spec Christian Beck menulis dari 2007 di mana dia menetapkan kedudukan pesanan tab dalam jadual untuk setiap kawalan UI di meja (saya mendapat letih walaupun hanya menulis bahawa ... SnoozeFest 2017 ™). Anda sebenarnya boleh menentukan urutan item yang dikunjungi untuk memastikan tindakan utama datang sebelum yang kedua. Ini adalah cabaran reka bentuk yang kemas.

Ahhh, zaman penulisan spesifikasi 80-halaman dan pembangunan air terjun.

16. Kelakuan Menatal

Bukan sahaja di mana sahaja dan bagaimana ia skrol, tetapi sebenarnya skrol. Adakah tajuk itu tetap? Footer?

Oh lelaki, Peter Blazej, ini nampak lancar. Nice!

17. Butang Interkom

Saya maksudkan sekurang-kurangnya yang boleh anda lakukan ialah menjadikannya sepadan dengan warna aplikasinya. Datanglah kepada orang ramai. Ia bukan pembedahan roket.

Ini lebih mudah daripada membuat semangkuk bijirin.

18. Butang Penomboran

Dengan andaian anda tidak memilih untuk menatal tak terhingga, pengguna anda memerlukan satu cara untuk sampai ke halaman 27. Biarkan mereka!

Borunda melakukan kerja yang baik. Cinta yang kuning, Borunda!

19. Kursor

Butang perlu mempunyai penunjuk. Perkara bukan interaktif harus mempunyai kursor lalai. Teks harus mempunyai kursor teks. Pemaju tidak selalu tahu ini. Saya hanya menukarkan skrin apl pada hari yang lain di mana seorang pemaju mempunyai kursor teks untuk keadaan butang hover. Belas kasihan.

Jeff Broderick LOVES mengklik pada barangan. Dia juga membuat freebie.

20. Jadual Susun / Penapis / Mekanisme Carian

Ada cara yang lebih pantas untuk sampai ke ZZ Top dalam jadual data "Bands with Beards" ...

Eugen Esanu mempunyai mata yang luar biasa untuk mekanisme penapisan, dan kombo ungu / kuning. Nice.

21. "Tiada Keputusan" Negara Kosong

Kadang-kadang anda akan mencari sesuatu atau menambah terlalu banyak penapis, dan tidak ada hasilnya. Betapa sedihnya. Ceraikan pengguna anda dengan ilustrasi yang nakal. Atau akaun bank dan nombor laluan anda.

Reiner Wendland cukup banyak merangkumi segala-galanya untuk Zendesk.

22. Negeri Ralat

Input buruk. Kata laluan salah. Akaun sedia ada. Terlalu banyak perkara yang dipilih. Terdapat pelbagai jenis cara yang boleh menjadi salah, terutamanya jika anda adalah nenek saya dan anda mendapat iPad untuk Krismas. Itulah kesilapan.

Mike Stezycki benar-benar memikirkan saya bahawa e-mel telah dihantar. Kemudian dia semua:

23. Pemberitahuan Sistem

Sistem ini selalu melakukan sesuatu di belakang tirai, dan kadang-kadang ia baik untuk mengetahui apabila sesuatu selesai dengan jayanya (atau tidak). Anda harus membiarkan pengguna tahu itu.

Ini adalah dari Google Inbox.

24. Dropdown Autocomplete Kosong

Autolengkap adalah hebat untuk membantu anda mencari objek dalam sistem, tetapi kadang-kadang tidak ada hasil. Dalam kes ini, anda tidak hanya mahu kotak kosong. Tunjukkan sedikit mesej, atau biarkan mereka mengambil beberapa jenis tindakan.

Ternyata Jurriaan van Drunen tidak mempunyai

25. Negeri Yang Dimuat

Pasti, orang mungkin akan menjadi Tindering pada telefon mereka semasa halaman dimuatkan, tetapi sekiranya mereka benar-benar melihat dari swiping seksi mereka, mungkin ada beberapa petunjuk visual bahawa barangan masih memuatkan.

Bukan bentuk flip pan terbaik, XPLAI. Teruskan berlatih. Tetapi ini masih menyakitkan hati.

Bahan Pelancaran

26. Icon App Friggin '

Ya, mungkin anda tidak boleh melupakannya.

Saya bersedia bertaruh Eddie Lobanovskiy mengubah semua ikonnya untuk makanan sarapan pagi. Delicious.

27. Imej App Store

Daniel Beere tidak melupakan imej kedai aplikasinya untuk aplikasinya. Lima orang yang tinggi, dude.

28. Grafik Terbuka / Imej Sosial

Ini adalah imej yang muncul apabila anda tweet pautan di Twitter, membuat siaran di Facebook, siarkan pautan pada Medium, dan sebagainya ...

Kristy T secara rasmi tidak bertanggungjawab. SF akan berbuat demikian kepada ya.

Inilah caranya dalam Medium:

29. Imej Pemasaran Laman Web

Juga jangan lupa, mereka mungkin mahu menjadikan laman web itu kelihatan seperti Stripe jadi hanya copy ini betul-betul:

Dan jika anda seorang pereka di Redkix, anda perlu memastikan bahawa imej berfungsi pada lembayung.

30. Imej Dek Jualan

Anda mungkin baik jika anda mengendalikan yang di atas. Tetapi dalam kes ini, anda mungkin perlu menggosok kandungan untuk menyamai jenama apa sahaja 6-angka berurusan dengan pasukan jualan cemerlang anda.

Oh dan jualan mungkin akan menutup semua mockups anda dengan barangan lain, jadi bersiaplah untuk itu.

31. Imej Dek Pitch

Seperti imej Deck Jualan tetapi lebih berwawasan. Maksud saya ... anda sedang berusaha untuk mendapatkan wang. Anda akan fikirkan cara untuk membuatnya kemudian.

Inilah rahsia perdagangan, sentiasa letakkan papan pemuka di dek padang anda.  Ini bukan jenaka.

32. Imej Pemburu Produk

Hei mereka baru saja memperbaharui halaman profil!

Saya masih terlepas Medium 2.0 tetapi setiap kali saya dapat membantu langkah saya.

33. Imej Iklan Facebook / Twitter

"Tetapi kami tidak menjalankan iklan Facebook!" Ha, sehingga anda berada. Dan kemudian tiada siapa yang memberitahu anda. Cukup buat mereka dan awak selamat.

Ia mengambil beberapa penggali untuk mencari iklan yang TIDAK untuk Casper Mattress. Y'all killin 'permainan, Casper.

34. Imej Profail Media Sosial

Ya, anda perlu membuat satu untuk semua 938 rangkaian sosial. Syukurlah kami membuat alat Lakaran untuk mempercepatkannya. Y'welcome, kiddos.

35. Pelancaran Banner E-mel

Mata tiga jika anda membuatnya sebagai ilustrasi. Semasa.

^ Dengan cara ini, ini surat berita agensi saya dan rakan sekerja saya menulis beberapa kandungan yang sangat luar biasa. Kami akan menyukainya jika anda melanggan!

Berikut adalah beberapa favs baru-baru ini:

Perkara Profil

36. Keutamaan Pemberitahuan

Ia hebat apabila apl memberitahu anda apabila berlaku, dan lebih sejuk apabila ia memainkan bunyi sangkakala. Tetapi selepas kali ke-19, anda berasa bosan dengan sangkakala. Anda mungkin boleh membiarkan pengguna membuat keputusan apabila bunyi sangkakala berbunyi.

Slack tidak menjadi syarikat $ 8 bilion oleh malas pada tetapan pemberitahuan !! Dipaku ia.

37. Halaman Billing

Jangan lupa orang perlu mendapatkan salinan bil mereka untuk membelanjakan produk yang mereka bayar kepada anda beribu-ribu ringgit. Dan sesetengah orang membuat jabatan IT idiot untuk agensi mereka dan tidak dapat menahan betapa sukarnya untuk mencari ini. setiap. tunggal. bulan. Dia tidak pahit.

Saya tidak tahu apa maksudnya, tetapi mudah untuk sampai ke sini!

38. Opsyen "Hapuskan Akaun Saya"

Betul, saya tahu. Tiada siapa yang akan melakukan ini. Tetapi hei, mungkin mereka akan memulakan akaun baru sekali lagi nanti! Sama seperti orang-orang yang melewati sebuah kios di pusat membeli-belah dan berkata "Saya akan kembali nanti dan membeli tiga!" Pasti.

Terdapat sebab-sebab yang sah untuk ini yang positif. Saya telah memecat akaun apabila saya bergabung dalam lesen pasukan yang lebih besar. Saya sudah memadam akaun lama yang mengumpul habuk dan saya mahu mula segar. Walau bagaimanapun, ia adalah perkhidmatan pelanggan yang baik untuk membuat pengalaman yang baik ini juga.

Pssst, Encik Presiden, anda boleh menyahaktifkan akaun anda di sini.

39. Alat Penanaman Foto Profil

Nah ini adalah senario mimpi buruk kebakaran untuk kebanyakan apl dan ia tidak perlu. Saya telah menghantar saya screenshot dari awal sebelum dia menukar gambar profilnya kepada Beyoncé.

Dia tidak dapat melewati skrin ini untuk menunjukkan bagaimana ia memunculkan foto. 2 daripada 10 bintang. Tidak akan meletakkan cincin di atasnya.

40. Opsyen / Aliran "Upgrade Akaun Saya"

Ia menggembirakan fikiran saya betapa sukarnya ini untuk banyak produk SaaS. Diam dan ambil duit saya. Bukankah ini mudah ?! Seperti ... THE EASIEST ?!

Buffer mempunyai item menu untuk menaik taraf maka bentuk yang agak mudah. Bam. Anda mendapat wang saya. Cara hendak pergi, Buffer.

Aliran Mad

Akhirnya, anda akan selesai semua perkara sebelumnya dan fikir anda bebas dari rumah - maka anda benar-benar mula pulang ke rumah untuk hari yang membanggakan bagaimana bola anda.

Kemudian pulang ke rumah pada fixie anda, menghirup kombucha dari camelbak anda, anda masih ingat perkembangan belum benar-benar bermula! # $% @

Apabila pembangunan bermula, anda akan mula menyedari bahawa hanya mengejek satu skrin tidak benar-benar menceritakan kisahnya (ia sejuk, kita semua cuba menjadi malas). Pemaju memerlukan anda untuk benar-benar memecahkan bagaimana pengalaman pengguna mengalir dari skrin ke skrin.

41. Aliran "Tukar Alamat Saya"

Anda tahu apabila anda mendapat pusat membeli-belah baru di pusat bandar dan anda perlu menukar alamat anda pada KAD KREDIT BANYAK ANDA PERLU DIBERIKAN?

Dhaval S. Gandhi mahu memastikan Aloe Vera dihantar ke tempat yang betul.

42. Aliran "Tambah Kad Kredit"

Sesetengah orang (saya, saya) suka menyimpan seratus kad kredit / debit pada fail supaya pencuri mempunyai banyak akaun untuk dipilih. Jadi, mudahkan untuk menambah kad. Itulah yang saya katakan mengenai perkara itu.

Ini kelihatan terlalu nyata, Carlos Medina. Tidak berkaitan, saya baru saja membeli beberapa kasut baru dan tidak membelanjakan sepeser pun!

43. Aliran Bulk Tambah "

Satu perkara yang perlu dilakukan untuk menambah objek ke dalam sistem dengan cepat, tetapi ia adalah satu perkara yang sama sekali berbeza untuk membuat menambah BURUK OBJEK ke dalam sistem dengan cepat.

Tolong tuan, bolehkah saya mempunyai lebih banyak lagi?

44. Aliran "Buat Penapis Khas"

Jika anda membenarkan penapisan yang canggih, mungkin lebih baik untuk menambah keupayaan untuk menyimpan penapis rumit ini untuk kemudian. Dengan cara itu, anda tidak perlu mengklik sejuta kali sekali lagi.

Oykun Yilmaz dapat mengambil langkah seterusnya dengan membenarkan pengguna menyimpan penapis ini. Lakukannya, Oykun!

45. Aliran "Add to Shopping Cart"

Ia agak lucu untuk berfikir bahawa orang lupa tentang aliran ini, tetapi anda tahu ... Saya adalah salah seorang daripada mereka. Diam.

Ternyata Alberto Conti memerlukan 4 kerusi dan 4 meja sebelah. Harus menjadi rumah besar ...

46. ​​Aliran "Kongsi Ini"

Perkongsian telah menjadi sangat cantik di mana-mana, tetapi itu tidak bermakna ia telah direka untuk anda. Semakin banyak alasan untuk meluangkan masa untuk yang satu ini.

Tomek Kwiatkowski benar-benar tahu bagaimana untuk mendapatkan sosial.

47. Aliran "Buat dari Sedia Ada"

Ini seperti "Duplikat + Edit" semua dalam satu tindakan. Pada asasnya pengguna dapat memulakan dari objek yang sedia ada dan mengemas kini seperti yang diperlukan.

Kyle Johnston sedang menulis banyak skrip. Mungkin rahsia Christopher Nolan?

48. Aliran "Invite Someone"

Tidak ada cara yang lebih baik untuk menambahkan "virality" kepada produk anda daripada melalui jemputan dan perkongsian. Melihat kepada kamu Dribbble. Pastikan ia mudah, pantas, dan menyeronokkan!

Saya fikir Paula Pintaric dan Christine sedang dalam penerbangan. Atau mereka sedang menjalankan projek dan menonton orang lain terbang. Lebih buruk lagi.

49. Aliran "Tukar Kebenaran Pengguna"

Awak tahu lelaki itu Greg? Anda tahu bagaimana dia menyusun apa sahaja yang dia sentuh? Ya, anda mungkin ingin membatalkan beberapa hak istimewa Greg supaya dia tidak memadamkan keseluruhan Internet. Silly Greg.

Di sisi lain, Matt Shwery ... kurang daripada buku jari daripada Greg.

50. Aliran "Padam dan Pulih"

Anda tahu apabila anda memadamkan sesuatu yang penting SUPER dan perlu segera kembali? Tidak? Baiklah.

Eric Tsai memahami bahawa kita semua membuat kesilapan.

BONUS # 51. Animasi

Pendedahan sepenuhnya, saya sebenarnya terlupa tentang ini. Lihat, saya suka animasi tetapi saya bernasib baik jika kita mempunyai kemewahan untuk membina ini apabila jualan mahu prototaip dilakukan semalam, dan pembangunan menunjukkan sesuatu yang saya terlepas sepenuhnya pada lelaran ke 8 pada halaman pendaratan. Dan dengan jujur ​​jika kita dapat animasi sama sekali, saya hanya merujuk kepada Dribbble atau CodePen dan menghantar sesuatu yang saya sukai dan berkata, "Jadikannya seperti itu!" Adakah saya?

Saya tidak.

Ringkasan

Anda mungkin dengan sengaja menulis senarai segala yang saya terlupa untuk artikel ini. Jangan ragu untuk mengingatkan saya dalam komen. Pereka mempunyai kira-kira sejuta perkara yang perlu diingati apabila mereka bentuk produk MVP, atau ciri-ciri besar untuk platform perisian perusahaan. Semoga ini dapat sekurang-kurangnya menjadi rujukan berguna untuk membantu mengingatkan anda pada projek anda yang akan datang.

Apabila saya tidak cuba mengingati setiap perkara yang sedikit (dia adalah sihir), saya sedang berusaha menggunakan alat Reka bentuk lakaran di UX Power Tools untuk menjadikan anda seorang pereka yang lebih baik dan lebih cekap. Anda boleh mengetahui lebih lanjut di sini:

Ikut UX Power Tools di Twitter
Ikuti saya di Twitter