Life

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

29 July 2015

เมื่อสัปดาห์ที่ผ่านมาได้มีโอกาสค้นคว้าเรื่องการทำ 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

You Might Also Like

1 Comment

  • Reply Oat Anirut 31 July 2015 at 23:20

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

  • Leave a Reply