chuong5thietkegiaodien xuanhiens weblog

<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1></div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

1. Tổng quan

2. Nguyên tắc thiết kế giao diện

3. Quy trình thiết kế giao diện

4. Tiêu chí đánh giá giao diện

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>



<b>_{Thiết kế giao diện}</b>

_{là một yếu tố trong}

<i>_{yêu cầu phi chức năng}</i>

_của

hệ thống, nếu thiết kế giao diện tốt sẽ làm tăng hiệu quả giao tiếp

của người dùng và hệ thống phần mềm.



_{Tùy theo}

<i><b>_{mục đích, yêu cầu}</b></i>

_{của người dùng, các phần tử trên}

form được phân bố một cách hợp lý.

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>



<b>_{Giao diện phải thể hiện được các}</b>

<b>_{tính năng}</b>

<b>_:</b>

<i>_{Tính sẵn sàng và linh hoạt:}</i>_{đáp ứng nhanh với thao tác của người dùng.}

<i>_{Tính tập trung}</i>_{: các phần tử trên giao diện phải gây được sự chú ý cua 3}
người dùng.

_{Sử dụng phím tắt giúp thao tác nhanh và hiệu quả.}
_{Cung cấp các công cụ trợ giúp.}

_{Màu sắc phải hài hòa giữa các thành phần trên giao diện, font chữ và size}
phải thích hợp với các nội dung.

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>



<b>_{Kết quả thiết kế giao diện gồm 2 phần}</b>

_:



<i><b>_{Sơ đồ màn hình}</b></i>

_{: biểu diễn hệ thống những giao diện của hệ}

thống và mối liên quan giữa các màn hình.



<i><b>_{Mơ tả chi tiết từng màn hình}</b></i>

_{: mơ tả các phần tử trên màn hình}

và cách bố trí thích hợp với từng chức năng.

– Tên màn hình: chức năng được thực hiện trên màn hình

– Nội dung trên màn hỉnh: các phần tử và chức năng của các phần tử.

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>



_{Ví dụ:}

<i><b>_{Sơ đồ màn hình}</b></i>

_{Ký hiệu}

<b>5.1.1. Kết quả của quy trình thiết kế giao diện</b>

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>



<b>_{Các phần tử trên màn hình được chia thành 2 nhóm:}</b>

<b>_{Nhóm dữ liệu}</b>_{: gồm các phần tử giúp người dùng nhập dữ liệu và thành}
phần xuất dữ liệu sau khi xử lý:

Ví dụ: textbox, combobox, label

<b>_{Nhóm xử lý}</b>_{: gồm các nút lệnh, thao tác với chuột, phím để thực hiện một}
chức năng xử lý.

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>



_{Dựa vào các}

<b>_{chức năng của phần mềm}</b>

_,

<i><b>_{giao diện được chia}</b></i>

<i><b>thành nhiều loại phù hợp với từng chức năng</b></i>

<i><b>_{Màn hình chính}</b></i>_{: chứa các chức năng tổng quát}

Ví dụ: chức năng quản lý sinh viên, quản lý đăng ký học phần.

<i><b>_{Màn hình nhập liệu}</b></i>_{: giúp người dùng nhập dữ liệu vào hệ thống để xử lý}
hoặc lưu trữ

<i><b>_{Màn hình kết quả}</b></i>_{: kết xuất dữ liệu sau khi xử lý.}

<i><b>_{Màn hình thơng báo}</b></i>_{: hiển thị các thơng, u cầu, cảnh báo đối với người}
dùng trong quá trình tương tác với phần mềm.

<i><b>_{Màn hình tra cứu}</b></i>_{: hỗ trợ người dùng tìm kiếm thơng tin}

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>



<b>_{Các lỗi thường gặp trong thiết kế giao diện}</b>



_{Thiếu toàn vẹn}



_{Phải nhớ q nhiều}



_{Khơng có hướng dẫn, trợ giúp}



_{Khơng nhạy với ngữ cảnh}



_{Đáp ứng nghèo nàn}



_{Không thân thi Khơng thân thiện, khó hiểu}

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

<b>Người dùng dễ điều khiển</b>

<b>Người dùng ít phải nhớ</b>

<b>Giao diện tồn vẹn</b>

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>



<b>_{Người dùng dễ điều khiển}</b>

_{Không buộc người dùng phải thực hiện các hoạt động không cần thiết hay}
không hay khơng ưa thích

_{Tương tác mềm dẽo, người dùng có thể ngắt và undo}_„
_{Tương tác theo luồng và cho phép tùy biến tương tác}

_{Che dấu kỹ thuật bên trong}

_{Tương tác trực tiếp với những đối tượng trên màn hình}

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>



<b>_{Người dùng ít phải nhớ}</b>

_{Giảm các yêu cầu cần người dùng phải nhớ quá nhiều.}
_{Tạo những trường hợp mặc định có ý nghĩa}

_{Shortcut trực quan}

_{Thể hiện hình ảnh bằng những biểu tượng trong thế giới thực}
_{Trình bày thơng tin theo diễn tiến động}

</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>



<b>_{Giao diện toàn vẹn}</b>

_{Cho phép người dùng sử dụng các tác vụ theo ngữ cảnh}
_{Các giao diện trong ứng dụng phải tồn vẹn}

_{Mơ hình tương tác trước đó được người dùng ưa chuộng thì khơng nên}
thay khơng nên thay đổi trừ khi có một lý do thuy lý do thuyết phục.

</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>



<b>_{Một số đặc điểm của người sử dụng}</b>

<b>_{Khả năng nhớ tức thời của con người bị hạn chế}</b>_:

– Họ chỉ có thể <i>nhớ ngay khoảng 7 thơng tin</i>. Nếu ta biểu diễn nhiều hơn thì
có thể khiến người sử dụng <i>không nhớ hết và gây ra các lỗi</i>.

– Khi xãy ra lỗi, nếu những <i>thơng báo khơng thích hợp</i> có thể làm <i>tăng áp </i>
<i>lực lên người sử dụng </i>và gây ra lỗi khác.

– Người sử dụng có khả năng và sở thích hồn tồn khác nhau
– Giao <i>diện đa phương tiện </i>dễ thu hút người dùng hơn.

</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>



<b>_{Thói quen của người sử dụng}</b>

_:

_{Giao diện phải được xây dựng dựa trên các} <i>_{thuật ngữ gần gũi với người}</i>

<i>dùng hơn</i> là <i>những khái niệm liên quan đến máy tính</i>.
Ví dụ:

• Nên sử dụng những khái niệm <i>thư, tài liệu, cặp giấy</i>…

• Khơng nên sử dụng những khái niệm như <i>thư mục, danh danh mục </i>…

<b>_{Thống nhất}</b>_{: các thành phần cùng nhóm chức năng nên cùng định dạng.}

_{Nếu một yêu cầu được xử lý theo cách thông thường thì người sử dụng có}

</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>



<b>_{Khả năng phục hồi}</b>

_{: hệ thống nên cung cấp một số khả năng}

<i>phục hồi tới tình trạng trước đó </i>

<i>(</i>

undo),

<i>xác nhận trước khi sửa </i>

<i>xóa</i>

…



<b>_{Hướng dẫn người sử dụng}</b>

_{: như hệ thống trợ giúp, hướng dẫn}

trực tuyến …



<b>_{Tính đa dạng}</b>

_{: hỗ trợ nhiều loại tương tác cho nhiều loại người sử}

dụng khác nhau.

</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>

<b>5.2. Nguyên tắc thiết kế giao diện</b>

</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

<b>5.2. Nguyên tắc thiết kế giao diện</b>

</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>

<b>5.2. Nguyên tắc thiết kế giao diện</b>

<i><b>Giao diện sử </b></i>

</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>



<b>_{Phân tích giao diện}</b>

– Xác định người dùng cuối, những người sẽ tương tác với hệ thống thông
qua giao diện;

– Các tác vụ mà người dùng cuối phải thực hiện để phục vụ cho công việc,
– Xác định nội dung sẽ trình bày

– Mơi trường trong đó các nhiệm vụ này sẽ được thực hiện.

</div>
<span class='text_page_counter'>(21)</span><div class='page_container' data-page=21>



<b>_{Phân tích người dùng}</b>

_{Người dùng là ai? Trình độ người dùng?}

_{Có khả năng sử dụng tài liệu hướng dẫn bằng giấy hay cần phải mở lớp}
huấn luyện?

_{Độ tuổi người dùng?}

_{Người dùng sẽ được lợi như thế nào?}

_{Người dùng có sử dụng thường xuyên cho công việc hay không?}
_{Nếu người dùng gây ra lỗi thì hậu quả như thế nào}

</div>
<span class='text_page_counter'>(22)</span><div class='page_container' data-page=22>



<b>_{Phân tích tác vụ và mơ hình}</b>

_{Trong tình huống đặc trưng thì người dùng thực hiện cơng việc gì?}
– Tác vụ và các tác vụ con? Luồng công việc?

– Hệ thống cấp bậc của tác vụ?

_Các<b>_{Use case}</b>_{xác định những tương tác cơ bản}

_{Xác định những công việc lọc ra những tác vụ tương tác}

_{Hình thành những đối tượng nhận diện ra đối tượng giao tiếp (classes)}
_{Phân tích luồng cơng việc xác định cách thức cơng việc được hồn tất}

</div>
<span class='text_page_counter'>(23)</span><div class='page_container' data-page=23>



<b>_{Phân tích nội dung thể hiện bằng hình ảnh}</b>

_{Việc bố trí màn hình theo loại dữ liệu}

_{Người dùng có thể tùy biến màn hình?}
_{Phân chia những báo cáo sao cho dễ hiểu}

_{Sử dụng những kỹ thuật thể hiện thông tin tóm tắt trong việc thu thập dữ}
liệu

_{Dữ liệu ra cần định dạng phù hợp với thiết bị}

</div>
<span class='text_page_counter'>(24)</span><div class='page_container' data-page=24>



<b>_{Các thành phần trong thiết kế giao diện}</b>

_{The complete UI complete}

_{Page layout}

_{Forms and input}
_Tables

_{Direct data manipulation}
_Navigation

_Searching

_{Page elements}
_e-Commerce

</div>
<span class='text_page_counter'>(25)</span><div class='page_container' data-page=25>



<b>_{Thiết kế giao diện chính}</b>

_{: hệ thống menu có thể chia làm 3 loại}

<i><b>_{Menu hướng chức năng}</b></i>_{: nhóm chức năng tương ứng với các loại yêu cầu}

– Tổ chức: chứa chức năng liên quan đến tổ chức cùa doanh nghiệp
– Lưu trữ: chứa chức năng liên quan đến lưu trữ và quản lý dữ liệu,
– Tra cứu: gồm các chức năng liên quan đến tìm kiếm, tra cứu

<i><b>_{Menu hướng đối tượng}</b></i>_{: nhóm chức năng tương ứng với các lớp đối}

tượng. Một nhóm chức năng tương ứng với đối tượng thế giới thực.



<i><b>_{Menu Hướng quy trình}</b></i>

_{: gốm các chức năng liên quan đến các}

</div>
<span class='text_page_counter'>(26)</span><div class='page_container' data-page=26>



<b>_{Thiết kế giao diện tra cứu}</b>

_:

<i><b>_{Tiêu chuẩn tra cứu}</b></i>_{: Gồm biểu thức luận lý, cây, tích hợp}
<i><b>_{Kết quả tra cứu}</b></i>_{: Gồm thơng báo, danh sách}

<i><b>_{Thao tác người dùng}</b></i>_{: Giúp người dùng nhập giá trị cho các tiêu chuẩn tra}
cứu, xem chi tiết các kết quả tra cứu.

</div>
<span class='text_page_counter'>(27)</span><div class='page_container' data-page=27>



<b>_{Thiết kế giao diện tra cứu}</b>

_:

_{Ví dụ: màn hình tra cứu}

</div>
<span class='text_page_counter'>(28)</span><div class='page_container' data-page=28>



<b>_{Thiết kế giao diện tra cứu}</b>

_:

_{Ví dụ: Kết quả tra cứu}

</div>
<span class='text_page_counter'>(29)</span><div class='page_container' data-page=29>



<b>_{Thiết kế màn hính nhập liệu:}</b>

_{chứa các thành phần giúp người}

dùng nhập các thơng tin, từ khóa, phục vụ tra cứu thơng tin, hoặc

các thành phần giúp nhập thông tin lưu trữ.

<i><b>_{Các phần tử hỗ trợ nhập liệu}</b></i>_{trên giao diện phải có chức năng}<i><b>_{kiểm tra}</b></i>

<i><b>tính hợp lệ của dữ liệu</b></i>

<i><b>_{Các phần tử hỗ trợ tính tốn}</b></i>_phải<i><b>_{đúng theo nghiệp vụ của hệ thống}</b></i>

</div>
<span class='text_page_counter'>(30)</span><div class='page_container' data-page=30>



_{Thời gian đáp ứng}



_{Những tiện ích trợ giúp}



_{Khả năng xử lý lỗi}



_{Menu và lệnh}



_{Khả năng truy cập ứng dụng}



_{Quốc tế hóa (Internationalization)}

</div>

<!--links-->