Chương 2. TỔNG QUAN

VỀ THIẾT KẾ WEB

2.1.1. Khái quát chung

+ Thiếtkế Website không chỉ chú trọng đến

ngôn ngữ HTML, các công cụ phát triểnWeb

+ Mà còn phảitập trung vào việcthiếtkế thiết

kếđồ hoạ, giao diệnngườisử dụng hay

những kiếnthứcvề cách thứctổ chức thông

tin,…

+ Trướckhixâydựng một Website, chúng ta

cầnphải:

– Xác định đốitượng độcgiả củawebsite

– Xác định mục đích của Website

– Thiếtlậpcácchủđề chính củawebsite

– Thiếtkế các khối thông tin chủ yếumàwebsite sẽ

cung cấp

+ 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ợpvớimục đích được đề

ra - đó là nguồn thông tin sẽ duy trì cho

website hoạt động

Xác định mục tiêu cơ bản

z Điềunàysẽ giúp đỡ rất nhiều cho công việcthiếtkế

z Nó là điểmxuất phát để chúng ta mở rộng đếncác

mục tiêu chính,  đánh giá sự thành công củamột

website

z Xây dựng một website là cả một quá trình liên tục

z Biên tập, quảnlývàduytrìkỹ thuậtdàihạnnhất định

phải bao trùm lên kế hoạch xây dựng website.

Xác định độcgiả

z Sự hiểubiết, trình độ, sở thích cũng như yêu cầucủa

độcgiả khác nhau (có hoặc không có kinh nghiệm)

z Mộthệ thống đượcthiếtkế tốtsẽ thích hợpchomột

dảirộng trình độ, nhu cầu độcgiả

Để chúng ta có thể thiếtkế cấutrúcphù

hợpvới nhu cầu, mong muốncủahọ.

Độcgiả mới,không thường xuyên

z Yêu cầucấu trúc site rõ ràng, dễ truy nhập đếnsự tổng quát

về cấu trúc toàn bộ thông tin trên website, tránh cấutrúc

menu phứctạp

z Theo Jakob Nielsen ở Sun Microsystems, dưới10% độcgiả

cuộn màn hình xuống dướiphần đầucủamộttrangweb

z Họ chú trọng đến trang khái quát, cấutrúccóphânlớpvà

hình ảnh đồ hoạ, biểutượng để dễ nhớ, kếtnối đếnvị trí

thông tin họ cần trong website của chúng ta

z Mộttừđiển các khái niệm, từ viếttắt và danh sách các vấn

đề thường đượcxảyracóthể rấthữudụng cho các độcgiả

Độcgiả chuyên nghiệp, thường xuyên

z Vào website của chúng ta để nhận thông tin nhanh chóng

và chính xác

z Họ rấtsốtruộtvới menu nhiềulớpcó đồ hoạ chấtlượng

kém mà chỉ cung cấptừ 2 đến6 lựachọnmộtlần

z Họ muốn các menu không đồ hoạ (text), có thể kéo thả

đượcvàthờigiannạpxuống nhanh

z Họ thường có chủđịnh rõ ràng trong đầu, do vậysẽđánh

giá cao các menu text chi tiết, các nét chính của website

hoặccácchỉ số site phong phú giúp họ tìm kiếm, thu nhận

thông tin nhanh chóng.

Các độcgiả nước ngoài

z Độcgiả có thể là mộtngười ngay ngoài phố, hoặcmột

ai đó đang ở bên Mỹ, Nhật,…

z Để đáp ứng tối đasố lượng độcgiả trên các quốcgia

khác nhau, chúng ta cầnbiêndịch, ít nhấtcũng là các

trang chủđạo. Tránh các từđịaphương, hoặc các khái

niệmkỹ thuật, viếttắttrongbảngiớithiệu hay các

trang giảithích

z Ví dụ, Không viếttắt ngày trên các trang web

Chiếnlượcthiếtkế

-Bạnmuốn nói gì?

-Tại sao thông tin củabạnlàcầnthiết?

-Bạnmuốnmọingườithựchiện điềugì?

Các ứng dụng trên công nghệ Web

z Đào tạo

z Dạyhọc

z Giáo dục

z Tham khảo

Đào tạo (Training)

z Mục đích tập trung vào thông tin chủ chốtlà đào tạo

z Giớihạn các liên kếtbằng nút "Tiếptục", hay "Quay về trang

trước" đảmbảomọi độcgiả sẽ nhìn thấy cùng mộtgiáotrình

z Đại đasố giáo trình giả thiếtthờigiantruynhậpdướimộtgiờ,

hoặcsẽđược phân đoạn thành các phầníthơnmộtgiờ

z Nên thông báo cho người đọcvề lượng thờigiancủa bài giảng,

lưuý họđừng đixakhỏiphầnchínhcủa bài giảng nếu bài

giảng đócầnphảitrả tiền để đọc

z Các ứng dụng đào tạoloại này thường yêu cầusự log-in của

độcgiả. Thông tin vềđọcgiả, bảng điểm đượclưutrữ trong cơ

sở dữ liệu được liên kếtvớiwebsite

Dạyhọc (Teaching)

z Trong các ứng dụng dạyhọcdựa trên công nghệ web,

thông tin được trình bày thường tinh tế và có chiềusâu

hơnlàtrongcác ứng dụng đào tạo

z Các mốiliênkếtlàmặtmạnh củaweb

z 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ệtkhỏiphần thông

tin chính

z Nên cho phép ‘IN’ in thông tin trên web  để  ĐG  đọc

chúng sau này

Giáo dục (Education)

z Thường các độcgiả nhóm này thường có trình độ cao -> ko

nên thiếtkế quá thu gọn, quá trình tự, nên thiếtkế mộtcấu

trúc uyểnchuyển, có tương tác, không đơn điệu

z Thiếtkế phải cho phép truy nhập nhanh đếnmộtphạmvi rộng

các chủđề, phong phú vớicácliênkế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

z Cầncóhình ảnh đồ hoạ thiếtkếđẹp, thay đổi cùng các minh

hoạđi kèm thông tin

z Thờigiantruynhậpthường ngắnhơn các site cho đào tạovì

độcgiả thường yêu cầu nhanh

z Cho phép in ấn(bắtbuộcphảicó)

Tham khảo(Reference)

z Các website tham khảo đượcthiếtkế tốt cho phép người đọc

nhanh chóng đithẳng vào vấn đề, tìm cái họ cầnvàsau đódễ

dàng in hoặclưugiữ cái họ tìm thấy

z 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ự

z Cấu trúc menu, nội dung phải đượctổ chứccẩnthận để hỗ trợ

tìm kiếm, thu nhận nhanh, dễ lưugiữ các file, in ấnkhicần

z Cầngiữ các hình ảnh đồ hoạ nhỏđể thờigiannạpxuống

nhanh, và chúng ta cũng nên nghiên cứu, áp dụng phầnmềm

tìm kiếm thay vì chỉ cung cấpmột danh sách các liên kết

z Thời gian liên kết càng ngắn càng tốt

2.1. Các bước xây dựng Website

2.1.2. Thiếtkế giao diện

z Giao diệnngười dùng đồ hoạ (GUI) củahệ thống,

cộng thêm các tương tác ẩndụ, hình ảnh và các

quan niệm đượcsử dụng để chuyểntảimọ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ấyvàcảmnhận" của các trang web

z Không thể hoàn toàn tách rờithiếtkếđồ hoạ với

thiếtkế giao diện

z Mộtsố câu hỏi đặtra:

– Ai?

– Cái gì?

– Khi nào?

– Nơi nào?

Thiếtkế Web khác TK tài liệu

z Thiếtkế Web phảitrảiqua sự phát triểnvàsự chuẩn

hoá cách thức thông tin đượctổ chức, thựchiện ở

dạng điệntử

z Các trang World Wide Web khác sách và các tài liệu

khác ở một nét cơ bản: các mốiliênkếtsiêuvănbản

cho phép người đọctruynhập đếnmộttrangweb

đơnlẻ không cần đếnlời nói đầuhay tựa đề

=> Header và Footer củacáctrangsẽ phứctạp

Hãy làm cho các trang web của

chúng ta độc đáo

z Các loại trang Web thường thiếtkế theo mẫu

z Cầncó điểm sáng tạo, tạo phong cách thiết

kế riêng

z Nhưng phải tuân theo các chuẩnmựccơ

bảncủathiếtkếđồ hoạ cũng như biên tậptài

liệuWeb

TK giao diệnhướng tớiUser

z Mụctiêuhướng tới user, giúp user tựđiềukhiển

được máy tính củahọ

z Không được đặtbấtcứ cảntrở nào cho user

z Các nhu cầuvàtâmlýhọc khách hàng là những yếu

tố quyết định

z Thiếtkế cho mọi đốitượng độcgiả

z Thử nghiệmcácthiếtkế, nhậncácphảnhồitừđộc

giả là phương pháp tốtnhất để tìm ra các ý tưởng

thiếtkế cho phép độcgiả nhận đượccáihọ muốn

z User chủ yếudùngcácliênkết

z Họ không xác định được đang ởđâu trong tổ

chức thông tin

z Các biểutượng nhất quán, dễ hiểu, các lược

đồ đồ hoạđồng nhất, màn hình tổng hợplàm

cho độcgiả tin tưởng là họ có thể tìm thấy

cái họ cần mà không lãng phí thờigian

Định hướng trợ giúp rõ ràng

Độcgiả phải luôn có khả năng quay trở lạitrangchủ

và các điểmchủ chốt trên website của chúng ta

Các liên kếtcơ 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ạocácmốiliênkếtcơ bảnvàgiúptạo

mộtbiểutượng đồ hoạ thông báo cho độcgiả biết

họ vẫncòn đang ở trong website của chúng ta

Khôngcótrangcuối cùng

(dead-end)

z Mọi trang web nên có ít nhấtmột liên kết

z Không để trang "dead-end" - các trang không móc nối đếncác

trang khác trong cùng site

Cho phép truy nhậptrựctiếp

z Mục đích là cung cấpcho độcgiả thông tin

họ cầnvớiítbướcnhấtvàvớithờigianngắn

nhất

z Cầnthiếtkế cấu trúc thông tin hiệuquả nhất,

giảmtối đacácbước qua hệ thống menu

z Các nghiên cứuvề giao diệnchỉ ra rằng độc

giả thích các menu mà có từ 5 đến 7 liên kết

Dải thông và ảnh hưởng

z Tốc độ truy nhậpmạng của Web càng nhanh càng tốt

z Nếu độcgiả chỉ là mộtngườidạochơi web bình

thường sử dụng modem tốc độ 28.8 kbps qua đường

điệnthoại, không nên đặtmột ảnh kích thướclên

trang web, độcgiả sẽ không đủ kiên nhẫnchờđếnkhi

ảnh đượcnạpxuống

z Nếuxâydựng một website cho trường học, doanh

nghiệp, nơimàmọingườitruynhập web server với

tốc độ mạng LAN hay cao hơnnữa, thì chúng ta lại

nên sử dụng nhiều ảnh và multimedia

Đơngiảnvànhất quán

z Các biểutượng nên đơngiản, quen thuộclàdẽ hiểu

với độcgiả

z Thiếtkế thông tin tốtnhấtlànhững cái mà đasốđộc

giả chưa bao giờ nhậnthấy.

z www.adobe.com là mộtmôhìnhxuấtsắcchothiết

kế website. Các trang sử dụng đồ hoạ mộtcách

rộng rãi vớicáctrợ giúp định vị (navigation), áp dụng

nhất quán ở tấtcả các trang trên website

z Thiếtkế trang mộtcáchnhất quán, tấtcảđềusử

dụng chung mộtkiểu đồ hoạ, phong cách biên tập

và mô hình tổ chức

z Mục đích là tính đồng nhất, có thểđoán trước, để

độcgiả cẩmthấythoải mái khi khai thác website và

chắcchắnhọ biếtphải tìm cái họ cầntìm

z Các biểutượng đồ hoạ trên trang web cung cấpcác

tín hiệutrực quan về sự tiếpnốicủa thông tin

Tính ổn định thiếtkế

z Tính ổn định chứcnăng trong thiếtkế web là giữ các

thành phầngiaotiếpcủa website làm việc ổn định

z Tính ổn định chứcnăng có hai thành phần- đặtcác

vật đúng chỗ ngay từđầukhithiếtkế, và sau đógiữ

chúng hoạt động nhịp nhàng trong suốtthờigian

z Trong khi thiếtkế, cầnkiểmtrathường xuyên các liên

kết để đảmbảo chúng còn tồntại

z Cầncólịch kiểmtralạicácliênkếtvàcả nội dung của

nó có còn thích hợp không

Nếumuốn thuyếtphục độcgiả rằng thông mà chúng

ta cung cấp là chính xác, đáng tin cậy, thì phảithiếtkế

website của chúng ta cẩnthận, giống như chúng ta

tạocácmốiliênhệ với các doanh nghiệp khác, với

cùng sự biên tập và các trình độ thiếtkế cao

z Một site trông luộmthuộm, vớithiếtkế trực quan

nghèo nàn, trình độ biên tậpkémsẽ không truyền

đượcsự tin cậy cho các độcgiả

Phảnhồivà đốithoại

z Phảnhồicũng có nghĩalàbướcchuẩnbị cho việc

trả lời, đáp ứng các đòi hỏi, góp ý của độcgiả

z Các website thiếtkế tốt luôn cung cấpmối liên hệ

trựctiếptới ban biên tậphoặc "webmaster" phụ

trách kỹ thuậtcủasite.

z Lên kế hoạch đảmbảo quan hệ liên tụcvớicác

độcgiả là quan trọng sống còn đốivớisự thành

công lâu dài củamột doanh nghiệp.

Thiếtkế cho các trình duyệtkhác

z Nhiều độcgiả không có chương trình duyệt đồ hoạ

z Làm thế nào để các độcgiả với web browser không

có khả năng đồ hoạ vẫnhiểu đượcchứcnăng của

hình ảnh trên trang web (sử dụng nhãn ALT)

z Giúp các độcgiả khiếmthị 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ấthẳnnội dung

củabức ảnh, phím đồ hoạđi kèm trang web

Điềukhiển

z Các điềukhiển đồ hoạ và liên kếttương tác trong

trang web sẽ thu hút sự chú ý của độcgiả

z Sử dụng các phím ấn đồng nhất, có thể tựđoán

được, chúng ta đãgiúp độcgiả có đượccảmnhận

của website của mình, và làm cho logic và trậttự

của web site trở nên rõ ràng

z Ví dụ sau đây từ trang chủ của PBS phong phú đồ

hoạ, liên kết đãhấpdẫn ngay người đọc vào site

này: www.pbs.org

Tạongữ cảnh

z Khi ta thấymộtliênkết web trên một trang, chúng ta

có ít cảmnhận chúng ta sẽđượcdẫ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ệntạinhư thế nào

z Đại đasố các trang web không vừakhớpvớimàn

hình 14-15 inch, nên ko hiểnthị hết thông tin

2.1.3. Thiếtkế nội dung

z Các phầnnội dung cơ bản trong 1 Webiste

z Mộtsố chứcnăng thường gặpcủa website

và mục đích sử dụng

z Nội dung cơ bảncủamộtsố website TMĐT 

Các phầnnội dung cơ bản trong một

Webiste:

– Trang chủ (home page)

– Trang liên hệ (contact us)

– Trang thông tin giớithiệuvề doanh nghiệp (about us)

– Trang giớithiệuvề sảnphẩmdịch vụ

(products/services)

– Trang hướng dẫnhoặc chính sách (Policies)

Mộtsố chứcnăng thường gặpcủa website

và mục đích sử dụng :

– Diễn đàn (forum)

– Đăng ký nhậnbảntin

– Thông báo, tin tứcmới

– Giỏ mua hàng (shopping cart)

– Download miễn phí

– Thành viên

Nội dung cơ bảncủamộtsố website TMĐT:

– Giớithiệuvề Cty

– Quảng cáo sảnphẩm

– Đặt hàng

– Thanh toán trựctuyến

– Đấugiátrựctuyến

– Liên kếtvới các site thành viên

– Liên hệ với doanh nghiệp

– …

Mộtsố website TMĐT tiêu biểu

– Amazone.com

– Chodientu.vn

– Thanhhoaportal.vn

– …