Bài giảng Tổng quan về thiết kế web

Chương 2. TỔNG QUAN VỀ THIẾT KẾWEB 9/8/2010 Tổng quan về thiết kếWebsite 2/55 NỘI DUNG 2.1. Các bước xây dựng Website 2.2. Các nguyên tắc thiết kế website 9/8/2010 Tổng quan về thiết kếWebsite 3/55 2.1. Các bước xây dựng Website 2.1.1. Khái quát chung 2.1.2. Thiết kế giao diện 2.1.3. Thiết kế nội dung 9/8/2010 Tổng quan về thiết kếWebsite 4/55 2.1.1. Khái quát chung
Thiết kế Website không chỉ chú trọng ñến ngôn ngữ HTML, các công cụ phát triển Web
Mà còn phải tập trung vào việc thiết kế thiết kế ñồ hoạ, giao diện người sử dụng hay những kiến thức về cách thức tổ chức thông tin,… 9/8/2010 Tổng quan về thiết kếWebsite 5/55 2.1.1. Khái quát chung
Trước khi xây dựng một Website, chúng ta cần phải: – Xác ñịnh ñối tượng ñộc giả của website – Xác ñịnh mục ñích của Website – Thiết lập các chủ ñề chính của website – Thiết kế các khối thông tin chủ yếu mà website cung cấp 9/8/2010 Tổng quan về thiết kếWebsite 6/55 2.1.1. Khái quát chung
Xác ñịnh nguồn tài nguyên về nội dung, hình ảnh thông tin mà chúng ta cần ñến ñể tạo nền website phù hợp với mục ñích ñược ñề ra – ñó là nguồn thông tin sẽ duy trì cho website hoạt ñộng 9/8/2010 Tổng quan về thiết kếWebsite 7/55 Xác ñịnh mục tiêu cơ bản
Điều này sẽ giúp ñỡ rất nhiều cho công việc thiết kế
Nó là ñiểm xuất phát ñể chúng ta mở rộng ñến các mục tiêu chính, ñánh giá sự thành công của một website
Xây dựng một website là cả một quá trình liên tục
Biên tập, quản lý và duy trì kỹ thuật dài hạn nhất ñịnh phải bao trùm lên kế hoạch xây dựng website. 9/8/2010 Tổng quan về thiết kếWebsite 8/55 Xác ñịnh ñộc giả
Sự hiểu biết, trình ñộ, sở thích cũng như yêu cầu của ñộc giả khác nhau (có hoặc không có kinh nghiệm)
Một hệ thống ñược thiết kế tốt sẽ thích hợp cho một dải rộng trình ñộ, nhu cầu ñộc giả Để chúng ta có thể thiết kế cấu trúc phù hợp với nhu cầu, mong muốn của họ 9/8/2010 Tổng quan về thiết kếWebsite 9/55 Độc giả mới,không thường xuyên
Yêu cầu cấu trúc site rõ ràng, dễ truy nhập ñến sự tổng quát về cấu trúc toàn bộ thông tin trên website, tránh cấu trúc menu phức tạp
Theo Jakob Nielsen ở Sun Microsystems, dưới 10% ñộc giả cuộn màn hình xuống dưới phần ñầu của một trang web
Họ chú trọng ñến trang khái quát, cấu trúc có phân lớp và hình ảnh ñồ hoạ, biểu tượng ñể dễ nhớ, kết nối ñến vị trí thông tin họ cần trong website của chúng ta
Một từ ñiển các khái niệm, từ viết tắt và danh sách các vấn ñề thường ñược xảy ra có thể rất hữu dụng cho các ñộc giả 9/8/2010 Tổng quan về thiết kếWebsite 10/55 Độc giả chuyên nghiệp, thường xuyên
Vào website của chúng ta ñể nhận thông tin nhanh chóng và chính xác
Họ rất sốt ruột với menu nhiều lớp có ñồ hoạ chất lượng kém mà chỉ cung cấp từ 2 ñến 6 lựa chọn một lần
Họ muốn các menu không ñồ hoạ (text), có thể kéo thả ñược và thời gian nạp xuống nhanh
Họ thường có chủ ñịnh rõ ràng trong ñầu, do vậy sẽ ñánh giá cao các menu text chi tiết, các nét chính của website hoặc các chỉ số site phong phú giúp họ tìm kiếm, thu nhận thông tin nhanh chóng 9/8/2010 Tổng quan về thiết kếWebsite 11/55 Menu cho phép truy cập nhanh 9/8/2010 Tổng quan về thiết kếWebsite 12/55 Các ñộc giả nước ngoài
Độc giả có thể là một người ngay ngoài phố, hoặc một ai ñó ñang ở bên Mỹ, Nhật,…
Để ñáp ứng tối ña số lượng ñộc giả trên các quốc gia khác nhau, chúng ta cần biên dịch, ít nhất cũng là các trang chủ ñạo. Tránh các từ ñịa phương, hoặc các khái niệm kỹ thuật, viết tắt trong bản giới thiệu hay các trang giải thích 9/8/2010 Tổng quan về thiết kếWebsite 13/55 Có Tiếng Anh 9/8/2010 Tổng quan về thiết kếWebsite 14/55 Chiến lược thiết kế - Bạn muốn nói gì? - Tại sao thông tin của bạn là cần thiết? - Bạn muốn mọi người thực hiện ñiều gì? 9/8/2010 Tổng quan về thiết kếWebsite 15/55 Các ứng dụng trên công nghệWeb
Đào tạo
Dạy học
Giáo dục
Tham khảo 9/8/2010 Tổng quan về thiết kếWebsite 16/55 Dạo chơi trên Web (Browsing)
Diễn ñàn 9/8/2010 Tổng quan về thiết kếWebsite 17/55 Đào tạo (Training)
Mục ñích tập trung vào thông tin chủ chốt là ñào tạo
Giới hạn các liên kết bằng nút "Tiếp tục", hay "Quay về trang trước" ñảm bảo mọi ñộc giả sẽ nhìn thấy cùng một giáo trình
Đại ña số giáo trình giả thiết thời gian truy nhập dưới một giờ, hoặc sẽ ñược phân ñoạn thành các phần ít hơn một giờ
Nên thông báo cho người ñọc về lượng thời gian của bài giảng, lưu ý họ ñừng ñi xa khỏi phần chính của bài giảng nếu bài giảng ñó cần phải trả tiền ñể ñọc
Các ứng dụng ñào tạo loại này thường yêu cầu sự log-in của ñộc giả. Thông tin về ñọc giả, bảng ñiểm ñược lưu trữ trong cơ sở dữ liệu ñược liên kết với website 9/8/2010 Tổng quan về thiết kếWebsite 18/55 9/8/2010 Tổng quan về thiết kếWebsite 19/55 Dạy học (Teaching)
Trong các ứng dụng dạy học dựa trên công nghệ web, thông tin ñược trình bày thường tinh tế và có chiều sâu hơn là trong các ứng dụng ñào tạo
Các mối liên kết là mặt mạnh của web
Nên nhóm các liên kết ñến các tài nguyên web khác ngoài website của chúng ta cách biệt khỏi phần thông tin chính
Nên cho phép ‘IN’ in thông tin trên web ñể ĐG ñọc chúng sau này 9/8/2010 Tổng quan về thiết kếWebsite 20/55 9/8/2010 Tổng quan về thiết kếWebsite 21/55 Giáo dục (Education)
Thường các ñộc giả nhóm này thường có trình ñộ cao -> ko nên thiết kế quá thu gọn, quá trình tự, nên thiết kế một cấu trúc uyển chuyển, có tương tác, không ñơn ñiệu
Thiết kế phải cho phép truy nhập nhanh ñến một phạm vi rộng các chủ ñề, phong phú với các liên kết ñến các thông tin có liên quan, trên website của chúng ta hay trên các website khác
Cần có hình ảnh ñồ hoạ thiết kế ñẹp, thay ñổi cùng các minh hoạ ñi kèm thông tin
Thời gian truy nhập thường ngắn hơn các site cho ñào tạo vì ñộc giả thường yêu cầu nhanh
Cho phép in ấn (bắt buộc phải có) 9/8/2010 Tổng quan về thiết kếWebsite 22/55 9/8/2010 Tổng quan về thiết kếWebsite 23/55 Tham khảo (Reference)
Các website tham khảo ñược thiết kế tốt cho phép người ñọc nhanh chóng ñi thẳng vào vấn ñề, tìm cái họ cần và sau ñó dễ dàng in hoặc lưu giữ cái họ tìm thấy
Thường thông tin không phải là các "câu chuyện", do ñó cấu trúc của nó hoàn toàn không có trình tự
Cấu trúc menu, nội dung phải ñược tổ chức cẩn thận ñể hỗ trợ tìm kiếm, thu nhận nhanh, dễ lưu giữ các file, in ấn khi cần
Cần giữ các hình ảnh ñồ hoạ nhỏ ñể thời gian nạp xuống nhanh, và chúng ta cũng nên nghiên cứu, áp dụng phần mềm tìm kiếm thay vì chỉ cung cấp một danh sách các liên kết
Thời gian liên kết càng ngắn càng tốt 9/8/2010 Tổng quan về thiết kếWebsite 24/55 9/8/2010 Tổng quan về thiết kếWebsite 25/55 2.1. Các bước xây dựng Website 2.1.1. Khái quát chung 2.1.2. Thiết kế giao diện 2.1.3. Thiết kế nội dung 9/8/2010 Tổng quan về thiết kếWebsite 26/55 2.1.2. Thiết kế giao diện
Giao diện người dùng ñồ hoạ (GUI) của hệ thống, cộng thêm các tương tác ẩn dụ, hình ảnh và các quan niệm ñược sử dụng ñể chuyển tải mọi tính năng, thông tin lên màn hình => tạo nên nét ñặc trưng "nhìn thấy và cảm nhận" của các trang web
Không thể hoàn toàn tách rời thiết kế ñồ hoạ với thiết kế giao diện 9/8/2010 Tổng quan về thiết kếWebsite 27/55 2.1.2. Thiết kế giao diện
Trả lời các câu hỏi: – Ai? – Cái gì? – Khi nào? – Nơi nào? 9/8/2010 Tổng quan về thiết kếWebsite 28/55 Hãy làm cho các trang web của chúng ta ñộc ñáo
Các loại trang Web thường thiết kế theo mẫu
Cần có ñiểm sáng tạo, tạo phong cách thiết kế riêng
Nhưng phải tuân theo các chuẩn mực cơ bản của thiết kế ñồ hoạ cũng như biên tập tài liệu Web 9/8/2010 Tổng quan về thiết kếWebsite 29/55 9/8/2010 Tổng quan về thiết kếWebsite 30/55 TK giao diện hướng người sử dụng
Mục tiêu giúp người sử dụng tự ñiều khiển ñược máy tính của họ
Không ñược ñặt bất cứ cản trở nào cho người sử dụng
Cần các kiến thức về tâm lý học khách hàng 9/8/2010 Tổng quan về thiết kếWebsite 31/55 Định hướng trợ giúp rõ ràng 9/8/2010 Tổng quan về thiết kếWebsite 32/55
Độc giả phải luôn có khả năng quay trở lại trang chủ và các ñiểm chủ chốt trên website của chúng ta
Các liên kết cơ bản này nên có trên mọi trang web của chúng ta, nó thường là các nút ấn ñồ hoạ với hai mục ñích: tạo các mối liên kết cơ bản và giúp tạo một biểu tượng ñồ hoạ thông báo cho ñộc giả biết họ vẫn còn ñang ở trong website của chúng ta Định hướng trợ giúp rõ ràng 9/8/2010 Tổng quan về thiết kếWebsite 33/55 Không có trang cuối cùng (dead-end)
Mọi trang web nên có ít nhất một liên kết
Không ñể trang "dead-end" - các trang không móc nối ñến các trang khác trong cùng site 9/8/2010 Tổng quan về thiết kếWebsite 34/55 Cho phép truy nhập trực tiếp
Mục ñích là cung cấp cho ñộc giả thông tin họ cần với ít bước nhất và với thời gian ngắn nhất
Cần thiết kế cấu trúc thông tin hiệu quả nhất, giảm tối ña các bước qua hệ thống menu
Các nghiên cứu về giao diện chỉ ra rằng ñộc giả thích các menu mà có từ 5 ñến 7 liên kết 9/8/2010 Tổng quan về thiết kếWebsite 35/55 Dải thông và ảnh hưởng
Tốc ñộ truy nhập mạng của Web càng nhanh càng tốt
Nếu ñộc giả chỉ là một người dạo chơi web bình thường sử dụng modem tốc ñộ 28.8 kbps qua ñường ñiện thoại, không nên ñặt một ảnh kích thước lên trang web, ñộc giả sẽ không ñủ kiên nhẫn chờ ñến khi ảnh ñược nạp xuống
Nếu xây dựng một website cho trường học, doanh nghiệp, nơi mà mọi người truy nhập web server với tốc ñộ mạng LAN hay cao hơn nữa, thì chúng ta lại nên sử dụng nhiêu hình ảnh và multimedia 9/8/2010 Tổng quan về thiết kếWebsite 36/55 Đơn giản và nhất quán
Các biểu tượng nên ñơn giản, quen thuộc là dễ hiểu với ñộc giả
www.adobe.com là một mô hình xuất sắc cho thiết kế website. Các trang sử dụng ñồ hoạ một cách rộng rãi với các trợ giúp ñịnh vị (navigation), áp dụng nhất quán ở tất cả các trang trên website 9/8/2010 Tổng quan về thiết kếWebsite 37/55 9/8/2010 Tổng quan về thiết kếWebsite 38/55 Đơn giản và nhất quán
Thiết kế trang một cách nhất quán, tất cả ñều sử dụng chung một kiểu ñồ hoạ, phong cách biên tập và mô hình tổ chức
Mục ñích là tính ñồng nhất, có thể ñoán trước, ñể ñộc giả cẩm thấy thoải mái khi khai thác website và chắc chắn họ biết phải tìm cái họ cần tìm
Các biểu tượng ñồ hoạ trên trang web cung cấp các tín hiệu trực quan về sự tiếp nối của thông tin 9/8/2010 Tổng quan về thiết kếWebsite 39/55 Tính ổn ñịnh thiết kế
Tính ổn ñịnh chức năng trong thiết kế web là giữ các thành phần giao tiếp của website làm việc ổn ñịnh
Trong khi thiết kế, cần kiểm tra thường xuyên các liên kết ñể ñảm bảo chúng còn tồn tại
Cần có lịch kiểm tra lại các liên kết và cả nội dung của nó có còn thích hợp không 9/8/2010 Tổng quan về thiết kếWebsite 40/55 Tính ổn ñịnh thiết kế
Nếu muốn thuyết phục ñộc giả rằng thông mà chúng ta cung cấp là chính xác, ñáng tin cậy, thì phải thiết kế website của chúng ta cẩn thận, giống như chúng ta tạo các mối liên hệ với các doanh nghiệp khác, với cùng sự biên tập và các trình ñộ thiết kế cao
Một site trông luộm thuộm, với thiết kế trực quan nghèo nàn, trình ñộ biên tập kém sẽ không truyền ñược sự tin cậy cho các ñộc giả 9/8/2010 Tổng quan về thiết kếWebsite 41/55 Phản hồi và ñối thoại
Phản hồi cũng có nghĩa là bước chuẩn bị cho việc trả lời, ñáp ứng các ñòi hỏi, góp ý của ñộc giả
Các website thiết kế tốt luôn cung cấp mối liên hệ trực tiếp tới ban biên tập hoặc "webmaster" phụ trách kỹ thuật của site.
Lên kế hoạch ñảm bảo quan hệ liên tục với các ñộc giả là quan trọng sống còn ñối với sự thành công lâu dài của một doanh nghiệp. 9/8/2010 Tổng quan về thiết kếWebsite 42/55 Tương thích với các trình duyệt khác nhau
Nhiều ñộc giả không có chương trình duyệt ñồ hoạ
Làm thế nào ñể các ñộc giả với web browser không có khả năng ñồ hoạ vẫn hiểu ñược chức năng của hình ảnh trên trang web (sử dụng nhãn ALT)
Giúp các ñộc giả khiếm thị có thể nghe các thông báo thay thế mà chúng ta cho hỗ trợ cùng hình ảnh ñồ hoạ, do ñó không hoàn toàn mất hẳn nội dung của bức ảnh, phím ñồ hoạ ñi kèm trang web 9/8/2010 Tổng quan về thiết kếWebsite 43/55 Điều khiển
Các ñiều khiển ñồ hoạ và liên kết tương tác trong trang web sẽ thu hút sự chú ý của ñộc giả
Sử dụng các phím ấn ñồng nhất, có thể tự ñoán ñược, chúng ta ñã giúp ñộc giả có ñược cảm nhận của website của mình, và làm cho logic và trật tự của web site trở nên rõ ràng
Ví dụ sau ñây từ trang chủ của PBS phong phú ñồ hoạ, liên kết ñã hấp dẫn ngay người ñọc vào site này: www.pbs.org 9/8/2010 Tổng quan về thiết kếWebsite 44/55 9/8/2010 Tổng quan về thiết kếWebsite 45/55 Tạo ngữ cảnh
Khi ta thấy một liên kết web trên một trang, chúng ta có ít cảm nhận chúng ta sẽ ñược dẫn ñi ñâu, có bao nhiêu thông tin ở ñó, và chính xác thông tin ñó quan hệ thế nào ñến trang hiện tại như thế nào
Đại ña số các trang web không vừa khớp với màn hình 14-15 inch, nên ko hiển thị hết thông tin 9/8/2010 Tổng quan về thiết kếWebsite 46/55 Liên kết cố ñịnh và tương ñối 9/8/2010 Tổng quan về thiết kếWebsite 47/55 2.1. Các bước xây dựng Website 2.1.1. Khái quát chung 2.1.2. Thiết kế giao diện 2.1.3. Thiết kế nội dung 9/8/2010 Tổng quan về thiết kếWebsite 48/55
Các phần nội dung cơ bản trong 1 Webiste
Một số chức năng thường gặp của website và mục ñích sử dụng
Nội dung cơ bản của một số website TMĐT 2.1.3. Thiết kế nội dung 9/8/2010 Tổng quan về thiết kếWebsite 49/55
Các phần nội dung cơ bản trong một Webiste: – Trang chủ (home page) – Trang liên hệ (contact us) – Trang thông tin giới thiệu về doanh nghiệp (about us) – Trang giới thiệu về sản phẩm dịch vụ (products/services) – Trang hướng dẫn hoặc chính sách (Policies) 2.1.3. Thiết kế nội dung 9/8/2010 Tổng quan về thiết kếWebsite 50/55
Một số chức năng thường gặp của website và mục ñích sử dụng : – Diễn ñàn (forum) – Đăng ký nhận bản tin – Thông báo, tin tức mới – Giỏ mua hàng (shopping cart) – Download miễn phí – Thành viên 2.1.3. Thiết kế nội dung 9/8/2010 Tổng quan về thiết kếWebsite 51/55
Nội dung cơ bản của một số website TMĐT: – Giới thiệu về Cty – Quảng cáo sản phẩm – Đặt hàng – Thanh toán trực tuyến – Đấu giá trực tuyến – Liên kết với các site thành viên – Liên hệ với doanh nghiệp – … 2.1.3. Thiết kế nội dung 9/8/2010 Tổng quan về thiết kếWebsite 52/55
Một số website TMĐT tiêu biểu – Amazone.com – Chodientu.vn – Thanhhoaportal.vn – … 2.1.3. Thiết kế nội dung 9/8/2010 Tổng quan về thiết kếWebsite 53/55 T h a n k y o u !