UI Design : ลายแทง สำหรับออกแบบแอปพลิเคชั่น

Cover UI 101

การออกแบบแอปพลิเคชั่นและเว็บไซต์ มีเรื่องมากมายที่ทำให้ดีไซน์เนอร์ปวดหัว เพราะมันไม่ใช่แค่ความสวยงาม แต่คือการออกแบบเพื่อตอบโจทย์การใช้งานของผู้ใช้ให้มากที่สุด และสิ่งที่เราจะพูดถึงในบทความนี้คือ “ลายแทง สำหรับนักออกแบบ” ก่อนลงมือพัฒนาจริง

Design ไม่ได้หมายความแค่ให้สวยงาม

สิ่งสำคัญสิ่งแรกในการออกแบบ UI ไม่ใช่ “ความสวยงาม” แต่มันคือ พื้นฐานการออกแบบ ซึ่งเป็นสิ่งที่ใครๆ ก็สามารถเรียนรู้ได้ ดังนั้นการออกแบบ UI ในขั้นเริ่มต้น ต้องเริ่มจากการร่าง หรือใช้เครื่องมือในการสร้างแบบร่าง  โดยคำนึงถึงความสัมพันธ์ระหว่าง องค์ประกอบภายในแอพฯ feature ต่างๆ และการใช้งาน

 

ส่วนประกอบสำคัญ

ในการออกแบบ UI ที่ดี ต้องประกอบไปด้วย Visibility, Development และ Acceptance.

  • Visibility คือ มีความชัดเจนที่จะบ่งบอกถึงเอกลักษณ์เฉพาะตัวของแอพ โดยคำนึงการใช้งาน และมี Concept ที่ชัดเจน
  • Development ต้องคำนึงถึง ความสามารถในการปรับแต่งและข้อจำกัดของ platform เช่น การรองรับ การสร้างต้นแบบที่รวดเร็ว, มีคลังข้อมูล และมีชุดเครื่องมือที่รองรับ เพื่อที่จะสามารถต่อยอดและพัฒนาต่อไปได้
  • Acceptance หมาถึง ยอมรับในข้อตกลงสิทธิบัตร และนโยบายองค์กร ไม่ขัดกับข้อบังคับ (Apple Store, Google Play)

 

3 สิ่งที่เป็นพื้นฐานนหลักในการออกแบบ UI

  1. Communication ความสอดคล้องกันระหว่าง ผู้ใช้และฟังก์ชั่นการใช้งาน เช่น พฤติกรรมการใช้งาน interactive ต่างๆ
  2. Economization การลดจำนวนขั้นตอนการทำงานของ UI ให้น้อยที่สุด แต่ต้องครอบคลุมที่สุด
  3. Organization หมายถึง UI จะต้องมีโครงสร้างการใช้งานและ Concept ที่ชัดเจน

uidesign101

รูปแบบ Function ที่สวยงามจะช่วยให้ผู้ใช้แยกแยะ เมนู และฟังก์ชั่นการใช้งานได้อย่างรวดเร็ว

3 สิ่งที่จะช่วยพิ่มประสิทธิภาพ ได้แก่

1. Canvas สามารถแสดงถึงสิ่งที่ผู้ใช้กำลังเรียกใช้งานอยู่ คือต้องรู้ความต้องการและพฤติกรรมของผู้ใช้ จากนั้นออกแบบให้ตอบโจทย์และใช้งานง่ายที่สุด

2. Sidebar จะช่วยให้เข้าถึงส่วนพิเศษ หรือเมนูที่ซ่อนอยู่ของแอพพลิเคชั่น

3. Tool bar ช่วยให้ผู้ใช้เลือกหรือเปลี่ยน option หรือปรับเปลี่ยนเมนูการใช้งานแอพพลิเคชั่น

นี่คือ 3 สิ่งพื้นฐานที่ต้องมี นอกจากจะเป็นสิ่งที่ผู้ใช้คุ้นเคยแล้ว ยังช่วยให้การออกแบบง่ายขึ้นอีกด้วย

Colors

การเลือกใช้สีที่ดี จะช่วยให้ผู้ใช้เกิดการจดจำที่ดียิ่งขึ้นมากกว่าการใช้เพียงแค่สีขาว-ดำ อีกทั้งรวมถึงการเพิ่มประสิทธิภาพและดึงดูดผู้ใช้งานอีกด้วย นอกจากนั้นประโยชน์ของการใช้สียังรวมไปถึง

  • ช่วยในการมองเห็นภาพและความเข้าใจได้ดียิ่งขึ้น
  • เน้นความสำคัญของข้อมูล
  • ช่วยให้การออกแบบกราฟิค เป็นธรรมชาติมากยิ่งขึ้น
  • ลดข้อผิดพลาดในการตีความ
  • เพิ่มการมองเห็นภาพได้ดียิ่งขึ้

ข้อควรระวัง

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

 

พื้นที่ว่างสำคัญอย่างไร?

การใช้ Whit space หรือ Blank space (ช่องว่างระหว่าง เมนุ ปุ่ม และ control ต่างๆ) จะช่วยให้ User ใช้งานได้ง่ายขึ้น และสามารถแยกแยะความแตกต่างแต่ละ Feature ได้ ดียิ่งขึ้น

เช่นเดียวกันการใช้  White space หรือการเว้นระยะห่างในคอลัมม์หนังสือพิมพ์หรือ หน้าใน Magazine จะช่วยให้ง่ายต่อการอ่านและการใช้งาน

ซึ่งการใช้ White space ควรจะคำนึงถึงความเหมาะสมของระยะห่าง Space ด้วย ทั้งในแนวตั้งและแนวนอน ซึ่งวิธีการนี้จะช่วยให้ง่ายต่อการใช้งานและดูเป็นระเบียบมาก สะอาดตามากขึ้น

ui design 101-3

RESPECT THE DEVICE

ควรคำนึงถึง User ที่มีการใช้งานแอพใน Device ที่แตกต่างกัน ทั้งในเรื่องของการป้อนข้อมูล ขนาดหน้าจอ และรูปทรง ผู้ใช้บางกลุ่มที่มีการใช้งานในแนวตั้ง บางคนอาจมีการใช้งานแนวนอน ดังนั้นในการออกแบบควรคำนึงถึงการวางตำแหน่งด้วย

Tips

การออกแบบสำหรับผู้ใช้งานในแนวนอน การวางตำแหน่งแต่ละเมนูฟังก์ชั่นจะต้องวางในแนวคู่ขนานกันไป

สำหรับการออกแบบแอพเพื่อใช้ในแนวตั้ง เมนูจะต้องวางในด้านบน

 

CHOOSING FONTS

การใช้ Front จะต้องเลือกใช้ตัวอักษรที่อ่านง่ายในทุกรูปแบบหน้าจอ  Font Display นั้นค่อนข้างอ่านยากในจอเล็กๆ ทางที่ดีควรเลือกควรเลือกใช้ Front ง่ายๆ เช่น serif,  sans serif

เพราะหาก Device ไม่รองรับ front จะเกิดการแทนที่และอาจเกิดการแสดงผลในตัวอักษรที่แปลกไป นี่จึงเป็นเหตุผลที่การใช้ front มาตราฐานจาก Windows จึงเป็นตัวเลือกที่ดี

การออกแบบแอพฯ ที่ใช้ภาษาแตกต่างกัน ต้องคำนึงถึง การยืดของตัวอักษรที่อาจใช้พื้นที่เพิ่มมากขึ้นถึง 50 เปอร์เซ็น

 

REMOVE CLUTTER, NOT FEATURES

เป็นสิ่งจำเป็นที่จะผสมผสานหลายๆ feature ไว้ด้วยกัน แต่อาจทำให้แอพฯ มีอาการหน่วง วิธีการแก้ปัญหาคือ การใช้ Dropdown menu หรือ Tap เป็นสิ่งที่จะช่วยแก้ปัญหาการแสดงผล tools หรือข้อมูลที่มีประโยชน์ภายในเวลาเดียวกัน

รวมไปถึงการทำให้แอพมีความเรียบง่ายและใช้งานง่ายมากที่สุดเท่าที่จะทำได้ โดยเฉลี่ยแล้วผู้ใช้จะไม่เลือกใช้แอพที่ดูใช้งานง่ายเพียงอย่างเดียวเท่านั้น แต่ยังคำนึงถึง function การใช้งานอีกด้วย

ui design 101-2

สรุปได้ว่า

1. UI จะต้องมีความเรียบง่ายดูสะอาดตา แบ่งแยกเมนู Function และมีความชัดเจน

2. ต้องคำนึงถึงการใช้งานใน Device ที่แตกต่างกัน

3. Features คือสิ่งที่ผู้ใช้งานให้ความสำคัญเป็นอันดับต้นๆในการเลือกใช้งานแอพพลิเคชั่น ดังนั้นจึงเป็นสิ่งจำเป็นที่จะต้องคง Feature ต่างๆเอาไว้ และกำจัดสิ่งที่ทำให้แอพหน่วงออกไปให้ได้

Feature พื้นฐานสำหรับ การออกแบบ UI นั้นต้องคำนึงถึงผู้ใช้งานเป็นหลัก ให้ผู้ใช้รู้สึกว่าใช้งานง่ายไม่ซับซ้อน รวมไปถึงการประหยัดเวลา และค่าใช้จ่ายในการพัฒนาด้วย

0 Comments

Leave a reply

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

*

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

Buffo Hero แหล่งรวมความรู้ด้านดิจิทัล เพื่อพัฒนาสายงาน Digital Marketing, Creative and Design, Programmer

Copyright © 2016. Created by Buffohero

Log in with your credentials

or    

Forgot your details?

Create Account