Giải thích cơ chế xử lý thông tin trong bộ não và sự tăng cường nhận thức của con người
thông qua thị giác.Việc giải quyết được các vấn đề trên sẽ giúp chúng ta hiểu được phần nào
cách thức hoạt động của bộ não trong quá trình nhận thức của con người. Mối quan hệ giữa thị
giác và bộ não trong các hoạt động của con người.
171 trang |
Chia sẻ: lylyngoc | Lượt xem: 2438 | Lượt tải: 0
Bạn đang xem trước 20 trang tài liệu Luận văn Ứng dụng yếu tố con người vào trong tổ chức HCI, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
khỏi chương trình, còn trong trường hợp thứ hai thì Ctl + Q lại
là lưu đối tượng vào ổ đĩa.
4. Lỗi của chuột : Bây giờ chúng ta sẽ xem xét trường hợp con chuột không sử dụng hòn bi ở
dưới mà thay vào đó sử dụng một thanh cuộn ở bên trên
Hình 3. 1. 58 Chuột có 3 nút bấm
Chuột có 3 chức năng để điều khiển bao gồm có nút điều khiển, nút cuộn và nút tròn dùng
trong trường hợp giao diện nhỏ khi mà chuột không thể hoạt động. Với kiểu dáng thiết kế như
135
trên chúng ta sẽ rất khó nhận ra các phím chức năng của chuột. Liệu bạn có thể nhìn thấy chúng
một cách dễ dàng được không?
Hình 3. 1. 59 Nút điều khiển trên chuột
Tuy nhiên đấy không phải là vấn đề lớn nhất. Việc thiết kế chuột không tuân theo quy tắc
thông thường khiến xảy ra hai vấn đề quan trọng sau đây: nút power của chuột và nút chuyển
trạng thái yêu cầu các thao tác khác nhau, hơn nữa thông tin thị giác phản hồi bị ngón tay che lấp
đi.
Hình 3. 1. 60 Che mất chức năng điều khiển
5. Lỗi khi sử dụng cuộn màn hình và thanh trượt : Mặc dù đã có nhiều ví dụ được đưa ra tuy
nhiên các trang Web vẫn có nhiều lỗi trong việc thiết kế cuộn màn hình. Điều này gây nên sự
khó chịu của người xem, khó khăn khi truy cập thông tin và mất nội dung.
Sau đây chúng ta sẽ xem xét một số hướng dẫn cho việc thiết kế scrolling và scrollbars
a. Sử dụng Scrollbar nếu như nội dung cần đọc cần phải được cuộn. Không nên dựa vào
cuộn tự động hay kéo vì các công cụ này con người không để ý đến
b. Sử dụng các Scrollbars ẩn nếu như tất cả nội dung được hiển thị. Nếu như người dùng
nhìn thấy một thanh công cụ, họ sẽ giả định rằng có thêm nội dung thông tin và sẽ khó
chịu nếu như không sử dụng được thanh trượt
c. Tuân theo các quy tắc chuẩn thiết kế các thanh trượt sao cho thật giống các thanh
trượt
d. Tránh sử dụng các thanh trượt ngang trên các trang Web và hạn chế sử dụng ở các nơi
khác
136
e. Hiển thị tất cả các thông tin quan trọng trên các nếp cuộn. Người dùng có thể quyết
định cuộn hay không căn cứ trên các thông tin đã nhìn mà không cần phải sử dụng
thanh cuộn
Sau đây chúng ta sẽ xem xét một số vấn đề lỗi trong việc thiết kế các thanh trượt:
o Các trang Web vãn còn hay sử dụng các thanh trượt ngang. Trong quá trình sử dụng
máy tính người dùng thích sử dụng các thanh trượt dọc hơn là các thanh trượt ngang.
o Các trang Web sử dụng cả thanh trượt ngang và dọc gây nhiều khó khăn cho người
dùng do phải sử dụng vấn đề về thị giác trong không gian hai chiều. Điều đó gây ra sự
khó khăn nếu như người dùng muốn đọc hết nội dung thông tin. Ngược lại khi sử dụng
một thanh trượt người dùng sẽ cảm thấy thoải mái và dễ làm chủ hơn.
Hình 3. 1. 61. Lỗi khi thiết kế thanh trượt
Do vậy trong tất cả các trường hợp, các thông tin quan trọng nhất cần phải được hiển thị
trên màn hình bởi vì sử dụng thanh cuộn sẽ gây nên cho sự khó khăn trong quá trình truy cập
i. Các hành động cần thiết mà thanh trượt yêu cầu có thể gây khó khăn cho người dùng
kém khả năng lướt Web
ii. Người dùng sẽ khó xác định được vị trí cần thiết sau khi sử dụng thanh trượt
Người cao tuổi sẽ gặp khó khăn trong việc xác định điểm ở trên thanh trượt thực đơn hay
các thực đơn có kích cỡ nhỏ.
Sau đây chúng ta sẽ nghiên cứu một số ví dụ cụ thể :
i. Trong việc thiết kế các thanh trượt quen thuộc, người thiết kế sẽ gặp phải một số vấn đề về
tinh hữu dụng. Do vậy người thiết kế sẽ không sử dụng các thiết kế thanh trượt phổ biến.
Những hình sau đây sẽ chỉ cho chúng ta ba ví dụ về việc lỗi trong thiết kế scrollbar. Hình bên
trái ngoài cùng đưa ra một loạt các biểu tượng. Tuy nhiên người sử dụng vẫn không quen sử
dụng các biểu tượng ảo này do không thể biết được nếu kích vào các biểu tượng đó sẽ có
những lựa chọn khác như thế nào. Hình ở giữa là cấu hình các sản phẩm, một số người dùng
137
không để ý đến các thanh trượt ngang do chúng bị pha trộn vào các sản phẩm và bị làm mờ đi
do không có mầu sắc nổi bật. Do vậy làm hạn chế cho sự lựa chọn các sản phẩm khác.
ii. Hình bên phải ngoài cùng một bản đồ tương tác, hầu hết người sử dụng đều không để ý đến
thanh trượt ngang bởi vì chúng giống như mũi tên chỉ hướng Bắc/Nam cho bản đồ. Ngoài ra:
thanh trượt còn nằm ngoài khu vực điều khiển, mũi tên bên trên và bên dưới giống như điểm
giới hạn và thanh trượt thì không có sự chỉ dẫn.
Sau đây chúng ta sẽ xem một số ví dụ tốt về thiết kế các thanh trượt
Hình 3. 1. 62 Một số thanh trượt được thiết kế tốt
Trong các trường hợp trên, người dùng có thể dễ dàng thấy các thanh trượt và sử dụng
chúng một cách dễ dàng. Căn cứ vào các ví dụ trên chúng ta có thể rút ra các ví dụ về việc thiết
kế các thanh trượt tốt đó là
i. Sử dụng một thanh trượt rõ ràng và tách hẳn so với phần nền còn lại, ví dụ như sử dụng
mầu sắc.
ii. Sử dụng các mũi tên bên trên và bên dưới
iii. Sử dụng các con trỏ trượt để người dùng có thể ước lượng được dung lượng của thực
đơn
iv. Cho phép người dùng cuộn bằng nhiều cách khác nhau, ví dụ như chuột, con trỏ trượt,
sử dụng mũi tên...
6. Lỗi do thể hiện mầu sắc : Nhiều khi, trong một chương trình, nếu màu sắc không phù hợp sẽ
khiến người dùng gặp phải khó khăn. Chẳng hạn như chương trình Paint Shop Pro, menu của
chương trình này có màu quá xám nên dễ làm người sử dụng nhầm lẫn. Như chúng ta đã biết
mầu sắc là một trong những yếu tố quan trọng trong việc thu hút thị giác của con người. Khi
mắt chúng ta chưa thể nhìn toàn bộ hình ảnh thì mầu sắc đóng vai trò quan trọng để nhận biết
được các hình ảnh và đường nét. Ví dụ như trong các biển báo cảnh cáo hay nguy hiểm thì
mầu đỏ luôn được sử dụng.
138
Hình 3. 1. 63 Bố trí mầu sắc không hợp lý
Tuy nhiên nếu như trong các chương trình chỉ sử dụng mầu sắc thì cũng sẽ không hiệu
quả đặc biệt đối với những người mù mầu. Sau đây chúng ta sẽ xem xét vấn đề này một cách kĩ
càng hơn. Mù mầu là vấn đề của một số người khi không có khả năng phân biệt mầu sắc ở nhiều
cấp độ khác nhau. Cụ thể có ba loại khác nhau là không phân biệt được mầu sắc, độ sáng và độ
quá đậm của mầu sắc. Mù mầu gây ra một số sự bối rối nhất định trong quá trình tương tác với
máy tính, khi người dùng không thể phân biệt được các điểm cần lưu ý mà có sử dụng mầu sắc.
Để tránh tình trạng trên, người thiết kế phải tránh các giao diện chỉ sử dụng mầu sắc, phải sử
dụng thêm các công cụ hỗ trợ khác nữa. Nếu như không có cách nào khác khi chỉ sử dụng mầu
sắc thì chúng ta phải làm tăng tính tương phản của các mầu sắc lên. Mầu sắc rất dễ nhận biết
thông qua độ tương phản của chúng. Màu xanh đậm và đỏ đậm dễ phân biệt hơn là mầu xanh và
đỏ có cùng độ sáng. Độ tương phản càng cao, mầu sắc càng dễ thể hiện.
7. Duyệt file PDF trực tiếp : Người dùng rất ghét khi thao tác trên các file PDF một cách trực
tuyến bởi vì có sự gián đoạn nhất định trong quá trình chuyển các trang. Và trong nhiều các
trường hợp thì máy in hay các file lưu cũng không hoạt động do lỗi xuất hiện trong các câu
lệnh. Cách bố cục thường xuyên được làm tối ưu cho khuôn khổ trong một trang giấy và rất
hiếm khi phù hợp với cửa sổ của người dùng. Tệ hại nhất đó chính là do các file PDF có các
nội dung không được bố trị dễ nhìn do vậy rất khó khăn cho người dùng trong quá trình định
hướng. Các file PDF rất tiện ích trong việc in và phân phát các bản viết tay. Việc lưu các file
cho mục đích này và chuyển bất kỳ thông tin nào lên các trang mạng.
8. Không thay đổi mầu sắc đối với các đường dẫn đã ấn : Việc nắm được các đường đi cũ có thể
giúp chúng ta trong việc định hướng ở hiện tại. Biết được các thông tin cũ và hiển thị các
thông tin hiện tại làm cho sự quyết định kế tiếp được dễ dàng hơn. Các đường dẫn là một
trong những yếu tố quan trọng trong việc định vị. Người dùng có thể loại trừ các đường dẫn
mà không mang lại nhiều giá trị trong quá trình tìm kiếm trước đó. Ngược lại, người dùng có
thể duyệt lại các đường dẫn mà đã mạng lại nhiều thông tin trong quá trình tìm kiếm trước đó.
139
Hình 3. 1. 64 Lỗi mầu sắc của các đường dẫn
Nhưng điều quan trọng nhất chính là tránh cho người dùng khỏi lãng phí thời gian khi
liên tục duyệt một đường dẫn lặp đi lặp lại. Lợi ích được đề cập trên chỉ có khi có một giả định
sau đây: người dùng có thể nhận ra các đường dẫn đã duyệt và chưa duyệt thông qua mầu sắc gắn
trên các đường dẫn. Khi mà các đường dẫn không thay đổi mầu sắc, người dùng cảm thấy mất
phương hướng nhiều hơn trong quá trình tìm kiếm và có thể thặm lại các đường dẫn một cách
liên tục.
9. Mọi thứ đều giống như một quảng cáo : Thu hút lựa chọn là một tính năng rất có hữu dụng,
và người sử dụng Web luôn tìm cách lảng tránh đối với những thông tin không cần thiết trong
quá trình tương tác. Thật không may, người sử dụng cũng không để ý đối với các thiết kế hợp
lệ và có giá trị như các mẫu của việc quảng cáo. Sau đó, khi mà người dùng bỏ qua một cái gì
đó, người dùng sẽ không xem xét một cách chi tiết đó là cái gì.
Bởi vậy cần phải tránh tất cả các thiết kế mà giống như trang quảng cáo. Các ngụ ý chính
xác của các hướng dẫn thường biến đổi với các dạng khác nhau, thường tuân theo các quy tắc sau
i. Mất thị giác có nghĩa là người sử dụng không bao giờ dán con mắt vào bất cứ thứ gì
giống như là những điều rất quan trọng bởi vì các yếu tố như hình dáng hay vị trí trên
trang.
ii. Không sử dụng các hình động sẽ làm cho người sử dụng bỏ qua các phần trong nháy
mắt hay các đoạn chữ sáng hay các hình động ấn tượng khác.
iii. Lọc từ dưới lên có nghĩa là đóng các cửa sổ kéo lên trước khi chúng có thể được thực
hiện
10. Màn hình với quá nhiều chữ : Màn hình với quá nhiều chữ làm giảm đi hiệu quả trong quá
trình tương tác. Để làm tăng hiệu quả chúng ta nên tuân theo một số các quy tắc sau :
i. Phân chia các mục con
ii. Sử dụng các dấu chấm (bullet)
iii. Làm nổi các từ khóa
iv. Các đoạn ngắn
140
v. Lối viết đơn giản
11. Lỗi trong cách bố trí chương trình : Trong bất kỳ một chương trình nào thì người dùng đều
mong muốn nhìn thấy một cách tổng thể các vấn đề cần quan tâm. Người sử dụng thường
không muốn nhìn các vấn đề một cách tuần tự, điều đó làm cản trở người dùng trong quá
trình tương tác. Người dùng luôn cảm thấy không thoải mái khi không thể làm chủ được
chương trình và băn khoăn tự hỏi không biết mình làm có đúng hay không, hay liệu còn cách
lựa chọn nào tốt hơn hay không?
Hình 3. 1. 65 Lỗi trong cách bố trí chương
Sau đây chúng ta sẽ nhìn hai cách bố trí trong chương trình có tác dụng hoàn toàn khác
nhau, chương trình đầu tiên có thực đơn dạng kéo chuột đến đâu thì hiện ra đến đấy, chương trình
thứ hai cung cấp cho người dùng cái nhìn toàn diện hơn về các lựa chọn.
Hình 3. 1. 66 Lỗi được khắc phục
Lỗi khi thiết kế menu của chương trình Macintosh Guidelines : Như ta thấy, thanh menu
của chương trình này rất ít chức năng, khoảng trống trên thanh menu còn rất nhiều, vì vậy ta
không nên làm menu con. Khi đó ta nên tách menu Format thành 3 menu Font, Size, Style như
hình sau
141
Hình 3. 1. 67 Lỗi trong thiết kế thực đơn
Hình 3. 1. 68 Lỗi được khắc phục
Như ta thấy, thanh menu của chương trình này rất ít chức năng, khoảng trống trên thanh
menu còn rất nhiều, vì vậy ta không nên làm menu con. Khi đó ta nên tách menu Format thành 3
menu Font, Size, Style như hình trên.
12. Quá trình tìm kiếm nghèo nàn : Quá trình tìm kiếm bằng chữ làm giảm đi dáng kể tính hữu
dụng bởi vì sự yếu kém trong các vấn đề về ngôn ngữ như số nhiều, dấu nối, từ thích hợp, lỗi
in ấn và cuối cùng là các dòng chữ yêu cầu. Cách tìm kiếm như vậy gây rất nhiều khó khăn
cho người già và gây trở ngại đối với những người khác. Một vấn đề liên quan trong quá trình
tìm kiếm đó là các kết quả thường nghèo nàn và mang tính số lượng chứ không có được chất
lượng cần thiết. Quá trình tìm kiếm lý tưởng đó chính là các mục yêu cầu quan trọng nhất
được hiển thị ngay lên trên đầu, đặc biệt đối với những yêu cầu quan trọng ví dụ như là tên
của các hãng sản phẩm. Tìm kiếm là một sự trợ giúp khi mà việc xác định phương hướng là
không thể. Các sự trợ giúp tìm kiếm có thể giúp cho một số quá trình tìm kiếm đơn giản được
thực hiện và quá trình tìm kiếm nên được trình diễn trên các hộp đơn khi mà người sử dụng
đang tìm kiếm.
Hơn nữa các kết quả tìm kiếm đều cho thấy đều rất nghèo nàn và thậm chí chẳng liên
quan gì đến nội dụng cần tìm. Quá trình tìm kiếm hiệu quả thì yêu cầu cần phải có sự đầu tư đúng
mức.
13. Lỗi không nhất quán : Đồ họa thường có vấn đề về tính nhất quán trong quá trình thiết kế.
Các cách thiết kế khác nhau và cách sử dụng từ ngữ khác nhau đối với cùng một vấn đề là
nguyên nhân chủ yếu. Hay sử dụng một từ giống nhau đối với các nhiệm vụ khác nhau. Do
142
vậy việc sử dụng các tên giống nhau đối với các nhiệm vụ như nhau làm cho sự việc trở nên
dễ dàng hơn.
Hình 3. 1. 69 Sự không nhất quán trong bố cục
14. Các lỗi trong quá trình đăng nhập :
a) Đăng nhập tại vị trí đầu tiên Trong hầu hết các trang mạng hiện nay, người dùng có thể
làm bất cứ việc gì mà không cần xác định danh tính. Cách tiếp cận lý tưởng đó chính là
các trang Web phải biết được khách hàng là ai để có thể đưa ra các thông tin phù hợp.
Người dùng thường không thích phải tạo nên tài khoản cho các nhiên vụ đơn giản. Tất
nhiên trong quá trình giao dịch người dùng phải có tên nhưng không nhất thiết là phải có
tài khoản và mật mã mới thực hiện được giao dịch.
b) Yêu cầu đăng nhập quá sớm Một số các trang Web yêu cầu người dùng đăng nhập thông
tin trước khi nhin thấy sản phẩm. Nếu như quá trình đăng nhập diễn ra chậm hơn hoặc là
sau các đường dẫn như “mời bạn đăng nhập để mua sản phẩm” thì người dùng sẽ cảm
thấy bớt khó chịu hơn. Amazon đã tạo nên một tập các quy tắc chuản bằng việc đợi đến
khi nào lựa chọn cuối cùng được thực hiện để yêu cầu đăng nhập. Việc chọn vào “My
Account” sẽ giúp cho người dùng có thể thấy được toàn bộ các sản phẩm của chúng trước
khi lựa chọn. Trong một số trường hợp việc đăng nhập là không cần thiết thay vào đó việc
có một thẻ làm việc cũng mang lại hiệu quả cần thiết.
c) Gánh nặng của việc đăng ký lại Việc đăng ký luôn mang đến cho người dùng sự
không thoải mái. Họ phải trả lời nhiều câu hỏi mà nhiều trong số chúng không liên quan
đến nhiệm vụ hiện tại. Ngoài ra họ còn phải nhớ đến tên đăng nhập trong các lần sau và
phải chọn mật khẩu dễ nhớ. Số lượng tên và mật khẩu có thể gánh nặng cho người dùng
nếu như số lượng các giao dịch là lớn… Các thông tin mật cũng có thể bị phát tán trên
mạng.
d) Nút đăng nhập không hiển thị rõ ràng Thông thưòng người dùng có thể truy nhập
trực tiếp các trang cần làm việc cũng như nhìn thấy các thông tin của mình và các trạng
thái. Tuy nhiên khi mà không có thẻ làm việc và họ truy cập trên nhiều dịch vụ trên nhiều
máy khác nhau thì họ phải đăng nhập. Thông tin của các sản phẩm cần được hiển thị rõ
ràng đồng thời nút đăng nhập cũng cần phải hiển thị rõ ràng. Tuy nhiên các nút này
143
thường xuyên bị mờ đi hoặc không thể làm rõ. Có một số cải tiến về mầu sắc để giúp cho
sự nhận biết được dễ dàng.
e) Yêu cần quá nhiều thông tin của người dùng Việc yêu cầu nhiều thông tin mang
đến sự không thoải mái cả về tâm lý và kỹ thuật. Khi mà người dùng liên tục bị hỏi các
câu hỏi không thích và bắt buộc phải trả lời. Hơn nữa việc nhập nhiều thông tin cũng có
thể mắc nhiều lỗi hơn và quá trình dò tìm lỗi cũng phức tạp hơn.
f) Người dùng không biết các thông tin nên được sử dụng như nào Các thông tin như số
điện thoại hay địa chỉ nhà luôn là điều băn khoăn của người dùng khi muốn tải chương
trình về máy. Nên cần có thông báo cụ thể cho các thông tin của người dùng như là các
dịch vụ cung ứng vé máy bay thông báo số điện thoại của khách hàng là cần thiết khi có
sự thay đổi.
15. Các đường dẫn không có quy tắc chuẩn
Thông thường các đường dẫn thường gặp phải những vấn đề sau đây:
a. Sự không rõ ràng khi thể hiện đường dẫn này có mục đích gì, các đoạn chữ,
mầu sắc, các đoạn gạch chân không làm nổi bật lên được các thông tin bên
trong.
b. Không có sự khác nhau giữa các đường dẫn đã thăm hay không
Không thông báo cho người dùng biết được sẽ thu được những gì khi vào đường dẫn.
Đồng thời không cung cấp một số từ khóa để có thể làm nổi bật nội dung cũng như định hướng
cho quá trình tìm kiếm được tốt hơn như việc sử dụng các đường dẫn như “click here” hay các
đường dẫn không có sự mô tả cần thiết.
a. Sử dụng các đoạn Java hay các công nghệ khác làm chậm lại quá trình tương tác
b. Các đường dẫn mới yêu cầu phải mở ra các cửa sổ mới.
Việc mắc phải các lỗi trên làm cho quá trình tương tác kém đi hiệu quả, đồng thời cũng
làm cho người dùng cảm thấy bối rối và khó chịu, trong khi đó thời gian trễ tăng lên và ngăn cản
người sử dụng có thể sử dụng các đường dẫn của họ.
16. Thông tin quá tải trên các mẫu điền Người dùng khi sử dụng các trang Web thường gặp phải
những vấn đề như sau:
a) Quá nhiều câu hỏi không cần thiết, ví dụ như hỏi về tình trạng hôn nhân
Miss hay Mrs...
b) Quá nhiều các thông tin cần phải điền mặc dù không cần thiết
c) Không hỗ trợ nhiều cho tính tự động lựa chọn
d) Các trưòng dữ liệu thường được đặc tả nên không cho phép tính đa dạng
trong kiểu của trường.
144
17. Lỗi về kích cỡ của các trang : Có hai vấn đề thường xuyên gặp phải trong vấn đề này là như
sau
a. Đối với các màn hình lớn, các trang Web khó sử dụng nếu như chúng ta không giới
hạn lại kích cỡ của cửa sổ. Ngược lại nếu như người dùng sử dụng một cửa sổ cỡ nhỏ
và không thể điều chỉnh được thì sẽ rất khó trong quá trình sử dụng.
b. Các phần phía bên phải thường xuyên bị lược bỏ đi khi chúng ta in ấn, đặc biệt khi sử
dụng các khổ giấy A4.
18. Các ô dữ liệu nhập quá dài: Việc chia các dữ liệu nhập vào thành nhiều các ô đồng nghĩa với
việc phải thao tác với con chuột nhiều hơn. Đồng thời chỉ có một ô để nhập dữ liệu cũng
không làm tăng tốc độ nhập. Cách lựa chọn tối ưu đó chính là các trường nhập nên được phân
chia vừa đủ để tiện cho quá trình tương tác.
Việc nhập các thông tin quá dài cũng đồng thời gây nên nhiều lỗi cho người dùng như
việc nhâp vào số thẻ ATM 12356845445674456 nếu như có sự phân chia thành các ô hay sử
dụng các dấu ngoặc đơn thì có thể giúp cho người dùng có thể kiểm tra được lỗi trong quá trình
nhập liệu.
19. Các hình ảnh và chữ quá nhỏ : Một số các trang Web thu gọn hình ảnh từ các hình ảnh to.
Như vậy vô tình có thể mất đi một số thông tin quan trọng trong hình ảnh ban đầu. Hơn nữa
các hình ảnh ban đầu đều đã có rất nhiều các thông tin trong đó như số người, các yếu tố sắc
nét....
Hình 3. 1. 70 Thật khó để phân biệt các hình ảnh trên
Các trang Web mặc định cỡ của phông chữ và không cho phép chỉnh sửa các phông đó.
Khoảng 95% thời gian sử dụng thì cỡ phông chữ là nhỏ, làm giảm đi tính dễ đọc đối với hầu hết
những người trên 40 tuổi.
Quan tâm tới sự ưa thích của người dùng và để cho họ có nhu cầu thay đổi lại phông nếu
thấy cần thiết.
3. 2. Thiết kế một giao diện cụ thể
Sau đây chúng ta sẽ xem xét các vấn đề cụ thể khi chúng ta thiết kế một giao diện cụ thể.
Sau đây tôi xin giới thiệu trang Web do tôi thiết lập để minh họa một số vấn đề mà tôi đã nêu
trong các phần trước. Trang Web nói lên những mảnh đời bất hạnh trong cuộc sống. Trang Web
bao gồm có bảy phần: trang chủ, các địa chỉ khó khăn, đóng góp, tìm kiếm, những tấm lòng nhân
ái, liên hệ, diễn đàn Trong đó nội dung của các phần là như sau:
145
1. Trang chủ là trang chính của trang Web, trong đó nói lên các hình ảnh, hoạt động của hội
(nằm ở bên trái) và các tấm lòng nhân ái hảo tâm đóng góp giúp đỡ người nghèo. Trong mỗi
phần thì đều có hình ảnh bên trái, đó là hình ảnh tiêu biểu của bài viết. Bên phải của mỗi hình
ảnh là nội dung của bài viết. Nội dung của các bài viết đã bị thu gọn, người dùng có thể ấn
trực tiếp vào đường dẫn hoặc là kích vào nút xem thêm để xem toàn bộ nội dụng
2. Trang tiếp theo đó chính là các địa chỉ khó khăn. Cách thức truy cập trang này bao gồm có
các thực đơn kéo xuống. Trong đó các thực đơn được phân chia làm các vùng miền địa chỉ
trên cả nước. Khi người sử dụng chọn một địa chỉ khó khăn thì lúc đó sẽ hiện ra một loạt các
hình ảnh và bài viết địa chỉ khó khăn. Khi người sử dụng chọn ảnh Album thì toàn bộ hình
ảnh của địa chỉ khó khăn sẽ hiện ra. Nếu người dùng chọn một ảnh nào đó thì ảnh đó sẽ được
phóng to ở bên trái, bao gồm các hình ảnh và hoàn cảnh của những mảnh đời bất hạnh để mọi
người có thể nhìn thấy. Cách bố cục trong trang này bao gồm có một số các tập ảnh, tuy nhiên
khi xuất hiện thì chỉ có một ảnh làm đặc trưng. Nếu người dùng muốn nhìn thấy toàn bộ tập
ảnh thì có thể chọn vào đường dẫn album ở phía dưới để có thể hiển thị toàn bộ hình ảnh. Bên
phải của ảnh đó là những phần miêu tả những hoàn cảnh khó khăn, trong đó nêu lên hoàn
cảnh gia đình, cuộc sống hiện tại, sự khó khăn trong cuộc sống mưu sinh và địa chỉ.
3. Trang tiếp theo đó chính là trang đóng góp để giúp những tấm lòng hảo tâm có thể có những
hình thức hỗ trợ. Có một số loại hình hỗ trợ mà người dùng có thể chọn lựa cho phù hợp nhất
với khả năng của mình. Trong trang này có cung cấp một số sự hỗ trợ để người dùng có thể
tránh được các sai lầm có thể có. Các trường yêu cầu bao gồm có Họ và tên, ngày tháng năm
sinh, địa chỉ và hình thức đóng góp. Mỗi một trường đều có cách đăng ký khác nhau.
4. Trang tiếp theo đó chính là trang những tấm lòng nhân ái. Trang này bao gồm có các thực
đơn được thiết kế lồng nhau, có phân chia danh mục để người dùng có thể dễ dàng tìm đến
danh mục cần tìm,
5. Trang tiếp theo đó chính là trang tìm kiếm. Trang này sẽ tìm kiếm theo hình ảnh và hoạt
động. Từ khóa được yêu cầu để quá trình tìm kiếm được dễ dàng hơn. Ngoài ra còn thêm các
ngày tháng để bổ trợ cho quá trình tìm kiếm.
6. Trang tiếp theo đó chính là trang diễn đàn. Trong trang này cũng có một thực đơn kéo xuống,
bao gồm có các phần: đăng ký, thảo luận, trao đổi, đóng góp ý kiến, chia sẻ và các hoạt động.
Trang đăng ký dưới dạng các mẫu điền có hỗ trợ thông báo lỗi nếu người dùng nhập sai.
7. Trang cuối cùng là trang liên hệ, giúp cho người sử dụng có thể liên hệ với các chủ của trang
Web. Trong đó có nêu lên một số các thông tin cần thiết.
Sau đây là một số ứng dụng vào cách thiết kế cho các trang trong trang những mảnh đởi
bất hạnh.
3. 2. 1. Cách thiết kế cho trang chủ
146
Thứ nhất, lựa chọn cách hiển thị thông tin một cách đa dạng nhất có thể trong khi không
thể đưa quá nhiều thông tin lên trên màn hình, tức là chúng ta phải thiết kế một cách nào đó để
sao cho người dùng khi có thể thu nhận được nhiều nhất thông tin có thể, cách thể hiện ở đây có
thể sử dụng các mầu sắc, hình ảnh, âm thanh, chữ viết và các cách bố cục trên đó. Các hình ảnh
và chữ viết phải mang lại nhiều nhất các thông tin có thể, bởi vì đây chính là hai yếu tố mạnh mẽ
nhất để mang thông tin đến cho người sử dụng máy tính. Một điều chúng ta có thể dễ dàng nhận
ra đó chính là các thông tin mang tính trừu tương rất khó để có thể biểu đạt với một cách duy nhất
ví dụ như hình ảnh hay chữ mà thay vào đó phải có sự kết hợp cả hai... Do vậy cần có sự kết hợp
theo nhiều cách khác nhau để biểu đạt các thông tin mang tính trừu tượng, điều đó mang lại sự
hiệu quả to lớn hay đó là phối hợp hoạt động của bán cầu não trái và bán cầu não phải.
Trước hết ta có thể thấy được rằng, mầu sắc là yếu tố quan trọng nhất để thu hút thị giác,
đặc biệt là mầu đỏ. Nội dung chính của tiêu đề cần đựoc hiển thị một cách rõ ràng nhất có thể.
Hơn nữa chữ viết đỏ càng nổi bật hơn nếu như có độ tương phản nhất định đối với phông nền, do
vậy có tác dụng mạnh mẽ trong việc chuyển các thông điệp đến cho người sử dụng.
Thứ hai, như ta đã thấy ở trên, hình ảnh và chữ viết có mối quan hệ với nhau trong quá
trình xử lý thông tin khi mà cả hai đều cùng mang đến một thông điệp giống nhau. Dòng chữ
“Những mảnh đời bất hạnh” và ba hình ảnh phía dưới có sự phù hợp nhất định đối với nhau. Các
hình ảnh ở dưới sẽ thể hiện tất cả những gì có thể có khi người dùng đọc được dòng chữ ở phía
trên. Đây là điều quan trọng nhất khi thiết kế cho trang Web này, do vậy hai phần trên được đặt
gân nhau để tăng sự tương tác đối với người dùng và thu hút được thị giác nhất.
Hình 3. 2. 1 Giao diện của trang chủ
147
Thứ ba, hình ảnh ba chiều là yếu tố thu hút thi giác rất tốt. Đối với dòng chữ thì do có
phông đen và chữ đỏ nên đã làm nổi bật lên dòng chữ ngay lập tức. Trong khi đó thì hình ảnh ba
chiều có sự thu hút thị giác đặc biệt nên các hình ảnh ba chiều được bố trí trong trang Web, đặc
biệt là hình ảnh ở bên trái ngoài cùng và hình ảnh ở giữa do con người trong quá trình đọc sẽ đọc
từ trái sang phải. Tuy nhiên việc bố trí số lượng hình ảnh ba chiều không được quá nhiều vì điều
đó có thể làm nhiễu loạn thị giác. Tóm lại đối với phần tiêu đề thì làm nổi bật lên chữ và bố trí
cho hình ảnh ba chiều là vấn đề quan trọng nhất.
Tiếp theo, chúng ta có thể thấy được rằng, việc thiết kế thanh thực đơn nằm ngay phía
dưới. Trong đó các mầu chữ và phông nền có độ tương phản nhất định sẽ giúp làm nổi bật lên các
vị trí trong thanh thực đơn. Sau đó dưới là một vị trí để người dùng có thể tìm kiếm được các
thông tin ở trên mạng. Bên cạnh đó là hình kính lúp giúp cho người sử dụng
Hình 3. 2. 2 Thanh công cụ tìm kiếm trên mạng
Cuối cùng, chúng ta sẽ xem xét nội dung của trang chủ. Như đã trình bày ở trên, bộ nhớ
ngắn hạn của con người chỉ có khả năng nhớ từ 5 đến 9 ký tự. Do vậy việc đưa vào quá nhiều
danh mục cũng mang đến một sự quá tải đối với người dùng, thay vào đó nên tổ chức thành các
phần có liên quan đến nhau, để giao diện có sự thống nhất nhất định đối với người dùng. Hơn nữa
trong quá trình thao tác với trang chủ, hình ảnh và các tiêu đề bên luôn luôn có sự hỗ trợ cho
nhau nhất định. Hình ảnh bên trái phải thể hiện rõ ràng nhất những gì có thể bên trong nội dung
của bài viết. Cách thức tổ chức như vậy phải xuyên suốt trong quá trình thiết kế để đảm bảo tính
nhất quán.
Cố gắng hiển thị tất cả các thông tin liên quan một cách đồng thời. Quá trình tìm kiếm thị
giác sẽ đạt hiệu quả cao nếu như các thông tin liên quan được hiển thị đồng thời ngay cả đối với
những trường hợp có giao diện phức tạp. Nếu như các thông tin liên quan được hiển thị một cách
không đồng thời trên các hình khác nhau quá trình tương tác sẽ suy giảm đáng kể. Với việc bố trí
giao diện một cách hợp lý thì giao diện có thể mang lại nhiều thông tin hơn so với cách nhận biết
một cách thông thường.
3. 2. 2. Cách thiết kế cho trang các địa chỉ khó khăn
Trước hết chúng ta xem xét cách thức bố cục của thực đơn trong trang các địa chỉ khó
khăn. Như chúng ta đã biết thực đơn nếu được bố trí phân cấp theo chức năng thì người dùng
thao tác sẽ rất có hiệu quả. Các địa chỉ khó khăn được phân chia ra làm ba vùng: Bắc, Trung,
Nam. Sau đó trong mỗi vùng thì lại phân chia làm hai: các vùng cao và đồng bằng. Trong mỗi
vùng thì lại có tên các tỉnh tương ứng. Cách thức tổ chức như vậy giúp cho người sử dụng dễ
dàng định vị được các tỉnh trong thanh thực đơn, qua đó làm giảm thời gian tương tác với thực
đơn như mất phương hướng hay nhầm lẫn. Trong quá trình tìm kiếm khi con trỏ chuột chạy đến
đâu sẽ có một vệt xám chạy theo cùng thanh thực đơn để báo cho người dùng biết được đang ở
148
đâu của thanh thực đơn. Ví dụ dưới đây minh họa cho thấy nếu như người dùng muốn tìm kiếm
các địa chỉ khó khăn tại Lạng Sơn.
Hình 3. 2. 3 Giao diện của thực đơn các địa chỉ khó khăn
Cách tổ chức của trang này cũng gần giống tương tự với cách thức tổ chức ở trên khi mà
mầu sắc, bố cục và sự nhất quán vẫn là một trong những cách thức chủ đạo để có thể thiết kế
được một giao diện tốt. Tuy nhiên mục đích của phần này có khác so với trước nên cách thức tổ
chức cũng có sự khác nhau. Trong phần này nhằm mục đích kêu gọi các tấm lòng hảo tâm, do
vậy phải làm nổi bật lên sự khó khăn đó. Không có gì diễn tả tốt hơn bằng một hình ảnh to và rõ
ràng của các trường hợp bất hạnh. Những cảnh thương tâm như vậy có sự thuyết phục đáng kể
trong việc động viên mọi người giúp đỡ các hoàn cảnh khó khăn. Các đường dẫn được tô mầu
xanh cũng có tác dụng đáng kể trong việc giúp người dùng dễ nhận ra vị trí để có thể tiếp tục đọc
được trọn vẹn bài.
Nội dung của trang được bố trí theo cách hình ảnh đại diện nằm ở bên phải. Phía bên dưới
của ảnh có nút Album để người dùng có thể xem xét toàn bộ tập ảnh của hoàn cảnh bất hạnh đó.
Bên dưới các dòng chữ có đường dẫn để người dùng có thể xem toàn bộ nội dung của bài viết.
Hai đường dẫn được thiết kế vị trí rõ ràng để người dùng có thể nhìn thấy dễ dàng. Hình dưới đây
là giao diện của các địa chỉ khó khăn.
Hình 3. 2. 4 Giao diện của trang các địa chỉ khó khăn
149
Trong mỗi phần đều có một tập các ảnh để người sử dụng có thể hiển thị toàn bộ các ảnh.
Một tập các ảnh con được bố trí phía bên trái. Các hình ảnh tương đồng sẽ được hiển thị bên
phải.được phóng to hơn. Cách bố trí như vậy giúp cho người sử dụng có được cái nhìn toàn cảnh
về tất cả những hình ảnh đang có trong Album và có thể bỏ qua một số các hình ảnh không cần
thiết.
Hình 3. 2. 5 Giao diện của hình ảnh khi được xem
Tiếp theo chúng ta xem nội dung của trang địa chỉ khó khăn. Cách bố trí của trang các địa
chỉ khó khăn phải đảm bảo tính sang sủa và dễ đọc để người dùng có thể đọc có thể dễ dàng đọc
được nhất có thể. Các vấn đề liên quan đó chính là tỉ lệ phông chữ và cách bố cục khoảng không
giữa các chữ. Tỷ lệ font chữ tiết kiệm được không gian và dễ đọc hơn so với các font chữ có tỷ lệ
cố định. Kích cỡ của font là một trong những vấn đề cần phải xem xét. Thông thường thì 10 pt là
có thể đọc được, 11 pt và 12 pt thì có thể đọc được tốt hơn. Sự khác biệt giữa các font size ít nhất
phải là 2 pt, nếu nhỏ hơn thì mắt thường không thể phân biệt được. Sau đây chúng ta sẽ xem xét
một số ví dụ cụ thể sau:
a. 12 pt dành cho các đoạn văn hội thoại
150
b. 10 pt dành cho các ký hiệu
c. 14 pt dành cho các đoạn tiêu đề
d. 16 pt hay lớn hơn dành cho các mục lục hay tiêu đề lớn
Chữ viết hoa và viết thường: sử dụng cả chữ viết hoa và viết thường có tác dụng tốt hơn
so với chỉ dùng riêng chữ hoa. Một trong những vấn đề cơ bản đó chính là việc nhận dạng chữ
viết thường dựa rất nhiều vào hình dáng của chúng. Các chữ viết thường không có hình dáng cố
định như là trong chế độ viết hoa, do vậy việc nhận biết các chữ thường cũng thường dễ dàng
hơn. Ví dụ như sau SHAPE khó đọc hơn so với shape...
Ký tự, chữ và khoảng cách dòng: Khoảng cách ký tự phụ thuộc rất lớn vào font, thông thường
các phông khác nhau sẽ có khoảng cách khác nhau. Khoảng cách của các chữ thì xấp xỉ với
độ rộng của chữ n. Sau đây chúng ta sẽ thấy có một số cách viết mà khoảng cách là khác
nhau
Word spacing : khoảng cách hẹp
Word spacing : khoảng cách bằng chữ n
Word spacing : khoảng cách bằng chữ m
Khoảng cách của các dòng là rất quan trọng. Quá nhiều không gian và dòng cách xa nhau
có thể tạo ra cảm giác không có sự gắn kết. Quá ít không gian và dòng làm cho đoạn text trở nên
khó đọc một cách thoải mái. Ngày nay các phần mềm soạn thảo văn bản đều có các chế độ cho
phép thiết lập khoảng cách cho các dòng sao cho phù hợp. Khoảng cách dòng quá ngắn hay quá
dài đều rất khó khăn cho người đọc.
Hình 3. 2. 6 Nội dung chữ của trang các địa chỉ khó khăn.
151
Độ dài của dòng: Thông thường thì người ta quy định là 10 chữ (60 ký tự) cho mỗi dòng
trong một quyển sách, 5 chữ (30 chữ) cho mỗi dòng trong một tờ báo. Nếu như một dòng quá
dài, người đọc có thể rất khó khăn trong việc tìm kiếm đâu là bắt đầu cho đoạn dòng tiếp
theo.
Ngoài ra chúng ta cũng nên sử dụng các bảng dữ liệu để giúp cho việc định dạng và xác
định các vị trí được dễ dàng nhờ có việc đảm bảo tính nhất quán. Hơn nữa việc căn lề trái và lề
phải cũng giúp cho việc đọc các đoạn văn bản trở nên dễ dàng và thuận tiện hơn.
Cách thể hiện phông chữ: Đây chính là kiểu dáng và giao diện của phông chữ. Thông thường
cỡ phông chữ được thể hiện thông qua các printers’ point (pt)
1 pt = 1 / 72 inch = 0. 35 mm
1 pica = 1/6 inch = 4. 2 mm
Tiếp theo sẽ là kiểu chữ có móc và kiểu chữ không có móc và chữ có móc là một kiểu
trang trí hoặc tô điểm vào đằng cuối của mỗi nét chữ. Ví dụ như T, đây là kiểu chữ của hai phông
nền Times New Roman và Georgia... , chữ không có móc không có các đường nét trang trí vào
đằng cuối của nét chữ. Ví dụ như T, các phông chữ như Arial, Helvetical và Verdana là các
phông thuộc kiểu này. Thông thường đọc các đoạn viết trên giấy thì chữ có móc dễ đọc hơn chữ
không có móc tuy nhiên điều này vẫn chưa được kiểm chứng một cách rõ ràng.
3. 2. 3. Cách thiết kế cho trang đóng góp
Hình 3. 2. 7 Giao diện trang đóng góp
Đây là trang mà những nhà hảo tâm có thể đăng ký theo một mẫu điền sẵn để có thể đăng
ký tên mình, cũng như các thông tin liên quan như năm sinh cũng như địa điểm nơi ở và hình
thức đóng góp. Trong phần này thì nhập ngày tháng năm sinh là một vấn đề phức tạp nhất khi
152
việc điền của người dùng có thể không hợp lệ cũng như nhầm lẫn trong quá trình nhập như ngày
30/2... Do vậy cách tiếp cận ở đây chính là tạo nên một bảng để người dùng có thể chọn bằng
chuột. Khi ô nào đang sang thì tức là ngày tháng năm đó đang được chọn. Nếu như con trỏ chuột
di đến đâu thì các trang ô tương ứng sẽ sang lên đồng thời phía trên ngày tháng tương ứng cũng
được hiện lên. Dưới đây là giao diện của phần nhập ngày tháng năm sinh
Địa điểm của người quyên góp cũng có thể là phần có thể gây nên sự nhầm lẫn, do vậy
cách tổ chức là để người dùng lựa chọn bằng chuột. Những nhà hảo tâm thường là ở hai thành
phố lớn là Hồ Chí Minh và Hà Nội. Do vậy hai thành phố này được xếp trên đầu để làm giảm
thời gian tìm kiếm. Tương tự như vậy, hình thức đóng góp cũng được tổ chức như vậy để giúp
người dùng tránh được các sai sót.
Tiếp theo chúng ta sẽ xem xét đến trường nhập vào địa chỉ của người sử dụng. Do có sự
không nhất quán trong cách gọi tên các vùng miền nên cũng có thể gây nên một sự nhầm lẫn nhất
định ví dụ như Sài Gòn và Thành phố Hồ Chí Minh. Do vậy cách thức tốt nhất đó chính là cung
cấp một hộp combo để cho người dùng có thể lựa chọn được địa điểm của mình. Cách thức bố trí
trong thực đơn đó chính là các địa điểm có nhiều người đóng góp nhất và thường xuyên được
chọn thì sẽ được bố trí lên trên đầu. Trong khi đó thì các vùng miền còn lại sẽ được sắp xếp theo
bảng chữ cái. Với cách bố trí như vậy thì Thành phố Hồ Chí Minh và Hà Nội là hai địa điểm
được xếp ngay tại vị trí đầu tiên, tiếp theo sau đó chính là ĐBSCL. Bắt đầu từ An Giang trở về
sau thì các địa danh được sắp xếp theo vần chữ cái. Việc sắp xếp theo vần sẽ giúp cho người sử
dụng có thể nhanh chóng và dễ dàng chọn được địa điểm của mình mà không mất nhiều thời
gian. Hơn nữa trong quá trình chọn sẽ ước lượng được vị trí cần phải chọn.
Hình 3. 2. 8 Giao diện của trường chọn tỉnh, thành phố
Tiếp theo chúng ta sẽ xem xét đến trường cuối cùng. Đó chính là hình thức quyên góp.
Người dùng có thể cảm thấy bối rối khi mà không biết hình thức quyên góp sẽ là như nào. Thay
153
vào đó chúng ta đưa cho người dùng các lựa chọn để người dùng có thể có những lựa chọn cho
mình. Khi các lựa chọn đến đâu sẽ có một vệt mầu xanh chạy đến đó để giúp cho người dùng xác
định được hình thức lựa chọn. Sau khi tất cả các lựa chọn đã được hoàn tất thì người dùng có thể
có chọn một trong hai nút Đóng góp và Huỷ để tiếp tục thực hiện các thao tác của mình.
Hình 3. 2. 9 Giao diện của trường quyên góp
3. 2. 4. Cách thiết kế cho trang những tấm lòng nhân ái
Trang này nhằm mục đích cung cấp cho người dùng những tấm long nhân ái, những việc
tốt và người tốt giữa đời thường. Tuy nhiên do có rất nhiều lĩnh vực cần thể hiện nên cách tốt
nhất vẫn là phân chia thành các danh mục nhỏ đồng thời đối với mỗi danh mục nhỏ lại phân chia
thành các danh mục nhỏ hơn. Hơn nữa cách bố trí theo chức năng như vậy có thể giúp cho người
tìm kiếm có được một sự định dạng dễ dàng. Sau đây chúng ta sẽ xem xét giao diện thực đơn cho
trang những tấm lòng nhân ái
Hình 3. 2. 10 Giao diện thực đơn của trang những tấm lòng nhân ái
Người dùng có thể lựa chọn các mục thông qua con trỏ chuột khi di chuyển các vệt sang.
Nội dung và cách bố trí của các phần trong thực đơn cũng tương tự như các phần khác.
3. 2. 5. Cách thiết kế trang tìm kiếm
Mục đích của trang này đó chính là tìm kiếm các hình ảnh hay hoạt động trong trang
Web. Người dùng có thể điền các thông tin theo yêu cầu để có thể có được các kết quả như mong
muốn. Yêu cầu tìm kiếm được cung cấp thêm hai phần nhỏ giúp cho người sử dụng đến gần hơn
với các kết quả tìm kiếm. Người dùng có thể lựa chọn một trong hai hình thức bằng cách nháy
chuột vào ô cần tìm. Nếu như phần nào được chọn thì sẽ có một chấm nhỏ hiện lên bên cạnh
phần đã được chọn.
Hình 3. 2. 11 Giao diện trường từ khóa trong trang tìm kiếm
154
Sau đó còn có hai trường khác bao gồm là trường địa điểm và ngày tháng thì cách thức
thiết kế vẫn tuân theo như những gì đã có ở các trường trên. Cả hai trường này đều thiết kế theo
các hộp Combo để tránh được các sai sót từ phía người dùng, đồng thời cũng hỗ trợ để cho quá
trình tìm kiếm trong các trường được nhanh nhất có thể. Trường ngày và tháng được thiết kế để
sao cho người dùng có thể chỉ cần sử dụng chuột để có được các kết quả như mong muốn. Trỏ
chuột chạy đến đâu sẽ có một đốm nhỏ chạy theo đến đó, đồng thời khi chọn ô đó thì kết quả sẽ
hiện ra bên trên. Trường tiếp theo đó chính là trường địa điểm thì các địa điểm hay được sử dụng
sẽ được xếp lên trên đầu tiên, còn các địa điểm tiếp theo thì sẽ được sắp xếp theo vần. Cách làm
như vậy vừa rút ngắn thời gian tìm kiếm cho người dùng vừa tránh được các sai sót có thể có.
3. 2. 6 Cách thiết kế trang diễn đàn
Đây là trang có chức năng để cho mọi người sau khi đã xem qua trang Web có thể đăng
ký làm thành viên hoặc là nơi các thành viên cũ có thể cùng nhau thảo luận trao đổi và chia sẻ.
Thông thường trong phần diễn đàn có rất nhiều các thông tin cũng như các mục khác nhau. Tuy
nhiên chúng ta không thể nào thiết kế danh mục thực đơn quá dài vì như vậy sẽ làm cho người
dung không thể bao quát được hết nội dung của thực đơn hơn nữa thực đơn quá dài có thể làm
mất đi nội dung của các phần dưới. Theo cách bố cục cho trang chủ như hiện nay thì thực đơn sẽ
bao gồm khoảng 5 mục, đó là những mục chung nhất. Con trỏ chuột di chuyển đến đâu thì sẽ có
một vệt sáng di chuyển đến đó.
Hình 3. 2. 12 Giao diện thực đơn cho trang diễn đàn
Tiếp theo chúng ta sẽ xem xét các phần trong trang diễn đàn. Trước hết chúng ta sẽ vào
phần đăng ký trong mục diễn đàn. Phần này có chức năng giúp cho người mới sử dụng trang Web
muốn đăng nhập để có thể trở thành thành viên của diễn đàn. Do vậy cách thiết kế đó chính là
thiết kế thành một mẫu điền để người dung có thể điền các thông tin của mình. Trong đó bao gồm
có các trường sau họ và tên, ngày tháng năm sinh, địa chỉ và hộp thư. Cuối cùng là phần khả
năng, đây là một dạng thực đơn có nhiều lựa chọn cùng một lúc. Người dùng căn cứ vào khả
năng của mình có thể chọn một hay đồng thời một vài lựa chọn cùng một lúc.
155
Các trường họ và tên, địa chỉ và hộp thư là các đoạn chữ nên người dung phải nhập từ bàn
phím. Trường ngày tháng năm sinh vẫn được thiết kế như trên để đảm bảo tránh sai sót cho người
dùng. Đối với mỗi trường mà yêu cầu người dung nhập từ bàn phím thì nếu như người dùng
không nhập hay nhập sai thì sẽ có một dòng thông báo lỗi bên cạnh để nhắc nhở người sử dụng.
Nếu như không có thông báo nào thì quá trình nhập của người dùng là chính xác. Dòng chữ
thông báo được thiết kế mầu đỏ nằm ngay bên cạnh trường không có sự chính xác trong quá trình
nhập để người dung có thể xác định nhanh chóng lỗi cần tìm trong quá trình nhập. Thông báo có
thể hiện lên bất cứ nơi nào nếu như trường đó không thỏa mãn. Nếu như có hai trường không
thoả mãn thì có thể hiện lên đồng thời cả hai thông báo.
Hình 3. 2. 13. Giao diện của trang đăng ký thành viên.
Tiếp theo đó là phần thảo luận. Nội dung của trang thảo luận được bố trí thành các mục
tin, trong đó có hình ảnh và nội dung của bài viết. Nếu như người dung muốn vào thảo luận một
vấn đề nào đó thì có thể ấn vào đường dẫn hoặc vào đường dẫn xem thêm để có thể hiện lên toàn
bộ nội dung của trang cần hiện.
156
Hình 3. 2. 14 Giao diện của trang thảo luận
Sau đó nếu như người dung ấn vào một đường dẫn nào đó thì toàn bộ thông tin chi tiết
của bài đó sẽ được hiện ra. Cùng với nội dung của bài viết đó thì toàn bộ các lời bình luận hay
góp ý của trang đó cũng sẽ được hiện ra ở phía dưới. Các lời bình luận được sắp xếp theo thứ tự
từ cũ đến mới để giúp cho người sử dụng có thể theo dõi một cách dễ dàng và nhất quán những
lời bình luận. Ngoài ra trong phần nội dung của trang thì có một số phần có sự liên kết đối với
các trang khác thì để tiện cho người sử dụng thì trong đó có thiết kế một số các đường dẫn để cho
người dùng tiện khảo khi cần thiết. Cách gắn đường dẫn vào nội dung của trang Web như vậy
đảm bảo tính đầy đủ và dễ đọc cho người dung.
Hình 3. 2. 15 Nội dung của trang thảo luận
Cuối cùng của trang là phần để cho người dùng có thể gửi các bình luạn cũng như phản
hồi của mình. Cách thức như vậy làm tăng tính tương tác giữa người dùng và trang Web.
157
Hình 3. 2. 16 Bình luận của người dùng
3. 2. 7 Cách thiết kế trang liên hệ
Đây là phần cuối cùng trong diễn đàn với mục đích cung cấp cho người dùng các thông
tin cần thiết để liên hệ với người quản trị. Do vậy các thông tin phải được trình bày một cách
ngắn gọn và cô đọng một cách hết sức để cung cấp cho người dùng nhiều nhất các thông tin trong
một khoảng thời gian ngắn nhất có thể. Trong trang này có thiết kế thành các trường khác nhau
để người dùng có thể điền các thông tin cần thiết rồi sau đó gửi đi.
Hình 3. 2. 17 Giao diện của trang liên hệ.
3. 3. Kết luận
Các lỗi trong HCI nói riêng cũng như trong các ngành khác nói riêng nói lên một điều
rằng còn rất nhiều vấn đề trong cách thức thiết kế của chúng ta. Các lỗi về thiết kế như tính khó
hiểu, sự không rõ nghĩa hay nhầm lẫn có thể xuất hiện ở bất cứ đâu và lặp lại nhiều lần. Hậu quả
của sự nhầm lẫn này có thể tùy thuộc vào từng trường hợp từ đơn giản như mở tủ lạnh hay các
phím chức năng cho đến các vấn đề như điều khiển máy bay.
158
Thiết kế một giao diện tốt phải bao gồm có rất nhiều các vấn đề khác nhau từ phông chữ,
khoảng cách chữ và dòng, biểu tượng... đều ảnh hưởng rất nhiều đến quá trình tưong tác. Các
thiết kế không chỉ đơn giản về mặt kĩ thuật mà còn có rất nhiều các yếu tố khác nữa. Điều đó đòi
hỏi chúng ta cần có nhiều nỗ lực hơn nữa để kết hợp các yếu tố đó lại với nhau.
159
KẾT LUẬN
1. Những kết quả đã đạt được:
Cách thức xử lý thông tin trong bộ não của con người luôn luôn là một vấn đề vô cùng
khó khăn. Để hiểu được các cơ chế hoạt động của bộ não, chúng ta còn phải cần nhiều hơn nữa
những sự phối hợp liên ngành của các môn khoa học khác nhau. Giải quyết được vấn đề đó quả
thực là không hề đơn giản tuy nhiên những kết quả đem lại có thể giúp ích cho chúng ta rất
nhiều.Giác quan của con người luôn luôn đóng một vài trò quan trọng trong nhận thức của con
người, trong tất cả các quá trình tương tác với xã hội. Giác quan của con người càng nhạy bén
bao nhiêu thì khả năng hấp thụ thông tin càng lớn bấy nhiêu và đi cùng là tăng cường khả năng
nhận thức. Trong quá trình tìm tòi và nghiên cứu, tôi đã hoàn thiện luận văn với những mục tiêu
đã đặt ra ban đầu, cụ thể đã đạt được những kết quả sau đây:
- Giải thích cơ chế xử lý thông tin trong bộ não và sự tăng cường nhận thức của con người
thông qua thị giác. Việc giải quyết được các vấn đề trên sẽ giúp chúng ta hiểu dược phần nào
cách thức hoạt động của bộ não trong quá trình nhận thức của con người. Mối quan hệ giữa thị
giác và bộ não trong các hoạt động của con người.
- Giải thích sự đa dạng trong nhân thức của con người trên hai cấp độ cá nhân và đám
đông. Cá nhân thường liên quan đến các vấn đề sinh học, đám đông thường liên quan đến các vấn
đề về xã hội. Điều này có thể giúp cho chúng ta có được sự lý giải cho các hành động khác nhau
của con người.
- Nghiên cứu các dạng tương tác thông qua máy tính như thực đơn, câu lệnh hay thiết bị.
Thông qua các cách tương tác này chúng ta hiểu rõ hơn về các kiểu tương tác và cách thiết kế
một giao diện phù hợp. Việc thiết kế một giao diện tốt đòi hỏi nỗ lực rất lớn của các nhà thiết kế
để có thể thu được những kết quả tốt nhất.
- Chỉ ra các lỗi trong HCI trong các thiết kế giao diện của các chương trình phần mềm.
Các lỗi về thiết kế như tính khó hiểu, sự không rõ nghĩa hay nhầm lẫn có thể xuất hiện ở bất cứ
đâu và lặp lại nhiều lần. Hậu quả của sự nhầm lẫn này có thể tùy thuộc vào từng trường hợp từ
đơn giản như mở tủ lạnh hay các phím chức năng cho đến các vấn đề như điều khiển máy bay.
- Thiết kế một giao diện cụ thể để minh họa những kết quả đã đạt được ở trên. Việc thiết
kế giao diện tốt phải bao gồm có rất nhiều các vấn đề khác nhau từ phông chữ, khoảng cách chữ
và dòng, biểu tượng... đều ảnh hưởng rất nhiều đến quá trình tưong tác. Các thiết kế không chỉ
đơn giản về mặt kĩ thuật mà còn có rất nhiều các yếu tố khác nữa. Điều đó đòi hỏi chúng ta cần
có nhiều nỗ lực hơn nữa để kết hợp các yếu tố đó lại với nhau.
2. Hướng nghiên cứu tiếp theo của đề tài:
Về lý thuyết:
160
- Tiếp tục xem xét kĩ lưỡng hơn nữa cách thức xử lý thông tin trong bộ não của con
người trong đó có liên kết đối với các ngành khoa học khác để có thể giải mã các hành động của
con người ở cả hai cấp độ cá nhân và tập thể. Mở rộng hơn nữa để nghiên cứu các thực nghiệm
cụ thể để có thể rút ra được các kết luận cụ thể.
- Nghiên cứu các kiểu tương tác người-máy thông qua sử dụng máy vi tính. Mở rộng
sang các kiểu tương tác khác đang trở nên phổ biến hiện nay. Có sự liên kết hơn nữa giữa các
hoạt động của con người đang trong quá trình tương tác với các cơ chế hoạt động và trao đổi
thông tin diễn ra trong bộ não của con người.
Về chương trình demo:
- Hoàn thiện trang Web thông qua các phần lý thuyết ở trên, trong đó ứng dụng nhiều hơn
nữa các kết quả lý thuyết đã thu được để có thể thiết kế được một giao diện tốt và than thiện với
người dùng.
161
TÀI LIỆU THAM KHẢO
Tiếng Anh
[1]. Alejandro Jaimes and Nicu Sebe, DIAP (2006), Multimodal human–computer
interaction, published by Mathias Kolsch, University of Amsterdam, The Netherlands.
[2]. Ben Shneiderman. (1998), “Designing the User Interface, Strategies for Effective
Human - Computer Interaction”, Third Edition.
[3]. B. Shneiderman (1993), Spark of Innovation in Human-Computer Interaction, Ablex
Publ, Norwood, NJ.
[4]. Brad Myer, Jim Hollan, Isabel, Steve Bryson, Dick Bulterman (1995), Strategic
direction in human-computer interaction, publisher ACM, New York, USA.
[5]. Daisy Mwanza (MSc HCI; BSc (Hons) IT) (2006), Toward an Activity-Oriented
Design method for HCI research and practice, thesis submitted in partial fulfilment of the
requirement for the degree of Doctor of Philosophy.
[6]. Elspeth Mckey, Rmit, Australia (2002), Enhance learning through Human Computer
Interaction, Ideal Group Reference, Library Congress Cataloging in Published Data, United State
of America.
[7]. Eva Hudlicka, Psychometrix Associates, Inc. (1805) The role of affect in human–
computer interaction, Azalea Drive, Blacksburg, VA 24060, USA.
[8]. John F. Roesler, Richard A. Yetter and Frederick L. Dryer, Mechanical and
Aerospace Engineering, Pricnciple activity theory for HCI, Princeton University, Princeton, NJ
08544, USA.
[9]. Lawrence Shao-Hsien Chen, B. S, (1996), Joint Processing of Audio-Visual
Information for the Recognition of Emotional Expressions in Human-Computer Interaction,
Thesis Submitted in partial fulfillment of the requirment for the degree of Doctor of Philosophy
in Elictrical Enggineering in the Graduate College of the University of Illinois at Urbana-
Champion, University of Illinois at Urbana-Champion, 1992.
[10]. Mathew I. Brad (2004), User Modeling in Human-Computer Interaction, publisher
Springer Netherlands.
[11]. Maja Pantic, Nicu Sebe, Jeffrey F. Cohn, Thomas Huang (1997), Affective
multimodal human-computer interaction, Source International Multimedia Conference,
Proceedings of the 13th annual ACM international conference on Multimedia.
162
[12]. Sari Kujala (2004), A Practical Approach to User Involvement for Gathering User
Needs and Requirement, Dissertation for the degree of Doctor of Philosophi to be presented with
due permission of the Department Computer Scicence.
[13]. Suhanya Gunarajah, Bachelor of Engineering (2004), Hardware involved in HCI
problem, a thesis submitted to the school of Information and Electrical Engineering, the
University of Queensland.
[14]. Tonya Barrier (2005), Human Computer Interaction Development and Management,
Second Edition.
[15]. Vladimir I. Pavlovic, Rajeev Sharma, Thomas S. Huang (2003), Visual
Interpretation of Hand Gesture for Human-Computer Interaction, Department of Elictrical and
Computer Engineering and the Beckman Institute for Advance Science and technology,
University of Illinois at Urbana-Champion 405 N. Mathew Avenue, Urbana. H, 61801, USA.
[16]. V. V. Alexandrov & N. D. Gorsky. (1991), “From Humans to Computers, Cognition
Through Visual Perception”,World Scientific Series in Computer Science – Vol. 22, World
Scientific Publish Co. Pte. Ltd.
[17]. Zhihong Zeng, Jilin Tu, Ming Liu, Tong Zhang (2001), Bimodal HCI-related affect
recognition, Source International Conference on Multimodal Interfaces. Proceedings of the 6th
international conference on Multimodal interfaces, Publisher ACM, NY, USA.
Các file đính kèm theo tài liệu này:
- LUẬN VĂN- ỨNG DỤNG YẾU TỐ CON NGƯỜI VÀO TRONG TỔ CHỨC HCI.pdf