Formun Üstü

HMI Ekran Tasarım İlkeleri

Bir operatör ekranını başarılı yapan nedir?

Neler olabilir ?
Yanlış anlaşılabilir, operatörünüz bir göstergeyi atlayabilir, para kaybedersiniz yada daha kötüsü birisi incinebilir.

İyi HMI tasarım?

Kötü HMI tasarım?

Bu makale teknik personellere ekran grafikleri tasarlamaya başlamak için özet bilgiler sunar. Özetleri burada bulabilirsiniz:

Ekran sayfaları açık ve temiz olmalı, kullanımı kolay ve kontrol masasının karşısından rahatlıkla okunabilir olmalı:

Arka planlar – yumuşak tonlu renkler kullanın – açık gri uygundur.
Gölgelendirme metodu ekranı alt sayfalara bölmek için önerilen bir yöntemdir.
Arkalan grafikleri yumuşak tonlu renkler içermeli, alarm renkleri kolaylıkla ayırt edilebilmeli.
Objeleri vurgulamak için siyah dış hatlar kullanın.
Yazı(text) – Tüm PC’lerde aynı olan standart bir yazı fontu kullanın.
Netlik ve açıklık için ekran üzerinde San serif fontları kullanın – Örnek: Arial.
Yazı boyutu uzaktan okunabilecek yeterli büyüklükte olmalı.
Örnek: Arial 16.
Pop-up pencereler yada nesne üzeri açıklama(tool-tips) gibi daha fazla detay yazıları eklenmeli.
Sistem alarm durumu tüm sayfalarda görülebilir olmalı.
Alarm durumu ekranın üstünde gösterilmeli.
Alarm renkleri alışılageldiği gibi olmalı. Kırmızı = alarm, Sarı = uyarı, Yeşil = problem yok (OK).
Alarmlar için – renksiz bağımlı ilave göstergeler kullanın;
pozisyon, yazı, v.b.
Kabul edilmemiş alarmların flash yapması ve alarmda otomatik sayfa değiştirmeden kaçınılmalıdır.
Sesli uyarılar alarmları vurgulamak ve önem sırasına göre belirtmek için iyi bir yöntemdir.
Dinamik data sayfanın tarama alanı içinde pozisyonlanmalı. Örneğin;üzerinde, merkezi ve alt sağ.
Data mantıklı bir şekilde gruplandırılmalı.
Data değerleri net ve birimleri belirgin olmalı
(fakat her değerle tekrarlanmaz).
Data çözünürlüğü kullanıma uygun olmalı, çok fazla noktalı sayı kullanmaktan sakının; 546,45 C gereksiz ve karışıktır.
“Çalışıyor” & “Durdu” göstergeleri olarak Yeşil & Kırmızı gibi renkler kullanılıyorsa, daha anlaşılır olması için yazıda ekleyin.
Tesis durum göstergesinde sadece renk değişimlerine güvenilmemeli.
Renk kombinasyonları dikkatle seçilmeli ve uygun renkler ve tonlar kullanılmalı.
Geçiş butonları(Navigation buttons) kolayca seçilebilmesi için belirgin ve yeteli büyüklükte olmalı.
Bir sonraki sayfaya‘Next Screen’ geçiş butonu ideal olarak sayfanın sağ altında bulunmalı.
‘Ana Sayfa / Genel Açıklama’ buttonu her sayfada bulunmalı.
(ideal olarak alt sol köşededir).
Diğer geçiş butonları için en ideal yerleşim sayfanın alt kısmıdır.
Kontrol butonları işlemi onayla‘confirm action’ sorgu penceleri ile onay istemeledir.
Tüm sayfalar uyumlu bir görünüm ve his vermeli. Geçiş butonları aynı yerde olmalı.
Herşey tertipli ve düzenli olmalı.

Daha fazlasını öğrenmek için bu yazının devamını okuyun....

Önsöz

Modern kontrol odası sistemlerinin tümü tesis operatörlerine bilgiyi aktarmak için görsel ekranlar kullanır; çoğu kez bu operasyonel verinin birincil kaynağıdır. Bu ekranların belirginliği ve anlaşabilirliği tesisin ne kadar iyi çalıştığını tanımlayabilir. Bilgi eksikliği operasyonel verimsizlik, gereksiz aşınma ve yıpranma, aşırı durumlar, tehlikeli olabilecek bir problemin hatalı görülmesi gibi sonuçlara neden olabilir.

Ayrıca bu durumu da hatırlayınız; tasarımcı ekranın karşısına yakın oturacaktır, oysaki kontrol odasında ekran masadan belli bir uzaklıktan yada odanın köşesinden izlenecek. Bu durumda bazı detaylar kaybolabilir. Tesiste varolan problemler operatör gözlüğünü evde unutsa bile uzaktan bakıldığında apaçık görülebilmeli !

Burada hedeflenen maksat ekran dizaynı için bazı ilkeler sunmaktır. Böylece bir çok görünmez tehlikeye meydan verilmeyebilir ve müşterileriniz kullanıcı dostu, açık ve okunak, kullanışlı ve amacına uygun ekranlar elde edibilir.

Sayfa Yerleşimi

Herhangi bir ekran tasarlamanda önce bir kullanıcının bunu nasıl kullanacağını anlamak yararlı olacaktır. Genellikle kullanıcılar bir ekran sayfasını bir dergi sayfasını tarar gibi tarayacaklardır. Bu batı ülkelerinde sol üst köşeden sağ alta ve sayfayı aşağı doğru okuma şeklindedir. Bu kitap okuma gibi değildir. Bize yardımcı olacak bir hat yoktur, bu nedenle sadece aşağıdaki örnekte önerildiği gibi 2 veya 3 tamamlanmamış tarama yaparız.

Bu durum hesaba katıldığında, sayfa tasarlayıcı şunu sağlamalı; önemli şeyler “tarama” hattı üzerinde bulunmalı. Alarmlar bu nedenle sayfanın üstünde yer almalı, önemli data sağ ortada belki buton ve kontroller sağ altta yer almalı. Desteklenen grafikler ve firma logosu yerleşimi için sayfanın sol alt kısmı daha uygun olacaktır.

Renk Durumları

Ekrana bir şeyler koymaya karar vermeden önce renklerin nasıl kullanılacağı hakkında fikir sahibi olmak gereklidir. Renkler önemli derecedeki bilgilerin görünümünü artırmak için güçlü bir araçtır. Bu nedenle renklerin ölçüsüz ve düzensiz kullanımı sayfada karışıklığa ve bu neden olur.

Sayfa üzerindeki tüm renkler 3 ana renkten ortaya çıkmıştır;
Kırmızı, Yeşil, Mavi
Diğer ara renkler bu ana renk çiftlerinden meydana gelirler;
Yeşilimsi-mavi(cyan), mor-pembe(magenta), sarı

Renk Çemberi

Bir renk çemberi genellikle renkler arası ilişkileri göstermek için kullanılır.
Örneğin:

Tamamlayıcı karşıtlıklar(Complementary contrast) ana renklerin bulunduğu çemberin karşısından ara renkler ile oluşturulmuştur.
Örneğin:

Renkleri birlikte kullanmak zor odaklanan gözlerde etki oluşturmak için kullanışlıdır.

Bitişik ara renk çiftleri(cyan, sarı, magenta), ana renk çiftlerinden(kırmızı, yeşil, mavi) daha yüksek karşıklık üretirler ve daha zarif olur.

Örneğin:

Uygun Ekran Renkleri Seçimi

Göz ana renkleri retinadaki renk algılayıcıları ile öncelikli olarak seçer. Kırmızı, yeşil ve mavi ışığa duyarlıdır. Mavi renk algılayıcıları diğerlerine göre daha azdır, bu nedenle maviyi az fark ederiz ve mavi ince hatların görülmesi daha zordur. Küçük gösterge nesneleri için mavi kullanmaktan kaçınılabilir, bununla birlikte mavi renk iyi bir arka plan rengi olabilir.

Bir ekran için renk seçiminde olmazsa olmaz kabul, tesis durum gösterge ve alarmlarıdır.

Seçilen renk alışkanlıklara uygun ve herkes tarafından aynı anlamda algılanır olmalı. Güvenlik işaret standardı (BS 5378) aşağıdaki gibi tanımlanır;

Kırmızı = stop, yasak, tehlike
Sarı = uyarı, tehlike riski
Yeşil = güvenli durum
Mavi = zorunlu eylem.

Herhangi bir ekran dizaynı önemli güvenlik renklerinin net bir şekilde görünümünü sağlamalıdır ve bu renkler başka amaçlar için kullanılmamalıdır. Ana renklerin büyük bloklar halinde kullanımından kaçınılmalıdır. Örn; kırmızı. Çünkü bu renkler retinada kalıcı renk görüntüsü bırakmaktadır.
Bu durumu kendinizde test edebilirsiniz; eğer parlak kırmızı bir alana baktıktan sonra beyaz bir duvara baktığınızda aynı görüntüyü yeşil göreceksiniz.

Tasarımcılar şu durumunda farkında olmalı ki, genelde 12 erkekten biri değişik derecelerde renk körlüğü vardır. Bu sebeple kırmızı ve yeşilin algılanmasında (sarı, turuncu, kahverengi renklerinde de) bazı karışıklıklar olabilir. Bunun anlamı ekran tasarımcıları, tesis durum göstergelerini sadece renklerle göstermeye tamamen güvenmemelidirler.

Arkaplan Renkleri

Siyah ve beyaz yazılar için iyi bir karşıklık sağlar. Fakat çok fazla göz kamaşıklığı üretir ve geniş bir renk aralığı için iyi bir arka plan sağlamaz.
Yumuşak tonlu renkler arkaplan için en iyi seçimdir.(gri, kahve, mavi v.b)
Bu renkler önemli dinamik dataların gösterimi için kullanılan renkli, parlak renklerin(kırmızı, sarı, yeşil, cyan, magenta, beyaz) vurgulanması için daha iyi karşıtlık(constrast) sağlar.

Farklı arkaplan renkleri kullanmak bazen sayfa gruplarını hemen tanımlayabilmek için iyi bir etki bırakabilir. Örneğin; açık gri ana tesis için, çok açık kahve yağ tankı sahası, açık mavi su tesisi için gibi.

Ekranın ayrılmış alanlarında yükselen ve düşen bölümlerinde ince bir gölgelendirme kullanmak göz yanılgısı yaparak çok güzel bir etki oluşturur.

Statik Resimler

Ekran görüntüleri sıklıkla üretim tesisinin temsili bir şemasını (mimic diagram) içerir. Güzel hazırlandığında bu çoğunlukla operatöre, tesisi ve ölçüm bölgelerini hemen gözünün önüne getirmesine yardımcı olacaktır. Bununla birlikte çok fazla detay ise ekranda karmaşıklığa neden olacak ve önemli dinamik dataların görülmesini zorlaştıracaktır.
Bu nedenle mümkün olduğunca sade ve düzenli tutun.

Yumuşak tonlar kullanmak tesis şeması için en iyisidir. Güçlü renklerin geniş alanlarda kullanımı önemli dinamik dataların etkisini azaltacaktır. Nesnelerin göze çarpan vurgularını artırmak için iyi bir metod, anahatlarını siyah yapmaktır. Çünkü göz siyah bir şekli kolaylıkla görebilir.

Bazen arkaplan olarak tesisin fotoğrafı kullanılır; genellikle bu fotoğraflar zayıf aydınlatılmış olur ve sürekli sabit, değişmeyen çok fazla detay içerir.
Çok karışık arka planlar gösterir ve renk karşıtlığını optimize etmek için çok az fırsat sağlar. Fotoğraflar sadece nadir şartlar altında kullanılmalı ve iyi çözünürlükte ve kalitede olmalı.

Bazen arkaplan resimleri geniş bir grafik nesne kütüphanesinden kullanılan grafik nesneleri ile geliştirilir. 3D serisi gri gölgeli silindirik bir tank eklemek ekranı hemen fark edilebilir yapmakta, fakat 3D borular, pompalar, valfler, v.b ekranı küçük gösterebilir ve ekranı çok karmaşık hale getirebilir.

Arkaplanda cezbedici bir gerçekçilik oluşturmaktan kaçınılabilir. Esas itibariyle çok iyi bir perspektif, ölçeklendirme ve gölgelendirme gerçekte mümkün değildir. Bu çok uzun bir zaman alır ve sonuç hayal kırıklığı olacaktır. Asıl gerçekçilik bundan sakınmaktır.

Yazı & Data Değerleri

Belki de ekranla ilgili en çok ortak şikâyet yazının okunmasının kullanıcıya zor gelmesi ile alakalıdır. Maalesef operatöre bilginin aktarımının en kullanışlı yolu hala yazı kullanmaktır.

Font Seçimi

Yüzlere elverişli font vardır fakat birkaç basit temel kural problemleri çözecektir. Tüm bilgisayarlarda bulunabilecek ortak bir font seçin. Örneğin; Arial, Helvetica, System, v.b. Eğer Windows işletim sistemi için ekran dizayn ediyorsanız ve seyrek kullanılan bir font tercih etmişseniz, kullandığınız bu fontun projenizin çalışacağı diğer bilgisayarlarda da bulunmasına veya bu bilgisayarın fontlarına da eklenip yeniden adreslendiğine emin olunuz.

Kullanılacak font’un belirlendikten sonraki aşama ise font’un boyutuna karar vermektir. Temel olarak, önemli bilgiler birkaç feet(1feet 30.48cm) uzaklıktan okuma gözlüğüne ihtiyaç duymadan rahatlıkla okunabilmeli. Arial 16 iyi bir başlangıç olabilir. Etiketler ve başlıklar için 2 katına kadar daha büyük boyutlar seçilebilir. Temel sitilde bir font seçtiğinizde, onun kullanmaya devam edin ve başka font veya 3 katından büyük boyuttan kullanmaktan kaçının. Eğer temin edebilirseniz text’lerinizde pop-up pencere yada açıklama(tool-tip) ile daha fazla detay sağlayın. Böylece kullanıcı ilave açıklama görmek için bunları seçebilir.

ÇOK FAZLA BÜYÜK HARFLİ YAZI KULLANIMI OKUMAYI ZORLAŞTIRABİLİR VE GÖZ ZORLANMASINA NEDEN OLABİLİR, ÖZELLİKLE ALTI ÇİZİLİ KULLANILDIĞINDA.
Büyük harf kullanımı başlıklar için rezerve edilmeli. Yazılarda kelimenin ilk harfi büyük olmalı, diğerlerinde küçük harf kullanılmalıdır. Bazen başlangıç harfinin nerede büyük olacağı durumu problem oluşturabilir. ‘Exhaust Valve Temperatures’ kullanımı ‘Exhaust valve temperatures’ kullanımına göre daha fazla tercih edilebilir. İkisinden biri seçilebilir, sadece uyum içinde olduğuna özen gösterin.

Yazı Data Değerleri

Yazı ve özellikle data değerleri ekranın bir bölümünde gruplandırılmalı. Bir resim etrafına rastgele dağıtılmış data değerleri, gözün verileri okuma taraması için zorluk oluşturabilir. Eğer kullanıcının data değerlerini karşılaştırması isteniyorsa bunları bir tabloda yan yana yerleştirin. Eğer aynı data tiplerinden oluşan birçok tablo varsa, Örneğin; sıcaklık, basınç, hız, v.b dataların her bir tabloda benzer sıraya göre yerleştirildiğinden emin olunuz.

Birimlere de özen gösterilmeli. Fakat şunu bilmekte önemlidir, Örneğin; “milibar” ile gösterilen basınç “mBar” diye yazılırken ekranda her ölçümün yanına yazmak gereksizdir ve karışıklığa sebep olabilir.

Gereksiz ondalık kullanımından kaçının. Data çözünürlüğü gösterimi kullanımın amacına uygun olmalı. Örneğin; ölçümün hassasiyeti +/- 2C ile limitli ise 546.45 C kullanımı gereksiz ve okunması zordur.

Arkaplanda kabartma ile yapılan ince, hassas değişiklikler çoğunlukla yazı ve dataların gösterimini artırmak için kullanılır. Eğer bunu tasarımınıza eklemeyi seçmişseniz, uyum içerisinde olmasını sağlamanız önemlidir.

Alarmlar ve Tesis Durum Animasyonu

Bir HMI ekranın önemli bir yönü dinamik tesis datasıdır. Dinamik datanın 2 temel tipi vardır: Alarmlar ve normal Tesis Durum data.

Alarmlar

Tüm tesis için alarm durumu, tercihen gruplar içerisinde organize edilebilir, her ekranda görülebilir olmalı ve tüm alarmlar hakkında ek detaylar içeren bir ekrana ulaşım için basit bir geçiş yolu sağlamalı.
Alarm renkleri standart güvenlik renklerinde olmalı:

Kırmızı = stop, yasak, tehlike
Sarı = uyarı, tehlike riski
Yeşil = güvenli durum
Mavi = zorunlu eylem.

Her 12 erkekten biri renk körlüğünün çeşitli türlerine sahip olduğundan bu durum kırmızı ve yeşil renklerin algılanmasını etkileyebilir. Bu sebeple renkler alarm gösteriminde tek başına yeterli bir method olarak kullanılmamalıdır. Herhangi bir renk değişimi resimli bir değişimle ve alarm kritik ise ses ikazı ile desteklenmeli.

Resimli değişim, bir şekil değişimi, bir göstergenin pozisyon değişimi, ilave açıklama yazısı veya alarmda gözüken nesneleri içerebilir. Kabul edilmemiş alarmların flash yapması sinir bozucudur ve gerginlik yapar. Bu nedenlerden dolayı bundan kaçınılmalıdır. Benzer olarak, ekranın otomatik değişiminden kaçınılmalı. Bir ekran üzerinde çalışıyorken onun kaybolması sinir bozucudur ve çok nadir durumlarda ardışıl alarmlar çok fazla ekran tazelemesine sebep olur ve operatör sistemi kapatmak zorunda kalabilir.

Sesli ikazlar çok kullanışlı olabilir, özellikle eğer sistem çoklu tonlu ve testere dişli(pitched) ise. Bu tonlar alamın önemini bildirmede kullanılabilir. Araştırmalar göstermiştir ki, yüksek testere dişi(pitched) sesli, hızlı darbeli ses otomatik olarak acil bilgisini, oysaki daha düşük testere dişi(pitch), yavaş darbeli ses daha az acil bilgisini aktarır.

Her ne alışkanlık olursa olsun, alarmlar ekranda kolayca görülebilecek bir yere konulmalı, önerimiz ekranın üst kısmında bulunmasıdır.

Tesis Durum Animasyonu

Kurallar genellikle alarmlar için iyi tanımlanmışken, bazı tasarımcılar tesis durumları için renk kullanırken problem yaşarlar. Bazıları ilgi çekmek için çalışan tesisi yeşil, durdurulan tesisi kırmızı ile belirtir. Halbuki alarm mantığına göre kırmızı tehlike, çalışan tesis ve yeşil güvenli, durdurulmuş tesisi gösterir. Güç endüstrisindeki kural KIRMIZI-RUNNING simgeler, fakat tesis durumu daima başka bir gösterge tarafından da belirtilmeli, tercihen yazı “RUNNING” v.b.(renk körlerini de dikkate alınız). Eğer bir alarm için kırmızı durum göstergesinde bir karışıklık riski varsa diğer renk kombinasyonları kullanılabilir.

Geçiş(navigation) ve Kontrol

Geçiş(navigation)

Bir ekran kullanımında operatör, sayfalar arasında hızlıca ve kolaylıkla geçiş yapabilmelidir. Microsoft Windows’un genel kabulüne göre, seçim için kullanılan operatör kontrol cihazı “mause” yada benzer seçim aracıdır ve başlıca navigasyon aracı olarak klavyelerin yerini almıştır. Sezgisel seçim araçlarının çoğu ise dokunmatik ekranlardır.

Hangi seçim aracı seçilirse seçilsin, ekranda seçim gerektiren önemli bölgeler
“hot spot” kolaylıkla tıklama için belirgin bir şekilde ve yeterli büyüklükte olmalıdır. Önemli bölgeleri “hot spot” belirtmek için 2 ana metod vardır; en bilineni ekrana bir buton eklemektir. Birisi, butonun etkisini göstermek için açık olarak etiketlenmiş olmalıdır. Diğer bir yaklaşım ise önemli bölgeleri “hot spot” ‘u resim içerisine yerleştirmektir. Bu, tesisin şematik yerleşimini gösteren genel bakış(overview) sayfalarında çok iyi bir etkisi vardır; herhangi bir alana tıklanarak daha fazla detay içeren sayfalara geçiş yapılabilir.

Sayfalar arası geçiş basit, belirgin ve hızlı olmalıdır ve mantıksal bir düzende olmalıdır. Navigasyondaki “İLERİ” seçimi daima çok belirgin ve açık olmalıdır; sayfanın alt sağ köşesi “İLERİ” butonu yerleştirmek için iyidir. Aynı zamanda ekranda bir önceki sayfaya geri dönüşte mümkün olmalıdır. Tüm sayfalar aynı zamanda sayfaların başlangıcına dönebilmek için bir butona yada önemli bölgeye”hot spot” sahip olmalı ve genellikle genel bakış“Overview” olarak bilinir. Bu iyi dizayn edilmiş bir web sayfasındaki ana sayfa“Home” gibidir. Bu genel bakış butonunun çok belirgin olmasına gerek yoktur ve her sayfada aynı pozisyonda yer almalıdır; genellikle alt sol tercih edilir.

Eğer mümkünse, geçiş(navigasyon) butonları kullanım kolaylığı için, operatörün çok fazla mause ileri-geri hareket yapmasına gerek duymayacağı şekilde, birlikte gruplandırılmalı. Eğer kullanıcı rutin olarak iki yada daha fazla sayfa arasında geçiş yapıyorsa, bir sonraki sıradaki sayfaya geçiş butonunun her sayfada aynı pozisyonda bulunması iyi bir fikirdir. Böylece kullanıcı sayfalar arasında seçim aracını”mause” hareket ettirmeden hızlıca geçiş yapabilir.

Kontrol

Kontrol için butonlar yada önemli bölge”hot spot” kullanılırken bir pop-up pencere ile seçilen operasyonun onaylanması sağlanmalı.Örneğin; “Start Feed Pump – OK yada Cancel”. Bu durum yanlışlıkla tesisteki bir ünitenin aktif edilmesini önler ve yeni kullanıcıların sisteme hasar verme yada yaralanma kaygısı olmadan incelemesine olanak sağlar.

Önerilerin Özeti

HMI ekran dizayn edilirken kesinlik yoktur ve herkes kendi tercihine sahip olacaktır.

Aşağıdaki ekranlar aynı tesisin iki gürünümünü gösterirler.

“İyi” ekran burada anlatılan iyi sayfa düzeni, renklerin dikkatli seçimi ve güzel yerleştirilmiş anlaşılır geçiş(navigation) butonları ilkelerini takip eder. Aynı zamanda sayfanın üst kısmında ortak bir alarm göstergesine sahiptir.

İyi Ekran

“Kötü” ekran yeterliliği azdır. Zayıf sayfa düzeni, tesis gösterimi mantıklı değil ve sayfa düzeni dataların yerleşimini zorlaştırmakta. Zayıf renk seçimi, serif fontu ile aşırı kullanılmış büyük harf ve tüm data değerleri için birimlerinin tekrarlamalı kullanımı özellikle kısaca bir göz gezdirince yada uzaktan bakınca ekranı gerçekten okunması yapmaktadır. Ekran diğer sayfalara erişim için anlaşılır geçiş butonlarına ihtiyaç duymaktadır. En önemlisi, ekran herhangi bir şekilde alarm gösterimine ihtiyaç duymaktadır.

Kötü Ekran

Ümid ederiz ki hazırlanan bu notlar ile yaygın olan birçok hata bertaraf edilebilir.

Bir HMI ekran dizayn ederken herhangi bir üslup seçmişseniz, en önemli şey üslubun ekranın heryanında uygun düşecek şekilde takip etmesidir. Herbir ekran benzer izlenim ve hisse sahip olmalı; geçiş butonları aynı yerleşimde olmalı ve herşey düzenli, yerli yerince olmalıdır.

Formun Altı

PC Experiences Sharing

13 Kasım 2009 Cuma