Prepared by MSc Luong manh Ba Tương tác người - máy Human Computer Interaction - HCI Department of Software Engineering Faculty of Information Technology Hanoi University of Technology TEL: 04-8682595 FAX: 04-8692906 Email: cnpm@it-hut.edu Update 8-07  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba Chương XI: Thiết kế ICONS Nội dung 11.1 Khái niệm vai trò Icons 11.2 Các chuẩn cho Thiết kế Icon 11.3 Qui trình thiết kế 11.4 Đánh giá Update 8-07  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba 11.1 Tổng quan Các icon (biểu tượng/ hình vẽ) sử dụng hình để thực tương tác ứng dụng ND • Các biểu tượng đồ hoạ cung cấp độc lập ngôn ngữ trao đổi thông tin với ND • Là phần giao diện đồ hoạ cung cấp khả học, hiểu ghi nhớ phần tử chức hệ thống trợ giúp ND thao tác với phần tử • Thường giao diện người dùng đồ hoạ – GUI cung cấp biểu diễn ẩn dụ cho nhiệm vụ ND Các biểu tượng biểu diễn ẩn dụ cách trực tiếp, hay đối tượng vật lí cách gián tiếp • Update 8-07  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba 11.1 Tổng quan (tiếp) • Phân loại biểu tượng: – Biểu diễn đối tượng vật lý ổ đĩa, máy in,… – Biểu diễn chức cuả HT (action Icons) – Biểu diễn đối tượng điều khiển (data controls) Cách hiểu người dùng biểu tượng đối tượng Update 8-07  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba 11.1 Tổng quan (tiếp) • Cấu trúc khái niệm đối tượng biểu tượng Khung làm việc sử dụng để rõ biểu tượng đối tượng- ISO 11581 Update 8-07  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba Chương XI: Thiết kế ICONS 11.1 Khái niệm vai trò Icons 11.2 Các chuẩn cho Thiết kế Icon 11.3 Qui trình thiết kế 11.4 Đánh giá Update 8-07  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba 11.2 Các chuẩn cho thiết kế Icons • Có nhiều chuẩn cho thiết kế đảm bảo tính tiện dụng (Usability) Update 8-07  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba 11.2 Các chuẩn (tiếp) Update 8-07  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba Các cách tiếp cận chuẩn • • Các chuẩn ISO hướng xử lý (Process-Oriented ISO Standards) – – – – ISO 9241-11 Hướng dẫn tính dùng ISO 13407 : Các trình thiết kế người dùng trung tâm cho hệ thống tương tác ISO/TR 18529 : Công thái học cho tương tác người dùng – hệ thống Các mô tả trình , chu trình , vòng đời hướng người dùng ISO/TR 16982 : Công thái học cho tương tác người dùng – hệ thống Các phương pháp tính dùng hỗ trợ cho thiết kế hướng người dùng • Các chuẩn ISO hướng sản phẩm (Produit-Oriented ISO Standards) – – Update 8-07 ISO/IEC 9126 – : mô hình cho chất lượng sản phẩm dựa công nghệ , kỹ thuật ISO/IEC 9126 – : tính dùng thước đo chất lượng bên bên  Dept of SE, August-2002 HCI – Four Prepared by MSc Luong manh Ba Chuẩn ISO 9241 cho tính tiện dụng Update 8-07  Dept of SE, August-2002 HCI – Four 10 Prepared by MSc Luong manh Ba Các Khuyến nghị • • • Giao diện icon nên quán tập icon, nghĩa tập icon nên hiển thị kiểu đồ hoạ giống Nếu icon biểu diễn kích cỡ khác hình, thiết kế icon nên đảm bảo tính dễ hiểu dễ nhìn, đảm bảo thành phần xuất Nếu icon sử dụng hình khác làm cho icon hiển thị với tỷ lệ cạnh khác nhau, phương pháp thiết kế nên quan tâm đến việc tạo giao diện icon cho tương tự hình ảnh thiết kế ban đầu Update 8-07  Dept of SE, August-2002 HCI – Four 47 Prepared by MSc Luong manh Ba Các Khuyến nghị (tiếp) • • • Tất icon có sẵn nên dễ hiểu Khi tính dễ hiểu từ lần quan sát yêu cầu tính dùng được, icon nên có khả học dễ nhận biết Vị trí nhãn liên kết với icon thay đổi người dùng nên quán bên môi trường tập môi trường thiết kế để sử dụng Hoạt hình không làm giảm tính dễ hiểu dễ nhận biết icon (mục of ISO 9241-3:1992) Update 8-07  Dept of SE, August-2002 HCI – Four 48 Prepared by MSc Luong manh Ba Các biến thể • Các biến thể toàn cục cho thuộc tính đường thẳng như: kiểu, độ rộng, điểm kết thúc, liên thông, mẫu, Update 8-07  Dept of SE, August-2002 HCI – Four 49 Prepared by MSc Luong manh Ba Các biến thể (tiếp) • Các biến thể toàn cục cho thuộc tính canh góc là: cong, vuông, liên thông Update 8-07  Dept of SE, August-2002 HCI – Four 50 Prepared by MSc Luong manh Ba Các biến thể (tiếp) • Mức độ chi tiết tăng lên để thêm vào tính thực tế • Bề mặt mẫu màu sắc khác toàn không làm giảm tính dễ hiểu icon Các phần tử đồ hoạ thêm vào không nên làm giảm tính dễ nhận dạng icon • Update 8-07  Dept of SE, August-2002 HCI – Four 51 Prepared by MSc Luong manh Ba Chi tiết số TD theo chuẩn cho thiết kế giao diện phần mềm Update 8-07  Dept of SE, August-2002 HCI – Four 52 Prepared by MSc Luong manh Ba Một số hình ảnh Icons Update 8-07  Dept of SE, August-2002 HCI – Four 53 Prepared by MSc Luong manh Ba Một số hình ảnh Icons (tiếp) Update 8-07  Dept of SE, August-2002 HCI – Four 54 Prepared by MSc Luong manh Ba Một số hình ảnh Icons (tiếp) Update 8-07  Dept of SE, August-2002 HCI – Four 55 Prepared by MSc Luong manh Ba Một số hình ảnh Icons (tiếp) Update 8-07  Dept of SE, August-2002 HCI – Four 56 Prepared by MSc Luong manh Ba Một số hình ảnh Icons (tiếp) Update 8-07  Dept of SE, August-2002 HCI – Four 57 Prepared by MSc Luong manh Ba Chương X: Thiết kế ICONS Nội dung 11.1 Khái niệm vai trò Icons 11.2 Các chuẩn cho Thiết kế Icon 11.3 Qui trình thiết kế 11.4 Đánh giá Update 8-07  Dept of SE, August-2002 HCI – Four 58 Prepared by MSc Luong manh Ba 11.4 Đánh giá Thường Dùng kĩ thuật Heuristic Update 8-07  Dept of SE, August-2002 HCI – Four 59 Prepared by MSc Luong manh Ba 11.4 Đánh giá (tiếp) • Đánh giá Icon theo thuộc tính Để đánh giá Icon ta đánh giá dựa hình ảnh , mà đánh giá theo hình ảnh Icon chíng ta dựa vào tính chất sau: • Viền (boder) • • • Nền (Background) Ảnh (Image) Nhãn (label) Update 8-07  Dept of SE, August-2002 HCI – Four 60 Prepared by MSc Luong manh Ba Đánh giá (tiếp) Update 8-07  Dept of SE, August-2002 HCI – Four 61 [...]... the color, perspective, and graphic look of the site Update 8-07  Dept of SE, August-2002 HCI – Four 34 Prepared by MSc Luong manh Ba Chương X: Thiết kế ICONS Nội dung 11. 1 Khái niệm và vai trò của Icons 11. 2 Các chuẩn cho Thiết kế Icon 11. 3 Qui trình thiết kế 11. 4 Đánh giá Update 8-07  Dept of SE, August-2002 HCI – Four 35 Prepared by MSc Luong manh Ba 11. 3 Các bước cơ bản trong thiết kế ICON 1-... Chuẩn ISO 115 81 cho thiết kế ICON • ISO/IEC 115 81: 6 phần – ISO/IEC 115 81 – 1 : Tổng quan về các biểu tượng – ISO/IEC 115 81 – 2 : Các biểu tượng đối tượng – ISO/IEC 115 81 – 3 :Các biểu tượng con trỏ - ISO/IEC 115 81 – 4 các biểu tượng điều khiển - ISO/IEC 115 81 – 5 các biểu tượng các thanh công cụ - ISO/IEC 115 81 – 6 : Các biểu tượng hành động Update 8-07  Dept of SE, August-2002 HCI – Four 11 Prepared... 10 lỗi hay mắc khi thiết kế #4 Lack of unity of style within a set of icons It is a unity of style that unites several icons into a set The uniting property can be any of the following: color scheme, perspective, size, drawing technique or a combination of several such properties If there are only a few icons in the set, the designer can keep some rules in his head If there are many icons in the set... icon's design Update 8-07  Dept of SE, August-2002 HCI – Four 21 Prepared by MSc Luong manh Ba 10 lỗi hay mắc khi thiết kế #1 Insufficient differentiation between icons Sometimes within one set of icons, we have icons that look alike and it is very hard to understand what is what If you miss the legends, you can very easily get the icons mixed up Update 8-07  Dept of SE, August-2002 HCI – Four 22 Prepared... Icon Design: Bitmap vs Vector Also, review this article on Icon Design Sizing over at Mezzoblue It covers some inherent issues with designing icons for small sizes Update 8-07  Dept of SE, August-2002 HCI – Four 17 Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) 4 Keep Icons Simple and Iconic The icons below look really cool It requires a judgment, though, as to whether the loss of some... lỗi hay mắc khi thiết kế #2 Too many elements in one icon • The simpler and more laconic the icon, the better It is preferable to keep • the number of objects in a single icon to a minimum Nevertheless, Microsoft’s designers, inspired by the new format of icons featured in Windows Vista, decided to go big and drew bloated icons to justify their bloated budget: Update 8-07  Dept of SE, August-2002 HCI... 8-07  Dept of SE, August-2002 HCI – Four 32 Prepared by MSc Luong manh Ba 10 lỗi hay mắc khi thiết kế #10 Outside the pixel framework As a rule, this problem occurs if you use a vector editor for drawing icons In large size everything looks pretty and clear; but in reality the icons are small, and under rasterization anti-aliasing frets the objects’ borders Update 8-07  Dept of SE, August-2002 HCI... MSc Luong manh Ba 10 lỗi hay mắc khi thiết kế • #3 Unnecessary elements • • An icon should be easy to read The fewer elements it has, the better It is better if the whole image is relevant and not only part of it Therefore, you have to pay attention to the context of using icons Let us take for instance some database icons: The simpler and more laconic the icon, the better It is preferable to keep... worth the added design around the symbol At a large size it works just fine, as they function similar to illustrations At smaller sizes though, a less-dressed solution may be preferable Update 8-07  Dept of SE, August-2002 HCI – Four 18 Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) 5 Cast Consistent Lighting, Reflections, and Shadows The guidebook gives really specific rules for the Vista... designers working on them (for instance, icons for an operating system ), then special instructions are created Such instructions describe in detail how to draw an icon so that it fits straight into the set Update 8-07  Dept of SE, August-2002 HCI – Four 26 Prepared by MSc Luong manh Ba 10 lỗi hay mắc khi thiết kế #5 Unnecessary perspective and shadows in small icons • • Progress does not stand still: ... Luong manh Ba Chương XI: Thiết kế ICONS Nội dung 11. 1 Khái niệm vai trò Icons 11. 2 Các chuẩn cho Thiết kế Icon 11. 3 Qui trình thiết kế 11. 4 Đánh giá Update 8-0 7  Dept of SE, August-2002 HCI –... MSc Luong manh Ba Chương XI: Thiết kế ICONS 11. 1 Khái niệm vai trò Icons 11. 2 Các chuẩn cho Thiết kế Icon 11. 3 Qui trình thiết kế 11. 4 Đánh giá Update 8-0 7  Dept of SE, August-2002 HCI – Four... cho Thiết kế Icon 11. 3 Qui trình thiết kế 11. 4 Đánh giá Update 8-0 7  Dept of SE, August-2002 HCI – Four 35 Prepared by MSc Luong manh Ba 11. 3 Các bước thiết kế ICON 1- Thu thập yêu cầu , tìm