เทคนิคออกแบบ App Screenshot โดนใจคนโหลด

เมื่อสัปดาห์ที่ผ่านมาได้มีโอกาสค้นคว้าเรื่องการทำ Screenshot สำหรับแอพที่ submit ขึ้น App store มานิดหน่อยครับ จึงนำมาแชร์ลง blog ครับ

สาเหตุที่เราต้องแคร์เรื่อง screenshot ของแอพมาก เพราะมีส่วนสำคัญกว่า 50% ในการที่ user จะโหลดหรือไม่โหลดแอพของเรา ตัวเลขนี้ไม่รู้ Smashing Magazine เอามาจากไหนเหมือนกันครับ แต่คิดจากตัวผมเอง ผมก็ให้น้ำหนักกับ screenshot สูงมากในการโหลดแอพ ก็เลยมีคล้ายๆศาสตร์ในการทำ screenshot ของแอพขึ้นมา

หลังจากผมรีวิวบทความ tutorial เรื่องนี้จากหลายๆแหล่ง สรุปสิ่งที่สำคัญที่สุดที่ทุกแหล่งพูดเหมือนกันก็คือ

“ภาพต้องอธิบายได้ว่าแอพแก้ปัญหาอะไรและมันดีกว่า solution ที่มีในปัจจุบันอย่างไร”

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

---

เทคนิคในการทำ screenshot

ไม่รู้แอปเปิลหรือกูเกิ้ลจะเปลี่ยนกฎเมื่อไหร่ยังไงเหมือนกันนะครับ แต่ตัวอย่างที่มีตอนนี้ สิ่งที่ทำได้คือ

• โชว์ value proposition ของแอพไว้ในภาพแรก เพราะเป็นภาพที่มีโอกาสที่คนจะเห็นสูงที่สุด
• ไม่จำเป็นต้องใช้ screenshot จริงๆ คือเราไม่จำเป็นต้องเป็นแอพเราขึ้นมา กด screen capture แล้วเอารูปนั้นขึ้น App store นะครับ แต่งมั่งอะไรมั่งได้
• สามารถเอาภาพมาใส่ device mockup แล้วเขียนคำบรรยายข้างนอกได้

ภาพแรกของแอพ Snapchat

ภาพแรกของแอพ Sunrise Calendar

ภาพแรกของแอพ Tumblr

• ไม่จำเป็นต้องใช้ครบ 5 ภาพ ถ้าภาพของคุณอธิบายตัวแอพได้ดีอยู่แล้ว ยกตัวอย่าง Snapchat,  You Need a Budget (YNAB)
• ต่อเนื่องจากข้อสอง จริงๆไม่จำเป็นต้องเป็นต้องเอารูปมาแปะใส่ mockup ก็ได้ ถ้าแอพเรามีวิธีการใช้งานแบบอื่น โชว์การใช้งานแอพเราให้ user ดู

แอพ Heads Up! ซึ่งเป็นเกมเอาไว้เล่นกับเพื่อน

แอพ Sleep Cycle alarm clock โชว์การใช้งานวางไว้ใกล้หมอน

แอพ Square Register โชว์การต่อกับเครื่องรับบัตรเครดิตของ Square

แอพ TinyScan โชว์การใช้มือถือเป็น PDF scanner

•  ถ้าจุดเด่นของแอพคือ interaction ต่างๆ (เช่น gesture, drag & drop) นำมาใส่ในภาพได้

แอพแปลงค่าเงิน Currency – Simple Converter โชว์การใช้ gesture ในการใช้งาน จริงๆอันนี้เป็นตัวอย่างของแอพที่ไอเดียไม่ได้มีอะไรใหม่ แต่เน้นขายการใช้งานที่ง่ายขึ้น

แอพ Swype ซึ่งเป็นคีย์บอร์ดที่ป้อนค่าด้วยการลากไปตามตัวอักษร (swipe) screenshot ของแอพก็เลยโชว์การลากนั้น

แอพ Trello โชว์การ drag&drop card

แอพ Mailbox นำการ slide คือ done มาเป็นภาพแรกของแอพ

•  ทำแอพ iPhone ไม่จำเป็นต้องมีแต่หน้าจอ iPhone ถ้าจุดขายคุณคือ multidevice หรือ multiplatform

แอพ Clear – Tasks, Reminders & To-Do Lists โชว์ความ multidevice เต็มรูปแบบ

แอพ Todoist: To-Do List | Task Manager โชว์ความ multidevice เช่นกัน

• คำบรรยายที่เลือกใช้ เป็นได้ตั้งแต่ อธิบายฟีเจอร์ของแอพ, little-tutorial ว่าแอพใช้ยังไง, คุณสมบัติอื่นๆ เช่น ฟรีตลอดชีพแน่นอน ไปได้รางวัลอะไรมา testimonial ฯลฯ
• อันนี้ไม่ได้อยู่ในคำแนะนำไหน แต่ผมว่าเท่ดี

แอพ IF by IFTTT ใส่เครดิตซะงั้น (เท่ากับจริงๆมี 4 ภาพ)

• ไม่รู้ดีไม่ดี แต่ทำ screenshot ได้หลุดโลกมาก

แอพ PrismaDROP แต่งงาน ลูกเกิด ลูกร้อง ก็เล่นอย่างเดียว

---

Art Direction

สุดท้ายสิ่งสำคัญที่ขาดไม่ได้เลยก็คือ Art direction การเลือก mood&tone เลือกสี เลือกฟอนท์ที่ใช้ มันก็เป็นเรื่องของการออกแบบแหละครับ target คือใคร จะออกแบบ message อย่างไร ถ้าแอพออกแนวใช้เล่น ก็ต้องทำให้ภาพมันดูสนุกสนาน ถ้าออกแนวจริงจังก็ต้องเป็นอีกแบบนึง ซึ่งพวกนี้สุดท้ายมันก็ต้องล้อไปกับตัวแอพ

ถ้าเป็นไปได้ใช้ฟอนท์เดียวกันหรือไปทางเดียวกันกับที่ภายในแอพใช้ ยกเว้นว่ามีเป้าหมายอย่างอื่น

---

App Store Optimization

จริงๆเรื่องการทำ screenshot นี่เป็นเรื่องนึงของสิ่งที่เรียกว่า App Store Optimization (ASO) ครับ ถ้าใครสนใจลองศึกษาข้อมูลเพิ่มเติมได้ มันก็จะมี

• on-page เช่น การตั้งชื่อ เขียนคำบรรยาย เลือกหมวดหมู่ ทำ screenshot ฯลฯ
• off-page เช่น การลิงค์จากที่อื่นๆ การออกสื่อ การเรียกคะแนนรีวิว ฯลฯ

สำคัญคือการ Testing อย่างสม่ำเสมอ จริงๆมันก็มีคนทำ A/B Testing กับ screenshot เหมือนกันครับ แต่ผมก็ไม่ได้ตามศึกษา

---

สรุป

สิ่งที่ผมเขียนเป็นข้อมูลที่รีวิวมาจากไม่กี่แหล่ง เชื่อว่าศาสตร์นี้จริงๆมีอะไรอีกเยอะครับ ท่านมีคำแนะนำอย่างไรแชร์กันได้ครับ ^.^

---

อ้างอิง:

1. How To Create Effective App Screenshots For Your App Store Page
2. 7 Tips For Designing App Store Screenshots That Get More Users
3. Designing App Store “screenshots”
4. We Analyzed App Store Screenshots Of 10 Successful Mobile Startups