สูตรลับการจัดลำดับความสำคัญด้วยตัวอักษร เพราะบางทีดีไซน์ดูแปลก ๆ แต่เราไม่รู้จะเม้นอะไร (ตอนที่ 2)

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

ตัวอักษรที่มีขนาดใหญ่ จะเด่นชัดกว่าตัวอักษรขนาดเล็กแน่นอน

แต่กรณีที่มีองค์ประกอบอย่างอื่นมากกว่า “ขนาด” ล่ะ? องค์ประกอบอย่างอื่นเช่น สี ขีดเส้นใต้ ตัวเอียง ตัวหนา ไฮไลท์ ฯลฯ

เคยเห็นเอกสารอะไรประมาณนี้ไหมครับ?

ตัวอย่างเนื้อหาจาก NYTimes เรื่อง “We Mapped the Uninsured. You’ll Notice a Pattern.” (http://www.nytimes.com/interactive/2015/10/31/upshot/who-still-doesnt-have-health-insurance-obamacare.html)

นี่คือตัวอย่างที่ผมทำขึ้นเองโดยเอาเนื้อหามาทำให้เหมือนกับเอกสารที่ผมเคยเจออยู่บ่อย ๆ โดยเฉพาะตอนที่ตรวจรายงานนักศึกษา

จากตัวอย่างจะเห็นว่าทุกข้อความดูสำคัญไปหมด ตัวอักษรกลุ่มหนึ่งใหญ่ อีกกลุ่มตัวหนา อีกกลุ่มเอียง มีทั้งใส่สีและไฮไลท์ด้วย สุดท้ายทุก effect ที่ใส่เข้าไปกลับแย่งความสำคัญกันเองทั้งหมด! แล้วทีนี้เราจะทำอย่างไร?

ผมมีสูตรง่าย ๆ ดังนี้ครับ…

อย่างที่บอกไปในตอนที่แล้วว่า “เราต้องรู้ก่อนว่า ตัวเราเองต้องการอะไร?” จากนั้นเมื่อเรารู้แล้วว่าเราต้องการให้ข้อความไหนสำคัญที่สุดเป็นลำดับที่ หนึ่ง สอง และ สาม เราก็ลองมาดูกันว่าตัวอักษรนั้นมี effect พิเศษ ๆ อะไรบ้าง…

Effect จริง ๆ มีมากกว่านี้นะครับ แต่ ณ จุด ๆ นี้ เอาตัวที่สำคัญ ๆ และใช้บ่อยมาดูเป็นตัวอย่างกันก่อน

Effect ทุกตัวที่เห็น ไม่ว่าจะเป็นตัวหนา ตัวเอียง ขีดเส้นใต้ ฯลฯ ทุก effect ที่เราใส่เข้าไปผมจะให้ effect ละ 1 คะแนน

ดังนั้นการให้ความสำคัญด้วยตัวอักษร เราก็แค่ใส่ effect เข้าไป

ตัวที่ต้องการให้ความสำคัญมากกว่า เราก็ใส่ effect ให้คะแนนมันสูงกว่า และแน่นอนตัวที่ต้องการให้ความสำคัญน้อยกว่า เราก็ใส่ effect ให้คะแนนมันต่ำกว่า

ยกตัวอย่าง..

ตัวอย่าง 1

จากตัวอย่าง 1 ด้านบน ตัวอักษร “มาตรฐาน” ผมถือว่าเป็น “0 คะแนน”

** คำว่าตัวอักษรมาตรฐานหมายถึง ตัวอักษรที่เราใช้เป็น ส่วนใหญ่ กับงานดีไซน์นั้น ๆ เช่น ตัวอักษรที่ใช้ในเนื้อหา.. ดังนั้นถ้าตัวอักษรส่วนใหญ่ในงานดีไซน์คือตัวหนา ก็สามารถถือว่าตัวหนามีค่าเป็น 0 ได้เช่นกันครับ..

เมื่อตัวมาตรฐานในกรณีนี้ ถูกใส่ความหนาเข้าไป ก็จะมีค่าเป็น “+1” (กลุ่มที่ 2)

และถ้าใส่สีเพิ่มเข้าไปอีกก็จะเป็น (หนา 1 + สี 1) = 2 (กลุ่มที่ 3)
ดังนั้น ตัวอักษรกลุ่มที่สามจะเด่นที่สุด ซึ่งหากดูจากภาพก็จะเห็นเช่นนั้น

ตัวอย่างต่อไป (ตัวอย่าง 2) ..

ตัวอย่าง 2

หากผมเพิ่มเข้าไปอีก คราวนี้มีทั้ง หนา, เปลี่ยนสี, ขีดเส้นใต้ และ ขยายตัวอักษร ก็จะได้เป็น (หนา 1 + สี 1 + เส้นใต้ 1 + ขยาย 1) = 4
แน่นอนว่า ตัวอักษรชุดสุดท้ายเด่นสุด

ต่อไปครับ (ตัวอย่าง 3) ..

ตัวอย่าง 3

คราวนี้ผมจัดให้มีแบบ “ลดขนาด” เข้ามาด้วย

เป็นหนา แต่มีลดขนาด ดังนั้นคะแนนความสำคัญของตัวอักษรชุดนี้จะมีค่าเป็น.. (หนา 1 - ลดขนาด 1) =0 หรือมีค่าความสำคัญ “พอ ๆ กันกับตัวมาตรฐาน”

ด้วยสูตรนี้ สำหรับคนที่ไม่ใช่ดีไซน์เนอร์สามารถนำไปใช้เป็น Guideline ในการจัดลำดับความสำคัญของสิ่งต่าง ๆ ได้ไม่ยากเลย

แต่แน่นอนว่า ขึ้นชื่อว่า “การออกแบบ” นั้น มันคือศิลปะไม่ใช่คณิตศาสตร์ และศิลปะย่อมหากฎตายตัวได้ยากยิ่ง ในกรณีนี้เองยังมีจุดที่สามารถ “ยืดหยุ่น” ได้และไม่เป็นไปตามสูตร 100% เช่น..

ขนาดของตัวอักษร ..

การเพิ่มขนาดของตัวอักษร หากคุณเพิ่มให้มันใหญ่มาาาาาาากกกกกก!!! แล้วนำไปเปรียบเทียบกับตัวอื่นที่มีขนาดเล็กมาาาากกกกกก แม้ว่าตัวเล็กจะใส่ความหนา + สี + ขีดเส้นใต้ + ไฮไลท์ ฯลฯ เข้าไปยังไงก็ไม่มีทางเด่นกว่าตัวอักษรขนาดใหญ่ยักษ์นั้นได้ ดังตัวอย่าง…

จากตัวอย่างจะเห็นว่า “act” คือคำที่คนส่วนใหญ่จะเห็นก่อน ซึ่งมีค่าแค่ +1 เพราะขยายตัวอักษร แต่คำว่า “don’t talk” แม้จะใส่ effect เต็มที่คือ (ตัวหนา + ตัวเอียง + เปลี่ยนสี + ขีดเส้นใต้) = 4 คะแนน ก็ยังไม่สามารถให้ความสำคัญได้มากเท่าตัวอักษรขนาดมหึมาได้

นอกจากนี้ยังมีเรื่องของ space และ position อีก เช่น ถ้าตัวอักษรขนาดเดียวกัน แต่มีพื้นที่รอบ ๆ มากกว่าอีกกลุ่มหนึ่ง ก็สามารถสร้างความโดดเด่นได้เช่นกัน

อย่างที่บอกว่า ยังมีอีกหลายองค์ประกอบมากที่จะช่วยจัดลำดับความสำคัญ อย่างไรก็ตามสูตรง่าย ๆ นี้น่าจะพอเป็น Guideline คร่าว ๆ ได้สำหรับ non-designer ผู้ว่าจ้างงาน หัวหน้า ผู้ประกอบการ หรือแม้แต่ beginner designer ที่พยายามปรับเปลี่ยนวิธีการมองงานออกแบบ และ วิธีการคอมเม้น แก้ไขงานออกแบบที่บางทีดูแล้วแปลก ๆ .. แต่ก็ไม่รู้จะแก้ตรงไหน และ อย่างไรดี

ทีนี้เราลองมาดูจากตัวอย่างจริงกันบ้าง..

นี่เป็นภาพถ่ายโฆษณาตัวหนึ่งใน magazine โฆษณานี้เป็นแบบหน้าคู่ คือมีภาพลากยาวสองหน้า แต่เนื้อหานั้นรวมอยู่ในหน้าเดียว..

ทีนี้ลองมา zoom ดูใกล้ ๆ เพื่อหา “สูตรความสำคัญ” กัน

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

ลองดูตัวอย่างที่สอง

โฆษณาอีกตัว.. จากแมกกาซีนเล่มเดียวกัน จริง ๆ แล้ว โฆษณาตัวนี้ไม่ต้องเทียบสูตรก็รู้ได้เลยว่า อะไรเห็นก่อนและหลัง.. แต่เราลองมาดูกันครับ..

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

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.