ออกแบบ Icon สำหรับ OSX

วันนี้น้องใน office เกือบได้วาด icon สำหรับ OSX เลยได้รื้อฟื้นเอกสารเก่าที่เคยอ่านมา ว่าการออกแบบ icon บน OSX นั้น ไม่ใช่ออกแบบกันตามใจชอบนะ แต่มันมีหลักในการออกแบบอยู่

ภาพตัวอย่าง icon บน OSX

เราจะสังเกตเห็นว่าถึงแม้ Icon จะมาจาก Apple เอง ก็ยังมีความแตกต่างที่ไม่เข้าพวกกัน ในที่นี้อยากให้ลองสังเกตเงาและองศาในการมองครับ

มุมในการวาด Icon ของ Application

ตาม Guideline ของ Apple ระบุว่า ถ้ากำลังวาดภาพ Icon ของ Application ให้วาดในมุมกด เสมือน Icon นั้นวางไว้บนโต๊ะแล้วฉายกล้องกดลงไปได้ภาพวัตถุมุมเอียง ส่วนเงาก็จะพาดลงไปบนโต๊ะเพราะแสงส่องมาจากด้านบน

มุมในการวาด Icon ของ Utility

สำหรับ Icon ของ Utility จะวาดเหมือนของชิ้นนั้นแขวนไว้บนผนัง แล้วถ่ายภาพตั้งฉากกับผนัง ดังนั้นจึงมักเห็น Icon ของ Utility เป็นแบบแบนๆ ส่วนเงาก็ไม่ได้ทอดลงมาด้านล่างมากนักเพราะมันวางชิดกับผนัง

มุมในการวาด Icon ของ Utility ที่เป็น 3D

บาง Icon ถึงจะเป็น Utility แต่คนออกแบบจงใจวาดเป็นวัตถุ ก็จะได้รับการยกเว้นไม่ต้องไปแขวนอยู่บนผนังให้วางไว้บนพื้นได้ แต่มุมในการถ่ายยังเป็นมุมตั้งฉากกับผนังอยู่ดี

มุมในการวาด Icon บน Toolbar

มุมในการวาด Icon สำหรับ Toolbar โดยหลักๆ จะเหมือนกับ Utility แต่มันจะมีรายละเอียดมากกว่า อยากให้ลองไปอ่านเพิ่มเติมที่ Designing Toolbar Icons ครับ

เทียบภาพ Icon สำหรับ Utitlity และ Application

จากภาพ Icon ของ System Preference และ Icon ของ Contact จะเห็นว่าผลลัพธ์ที่ออกมามีลักษณะไม่เหมือนกันตามหลักการออกแบบด้านบน ซึ่งผมเชื่อว่าถึงแม้ผู้ใช้จะไม่ทันสังเกตแต่เค้าสามารถรู้สึกได้ครับ ยิ่งถ้าทุก Application, Utility มันทำมาแนวเดียวกันหมด ผู้ใช้ก็จะได้รับการสอนโดยอัตโนมัติ และช่วยลดเวลาในการจำแนก Application ได้ ช่วยสร้างประสบการณ์ที่ดีให้กับผู้ใช้ครับ :-)

อ้างอิง - OSX HIG

One & Co บริษัทที่ออกแบบมือถือให้ HTC

วันนี้ได้อ่านบทความจาก thumbsup.in.th ว่ามีคนไทยคนหนึ่ง อยู่บริษัท One & Co แล้วได้มีส่วนในการออกแบบมือถือ HTC เลยเกิดความสงสัยว่า สิ่งสำคัญอย่างรูปแบบของมือถือ น่าจะเป็นสิ่งที่สำคัญมากๆ สำหรับบริษัทแบบ HTC ทำไมถืงไม่ระดมคนเข้ามาอยู่ในบริษัท หรือทำไมไม่ซื้อบริษัท One & Co  ไปซะเลย

เมื่อเกิดความสงสัยจึงลองค้นๆ ดูจาก youtube ครับ

วีดีโอนำเสนอปรัชญาการออกแบบของ One & Co

หลังจากดูไปแล้วก็ยังไม่ได้คำตอบว่าทำไม HTC ไม่ซื้อ One & Co แต่ได้ความรู้สึกว่างานในแต่ละวันของเรา ยังไม่เคยได้จัดเต็มขนาดเค้าเลย พวกนี้เค้าลงไปศึกษาผู้ใช้จริงๆ พยายามสร้างประสบการณ์ผู้ใช้กันแบบเต็มๆ ทำเอาอิจฉาเลย

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

วีดีโออธิบายโครงการ Shop Spot

สำหรับบริษัท Software ของไทยผมคิดว่าโปรแกรม Shop Spot เป็นหนึ่งในโปรแกรมที่จัดเต็มเรื่องนี้ ลองดูตัวอย่างวีดีโองอธิบายโปรแกรมของเค้าก่อน ส่วนวีดีโอที่เกี่ยวกับ UX จะลองถามเค้ามาอีกทีนึงครับ วันก่อนไปคุยกันที่งาน ux.in.th @ the sync แต่ไม่นึกว่าจะหาบน youtube ไม่เจอ :'(

Pictogram: รูปภาพแทนข้อมูล

เราจะเห็นการใช้งานรูปภาพแทนข้อมูลกันอยู่บ่อยๆ โดยเฉพาะตามสถานที่ที่จะต้องให้ข้อมูลที่จำเป็นแต่ผู้รับข้อมูลมีจำนวนมากและมีเวลาน้อย เช่น

• สนามบิน
• บนนถนน
• ในอาคาร

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

ค้นต่อไปอีกนิดก็เจอว่า Department of Transportation (DoT - กระทรวงคมนาคม) ของสหรัฐอเมริกา น่าจะเป็นหน่วยงานรัฐหน่วยงานแรกๆ ของโลกที่ปรับใช้ Pictograms มาใช้ในการทำเป็นสัญลักษณ์แทนข้อมูลสำหรับคนเดินทาง โดยมี pictograms ทั้งหมด 50 ชิ้น ที่ครอบคลุมบริการสาธารณะต่างๆ โดยมีสัญญาอนุญาตเป็นสาธารณสมบัติให้บุคคลทั่วไปสามารถนำไปใช้งานได้โดยเสรี เอกสารที่ใกล้เคียงที่สุดเท่าที่หาเจอชื่อว่า In-Vehicle Display Icons and Other Information Elements

ของไทยก็มี มอก. ดูแลมาตรฐานนี้อยู่ภายใต้ มอก. 843-2532 สัญลักษณ์ตัวควบคุม ตัวชี้บอก และตัวแสดงของยานยนต์ทางบก เอกสารค่อนข้างเก่ามากและไม่มีตัวอย่างรูปให้ดู แต่ก็น่าจะสืบทอดมาจาก ISO 7001 อีกทีหนึ่ง

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

ควรมี Logo สองแบบหรือเปล่า

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

ตัวอย่าง Logo สมติขึ้นมา

รูปด้านซ้ายมือเป็น Logo ตัวเต็มที่ใช้กันเป็นปกติ ส่วน Logo ทางขวาสุดเป็นแบบที่ถูกย่อขนาดลงมา เราจะเห็นว่า Logo ทั้งสองตัวหน้าตาดูไม่เหมือนกัน ทั้งๆ ที่มันเป็น Logo เดียวกัน

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

นี่เป็นสาเหตุหนึ่งที่เราควรมี Logo แบบที่สอง เพื่อใช้ในงานที่ต่างกัน เช่น ขนาดต่างกัน เป็นต้น

Podcast: Do you need a second logo?

ที่มาของตัวอย่างมาจาก Video ข้างบนนี้ครับ เป็นนิตยสาร Before & After Magazine เค้าสอนหลายอย่างเกี่ยวกับการออกแบบ และแน่นอนมันสะท้อนถึงความใส่ใจใน User Experience ด้วย

Natural Mapping บนปุ่ม เพิ่ม-ลด เสียง

เรามักจะได้ยินกันบ่อยๆ ว่าการออกแบบที่ดีคือการออกแบบที่ผู้ใช้ไม่ต้องคิดว่าจะต้องใช้มันอย่างไร ซึ่งมันพูดง่าย แต่ทำโคตรยากด้วยข้อจำกัดต่างๆ เช่น

• ข้อจำกัดทางกายภาพของผู้ใช้เอง เช่น ผู้ใช้ถนัดซ้าย ถนัดขวา
• ข้อจำกัดทางวัฒนธรรม เช่น สีเดียวกัน แต่วัฒนธรรมต่างกันก็ตีความมันต่างกัน

ทีนี้เวลาออกแบบคนออกแบบก็เลยจะต้องพยายามออกแบบโดยพยายามให้ผู้ใช้ใช้ความรู้ที่มีอยู่แล้วและสิ่งที่เกือบจะเป็นสัจจะนิรันดร์ที่คนเกือบทั้งหมดน่าจะเข้าใจได้ตรงกันมาเป็นฐานในการออกแบบ อันนี้หนังสือ Design of Everyday things เรียกว่าเป็น ความรู้ที่มีอยู่บนโลก คงเปรียบได้ประมาณ มันอยู่ตรงนั้นแหล่ะ เห็นก็เรียนรู้ได้แล้ว

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

พวงมาลัยรถ Mazda 3 รุ่นปี 2010

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

การทำแบบนี้ยังเห็นได้จากในอีกหลายๆ ส่วนของการควบคุมรถยนต์เช่น ทำไมดันก้านไฟเลี้ยวขึ้นจึงเป็นการเลี้ยวซ้าย กดไฟเลี้ยวลงจึงเป็นการเลี้ยวขวา ปุ่มปรับแอร์ ฯ

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

ทางขึ้นสะพานลอยที่จักรยานเข้าถึงได้

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

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

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

เมื่อเดือนที่แล้วผมมีโอกาสไปเที่ยวทำงานที่เกาหลี สังเกตเห็นเห็นว่าสะพานลอยแถวๆ ที่พักเขาทำร่องกว้างประมาณ 20 ซ.ม. ไว้ที่ด้านขวาทางทางเดินดังรูป

ร่องด้านขวาของทางขึ้นสะพานลอยที่เกาหลี รูปนี่ถ่ายจากข้างบนไปข้างล่าง ร่องจึงอยู่ด้านซ้ายของภาพ

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

เนื้อหาที่ไม่เกี่ยวข้องกับ UX โดยตรง แต่อยากแนะนำให้อ่านเพิ่มเติม

• สำนึกของเสาอัมสเตอร์ดัม - http://thaipublica.org/2012/01/amsterdammertjes-little-one-from-amsterdam/
• จักรยานกับประชาธิปไตย - http://thaipublica.org/2012/04/bicycle-and-democracy/

การออกแบบ UX หน้าจอแรกของ DoctorMe

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

DoctorMe เป็นโปรแกรมเพื่อการรักษาสุขภาพด้วยตัวเองบน iOS และ Android พอดีได้มีส่วนร่วมในการออกแบบ interaction และ UX ทั้งหมดของโปรแกรม

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

• อาการเฉพาะส่วนต่างๆ ของร่างกาย
• อาการที่เกิดขึ้นที่ใดก็ได้

 ร่างแรกที่ทีมทำกันออกมาทีมนึกถึงกันว่าเนื่องจากเป็นเรื่องสุขภาพเลยทำเป็นแบบนี้

DoctorMe สำหรับ iOS ร่างแรก

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

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

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

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

และรุ่นสุดท้ายที่เปิดให้ดาวน์โหลดก็เป็นรูปร่างแบบนี้

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

UX ของ Olympic 2012

Nick Haley ซึ่งเป็น Head of User Experience and Design for Sport & London 2012 ที่ BBC Future Media ได้เขียน Blog เผยเบื้องหลังการพัฒนาและออกแบบ Application และ เว็บไซต์ ทั้งบน iPhone Android และ Desktop Browser ไว้อย่างน่าสนใจ

บรรยากาศการทำงาน

Nick เล่าให้ฟังว่า Vision สำหรับ 2012 คือ "Never miss a moment" ซึ่งตอนแรกเค้าคิดจะทำเฉพาะส่วน Live Interactive Video Player แต่สุดท้ายมันขยายครอบคลุมทั้ง Olympic เลย

ตลอดเวลาที่เค้าออกแบบเว็บ Sport ของ BBC ขึ้นมาใหม่ เค้าจะมีประโยคที่เป็นแนวทางคือ "Live Beyond Live" ซึ่งในบทความไม่ได้บอกว่าเค้าทำอย่างไร แต่เค้าบอกว่าเค้าพยายามหาทางที่จะสื่อให้คนรู้ว่า content ไหนเป็น Live ตัวไหนไม่เป็น Live

สีฟ้าแสดงว่าเป็น Live

สุดท้ายเค้าเช้าสี ในการแยก โดยถ้าส่วนไหนที่มีสีฟ้า แสดงว่ามันเป็น Live และ เราแนวทางนี้ไม่ได้ใช้มันเฉพาะใน Web Desktop นะ แต่เราใช้มันบนมือถือและทีวีด้วย

Branding ของ Web Desktop, Web Mobile, iPhone, Android

รูปด้านบนแสดงให้ดูว่าแต่ละ Platform จะมีตัว Navigation ที่ใหม่เหมือนกัน ขึ้นอยู่กับแนวทางของ Platform นั้นๆ แต่ทุกตัวยังคงรักษา Branding เป็นชุดเดียวกันเสมอ นี่ก็เป็นหนึ่งในความใส่ใจของคนออกแบบ

ผมมองว่านี่เป็นอีกหนึ่งตัวอย่างของการออกแบบที่คิดมามาก และถ้าเราเข้าไปศึกษา เราจะได้ความรู้จากงานออกแบบนี้แน่นอน ดังนั้นสำหรับคนที่สนใจ สามารถเข้าไปดูได้ที่ BBC Olympic design ครับ

 ที่มา: http://www.bbc.co.uk/blogs/bbcinternet/

Microsoft แสดงหน้าจอ Metro สำหรับงาน Enterprise

หลายคนพอเห็น Theme Metro มักจะนึกว่า รูปแบบโล่งๆ แบบนี้เวลาเอาไปทำงาน Enterprise ที่มันซับซ้อนมากๆ จะออกแบบให้มันเข้ากับ Metro ได้อย่างไร

ช่วงต้นปี Microsoft เปิด video keynote บนเว็บ msconvergence.com แสดงให้เราดูว่าเจ้า Metro ก็สามารถเป็น Enterprise Application ได้เหมือนกันนะ

หน้าจอ Dashboard

หน้าจอบริหารงาน Finance แบบภาพรวม

หน้าจอรายละเอียดทาง Finance แบบสองส่วนในหน้าเดียว

หน้าจอรายละเอียดทาง Finance แบบตาราง

หน้าจอ Approve Project

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

ผมยังนึกหน้าจอตอนที่กรอก Invoice ด้วย Metro ไม่ออก แต่เท่าที่เห็นในภาพก็มีแนวโน้มจะทำได้ดีครับ

ที่มา - get-spblog.com

Outlook New look พื้นที่ทำงาน

โปรแกรม mail กลายเป็นโปรแกรมสำคัญเพื่อให้ ecosystem ของทั้่ง google, microsoft และ apple สมบูรณ์ ดังนั้นเราจึงสามารถวิเคราะห์ยุทธศาสตร์ที่แต่ค่ายวางแผนไว้ได้โดยผ่านโปรแกรม Mail ที่ทั้งสามค่าส่งออกมา

ล่าสุดทาง Microsoft ปรับปรุง Outlook เพื่อให้เข้ากับแผน "Metro" ที่ได้วางเอาไว้

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

ยิ่งหน้าจอแบบ Metro บังคับให้ Microsoft ตัดความฟุ่มเฟือยทิ้งไปทั้งหมด ไม่ว่าจะเป็น Logo Microsoft, Banner ด้านบน, Menu ที่เชื่อมไปยังบริการอื่นๆ, การ custom photo themes, ช่องค้นหาของ bing ทั้งหมดถูกตัดออกจน Outlook เรียบร้อยมากขึ้น ดูสมกับเป็น Metro และที่สำคัญคือมันช่วยลดระยะเวลาในการเรียนรู้ของผู้ใช้ลงไปได้มาก

แต่ถ้าเทียบกับคู่แข่งทั้ง Google และ Mac ผมมองว่าจุดยืนของ Microsoft เป็นจุดที่ต้องทำการบ้านหนักกว่าคู่แข่งทั้งสองมากๆ 

เมื่อลองเทียบกับ Google จะเห็นว่า Google ยังคงความเป็น web เอาไว้ และ แยกหน้าจอ Subject ออกจากหน้าจอเนื้อหา mail ทำให้สามารถแสดงข้อมูลของ Mail เยอะในแบบที่คนที่ใช้ Mail แบบ Hardcore ต้องการ

สำหรับ Apple  จะมีหน้าตาเป็น Application ชัดเจน โดยเน้นเอา Element ต่างๆ ของ Application ในไว้บนเว็บ ตัดตัวหนังสือ และคำสั่งออกไปเป็นจำนวนมาก คงเหลือไว้แต่คำสั่งที่ใช้กันบ่อยๆ อันไหนที่ไม่ค่อยได้ใช้ก็จะซ่อนเอาไว้ และจะใช้ได้ก็ต่อเมื่อเป็นผู้ใช้เริ่มเรียนรู้มากขึ้น เช่น เราสามารถเลือก mail ทีละหลายๆ อันได้ แต่ต้องกด shift หรือ control ค้างไว้ เป็นต้น Apple จึงเหมาะกับผู้ใช้ตามบ้าน ไม่ใช้คนที่ใช้ Mail จริงๆ จังๆ

จากการออกแบบที่ดูยากก็ไม่ยาก ง่ายก็ไม่ง่ายนักเราเลยเดาว่า Outlook ต้องการให้ทั้งผู้ใช้ตามบ้าน และผู้ใช้แบบ Hardcore สามารถใช้ได้ทั้งคู่ คือทั้งสองคนต้องมีความสุขกับ ​Outlook ไม่ว่าคุณจะส่ง Mail วันละแค่สองสามฉบับ หรืองานของคุณคือการส่ง mail ทั้งวัน Outlook จึงดูกึ่งๆ ไม่เป็นทั้ง Pro และ Home

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

Google มีพื่นที่แนวกว้าง ไม่เหมาะกับ วีดีโอ และรูปภาพ แต่น่าจะเหมาะสำหรับการอ่าน Text โดยยอมแลกพื้นที่ด้านบนเพื่อแสดงความเป็น Google ผ่าน search ขนาดใหญ่ คน google อาจจะคิดว่ากลุ่มเป้าหมายของเค้าเป็นคนจอใหญ่ ไม่ใช่คนที่ใช้จอเล็กๆ กว้างๆ ซึ่งปกติพวก Pro มักมีจอใหญ่

Apple ให้ความสำคัญกับพื่นที่เนื้อหา Mail เป็น  50% ของจอ และแทบจะเป็นสี่เหลี่ยมจัตตุรัส แสดงว่าเน้นข้อมูลที่เป็นรูปภาพ หรือ Multimedia มากกว่า Text ทำให้คิดว่า iCloud เหมาะกับผู้ใช้บ้านๆ ที่เน้นส่งรูปหากันมากกว่า

Microsoft มีขนาดของพื้นที่น้อยที่สุด แต่ก็มีขนาดเป็นสี่เหลี่ยมเช่นเดียวกัน ก็พอจะเดาได้ว่าเน้น Multimedia เหมือนกัน แสดงว่าตั้งจะจับกลุ่มบ้านๆ ด้วย แต่ก็ไม่ได้ทิ้งกลุ่ม Pro เพราะถ้าสังเกตุในช่องแสดงเนื้อหา Mail จะมีส่วนที่เป็นข้อมูลประกอบ Mail สูงเป็น 1 ใน 5 ของเนื้อที่เลยทีเดียวครับ

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

ส่วนตัวผมมีความสุขกับการใช้ gmail เพราะมี function ครบและ function ต่างๆ มันกระจายอยู่ตาม content ที่มันจะ action ด้วย จึงทำให้หาง่าย ติดที่มันให้พื้นที่ใช้งานน้อยมากทำให้ขัดใจอยู่เสมอโดยเฉพาะตอนดูรูป ส่วนของ mac ผมสามารถใช้ Application ได้สะดวกกว่า จึงไม่ค่อยเปิด iCloud ขึ้นมาใช้ครับ