Cẩm nang thiết kế website

T ín h tiện dụng của W eb thay đổi chậm hơn công nghệ W eb, do đó, các phương thức và khái niệm được nêu trong cuốn sách này sẽ còn giúp bạn đắc lực trong nhiều n ăm nửa, kể cả khi quá t

NHÓM TÁC GIẢ EUCOM

N H À XUẤT BẢ N H À N Ộ I

Mã sổ■= DV, - ^ 8 5 4 - 449 - 2000

H N - 2 0 0 0

L Ờ I G IỚ I T H IỆ U

W eb là phương tiện th ô n g tin lớn nhất và ngày càn g được nhiểu người sử dụng Với 2 0 triệu Website hiện nay và ước tính kho ản g 100 triệu W ebsite vào n ăm 2 0 2 0 , người sử dụng sẽ có nhiổu sự lưa ch ọ n hơn bao giờ h ế t Vì th ế, chẳng có lý do gì mà h ọ lại truy c ậ p những site rắc rối,

tốc độ ch ậm và không đ á p ứhg được yêu cẳu của họ Chỉ những site đơn giản, c ó tín h tiện dụng

cao mới có th ể đứng vữhg tro n g cuộc cạn h tran h khốc liệt này

Với m ục đích giúp các n h à thiết k ế W eb tạo ra những W ebsite th u ậ n tiện c h o người sử dụng, n h ó m tác giả ELICOM xin trằn trọng giới thiệu cuốn c ẩ m n a n g t h i ế t k ế W ebsite

Cuốn sách n à y sẽ trình bày những khía cạn h chính trong thiết k ế W eb n h ư th iế t k ế tran g , thiết k ế nội dung và thiết k ế to àn bộ cấu trúc site sao cho phù h ợ p với c á c đ á i tượng sử dụng Các p h ần trình bày đều được m inh h ọ a bằng những ví dụ thực tế, đ ó là nhừhg W ebsite lớn và n ổ i tiếng ừ ê n

to àn t h ế giới Q ua đó, các bạn có th ể rút ra nhữtig bài h ọ c từ kinh nghiệm của người khác, bởi vì

chẳng c ó lý d o gì m à chúng ta lại p h ạm ph ải những lổi m à nhiáu người kh ác đ ã m ắc Nếu tu ân

th e o nhCỒig c h ỉ d ấ n trong cuốn sách này, các bạn sỗ có những đề á n W eb n h a n h h ơ n và đ á p ứng điA^c y ê u cầu của nhiổu người sử dụng

C h ú c các bọn th à n h công.

M Ụ C L Ụ C

GIỚI THIỆU : TẦM QUAN TRỌNG CỦA TÍNH TIỆN DỤNG

Nchệ thuật và kỹ thuật 9

Tạ sao mọi người lại thiết k ế không chuẩn các Website 11

Chương 2 THIỂT KẾ TRANG Bccục màn hình 13

Thết kế xuyên nền 18

Người sử dụng từ đâu đ ế n ? 21

Thiết kế không phụ thuộc vào độ phân g iải 22

Sử dụng nội dung không chuẩn 24

Cân nhắc việc cài đặt phiẻn bản m ớ i 24

Khi nào nâng cấp thi an to àn ? 26

Tách biệt ý nghĩa và trình bày thông tin 28

Thời gian đáp ứhg 33

Thời gian đảp ứng có thể đoán trư ớc 33

Tốc độ tải trang nhanh, tác độ kết nối n h anh 36

Xem lướt mản hình đáu tiôn 39

Sử dụng HTTP 39

Lỉén k ế t 42

Miêu tả liên k ế t 42

Tiồu để liên k ế t 48

Tô màu liên kết 51

Vài điểm lưu ý vể liôn k ế t 51

Liên kết bao quanh 52

Liên kết tới 56

Liên kết tới các thuô bao và đăng ký 61

Quảng cáo liốn k ế t 62

Trang m ẫ u 64

Chuẩn hóa thiết kế qua trang mẫu 64

Đảm bảo rằng các trang mẵu đểu hoạt động 66

K hung 67

Có phải lúc nào cũng nên sử dụng khung? 71

Sự tín nhiệm 74

In ấ n 74

Kết luận 76

Chương 3 THIẾT KẾ NỘI DUNG Viết thông tin cho W eb 78

Nội dung ngắn gọn 78

Hiệu chỉnh bản copy 79

Đọc lướt 80

Ngôn ngữ đơn giản 85

Tách thông tin thành nhiều tran g 86

Tiồu đá trang 97

Viết tiỗu để 97

Dễ đọc 98

Thông tin chỉ dẵn trực tuyến 99

Đa phương tiện 103

Thời gian đáp ứhg 105

Hĩnh ảnh và ảnh c h ụ p 106

Giảm tỉ lệ hình ả n h 106

Ảnh động 112

Hiển thị sự nối tiếp trong các chuyển đổi 112

Xác định chiều trong các chuyển đổi 112

Minh họa sự thay đổỉ theo thời gian 114

Hiển thị nhiều đối tư ợ n g 114

Làm phong phú các trình bày đồ họa 114

Hiển trị cấu trúc ba chiểu 114

Thu hút sự chú ý 115

V ideo 115

Video đổ dán và video có thể tải xuống 118

Audio 118

Giúp người tàn tật sử dụng đa phương tiệ n 121

Đồ họa ba chiểu 121

Sử dụng không gian ba chiểu không hợp lý 122

Khi nào nên sử dụng không gian ba chiểu? 124

Kết luận 125

Chương 4 THIẾT KẾ SITE Trang c h ủ 128

Chiểu rộng thích hợp của trang 130

Chiểu rộng trang chủ 130

Màn hình nổi bặt sẽ không còn tồn tại nữa 136

Trang chủ và các trang bôn trong 136

Liốn kết sâu 138

Ẩn d ụ 1 3 9 Shopping Cart, tiêu chuần giao diện 146

Định hướng 146

Tôi đang ở đâu ? 146

Tôi ở đâu? 149

Tôi có thể đến đâu? 149

Cấu trúc site 154

Chiểu rộng và chiểu sâu 157

Người sử dụng điểu khiển định hướng 167

Hố trợ người sử dụng quản lý lượng thông t i n 169

Giảm bớt sự lộn xộn trong định hướng 173

Site c o n 174

Khả năng tìm kiếm 175

Tìm kiếm nâng cao 178

Trang kết quả tìm kiếm 178

Mò tả trang và từ chính 183

Thiết kế đích tìm kiếm 189

Thiết kế địa chỉ U R L 195

Địa chỉ URL lưu tr ữ 198

Quảng cáo địa chỉ URL 199

Hỗ trợ các địa chỉ URL cù 199

Nội dung do người sừ dụng đóng g ó p 203

Định hướng Applet 203

Thao tác chậm 206

Kết lu ận 206

Chương 5 THIỂT KỂ INTRANET Điểm khác biệt giữa thiết kế intranet vầ thiết kế Internet 207

Thiết kếextranet 209

Cải tiến nhân tố quyết định thông qua năng suất của nhân viên 211

Cổng vào intranet: cơ sở hạ tầng thông tin của công ty 217

Bảo trì intranet 219

Ba thành phần lớn của cơ sờ hạ tầng: thư mục, tim kiếm và tin tức 219

Tiêu chuẩn thiết kế intranet 220

Các hướng dẵn vổ tiôu chuẩn 221

Thuô thiết kế intranet 222

Quản lý việc truy cập Web của nhân vién 223

Các tiêu chuẩn vể phản cứng 223

Các mặc định trình duyệt 224

Mặc định hệ thống tìm kiếm 225

Thử nghiệm người sử dụng intranet 226

Nghiỗn cứu thực t ế 227

Kết luận 229

Chương 6 KHẢ NĂNG TRUY CẬP CỦA NGƯỜI s ử DỤNG KHUYẾT TẬT Bước khởi đẳu của khả năng truy cập W eb 231

Ngitòi khiếm th ị 233

Các thuộc tính của ALT 234

Khuyết tật vể thính g iác 238

Khuyết tật về diền ngôn 238

Khuyết tật về di chuyển 238

Khuyết tật vể nhận th ứ t 239

Kết luận: khả năng truy cập thực t ế 240

Chương 7 PHỤC VỤ NGƯỜI SỬ DỤNG TOÀN CẦU Quốc tế hóa và địa phương h ó a 242

Thiết kế cho việc quốc tế h ó a 242

Kiểm tra quốc t ế 245

Các site được dịch và viết bằng nhiểu ngôn n g ữ 246

Lựa chọn ngôn n g ữ 248

Tìm kiếm đa ngôn ngữ 256

Điểm khác biệt giữd các vùng 256

Kiểm tra người sử dụng quốc tế 257

Khắc phục khoảng cách vể ngôn ngữ 257

Nên thử nghiệm ở bao nhiêu nước? 258

Cảm ơn những người tham gia 258

Phương thức thử nghiệm 259

Tự bạn đi ra nước ngoài 259

Thử nghiệm người sử dụng từ x a 260

Phòng thí nghiệm về tính tiện dụng dành cho thử nghiệm quốc t ế 261

Tự tiến hành thử nghiệm • 262

Kết luận 265

Chương 8 NHỬNG D ự BÁO TƯƠNG LAI: THAYĐổI, BẤT BIỂN DUY NHẤT CỦA WEB Các khuynh hướng lâu dài 266

Các thiết bị thông tin 270

W ebT V 271

Loại bỏ trình duyệt Web 278

Dải thông đang dần được mở rộng 278

Các biểu tượng ẩn dụ vể W eb 280

Điện th o ại 280

Truyền hình 284

Cấu trúc lại không gian đa phương tiện: báo chí sỗ không còn 286

Kết luận ! 289

Chương 9 TÍNH ĐƠN GIẢN TRONG THIẾT KẾ WEB Các Website "Home - Run" 290

Thời điểm thích hợp nhất và thời điểm không thích hợp n h ắ t 298

Chương 1

GIỎI THIỆU : TẦM QUAN TRỌNG CỦA

TÍNH TIỆN DỤNG■ ■

Tính tới th án g Giêng năm 2 0 0 0 , đã có khoảng mười triệu site trên Web C on số này sẽ là

2 5 triệu vào cuối năm nay và sẻ tăng lẽn th àn h hàng trăm triệu vào năm 2 0 0 2 N hư vậy, người sử dụng sỗ có nhiéu lựa chọn hơn bao giờ hết Vậy tại sao h ọ lại m ất thời gian vào những thứ phức tạp, khó hiểu, chậm chạp không đ áp ứng nhu cầu của họ?

Nếu người sử dụng Web không tìm ra được cách sử dụng Website trong vòng m ột phút, họ

sẻ cho rằng việc này không đáng đ ể phải m ất thời gian và sẽ từ bỏ ý định

Tính tiện dụng của tra n g W eb đã k h ẳng định tầm quan trọ n g ngày càn g tă n g của W eb trong thời đại In te rn e t Trước đây, khách h àn g k h ô n g biết được tác dụng của sản p h ẩ m cho

đ ế n khi trả tiể n m ua sản p h ẩ m đ ó Ví dụ, chỉ sau khi đã m u a m ộ t đẳu video, bạn mới p h á t hiện

ra rằng rất k h ó đặt khóa c h o n ó ho ặc không biết cách th u vào b ăn g những chương trìn h m ình

ưa thích

C ông nghiệp phần mém đã thúc đẩy việc nâng cao tính tiện dụng của sản phẩm Đối với

p h ản m ểm , người sử dụng có th ể truy c ậ p tới trung tâm h ỗ trợ m à h ọ có th ể gọi mỗi khi g ặp rắc rối Q uản lý những cuộc gọi h ổ trợ này rất đắt tián (ước tính từ 3 0 $ đến 1 0 0 $ cho mỏi cuộc gọi, tùy thuộc vào đ ộ p h ú t tạp của p h ần mểm) H ơn m ộ t nửâ s á cuộc gọi phải th ụ t hiện là d o tính tiện dụng của sàn p h ẩm th ấp Đ áng tiếc là chi phí đ ể vận h àn h trung tâm h ỗ trợ được tính vào

m ộ t tài khoản khác chứ không tính vào chi phí để ph át triển tính tiện dụng của sản phẩm D o đó, các n h à quản trị phát triển sẽ không m uốn đưa ra các giao diện nguời sử dụng lớn W eb đã đảo ngược tình hình này Bây giờ ngitòi sừ dụng biết được tính tiện dụng của W eb trước khi sử dụng và trước khi bỏ tiền mua

Phương trình này rất đơn giản:

• ớ tran g thiết k ế sản phẩm và thiết k ế phần m ểm , khách hàng trả trước rồi mới kiểm nghiệm tính tiện dụng của sản phẩm

• T rên W eb, người sử dụng kiểm nghiệm tính tiện dụng trướe rồi mới trả tiền

Đ ó là lý d o vì sao tính tiện dụng lại quan trọng hơn cả trong việc thiết k ế Web

Nghệ thuột và kỹ thuật

C ó hai phương p h áp c ơ bản để thiết kế, đó là ý til&ng nghệ thuật để p h á t huy tính sáng tạo của b ả n th ân và ý tường kỹ thuật đ ẻ giải quyết rắc rối cho khách hàng C uốn sách này chủ yếu để

CẨM NANG THIẾT KẾ WEBSITE

c ậ p đến phương p h á p kỹ thuật Dù sao mục đích chính của các để á n về W eb cũng là giúp người

sử dụng dễ dàng th ự t hiện các tác vụ

Trong cuốn sách này bạn sẽ tham khảo m ột phương p h áp m ang tính hệ thống để thiết k ế

W eb với m ột loạt các phương thức m à ai cũng có thể dùng đ ể tìm hiểu nhu cầu của người sử dụng

và những khó khăn sẽ g ặ p phải khi sử dụng site H ã y coi để á n vể W eb là để án ph át triển phần

m ềm đ ể dể dàng đ á p ứng các k ế hoạch và đảm bảo ch ất lượng của site Đặc biệt, việc ứhg dụng rộng rã i phương p h á p kỹ thuật cho tính tiện dụng trong to à n bộ đề án về Web sẽ giúp các site

T rên W e b , m ứ c c ạ n h t r a n h c ủ a c ô n g ty b ạ n k h ô n g c h ỉ giới h ạ n với n h ữ n g c ô n g

ty ở c ù n g lĩnh vực c ô n g n g h iệ p Với h à n g triệu s ite k h á c , b ạ n p hải c ạ n h tra n h

v é m ứ c đ ộ q u a n l à m v à thời g ian truy c ậ p W e b s ite c ủ a người s ử d ụ n g Người

s ử d ụ n g hy v ọ n g tìm đ ư ợ c W e b s ite tiện d ụ n g v à h ữ u h iệu n h ấ t tr o n g s ố c á c

W e b s ite n à y Họ th ư ờ n g t ự hỏi "N ếu tôi c ó đ ư ợ c d ịch vụ t u y ệ t vời n à y khi b ỏ 5

đ ô -la m u a m ộ t c u ố n s á c h bìâ m ề m , thì tại s a o lại k h ô n g c ó đ ư ợ c m ộ t d ịch vụ

trực t u y ế n tốt khỉ b ỏ h à n g n g à n đô-la c h o anh".

Phương p h á p kỹ thuật có m ộ t lợi ích chính là: khi b ạ n băn khoăn vể việc n ê n chọn thiết kế

n à o thì hã y đưa ra m ột câu hỏi thực tiễn có th ể giải đ á p n h ờ tậ p hợp các d ữ liệu của khách hàng Người ta sẽ tìm được thông tin n h an h hơn nhờ thiết k ế A hay B? Người sử dụng sẽ đánh giá thiết

k ế A hay B là tốt n h ấ t th eo bảng câu hỏi chuẩn vổ ý kiến khách h àn g ? H ã y chọn thiết k ế có số điểm đánh giá cao n h ất chứ không phải thiết k ế m à chỉ cá n h ân bạn thích

T ất nhiôn phương p h áp khoa học có th ể giúp bạn tiến xa Thiê't k ế luôn đòi hỏi cảm hứng

và sáng tạo Phương p h áp kỹ thuật đơn giản và dề sử dụng sẽ thông báo cho bạn biết rằng người

sử dụng đang g ặ p trục trặc khi tìm kiếm site cùa bạn, ho ặc tất cả mọi người đều bỏ qua nút tim

kiếm (search button) trên trang chủ Đẻ có m ộ t sơ đ ổ định hướng dẻ hiểu hoặc để có vị trí hay

hình thCte dá coi ch o nút tìm kiếm không đơn giản chì là tuân th eo m ột loạt các bưàc đơn giản

Bạn còn cần có cảm hứng thiết kế Tuy nhiỗnt cần lưu ý rẳng sáng tạo bao gồm 10% cảm hứng

và 9 0 % công s ứ t lao động C on đường để có những sáng tạo thiết k ế p h ù hợp là quan sát người

sử dụng, tim hiểu sở thích của h ọ , nhữhg khó khăn và th u ận lợi đối vert họ Đ ể có nhữĩig ý tường thiết k ế hoàn h ả o cần th ụ t hiện th e o phương p h á p kỹ thuật và tìm hiểu các phản ứhg của người

C h ư ơ n g 1: Giới th iệ u : T ẩ m q u a n tr ọ n g c ủ a tín h tiệ n d ụ n g

sử dụng và dữ liệu T ín h tiện dụng của W eb thay đổi chậm hơn công nghệ W eb, do đó, các phương thức và khái niệm được nêu trong cuốn sách này sẽ còn giúp bạn đắc lực trong nhiều n ăm nửa, kể

cả khi quá trình thiết k ế của bạn có nhiều thay đổi Nhiểu nguyên tắc trong cuốn sách này được xây dựng dựa trẽn việc nghiên cứu các siẻu văn bản và các hệ thống biểu diển tương tác khác.Mục đích của cuốn sách này là giúp bạn có k h ả năng cung c ấ p dịch vụ tốt hơn cho người sử

dụng Web B ạn sỗ tìm được ờ đáy những phương p h á p tiện dụng trong mọi giai đoạn của các đé

án vé W eb, nh ằm n ân g cao kinh nghiệm cho người sử dụng Các phương p h á p này c ó chi phí rất thấp và dễ h ọ c

S au khi đọc xong cuốn sách này, bạn có thể bắt tay ngay vào thực h àn h Đề á n thiết k ế tiếp theo của bạn sẽ cần đ ế n các phương thức tạo tính tiện dụng c h o Web- Nôn n h ớ rẳng hầu hết các

nhà thiết k ế W eb đều không để ý đến tính tiện dụng của W eb, h ọ chỉ thiết k ế th e o cảm hứng và sờ

thích của m ình chứ không chú trọng đến nhu cẳư của người sử dụng Cuốn sách này thật sự là m ột

vũ khí bí m ật giúp bạn tạ o trang Web hoàn hảo hơn các tran g W eb của In tern et - vì 90% các nhà

thiết k ế đểu không biết (hoặc không quan tâm) đến những kỹ thuật m à bạn sẽ học được ờ đây.

C uốn sách này tậ p trung đăt vấn đề nhu cầu của khách hàng làm trọng tâm của chiến lược tạo Web site Những yếu tố khác thay đổi theo k ế hoạch của từng công ty Tuy nhiên, có th ể khẳng định rằng cồng ty nào tạ o được những site d ễ sử dụng sỗ chiếm ưu th ế hơn so với các công

ty khác cùng cạn h tra n h , cho dù đó là ngành công nghiệp gì

T hiếu tiệ n dụng cũ n g đống ng h ĩả v ờ m ấ t khách

T r o n g thời đ ạ ỉ c ủ a m ạ n g , W e b s ite trở t h à n h nơi g i a o d ịch c h ín h c ủ a c ô n g ly

với k h á c h h à n g T h ự c vậy, đ ố i với c á c c ô n g ty th ư ơ n g m ại đ iộn tử, s i t e c h ín h là

m ộ ỉ c ô n g ty ố i a o d iệ n người s ử d ụ n g trỏ t h à n h r tg u y ô n liệu tiế p thị, đ ộ i ng ũ

b á n h à n g , d ị c h vụ h ậ u mại vụ T ro n g n h ié u trư ờ n g h ợ p , s ite c ò n là s ả n p h ẩ m

Do v ậy s ite thiốu tính tỉện d ụ n g c ũ n g g iố n g n h ư m ộ t c ù a h à n g ở t ậ n t ầ n g 17

c ủ a t ò a c a o ố c c h ỉ m ở c ử a v à o lúc 3 giờ c á c n g à y t h ứ tư Do đ ó , k h ô n g a i có

t h ể tìm t h á y c ử a h à n g n à y , v à k h ô n g ai đ ố n đ ư ợ c , c ò n n h à n viốn b á n h à n g thì

Tạo sao mọi ngưòỉ lại thiết kể không chuổn c â c

Website

C uốn sách này dựò trên các thử nghiệm vể tính tiện dụng của W eb với sự tham gia của khoảng 4 0 0 người sử dụng ờ các trình đ ộ khác nhau và sử dụng m ộ t số Ìxỉợrìq lớn các W ebsite

trong 6 n ăm qua

Khi thiết k ế W eb lẳn đầu, nhà thiết k ế nào cũng m ắc sai sót Một tro n g rìhữtig mục đích chính của cuốn sách này là giúp các nhà thiết k ế trán h lặp lại các lỗi đ ã mắc

C ác lổi c ơ bản đểu có th ể g ặ p phải khi thiết k ế W eb à bất c ứ mífc đ ộ nào:

• Mô hình thương mại: Coi W eb là m ột tài liệu tiế p thị chứ không ph ải là m ột sự chuyển đổi căn bản làm thay đổi cách thức đíéu hành kinh do anh trong n á n kinh tế mạng

CẨM NANG THIẾT KẾ WEBSITE

• Q uản lý để á n : Q uản lý đổ án W eb tựa n h ư đ ó là m ộ t đổ á n h ợ p tác truyển thống Điểu này d ẫn đến m ột đé á n thiết k ế hướng nội với giao diện người sử dụng không nhất

quán Thay vào đó, W ebsite có thể được quản lý n h ư m ột để á n giao diện khách hàng

độc lập

• Kiến trúc thông tin: tạ o cấu trúc cho site để p h ả n á n h cơ cấu của công ty Thay vì thế, site có th ể được cấu trúc để phản á n h các tác vụ của ngiiởi sử dụng và quan điểm của

h ọ về không gian thông tin

• T hiết k ế trang: T ạo tra n g có hình thức h ấ p d ẳ n , gợi lên những tìn h cảm tích cực ở các tran g chạy thử, không có h iện tượng chậm trễ về thời gian đ á p ứng (response-

time) Tuy n h iên , đây lại là vắn để vể tính tiện dụng thường xảy ra ở đa số các website

Tương tự n h ư vậy, tra n g chạy th ử không bộc lộ những khó khăn m à người sử dụng ít kinh nghiệm sẽ g ặp khi tìm hiểu các yếu tố khác nhau của tran g Vì thồ', thiết k ế phải

đ ể người sử dụng trắc nghiệm được những tình h u ố n g thực, c h o dù các trang chạy thử

có kém h ấ p dản

• Sáng tác nội dung: Viết th eo phong cách thông thường, thay vì viết th e o kiểu mới được tối ưư h ó a c h o những người đọc trự t tuyến Những người này thường đọc lướt qua nội dung nôn cần thiết k ế những trang c ụ t ngắn rói liồn kết với các tran g th ứ c ắ p chứa thông tin h ỗ trợ

• Chiến lược liên kết: Coi site của m inh là quan trọng nh ất, không Bôn kết tới các site khác và không có đường dẫn (đầu vào) được thiết k ế tốt đ ể các site khác liồn kết Nhiổu công ty không sử dụng các liốn kết phù h ợ p khi đưa site của h ọ vào quảng cáo Thay VI

th ế, cần n h ớ rằng siẻu văn bản lầ nển tảng của Web

T rong mỗi trường hợp này, cách thíte thông thưởng m ọi người ch u ẩn bị đổ á n W eb khi không c ó kinh nghiệm vổ W eb thưởng sẽ sai lầm: W eb là m ột phương tiện mới đòi hỏi phương

p h á p mới

Chương 2

THIẾT KỂ TRANG

Thiết k ế tra n g là phần tiêu biểu nhất của việc thiết k ế Web Với công nghệ duyệt hiện nay, người sử dụng c ó th ể xem mỗi lần một trang (hoặc cùng lắm là 2, 3 trang hay hầu hết các trang nếu có m àn hình lớn với nhiều cửa sổ đểu mờ) Chương này đề cập đến tính tiện dụng vể m ặt hình thức của W ebsite: Trên các trang cò nhửng gì?

Tính tiện dụng rất quan trọng trong thiết k ế site, vì người sử dụng sẽ chỉ truy cập những site được cấu trúc th e o n h u cầu của h ọ và có sơ đổ định hướng cho phép họ tìm những gì họ muốn

Bố cục màn hình

T ro n g W eb cần chứa đựng những nội dung cuốn hút người sử dụng Tuy vậy, c ó rất

nh iều W ebsite lại d à n h p h ẳn lớn m àn hình đế định hướng, th ay vì cung c ấ p th ô n g tin m à người

sử dụng q u an tâm Đ ịnh hướng cũng cẩn thiết song không ph ải là m ục đích c h ín h , d o đ ó , n ê n được giảm thiểu

Một bài luyện tậ p thú vị là m ở các vùng chính của m ột trang Web, đếm tỷ lệ các pixel được dùng c h o các m ục đích khác nhau cho dù các nhà thiết k ế W eb không th ể gây ảnh hường đến các

p h ạm vi d o trình duyệt hay hệ điều hành sử dụng, thì người sử dụng cùng hể quan tâm T ất cả nhừng gì người sử dụng biết là h ọ đã trả tién cho một số lượng pixel trên m àn hình của h ọ và chỉ

có 2 0 và 14% các pixel này được sử dụng để hiển thị những thông tin h ọ cắn

Xét vé to à n bộ b ố cục, phần trống trắng không hoàn to àn vô dụng và sẽ là sự lầm lẳn nếu thiết k ế các trang quá dày đặc Khoảng trống trắng có th ể giúp người sử dụng hiểu cách nhóm các thông tin Nếu phải lựố chọn để tách hai đoạn nội dung bằng một đường đậm hoặc bằng một khoảng trống trắn g , bạn nên chọn giải pháp dùng khoảng trống trắng vì nó củng giúp tải xuống

n h an h hơn

K hoảng trống trắn g rất c ó ý nghĩa khi nó là m ột phần của thiết k ế nội dung ho ặc th iế t k ế

định hướng Tuy n h iên các ví dụ à đây chỉ ra rằng còn m ột p h ần khoản g trống trắn g không hiện

diện d o các cân nh ắc trong thiết kế, n ó chí hiển thị vì tran g này không tự điểu ch ỉn h đ ể vừa với cùa số M ột tỷ lệ khoảng trống có trong m ọi thiết kế, vì không th ể làm cho tran g hình chữ n h ật tro n g trìn h duyệt của người sử dụng hiển thị hoàn h ả o trong mọi h o àn cản h V ẫn c ó m ột số vết

lỏ ch ỗ

T h eo kinh nghiệm , phan nội dung cần chiếm nửa trang thiết k ế và có th ể chiếm tới 80%

P h ầ n định hướng nên đế dưới 20% phạm vi các trang đích, m ặc dù các tùy chọn định hướng có

th ẻ chiếm tỷ lệ cao hơn trên các trang chù và các trang định hướng trung gian Tốt hơn cả nên loại b ỏ p h ẩn quảng cáo Nếu cần đưa ra q u ả n g cáo bạn nên đ ể phần này ờ phía trên, cùng với

các tùy ch ọ n định hướng, nghĩa là cần giảm phẩn thiết kế mục định hướng

C h ư ơ n g 2: T h iế t k ế tra n g

h ttp ://w w w o ttip q u e st.co a /cg i làn /ia find?*cicenM«i-»<tíMcsuktónfc<»i<»map ies<jHluK**ueu303g P I S Q

&

£dỡ £dẩ View Fflvo<ắeí Xodt tíHp

Bỏck S l o p J R e » íC ỉh J3 H o m e 4 S e a t c h a F a v o f i e * J j H irto íyJ ủ : M a ề t : S a e Piri

A í J d r e : i ị«Ề3 ^ ' p ^ ro ồ D q u c:» r o m / c g h b ti/ia _ ^ o đ ? ^ ie e p « ia - m à p 'ie :u ltĩl* n * ;- '« - r n ô o - ỉB 5 íif iu » d " |j» j3 0 S » g e a b q e v 5 i- ,?í2A 2tl_^J

Thiết k ế mới n à y c h o th á y m ột d ạ n g ô nhiễm q u ả n g c á o mới dưới d ạ n g c ậ c n ú t t h ê m v à o d a n h

s á c h b ả n đ ồ c á c c ô n g ty đ ư ợ c ch ọ n Một s ổ tính n ă n g mới rấ t h ữ u ích, c h ẳ n g h ạ n n h ư k h ả n ă n g

c ủ a Q u ic k M a p s đ ể tìm đ ế n m ột s â n b a y (m ă c dù, tốt h ơ n c ả là đ ể s â n b a y H a a th r o w ià-xnặc định khi h iển thị b ả n đ ồ m ột đ ịa c h ỉ ở L uân Đ ôn).

CẨM NANG THIẾT KẾ WEBSITE

Nguyên tắc chung để thiết k ế giao diện người sử dụng là xem xét các yếu tố thiết k ế và xóa chúng cùng lúc Nếu quá trình thiết kế được tiến hành m à không cần đến m ột yếu tố nh ất định nào, thì hã y hủy bồ yêu tố đó- Đơn giản luôn chiếm ưu th ế so với phức tạp , đặc biệt là trên Web,

vì nếu bớt đĩ 3 byte thì thời gian tải xuống lại ít đi m ột phần triệu giây

T rên Web, không th ể đoán được kích thước của m àn hình m à người sử dụng có và kích thước của cửa sổ được dùng để hiển thị trang Trong tương lai, p h ần định hướng nội dung chi tiết giữa các-trình duyệt và m áy chủ sẽ giúp ph át triển trang được tối ưu h ó a cho các đặc điểm của

m àn hình sẽ hiển thị trang đó Ví dụ h ìn h ,ản h sỗ bị thu n h ỏ nếu xuất hiện trên m àn hình nhỏ

Đ ồng thời, trang m ẳu với b ố cục chặt chẽ hơn sẽ được gửi đi khi m àn hình n h ỏ được sử dụng, và tran g m ẫu rộng có th ể được gửi khi có vùng hiển thị lớn

L úc n à y c ầ n sử d ụ n g th iế t k ế tra n g đ ơ n đ ể làm v iệc với tấ t c ả c á c th iế t bị h iể n thị

MKADLIMCS ANALYSIS **OTOi iSl'JtS

V iệ c t r á n h n h ữ n g k h o ả n g trố n g trá n g lã ng p h í k h ô n g c ó n g h ĩa là t ạ o b ố c ụ c d à y đ ậ c n h ư p h iê n b ản

t h á n g 2, 1994 c ủ a t r a n g c h ủ cùa P a ith F in d e r n à y Thiốt kố đ á n g s ợ n à y g iố n g n h ư m à n h ình c h à o

đ ó n c ủ a A m ỡ rícan Online.

Thiết kế xuyên nển (Cross - platform)

T rong thiết k ế GUI truyền thống, bạn điểu khiển tùhg pixel trẻn m àn hình: Khi tạ o b ố cục

c h o h ộ p thoại, bạn có th ể tin chắc rằng nó giống hệt n h ư khi hiển thị trồn m àn hình của người sử dụng B ạn biết bạn đang thiết k ế cho hệ thống nào, biết phông được cài đặt, biết kích thước của

m àn hình, đồng thời bạn có chỉ dẫn của nhà cung c ấ p hệ thống vổ qui tắc kết h ợ p các widget tương tác B ạn có th ể vô hiệu hóa các tùy chọn không th ể á p dụng trong trạng thái hiện thời và

c ó th ể hiển thị m ột h ộ p thoại m ầu đảm nhiệm chức năng của m áy tính cho đ ế n khi người sử dụng

đã trả lời được câu hỏi

irfMjt'Uil ZAGAT thrive

- C C D V irt'i& lO il dcil 1 i

íran g chủ của site Người sử dụng cũng có th ể điéu khiển m enu bookm ark và dùng n ó để tạ o một

giao diện tùy biến cho file

Các nhà thĩết k ế W eb cần điều chỉnh và h ồ trợ cho định hướng d o người sử dụng điều khiển Đôi khi bạn có thể buộc người sử dụng phải qua m ột tậ p h ợ p các đường dẫn và không cho

họ liên kết tới m ột số trang nhất định Tốt nhất n én thiết k ế đ ể người sử dụng có th ể di chuyển tự

CẨM NANG THIẾT KẾ WEBSITE

HHHI a JBIMBBWaaBin i» mitTM

? ! M L ü tfâ tô & fe M & é ttO iîa I I I I O M I

jijUJjlAM -'.» W ;*dB 6ffi3i42 l i d m i

I H H Ü É H I l î C ï î t - 8 ỉ ẳ U m i L M Ị U ; W á M ' Ắ » * 4 2 H O I m i

Morkel Cominenloíy NIW

w h a t a to cki * f hot> Chack out th# U U lt f r o m ; .'sj

o u tp « rfo rm « d t h * SftP 300 fo r th« p » it «IX y « « rf O nly

s ử d ụ n g c ả c p h ô n g q u á đ ặ c b iê t tr ê n W e b s ẽ rấ t n g u y h iể m T r a n g n à y đ ả s ử d ụ n g k iểu c h ữ

k h ô n g c ó tr ê n m ả y tín h d ù n g đ ể tru y c ậ p site, d o đ ó n h iề u p h ầ n v ầ n b ả n đ ư ợ c h i ể n thị không

c h u ẩ n " x á c T h ô n g t h ư ờ n g , k h ô n g n ê n c h ỉ định p h ô n g m à n ê n c h ấ p n h ậ n p h ô n g m ặ c định vi

p h ỏ n g đ ó s ẽ lu ồ n p h ù h ợ p C á c h k h á c , khi m u ố n c h ỉ đ ịn h m ộ t p h ô n g n à o đ ó , c ầ n liệt k ê một

s ố p h ô n g k h á c đ ể t ă n g tối đ a k h ả n ă n g m ộ t tro n g s ố c á c p h ô n g đ ó s ẽ s ử d ụ n g đ ư ợ c tr ê n m áy

c ù a người s ử d ụ n g

C h ư ơ n g 2: T h iè ì k ế tra n g

Ngưòỉ sử dụng từ dãu đến?

T rên W eb nhiều giả định đúng với thiết kẽ GUI đều bị loại bỏ Người sử dụng có thể truy cập Web thông qua m áy tính truyền thống nhưng h ọ có thể chỉ cắn sử dụng thiết bị cẩm tay n h ư điện thoại cầm tay Nokia, hoặc thậm chí xe ô tô làm thiết bị nối Internet T rong thiết k ế truyền thống,

sự khác biệt tro n g vùng m àn hình giữa máy tính xách tay và trạm làm việc cấp cao là thừa số 6 Trên W eb, bạn cần điều chính thừa số 1 0 0 vé diện tích m àn hình giữa các thiết bị cầm tay và trạm làm việc, thừa số của 1 0 0 0 ve dải thông giữa các modem và các kết nối T 3

H ầu hết các trang Web chỉ hoạt động tốt trẽn m àn hình 17inch, vặn hành à độ p h àn giải

tối thiểu là 1 0 2 4 x 7 6 8 pixel Các m àn hình n h ỏ hơn sẽ có b ố cục n h ỏ h ẹ p và người sử dụng phải

cuộn đ ề xem tấ t cả các phần của trang họ cần Bạn thường m uốn người sử dụng có những màn

hình p h ù hợp, nhưng trong vài nàm tới bạn sẽ phải thiết k ế tran g làm việc trẽn các m àn hình hiển thị nhỏ

Bảng sau đây chỉ ra cách phân bố kích thước m àn hình đứợc dùng đ ể truy cập Internet vào các năm 1 9 9 7 và 1999 Kết quả là trong hai năm này, không có sự khác biệt nào đối với việc quản lý m àn hình hiển thị nhỏ Mặc dù không có nhiéu m àn hình hiển thị n h ỏ vào năm 1999 nhưng số lượng của chúng có th ể tầng thêm trong năm 2 0 0 0 vì các thiết bị thòng tin ngày càng trờ nên p h ổ biến

• Dữ liệu năm 1997 được tính trung binh qua két quả 5000 người sử dụng truy cập vào www.horus.com vá hơn 11000

người viẽt thư tới cuộc khảo sát của GVU Dữ liệu năm 1999 từ www.startmarket com.

Mọi thiết k ế W eb đã cung cấp sẽ có hình thức khác n h au trê n các thiết bị khác nhau Thay

vì c ố gắng tái tạo chính xác hình thức hiển thị của Website cho tấ t cả người sử d ụ n g , nhà thiết kế

p h ải chỉ định các trang giúp trình duyệt có khả năng tối ưu h ó a m àn hiển thị cho từng h o àn cảnh của người sử dụng Rất khó thiết kế giao diện người sử dụng trừu tượng cho các nển (platform) khác nhau Nên tách ý nghĩa và phần trinh bày, đồng thời, nên sử dụng các trang m ẫu đ ể xác định cách trình bày Tuy nhiẽn, việc này chỉ hữu ích đối với nội dung th ô n g tin chứ không hữu ích với việc tương tác

CẨM NANG THIẾT KẾ WEBSITE

S ử d ụ ng ô tô d ể xem Web

H ả n g M e r c e d e s - B e n z đ ã thiét k ê m ột ô tô đ ư ợ c k ế t n ố i d ấ y đ ủ tới Internet

M au ỏ tó M e r c e d e s b a n đ ầ u E420 c ó 3 m à n hình h iể n thị p h ả n g : m ột d à n h ch o lái x e , hai d à n h c h o h à n h k hách Két nối In tern et tro n g ô tò n h ấ t thiết không

d ù n g đ ế n d â y , d o đ ó giải th ô n g s ẽ rấ t giới h ạ n , đ ặ c biệt khi b a người c ù n g s ử

d ụ n g C á c h à n h k h á c h c ó t h ể x e m lướt W e b g iố n g n h ư người s ử d ụ n g m á y tính

v ẵ n thư ờ ng làm , c h ỉ k h á c là họ c h ạ m v à o m à n h inh t h a y vì s ử d ụ n g b à n phím

v à c h u ộ t Vì lái x e c ầ n p h ả i nhìn đ ư ờ n g , n ê n c ó t h ể x e m W e b th ô n g q u a lời nói

Đ ồ n g thời, chính ô tô c ũ n g là một thiết bị đ ấ u v à o n h ờ tru y é n vị tri c ủ a n ó tới

m á y c h ủ v à m ộ l s ố d ữ liệu đ ầ u ra đ ơ n g iả n đ ư ợ c c h i ế u tr ê n m à n h ình c h ắ n gió,

b iến n ó t h à n h m à n hình h iể n thị,

Thiết kế không phụ thuộc và o độ phân giài

Vì không có cách nào để biết được kích thước m àn hình của người sử dụng nên bạn cản thiết k ế sao cho phù h ợ p với tất cả các độ phân giải m àn hình Nói cách khác, các trang không phụ thuộc vào độ p h ân giải sẻ phù hợp với mọi kích thước của m àn hình hiển thị chúng Nguyên

tắc chính đ ể có thiết k ế không phụ thuộc vào đ ộ phân giải là không bao giờ sử dụng một đ ộ rộng

pixel c ố định cho b ả n g , khung hay các yếu tố thiết k ế khác {ngoại trừ các vạch m ảnh dọc theo trang) T hay vi sử dụng kích thước c ố đính, bạn nên chỉ định b ố cục th eo tỉ lệ phạm vi đã có Nẽn

n h ớ rằng, người sử dụng có các tùy chọn khác nhau vể cỡ phông, do đó cần đảm bảo thiết k ế của

b ạn h o ạ t động tốt với mọi cỡ phông to, nhỏ Mọi người có thể sử dụng các phông khác nhau vì khu năng hiển thị khác nhau hoặc m àn hình của h ọ có đ ộ phân g i ả i c a o khiến cho các phông nhỏ trở nên khó đọc

C ác yếu tố đồ h ọ a cũng có th ể được thiết k ế d ự kiến với các độ phán giải khác nhau Đặc

biệt, các biểu tượng phải tiếp tục ho ạt động khi chúng được hiển thị ở đ ộ phân giải 100dpi hoặc

lớn hơn Độ phản giải càng cao, các đồ họa được h i ế n thị càng nhỏ, d o đó, để tiếp tục đọc được,

m ọi văn bản được nhúng trong đồ họa cần sử dụng c ở phông tương đối lớn Nói chung, không

n é n đưa văn bản vào đồ họa vì sẻ làm chậm quá trình truyền và phải biên dịch giao diện người sử dụng ra tiếng nước ngoài

Vài vấn d ể v é m àu sác

Trong n ă m 19 9 7 , g ầ n m ột n ử a s ố người s ử d ụ n g bị giới h ạ n ở 2 5 6 m à u v à hơn

m ột n ử a c ó t h ể h iển thị h à n g n g à n h o ặ c h à n g triệu m à u Hai n ă m s a u , v ào

n ă m 19 9 9 c h ỉ c ó 11% người s ử d ụ n g bị giới h ạ n ở b ả n g 2 5 6 m à u , c ò n 8 9 % có

t h ể h iển thị h à n g n g à n m à u h o ặ c hơn Do đ ó , b ạ n k h ô n g c ấ n thiết k ế đ ể phù

h ợ p với s ố lượng m à u h ạ n c h ể Đ ổng thời, s ự p h á t triển c ủ a c á c thiét bị tiêu

d ù n g c ẩ m ta y với k h ả n ă n g truy c ặ p W e b s ẽ d ẫ n đ ế n c ả c nh u c ẩ u n g à y một

tă n g đói với c á c đ ỗ h ọ a W e b đ ể h o ạ t đ ộ n g trên c ả c m à n hinh t h a n g đ ộ x ám

C h ư ơ n g 2: T h iế t k ế tra n g

T rong nhiều trường hợp, có thế coi máy in là m ột m àn hiến thị đặc biệt Máy in có đ ộ phân giải cao nhưng không lớn như m àn hình Vi những khác biệt này nên các trang W eb không phụ thuộc vào độ phân giải thường không hoạt động tót như khi in ra Các trang W eb chủ yếu dùng

để đọc trực tuyến Tốt nhất là nén cung cấp các phiên bản in riêng rẽ cho các tài liệu dài, m ặc dù bạn biết rằng người sử dụng thường in trực tiếp trang W eb từ trình duyệt Các trang W eb được thiết kế để hiển thị trong đ ộ rộng cố định trông sẽ rất xấu khi in ra Một b ố cục rộng 6 0 0 pixel hoạt động trên hầu hết các m àn hình máy tính thông thường (mặc dù không ho ạt động trẽn

TVWeb và các thiết bị có m àn hình nhỏ) Bố cục này sẽ có độ rộng là 8 ,3 in ch khi được in ờ độ

phân giải chuẩn 7 2 pixel trên lin ch vì máy in cần lể từ 1 /4 - 1 /2 inch, nên vùng có th ể in trên trang 8 ,5 x 1 1 sẻ có độ rộng 7 ,5 và 8 ,0 inch, nghĩa là ít nhất có 0 ,3 inch của trang bị cắt bỏ Khi

in trên giấy khổ A 4, phần lớn trang sẻ bị mất

CẨM NANG THIẾT KẾ WEBSITE

Sử dụng nội dung không chuđn

W eb phát triển lién tục, tuy nhién, không nên lạm dụng các công nghệ W eb mới để làm sinh động site của mình

Mã của HTML đ ể liên kết tới N etscape có m ột phương p h áp không chuẩn đ ể xác định một

m àu phông khác, đó là:

<A HREF=http://www.netscape.com/comprod/mirfor/index.html

</F0N T C 0 L 0 R x / A >

Mã này có th ể được biên dịch th eo hai cách:

• Thẻ <FONT> có nhiệm vụ đổi m àu thân văn bản, do đ ó n h ặn văn tò n chuyển từ tràng thành đen (nhưng tất nhiên vần bản liên kết có th ể được th ể hiện trong màu liên kết đã chỉ định

• Thẻ <FONT> trong thẻ <A > hơi khác khi ờ các vị trí khác, do đó không n ê n dùng nó

để đổi m àu th ân văn bản (van duy trì màu cũ), mà để thay đổi m àu của văn bản liên kết Hai bài học rút ra từ đây là trán h các mã không chuẩn nếu có th ể, nếu không th ể ít ra

hã y sử dụng m ặc định phù hợp

„ Màn h ìn h lớn

Khi thiết k ế t r a n g W e b b ạ n c ẩ n đ ể ý đ ế n m à n hình n h ỏ c ủ a người s ử d ụ n g ,

n h ư n g k h ô n g c á n q u a n tâm đ ế n việc s ử d ụ n g W e b T u y n h iê n n ê n c ó m ột m àn

hình lớn.

M àn hình tối ưu c ầ n h iển thị ít n h ẫ t ở đ ộ p h â n giải 1 6 0 0 x 1 2 0 0 pixel, với m à u

16 bit, v à với tỷ lệ làm mới ít n h ấ t là 100Hz B át c ứ ai c ó n h u c ẩ u s ử d ụ n g c a o

trong v iệ c truy c ậ p W e b , tr a o đổi t h ư đ iệ n tử đ ề u c ầ n đ ế n m à n h ình n h ò hơn

17 inch.

Cãn nhốc việ c c à i đ ộ t phiên bàn mói

Trong những năm đấu ph át triển Web, người sử dụng đã nâng cấp tới các phiẻn bản trình duyệt mới với tốc độ khoảng 2% một tuần Nói cách khác, mỗi tuần có 2% người sử dụng truy cập vào site của nhà phân phối trình duyệt hàng đầu và tải xuống phiồn bản mới nhất Với mức nâng cắp 2% mỗi tuần, sẽ cần 5 0 tuản (gần 1 năm) đ ể chuyển tất cả người sử dụng tới phiên bản mới, nhưng vì các phiẽn bản mới thường được tung ra mỗi năm m ột lần n ê n người sử dụng luôn

không được cập nhật ờ mức cao nhất.

T rong tương lai, sự biến đổi cùa p hiên bản có th ể sỗ diễn ra chậm hơn Trước h ế t, á p lực đối với việc nâng c ấ p sẽ ngày m ộ t giảm , nhiều n h à th iế t k ế site hiện nay đã hiểu nhu cầu tương th ích ngược và không đòi hỏi các n h à cung c ấ p sử dụng các p h iên bản b eta mới nhất

T hứ hai, n h u cầu n ân g c ấ p ngày m ột giảm vì các trìn h duyệt cũ vẫn còn khá tố t và sự ch ên h lệch vể tín h tiện dụng g iữ a các p h i ồ n bản cũng ít hơn T rong những nảm đầu p h á t triển Web, việc n ân g c ấ p lẻn trin h duyệt m ới m ang lại rất nhiổu ích lợi, nhưng các n ân g c ấ p trìn h duyệt

C h ư ơ n g 2: T h iết k ế tra n g

gẳn đây có vẻ n h ư k h ô n g m ang lại thêm nhiều lợi ích T hứ ba số người sử dụng đã thay đổi từ

m ột n hóm n h ỏ đi tiên p h o n g th àn h m ột đội ngủ đỏng đ ảo H iện nay mọi người sứ dụng trực tuyến đ ể lấy n ộ i dung th ô n g tin và thực hiện các công việc của họ H ọ sỗ không g ặ p trục trặc

gì trong việc tìm kiếm m ộ t phiẽn bản mới n h ờ tải nó xuống ho ặc cài đặt n ó rr.iẻn là trình duyệt

củ của h ọ h o ạ t đ ộ n g tố t N hư trong hình minh h ọ a tốc độ nâng c ấ p có th ể là 1% mỗi tuẳn tro n g n ă m 1 9 9 8 và 1 9 9 9

CẨM NANG THIẾT KẾ WEBSITE

Khi nào nãng c ấ p thì an toàn?

Định dạng duy n h ất bạn có thể tự tin dùng là đặc điểm của HTML 1.0 Mọi định dạng khác đểu nằm ngoài khả năng của người truy cập

Không nên sử dụng công nghệ W eb còn ờ giai đoạn beta trong site của bạn trừ phi bạn là nhà đầu tư hoặc có các lý do khác để xúc tiến công nghệ đó Phần m ểm beta có th ể bị hỏng, do

đó, người sử dụng có th ể sao n h ã ng mục đích làm việc với site của bạn Không nên sử dụng ngay công nghệ Web mới trên site của bạn Nên sử dụng nó một hoặc hai nảm sau khi n ó được giới thiệu chính thức trong phiên bản non-beta Những yếu tố cản tránh trong năm đầu tiên bao gổm

CÁC phiên bản mới của HTML, các trình plug-in ho ặc các th àn h phần phần mễm khác, các định dạng dữ liệu mới và các tính năng xác định trình duyệt C ó ba lý do đ ề đổi mới Web:

• Với tốc độ nâng cấp khoảng 1% mỗi tuần, sẽ phải m ất m ột năm đ ể đa số n g ư ờ i sử dụng có thể truy cập sử dụng công nghệ mới và phải m ất hai năm đ ể tất cả mọi người

có công nghệ mới này

• Thậm chí sau khi công nghệ mới được chính thức đưa vào sử dụng, nó vằn c ò n m ột vài lỗi phải loại bỏ trong các phiồn bần chấm k ế tiếp

• Nhiều phiên bản thử, có lối được đ ư a vào đế xem xét và quyết định cách s ử dụng công nghệ Web mới hữu hiệu nhắt để liên lạc với người sử dụng Các site đầu tiên sử dụng tính năng mới thường thực hiện việc này th eo các phương p h áp gáy hại cho người sứ dụng hơn lả h ỗ trợ h ọ Chi sau khi thu th ậ p kết quả kiểm nghiệm về tính tiện dụng và kinh nghiệm từ nhiểu thiết k ế khác nhau có đòi hỏi công nghệ mới, bạn mới có th ể hy vọng á p dụng nó theo kiểu thêm giá trị vào site

t ừ p h iê n b ả n 2 tới p h iê n b ả n 3 c ả hai đ ư ờ n g c o n g c ó đ ộ d ố c 2 % mỏi tu ầ n C h u y ể n đ ổ i p h iê n b ản mới h ơ n , t ừ 3 s a n g 4 d iẻ n ra ở t ố c đ ộ b ằ n g một n ử a tố c đ ộ trê n , c h ỉ 1% 1 tu ầ n C h u y ể n đổi từ phiên b ả n 4 tới p h iê n b ả n 5 c ò n c h ậ m hơn.

N gười s ử d ụ n g cao cấp hữu ích

N h iể u n g ư ờ i cài đ ặ t trình d u y ệ t W e b thông q u a b ạ n b è , h o ặ c đ ổ n g n g h iệ p -

n h ữ n g n g ư ờ i s ử d ụ n g c a o c ấ p H ầ u h ế t c á c c ô n g ty v à n h iề u g ia đ ìn h đ ề u c ó

m ột s ổ c ả n h â n thích công n g h ệ mới vi lợi ích c ủ a nó, d ù r ằ n g c ô n g v iệ c c ủ a

h ọ c h ẳ n g c ó gi liên q u a n đ ế n m áy tính N hững người n ày thư ờ ng trỏ th à n h

n h ữ n g n g ư ờ i s ử d ụ n g c a o c ấ p , luôn biết đ ư ợ c s ự x u ấ t h iệ n c ủ a c á c ứng dụng

mới, v à n h a n h c h ó n g lấy đ ư ợ c p h iê n b ả n mới n h ấ t Khi người s ử d ụ n g c a o c ấ p

c à i đ ặ t trinh d u y ệ t W e b ch o một người s ử d ụ n g binh th ư ờ n g , người s ử d ụ n g

b inh t h ư ờ n g n ày không c ó kiến th ứ c v ề p h ư ơ n g c á c h trinh d u y ệ t W e b d ư ợ c tải

x u ố n g , h o ặ c c á c h n â n g c á p nó Do vậy, người s ử d ụ n g n ày s ẽ tiếp t ụ c d ù n g

trình d u y ẽ t đ ó rấ t lâu s a u khi p h iê n b ả n mới x u ấ t h iện T h ậ m c h í người s ử d ụ n g

c à i đ ặ t trinh d u y ệ t c ủ a chính m ình s ẻ th a o t á c t h e o n g u y ê n t ắ c " n ế u không

h ỏ n g thì k h ô n g sử a" Kết q u ả c ủ a h iện tượng n à y là c à i đ ặ t c h ậ m , n g h ĩa là

người s ử d u n g s ẽ tiếp tụ c d ù n g phiên b ả n trình d u y ệ t h ọ đ ă c à i đ ậ t C á c

VVebsite lớn v ã n n h ậ n c á c kết nói từ p h iê n b ả n 1 và 2 c ủ a N e t s c a p e

Sau m ột năm b ạ n không cần tạo phiồn bản kép của trang (có hoặc không có tính năng mới), vì c ó th ể k h ẳng định rằng hầu hết mọi người sẽ nâng cấp Nhưng có m ột nguyôn tắc hai nàm cần phải tuân th eo : Trong hai năm đầu, sau khi chính thức công b ố công nghệ Web mới,

b ạ n cần kiểm tra xem việc sử dụng tính năng mới này có làm ảnh hưởng xấu đến những người

b ộ ích lợi từ việc bạn sử dụng các tính năng mới, nhưng không th ể c h ấp nhận được nếu sitc của

b ạ n hỏng hoặc trông lộn xộn trong trình duyệt Web cũ

t iế p t ụ c k iể m tra trang trong trinh d u y ệ t c ũ trong k h o ả n g 2 n ă m đ ể đ ả m b ả o

r ằ n g n ó h o ạ t đ ộ n g h ợ p lý T h ứ hai b ạ n s ẽ n h ậ n c á c th ô n g b á o lỗi từ người s ử

d ụ n g c ó p h à n n à n rằ n g s ite c ủ a b ạ n g ảy ra m ột s ố v ấ n đ é n h á t định c h o trình

d u y ệ t c ủ a h ọ , và b ạ n c ầ n c ó m ột t ậ p hợp lớn c á c trình d u y ệ t đ ể s a o c h é p lại

v ấ n đ ề đ ó C á c lỗi n ày c ầ n đ ư ợ c s ừ a đổi ò m ứ c đ ộ tối đ a c ó t h ể đ ư ợ c vì s ẽ có

n h iề u n g ư ờ i s ử d ụ n g n ữ a g ặ p p hải v ấn đ ể tương tự n h ư n g k h ô n g t h ô n g b á o ch o

b ạ n b iế t ( h ọ c h ỉ từ b ỏ s ite c ù a b ạ n , v à n h ư vậy, b ạ n s ẽ m á t k h á c h h à n g )

CẨM NANG THIẾT KỂ WEBSITE

Tách biệt ý nghĩa và trình bày thông tin

Thiết k ế gốc của Web và đính dạng dữ liệu có gạch ch ân , HTML, được dựa trên việc mã hóa ý nghĩa của thòng tin chứ không phải phần trình bày

Ví dụ, phần tiéu để cần được m ã hóa ở dạng tiêu đề bậc 2 (<H>), nghĩa là bậc cao nhất của

tiêu để phụ bên dưới tiêu để bậc 1 - tiêu để cho toàn bộ trang Kiểu mã hóa này do Tim B erners - Lee ch ọ n vì ông muốn W eb trở th àn h hệ thống thông tin to àn cầu Do vậy, ông đâ không biết thiết bị m áy tính m à người sứ dụng có (một số người có m àn hình m àu có độ phân giải cao, số khác thì bị mù và chỉ dùng giao diện âm thanh thuần túy) Đ ồng thời, cẳn phải duy trì các chi tiết

th ể hiện thông tin bên ngoài file Cách các trang được hiến thị cho người sử dụng do chính thiết bị của người sử dụng đó quyết định

Khái niệm vể m ã hóa ý nghĩa của tài liệu được gọi là m ã hóa ngữ nghĩa Khái niệm này sẽ tạm thời m ất đi khi một số nhà cung cấp trình duyệt giới thiệu các thẻ độc quyển đ ể m ã hóa phần

th ể hiện thông tin Nhiều nhà thiết k ế Web học cách sử dụng các m ã hóa văn bản dựa trên việc trình bày, chẳng hạn như "phông G aram ond cao, đậm , 18 pixel ’, thay vì dùng m ã hóa ngữ nghĩa của tiêu để bậc hai Lợi ích của việc mã hóa dựa trên trình bày là trang có th ể hiển thị gẩn đúng như thiết k ế đã định, nếu người sử dụng có kết hợp giữa phần cứng và m ểm , tương tự n h ư kết hợp

mà n h à thiết k ế đã dùng Do vậy có th ể sử dụng b ố cục phức tạ p hơn

Tuy nhiên, thiết k ế dựa trên trình bày chỉ ho ạt động khi nó c ó th ể phỏng đoán được phần cứng, phần mẩm và các ưu tiên của người sử dụng Việc này khá dể dàng trong những năm đẳu

p h át triển Web:

• Trong n h ữ n g năm 1991 và 1992, hầu hết n g ư ờ i sử dụng chỉ truy c ậ p văn bản

• Trong những năm 1993 và 1994, hắu hết người sử dụng đều có chương trình Mosaic

• T rong những năm 1 9 9 5 và 1 9 9 6 , hầu h ế t người sử dụng đểu ch u y ển sang dùng N etscape

Bắt đầu vào năm 1 9 9 7 , khái niệm vể trình duyệt chuẩn tắc cho mọi người sử dụng bị loại

bỏ, ngoại trừ m ột vài m ạng cục bộ (intranet) được chuẩn hóa m ột n h à cung c ấ p đơn [ẻ Trén Internet, không còn hệ điều hành phần mém đơn lẻ

T rong tương lai, các thiết bị thông tin sẽ trờ nồn p h ổ biến với những đặc tính riêng Chưa chắc m ột trình duyệt đơn lẻ sẻ không cung cấp giao diện người sử dụng tối ưu trong điểu kiện rộng rã i, từ điện thoại có m àn hình tới tạp chí ảo trên mạng

C ác máy tính không th e o truyển thống, như TVWeb, và các h ỗ trợ kỹ thuật số c á nhân sẻ trờ n ê n phổ biến hơn nhiều Các thiết bị này có các thuộc tính hiển thị hoàn to àn khác so với máy tính truyền thống (điển hình là một m àn hinh n h ỏ hơn nhiểu), do đó không th ể hiển thị tởi trang W eb được m ã hóa cho một dạng trình bày cụ th ể có hình thức đ ẹ p trên m ột m àn hình chuẩn Việc sử dụng m ã hóa ngữ nghĩa giúp cho các thiết bị có khả năng tối ưu m àn hiển thị cho các khả năng của nó

C h ư ơ n g 2: T h iế t k ế tra n g

I irvt try: This is h o w t h e original coding s t a r t e d The g r a p h ic s a r e p la c e d in t w o row s;

e a c h row co n tain in g o n e d a t a cell The individual g r a p h ic s a r e s e p e r a t e d by line b r e a k s to

S eco n d T ry: S a m e c o d e a s a b o v e b u t s e t HSPACE-0 a n d VSPACE-0

IE: S h aza m N Well, t h a t fixed IE.

NN: OK G o t rid of t h e sp a c in g b e t w e e n a d j a c e n t g ra p h ic s T h e r e is still a g a p b e t w e e n

IE: N a da Nothing No c h a n g e , still go o d

NN: S o u n d s of s h o u tin g a n d h a n d clapping Now, if I ca n only figure o u t h o w t o NOT h a v e

to c o d e e v e r y th in g o n o n e line

WWW t h e g r i d n e U t d t r a x

N e t s c a p e 3.01

CẨM NANG THIẾT KẾ WEBSITE

H r s t try: This is h ow t h e original coding s ta r te d The gra phic s a r e p lace d in t w o ro w s; each

ro w containing o n e d a t a cell T h e individual graphics a re s e p a r a t e d by line b r e a k s t o m ake

t h e code e a s ie r to re ad

<TABLE>

<TR*«T0*

<2MG SRC-"Graphtcs/Heoder/Gl g if" «3DTH-103 HED5HT.21 BORD6R.0 A lT -G l'V

<dMG SRC-"Graphtcs/Header/G2.gtf" W3DTH-103 HEIGHT««21 BORDER-0 ALT G2">

</T0>VTR>

<T RxcTD^

SRC-"GraphIcs/Header/G4.g t f " IIDTH-103 HEIGHT-21 BOROER-0 AIT G4%

NN: S h o w s a g a p b e t w e e n t h e row s an d b e t w e e n a d j a c e n t graphics Kind of n e a t a s you

ca n s e e all of t h e bits a n d p ie c e s t h a t m ake u p t h e whole.

S e c o n d Try: Sam e code a s a b o v e b u t s e t HSPACE-0 a n d VSPACE-0

G ra p h ic l\Graphic~2j

IE find NN: Nada Nothing No c h a n g e

I hird 1 ry: It w a s s u g g e s t e d align to p might work s o .

IE: S h a z a m ll Well, t h a t fixed IE.

NN: OK Got rid of t h e sp ac in g b e t w e e n a d j a c e n t graphics T h e re is still a g a p b e t w e e n th e

t w o row s b u t it is t h e s m a lle st yet.

Fifth Try: Got to try i t using A lig n -T o p " m a d e t h e g a p b e t w e e n t h e r o w s smaller so did t h e la s t t r y So n e x t com bine th em I'll a d d back A lign-'T op" t o t h e code a b o v e

17 g p r£ ix J ‘l ĩ ĩ n t :

' n i b Ị i i ì l l ^ ì ^ ì h ì ^ n ỉ ^ ,

IE: Nada Nothing No c h a n g e , still good.

NN: S o u n d s of sh o u tin g a n d h a n d clapping Now, if I c a n only figure o u t h o w t o NOT h a v e to

C h ư ơ n g 2: T h iế t k ế tra n g

F irst tr y : This is h o w t h e original coding s t a r t e d T h e g r a p h ic s a r e p la c e d in t w o row s;

e a c h ro w containing o n e d a t a cell T h e individual g ra p h ic s a r e s e p a r a t e d by line b r e a k s

f m ir th Try: OK T ake o u t all r e f e r e n c e s t o a l i g n - Mto p " , VSPACE a n d HSPACE T ake

Ruth’s advice a n d r e m o v e all sp a c in g a n d line b r e a k s I will u s e only o n e t a b l e ro w (8dtTR>) a n d u s e t h e b r e a k t a g (8JtBR>) t o s e p e r a t e e v e ry th in g into t w o ro w s.

^G raphic l\G ra p h ic~ 2

IE: S h a z a m ll Well, t h a t fixed IE.

NN: OK Got rid of t h e sp a c in g b e t w e e n a d j a c e n t g ra p h ic s T h e r e is still a g a p b e t w e e n

t h e tw o r o w s b u t it is t h e s m a lle s t yet.

Fifth tr y : G o t t o try i t u sin g Align«"Top" m a d e t h e g a p b e t w e e n t h e r o w s smaller

s o did t h e l a s t try So n e x t com bine th e m I'll a d d back A lig n - 'T o p " t o t h e c o d e a b o v e

IE: N a d a Nothing No c h a n g e , still g o od.

NN: S o u n d s of s h o u tin g a n d h a n d clapping Now, if I c a n only figure o u t h o w to NOT

h a v e to c o d e ev e ry th in g o n o n e line

w w v v th eg rid n et/ ed tra x

In tern et E xplorer 3.01

CẨM NANG THIẾT KẾ WEBSITE

B iế n đ ổ i nến (p la tfo rm tra n s itio n )

Hai b iến đổi đ â u tièn trong q u ả n lý n é n W e b d iẻ n ra n h a n h c h ó n g Biến đổi từ

c h ế độ d ò n g s a n g M o s a ic n ă m 1993 c ũ n g d iẻ n ra rát n h a n h K hông c ó d ữ liệu

s ẵ n , n h ư n g tổ c đ ộ n à n g c ấ p k h o ả n g 30% mỏi th ả n g , n g h ĩa là 3 0 % s ố người s ử

d ụ n g c h u y ể n s a n g M o saic trong th á n g đ ấ u tiên C ộ n g đ ổ n g s ừ d ụ n g W e b rấ t

n h ỏ và c h ặ t c h ẽ , tr a o đổi th ô n g tin với n h a u q u a em ail v à U senet Do đó mọi

người đ ề u biết n g a y n h ữ n g thông tin mới.

Biến đổi từ M o s a ic s a n g N e t s c a p e v ào cuối n â m 1994 và đ ẩ u n ă m 1 9 9 5 c ũ n g

d iẻn ra rất n h a n h , k h o ả n g 2 5 % mỗi th á n g N e t s c a p e g ià n h đ ư ợ c g ầ n 8 0 % c ổ

p h ầ n thị trường c h ỉ trong vài t h á n g C h u y ể n đổi s a n g In te r n e t E x p lo re r v à việc

tiếp tụ c c h u y ể n đổi s a n g W e b đa n é n d iễn ra c h ậ m hơn.

Các trình duyệt dựa trén lời nói sẻ sớm xuất hiện Khả năng truy cập được nâng c ấ p cho người sử dụng bị tàn tật (đặc biệt là những người bị khiếm thị) là m ột trong những lý do đ ể tạo

trình duyệt dựa trẽn lời nói Nếu thông tin dựa trên w eb được đọc to người sử dụng sáng m ắt củng

tìm được nơi truy cập thông tin đó, khi tay đang bận làm việc khác, hoặc khi m ắt đang phải tập trung vào nơi khác (chẳng hạn n h ư khi họ đang lái xe) Rõ ràng là các giao diện bằng lời nói với

W eb sẽ hữu dụng hơn nếu sử dụng m ã hóa ngữ nghĩa, n h ờ đó hệ thống có th ể hiểu được cấu trúc của trang Nếu biết được phần văn bản nào là tiêu để, bạn có thể giúp hệ thống có khả năng đọc tóm tắt thông tin cho người sử dụng N hờ đó, người sử dụng có th ể dễ dàng chọn những p h ần họ

m uốn đọc chi tiết

Một lý do nữa để sử dụng m ã hóa ngữ nghĩa thay cho mã hóa trình bày là tính đa dạng ngày càng tăng trong phần m ềm được dùng để truy n h ập Web Nếu ai đó so sánh các screenshot của cùng một trang trong các trình duyệt khác nhau (hay thậm chí trong cùng m ột trình duyệt

nhưng ờ các phiên bản khác nhau, hoặc chạy trẽn các hệ điều hành khác nhau) thì rỏ ràng các

p h ần trình bày thu được sẽ khác xa nhau Khi các nhà cung cấp trình duyệt giành được thị phần

và khi tất cả các nhà cung c ấ p tung ra thồm các phiẻn bản trình duyệt của h ọ , sẽ dẫn đến tình trạn g có quá nhiểu phiẻn bản, khiến không th ể kiếm nghiệm được các trang của tất cả các phiồn bản đó, nếu nhà thiết k ế đòi hỏi thay đổi hình thức m àn hiển thị

Thay vì đưa các đ ặc điểm vể hình thức vào nội dung, c ó m ộ t giải p h á p hay hơn, là tách nội dung và các chỉ lệnh và hiến thị C ác th ô n g tin liên quan đ ế n trìn h bày th ò n g tin c ầ n được lưu vào m ộ t file trong m áu riéng c ó liên kết đến file nội dung chứa m ộ t n h ả n ngữ n g h ĩa phụ duy n h ấ t Các tran g m ẳu là p h ần mới phát triển trẽ n W eb và chưa được sử dụng rộng rã i,

n h ư n g chúng là giải p h á p duy n h ấ t đ ề tạo được p h ần trình bày đ ẹ p m ắt với số lượng tăn g vô

h ạ n của các trinh duyệt và các thiết bị hiển thị Ví dụ, m ột tra n g c ó th ể liên kết với ba tran g

m áu kh ác n hau : m ột của m áy tính đ ể bàn, m ộ t của các thiết bị c ó m àn h ìn h n h ó và m ộ t của

TV H iện nay, các trìn h duyệt W eb không có khả năng ch ọ n tự đ ộ n g tra n g m ẫu đ ẹ p n h ấ t, có

th ể tro n g m ột vài năm tới, tính năng này mới được đưa vào trình duyệt N ếu th iế t k ế của bạn

tá c h biệt ý nghĩa và trìn h bày việc tậ n dụng các cơ hội này tro n g tương lai c h o m àn hiển thị đã tối ưu sỗ th u ận tiện hơn

C h ư ơ n g 2: T h iết k ế trang

T h ò i g ỉ a n đ á p ứ n g

Các nghiồn cứu vé tính tiện dụng của W eb cho thấy người sử dụng thường đòi hồi n h à thiết

kế phải tăn g tốc độ tải trang Web xuống

Nghiên cứu trẽn nhiều hệ thống siẽu vảrì bản cho thấy người sử dụng cẩn thời gian đ á p ứng dưới một giây khi chuyển từ trang này sang trang khác nếu họ định hướng tự do qua vũng thông tin Một số nghiên cứu khác cũng cho thấy nhu cầu về thời gian đ áp ứng phải nhanh hơn một giây Các nghiên cứu do IBM thực hiện vào các th ậ p kỷ 70, 8 0 đà cho thấy người sử dụng máy tính lớn làm việc hiệu quả hơn khi thời gian nhấn một phím c h ú t năng và nhặn được m àn hình cần thiết dưới một giây

Đ áng tiếc là trên W eb bạn không nhận được thời gian đ á p ứng dưới m ột giây nữa D o đó, bạn biết rằng người sử dụng sẻ tiếp tục không hài lòng về tốc độ tải chậm H iện nay, mục đích tối thiếu đối với thời gian đáp ứng là dưới 10 giày vì đó là giới hạn khả nống tậ p trung của người trong khi đợi

• 1 /1 0 giây là giới h ạn để người sử dụng cảm thấy rằng hệ thống đang đáp lại ngay, nghĩa là không có phản hồi đặc biệt nào cần thiết ngoài việc hiển thị kết quả Đ ây có

th ể là giới hạn lản trả lời đối với mọi applet cho p h ép người sử dụng di chuyển, thu phóng hoặc thao tác với các yếu tố của m àn hình trong thời gian thực

• Một giây là giới h ạn đối với luồng suy nghĩ chưa bị ngắt quã ng c ủ a n g ư ờ i sử dụng, m ặc

dù người sử dụng sỗ nhận ra khoảng thời gian trễ này Thông thường, không có phản hồi đặc biệt nào cần thiết trong các khoảng thời gian trẻ dài hơn 0 ,1 giây nhưng ngắn

h ơ n một giày Tuy nhièn, người sử dụng lại m ất cảm giác vé th ao tác trự t tiếp trên dử liệu Nhận một trang mới trong vòng 2 giây nghĩa là người sử dụng được xem tran g mới

m à không phải chờ lâu

• 10 giây là giới hạn đẻ duy trì sự tậ p trung của người sử dụng vào hội thoại Đối với các khoảng thời gian trễ dài hơn, người sử dụng sẽ chuyển sang các thao tác khác trong khi

c h ờ máy tính kết thúc Việc nhận dạng trang mới trong vòng 10 giây trong khi bạn nghĩa là người sử dụng có thể tiếp tục tậ p trung vào việc định hướng sitc

Thông thường, thời gian đ áp ứng càng n h anh càng tốt Tuy nhiôn, nên n h ớ rằng m áy tính

c ó th ể phản ứng nhanh đến nỗi người sử dụng không theo kịp Ví dụ, danh sách cuộn c ó th ẻ di chuyển n h an h đến mức người sử dụng không thể ngừng n ó đúng lúc đế giữ yếu tố cần thiết trong cửa sổ sẵn có

Thòi gian đ á p ứng c ó thể đoán trưốc

Ngoài tốc độ, khả năng thay đổi thấp cũng rất quan trọng đối với vấn để tiện dụng trong thời gian đáp ứng Đáng tiếc thời gian đáp ứng trên Web thường hay thay đổi Đây là m ột trong các lý do

m à ngưởi sử dụng không hài lòng về tốc độ chậm của Web Nếu một ho ạt động thỉnh thoảng diẻn ra nhan h , thỉnh thoảng diễn ra chậm, người sử dụng sẽ không biết được hoạt động tiếp theo là gì, d o đó không thể điều chỉnh hoạt động của họ để tối ưu h ó a khả năng sử dụng hệ thống

CẨM NANG THIẾT KẾ WEBSITE

D ữ liệ u tồ n tạ i m ã i

T rước khi c ó W e b , người ta thư ờ n g nói rằng:

m á y tính c ó t ố c đ ộ c a o hơn.

với tốc độ nhanh hơn, b ạ n v ẵn cẩ n tiếp tục v ận h à n h p h ầ n m ề m c ũ c ủ a mình

Do đ ó , n h iề u c õ n g ty v ã n s ử d ụ n g p h á n m ề m đ ư ợ c viết từ 2 0 n ă m trư ớ c đ ày

h o ặ c làu h d n T h ậ m c h í khi p h ầ n m ề m đ ư ợ c n ả n g c ấ p , rấ t n h iề u m ă c ũ v ẫn

đ ư ợ c d ù n g c h o p h iê n b ả n mới, (người s ử d ụ n g MS W o rd g ặ p p hải c á c thiết

k ế d à đ ư ợ c đ ư a r a v à o n h ữ n g n ă m 80).

c ẩ n giữ th ò n g tin đ ó k ể c ả khi b ạ n không c ò n thích p h ẩ n c ứ n g v à p h á n

m é m c ủ a mình n ữ a v à m u ố n thực h iện một giải p h á p h o à n t o à n mớỉ t ừ đ á u

th à n h c ò n g đ ế u c ấ n n â n g c ấ p m ả y c h ủ vài lấn 1 n ă m B ạ n c ũ n g biét c á c h trình d u y ệ t v à c á c p h ầ n m é m k hác ở trạ n g thái k h ô n g ổ n định.

th ứ ba C á c k h á c h h à n g n à y có t h ể n g h ĩ tới việc m u a lại thiết bị c ũ c ủ a m ột

c ô n g ty đ ã c h u y ể n s a n g d ù n g n h ữ n g m ảy m ó c mới Mổi q u a n t â m lớn n h ắ t

c ủ a b ạ n là h ỗ trợ c á c k h á c h h à n g n à y c ủ a n h ó m t h ứ b a k ể c ả khi b ạ n không kiém đ ư ợ c đ ố n g n à o củ a h ọ q u a việc b á n thiết bị cũ.

Ví dụ m ột người s ừ d ụ n g đ a n g c ả n n h ắ c việc x e m b ộ phim " T h e Big S le e p "

c ù a H u m p h ra y B o g art đ ư ợ c s ả n x u ấ t n â m 1946 C h ắ c c h ẳ n n g ư ờ i n à y s ẽ tim

th á y bài bình luận h iệ n đ ạ i v é b ộ phim trong W e b s it e C in e m a n ia Tuy n hiên,

liệu n h ữ n g binh luận v é bộ phim n à y viết trên NewYork T im e s c ó h a y hơn

không T ấ t n h iê n , c á c s in h viên d iện ả n h m u ố n biết b ộ phim n ày d ã đ ư ợ c đ ó n

n h ậ n n h ư t h ế n à o trong h o à n c ả n h khi n ó đ ư ợ c s ả n x u ấ t ra Ví d ụ n à y c h o thấy

tờ T im e s s ẽ c ó m ột W e b s it e h a y hơn n ế u n ó c ó n h ữ n g tra n g trự c t u y ế n 5 0 tuổi.

T ó m lại, c á c tra n g đ ư ợ c thiết k ế h iện n a y c ỏ t h ể đ ư ợ c s ử d ụ n g c h o n h ié u n ă m

tới, d o đ ó c á c n h à thiểt k ế c ầ n tăng th ô n g tin c à n g g ầ n m ứ c c h u ẩ n c à n g tốt,

đ ồ n g thời t ạ o c á c th ô n g tin c ó giá trị lâu dài v ể lý th u y ế t b ạ n luôn c ó t h ể trở lại

c á c trang v à c h ỉn h s ử a c h ú n g

Nếu mọi người cho rằng m ột ho ạt động n à o đó sẽ diễn ra n h anh, h ọ sẽ bị thất vọng nếu nó

bị chậm Mặt khác, nếu h ọ nghĩ rằng m ột ho ạt động nào đó chậm , h ọ sẻ không cảm thấy bực

m ình lắm về độ trễ đó- Đây là m ột trong các lý do đ ể giảm tối thiểu mức biến đổi của thời gian

đ á p ứng Nếu cùng m ột h o ạt động luôn diễn ra trong khoảng thời gian n h ư nhau, người sử dụng

sẽ biết được h ọ đang đợi gi Mọi việc bạn tiến hành đ ể ổ n định thời gian đ á p ứng đểu giúp nâng

c a o tính tiện dụng

C h ư ơ n g 2: T h iết k ế tran g

Ví dụ bạn có thể g i ú p người sử dụng phỏng đoán thời gian đáp ứng trong quá trình tài xuống các tran g lớn hoặc các file đa phương tiện bằng cách chỉ ra kích thước của file tải xuống bẽn c ạn h liên kết T h eo kinh nghiệm, cần cung cấp kích thước đối với những file chiếm trên 10 giây tải xuống tại dải thông phổ biến m à hầu h ết mọi người sử dụng Nếu người sử dụng có các modem tương tự (analog modem) bạn cẳn cản h báo cho họ biết vé kích thước tải xuống cho m ọ i file vượt quá 5 0 kilobyte

T rong tương lai, các trình duyệt có th ể được tích hợp với các dịch vụ ủy nhiệm có chức nãng th e o dõi dải thông và chất lượng dịch vụ đã từng được phân phối bởi các site khác nhau trên Web N hờ sử dụng những thông tin này, trình duyệt có th ể thay đổi hình thức các liên kết, tùy thuộc vào dịch vụ Ví dụ, liên kết tới site m à thường bị ngắt khỏi Internet, hoặc thường phân phối

dữ liệu chậm , sỗ được th ế hiện bằng các m àu mờ Thòng tin này giúp người sử dụng chuẩn bị tinh thần c h ờ đợi trước khi n hấn, nhờ đó nâng cao to àn bộ tính tiện dụng của Web

Tuy nhiên, vấn đé ờ đây là thời gian trả lời mà người sử dụng phải đợi được quyết định bởi

liên kết yếu nh ất trong chuỏi xích liẻn kết từ m áy chủ tới trình duyệt

• Dữ liệu của máy chủ Đây không phải là vấn đề cần quan tâm vì giá của phần cứng chiếm một phần nhó nh ất trong việc phát triển m ột Website, nhưng các nhà thiết kỗ' site p h ổ biến thường ngạc nhiẻn trước tốc độ lưu thông tăng n hanh và không kịp nâng

c ấ p cho máy của họ

• K ết nối của m á y chủ tới Internet Nhiéu site c ố lưu vào kết nối của chúng v à hoã n nâng

c ấ p từ T I lên T 3 kể các khi kết nối hiện thời của chúng đã bã o hòa

• C hính là Internet Mặc dù m ạng này không ngừng được nâng cấp , nhưng n ó vẫn bị tắc,đặc biệt đối với những kết nối xuyồn lục địa và khi sử dụng vào giờ cao điểm.

• Kết nối của người sử dụng tới Internet Như đã miêu tả, kết nối này c ó tốc độ cực chậmđối với phần lớn những người sử dụng và không thay đổi trong m ột vài năm

• Tốc độ th ể hiện của trình duyệt của người sử dụng và m áy tính ít khi là vấn để lớn,mặc dù có th ể phải m ất nhiéu thời gian đ ể tạo b ố cục cho các bảng p h ứ t tạ p trê n cácmáy cấp thấp

Mỗi bước nồy đều có khoảng thời gian trẻ riêng trong quá trình người sử dụng nhận trang

W eb từ máy chủ Đ áng tiếc các khoảng thời gian này chổng chất lổn nhau, nghĩa là bạn không

n h ận được thời gian đáp ứhg n h anh nhờ cải tiến liên kết đơn trong chuỗi liên kết Khi bạn nâng

c ấ p từ m odem lẻn thành tuyến ISDN, bạn sẻ n h ận được hiệu suất W eb gấp đôi

Các s ite x u ấ t sác n h ấ t dư ợc tả ỉ r ấ t nh anh

V à o n ă m 19 9 9 , người la đ ả tiốn h à n h đ o thời g ian tải tra n g c h ủ x u ố n g c ủ a

2 0 W e b s ite lớn Một n ử a s ố W e b s it e được s ử đ ụ n g r ộ n g r ã i tr ê n Internet, và

m ộ t n ử a là s ite c ủ a 10 c ồ n g ty lớn n h á t n ư ớ c Mỹ T ra n g c h ủ c ủ a c á c c ô n g ty

đ ư ợ c tải x u ố n g với t ố c đ ộ c ự c c h ậ m , trung bình k h o ả n g 14 g iày , tro n g khỉ trang

c h ủ c ủ a site p h ổ b iế n c h ỉ m ấ t 8 g iâ y tải x u ố n g K h ả o s á t n à y c h o t h ấ y site

c h i ế m p h ầ n lớn lưu t h ô n g s ẽ n h a n h g á p hai lán s o với s ite đ ư ợ c x ây d ự ng bởi

c á c c ô n g ty lớn nổi tiế n g trước đ à y

CẨM NANG THIẾT KẾ WEBSITE

TỐC đ ộ tài nhanh, tố c độ kết nối nhanh

Quá trình xem xét những vấn để cơ bản, cả những yếu tố về con người và m ạng m áy tính, chỉ có m ột kết luận: các trang W eb phải được thiết k ế với tốc độ đã định Đ ể giữ cho kích thước

tran g được nhỏ, các đồ họa phải được để ờ kích thước n h ỏ n h ất, chỉ nên dùng các hiệu ứng đa

phương tiện khi chúng thực sự giúp người sử dụng hiểu thấu đáo hơn về thông tin H ã y xóa bớt

đồ h ọ a , tăng lưu thông

S ử dụng đồ họa ờ mức vừa phải không khiến cho các trang trờ nên tè nhạt B ạn có thể

thực hiện nhiều ý tưởng với các ô bảng m àu và sử dụng có sáng tạo các font khác nhau Đ ặc biệt,

có th ể sử dụng các trang m ẫu để cải tiến thiết kế trang

Tuy nhiên khi sử dụng đỏ họa, h ã y thử sử dụng m ột hình ả n h với nhiéu lần xuất hiện thay

vì sử dụng các hình ảnh khác nhau Các bần hoạt động nối tiếp của cùng một file hình ả n h sẽ thể hiện n h anh vì hình ảnh được lưu trong bộ nhớ tạm cục bộ của người sử dụng T rong khuôn khổ

m ộ t trang đơn, những hình ả n h m ô tả, n h ỏ c ó thể tái sử dụng, chẳng hạn n h ư các nút mủi tên, biểu tượng T rên thực tế, việc tái sử dụng liên tục như một bảng từ vựng hiển thị nhỏ sẻ không chỉ

làm tăn g số lần tải xuống m à còn kết hợp chặt chỗ toàn bộ site của bạn với nhau.

Q ua các trang, đôi khi bạn có th ể sử dụng lại những hình ảnh lớn, chẳng hạn n h ư m ộ t bức

ả n h ch ụ p hay m ột sơ đổ tiến trình Khi hình ảnh lớn được sử dụng lại nó sẻ duy trì ý nghĩa từ

tra n g này sang trang khác, vi người sử dụng thường nhận ra hình ả n h đó Nếu bạn m uốn liên hệ hai khái niệm khác nhau, bạn cần sử dụng hai hình ảnh khác nhau

N gười s ử d ụ n g th ích các tra n g tả i nh anh

A R U P L a b o r a to rie s là một t h ư viện th a m k h ả o y học C á c k h á c h h à n g c ủ a

AR U P b a o g ổ m c á c b ệ n h viện, c á c n h à v ậ t lý, c á c c ô n g ty q u a n tà m đ ế n việc

kiểm n g h iê m n g h é n g h iệ p R ory S w e n s e n , người q u ả n lý W e b c ủ a A R U P

th ô n g b ả o r ằ n g w w w a r u p -la b c o m đ ư ợ c thiết k ế đ ể k h ô n g c h ứ a m ột đ ổ h ọ a

n à o n h ằ m lă n g s ố lẩn tải xuống.

Khi s ite n à y đ ư ợ c mở, k h á c h h à n g đ ư ợ c mời bình lu ậ n v é s ite n à y tro n g m ẵ u

đ ơ n p h ả n hổi T ro n g s ố 201 lời b inh luận, c ó 4 5 lời k h e n ngợi tố c đ ộ n h a n h , c h ỉ

c ó m ộ t k h á c h h à n g p h à n n à n rằ n g site n à y "không đ ư ợ c h ấ p d ẵ n lắm" Trong

s ổ 4 5 lời bình luận v ề c á c lẩn tải xuống, c ó lời n h ậ n x é t c ù a m ột b á c sĩ, iói

r ằ n g "tôi thích c á c tra n g k h ô n g q u á lòe loẹt, n h ờ đ ó c ó I h ể tải c h ú n g x u ố n g

n h a n h ch ó n g " G iá m đ ố c c ủ a m ột th ư viện nói rằ n g " site n à y đ ư ợ c tổ c h ứ c tốt

v à d ễ s ử d ụ n g Tài x u ố n g n h a n h , không c ó n h iế u đ ồ h ọ a " Mọi người đ ề u thích

d ịch vụ n h a n h S o n g d ịch vụ n h ư vậy trên In te r n e t rấ t hiém

T ất n hiên, c á c p h iế u p h ả n hói c ủ a k h á c h h à n g c ó xu h ư ớ n g c h ọ n lọc m ột m ẵ u

đ ư ợ c thiên vị c ủ a người s ử d ụ n g , vỉ p h ầ n !ớn người s ử d ụ n g đ ế u k h ô n g b ậ n tàm

đ ế n việc c u n g c ấ p p h ả n hổi Tuy nhiên, kinh n g h iệ m từ h ầ u h ế t c á c s ite lã mọi

người c ó xu h ư ớ n g tích c ự c h ơ n trong v iệ c đ ư a ra n h ặ n x é t khi m ấ t m á i c á i gi

đ ó h o ặ c khi b ậ n tâ m đ ế n một s ố khía c ạ n h c ủ a site.

to o long to g e t to it?

That’s why a t CNET, in addition to delivenng new content

on a daily-or even a n hourly-basis, w e r e also working to deliver th a t information a s quickly a s possible Fast downloads are especially important if you're dogged by the bandwidth blues If your connection to t h e Net is 20.8 kbps

or slower, then you're one of th e bandwidth-deprived And

a t CNET, to paraphrase a certain politician, we feel your pain We keep you in mind an d always consider w hat it's like to be continually blasted with Web sites cluttered with too many graphics or built around complicated table structures th a t keep you waiting a s your browser assembles th e p ages, w e tak e th e sp e e d factor very seriously.

k v w i v c n e f c o m

Nhiêu p h ầ n thiết k ê c ủ a tra n g n à y đ ư ợ c tạ o n h ờ kết h ợ p c á c ỏ b ả n g có m à u với c á c p h ô n g T r a n g

n ày k h ô n g đ ò i hỏi tải x u ố n g n h iể u đ ổ h ọ a T h e o n g u y ê n tả c , n h ữ n g đ ổ h ọ a d u y n h ấ t c ấ n tải là logo

c ủ a s ite v à à n h c ủ a người ph ụ trá c h c ộ t b á o Trên th ự c tế, tiêu đ ề " p e rso n a litie s" v ẫn là m ột đ ó

h ọ a vì c ó c á c c h ấ m n h ỏ v à d á n g v ẻ xiên Đ ể m ụ c 'm a k in g a s p e e d i e r CNET" là v ă n b ả n t h u á n tuý trong m ộ t ô m à u v à x ử lý tương tự c ũ n g đ ư ợ c d ù n g c h o tiêu đ é "perso n alities".

Ngoài các file tải xuống nhanh, còn cần có các kết nối n h anh tới Internet Các m odem

chậm 14.4K bps đã có từ đầu năm 1999 nhưng tỷ lệ người sử dụng kết nối ờ tốc độ cao vẫn

không đổi T ừ năm 1995 - 1999, các m odem chậm đã được thay th ế bằng các m odem 56K bp.Bảng sau đây chỉ ra kích thước trang tối đa được p h é p cần thiết đ ể đạt được số lần trả lời như ý đối với các tốc độ kết nối khác nhau Các con số giả định thời gian chờ là nửa giây (nhanh hơn hấu h ết các kết nối hiện nay) Đối với nhiểu mục đích thực tế, kích thước trang cần n h ỏ hơn kích thước được chỉ ra trong bảng sau:

CẨM NANG THIẾT KẾ WEBSITE

vì rất hiếm khi người sử dụng n h ận dữ liệu lý thuyết đầy đủ của m ạng Ngoại lệ chính c ó th ể là khả n ăn g truy c ậ p tới các applet quan trọng rắt hữu ích đói với công việc của người sử dụng Hơn nửa, các ap p let này không cằn tải xuống mọi ừ ang mà chỉ cần tải xuống khi người sử dụng bắt đầu m ộ t nhiệm vụ mới

Tỉm h iể u kíc h thước tra n g

K hái n iệ m v ề "kích th ư ớ c tran g " đ ư ợ c định n g h ĩa n h ư m ột s ố kích th ư ớ c file đối

với t ấ t c ả n h ữ n g y ế u tố tạ o n ẻ n trang, g ỗ m c ả file HTML c ũ n g n h ư tấ t c ả c á c

đ ố i tư ợ n g đ ư ợ c n h ú n g (ví d ụ n h ư c á c file hinh à n h với c á c ả n h GIF v à J P G )

M ay m ắ n là c ó t h ể t ừ b ỏ c á c thiết k é trang c ó kích th ư ớ c t r a n g lớn m iễ n là file

HTML n h ỏ v à đ ư ợ c m ã h ó a đ ể g iả m thời g ia n t h ể h iệ n c ù a trình d u y ệ t.

B ạn cẩn tu yế n T1 riê n g

T h e o g i à định, thời g ia n c h ở tr ê n In tern et c ó t h ể ở m ứ c n ử a giây, người s ử

d ụ n g s ẽ c ấ n tải m ột t r a n g W e b trong vòng n ử a g iây đ ể n h ậ n đ ư ợ c lượt trả lời

m ộ t g ià y c ấ n thiết đối với tính tiện d ụ n g c ủ a s i ê u v ă n b ả n tối ưu N h ié u trang

W e b c ó kích th ư ớ c 100kilobyte và đ ư ợ c tải x u ố n g trong v ò n g n ử a g ià y c h ĩ khi

n g ư ờ i s ử d ụ n g t o à n b ộ tu y ế n T1 ở m ức 1 ,5 M bps Tính t o á n đ d n g i ả n n à y ch o

t h ấ y mọi tu y é n c h ậ m hơn T1 đ ề u d ã n đ ế n những r ắ c rối c h o tính tiện d ụ n g khi

d u y ệ t W e b

T hiết k ế gốc của W W W provenedge.com có giới hạn vể kích thước trang ờ mức 40K Tuy

nhiên, những tran g đạt mức giới hạn 40K đã ghi lại 25-30% tỷ lệ người sử dụng không đợi file tải xuống h o à n to àn

Mặc d ù các giới hạn kích thước trang trong bảng trỗn có vẻ rất nghiêm ngặt, nhưng chắc

c h ắn các site này sẽ bị thiệt hại vì m ất nhiều người sử dụng khi chúng vượt quá quy định T rong ví

dụ P roven Edge, số người đọc tăn g lốn khoảng 25% khi các trang lớn được đưa vào tuyến với mùc

đ ộ tối đa

Các địa c h ỉ URL n h a n h hơn.

M ẹo: C á c liên k ế t tới m ột t h ư m ụ c n ên c ó một d ấ u v ạ c h c h é o c uối c ù n g trong

đ ị a c h ỉ URL khi đ ư ợ c n h ú n g trong c á c trang W e b (d ấ u v ạ c h c h é o n à y c ó t h ể bị

loại b ỏ khi viét c á c địa c h ĩ URL c h o m ửc s ử d ụ n g c ủ a c o n người) Ví d ụ liên kết

h ttp ://w w w u s e it.c o m /a le rtb o x n h ư n g đ ư ợ c m ả h o á là h ttp ://w w w u seit.c o m /

a l e r t b o x c h o đ iể m n e o s i ê u v ă n b à n trong p h iê n b ả n trực t u y ế n c ủ a bài b á o đó

Lý d o đ ể th ê m m ột v ạ c h c h é o v à o c á c liên kết trực tu y ế n là đ ể t r á n h th a y địa

c h ỉ khi m á y c h ủ t h ô n g b á o c h o trình duyệt là liên k ế t n à y là tới t h ư m ụ c c h ứ

k h ô n g p hải file N ê n t h ê m v ạ c h c h é o s a u c ù n g v à o H R EF khi ph ù h ợ p vì s ẽ

là m g i ả m thời g ia n chờ.