Tài liệu Cẩm nang thiết kế website

NHÓM TÁC GIẢ EUCOM N H À XUẤT BẢN H À N Ộ I Mã sổ■= DV, - ^ 8 54 - 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ông tin lớn nhất và ngày càng được nhiểu người sử dụng. Với 2 0 triệu Website hiện nay và ước tính khoảng 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ính tiện dụng cao mới có th ể đứng vữhg trong cuộc cạnh tranh khốc liệt này. Với m ục đích giúp các nhà thiết k ế W eb tạo ra những W ebsite th u ận tiện ch o người sử dụng, nhóm tác giả ELICOM xin trằn trọng giới thiệu cuốn c ẩ m n a n g th iế t k ế W ebsite. Cuốn sách này sẽ trình bày những khía cạnh chính trong thiết k ế W eb n h ư th iết k ế trang, 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 minh 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 phạm phải những lổi m à nhiáu người khác đ ã m ắc. Nếu tuân th eo nhCỒig ch ỉ dấn trong cuốn sách này, các bạn sỗ có những đề á n W eb n h an 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 giả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 nhanh........................................................................ 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 Khung.......................................................................................................................... .......................... 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 trang................................................................................................ 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 ảnh...................................................................................................................... 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ượng.............................................................................................................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 ti 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 RL...... . ............................................................. ........ . .... ..... 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ủanhâ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 giá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 ngữ ................................................................................ 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ệndụ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 ebTV ..................................................................................................................................... 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 thoạ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áng 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ành hàng trăm triệu vào năm 2 0 0 2 . Như 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 tran g W eb đã khẳng định tầm quan trọ n g ngày càng tăn g của W eb trong thời đại In tern et. Trước đây, khách hàn g không 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 ua m ột đẳu video, bạn mới p h á t hiện ra rằng rất khó đặt khóa cho 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 100$ cho mỏi cuộc gọi, tùy thuộc vào độ p h ú t tạp của phần mểm). Hơn m ột nửâ s á cuộc gọi phải th ụ t hiện là do tính tiện dụng của sàn phẩ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: • ớ trang 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. • Trê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ý do 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 phá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. Cuốn sách này chủ yếu để 9 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 ph á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 phát triển không ngừng. Bạn sẻ tim thấy ở đây nhiểu quy tắc, chỉ dẵn và phương p h áp đúc kết qua kinh nghiệm của những người sử dụng W eb trước đây. Tất nhiên, bạn không phải tuân theo mọi chỉ dẳn m ột cách mù quáng. Đ ể trờ thành một người thiết k ế W eb chuyên nghiệp, bạn cần học cách khi nào phải tuân th eo các nguyên tắc, khi nào có th ể biến đổi hoặc vi phạm nguyên tắc. Bạn phải biết những nguyên tắc ban đầu trước khi xem xét liệu có th ể cải tiến m ột để án lệch hướng so với m ột vài nguyên tắc hay không. Đ ồng thời m ột nguyồn tắc c ơ bàn đối với việc vi phạm quy luật là bạn chỉ được thực hiện điều đó khi có lý do thực sự thích đáng. M ú t cạnh tra n h cao Trên W e b , m ứ c c ạ n h tra 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 nghiệp. Với h à n g triệu s ite k h ác , b ạ n phải c ạ n h tran h v é m ứ c đ ộ q u a n l à m v à thời gian 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 hiệu n h ấ t tro 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ụ tu 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 tu 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 nhanh 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 theo bảng câu hỏi chuẩn vổ ý kiến khách hàng? H ã y chọn thiết k ế có số điểm đánh giá cao nhất chứ không phải thiết k ế m à chỉ cá nh ân bạn thích. Tất nhiôn phương phá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 phá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 cho nút tìm kiếm không đơn giản chì là tuân theo 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à 90% công sứ t lao động. C on đường để có những sáng tạo thiết k ế phù 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à thuậ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 eo phương p h á p kỹ thuật và tìm hiểu các phản ứhg của người 10 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 ính 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âng 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 . Sau 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 ch 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 eo 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 trang W eb của Internet - 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ạnh tran h , cho dù đó là ngành công nghiệp gì. T hiếu tiệ n dụng cũng đống nghĩả v ờ m ất khách T ro n g thời đ ạ ỉ c ủ a m ạ n g , W e b s ite trở t h à n h nơi g ia o dịch ch ính c ủ a c ô n g ly với k h á c h h à n g . Thực vậy, đối với c á c c ô n g ty th ư ơ n g m ại điộn tử, s i t e ch í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 rtgu yô n liệu tiế p thị, đ ộ i ngũ b á n h àn g , d ịc h vụ h ậ u mại vụ... Tro ng n h ié u trường 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 giống 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ì c ụ c c ằ n , th iế u niểm n ở với k h á c h , nôn khách hàng 80 chẳng mua gì nhỉổu. 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ánh 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 doanh trong n án kinh tế mạng. 11 CẨM NANG THIẾT KẾ WEBSITE • Q uản lý để án : Q uản lý đổ án W eb tựa như đó 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ý như 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. • Thiết k ế trang: T ạo tran 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 trang chạy thử, không có hiện tượng chậm trễ về thời gian đ á p ứng (responsetime). Tuy nhiê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ự như vậy, tran 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 trang. Vì thồ', thiết k ế phải đ ể người sử dụng trắc nghiệm được những tình huống thực, ch o dù các trang chạy thử có kém h ấ p dản. • Sáng tác nội dung: Viết theo phong cách thông thường, thay vì viết th eo kiểu mới được tối ưư hóa cho 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 trang 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. Trong mỗi trường hợp này, cách thíte thông thưởng mọi người chuẩ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. 12 Chương 2 THIẾT KỂ TRANG Thiết k ế tran 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 nhu 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 nhiều W ebsite lại d à n h phẳn lớn m àn hình đế định hướng, thay vì cung cấp th ô n g tin m à người sử dụng quan tâm . Đ ịnh hướng cũng cẩn thiết song không phải là mục đích ch ín h , do đó, 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 cho 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 phạm vi do 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ắng, 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ắng 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 nhiên các ví dụ à đây chỉ ra rằng còn m ột p h ần khoảng trống trắng không hiện diện do các cân nhắc trong thiết kế, nó chí hiển thị vì trang này không tự điểu chỉnh đ ể 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 trang hình chữ nhật tro n g trình duyệt của người sử dụng hiển thị hoàn h ảo trong mọi h o àn cảnh. Vẫn có m ột số vết lỏ ch ỗ . T heo 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ỏ phẩ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. 13 C h ư ơ n g 2: T h iế t k ế tra n g — —-— — h ttp ://w w w .ottip q u est.coa/cgi làn /ia find?*cicenM«i-»v 7 T ^ \ I i H«n*OTh* ỉ M if *w * ■ n r/p j" î" 1 S n rc h Rm u H .IN«.<■ ' UM I U ' l W 11 i'N ! “ «N!.N<.U AND rVépí.i:i SV ; 2 A d d f e i i / ln«» i;ec:* o n C h c k i n y m a p w ill ^ f * R e c e o ỉ e t h Z o o m 'n R e c p r ie r ^ IdetVafy Ico n jB u r lin g ro n A íC ỗ d e C r f y ________ S ia ie /P io v n c * ( to n r lc r - & o t x j * » B V i 'l i r i t I Ifio il ‘• J V C • PfMt ƯU* m*{. • E > m j4 th i m ap . S i . * f tj p t n U»i«ït PfacM at Interest 'V l _ * 4 -------- 'f f / '. - L W - '" AH • ' ( I ' . ‘< iS 'A K .'L [ ' . H J ’ A -’ » W • 'tù 'Ì.C . V. M M v.p a th tin d ercotT . GUIOC 1 I u I PERSONAL COITION « I. t I I » t P A T H F IN D E R ^ rt ( V w õ K X NEWS I PERSONALITIES MONEV 6 BUSINESS SP0«T5 I ENTERTAINMENT NCT CULTURE I LIVING *jr+ •« , m r LATEST NEWS ¡-■I I. . l U l AM ÍƠTỊ CLICK FOR IAORC F£ ATURES ▼ r „r.-=r j , ■ *r.< ỉ v*s W i n n e r A?«d L o w . & f I The Doctor ls In jr ird in Strives ỉ or five P R l M t C L IC K S Pecpie Muney TIM E ► I SIonluH* FORTIÍNE Q uetts I i* K ? T 1 t . ( th e d o c 'f a d v ic e cơlivs? (oiikaal 'itờtỉiỉi < T W) lỉỉii h 0ifỉdfìm« m ZAGAT rv 4 ¡i p* -I >'.•!- I V . I V . S l A VU -I •_ ti«« . ___________________ j M t/ir/v e V n lu a l (»¿Uik-H ¿j f , n W t - f t •• ft. -,LI- l l V: *. *. ' • M . iwl Ul*s u1 5 0 0 S p o t G o ld D o tr 1 7 1 4 .7 4 ♦ 1 .8 2 0 111».«« +2.1« Ử 211.71 '2.10 • Í7.9Ĩ -0.13 0 *.?• -0.00 0 0«c Crud« Oil 30 Yr T r« * i O ATG K G e t Q u o te i) Whot s Hot th « f c u n tim t m«rfc«Li mov% in f t il- b r n * with Q u o t a . c o r n 's » • ¡••> •-¿ *1 ' T h # o n ly fO « « m in g . .• fà »í-tím « ch**ts on th « Int'âm at ỊỊịịỊỊlũ i? ỊỊỊỊỊỊỊ ramm Top Bu«ne # ,+ r . t * !•* h ÿ :T rr i* : ’ ‘1 1 a ĩíỉỉỉè '^ tẰ ĩ-t c y ý # lk ..> r g < r_ 3 L -: 3 . l i t ! M o i» ìỳi.iiiiíiiíii juu'tmo U -M Ẹ -' f « î w - f * . .• (ityWotch ,J1W w h a r a « r t b u * i n » i * « s b o o m i n g ? Q u o t f t . c o m '» >• r a n k i n g » l « t y o u « • • » h l c h ơ t ié » « r « h o t « n d w h ic h » f * n o t . T h « t « b U b « lo w » h o v s t o d a y '* t o p p e r f o r m i n g Y o u c « n * lfo V I« « ra n W m g * f o r . 4 ; i « n d th « » m m o n th * « n d « d Quotes U IH M îà î •!*5ïî5:*' tSẰJ. r NYSE MosJ Aflive iu iç ji m uaiu m i :x 5 J&J8 &áSỊỊỊỉ&%%ịm lammt Dual mît lipimtiti (km uusum! lîiiiüü iltjt mil »1» Hii» ni» Im nutum ilEBp U.Ì1UŨỈU mil* lim jjH i U 1 u u uiuu U U Ịiỉliiỉ ? !M fcăãrầ Mjm m i MHII »W ilItM tfâ tô & fe M & é ttO iîa L ü s u m ü ' IIIIO M I Symbol MCh j. H O I 9011 . ỉ ẳ U mjijUJjlAM..-'.» iL M ỊU ; W W ;*dB á M 6ffi3i42 ' Ắ »*42 H l i Od I m m ii • (4 9 0 I l a w H H■ Üi É l îÜ C ï î tl- .8 U II ■ l . H' f I U » 4 1 9 3 HOC s o t I H IM IIO D M I H III» l 11011441 ICÉÛ3 I I oa 001« i ' > •;;> ; *' ■! : " í--? ?.!ĩ_ rr: Oun«* 0 ♦ ♦ 26 u 4 -1 7/8 2 Ì.1 4 -fo o t # 0 NYSE Biggest Gainers LMt O x^nqm 2 3 3/ 4 4 -2 3 / 4 ứ 3 1 /8 * 1 /4 ứ 1 6 .1 0 + 1 .1 0 û 2 .1 4 + 0 .0 6 ữ 3 1 /4 + 1 /4 ữ w h a t ato cki * f hot> Chack out th# U U ltfr o m ; .'sj . . I* ■ ■..‘.la who»« Magic 23 «tock pick* h*va o u tp«rform «d th * SftP 300 fo r th« p » it «IX y« « rf. O nly * U ft 3 9 .1 8 + 0 .3 0 4 0 .1 9 -3 3 /8 3 7 .0 6 -2 1 /2 J r.:u ¡ U ĩ n ĩ l Ị L Morkel Cominenloíy NIW mm m s ii ■ i Ifiiu i III l ỉ m HHHI a JBIMBBWaaBin i» mitTM f * c o m m « n d * t ) o n i o n f t o c k s t o b u y « n d i n d u i t o l « ! t o V f ttc h . Q uole.com News Centct Aaaitioo«! N m flM ourta • Company Reports N£W G « t * w *n m o n d « t« )ls « b o u t th * c o m p r n n s y o u t« a d « . '« p o r t a f r o m " - . - . t t p ro v id e « A ty -to -u s « f u n d a m i n f o r m a t i o n a b o u t p u b lid y * t* * d « d c o m p t o n s . T h « rt« v C o m p a n y S n a p s h o t I 1 a v « < l « b l « t o « II b l« > f. Q u i c k F s c t j f « p o r t IS • v t t U b l * t o « I I l u b i o i m n , f t f w a lk p a r tic ip a n t* in o u » 3 0 * 0 * v f» « « T rill. T w o r \m \ e n ta l Th« •( w w w c /u o te .c o m 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 ra n g n à y đ ả s ử d ụ n g kiểu c h ữ k h ô n g có trê n m ả y tín h d ù n g đ ể truy c ậ p site, d o đ ó n h iề u p h ầ n v ầ n b ả n đ ư ợ c h iể n thị không c huẩ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 tron 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 . 20