ส่วนประกอบสำคัญของการออกแบบมือถือและวิธีการ UX

เผยแพร่แล้ว: 2016-04-15

โครงการมือถือสามารถอยู่หรือตายในการออกแบบ คอลัมน์นี้กล่าวถึงความสำคัญของวิธีการออกแบบ โดยกล่าวถึงขั้นตอนการออกแบบดิจิทัลที่หน่วยงานด้านแผนที่ของสหราชอาณาจักร Ordinance Survey (OS) อย่างละเอียดถี่ถ้วน

ในขณะที่การพัฒนามือถือนั้นมีรากฐานมาจากวิธีการที่สืบทอดมาจากการพัฒนาเว็บและซอฟต์แวร์ – Waterfall หรือ Agile; Scrum และ Kanban – ไม่มีวิธีการมาตรฐานอุตสาหกรรมสำหรับขั้นตอนการออกแบบโครงการมือถือของคุณ

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

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

ขั้นตอนในกระบวนการนี้ได้แก่:

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

มีเทคนิคและเครื่องมือการออกแบบและ UX ที่หลากหลายซึ่งบริษัท/เอเจนซีอาจใช้เพื่อให้บรรลุสิ่งนี้ ซึ่งเราจะตรวจสอบในรายละเอียดในคอลัมน์ที่ต่อเนื่องกัน

ซึ่งรวมถึงสตอรีบอร์ด, การทำแผนที่การเดินทางของผู้ใช้, แผนที่ความคิด, บุคคล, โครงลวด, การสร้างต้นแบบ และผลิตภัณฑ์ขั้นต่ำที่ทำงานได้

น้ำตกหรือเปรียวหรือไม่?

วิธีการดั้งเดิมสำหรับการพัฒนาซอฟต์แวร์ มักจะเรียกว่า Waterfall เป็นกระบวนการเชิงเส้นของขั้นตอนที่กำหนดไว้: การวิจัย -> การออกแบบ -> การพัฒนา -> การทดสอบ -> การปรับใช้ (หรือคล้ายกัน)

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

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

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

หนึ่งในภาพประกอบที่ดีที่สุดของ Waterfall and Agile คือตัวอย่างต่อไปนี้จาก CommonPlaces เอเจนซี่การออกแบบเว็บในสหรัฐอเมริกา (นิวแฮมป์เชียร์) อย่างไรก็ตาม หน่วยงานนี้ ก็เหมือนกับหลายๆ คนที่ใช้การผสมผสานระหว่างสองแนวทางนี้

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

Bespoke v วิธีการออกแบบนอกชั้นวาง

ตามที่ระบุไว้ก่อนหน้านี้ ไม่มีวิธีการที่ยอมรับกันทั่วไปสำหรับการออกแบบโครงการบนมือถือ ไม่มีกระบวนการใดที่เทียบเท่ากับกระบวนการของนักพัฒนา เช่น Scrum หรือ Kanban แต่บริษัทและหน่วยงานหลายแห่งได้พัฒนาวิธีการของตนเองขึ้นเอง โดยบางบริษัทได้ไปแบ่งปันวิธีการเหล่านี้กับบริษัทอื่น

หนึ่งในนั้นคือวิธีการ UX แบบลีนที่ Greg Nudelman ผู้เชี่ยวชาญด้านการออกแบบอุปกรณ์พกพา ซีอีโอของ DesignCaffeine บริษัทตัวแทนออกแบบเรียก Prototype มูลค่า 1 ดอลลาร์ กระบวนการนี้ถูกใช้ในโครงการมือถือสำหรับแอพ Intuit, Wells Fargo, USAA และ Oracle และเป็นพื้นฐานสำหรับหลักสูตรการออกแบบ UX ของเขา

NB $1 ไม่ใช่ราคาของหนังสือ นี่คือราคาของกระดาษโน้ตสองแพ็ค Nudelman ให้เหตุผลอย่างน่าเชื่อถือว่าบันทึกย่อช่วยเตือนเป็นเครื่องมือที่สำคัญที่สุดสำหรับการทำสตอรีบอร์ดและการทำโครงงานมือถือ ภาพด้านล่างแสดงโครงการเคลื่อนที่ที่ร่างโดยนักเรียนของ Nudelman บางคนโดยใช้วิธีนี้

เราจะพิจารณาคุณค่าของปากกาและกระดาษ – และกระดาษโน้ต – ในกระบวนการออกแบบดิจิทัลในคอลัมน์ถัดไป

วิธีการออกแบบในทางปฏิบัติ: Ordinance Survey Maps

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

Ordinance Survey ซึ่งเป็นบริการทำแผนที่ของสหราชอาณาจักรได้คัดเลือก Ben Scott-Robinson ผู้ร่วมก่อตั้ง We Love Mobile ซึ่งเป็นหน่วยงานที่บุกเบิกในสหราชอาณาจักร เพื่อจัดตั้งหน่วยงานภายในเพื่อส่งมอบผลิตภัณฑ์และบริการดิจิทัล

นี่คือ Ben Scott-Robinson หัวหน้าฝ่ายสรุปกระบวนการออกแบบของ Agency at Ordnance Survey สำหรับโครงการดิจิทัล OS:

ทีมงาน OS Agency ดำเนินการออกแบบ Sprint เมื่อเริ่มต้นโครงการ เราเริ่มต้นด้วยการบรรยายที่สรุปการมีส่วนร่วมทางอารมณ์ที่เราต้องการบรรลุกับลูกค้าของเรา และใช้เป็นพื้นฐานในการเริ่มทำงานผ่านเส้นทางของผู้ใช้

ตัวอย่างเช่น ด้วย OS Maps เรามุ่งเน้นที่การสร้างประสบการณ์ที่เรียกว่า Emotive Mapping เราถามว่า:
เราจะนำเสียงสะท้อนทางอารมณ์ที่ผู้คนมีด้วยแผนที่กระดาษโดยทั่วไปและระบบปฏิบัติการโดยเฉพาะมาสู่พื้นที่ดิจิทัลได้อย่างไร
เราจะผลิตแผนที่ที่เป็นมากกว่าการใช้งาน แต่ได้รับการสร้างขึ้นอย่างชัดเจนเพื่อให้เกิดการมีส่วนร่วมทางอารมณ์ในเชิงบวกได้อย่างไร
เราจะนำผู้คนจากแนวคิดของ 'ที่ตั้ง' เป็นแนวคิดของ 'สถานที่' ได้อย่างไร?
การมุ่งเน้นนี้ขับเคลื่อนโดยการมีส่วนร่วมของลูกค้าที่มีอยู่กับแผนที่กระดาษ OS แบบดั้งเดิม และความรู้สึกของความเชื่อและความมั่นใจในการทำความเข้าใจสภาพแวดล้อมในทันที มากกว่าแค่รู้ว่าพวกเขาอยู่ที่ไหน
จากที่นี่เราทำงานในลักษณะที่ค่อนข้างเป็นมาตรฐาน เรา:

สร้างรายการผลประโยชน์ที่เป็นไปได้ซึ่งเติมเต็มการบรรยาย และจัดเรียงการ์ดตามตัวแทนของประเภทผู้ชม
เราจึงสร้างการเดินทางของผู้ใช้และสตอรี่บอร์ดรอบๆ ตัวพวกเขา พวกนี้มักจะถูกหลอก
ทดสอบการเดินทางของผู้ชมประเภทต่างๆ อีกครั้ง (ทดสอบกับเกณฑ์ที่กำหนดไว้รอบการเล่าเรื่องเสมอ) จากนั้นจึงเริ่มคิดที่แตกต่างกันเกี่ยวกับอินเทอร์เฟซ
ค้นหาประเภทอินเทอร์เฟซ จากนั้นเริ่มร่างอินเทอร์เฟซ
สร้างต้นแบบที่คลิกได้จากภาพสเก็ตช์เหล่านี้ โดยใช้ Marvel และใช้การทดสอบระยะไกล เช่น usertesting.com ตามปกติ เพื่อทดสอบว่าสิ่งใดได้ผล
เริ่มสร้างต้นแบบรายละเอียดของประสบการณ์เฉพาะใน Axure (แอปแผนที่มักจะเป็นประสบการณ์หน้าจอเดียวที่มีการโต้ตอบหลายแบบซึ่งต้องใช้เครื่องมือที่ซับซ้อนมาก)
ตรวจสอบกับนักพัฒนาเพื่อดูว่าการออกแบบของเราเป็นไปได้หรือไม่!
ทดสอบจากระยะไกลอีกครั้งเพื่อตัดแกลบ จากนั้นทดสอบกับประเภทผู้ชมเพื่อดูความคิดเห็นโดยละเอียดเพิ่มเติม
เริ่มรวมประสบการณ์ต่างๆ เข้าด้วยกันในผลิตภัณฑ์ - อีกครั้งโดยใช้ Axure - และเริ่มลดความซับซ้อนและปรับการโต้ตอบ
จากนั้นนักออกแบบภาพก็เข้ามามีส่วนร่วม และเราเริ่มสร้างรูปแบบการออกแบบและการออกแบบหน้าจอทั้งหมด ซึ่งรวมอยู่ในต้นแบบ เรายังดูที่การออกแบบทรานซิชันและแอนิเมชั่น
ทดสอบและทดสอบอีกครั้ง จากนั้นเราจึงนำนักพัฒนาเข้ามาเริ่มสร้างการออกแบบ
UX และนักออกแบบภาพได้รับมอบหมายให้ทำงานร่วมกับทีมพัฒนาในกระบวนการ Agile มีส่วนร่วมในการวางแผนและสนับสนุนคำถาม ให้การแก้ไขทันที และทำงานผ่านกรณีต่างๆ OS มีแนวโน้มที่จะใช้แนวทาง Kanban มากกว่า Scrum เนื่องจากมีความยืดหยุ่นมากกว่า และมีค่าใช้จ่ายในการวางแผนน้อยกว่าในทีมพัฒนา

นี่คือตอนที่ 16 ของซีรีส์ 'DNA of mobile-friendly web' ของ ClickZ

___
โดย Andy Favell