การเอาชนะการขาดทักษะการออกแบบ UI ทั่วไปในนักพัฒนา [ปิด]

ฉันได้รับการบอกกล่าวและพบว่าตัวฉันเองนั้นผู้พัฒนาจำนวนมากไม่เก่งในการออกแบบ UI (ฉันไม่รู้ว่าจริงแค่ไหน) แต่ มันเป็นความจริงเกี่ยวกับฉันอย่างน้อย

ในการพัฒนาเว็บทักษะการพัฒนาโค้ดที่ดีนั้นไม่เพียงพอหากไม่มีทักษะที่ยอดเยี่ยมในการออกแบบ UI เพื่อไปกับพวกเขา

ดังนั้นสำหรับฉันและนักพัฒนาจำนวนมากเช่นฉันที่มีเพียงครึ่งหนึ่งของสิ่ง (ทักษะการพัฒนาที่ดี) เราจะทำอย่างไรให้อีกครึ่งหนึ่งของเราสมบูรณ์กว่าการจ่ายเงินให้กับนักออกแบบ

ใช้เทมเพลตเว็บ Open Source ที่มีการแก้ไขเล็กน้อยสำหรับวิธีแก้ปัญหาที่ดีที่สุดหรือมีตัวเลือกอื่นหรือไม่?

ฉันเป็นนักพัฒนาที่ไม่เก่งเรื่องการออกแบบมากนัก ฉันพยายามอย่างหนักที่สุดเมื่อทำงานในโครงการที่ต้องออกแบบเพื่อทำให้สิ่งต่าง ๆ เรียบง่ายที่สุดเท่าที่จะทำได้ ฉันใช้วิธีการที่เป็นตรรกะและการออกแบบเฉพาะสำหรับประสบการณ์ผู้ใช้เท่านั้น ฉันไม่สามารถทำให้มันดูสวยงามอย่างแท้จริง แต่ฉันสามารถทำให้มันเป็นมิตรกับผู้ใช้และเป็นที่ชื่นชอบ

ฉันได้อ่านหนังสือเหล่านี้หลายเล่มแล้ว: http://www.uxbydesign.org/2009/06/24/20-user-experience-books-you-should-own/และพวกเขาช่วยฉันออกมาจริงๆ

แก้ไขรายการโปรดของฉันคือ Don't Make Me Think A Common Sense Approach สู่ Web Usability, 2nd Edition โดย Steve Krug

การออกแบบ (ของอะไรก็ตาม) เป็นการต่อรองระหว่างความต้องการของผู้มีส่วนได้เสียต่างๆ (ลูกค้าผู้พัฒนาผู้ใช้) ไม่มีผู้มีส่วนได้ส่วนเสียใดมักจะอยู่ในตำแหน่งที่ดีในการสร้างการออกแบบที่ดีที่สุดเพราะพวกเขามีแนวโน้มที่จะเข้าใจความต้องการของตัวเองดีที่สุดและทำให้พวกเขาเหนือความต้องการของผู้มีส่วนได้เสียอื่น ๆ นักออกแบบที่ดีสามารถระบุความต้องการของผู้มีส่วนได้ส่วนเสียต่าง ๆ ซึ่งบ่อยครั้งต้องการผู้มีส่วนได้เสียที่ไม่ได้ตระหนักว่าเขามีและคิดหาวิธีที่เหมาะกับทุกคน

คุณอาจเคยเห็นสิ่งนี้ด้วยตัวเองหลายครั้ง ผู้ใช้คิดเกี่ยวกับวิธีที่พวกเขาต้องโต้ตอบกับระบบโดยปกติแล้วในแง่ของระบบอื่น ๆ ที่พวกเขาคุ้นเคยอยู่แล้ว นักพัฒนาคิดว่าส่วนใหญ่ในแง่ของวิธีการทำงานของระบบ ลูกค้ามักต้องการสิ่งที่จะแก้ปัญหาทั้งหมดของพวกเขาหรืออื่น ๆ ที่พวกเขาต้องการแก้ปัญหาเฉพาะบางอย่างสำหรับค่าใช้จ่ายน้อยที่สุด

ในการเป็นนักออกแบบที่ดีคุณต้องเรียนรู้ที่จะหยุดคิดก่อนว่าคุณจะนำบางสิ่งไปใช้ คุณต้องมุ่งเน้นไปที่สิ่งที่ผู้มีส่วนได้เสียอื่นกำลังบอกคุณเกี่ยวกับสิ่งที่พวกเขาต้องการและต้องการและคุณจะต้องสามารถอ่านระหว่างบรรทัดได้ เช่นเดียวกับนักพัฒนาลูกค้าและผู้ใช้มักจะมีวิธีแก้ปัญหาแบบอุปาทานอยู่แล้วและพวกเขามักจะอธิบายวิธีแก้ปัญหานั้นแทนที่จะเป็นข้อกำหนดพื้นฐาน (ที่กล่าวว่าสิ่งสำคัญคือต้องตระหนักว่าบางครั้งลูกค้าหมายถึงสิ่งที่พวกเขาพูดเมื่อพวกเขาบอกคุณว่าสิ่งที่พวกเขาต้องการ; ถ้าคุณไม่แน่ใจถาม)

ยิ่งไปกว่านั้นการออกแบบที่สวยงามของ UI ยังเป็นสิ่งที่นักพัฒนาบางคนมีปัญหาด้วย ฉันคิดว่าส่วนหนึ่งเป็นเพราะนักพัฒนาซอฟต์แวร์มักจะไม่ได้รับการฝึกอบรมเรื่องสุนทรียภาพมากนักนักเรียน CS อาจไม่มีเวลามากพอสำหรับการเรียนศิลปะ อีกส่วนหนึ่งก็เพราะเราสนใจว่ามีอะไรบางอย่างทำงานได้ดีกว่าที่เราเป็นในสิ่งที่ดูเหมือน; เราแค่ไม่สนใจว่ามุมของปุ่มนั้นมีรัศมี 9 พิกเซลหรือรัศมี 10 พิกเซล ปัจจัยทั้งสองนี้เกี่ยวข้องกันอย่างแน่นอน บางครั้งคุณสามารถเอาชนะสิ่งนี้ได้โดยอาศัยโซลูชันแบบกระป๋องในรูปแบบของเฟรมเวิร์ก UI และการใช้ส่วนประกอบที่ออกแบบไว้ล่วงหน้ามีข้อได้เปรียบในการรวมการทำงานของคุณเองกับภาพด้วยแอพพลิเคชั่นอื่น ๆ ในระบบเดียวกัน คุณสามารถพัฒนาทักษะด้านสุนทรียภาพโดยการอ่านดูที่งานของคนอื่น และใส่ใจในรายละเอียดของภาพที่คุณอาจมองข้ามในอดีต คุณควรพยายามเข้าใจถึงตรรกะที่อยู่เบื้องหลังความแตกต่างของภาพ: ปุ่มแบบเหลี่ยมมุมหมายถึงสิ่งที่แตกต่างจากปุ่มกลมหรือไม่? มีการใช้สีอย่างไร? เป็นต้น

นี่คือบางสิ่งที่ฉันพบว่าช่วยฉันได้:

• จดสิ่งที่คุณชอบ / ไม่ชอบในซอฟต์แวร์อื่น เราเป็นโปรแกรมเมอร์เราใช้ชีวิตส่วนใหญ่ที่คอมพิวเตอร์ ลองและจดบันทึกสิ่งที่คุณรัก / เกลียดชังเมื่อใช้ซอฟต์แวร์ ไม่สำคัญว่าจะเป็นซอฟต์แวร์คอมพิวเตอร์วิดีโอเกมอุปกรณ์พกพา ฯลฯ ลองดูสิ่งที่สะดวกและใช้งานง่ายและสิ่งที่ไม่ได้เป็นเช่นนั้น

• ค้นหาเครื่องมือร่างภาพที่ใช้งานง่ายสำหรับการร่างภาพ UI สำหรับคุณและผู้ใช้ของคุณ ฉันชอบที่จะใช้Balsamiqเพราะมันรวดเร็วง่ายและเวอร์ชั่นบนเว็บนั้นสามารถใช้งานได้ฟรี

• จำไว้ว่าคุณไม่จำเป็นต้องหาใครสักคนที่มีความเชี่ยวชาญในการออกแบบซอฟต์แวร์เพื่อช่วยคุณออกแบบบางอย่าง - ผู้ใช้ทุกคนจะทำ ฉันมักจะเรียกใช้ร่างของฉันโดยบางคนที่ไม่เกี่ยวข้องกับโครงการทั้งหมดเพียงเพราะฉันรู้ว่าพวกเขามีซอฟต์แวร์ตลอดทั้งวันและสามารถบอกฉันว่าสิ่งที่ดูตกลงหรือเป็นมิตรกับผู้ใช้ เพียงจำไว้ว่าพวกเขามักจะให้ความคิดที่บ้าเกี่ยวกับสิ่งที่คุณต้องทำและคุณต้องรู้ว่าจะต้องทำอะไร "เจ๋ง" และสิ่งที่จะปรับปรุงประสิทธิภาพการผลิต

• อย่าลังเลที่จะถามบน/ux//สำหรับคำถามโดยละเอียด

ความจริงแล้วการออกแบบ UI นั้นต่างกัน นักพัฒนามักคิดถึงการออกแบบที่ละเอียดอ่อนและไม่สร้างสรรค์เกินไปเมื่อพูดถึงการออกแบบ วิธีการที่ชัดเจนที่ฉันรู้สึกคือการรักษานักพัฒนาที่แตกต่างกันสำหรับการออกแบบ UI แม้ว่ามันจะช่วยเพิ่มค่าใช้จ่าย แต่แน่นอนจะช่วยให้คุณบรรลุผลลัพธ์ที่ดีกว่า

สำหรับคนที่ทำทั้งสองอย่างด้วยตัวเองอย่าให้ผลลัพธ์ที่ดีที่สุดจริงๆ ดังนั้น IMHO สองด้านที่แตกต่างกันควรกำหนดให้กับนักพัฒนาสองคนนี้ แนะนำความรู้เล็กน้อยเกี่ยวกับ HTML และ CSS สำหรับการสร้างสกินและการพัฒนาธีมในกรณีที่ CMS แตกต่างกัน แต่เมื่อคุณต้องการพัฒนาการออกแบบใหม่ทั้งหมดให้ปรึกษาผู้ออกแบบ UI

ฉันสามารถแนะนำการออกแบบส่วนต่อประสานผู้ใช้หนังสือของ Joel Spolsky กับโปรแกรมเมอร์ได้อย่างแน่นอนได้อย่างแน่นอน ในหนังสือเล่มนี้เขาใช้แนวทางที่คุณกำลังมองหา: อธิบายว่าทำไมการออกแบบ UI จึงสำคัญกับโปรแกรมเมอร์ สำหรับเนื้อหาออนไลน์ที่เกี่ยวข้อง:

การออกแบบสำหรับผู้ที่มีสิ่งที่ดีกว่าที่จะทำกับชีวิตของพวกเขา

การออกแบบ UI ไม่ใช่สิ่งที่เป็นธรรมชาติสำหรับคนจำนวนมาก อย่างไรก็ตามเมื่อเร็ว ๆ นี้ฉันเก่งขึ้นมากโดยทำตามหลักการง่ายๆสองสามข้อ

1. อย่าประหลาดใจมันไม่ยากอย่างที่คุณคิด

2. ทำโมเดลโครงสร้างข้อมูลและเอ็นจินของคุณก่อน สร้างรูปแบบที่ชัดเจนและสอดคล้องกับโลกแห่งความจริง เห็นได้ชัดว่าสิ่งนี้ถือว่าคุณได้ใช้เวลาในการทำความเข้าใจกับสิ่งที่ลูกค้าต้องการ

3. ขณะนี้มีกระดาษและดินสอนั่งลงและเริ่มวาดเค้าโครงแบบลอจิคัลของหน้าจอ โดยปกติจะแสดงแบบจำลองข้อมูลของคุณให้กับผู้ใช้ในรูปแบบที่เป็นระเบียบ เป้าหมายของคุณควรเป็นเพียง:

   เลียนแบบสภาพแวดล้อมที่แอพจะถูกปรับใช้ ตัวอย่างเช่นหากเป็นแอพพลิเคชั่น windows จะต้องทำงานเหมือนแอพพลิเคชั่นของ Windows หากเป็นแอพพลิเคชั่นบนเว็บก็จำเป็นต้องทำตัวเหมือนแอพพลิเคชั่นเว็บที่คล้ายกันซึ่งได้รับความนิยมมากกว่าของคุณ

   ข เป้าหมายของคุณคือแนะนำผู้ใช้ผ่านตัวแบบข้อมูลของคุณในแบบที่พวกเขาจะทำนาย อินเทอร์เฟซผู้ใช้ถูกออกแบบมาอย่างดีเมื่อผู้ใช้ทำบางสิ่งในแอปพลิเคชันของคุณและทำสิ่งที่พวกเขาคาดหวังให้ทำ

   ค. มันต้องใช้เวลาและมันเป็นช่วงการเรียนรู้ แต่ใคร ๆ ก็ทำได้

4. ไม่ต้องกังวลเกี่ยวกับกราฟิกเช่นปุ่มพื้นหลัง ฯลฯ ... เป้าหมายเดียวของคุณ ณ จุดนี้คือรูปแบบตรรกะของหน้า

5. คุณจำเป็นต้องใช้ gui lib ที่คุณใช้ไม่ว่าจะเป็น html, gtk, cocoa, android, Windows.Forms และอื่น ๆ ในระดับที่คุณเข้าใจกลไกการจัดการเหตุการณ์กลไกการจัดวางและดึงข้อมูลเข้าและแสดงผล ข้อมูล. นักพัฒนาใด ๆ ควรสามารถทำสิ่งนี้ได้อย่างน้อย

6. ไม่มีความละอายในการทำให้นักออกแบบกราฟิกเข้ามาแทนที่ แต่อย่างน้อยคุณควรจะสามารถผ่านขั้นตอนที่ 5 ได้นี่เป็น 95% ของปริมาณงานสำหรับแอปทั้งหมด

นี่เป็นบทความที่มีประโยชน์ที่ทำให้ฉันเปลี่ยนจากนักออกแบบ GUI ที่น่าสงสารมาเป็นนักออกแบบ GUI ที่ดีขึ้น

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

นอกจากนี้คุณยังสามารถค้นหาตัวอย่างของไซต์ "ที่คล้ายกัน" เพื่อรับแนวคิดสำหรับเลย์เอาต์กราฟิกและการออกแบบ ด้วยการปรับแต่งเล็กน้อยในโปรแกรมระบายสีที่คุณชื่นชอบคุณสามารถยืมความคิดมากมายและทำให้เป็นของคุณเอง อย่าลอกแบบทันที - ไม่ใช่แค่มารยาทที่ไม่ดีมันอาจผิดกฎหมายในกรณีส่วนใหญ่

เมื่อคุณยืมมาสองสามครั้งคุณจะเริ่มรู้สึกดีขึ้นกับการออกแบบเว็บไซต์ที่ประสบความสำเร็จและคุณจะได้รู้จักเครื่องมือในการออกแบบเหล่านั้นด้วย (ด้วยการปรับแต่งเล็กน้อย)

ด้วยการแนะนำ HTML การสร้างเว็บไซต์ที่ดูไม่น่าดูง่าย ๆ กลายเป็นความท้าทาย ในขณะที่คุณอาจมีแนวความคิดมันต้องใช้เทคนิคต่าง ๆ เครื่องมือกราฟิกสำเร็จรูปและความรู้ CSS เพื่อทำให้ถูกต้อง นอกจากนี้ยังต้องใช้เทคนิคการใช้งานและปัจจัยอื่น ๆ ที่มีอิทธิพลต่อกระบวนการออกแบบเพื่อสร้างหน้าเว็บที่คมชัด

นักพัฒนาใช้เวลาส่วนใหญ่ในการต่อสู้กับการเรียนรู้ภาษาที่ซับซ้อน OOP, ORM, SQL, T-SQL และอื่น ๆ พวกเขาไม่ค่อยลงทุนในเครื่องมือในการสร้างเว็บไซต์ (ส่วนใหญ่มีราคาแพง)

เป็นผลให้นักพัฒนาหลายคนประสบจากการไม่สามารถผลิตหน้าเว็บที่สวยงาม ฉันเชื่อว่าหากคุณเรียนรู้เครื่องมือที่จำเป็นคุณจะสามารถสร้างหน้าเว็บที่ดีได้เช่นกัน

สิ่งสำคัญคือต้องทราบว่าม้วนของคุณอยู่ในกระบวนการพัฒนาโปรแกรมประยุกต์ คุณอาจพบว่าการออกแบบเว็บเป็นสิ่งที่ดีที่มีทักษะมากกว่าจะเป็นทักษะที่จำเป็น ในโครงการขนาดใหญ่ไม่ควรเป็นงานโปรแกรมเมอร์ด้วยเหตุผลดังกล่าวข้างต้นอย่างน้อยที่สุด

ฉันพบว่าเครื่องมือนี้เป็นเครื่องมือที่ยอดเยี่ยมมันอาจช่วยคุณได้:

Artisteer

ลองดูและลองตัวอย่างมันดีจริงๆ

ยังอยู่ในการพัฒนาเว็บทักษะการพัฒนาที่ดีไม่เพียงพอหากไม่มีทักษะที่ยอดเยี่ยมในการออกแบบ

ฉันไม่รู้ว่าประโยคนี้เป็นจริงหรือเปล่าฉันคิดว่ามันขึ้นอยู่กับว่าคุณทำงานที่ไหน

ตัวอย่างเช่น บริษัท ขนาดเล็กอาจต้องการให้คุณมีความยืดหยุ่นมากขึ้นกับชุดทักษะของคุณในขณะที่ บริษัท ขนาดใหญ่อาจไม่ได้มีความคาดหวังเหมือนกันและคุณสามารถใช้เวลาในการพัฒนาจริง ๆ ในขณะที่ทีมออกแบบทำงานออกแบบ

Microsoft ได้อัปเดตชุดเครื่องมือเพื่อเน้นการแยกชัดเจนระหว่างนักพัฒนาและผู้ออกแบบ พวกเขาได้แนะนำ Expression Blend กับ WPF ซึ่งในตอนนี้หมายความว่าผู้พัฒนาสามารถทำงานกับการทำงานของซอฟต์แวร์ชิ้นหนึ่งและคนอื่นสามารถออกแบบได้ พวกเขาทั้งสองใช้เครื่องมือต่าง ๆ พวกเขาทั้งสองสามารถทำงานในโครงการได้ในเวลาเดียวกัน

นักพัฒนาระบุจุดข้อมูลและนักออกแบบจะแสดงพวกเขา

จำไว้ว่าการออกแบบนั้นสามารถทดสอบได้เช่นกันไม่ใช่เฉพาะรหัส เริ่มง่ายๆลองออกแบบของคุณกับคนกลุ่มเล็ก ๆ เขียนความคิดเห็นและไปที่นั่น สิ่งนี้สามารถช่วยคุณระบุปัญหาในการออกแบบของคุณและให้แนวคิดเกี่ยวกับสิ่งที่ควร / ควรทำแตกต่างกัน จากนั้นทบทวนการออกแบบและวนซ้ำ

คุณเพียงแค่จะต้องลอกเลียนแบบและคัดลอกการออกแบบอื่น ๆ หลีกเลี่ยงสิ่งแฟนซีใด ๆ ยกเว้นคุณสมบัติหนึ่งหรือสองอย่างที่จะเป็นประโยชน์อย่างมากต่อผู้ใช้ ทำตามหลักปฏิบัติบางประการของการ จำกัด แบบอักษรสีและความยุ่งเหยิง

อย่ากลัวที่จะโพสต์คำถามใน UI.stackexchange.com

แม้ว่ามันไม่ใช่ความเชี่ยวชาญของคุณ แต่ฉันคิดว่ามันน่าสนใจอยู่เสมอในการศึกษาวิธีการสร้าง UIs ทุกวันนี้หน้าเว็บส่วนใหญ่มีความเคลื่อนไหวและรู้ว่าทักษะ UI บางอย่างจะช่วยได้อย่างแน่นอนเมื่อสร้างองค์ประกอบและกำหนดปฏิสัมพันธ์กับองค์ประกอบของหน้าเว็บของคุณ ฉันมาจากพื้นหลังการพัฒนาแบ็กเอนด์เท่านั้นและฉันรู้สึกประหลาดใจที่มีส่วนเกี่ยวข้องมากแค่ไหนในการสร้างส่วนต่อประสาน

มีหนังสือที่ดีเป็นพิเศษที่ฉันได้อ่านเกี่ยวกับการออกแบบเว็บและมีวัตถุประสงค์เพื่อนักพัฒนา:

ออกแบบเว็บไซต์สำหรับนักพัฒนา: http://pragprog.com/book/bhgwad/web-design-for-developers

มันเป็นหนังสือที่อ่านง่ายที่สัมผัสได้ถึงเฟสทั้งหมดเมื่อสร้างอินเทอร์เฟซ: ตั้งแต่การร่างแบบธรรมดาและการสร้างต้นแบบ UIs ไปจนถึงการสร้างการออกแบบด้วย HTML + CSS

เพื่อพัฒนาทักษะ UI ของคุณต่อไปฉันขอแนะนำ screencast ล่าสุดของ PeepCode กับ Ryan Singer: http://peepcode.com/products/ryan-singer-ux

ฉันคิดว่าการยกระดับพื้นฐานบางอย่างของ UX / UI / กราฟิก / วิชาการพิมพ์เป็นความพยายามที่มีค่าอย่างแน่นอน คุณไม่สามารถมีทีมผู้เชี่ยวชาญที่ "รอบรู้" เสมอไป หลายครั้งที่คนต้องสวมหมวกหลายใบ นักพัฒนาที่ดีจะเห็นคุณค่าในการใช้เวลาในการเรียนรู้เกี่ยวกับสิ่งต่าง ๆ ที่อยู่นอกโดเมนของเขาและอย่างน้อยควรรู้จักการทำงานที่ดีในการออกแบบ

อย่างไรก็ตามมีบางสิ่งที่ต้องบอกว่านักออกแบบทำอะไร นักพัฒนาสามารถทำอะไรได้มากในด้านการออกแบบ (บางคนยอมรับมากกว่าคนอื่น) โดยเฉพาะอย่างยิ่งโครงการสาธารณะที่มีขนาดใหญ่ซึ่งเข้าถึงได้ไกลเกินกว่าช่องทางแคบ ๆ ได้รับประโยชน์อย่างมากโดยการจ้างผู้เชี่ยวชาญด้านการออกแบบที่แท้จริง และฉันไม่ได้หมายถึงคนที่สามารถแกว่งไปมาในรหัสสี css และ html ฉันหมายถึงผู้คนที่ใช้เวลาหลายปีศึกษาสิ่งต่าง ๆ เช่นวิชาการพิมพ์ผู้อ่านและเข้าใจหนังสือสีของโจเซฟอัลเบอร์ที่สามารถวาดภาพร่างที่สวยงามด้วยถ่านที่ละลายในกระดาษหนังสือพิมพ์ สิ่งเหล่านี้เป็นทักษะที่มีค่าและโครงการที่ยอมรับว่าและสามารถนำทักษะเหล่านี้ไปใช้เน้นการตัดสินใจได้เปรียบในการแข่งขัน

ที่กล่าวว่ามีบางพื้นที่ที่นักออกแบบและนักพัฒนาสามารถซ้อนทับทักษะของพวกเขา โดยเฉพาะ UX และโดเมนย่อยคือ UI ฉันแนะนำ ...

• การออกแบบเพื่อการโต้ตอบ
• การออกแบบส่วนต่อประสาน
• การออกแบบปฏิสัมพันธ์

จ้างมืออาชีพ

จริงจัง UIs จากนักพัฒนามีชื่อเสียงแย่มาก นี่ไม่ใช่เพราะนักพัฒนามีค่าเฉลี่ยต่ำกว่าการออกแบบ แต่เป็นเพราะผู้พัฒนาอยู่ต่ำกว่าค่าเฉลี่ยที่ขอความช่วยเหลือ

นักพัฒนาซอฟต์แวร์มีแนวโน้มที่จะรับมือกับความท้าทายด้านดิจิตอลทุกรูปแบบ

(ฉันเป็นนักพัฒนามืออาชีพ 10 ปีและภรรยาของฉันเป็นผู้ออกแบบส่วนต่อประสานผู้ใช้เป็นเวลา 20 ปี)