Tag: web design

15 ข้อผิดพลาดที่พบได้ใน UI Website จึงต้องระวัง

ui webpage
ui webpage

Julia Blake เขียนเมื่อ 13 พฤษภาคม 2015
เรื่อง 15 Worst UI Design Features to Watch Out For and Overcome
1. มีปุ่ม Reset อยู่ติดปุ่ม Submit ทำให้กดพลาดได้
2. มีปุ่ม Cancel อยู่ติดปุ่ม Back สำหรับกรอกหลายหน้า ทำให้กดพลาดได้
3. มีปุ่ม X ทำให้เข้าใจผิดว่า ปิดอะไร ซึ่งไม่ชัดเจน สื่อสารผิดพลาดได้
4. มีหน้า Chat เด้งขึ้นมาคุยกับเรา เมื่อเปิดเว็บไซต์ คงไม่ดีแน่
5. มี *** ขณะพิมพ์รหัสผ่าน ทำให้สับสน เพราะมองไม่เห็น
6. สไลด์ภาพอัตโนมัติ เป็นการบังคับให้ต้องดูข้อมูล
7. การเลื่อนข้อมูลให้เลือกแบบ Carousel เหมือนกงล้อ เห็นแล้วเชย
8. เมนูแบบตกลง ไม่เหมาะกับข้อมูลปริมาณมาก
9. ป้ายแบบทับข้อมูลตามมุม น่ารำคาญ
10. ถ้าคลิ๊กโลโก้ก็ต้องกลับไปหน้าแรก อย่าลืม
11. แถบนำทางขนาดใหญ่บนจอภาพ ใช้งานยาก
12. ให้เลือกว่าจะใช้ mouse หรือ keyboard เลื่อนข้อมูล
13. อย่าใช้สีฉูดฉาด
https://alison.com/courses/Colour-Theory-for-Artists-and-Designers
http://www.sessions.edu/certificate-programs/course-color-theory
14. ตัวอักษรเล็กเกินไป
15. ใช้ Captcha ตรวจสอบว่าเป็นมนุษย์หรือไม่
https://idxw.net/2015/05/27/15-%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%9C%E0%B8%B4%E0%B8%94%E0%B8%9E%E0%B8%A5%E0%B8%B2%E0%B8%94%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%84%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B9%81%E0%B8%9A%E0%B8%9A-ui-webs/
http://www.onextrapixel.com/2015/05/13/15-worst-ui-design-features-to-watch-out-for-and-overcome/

Unobtrusive Javascript เป็นพื้นฐานการออกแบบเว็บไซต์ยุคใหม่

responsive web design
responsive web design

Unobtrusive Javascript คือ หลักการที่จะแยก javascript ออกไปจาก html
เพื่อให้การพัฒนา Responsive web design ง่าย
สอดคล้องกับการแยก style ออกจาก html ไปไว้ใน CSS
ยุคต่อไปของการพัฒนาเว็บไซต์จะเป็น responsive web design
การแยก html ออกจาก script และ css เป็นหลักการพื้นฐานก่อนเริ่มออกแบบ
โดยยึดว่า basic design มองไม่ที่ mobile device ก่อน
คือการมองจาก screen ที่มีข้อจำกัดที่สุดก่อน
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Unobtrusive JavaScript
http://www.siamhtml.com/%E0%B8%AA%E0%B8%AD%E0%B8%99%E0%B8%82%E0%B8%B1%E0%B9%89%E0%B8%99%E0%B8%95%E0%B8%AD%E0%B8%99-%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%97%E0%B8%B3-responsive-web-design/
http://8columns.com/articles/50009/1387278156096
http://web.stoms.co.th/2013/10/15/responsive-web-design/
—
ตัวอย่างแฟ้ม x1.htm
เขียน html แบบฝัง javascript ลงไปใน html tag
<body>
<input type=”text” name=”s1″ onchange=”window.status=’hello’;return true;” />
</body>
—
ตัวอย่างแฟ้ม x2.htm
เขียน html แบบเรียกใช้ javascript จาก html tag ซึ่งผูกเชื่อมกันชัดเจน
<head>
<script>
function s2(){ window.status = “hello”; }
</script>
</head>
<body>
<input type=”text” name=”s2″ onchange=”s2()” />
</body>
—
ตัวอย่างแฟ้ม x3.htm
เขียน html กับ javascript แยกกันเด็ดขาด แต่ฝากไว้ในแฟ้ม html เท่านั้น
<head>
<script>
window.onload = function() {
document.getElementById(“s3”).onchange = s3;
function s3(){ window.status = “hello”; }
}
</script>
</head>
<body bgcolor=yellow>
<input type=”text” name=”s3″ id=”s3″ />
</body>
—
ตัวอย่างแฟ้ม x4.htm
ทั้ง html กับ javascript และ css ต่างคนต่างอยู่ ใช้ include เข้ามา
<head>
<link href=”x.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”x.js”></script>
</head>
<body>
<input type=”text” name=”s41″ id=”s41″ />
<input type=”text” id=”s42″ />
</body>
—
ตัวอย่างแฟ้ม x.js
window.onload = function() {
var s41 = document.getElementById(“s41”);
s41.onchange = function() {
window.status = “hello”;
};
document.getElementById(“s42”).onclick = s42;
function s42(){ alert(“hello”); }
};
—
ตัวอย่างแฟ้ม x.css
body {
background-color: #ffff00;
}