Sổ tay thiết kế HMI Bảy bước để thiết kế HMI hiệu quả

Sổ tay thiết kế HMI Bảy bước để thiết kế HMI hiệu siemens.com/hmi-design-workbook Unrestricted Felix Kranert Oliver Gerstheimer Sebastian Frei Sổ tay thiết kế HMI Bảy bước để thiết kế HMI hiệu Nội dung Giới thiệu Quy trình thiết kế 42 mẹo thiết kế – 12 13 – 18 19 – 130 Biểu mẫu 131 – 144 Chú thích & Tải liệu tham khảo 145 – 151 “Khi tình yêu kỹ song hành, đón đợi kiệt tác.” John Ruskin Giới thiệu Felix Kranert “Trong hầu hết ngành cơng nghiệp, qua thời kì mà cơng ty chế tạo máy hồn tồn trơng cậy vào ưu mặt kỹ thuật để không cần bận tâm tới đối thủ cạnh tranh.” Felix gương mặt đại diện Siemens AG với nhiều hoạt động tích cực lĩnh vực tự động hóa cơng nghiệp suốt 10 năm qua Ln bối cảnh tương tác người máy móc, anh hợp tác đạo nhiều dự án lĩnh vực đồng thời Chuyên gia tư vấn Siemens Sử dụng khả vai trò Giám đốc Marketing cho sản phẩm SIMATIC HMI, anh thúc đẩy việc thuyết phục giá trị gia tăng mà thiết kế HMI tốt mang lại cho mơi trường cơng nghiệp, ủng hộ “thiết kế thân thiện với người dùng” giao diện vận hành khu vực sản xuất giới “Theo kịp với thời đại nhanh chóng biến mất!” Dù điện thoại thông minh, máy hút bụi hay thiết bị nhà bếp, phần lớn sản phẩm ngày vận hành chủ yếu phần mềm Chúng ta hy vọng thiết bị nhìn bắt mắt, đặc biệt phải dễ sử dụng Thiết kế tương tác HMI đóng vai trị quan trọng hết cho thành công doanh nghiệp Kết nhà chế tạo máy gặp nhiều khó khăn việc tạo khác biệt với đối thủ cạnh tranh thông qua ưu kỹ thuật Bất kỳ công ty không thành công việc phá vỡ phức tạp ngày tăng hệ thống để người vận hành nhanh chóng dễ dàng làm chủ chúng cuối biến khỏi thị trường Mặt khác, cơng ty đạt xác điều dễ dàng tiếp thị sản phẩm hơn, người dùng u thích họ sản phẩm họ trở thành đại sứ cho họ Để đạt điều này, giao diện người máy, tức HMI, phải tối ưu hóa! Tất nhiên, tối ưu hóa rõ ràng không liên quan đến thiết kế đồ họa HMI Việc tăng độ phức tạp giải pháp tự động hóa mức độ gia tăng mạng truyền thông thiết bị đảm bảo ngày nhiều liệu hiển thị phân tích Để làm chủ phức tạp tràn liệu, tất phương pháp tiếp cận trước phải tìm hiểu kỹ kiểm tra Giao diện người dùng giúp gia tăng doanh số cho loại máy 10 năm trước vấn đề lớn tồn loại máy Oliver Gerstheimer “Phương tiện giao diện kỹ thuật số biến thành lồi thích gặm nhấm Các chất kích thích ưa thích mẩu thơng tin nhỏ gọn sử dụng để thu thập kiến thức suốt ngày.” Trong 20 năm qua, Oliver ln say mê tìm hiểu thúc đẩy việc thực hành "thiết kế tập trung vào người" "các sản phẩm dịch vụ kỹ thuật số cho ngày mai“ với chất lượng tốt Năm 2001, ông thành lập chilli mind GmbH - nhóm chuyên gia tư vấn tiếng đổi kỹ thuật số, chiến lược kinh doanh mới, thiết kế UX/UI kiến trúc thơng tin phức tạp Ơng diễn giả chuyên gia thường xuyên xuất kiện thiết kế công nghệ tầm cỡ quốc tế giảng viên học viện thiết kế Đức Thụy Sĩ 15 học kỳ Ông hoàn thành 10 năm nghiên cứu lĩnh vực thiết kế sản phẩm, thiết kế đồ họa quản lý đổi sáng tạo “Không để ngày qua vô nghĩa – hiệu ứng 10 phút.” Tại khóa "đào tạo nâng cao chuyên sâu" lại thất bại thường xuyên vậy? Các công ty thường cử nhân viên tham dự hội thảo nhiều ngày khóa đào tạo chuyên sâu Khi quay cơng việc hàng ngày, khóa đào tạo mang lại tác dụng: hội thảo bóng đá vào cuối tuần khơng khiến bạn trở thành cầu thủ bóng đá chuyên nghiệp Nếu học nhanh thường kiến thức kỹ quên nhanh Hiệu bước nhỏ khoảng thời gian dài hơn, ví dụ tham dự lộ trình đào tạo có hướng dẫn, xây dựng bền vững kỹ bí Mơ - hình thức học tập theo từ khóa MicroLearning hình thành tối ưu để tích hợp vào hoạt động hàng ngày Những người ham học hỏi học cách liên tục học ngắn tự xác định khoảng thời gian học Tài liệu học tập tốt theo thực tế, thông qua hình ảnh câu chuyện tương tự hình dung từ hoạt động hàng ngày Các kỹ sư quan tâm đến thiết kế HMI khó tìm thấy nội dung hấp dẫn hình thức học tập thiết thực Sổ tay thiết kế HMI đặc biệt biên soạn cho kỹ sư có dự định thay đổi điều Chúng tơi muốn cung cấp thông tin chứng minh thiết kế HMI khơng phải điều q cao siêu Vậy sách có đề cập hết khía cạnh Thiết kế HMI khơng? Tất nhiên khơng Nhưng giúp cho việc nhập môn vào lĩnh vực dễ dàng truyền tải nguyên tắc thiết kế quan trọng nhất, sử dụng để đạt thành công đo đếm – trang sách nhỏ gọn, đúc kết lại cho lớp thiết kế HMI chuyên sâu Hãy học từ sách mẹo một, chút Những bạn cần 10 phút ngày, dù xe buýt hay ăn trưa Ghi chú, vẽ phác thảo sử dụng nhiều tập mẫu thực tế, hết: áp dụng kiến thức bạn bạn học vào hoạt động dự án thực tế hàng ngày – người vận hành cấp độ máy biết ơn bạn “Nulla dies sine linea” – không để ngày qua vô nghĩa (Apelles, họa sỹ người Hy Lạp) “Thử nghiệm theo tác vụ” 139 “Phản hồi + Tối ưu hóa” Tải biểu mẫu : www.siemens.com/workbook-templates 140 “Xác định ưu tiên” 141 Ghi 142 143 144 Chú thích & Tài liệu tham khảo 145 Chú thích Màu hoạt động Thử nghiệm theo tác vụ Hộp thoại Là màu thiết kế HMI sử dụng riêng để tô màu thành phần tương tác Ngay khơng có tương tác, thuộc tính tương tác hiển thị rõ ràng cho người dùng Người dùng tiến hành trường hợp sử dụng với mẫu thử Mục tiêu: Kiểm tra xem thiết kế liệu thực thi mà khơng có vấn đề hay không Trong trường hợp này, hộp thoại người dùng máy, ví dụ đầu vào người dùng đầu hệ thống HMI Ứng dụng mẫu Sự tìm hiểu Các ví dụ HMI lựa chọn thiết kế tối ưu thiết kế mẫu Biểu thị tìm hiểu thiết kế HMI người tham gia, ví dụ người thiết kế người dùng HMI Yêu cầu Bao gồm chức tính mà HMI phải có để đáp ứng nhu cầu người dùng bối cảnh Hiệu ứng Trái ngược với thành phần HMI tĩnh, thành phần có hiệu ứng tạo ảo giác chuyển động thay đổi thị giác Hiệu ứng thu hút ý người dùng Tác vụ Một HMI thường cho phép người dùng xử lý tác vụ 146 Kêu gọi hành động Kiểm tra thăm dò Kêu gọi nhắm đến người dùng để tương tác cụ thể với HMI, phần lớn tìm thấy thành phần HMI tương tác nút nhấn Người dùng tùy ý tìm hiểu mẫu thử bắt đầu thử nghiệm Mục tiêu: Phản hồi ấn tượng thiết kế Dashboard Lỗi Nơi tập trung thông tin thiết lập trực quan (ví dụ: với biểu tượng, đồ họa, sơ đồ) làm cho chúng dễ hiểu nhanh chóng Bạn phân biệt lỗi gây người dùng hệ thống Trong lỗi hệ thống thường đại diện cho cố kỹ thuật máy khó tránh được, lỗi người dùng người vận hành hạn chế thiết kế HMI tốt Tần suất Biểu tượng Bối cảnh Các chức thường xuyên sử dụng Hình ảnh nhỏ đại diện cho chức khu vực chức Thường tiết kiệm không gian biến thể văn Mỗi HMI sử dụng bối cảnh cụ thể Điều đặc trưng tính loại người dùng, tác vụ môi trường Tương tác Bố cục Các hành động phản ứng có liên quan người dùng máy thơng qua HMI Việc xếp thành phần hình HMI Lặp lại Mẫu thử có độ xác thấp Mơ tả q trình lặp lại nhiều hành động tương tự để mô giải pháp thiết kế kết Là mẫu thử trọng vào yếu tố cần thiết: Vị trí chức thơng tin hình khu vực điều hướng người dùng Tính qn Menu Màn hình Điểm khởi đầu để vận hành HMI hiển thị cho người dùng sau hoàn tất thủ tục đăng nhập Vì lý này, gọi hình bắt đầu – start screen Mẫu thử có độ xác cao Là mẫu thử hiển thị mức độ chi tiết cao chức phong cách xem đối nghịch với ngun mẫu có độ xác thấp Đây mẫu thử sát với HMI sau Thư viện HMI Một module bao gồm trang thành phần tạo sẵn tạo điều kiện cho việc xây dựng mẫu thử bắt đầu nhanh chóng Các thành phần giống có liên quan nên trì quán cách xếp, màu sắc chức toàn HMI Ví dụ: Một menu ln ln vị trí HMI Ngược lại với quy trình làm việc: Khu vực thu thập có cấu trúc cho nhiều chức khác mà người dùng tự lựa chọn 147 Điều hướng Phù hợp Cây cấu trúc Các thành phần điều hướng cho phép điều hướng thông qua HMI Các thành phần menu loại, quy trình làm việc, nút nhấn tab Các chức phù hợp đặc biệt quan trọng, sử dụng Sơ đồ biểu diễn mối quan hệ thường phân cấp hình HMI Giới thiệu Phong cách Việc giới thiệu sản phẩm/dịch vụ thị trường Cũng gọi mắt Trong bối cảnh thiết kế HMI, thiết kế đồ họa liên quan đến việc lựa chọn màu sắc, kiểu biểu tượng, phông chữ, v.v Phác thảo Biểu mẫu Các hình HMI phác thảo, sử dụng làm công việc sơ cho wireframes sử dụng để nhanh chóng thực ý tưởng bố cục Biểu mẫu cho hoạt động cụ thể quy trình thiết kế, giúp hoạt động mục tiêu, có cấu trúc hiệu Điểm khó Các yếu tố đặc biệt gây khó chịu cho người dùng có ảnh hưởng tiêu cực đến hiệu hoạt động với HMI Persona – cá nhân hóa Đại diện điển hình nhóm người dùng hiển thị dạng hồ sơ Một biểu mẫu cá nhân hóa giúp đảm bảo tính thống cho thứ Mẫu thử Là phiên HMI thường triển khai nhanh chưa hoàn thiện để thử nghiệm thiết kế HMI với người dùng 148 Thử nghiệm Các bên liên quan Một nhóm người có lợi ích hợp pháp kết trình thiết kế HMI Ví dụ người dùng bên liên quan Giai đoạn trình thiết kế HMI kiểm tra với người dùng để khám phá tiềm tối ưu hóa Nút Undo Là nút hồn tác mục nhập hành động gần người dùng nhấn Trường hợp sử dụng Mô tả tác vụ mà người dùng thực HMI Wireframe - Khung Thể xếp nội dung thiết yếu hình, ví dụ thành phần điều hướng đầu vào, nút nhấn, v.v Quy trình làm việc Trình tự xác định bước công việc mà người dùng hướng dẫn để xử lý trường hợp sử dụng (ví dụ: trình hướng dẫn thiết lập) 149 Tài liệu tham khảo Web UX design: bananas as best practice Dieter Petereit | 2018-10-01 URL: https://www.drweb.de/ux-design-bananen-best-practice/ [2019-01-18] 27 steps to the perfect website layout Claudio Guglieri | 2018-10-01 URL https://www.creativebloq.com/web-design/steps-perfect-website-layout-812625 [2019-01-18] Usability glossary CausaUse consulting | 2007-2015 URL: http://www.causause.de/wissen/usability-glossar.html [18.01.2019] UI/UX Design Glossary Navigation Elements Tubik Studio | 2017-05-05 URL: https://uxplanet.org/ui-ux-design-glossary-navigation-elements-b552130711c8 [18.01.2019] User interface elements usability.gov | 2013-10-09 URL: https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html [18.01.2019] 150 Sách The Design of Everyday Things: Usability Engineering Revised and Expanded Edition About Face: Interface and Interaction Design (mitp Business) Don Norman Jakob Nielsen Alan Cooper Basic Books, 2nd Edition (2013) ISBN: 978-0465050659 Morgan Kaufmann, revised edition ed (1994) ISBN: 978-0125184069 Mitp publishing house, 1st Edition, 2009 (2010) ISBN: 978-3826658884 The Invisible Computer Contextual Design: Design for Life Universal Methods of Design (MIT Press) (Interactive Technologies) Donald A Norman Karen Holtzblatt, Hugh Beyer Bella Martin, Bruce Hanington MIT Press, revised edition (1999) ISBN: 978-0262640411 Morgan Kaufmann, 2nd Edition (2016) ISBN: 978-0128008942 Rockport Publishers, 1st Edition (2012) ISBN: 978-1592537563 151 Bản quyền & hình ảnh Quẩn lý dự án: Felix Kranert, Oliver Gerstheimer, Sebastian Frei Thiết kế ý tưởng: chilli mind GmbH, Design Team, Kassel Tiêu đề Siemens AG Getty Images, Siemens AG, Siemens Financial Services Siemens AG Siemens AG Siemens AG chilli mind GmbH 10 chilli mind GmbH 12 Getty Images 15 Siemens AG 17 Siemens AG, Sketch chilli mind GmbH 18 Siemens AG 23 Siemens AG 26 Siemens AG 28 Hình ảnh Dominik Scythe on Unsplash 30 Hình ảnh Sid Verma on Unsplash, Sketch chilli mind GmbH 32 Caiaimage/Lukasz Olek/Getty Images 34 Siemens AG 36 Hình ảnh rawpixel on Unsplash, Sketch chilli mind GmbH 38 Weber 39 Weber 42 Hero Images/ Getty Images, Sketch chilli mind GmbH 44 portishead1/Getty Images 46 DKart/Getty Images, Sketch chilli mind GmbH 47 Flickr 48 Media Center Audi 49 Sketch chilli mind GmbH 50 Georgijevic/Getty Images 51 Sketch chilli mind GmbH, Flickr 52 zhaojiankang/Getty Images 54 chilli mind GmbH 55 chilli mind GmbH 58 xxmmxx/Getty Images 60 Pichet Suriya / EyeEm/Getty Images 61 Sketch chilli mind GmbH 62 Hình ảnh José Alejandro Cuffia on Unsplash 64 santofilme/Getty Images 66 Hero Images/Getty Images 68 Caiaimage/John Wildgoose/Getty Images 72 Trevor Williams/Getty Images 73 Sketch chilli mind GmbH 74 Siemens AG 75 Siemens AG, Sketch chilli mind GmbH 76 David Crunelle / EyeEm/Getty Images 78 Kerkez/Getty Images 80 Getty Images 82 PhonlamaiHình ảnh/Getty Images 84 Siemens AG 85 Siemens AG 88 Sam Edwards/Getty Images 89 Sketch chilli mind GmbH 90 Hero Images/Getty Images 92 Hình ảnh Pawel Janiak on Unsplash 94 yoh4nn/Getty Images 96 Hình ảnh Rémi Walle on Unsplash 97 Sketch chilli mind GmbH 98 Getty Images/iStockPhoto 102 Siemens AG 104 ShadeON/Getty Images 106 Monty Rakusen/Getty Images, Sketch chilli mind GmbH 108 Westend61/Getty Images 110 Hero Images/Getty Images 112 Siemens Financial Services 113 Sketch chilli mind GmbH 114 Siemens AG 115 Siemens AG 118 FangXiaNuo/Getty Images 120 janzgrossetkino/Getty Images 121 Siemens AG 122 Siemens AG 124 Hình ảnh Harpal Singh on Unsplash 125 Icon thực Smashicons from www.flaticon.com, Icon thực dDara from www.flaticon.com, Icon thực Vectors Market from www.flaticon.com, Icon thực Freepik from www.flaticon.com, Icon thực Freepik from www.flaticon.com, Icon thực Gregor Cresnar from www.flaticon.com, Icon thực Freepik from www.flaticon.com, Icon thực Smashicons from www.flaticon.com 126 Siemens AG 127 Sketch chilli mind GmbH 128 Axel Lauerer/Getty Images 130 Siemens AG 144 Siemens Financial Services Back cover Siemens AG Nếu hình minh họa sử dụng tài liệu này, tìm hiểu cẩn thận, vi phạm quyền có công ty cá nhân, nhà xuất xin cáo lỗi cần vui lịng thơng báo lại Các lỗi sửa chữa phiên sau 152 Khái niệm lớp học thiết kế HMI Siemens với đơn vị, 10 form mẫu làm việc, áp phích sách tập nhận Giải thưởng Thiết kế IF 2019 Được xuất Siemens AG 2019 Ban Nhà máy số 90475 Nuremberg Đức Giấy phép.: DFFA-T10565-00-7600 Được in Đức Dispo 06333 WS 02192.0 Án phẩm cịn số lỗi cịn sửa đổi Thơng tin tài liệu bao gồm mô tả chung và/hoặc đặc điểm vận hành khơng ln ln phản ánh mơ tả, cịn sửa đổi q trình phát triển thêm sản phẩm Các đặc điểm vận hành yêu cầu trở nên ràng buộc chúng thỏa thuận rõ ràng hợp đồng thống DFFA-T10565-00-7600 Workbook HMI Design