{"id":1638,"date":"2021-03-23T16:14:55","date_gmt":"2021-03-23T09:14:55","guid":{"rendered":"https:\/\/www.akademiautomasi.com\/?p=1638"},"modified":"2026-05-20T11:05:45","modified_gmt":"2026-05-20T11:05:45","slug":"bagaimana-mendesain-industrial-hmi-yang-baik","status":"publish","type":"post","link":"https:\/\/www.akademiautomasi.com\/?p=1638","title":{"rendered":"Langkah &#8211; langkah mendesain industrial HMI yang baik"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Bagaimana Anda mendesain HMI untuk operator industri? Biasanya HMI akan didesain oleh <em>engineer <\/em>berdasar kebutuhan pengguna, dengan sedikit perhatian dari sisi desain. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beberapa minggu yang lalu saya membaca <em>workbook <\/em>dari Siemens yang sangat baik tentang &#8220;<a href=\"\\&quot;https:\/\/new.siemens.com\/global\/en\/products\/automation\/simatic-hmi\/hmi-design-workbook.html\\&quot;\" target=\"\\&quot;_blank\\&quot;\" rel=\"\\&quot;noreferrer\">Seven Steps to Good HMI Design<\/a>&#8220;. Dokumen tersebut menarik, karena melibatkan aspek &#8211; aspek desain yang kental. Dalam posting ini saya ingin menyampaikan sedikit ringkasan dan pelajaran yang saya dapatkan dari <em>workbook <\/em>tersebut.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ada 7 langkah yang disarankan untuk mendesain industrial HMI yang baik:<\/p>\n\n\n<div class=\"wp-block-image \\&quot;wp-block-image\\&quot;\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"611\" height=\"600\" src=\"http:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/seven-steps-hmi.png\" alt=\"\" class=\"wp-image-3930\" style=\"width:381px;height:auto\" srcset=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/seven-steps-hmi.png 611w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/seven-steps-hmi-300x295.png 300w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/seven-steps-hmi-600x589.png 600w\" sizes=\"auto, (max-width: 611px) 100vw, 611px\" \/><figcaption class=\"wp-element-caption\">7 langkah desain HMI dari Siemens  (Siemens) <\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">1. Rethinking HMI Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Desain tidak hanya untuk keindahan belaka, namun desain ialah aspek visual ditambah dengan fungsi. Keindahan tanpa fungsi menjadikan desain tidak bermanfaat.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote \\&quot;wp-block-quote\\&quot; is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">design = visual aspects + function<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Demikian juga saat membuat desain untuk operator industri, tujuan utama HMI designer bukanlah keindahan, atau 3D visual belaka, namun apakah aspek visual itu memenuhi tujuan untuk mempermudah tugas operator.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Understanding Contexts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bagian berikutnya ialah memahami konteks dimana HMI akan digunakan. HMI designer perlu berkomunikasi dengan pihak <em>customer <\/em>untuk memahami bagaimana HMI akan difungsikan dalam suatu proses di pabrik. <em>Interview <\/em>dengan calon pengguna (dari berbagai tingkatan, misal: manajer, <em>supervisor<\/em>, operator) juga perlu dilakukan sehingga untuk dapat mendesain HMI dengan tepat. Contoh sederhananya, jika ada istilah pada HMI berbahasa Inggris, apakah hal tersebut akan membantu operator atau tidak?<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Terkait konteks, ada 2 hal yang merupakan konteks bagi HMI:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Device atau panel (hardware HMI)<\/li>\n\n\n\n<li>Kondisi kerja operator (konteks untuk operator)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah itu kita perlu menemukan <em>pain points<\/em> dari <em>user<\/em>, sehingga HMI akan membantu dia mengurangi \\&#8221;rasa sakit\\&#8221; tersebut. Ingat, HMI yang buruk juga akan menambah kesulitan dari <em>user<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Siemens menyarankan digunakannya semacam form <em>interview <\/em>terhadap <em>real users <\/em>yang mencakup: task, content, dan <em>pain points<\/em> dari orang tersebut. Hal ini diharapkan dapat memberi informasi terkait konteks suatu HMI.<\/p>\n\n\n<div class=\"wp-block-image \\&quot;wp-block-image\\&quot;\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"427\" src=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/context-hmi.png\" alt=\"\" class=\"wp-image-3932\" srcset=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/context-hmi.png 728w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/context-hmi-300x176.png 300w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/context-hmi-600x352.png 600w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><figcaption class=\"wp-element-caption\"><a href=\"\\&quot;https:\/\/learnautomation.wordpress.com\/wp-content\/uploads\/2021\/03\/seven-steps-hmi.png\\&quot;\"><\/a>Form isian terkait konteks operator HMI (Siemens) <\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">3.  Drawing the big picture<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pada bagian ini, disarankan untuk membuat desain awal dengan pensil dan kertas secara manual. Saat mendesain di awal, kita perlu memperhatikan hal &#8211; hal yang umum terlebih dahulu, seperti: berapa jumlah halaman HMI dan apa jenisnya. Halaman utama HMI dan hubungannya dengan halaman &#8211; halaman lain (secara konsep) perlu dirancang kemudian. Hal ini dianalogikan dengan merancang arsitektur sebuah rumah.<\/p>\n\n\n<div class=\"wp-block-image \\&quot;wp-block-image\\&quot;\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"606\" height=\"339\" src=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-3.png\" alt=\"\" class=\"wp-image-3933\" srcset=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-3.png 606w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-3-300x168.png 300w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-3-600x336.png 600w\" sizes=\"auto, (max-width: 606px) 100vw, 606px\" \/><figcaption class=\"wp-element-caption\">Contoh layout dengan pensil dan kertas (Siemens) <\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Setelah layout umum, kita bisa masuk ke dalam masing &#8211; masing halaman dengan lebih detail. Bagaimana struktur halaman, apa fungsi halaman, obyek apa yang harus ada, berapa ukurannya, dst. Kita juga mulai bisa merancang menu dan <em>action areas<\/em> dari halaman HMI tersebut. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dalam mendesain, kita perlu dengan konsisten memposisikan bagian &#8211; bagian tertentu. Misalnya: tombol OK, NEXT, BACK, sebaiknya selalu ada di tempat yang sama di setiap halaman. Hal ini akan membantu operator untuk cepat terbiasa dengan tampilan HMI.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Conceptualizing the visual aspects<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pada bagian ini kita mulai merubah desain di atas kertas kita menjadi tampilan HMI dalam program komputer. Gunakanlah <em>template <\/em>jika tersedia, dan lakukan perubahan yang diperlukan setelahnya. Jangan dulu memikirkan pewarnaan atau <em>style<\/em>, namun lebih fokus pada fungsi halaman dan obyek &#8211; obyek pada halaman tersebut. <\/p>\n\n\n<div class=\"wp-block-image \\&quot;wp-block-image\\&quot;\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"572\" src=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-visual-siemen-s4.jpg\" alt=\"\" class=\"wp-image-3934\" style=\"width:626px;height:auto\" srcset=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-visual-siemen-s4.jpg 791w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-visual-siemen-s4-300x217.jpg 300w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-visual-siemen-s4-768x555.jpg 768w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-visual-siemen-s4-600x434.jpg 600w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><figcaption class=\"wp-element-caption\">Merubah sketsa ke tampilan program (Siemens)<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Pastikan kita tidak meletakkan terlalu banyak obyek dalam satu halaman. Hal ini dapat membuat  informasi tidak dapat dilihat operator dengan baik, dan banyak distraksi bagi operator. Pastikan obyek &#8211; obyek dalam halaman dikelompokkan sesuai fungsinya atau jenisnya. Jarak antar obyek tidak boleh terlalu jauh (jika obyek &#8211; obyek tersebut ialah 1 kelompok) atau terlalu dekat (sehingga membuat mata operator lebih mudah lelah).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Desining the Interaction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bagian ini berbicara tentang interaksi antara HMI device dan manusia. Mula &#8211; mula, pastikan <em>user<\/em> dapat melakukan semua fungsi yang diperlukan melalui menu. Kedua, kita perlu mengatur <em>workflow<\/em> untuk user, sehingga fungsi &#8211; fungsi kompleks dapat dibagi &#8211; bagi menjadi fungsi yang lebih sederhana. <\/p>\n\n\n<div class=\"wp-block-image \\&quot;wp-block-image\\&quot;\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"741\" height=\"384\" src=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-5.png\" alt=\"\" class=\"wp-image-3935\" style=\"width:488px;height:auto\" srcset=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-5.png 741w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-5-300x155.png 300w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-5-600x311.png 600w\" sizes=\"auto, (max-width: 741px) 100vw, 741px\" \/><figcaption class=\"wp-element-caption\">Contoh dari <em>workflow<\/em> halaman &#8211; halaman HMI  (Siemens) <\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Selain itu, berikan informasi solusi pada pengguna, jika ada kesalahan pada sistem. Kita juga perlu mencegah user untuk melakukan kesalahan, misalnya dengan memberikan informasi (masukkan angka: 0 &#8211; 100). User juga perlu dicegah untuk melakukan klik yang tidak disengaja, dan dapat berakibat fatal pada sistem keseluruhan. Terakhir, sediakanlah sistem <em>Help <\/em>sederhana pada HMI anda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Testing prototypes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pada bagian ini, prototipe HMI telah siap, dan kita perlu melakukan pengujian dengan <em>users<\/em> (<em>off-site <\/em>dan on-site) untuk mendapatkan saran perbaikan, ataupun menemukan kesalahan dari HMI. Pengetesan perlu dilakukan seawal mungkin dan sesering mungkin, sehingga didapatkan hasil yang terbaik. Dokumentasi sistem yang baik juga perlu disiapkan di sini.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Styling and finalizing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah HMI telah berfungsi dengan baik, maka pada tahapan akhir kita akan melakukan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Koreksi dan optimasi berdasarkan <em>feedback<\/em> yang diberikan selama <em>testing<\/em><\/li>\n\n\n\n<li>Graphical styling, final fine tuning, dan penambahan detail visual yang lain<\/li>\n\n\n\n<li>Merencanakan <em>rollout\/launching<\/em> dan komunikasi akhir dengan pengguna<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Graphical styling di sini meliputi penyesuaian warna dengan warna perusahaan, penggunaan effects pada obyek (misalkan gradient), penggunaan icons, ataupun penambahan logo perusahaan.<\/p>\n\n\n<div class=\"wp-block-image \\&quot;wp-block-image\\&quot;\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"228\" src=\"http:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-6.png\" alt=\"\" class=\"wp-image-3936\" srcset=\"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-6.png 737w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-6-300x93.png 300w, https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/hmi-siemens-6-600x186.png 600w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><figcaption class=\"wp-element-caption\">Perbedaan penerapan warna pada halaman (Siemens)<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><em>Launching<\/em> dan komunikasi akhir yang baik dengan pengguna dapat meningkatkan kepercayaan pengguna. Pastikan untuk mengkomunikasikan nilai tambah yang diberikan oleh HMI yang telah kita rancang.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity \\&quot;wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Demikian ringkasan yang saya buat, semoga bermanfaat!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Catatan: tulisan ini merupakan ringkasan dan terjemahan bebas dari \u201cHMI Design Workbook &#8211;\u00a0 Seven Steps to Good HMI Design, Siemens<\/em>&#8220;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Workbook Siemens tentang \\&#8221;Seven Steps to Good HMI Design\\&#8221; menekankan pentingnya merancang HMI dengan fokus pada fungsi dan konteks pengguna. Tujuh langkah desain termasuk memahami konteks, menggambar desain awal, mengkonseptualisasikan aspek visual, merancang interaksi, menguji prototipe, dan finalisasi secara grafis. Setiap langkah bertujuan menyempurnakan pengalaman pengguna operator industri.<\/p>\n","protected":false},"author":1,"featured_media":3930,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[39],"tags":[101,102],"class_list":["post-1638","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scada-hmi-tutorial","tag-desain","tag-hmi"],"jetpack_featured_media_url":"https:\/\/www.akademiautomasi.com\/wp-content\/uploads\/2021\/03\/seven-steps-hmi.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=\/wp\/v2\/posts\/1638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1638"}],"version-history":[{"count":1,"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=\/wp\/v2\/posts\/1638\/revisions"}],"predecessor-version":[{"id":3937,"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=\/wp\/v2\/posts\/1638\/revisions\/3937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=\/wp\/v2\/media\/3930"}],"wp:attachment":[{"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.akademiautomasi.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}