#priwreadbooks Pixel Perfect Precision (version 3)

Produced by ustwo

อ้างอิงจากการเห็น FB อัลบั้ม UI/UX Design Basic Guide ที่แชร์กันให้ขวักไขว่ช่วงสัปดาห์ที่สามของเดือน มิ.ย. 2559 ประกอบกับ พี่ชิวแชร์ไฟล์ .pdf ต้นฉบับมาให้ดาวน์โหลดไปอ่านกัน

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

  • คิดถึง User ของเราเสมอ ว่าเค้าเป็นใคร เด็ก ผู้ใหญ่ tech-savvy ฯลฯ
  • Environment ไม่ได้หมายถึงแค่ Platform แต่รวมไปถึงพื้นที่ๆ เค้าใช้งาน เช่น ในที่ร่ม ต้อง remote เข้ามาใช้งานอะไรแบบนี้หรือเปล่า
  • Accessibility ใช้งานง่าย
  • เวลาเราทำ Design เราก็คิดถึง Best case อยู่แล้ว แต่ให้คิดเผื่อ Worst Case ไว้ด้วย เพราะเวลา User ใช้งานจริง มันมักจะมีอะไรเหนือความคาดหมาย
  • Affordance คือวัตถุนึงสามารถบอกได้ว่า ตัวมันเองมีหน้าที่อะไร เช่น ปุ่มที่ดูว่ามันกดได้ พอกดลงไปก็รู้ว่าเรากดมันแล้ว หรือ text ที่มันไหลเกินจอไป เราก็จะรู้ว่ามันเลื่อนไปดูได้นะ
  • Copy ที่เข้าใจง่าย ให้รู้สึกถึงความเป็นคน emotional connection ช่วยสร้าง experience ที่ดีได้มากกว่า
  • การใช้สีและรูปทรง เช่น เครื่องหมายถูกสีเขียว เครื่องหมายกากบาทสีแดง เครื่องหมายให้ระวัง เป็นสามเหลี่ยมสีเหลือง ตัว ! เป็นสีดำ ส่วนการให้ข้อมูลเป็นวงกลมสีฟ้าน้ำเงิน ตัว i เป็นสีขาว พยายามอย่าไปเปลี่ยน Norm (มาตรฐาน) เพราะมันจะก่อให้เกิดความสับสน
  • Visual Hierarchy เรียงลำดับสิ่งสำคัญที่ต้องการให้ User สนใจ ไม่ว่าจะเป็น สี ลักษณะ font ขนาดใหญ่ ตัวหนา รวมไปถึงวิธีการอ่านในแต่ละวัฒนธรรม
  • Typography ตัวอักษร ช่องไฟ การเว้นบรรทัดอะไรให้มันอ่านง่าย
  • Motion การเข้า การออก ช่วยดึงความสนใจได้
  • Testing ออกแบบหน้าจอ Mobile ในคอมตัวโต เวลาทำเสร็จอย่าลืมเอาไป Test ในหน้าจอ Mobile ด้วย
  • Prototyping เป็นหนทางเร็วๆ ไม่เสียเงิน ไม่เสียแรงมาก ที่จะ test idea แล้วก็ design
  • Organisation จัด Group แบ่งหมวดหมู่ เรียงลำดับจากใหญ่ไปเล็ก

ในส่วนของ Detail นั้น

  • Sharp Edges
  • Alignment and Spacing
  • Consistency
  • Colour Model ใช้ HSB สีฐานเดียวกัน เฉดสีต่างกัน
  • Colour Management
  • Text Height and Width
  • Aligning Text on Buttons: Cap Height and Descender, x-height, Cap Height and x-height เลือกใช้แบบใดแบบนึง อย่าเอามารวมกัน
  • Aligning Text with Objects พยายามให้ข้อความตรงกับ object แบบ x-height
  • Object States ดูรู้ว่ามันกดได้ ไม่ได้
  • Borders and Corner Radii
  • Equilateral Triangles
  • Version Control อย่ามา final หลายๆ ครั้ง ใส่วันที่ ใส่ version ให้มันดีๆ

Accessibility

  • Clarity
  • Consistency
  • Navigation: Content Structure อะไรสำคัญเอามาไว้ข้างบน, Minimise Steps, Titles บอกให้รู้ว่าตอนนี้อยู่ที่ไหน หน้านี้คืออะไร, Appropriate Page Sizes ดูว่า content ที่ล้นเกิน 1 หน้า ควรจะเลื่อนลงไป หรือเปลี่ยนหน้า, Limit Scrolling to One Direction, Numbered Lists, Labelling ที่สื่อความหมาย, Labels Above Input Fields เวลาพิมพ์ฟอร์ม ถ้าเอา label ไว้ในฟอร์ม พอกดพิมพ์ในช่อง ก็อาจลืมได้ว่าช่องนี้ให้พิมพ์อะไร
  • Interaction: Touch Targets ให้นิ้วมือมันกดได้พอดี, Buttons and Hyperlinks ปุ่มกดให้เป็นปุ่ม ข้อความอะไรที่ไม่ใช่ link ก็ไม่ต้องใส่ขีดเส้นใต้เข้าไป
  • Error Prevention: Design ให้ User กด Confirm การ Delete หรืออะไรซักอย่างที่มันสำคัญอีกครั้งก่อน, Checked Data ฟอร์มมีหลายช่องให้กรอก ให้ระบุข้อผิดพลาดเป็นช่องๆ, Free Text เกิดโอกาสผิดพลาดมากกว่า ลอง Drop-down ดูดีกว่า, Review, Confirm, and Correct ยืนยันอีกทีนั่นแหละ, Reversible Submissions เผลอลบไปแล้ว Restore กลับมาได้
  • Copy: บอกให้มันชัดเจนว่าจะให้ทำอะไร อย่าให้ต้องคิดอีกรอบ, Break Up Large Blocks of Text, Text to Diagrams อธิบายเป็นข้อๆ แล้วมันยากไป จับใส่ภาพแผนผังลากเส้นให้ดูซะ, Abbreviations พวกตัวย่อ ให้วงเล็บคำเต็มๆ ไว้ด้วย, Link Text แทนที่จะบอกว่า Click Here ก็บอกไปเลยว่า Pixel Perfect Precision Handbook (25MB)
  • Feedback: มีการบอก status ว่ากำลังทำอะไรอยู่ เช่น มี loading ขึ้น, Multi-sensory, Error Messages ภาษาคน ไม่เอาภาษาเครื่อง, Error Proximity ถ้ากรอกฟอร์มผิดก็บอกไปเลยว่าผิดอะไร จะได้แก้ไขถูก
  • Typography: ให้มันอ่านง่ายๆ แบ่ง paragraph ดีๆ, Font Size อ่านแล้วสบายตา ไม่ต้องเพ่ง, Line Length ความกว้างไม่ต้องมาก เพราะถ้ามากไป จะกลับมาอ่านบรรทัดต่อไปจะเริ่มงงละ, Spacing, Alignment ชิดซ้ายไปเลย, Formatting ตัวบาง ตัวหนา ก็พอแล้ว, Truncation ตัดข้อความเท่าที่จำเป็นเท่านั้น, Merging Text with Graphics แยก text ออกจากภาพ เวลาที่เค้าใช้โปรแกรมแปลงข้อความเป็นเสียง จะได้อ่านได้
  • Colour: Visual Aids ใส่ icon คู่ text, Don’t Rely on Colour Alone มีแต่สี แต่ไม่มี text ไม่มีอะไร ก็ไม่รู้เรื่องเหมือนกัน, Alternatives ถ้าแสดงกราฟสีให้แตกต่าง ควรใส่ pattern ใส่ลายเข้าไปด้วย, Colour Contrast ให้สีตัวอักษรกับสี BG มันแตกต่างกันชัดๆ, Colour Contrast Checkers ใส่เครื่องหมายถูกเข้าไปในสีด้วย อย่ามีแต่สี, ColorADD (simple system that represents colours using symbols)
  • Flashing: อ่านรายละเอียดลึกๆ ได้ที่นี่
  • Movement ให้คนกดเล่นเอง อย่า auto play video
  • Testing เช่น black and white, zoomed view, text-to- speech, Colour Blindness Preview in Adobe, Sim Daltonism

Design and Development

  • Essentials: Good Communication, Collaboration ทุกคนมีส่วนร่วม, Learning กันและกัน (disciplines, in particular, any pain points), Be Realistic
  • Preparation: Specifications, Deliverables, Workflow, Tracking
  • Design: Appropriate Styling, วาง Realistic Content, Keep Everything Editable ทำเป็น layer, Object States, Style Guide, Design in Code พวกการสร้าง object เขียน code ได้นะจ๊ะ, Colour Profiles
  • Delivery: Timing, จัดเรียงลำดับไฟล์แบบ Organisation, Naming Systems, Don’t Compress Assets, Specifications, Check! And Then Check Again!

Photoshop and illustrator

บอกวิธีการทำงานใน photoshop และ illustrator แบบสวยๆ ดีๆ ยกตัวอย่างเช่น การเรียง layer, การจัด vector, การใส่ effect, การ link layer, grid, การจัด organisation, การเคลียร์สิ่งที่ไม่ได้ใช้, การ export และเทคนิคอื่นๆ อันนี้ขออนุญาตข้ามไปแล้วกันนะฮะ ใครที่สนใจ…อ่านต้นฉบับโลด


สรุปสั้นๆ ว่า เวลาจะทำอะไรขึ้นมาซักอย่าง หรือเวลาจะ comment งาน เราจะคิดถึง

  1. User เค้าเป็นใคร
  2. Environment ที่เค้าจะใช้
  3. Accessibility ใช้งานง่าย
  4. คิดเผื่อ Worst Case เวลา User ใช้งานจริง
  5. Affordance บอกได้ว่า ตัวมันเองมีหน้าที่อะไร
  6. Copy ที่เข้าใจง่าย ให้รู้สึกถึงความเป็นคน
  7. การใช้สีและรูปทรง ไม่เปลี่ยน Norm
  8. Visual Hierarchy เรียงลำดับสิ่งสำคัญ
  9. Typography ให้มันอ่านง่าย
  10. Motion การเข้า การออก
  11. Testing
  12. Prototyping
  13. Organisation

ถึงเวลาจริงๆ จะทำได้ทั้งหมดไม๊… หากเราเข้าใจผิดพลาดประการใด หรือมีอะไรที่ควรรู้เพิ่มเติม ทักท้วง แนะนำมาได้เลยนะฮะ ;)

Like what you read? Give Parima Spd a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.