Công nghệ Phần mềm (Introduction to Software Engineering) CHƯƠNG 7: Thiết kế phần mềm (Thiết kế giao diện người dùng)

1 Nhập môn Công nghệ Phần mềm (Introduction to Software Engineering) CHƯƠNG Thiết kế phần mềm (Thiết kế giao diện người dùng) Mục tiêu của bài học Sinh viên trang bị kiến thức sau: - Các khái niệm liên quan tới Thiết kế giao diện người dùng - Quy trình thiết kế giao diện vấn đề liên quan - Đánh giá thiết kế giao diện Nội dung Thiết kế giao diện người dùng Các vấn đề thiết kế Quy trình thiết kế UI Phân tích người dùng Tạo mẫu thử giao diện, mẫu thử tương tác Đánh giá UI Các công cụ thiết kế UI Thiết kế giao diện Dễ học? Dễ sử dụng? Dễ hiểu? Thiết kế giao diện Lỗi thiết kế thơng thường • • • • • • Thiếu qn Q nhiều ghi nhớ Khơng có hướng dẫn / giúp đỡ Không nhạy cảm với ngữ cảnh Đáp ứng Phức tạp / không thân thiện Nguyên tắc thiết kế giao diện • Dễ học: Phần mềm cần phải dễ học cách sử dụng, người dùng nhanh chóng bắt đầu làm việc sử dụng phần mềm • Quen thuộc với người sử dụng: Giao diện nên dùng thuật ngữ khái niệm rút từ kinh nghiệm người dùng hệ thống nhiều • Tính quán: giao diện cần quán cho thao tác gần giống kích hoạt theo kiểu • Ngạc nhiên tối thiểu: Người dùng khơng bị bất ngờ hành vi hệ thống Nguyên tắc thiết kế giao diện • Khơi phục được: Giao diện nên có chế cho phép người dùng khơi phục lại tình trạng hoạt động bình thường sau gặp lỗi • Hướng dẫn người dùng: Giao diện nên có phản hồi có nghĩa xảy lỗi cung cấp tiện ích trợ giúp theo ngữ cảnh • Người dùng đa dạng: Giao diện nên cung cấp tiện ích tương tác thích hợp cho loại người dùng hệ thống khác Quy tắc vàng • Đặt người dùng kiểm sốt • Giảm tải nhớ cho người dùng • Làm cho giao diện quán Source: Martin, R., “Design Principles and Design Patterns,” downloaded from http:www.objectmentor.com, 2000 10 Bước Thiết kế đồ họa đơn sắc • Mục đích Đánh giá phác thảo giấy chuyển sang đồ họa vi tính có phù hợp với yêu cầu khách hàng hay không • Thực • Sử dụng công cụ thiết kế đồ họa như: PhotoShop, VS 2010…để thiết kế mẫu giao diện web • Chưa thực phối màu cho thành phần, để màu xám • Tuyệt đối không sử dụng hai màu đen, trắng vùng muốn phối màu 51 52 53 54 Bước Thiết kế đồ họa đơn sắc • Thực (tiếp) • In dán lên tường Sau mời người đến nhận xét • Thơng tin quan trọng tìm với hình thực khơng? • Giao diện đọc, dễ thực với người dùng khơng? • Giao diện tính cách riêng khơng? 55 Bước Phối màu cho giao diện web • Mục đích Phối màu cho thành phần đơn sắc • Thực • Tuân thủ phương pháp sau • Từ yêu cầu khách hàng đưa màu chủ đạo, màu thứ cấp mảng màu hỗ trợ để tăng tính sinh động • Với text nên có tối đa màu, font • Giai đoạn phối màu dễ bị ảnh hưởng màu ảnh banner… • Chọn ảnh truyền đạt xác thơng điệp trang Web 56 57 58 59 Bước Xây dựng chuẩn CSS, Script, Ảnh, Folder cho trang Web • Mục đích Giúp quy trình xây dựng, triển khai, bảo trì rủi ro • Các chuẩn – Định nghĩa vùng site, vùng thẻ DIV – Chuẩn đặt tên lớp, id CSS – Chuẩn đặt tên thư mục chứa thành phần Web – Chuẩn đặt tên cho file HTML, CSS, Script… 60 Bước Sử dụng ngơn ngữ để thiết kế giao diện • Mục đích Thiết kế Web HTML, CSS (JavaScipt, Ajax, Flash…nếu có) • Thực • Chỉ hiển thị liệu: HTML • Định dạng bố cục trang web: CSS • Người thiết kế thực công việc lập trình Cần hiểu rõ ngơn ngữ sử dụng 61 Bước Kiểm thử trình duyệt • Mục đích Kiểm sốt việc hiển thị xác trang web trình duyệt khác thiết kế bước 62 Bước Chuyển mã nguồn tới phận phát triển Web • Mục đích Chuyển thiết kế trang Web hiển thị tốt trình duyệt sang phận lập trình • Thực • Chuyển yêu cầu bắt buộc chuẩn thiết kế tới phận liên quan 63 Tởng kết • Qua bạn nắm cách thiết kế giao diện người dùng tốt • Thiết kế giao diện người dùng phần quan trọng trình thiết kế phần mềm • Thiết kế giao diện xử lý tương tác với người sử dụng yếu tố quan trọng việc sử dụng phần mềm • Người thiết kế phải để phù hợp với kĩ năng, kinh nghiệm mong đợi từ phía người sử dụng phần mềm 64 Thank you for your attentions! 65 ... kế giao diện người dùng) Mục tiêu của bài học Sinh viên trang bị kiến thức sau: - Các khái niệm liên quan tới Thiết kế giao diện người dùng - Quy trình thiết kế giao diện vấn đề liên quan -. .. hình ảnh nhận thức người dùng giao diện • Mơ hình triển khai — giao diện "nhìn cảm nhận" với thơng tin hỗ trợ mô tả cú pháp ngữ nghĩa giao diện 14 Nội dung Thiết kế giao diện người dùng Các vấn... thiết kế giao diện người dùng • Quy trình thiết kế lặp theo ISO 9241 - 210 17 Nội dung Thiết kế giao diện người dùng Các vấn đề thiết kế Quy trình thiết kế UI Phân tích người dùng Tạo mẫu thử giao