Design Exciteเรื่องเด๊นเด่น 10 Design Details, So in Details (10 ดีไซน์เจ๋ง เก่งรายละเอียด) By uiblogaziner August 23, 20164649 views ShareTweet 1 การออกแบบ UI ผมมองว่า เราอาจสามารถแบ่งได้ออกเป็น 2 ช่วงเวลาหลักๆ คือ ช่วงแรก – การออกแบบ UI โดยเน้นเพื่อให้บรรลุวัตถุประสงค์หลักการใช้งาน เช่น การออกแบบเมนูเพื่อให้เลือกหัวข้อเนื้อหาที่ต้องการได้ ช่วงสอง – การออกแบบ UI โดยเน้นเสริมสร้างประสบการณ์การใช้งานพื้นฐานให้ดียิ่งขึ้น เช่น การทำ UI ปฏิทินให้แสดงเดือนให้เห็น 2 เดือน การออกแบบในช่วงที่ 2 นี่แหละครับที่มีความสนุกอย่าบอกใคร เพราะเราไม่ต้องไปกังวลเรื่องฟังก์ชันหลักที่จะทำงานไม่ได้ แต่เรากำลังออกแบบงานดีไซน์ที่เน้นเรื่องอารมณ์หรือประสบการณ์สุดเซอร์ไพส์ให้ยูสเซอร์ได้ตื่นตาตื่นใจ (Emotional Design) และสัมผัสกับสุนทรียภาพด้าน UI อย่างเต็มที่ ผมได้รวบรวมประสบการณ์สุดยอดของหลายเว็บไซต์ที่เข้าสู่ช่วงที่ 2 แล้วก็มีหยิบยืมมาจากเว็บ Little Big Details (เว็บแชร์ประสบการณ์ WOW เกี่ยวกับ UX) เพื่อให้เราได้เห็นและเอาเยี่ยงอย่าง 10 design สุดเจ๋งกู๊ดไอเดียเหล่านี้ 1. Amazon.com – เมนูฉลาดสุดๆ เมนูประเภทสินค้าที่มีการหน่วงการเลือกเมนูเมื่อเลื่อนเมาส์ไปทางด้านขวาล่างแล้วไปโดนเมนูที่อยู่ข้างล่าง ผมได้เคยรีวิวเรื่องเมนูของเว็บ Amazon.com ไปอย่างละเอียดแล้วในบทความ เมนูฉลาดสุดๆ ของ Amazon.com สามารถอ่านย้อนหลังได้ครับ แต่ขอเล่าย่อๆ ว่าเมนูเลือกประเภทสินค้าของเว็บ Amazon จะหน่วงการเลือกเมื่อเราเลื่อนเมาส์เฉียงไปทางด้านขวาล่าง โดยที่เว็บจะไม่คิดว่าเราไปเลือกเมนูที่อยู่ด้านล่าง ทำให้ซับเมนูทางด้านขวาแสดงผลถูกต้องตามพฤติกรรมการเลื่อนเมาส์ของยูสเซอร์ 2. Windows – มหัศจรรย์ปุ่ม Show Desktop ปุ่ม Show Desktop ที่ไปปะปนกับปุ่มอื่นๆ บน Windows รุ่นก่อนๆ UI นี้ได้เคยนำเสนอไปแล้วในตอน มหัศจรรย์ปุ่ม Show Desktop ปุ่มนี้เมื่อกดแล้วจะทำให้หน้าต่างทั้งหมดบน Windows ถูกย่อลงมาที่ Task Bar ซึ่งแต่ปางก่อนตำแหน่งที่อยู่ของปุ่มนี้มันไปแออัดกับปุ่มอื่น ทั้งด้วยขนาดที่เล็ก ทำให้การกดปุ่ม ดูต้องใช้ความพยายามพอสมควร ปุ่ม Show Desktop ที่มีการปรับตำแหน่งไปไว้ที่มุมขวาล่าง ทำให้เลือกง่ายขึ้นมากๆ แต่พอเข้าสู่ยุคของ Windows 7 ปุ่มนี้ได้อยู่ในตำแหน่งที่สมบูรณ์แบบและถูกต้องตามกฎของฟิตส์ (Fitts’s Law) โดยจัดวางไว้ที่ตรงบริเวณด้านขวาล่างของหน้าจอ นับได้ว่ากว่าหลายทศวรรษที่มวลมนุษยชาติจะได้เห็น UI ที่สวยงามและมหัศจรรย์เช่นนี้ 3. Agoda.com – แค่เปลี่ยนสีชีวิตก็เปลี่ยน ตารางตัวเลือกห้องพักที่มีการทำกรอบแนะนำห้องที่ขายดี ที่ตารางการเลือกห้องในหน้ารายละเอียดโรงแรมของเว็บ Agoda.com เราจะเห็นกรอบสีเหลืองส้มซึ่งเป็นตัวแนะนำว่า ห้องประเภทนี้ “ขายดี (Best seller -limited supply!)” แต่ก่อนหน้านั้นทราบไหมครับว่า มันเคยเป็นสีม่วงมาก่อน แต่หลังจากมีการทำ A/B Testing โดยเปลี่ยนจากสีม่วง มาเป็น สีเหลือง ทำให้ได้ Conversion Rate ของหน้านี้เพิ่มขึ้น 50% ทีเดียว!!! (มีคนกดปุ่มจองมากขึ้น 50% ไม่ใช่รายได้เพิ่ม 50% นะครับ) ถ้าให้ผมวิเคราะห์ตามทฏษฎีสี สันนิษฐานได้ว่า สีม่วงสื่อถึงความหรูหรา ความไม่เหมือนใคร ความน่าพิศวง ในขณะที่สีเหลืองให้ความรู้สึกเป็นกันเอง ดูเป็นมิตร เป็นสีแห่งความสุข ทำให้ห้องที่ใช้แท็คสีเหลืองดูราคาเข้าถึงได้กับคนทุกระดับ เลือกแล้วแฮปปี้ เคสนี้เลยเป็นเทสมหัศจรรย์สำหรับผมเลยครับ เพราะลงแรงน้อยมาก แต่ได้ผลลัพธ์ที่คุ้มเกินคุ้ม เพียงแค่ใส่ใจในรายละเอียดเรื่องสีแค่นั้นเองแหละ 4. Airbnb.com – ราคาเด่นเห็นแต่ไกล ราคาในหน้าค้นหาบ้านเช่าที่แสดงให้เห็นบนแผนที่ และมีเครื่องมือกรองราคาที่มีกราฟบอกจำนวนบ้านอยู่ด้านล่าง ในหน้าค้นหาบ้านของเว็บ Airbnb.com จะเห็นว่า designer เลือกที่จะใช้หมุดให้เป็นตัวแสดงราคาด้วย แทนไอคอนหมุดธรรมดาที่ดูมีค่าแค่แสดงตำแหน่งของบ้านเฉยๆ มองไปที่ทางด้านซ้ายของแผนที่ จะมีเครื่องมือเลือกช่วงราคา (Price Range) พร้อมกับกราฟ (Histogram Graph) แสดงให้เห็นซ้อนด้านหลัง เพื่อให้เราทราบภาพรวมว่า ราคาส่วนใหญ่ของพื้นที่นี้เป็นเท่าไร ทำให้ลดโอกาสไปเลือกช่วงราคาที่มีบ้านให้เลือกน้อยหรือไม่มีเลย ดีจริงแท้ 5. Mangareader.net – เข้าใจคอการ์ตูนด้วยปุ่มชอร์ตคัท การเปลี่ยนหน้าสามารถเลือกที่ dropdown ด้านบน หรือกดปุ่มลูกศรซ้ายขวาเพื่อเปลี่ยนหน้าได้ด้วยเช่นกัน MangaReader.net เว็บดูการ์ตูนออนไลน์ฉบับแปลอังกฤษ เวลาผมดูการ์ตูนที่เว็บนี้ ผมจะไม่ไปเสียเวลาเลือกเปลี่ยนหน้าตรง Dropdown list ที่อยู่ด้านบน แต่ผมจะใช้ปุ่มลูกศร ขวา/ซ้าย บนคีย์บอร์ด เพื่อเปลี่ยนหน้า ถัดไป/ก่อนหน้า เพราะเวลาเลื่อนหน้าลงผมก็ใช้ปุ่มลูกศร ขึ้น/ลง ทำให้ไม่เสียจังหวะต้องยกมือไปจับเมาส์เพื่อไปกดเปลี่ยนหน้า ไม่งั้นงุงิแย่ เว็บ Box Manga มีตัวเลือกที่ให้สามารถอ่านการ์ตูนทั้งตอนได้หมดภายในหน้าเดียว ในแวดวงเดียวกัน เว็บ Box-Manga.com มีฟังก์ชันตั้งค่ารูปแบบการอ่านว่า ในตอนหนึ่งๆ เราจะอ่านแบบ ทีละหน้า หรือ โหลดมาทุกหน้าในคราวเดียวเลย สะดวกและโดนใจจริงๆ กดไลค์เลย 6. Google Translate – อ่านรอบสอง คมชัดลึก เสียงอ่านจะช้าลง เมื่อกดฟังครั้งที่ 2 ถ้าเราลองกดปุ่มฟังเสียงอ่านของคำที่เรากรอกใส่ในช่องแปลภาษาของเว็บ Google Translate ในรอบแรกระบบจะอ่านด้วยความเร็วปกติ แต่ถ้าเรากดฟังซ้ำในรอบที่สอง ความเร็วการอ่านจะช้าลง ให้เราฟังได้อย่างถนัดหู เพราะคนที่กดซ้ำรอบสอง เค้าต้องประสบปัญหาเรื่องฟังไม่ชัด ฟังไม่ทันแน่ๆ ใส่ใจในรายละเอียดขนาดนี้ เอาไปเลย 10 เต็ม ชัดเจนเปลี่ยน 😉 7. Yummly.com – แค่โหลดก็อร่อยแล้ว ใช้การทำเกรเดียนท์สำหรับ Lazy Loading โดยนำเฉดสีจากรูปที่กำลังโหลดมาแสดง ลองเข้าเว็บ Yummly.com ดูซิครับ ระหว่างที่รูปอาหารยังโหลดไม่เสร็จ เว็บจะแสดงสีเกรเดียนท์ขึ้นมาเป็นออเดิร์ฟทางสายตาให้เราเห็นก่อน แต่ที่ตื่นตายั่วสายตาก็คือสีเกรเดียนท์ (Gradient Color) ที่ไม่เหมือนกันสักรูปเลยครับ เพราะมันดึงเฉดสีจากรูปอาหารที่กำลังโหลด เมนูนี้ต้องลองนะครับ 8. Random-password-generator.org – เว็บมีดีที่ชาตินิยม สีธงชาติเยอรมันปรากฏเมื่อเอาเมาส์ไปไฮไลท์ที่ข้อความตรง Footer เว็บ Random Password Generator หากเราเลื่อนไปทีด้านล่างสุดของเว็บ (Footer) แล้วเอาเมาส์ไฮไลท์ข้อความ Made in Munich… ไปจนถึงบรรทัด Respecting… เราจะได้สีธงชาติเยอรมันปรากฏขึ้นมา รู้เลยว่าเว็บนี้สัญชาติอะไร เนอะ ^0^ การทำแถบสีไฮไลท์ เราต้องเขียนโค้ด CSS เพิ่มเองนะครับ โดยใช้ Psedo element ที่ชื่อ “selection” เช่น ที่บรรทัด Made in Munich, Germany ผมก็เขียน HTML เป็น <div class=”flat-color-1″>Made in Munich, Germany </div> ในส่วน CSS ผมก็เขียนเป็น .flag-color-1::selection { background-color: #000;} วิธีการโค้ดด้านบนสามารถนำไปประยุกต์ใชัในการสร้างแบรนด์ได้นะครับ เช่น หากแบรนด์เราเน้นสีชมพู เวลาไฮไลท์ข้อความบนเว็บ เราก็กำหนดให้เป็นสีชมพู เท่านี้ก็ได้เว็บที่ใส่ใจในรายละเอียดแล้ว 9. Google Maps อยากเดินทางไกลต้องเปลี่ยนยูนิฟอร์ม ไอคอนคนที่เปลี่ยนไปเมื่อเลือกเดินเท้าในระยะทางที่ไกล App Google Maps ถ้าเราเลือกนำทางด้วยการเดินเท้าและมีระยะทางไกลซึ่งต้องใช้ระยะเวลาเดินนานโข เช่น 8 ชม. ตามตัวอย่าง Google จะเปลี่ยนไอคอนจากคนเดินถนนคนหนึ่ง ให้เป็น ไอคอนนักผจญภัยที่สะพายเป้พร้อมไม้เท้าคู่กาย ให้เข้ากับสถานการณ์ เพื่อให้เรารู้ ถ้าจะเดินจริง งานนี้เหนื่อยแน่ จะเอาจริงเหรอ ^^! 10. Booking.com – แหล่งรวม UX สุดติ่ง เวอร์บรรลัย ตัวเลขวันที่จะปรากฏในไอคอนปฏิทินตามวันที่เลือก designer ที่ทำงานที่ Booking.com เท่าที่ผมได้ฟังมา จะมีอิสระในการออกแบบค่อนข้างสูง ถ้าคิดจะทำอะไร ก็ทำได้เลย ไม่ต้องรอ PO (Product Owner) มาสั่งการ เพียงแค่นำเสนอไอเดีย แล้วนำไปทดสอบผ่าน A/B Testing หากเทสแล้วผ่าน designer คนนั้นก็ได้แต้ม เฮกันข้ามวันข้ามคืน แต่ถ้าเทสแล้วแพ้ ก็มีอายล่ะ แต่เค้าไม่มีการลงโทษนะ เพราะทุกความล้มเหลวคือบทเรียนล้ำค่าทั้งนั้น ด้วยความมีอิสระในความคิด เราจึงได้เห็น design ที่พรั่งพรูบนเว็บนี้ตลอดเวลา อย่าง design ด้านบน ที่เมื่อเราเลือกวันที่ Check-in หรือ Check-out เรียบร้อยแล้ว ตรงไอคอนปฏิทินจะมีตัวเลขวันที่ที่เราเลือกอยู่ข้างในด้วย อันที่จริงถ้าไม่ทำ ฟังก์ชันหลักก็ทำงานได้ตามปกติ (งานออกแบบช่วงที่ 1) แต่ถ้าทำก็ยิ่งเสริมประสบการณ์การใช้งานให้ดูเมพน่าชาบูๆ (งานออกแบบช่วงที่ 2 สุดแสนมีความสุข ได้ปล่อยแสงเต็มที่) การนำเสนอข้อมูลหน้ารายการผลลัพธ์ของ Booking.com Booking.com เป็นแหล่งรวมความรู้ด้าน UX/UI ชั้นดีเลยครับ เพราะทุกสิ่งที่ปรากฏอยู่บนเว็บ จะถูกทดสอบด้วยกระบวนการทางวิทยาศาสตร์ทั้งหมด การเปลี่ยนแปลงไหนที่ทำให้ Conversion rate ลดลง design นั้นก็จะถูกเอาออก ทำให้เรามั่นใจได้ระดับเลยว่า design ที่เห็นคือ design ที่ดี และมีประโยชน์กับทั้งยูสเซอร์และบริษัทด้วย ส่วนในเรื่องการนำเสนอข้อมูลเรียกได้ว่า ขนาดเจ้าของโรงแรมยังอายเลยครับ ตัวอย่างรูปหน้าผลลัพธ์การค้นหาโรงแรม มีข้อมูลหลายหลากประเภทที่ช่วยเร่งการตัดสินใจของยูสเซอร์ เช่น ข้อมูลบ่งบอกจำนวนคนที่กำลังดูโรงแรม ยิ่งดูเยอะ ยิ่งน่าสนใจ (Social Proof) จำนวนที่มีการจองในวันนี้ (Social Proof) ไอคอนบ่งบอกว่าใกล้ BTS, MRT (เดินทางสะดวกแน่ = Benefit) บอกว่ายกเลิกฟรี จะยกเลิกเมื่อไรก็ได้ ให้จองไว้ก่อน เรื่องอื่นค่อยว่ากัน (Benefit) หากเรากดดูรายละเอียดโรงแรมด้านบน แล้วกลับมาดูที่หน้ารายการผลลัพธ์นี้อีกครั้ง จะมีโรงแรมที่แนะนำให้กับเรา2 รายการ แท็คบอกว่า พึ่งมีคนจอง ทำให้สินค้าดูน่าสนใจขึ้นมาทันตา จองได้โดยไม่ต้องใส่ข้อมูลเครดิตการ์ด เหมือนบอกอ้อมๆ ว่า เบี้ยวได้นะ ไม่มีข้อผูกมัด เร่งให้ซื้อ เพราะห้องเหลือน้อยแล้วนะ (สร้างข้อจำกัดด้านทรัพยากรเวลา) เมนู User Account ที่เลือกใช้การเรียงตัวของเมนูที่ต่างเพื่อแยกฟังก์ชันที่ต่าง หรือถ้ามีความรู้ UI ในทฤษฎีเกสตอลต์ เรื่องความเหมือน (Similarity) ที่มีข้อหนึ่งซึ่งบอกไว้ว่า วัตถุที่เหมือนกันจะมีการวางตัวหรือเรียงตัวที่เหมือนกัน (Orientation) ที่เมนู User Account ของ Booking.com จะเห็นการเรียงตัวที่ต่างกัน คือ เรียงตัวชิดซ้าย กับ ชิดขวา เพื่อตั้งใจแบ่งแยกฟังก์ชันความต่างให้ชัดเจนว่า เมนูที่ชิดซ้ายจะนำไปสู่หน้าใหม่ ส่วนที่ชิดขวาจะนำยูสเซอร์ออกจากระบบ ซึ่งหากคนทั่วไปมาดู อาจจะงงๆ ว่าทำไม Sign out ถึงปลีกตัวมาอยู่ทางขวาเมนู ดูแล้วไม่ค่อยเรียบร้อย ไม่สวยงามเลย แต่แท้จริงแล้ว มันคือความตั้งใจที่จะออกแบบเช่นนี้อย่างชาญฉลาด การนำเสนอข้อมูลตารางห้องพักของ Booking.com ถัดมาที่ข้อมูลตารางห้องพัก ก็ละเอียดพิถีพิถันสุโค่ย บอกให้รู้ว่า เราพักกี่คืน ซึ่งหากไม่มีก็ได้ แต่ถ้ามีจะช่วยให้ยูสเซอร์มีความมั่นใจมากขึ้นว่าวันที่ที่เลือกถูกต้อง Tooltip บอกว่าวันนี้เราช่างโชคดีเสียเหลือเกินที่ได้ราคาที่ดีที่สุด อวยกันซะขนาดนี้ มันต้องจองแล้ว มีรูปไอคอนเตียงตามขนาด เห็นแล้วรู้เลยว่านอนได้กี่คน นอนอย่างไร ข้อมูลบ่งบอก Benefit อีกรอบ (มีเขียนทางซ้ายของช่องแล้ว) ว่าถ้าเลือกห้องนี้แล้ว เราจะได้อะไรบ้าง พร้อมเร่งให้จองด้วยเพราะมีหลายคนจ้องอยู่ด้วย การนำเสนอข้อมูลหน้าการชำระเงินของ Booking.com และเมื่อเข้าสู่หน้ารายละเอียดการจองและการชำระเงินซึ่งเป็นหน้าที่มีความสำคัญมากๆ ก็มีการออกแบบกลเกมจิตวิทยาเพื่อหลอกล่อให้เราไม่ลังเลที่จะกดจองด้วยข้อมูลที่ออกแบบมาอย่างล้ำลึก Progress bar ที่เริ่มที่ขั้นตอนที่ 2 ทำให้รู้สึกว่า ประสบความสำเร็จไปแล้วบางส่วน หรือส่วนที่ต้องทำอีกแค่ 2 ขั้นตอนเอง สร้างภาพความคาดหวังให้ยูสเซอร์ทราบว่ากระบวนการจองนี้ใช้เวลาไม่เยอะ ไม่ต้อง Log-in ด้วย พูดง่ายๆ คือ ไม่เปลืองเวลาทำมาหากิน ส่วนใบแจ้งหนี้ มีแฝง UI ข้อมูลแบบแซนด์วิช (Sandwich) คือ การทำข้อมูลเป็นชั้นๆ สลับด้วยข้อดีกับข้อเสีย เช่นในตัวอย่าง ข้อดี: ฟรี WiFi, ยกเลิกฟรี ข้อเสีย: เงินค่าห้องและ VAT ข้อดี: วันนี้จ่าย 0 บาท ข้อเสีย: เงินที่ต้องจ่ายที่โรงแรม โน้มน้าวด้วยข้อมูลตำแหน่งที่ตั้งและหาเหตุผลมาสนับสนุนให้ดูน่าเชื่อถือด้วยคะแนน Rating บอกเวลา Check-in และ Check-out ด้วย มีตัวเร่งการตัดสินใจตามติดเรามาตั้งแต่หน้าผลลัพธ์การค้นหาจนถึงหน้านี้ การออกแบบ UI เพื่อขายบริการเสริมโดยอาศัยของที่นำเสนอให้ฟรี ตัว Checkbox ที่ใช้วิธีการ Opt-Out (ค่า Default คือไม่เลือกให้) ก็มีการวางแนวกลยุทธ์เพื่อล่อให้เรากดตัวเลือกของฟรี 2 ข้อแรก (ฟรี Travel Guide + ฟรี Make changes… ซึ่งถ้าไม่กดเลือก เราก็ได้ฟรีนะ ^^) ถ้าใครเผลอกดติ๊กไปจนถึงอันที่ 3 ก็เสร็จโจรล่ะ เพราะอันที่ 3 เป็นการเช่ารถ อันนี้ไม่ฟรีนะ ฉลาดไหมล่ะ การนำเสนอข้อมูลวันเวลาที่กระจ่างชัดเจน เรื่องวันเวลาเป็นเรื่องที่อาจทำให้บางคนสงสัยได้ เพื่อเคลียร์ปัญหาคาใจนี้ Booking.com ก็เลยทำ Tooltip บอกเลยว่าวันเวลาอ้างอิงตามโซนเวลาท้องถิ่นของโรงแรมนะ เพราะเดี๋ยวจะมางอแงตอนหลังว่า ยกเลิกแล้ววันที่ 27 แต่ทำไมยังเสียตังค์ เพราะที่จริงวันที่ของประเทศนั้นอาจเป็นวันที่ 28 แล้วก็ได้นะ การนำเสนอข้อมูลเกี่ยวกับโรงแรมและบริการที่ครบถ้วน ข้อมูลทุกอย่างที่เราอยากรู้ เช่น ถ้ามีหมาเอาไปได้ด้วยไหม? คนทุกภพลภาพจะได้รับความสะดวกสบายไหม? ต้องจ่ายเงินสกุลไหน? มีบริการรถรับส่งจากสนามบิน? คำถามเหล่านี้ถูกเขียนไว้อย่างแน่นปึ๊กในหน้าข้อมูลโรงแรม Title จะถูกเปลี่ยน หากไปเลือกที่แท็บหน้าอื่น ประสบการณ์นี้ ผมรู้สึกชอบมากเลยครับ คือถ้าเราละทิ้งจากหน้าการชำระเงินไปที่แท็บอื่น บริเวณ Title bar ของหน้าจ่ายเงินจะขึ้นข้อความเรียกร้องความเห็นใจว่า อย่าลืมการจองของคุณนะจ้ะ เห็นได้ว่า จะคลิก ขยับเมาส์ เลื่อนจอ เก็บทุกเม็ดจริงๆ เวอร์ไหมล่ะ Popup แจ้งเตือนเมื่อกลับมาที่หน้าชำระเงินอีกครั้ง พอกลับมาหน้าการจองห้องใหม่ ก็จะขึ้น Popup เตือนเราให้เร่งกรอกข้อมูลให้จบด้วยการแสดงจำนวนคนที่กำลังดูโรงแรมนี้อยู่ และมีราคาบอกว่า เราได้ราคาที่ดีที่สุดแล้ว เมือเทียบกับราคาเฉลี่ยของเมืองที่เราเลือก (มีการใช้เหตุผลมาสนับสนุนตลอด) Email-marketing ที่ส่งมาเตือนให้เราทำการจองโรงแรมที่เคยดูให้เสร็จสิ้น หากเราตัดสินใจไม่จองห้อง ก็ยังมีส่งเมลตามหลอกหลอนโดยพยายามหาเหตุผลในการโน้มน้าวให้เรากลับมาจอง เช่น เราจะได้ราคาพักที่ต่ำสุดในรอบ 40 วัน ประสบการณ์การจองโรงแรมกับ Booking.com เรียกได้ว่าเราถูกมอมเมาด้วยกลยุทธ์และข้อมูลที่ผ่านการขัดเกลาและทดสอบมาอย่างดี จึงไม่น่าแปลกใจเลยว่า ทำไมเว็บนี้ถึงได้โดนใจผมนัก นี่คือเว็บที่แสนจะใส่ใจในรายละเอียดทุกอณู, ทุกโมเมนต์ และทุกลมหายใจของยูสเซอร์จริงๆ ครับ ความสนุกที่ไม่ได้แค่เอามันส์ ประสบการณ์สุดฟินที่นำเสนอผ่าน design 10 แบบ หากถามว่า ถ้าไม่ทำ จะทำให้ระบบหรือเว็บใช้งานได้ไหม คำตอบคือ ได้ครับ เพราะอย่างที่ผมบอกไปว่า ช่วงที่ 1 ของการออกแบบ เราจะเน้นที่ฟังก์ชันหลักให้ใช้งานได้ ส่วนช่วงที่ 2 เราจะใส่ใจที่ความสนุกของการใช้งาน แต่รู้ไหมครับว่า เรื่องที่เราทำสนุกๆ นี่แหละครับ จะเป็นตัวเพิ่มคุณค่าให้กับสินค้าหรือบริการของเราชนิดที่คาดไม่ถึง ลองใส่ใจในรายละเอียดดูสักนิด หาจุดที่คิดว่าทำแล้ว ลงแรงไม่ต้องเยอะ designer สนุกที่จะออกแบบ developer สนุกที่จะโค้ด ยูสเซอร์สนุกที่จะใช้งาน รีบจดไอเดียนั้นไว้ แล้วรีบลงมือทำเลย! สีของกระดาษทิชชู่แผ่นท้ายๆ ของ Kleenex สุดท้ายขอทิ้งท้ายด้วย design ที่ใส่ใจในรายละเอียดอีกตัวอย่างคือ กล่องกระดาษทิชชู่ Kleenex (รุ่นหนึ่ง) แผ่นกระดาษปกติจะเป็นสีขาว แต่ถ้าเราใช้ไปแล้วใกล้หมด กระดาษส่วนท้ายๆ จะเป็นสีเหลืองอ่อนๆ เพื่อเตือนให้เรารู้ว่า เตรียมซื้อกล่องใหม่มาได้แล้วนะ UIBlogazine ก็แอบใส่ใจในรายละเอียด แฝงกลยุทธ์โฆษณาเข้าไปในตัวอย่างซะหน่อย ถ้าได้ค่านายหน้าจาก Kleenex ก็คงดีไม่น้อยนะ แต่คิดว่าแป้วแน่ๆ <(^_____^)>
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 8: คิดประสบการณ์ใหม่ในการดื่มกาแฟ By uiblogazinerAugust 23, 20171
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 7: เรียนรู้จากเจ้าของธุรกิจที่ชื่นชอบ By uiblogazinerAugust 1, 20170
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 6: คิดสร้างสรรค์ด้วยการเล่นไพ่ By uiblogazinerJuly 25, 20170
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 5: สร้างสินค้าใหม่ใน 30 นาที By uiblogazinerJuly 10, 20170