การใช้งานโปรแกรม Figma เบื้องต้น

โปรแกรม Figma เป็นโปรแกรมสร้างต้นแบบ Prototype ของเว็บไซต์ หรือ เว็บแอพพลิเคชั่น ที่ง่ายและสะดวก สามารถทำงานกันเป็นทีมร่วมกันได้ผ่านระบบคลาวน์

  • เข้าสู่เว็บไซต์ www.figma.com
  • สมัครสมาชิกใหม่ Sign up
  • สามารถลงทะเบียนด้วย google mail
  • ตั้งชื่อ และเลือกว่าเราทำงานทางด้านใด เช่น ทำงานด้านออกแบบ Design
  • กด Create Account
  • เมื่อเข้าสู่โปรแกรมแล้ว จะมีหน้าต่างแสดงวิธีการใช้งานเบื้องต้นให้กด next หรือ กดกากบาท
  • หน้าต่างการใช้งานเป็นดังภาพ
  • ให้สร้างโปรเจคใหม่ โดยให้กดเครื่องหมายกากบาท
  • จะมีหน้าต่างแสดงวิธีการใช้งานเบื้องต้น ให้กด next
  • เริ่มต้นด้วยการสร้างเฟรมงานของเรา กดปุ่ม Frame
  • ในตอนนี้เราจะสร้างขนาดเฟรมให้เหมาะสมกับหน้าจอคอมพิวเตอร์ Desktop จริงๆแล้วเราสามารถสร้างเฟรมให้เหมาะสมกับอุปกรณ์อื่นได้เช่น iPhone, Android phone
  • เมื่อเราสร้างFrameแล้ว เราสามารถกำหนดขนาดของเฟรมได้จากเมนูด้านขวามือ สังเกตด้านซ้ายมือว่าเราทำงานอยู่ที่ Page 1 ที่ Frame ที่ชื่อ Desktop เราสามารถเปลี่ยนชื่อได้โดยการ ดับเบิลคลิ๊ก
  • ตั้งชื่องานเราโดยคลิ๊กที่ด้านบนตรงคำว่า Untitled
  • ลองสร้างวัตถุสี่เหลี่ยม จากเมนู Shape Tools
  • เราสามารถเปลี่ยนสีและรูปแบบจากเมนูด้านซ้ายมือ
  • เราสามารถปรับขอบของสี่เหลี่ยมให้โค้งมนได้
  • สามารถเพิ่มตัวอักษรโดยการกดไอคอนตัว T
  • กำหนดค่าต่างๆ รูปแบบของตัวอักษรได้จากหน้าต่างด้านขวามือ
  • สามารถใช้ Font ภาษาไทยได้โดยอ้างอิงจาก Google fonts https://fonts.google.com/
  • ทดลองใช้ font ชื่อ Kanit
  • เราสามารถเพิ่มรูปภาพได้โดยไปที่เมนู Shape Tools> Place Image
  • และสามารถกำหนดความโปร่งแสงดังภาพ 100%
  • หรือเราสามารถแทรกภาพเข้าไปใน Shape เช่นเราสร้างวงกลมขึ้นมาแล้วกดเปลี่ยนสี แต่ให้เปลี่ยนจาก Solid เป็น Image
  • กดเลือก Choose Image
  • เราสามารถปรับแต่งรูปได้ตามเครื่องมือด้านล่างของรูปภาพ
  • เมื่อเราจะแสดงผลงานของเรา หรือส่งงานที่เราทำให้ผู้อื่น ให้กดปุ่ม Share
  • กำหนดสิทธิ์ในการเข้าถึงงาน และกด Copy link เพื่อทำสำเนาที่อยู่ของงานเรา แล้วส่งลิงค์นี้ให้เพื่อนร่วมงาน หรือแชร์ให้ผู้อื่น
  • สามารถ Export งานเราออกไปเป็นไฟล์รูปภาพ หรือ PDF โดยให้กดปุ่ม + ตรงหน้าต่าง Export ด้านขวามือ กำหนดรูปแบบ และกดปุ่ม Export…

การกำหนดการเชื่อมโยงระหว่างหน้าต่างๆ

  • สร้างFrameใหม่โดยกดไอคอน Frame
  • สร้างหน้าที่สอง และที่สาม เพื่อสร้างการเชื่อมโยงจากหน้าแรกไปหน้าอื่นๆ ในตัวอย่างนี้เราเปลี่ยนชื่อ Frameที่สร้างใหม่ ว่า picture1, picture2, picture3
  • แต่ละหน้าให้นำภาพมาใส่ และสร้างปุ่ม Back เพื่อสร้างการย้อนกลับไปที่หน้าแรก
  • เริ่มการสร้างการเชื่อมโยงโดยกดที่แท็ป Prototype
  • ให้นำเมาส์เรากดคลิ๊กไปที่ปุ่มที่จะสร้างการเชื่อมโยง จะเห็นจุดสีขาวแสดงขึ้นมา
  • ให้กดที่จุดสีขาวแล้วลากการเชื่อมโยงไปยังหน้าที่ต้องการ
  • สร้างการเชื่อมโยงย้อนกลับจากปุ่ม Back กลับไปยังหน้าแรกด้วยดังภาพ
  • ให้ทำแบบเดิมกับทุกปุ่ม
  • สุดท้ายทำการทดสอบโดยกดปุ่ม Present และช่อง Device ให้เลือก Presentation
  • จะแสดงผลดังภาพ
  • เมื่อเรานำเมาส์ชี้ไปที่ปุ่ม Picture 1 จะมีไอคอนมือขึ้นมาเพื่อแสดงว่าเป็นลิงค์และกดเชื่อมโยงไปได้

เขียนโดย

profile5

อ.พฤทธิ์ พุฒจร
สำนักวิชาเทคโนโลยีสารสนเทศ มหาวิทยาลัยแม่ฟ้าหลวง
Google Scholar: https://scholar.google.co.th/citations?user=TPJONrYAAAAJ&hl=en
Research Gate: https://www.researchgate.net/profile/Pruet_Putjorn 

Advertisements

การทำความเข้าใจผู้ใช้งาน Understanding users

การทำความเข้าใจผู้ใช้งาน Understanding users

ตามกระบวนการของการออกแบบโดยการให้ความสำคัญกับผู้ใช้งานหรือมนุษย์เป็นลำดับแรกHuman-centered Design และ กระบวนการออกแบบความคิด DesignThinking การเข้าถึง และการเข้าใจพฤติกรรม ความต้องการของผู้ใช้งานการออกแบบมีความสำคัญมากดังนั้นเราสามารถเก็บข้อมูลจากผู้ใช้งานได้หลากหลายวิธีวิธีที่นิยมใช้กันมากจะประกอบด้วย การทำ EmpathyMapping และ การทำ Persona

1. Empathy Map การใช้แผนภาพใจเขาใจเรา

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

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

รูปที่1. แผนผังใจเขาใจเรา โหลด PDF

ตัวอย่างความหมายของแต่ละช่องของแผนผังใจเขาใจเรา

รูปที่2. แผนผังใจเขาใจเรา และความหมายแต่ละช่อง

ตัวอย่างการสอบถามผู้ใช้งาน User เกี่ยวกับการสร้างนวัตกรรมแอร์

รูปที่3. แผนผังใจเขาใจเรา ตัวอย่างการกรอกข้อมูล

2. Persona การใช้ตารางเพอโซน่า

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

รูปที่4. ตารางเพอโซน่า ตารางข้อมูลตัวแทนของกลุ่ม
โหลด PDF

Technopreneur UX / UI Workshop, Bank of Ayudhya
รูปที่5. ตัวอย่างตารางเพอโซน่า ตารางข้อมูลตัวแทนของกลุ่ม

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

อ้างอิง References

เขียนโดย

profile5

อ.พฤทธิ์ พุฒจร
สำนักวิชาเทคโนโลยีสารสนเทศ มหาวิทยาลัยแม่ฟ้าหลวง
Google Scholar: https://scholar.google.co.th/citations?user=TPJONrYAAAAJ&hl=en
Research Gate: https://www.researchgate.net/profile/Pruet_Putjorn 

การศึกษาการนำ Virtual Reality มาใช้ในผู้สูงอายุ

cover-VR-elderly

Applying VR technology for elderly people

เทคโนโลยีจำลองสภาพแวดล้อมเสมือนจริงสามมิติ Virtual Reality (VR)

เทคโนโลยี Virtual Reality (VR) หรือ เทคโนโลยีจำลองสภาพแวดล้อมเสมือนจริงสามมิติ เป็นเทคโนโลยีการสร้างสื่อปฏิสัมพันธ์ระหว่างผู้ใช้งานกับระบบคอมพิวเตอร์ที่จำลองสภาพแวดล้อมเสมือนจริงสามมิติ ทำให้ผู้ใช้งานระบบเสมือนว่าตนเองอยู่ในสภาพแวดล้อมจำลองนั้นจริงๆ (Immersive environment) โดยผ่านอุปกรณ์แสดงผลภาพและเสียงต่างๆ เช่นแว่นตาสวมศรีษะ (Head-mounted Display) หรือห้องจำลองสภาพแวดล้อม (Cave Automatic Virtual Environment: CAVE)

ในปี 1992 เทคโนโลยี VR ได้มีการกำหนดความหมายว่า “วิธีการที่มนุษย์สามารถมองเห็น ควบคุม และมีปฏิสัมพันธ์กับข้อมูลที่ซับซ้อนกับระบบคอมพิวเตอร์ได้” [6] คำจำกัดความที่สำคัญของระบบ VR ประกอบไปด้วย 1) การมีปฏิสัมพันธ์ (Interaction) ผู้ใช้งานสามารถโต้ตอบ ควบคุมกับระบบได้ด้วยตนเองในสิ่งแวดล้อมสามมิติ  และ 2) การมีส่วนร่วม (Immersion) เหมือนตัวผู้ใช้งานเข้าไปอยู่ในสถานที่ที่ถูกคอมพิวเตอร์จำลองขึ้นมานั้นจริงๆ

ในช่วงแรกของการพัฒนาเทคโนโลยี VR ปี 1990-1970 ได้ให้ความสนใจกับการพัฒนาเทคโนโลยีเพื่อ การแพทย์ การทหาร การจำลองการบิน และยานยนต์ ในปี 2000 เป็นต้นมา เทคโนโลยี Virtual Reality (VR) ได้ถูกพัฒนาเพื่อตอบสนองต่อผู้ใช้งานทั่วไปทางด้านความบันเทิง เช่นเกมคอมพิวเตอร์ หรือภาพยนตร์สามมิติ ในปี 2016 เฟสบุค Facebook และบริษัทเทคโนโลยีชั้นนำของโลกได้ประกาศผลิตสื่อคอนเทน และอุปกรณ์ ที่สนับสนุนเทคโนโลยี VR อย่างเป็นทางการ

ความเป็นจริงเสมือนออกตามวิธีการติดต่อกับผู้ใช้งาน สามารถแบ่งออกเป็น 5 ประเภท [9] ดังนี้

  • Desktop VR or Window on World Systems (WoW) : เป็นการใช้จอภาพธรรมดา(จอคอมพิวเตอร์ทั่วไป) ในการแสดงภาพเสมือนจริง
  • Video Mapping: เป็นการนำวีดีโอมาเป็นอุปกรณ์นำเข้าข้อมูล และใช้เทคนิคคอมพิวเตอร์ในการแสดงผลกราฟิกแบบ WoW ซึ่งมีทั้งแบบสองมิติและสามมิติ ทำให้ผู้ใช้สามารถเห็นตัวเอง และการเปลี่ยนแปลงของตนเองจากจอภาพได้
  • Immersive Systems: เป็นเทคโนโลยีความเป็นจริงเสมือนสำหรับส่วนบุคคล โดยใช้จอภาพสวมศีรษะ ในการแสดงภาพและเสียงของโลกเสมือน
  • Telepresence: เป็นระบบเสมือนจริงที่มีการติดตั้งอุปกรณ์ตรวจจับสัญญาณระยะไกลไว้ที่อุปกรณ์หนึ่ง ซึ่งอาจจะเป็นหุ่นยนต์ หรืออุปกรณ์อิเล็กทรอนิกส์อื่น เพื่อให้เชื่อมต่อการใช้งานเข้ากับผู้ใช้
  • Augmented/Mixed Reality Systems: การรวมกันของ Telepresence กับ Virtual Reality Systems โดยใช้ Telepresence เป็นตัวนำเข้าข้อมูล และ Virtual Reality Systems ในการแสดงผลภาพเสมือนจริงให้กับผู้ใช้ได้เห็น เช่นการแสดงภาพเสมือนจริงสมองของคนไข้ให้กับ ศัลยแพทย์ชม

 การนำเทคโนโลยี VR มาใช้ประโยชน์ทางการแพทย์ [6]

  1. การวิเคราะห์ความสามารถทักษะทางสติปัญญา (Assessment of Cognitive Abilities) เทคโนโลยี VR มีความสามารถที่จะสร้างสภาพแวดล้อมจำลองเพื่อช่วยให้แพทย์ทดสอบความสามารถทักษะทางสติปัญญา เพิ่มความแม่นยำ และถูกต้องมากกว่าการตรวจสอบแบบดั้งเดิม
  2. การฟื้นฟูสมรรถภาพร่างกาย (Rehabilitation Intervention and Training) เทคโนโลยี VR สามารถช่วยให้ผู้ใช้งานมีความสนุกไม่เบื่อหน่ายในการออกกำลัง และเป็นเครื่องมือที่มีราคาถูกสามารถนำไปใช้ในบ้านเรือนได้ด้วยตนเอง ผู้ใช้งานสามารถทำกิจกรรมซ้ำๆได้ และสามารถลดภาระของนักบำบัด
  3. การฝึกปฏิบัติ (Vocational and Social Retraining) การฝึกปฎิบัติกับผู้เชียวชาญ หรือในสถานที่มีความเฉพาะอาจจะเป็นเรื่องยาก หรือจำเป็นต้องใช้งบประมาณมาก เทคโนโลยี VR สามารถเข้ามามีบทบาทในการจำลองสถานที่หรือสถานการณ์เพื่อให้ผู้ใช้งานระบบใช้ฝึกประสบการณ์ และความเชี่ยวชาญได้ อีกทั้งเทคโนโลยี VR สามารถช่วยให้ผู้ใช้งานฝึกพัฒนาตนเองในการอยู่ร่วมกันในสังคม Social interaction สำหรับผู้ที่มีอาการกลัวในการเข้าร่วมกับผู้อื่นในสังคม
  4. การสาธิตและส่งเสริมการเรียนรู้ (Client and Family Education) เทคโนโลยี VR ช่วยให้ผู้ใช้งานสามารถเรียนรู้เข้าใจในสถานการณ์ต่างๆที่เกี่ยวข้องกับการรักษาตนเอง ครอบครัว หรือกิจกรรมมีความเสี่ยงหลักจากการรักษา อีกทั้งเทคโนโลยี VR สามารถสร้างความเห็นอกเห็นใจกันในครอบครัวที่ต้องมีการดูแลรักษาผู้ป่วยอัมพาต หรือผู้ป่วยเด็กที่มีบกพร่องด้านการเคลื่อนไหวของร่างกาย

การศึกษาการนำ Virtual Reality มาใช้ในผู้สูงอายุ

นอกเหนือจากการนำเทคโนโลยี VR มาใช้เพื่อการบันเทิงเป็นหลักแล้ว ในปัจจุบันได้มีการศึกษานำเทคโนโลยีจำลองสภาพแวดล้อมเสมือนจริงสามมิติ Virtual Reality (VR) มาประยุกต์ใช้ในเรื่องของการดูแลสุขภาพกับผู้สูงอายุ [1] เทคโนโลยีนี้สามารถช่วยในการสนับสนุน ส่งเสริมในกิจกรรมการเคลื่อไหว ออกกำลังกาย (Physical activity) ทั้งในบ้านและนอกบ้านได้ (indoor and outdoor) การจำลองสภาพแวดล้อมเสมือนจริงที่มีประสิทธิภาพสามารถปรับเปลี่ยนทัศนคติในแง่ลบ และพฤติกรรมต่อต้านการเคลื่อนไหวร่างกาย หรือการออกกำลังกายของผู้สูงอายุได้ [1]

 การส่งเสริมในกิจกรรมการเคลื่อนไหว ออกกำลังกายด้วย เทคโนโลยีจำลองสภาพแวดล้อมเสมือนจริงสามมิติ Virtual Reality

การให้ความสำคัญในการส่งเสริมกิจกรรมการเคลื่อนไหวในผู้สูงอายุเป็นสิ่งที่สำคัญ การเดินเป็นการเคลื่อนไหวที่จำเป็นและต้องมีการฝึกฝนอยู่ตลอดเวลาในผู้สูงอายุมิฉะนั้นแล้วจะทำให้ผู้สูงอายุเกิดการถดถอยทางการย่างก้าว และเพิ่มโอกาสเสี่ยงของการล้มได้ (Gait variability and fall risk) [2] การออกแบบกิจกรรมการเคลื่อนไหวในกลุ่มผู้สูงอายุควรคำนึงถึงการทรงตัวและปรับสมดุลของร่างกายในสถาณการณ์ที่หลากหลาย การส่งเสริมกิจกรรมการเคลื่อนไหวด้วยเทคโนโลยี VR นั้นสามารถเข้ามามีบทบาทได้ โดยการสร้างสถาณการณ์ สิ่งแวดล้อมจำลองให้ผู้สูงอายุได้ทำการพัฒนาประสิทธิภาพทางด้านการเคลื่อนไหวของร่างกาย และระบบการตัดสินใจ (Brain functions) อีกด้วย

จากการศึกษานำเทคโนโลยี VR มาใช้ในการฟื้นฟูสุขภาพ และระบบการตัดสินใจ [3,4] ระบุว่าเทคโนโลยี VR มีประสิทธิภาพเหนือกว่าการฟื้นฟูสุขภาพแบบดั้งเดิม ดังนี้

  • สามารถจำลองสภาพแวดล้อมที่เสมือนจริงและมีความปลอดภัย สามารถทำได้ในบ้าน ลดความเสี่ยงในการเดินทาง สภาพอากาศแปรปรวน หรือทำกิจกรรมในพื้นที่ที่มีการรบกวน หรือเป็นอันตราย
  • สภาพแวดล้อมที่เสมือนจริงสามารถทำให้ผู้ใช้งานระบบมีความเป็นอิสระ สามารถควบคุมประสบการณ์ในกิจกรรมการฟื้นฟูสุขภาพได้ด้วยตนเอง
  • ระบบ VR สามารถทำการติดตาม และบันทึกผลการเคลื่อนไหว และปฏิสัมพันธ์ของผู้ใช้งานได้ในรูปแบบดิจิทัลบนพื้นฐานของเวลาจริง (Real-time)
  • สามารถสร้างสถานการณ์ในรูปแบบเกม ที่สามารถทำให้ผู้ใช้งานเกิดความสนุกเพลิดเพลิน และกระตุ้นการทำกิจกรรมต่างๆได้ดี

แม้ว่าเทคโนโลยี VR จะมีการนำมาศึกษากันอย่างแพร่หลายแต่ก็ยังมีข้อจำกัดที่จะต้องทำการศึกษาเพิ่มเติม โดย [5] ได้เสนอแนวทางพัฒนาไว้ดังนี้

  • การศึกษาในการนำเทคโนโลยี VR มาใช้ปฏิบัติจริง โดยมุ่งเน้นในการศึกษาการพัฒนากระบวนการทดลอง และนำไปใช้งานจริงกับผู้ใช้งาน (Testing and training methodology)
  • การศึกษาที่เน้นทางด้านการออกแบบส่วนที่ต้องมีการปฏิสัมพันธ์ระหว่างผู้ใช้งานและเทคโนโลยี VR (Human-VR Interaction) เช่น การออกแบบหน้าจอ (User experience/User interface) การออกแบบสภาพแวดล้อมจำลอง และสถาณการณ์ที่สอดคล้องกับผู้ใช้งานระบบที่มีความแตกต่างกันออกไป เพื่อการยกระดับ ส่งเสริมข้อจำกัดและการต่อต้านของารใช้งานเทคโนโลยี VR ในกลุ่มผู้สูงอายุ
  • การศึกษาการยกระดับการมีส่วนร่วมของผู้ใช้งานระบบกับสภาพแวดล้อมจำลอง โดยการนำเสนอในรูปแบบของเกม หรือการสร้างประสบการณ์เสริมแบบอื่นเพิ่มเติม เช่นการใช้เสียงกระตุ้นการรับรู้

 

เอกสารอ้างอิง References

  1. De Bruin, E. D., Schoene, D., Pichierri, G., & Smith, S. T. (2010). Use of virtual reality technique for the training of motor control in the elderly. Zeitschrift für Gerontologie und Geriatrie43(4), 229-234.
  2. Hausdorff, J. M., Rios, D. A., & Edelberg, H. K. (2001). Gait variability and fall risk in community-living older adults: a 1-year prospective study. Archives of physical medicine and rehabilitation82(8), 1050-1056.
  3. Zelinski, E. M., & Reyes, R. (2009). Cognitive benefits of computer games for older adults. Gerontechnology: international journal on the fundamental aspects of technology to serve the ageing society8(4), 220.
  4. Van Schaik, P., Blake, J., Pernet, F., Spears, I., & Fencott, C. (2008). Virtual augmented exercise gaming for older adults. CyberPsychology & Behavior11(1), 103-106.
  5. Rizzo, A. S., & Kim, G. J. (2005). A SWOT analysis of the field of virtual reality rehabilitation and therapy. Presence: Teleoperators & Virtual Environments14(2), 119-146.
  6. Schultheis, M. T., & Rizzo, A. A. (2001). The application of virtual reality technology in rehabilitation. Rehabilitation psychology46(3), 296.
  7. พจน์ ศิริ นท ร์ ลิ ม ปิ นันทน์. เทคโนโลยี ความเป็นจริงเสริมส่งเสริมความคงทนในการจำคำศัพท์ภาษาอังกฤษ.Journal of Information Technology Management and Innovation4(2), 7-16.
  8. Pantae Reporter, http://pantae.com/content/532/เจาะลึก+VR+เทคโนโลยีที่น่าจับตามองแห่งปี+2018

เขียนโดย

profile5
อ.พฤทธิ์ พุฒจร
สำนักวิชาเทคโนโลยีสารสนเทศ มหาวิทยาลัยแม่ฟ้าหลวง
Google Scholar: https://scholar.google.co.th/citations?user=TPJONrYAAAAJ&hl=en
Research Gate: https://www.researchgate.net/profile/Pruet_Putjorn