Category "UI / UX"

เกี่ยวกับ UI / UX และ Design ในการทำ Website และ Mobile APP

UI / UX

12 ขั้นตอนสำหรับ Basic User Experience (UX)

|

“การคิด UX” ในความคิดของตั้ว คือ การคิดวิเคราะห์เข้าไปในจิตใจผู้ใช้ ว่าอะไรที่จะทำให้เค้าใช้งานสิ่งของทุก ๆ อย่างที่เราตั้งใจผลิดออกมาไม่ว่าจะเป็นสิ่งของ เครื่องใช้ รวมไปถึง software, mobile application ต่าง ๆ ได้อย่างราบรื่น รู้สึกดีกับชิ้นงานของเรา และอยากใช้อีก สรุปวิธีคิดแบบง่าย ๆ คือ สิ่ง ๆ นั้น ควรจะต้องตอบโจทย์ปัญหาในชีวิตไม่อย่างใดก็อย่างนึง และยังมีการใช้งานที่ง่าย ใช้งานแล้วไม่สะดุด ในที่นี้ จะพูดถึงเรื่อง Basic...

UI / UX

8 วิธีในการดีไซน์แอปพลิเคชั่นให้สวยงามและใช้งานง่าย จากผู้สร้าง Instagram

|

1. เข้าใจสิ่งที่กำลังทำ Krieger เตือนว่า อย่าเริ่มต้นสร้างแอปทั้งๆ ที่ยังไม่เคลียร์ว่าตัวเองกำลังทำอะไร ถ้ายังไม่ชัดเจนในคอนเซ็ปต์ ให้คุยกับผู้เชี่ยวชาญหรือศึกษาความเป็นไปได้ของสนามที่เราจะเข้าไปลงเล่น ก่อนที่จะเริ่มทำแอปหรือทุ่มเทกำลังความสามารถของเรา 2. ตัดสินใจว่าเราจะแตกต่างอย่างไร Krieger แนะนำให้ลองเติมคำในช่องว่างของ Product Mad Libs ประโยคนี้ เพื่อบ่งบอกเอกลักษณ์ของโปรดักต์เรา ซึ่งถ้าเติมคำในประโยคได้ครบก็จะบอกได้ว่าเราคือใคร เราต่างจากคนอื่นอย่างไร ___ is ____; it does ___. Unlike ___, we ___....

Design Inspiration

Grid Layout – Design Inspiration

|

ตัวอย่างเว็บไซต์ที่ใช้การจัดวาง แบบ Grid Layout เพื่อสร้างความน่าสนใจ…ให้กับรูป...

UI / UX

Wireframe VS Prototyping แตกต่างกันยังไง

|

การทำ Wireframe เป็นสิ่งที่สำคัญมากในชีวิตการเป็นเว็บดีไซเนอร์ครับ หลายคนคิดว่างานออกแบบเว็บไซต์หมายถึง เปิดโปรแกรม Photoshop แล้่วเริ่มละเลงใส่รูป ใส่ตัวอักษร ใส่สี เสร็จแล้วส่งลูกค้า แต่จริง ๆ แล้วขั้นตอนในการทำเว็บไซต์กว่าจะมาถึงขั้น Design ใน Photoshop จะมีขั้นตอนที่เรียกว่า Wireframe เกิดขึ้นมาก่อน Wireframe ของเว็บไซต์คืออะไร ก่อนจะเริ่มดีไซน์เว็บไซต์ใน Photoshop โดยเฉพาะอย่างยิ่งโปรเจคเว็บไซต์ใหญ่ ๆ จะมีข้อมูลที่ซับซ้อน หลากหลายประเภท เราจะต้องบอกให้ได้ก่อนว่าแต่ละหน้าจะมีข้อมูลอะไรบ้าง และข้อมูลไหนแสดงอยู่ตรงไหน ซึ่งการทำ...

Mobile / Tablet

Free Andriod UI Kit / Fonts / Colors

|

Download Source Icon Set เมื่อเปิด Link จะได้ไฟล์ .svg ให้ทำการ save แล้วนำไฟล์ที่ได้ไปเปิด illustrator Android UI Design Kit PSD 4.2   Google Play asset dimensions Asset Type Required Image type Dimension Screenshot yes...

UI / UX

ขนาดปุ่มบนหน้าจอมือถือ – นิ้วโป้งใหญ่กว่าเมาส์.. หัวใจสำคัญของ Fitts’ Law (ตอนที่2)

|

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

UI / UX

กฏของ Fitts (Fitts’ Law) “ระยะห่างของอินเตอร์แอคชั่น” (ตอนที่1)

|

ดูตัวอย่างเว็บไซต์ iBanking ของธนาคารกรุงเทพ ผมเข้าไปเพื่อทำการโอนเงิน ปรากฏว่าเมื่อผมสั่ง “ยืนยัน” การโอนแล้ว ผมมองไม่เห็นสถานะของระบบ ว่ากำลังทำงานอยู่หรือไม่เนื่องจาก progress ที่แสดงสัญลักษณ์ว่าระบบกำลังโอนเงินให้นั้นมันอยู่ห่างจากปุ่ม “ยืนยัน” มาก และมันค้างอยู่นานมากพอสมควรจนผมหลงคิดไปว่าระบบมันค้าง เกือบจะปิด browser (ซึ่งเป็นเรื่องที่ทำให้ผู้ใช้กังวลมากๆ เพราะมันคือการโอนเงิน..!! เมื่อปิด browser แล้วตกลงเงินมันโอนแล้วหรือยัง เงินจะหายระหว่างทางมั้ย เป็นเรื่องซีเรียสที่ทำให้คนพาลจะไม่อยากโอนเงินทางอินเทอร์เนตเลยครับ) ที่แย่ยิ่งไปกว่านั้นคือระยะห่าง (distance) ของ progress กับปุ่ม “ยืนยัน” มันห่างกันมากเสียจนตกขอบจอ คือหลังจากคลิก “ยืนยัน”...

UI / UX

ประยุกต์ใช้กฎ 80:20 ในงาน UX

|

“ยิ่งรู้จักผู้ใช้ งานพัฒนาจะยิ่งน้อยลง” ประโยคนี้หลายคนไม่เห็นด้วย เพราะคิดว่า “ยิ่งรู้จักผู้ใช้มาก ก็จะถูกผู้ใช้จะเรียกร้องฟังก์ชั่นใหม่ๆ มากขึ้นเรื่อยๆ” นั่นเพราะว่ายังไม่รู้จักกับกฎ 80:20 กฎ 80:20 เป็นกฎที่ Vitfredo Pareto ชาวอิตาลี่ได้ค้นพบโดยบังเอิญว่าในประเทศของเขานั้นประชากร 20% ของประเทศเป็นเจ้าของความร่ำรวยถึง 80% ของทรัพย์สินทั้งหมด นอกจาก Pareto แล้ว ผู้เชี่ยวชาญท่านอื่นๆ ก็ค้นพบสิ่งที่คล้ายๆ กันจนทำให้สัดส่วนนี้ได้รับความเชื่อถือมากขึ้น และกลายเป็นข้อสรุปในเรื่องว่า สัดส่วน 20% นั้นมักจะสร้างผลกระทบถึง 80% หรือจะบอกว่าสิ่งที่สำคัญถึงมีจำนวนน้อยก็จะสร้างผลกระทบได้เป็นวงกว้าง...