เทคนิคออกแบบ 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 แล้วเขียนคำบรรยายข้างนอกได้
app-screen01

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

app-screen02

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

app-screen03

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

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

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

app-screen05

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

app-screen06

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

app-screen08

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

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

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

app-screen09

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

app-screen11

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

app-screen12

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

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

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

app-screen14

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

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

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

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

แอพ 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

Rath Panyowat Avatar

Comments

  1. Oat Anirut Avatar

    ขอบคุณครับ เป็นประโยชน์มากเลยครับ


Leave a Reply

Your email address will not be published. Required fields are marked *

©2025 Rath Panyowat. All rights reserved.