UX/UI · İnsan Makine Arayüzü

Noyatech

Noyatech’te pek çok web projesinde çalıştım, UX araştırmaları yürüttüm, arayüzler tasarladım ve bunların raporlarını hazırladım. Ama dönüp dolaşıp anlatmak istediğim kısım insan makine arayüzü tarafı oldu. Laboratuvar cihazları, üretim makineleri ve operatörlerin her gün eliyle dokunduğu paneller. Bu sayfa işin o tarafını anlatıyor.

SpinBox SN100+ control panel showing four syringe pumps

Orada tam olarak ne yaptım

Noyatech laboratuvar ve üretim cihazları üretip satıyor. Zamanımın önemli bir kısmı şirketin dijital tarafına gitti. Web siteleri, ürün sayfaları, UX incelemeleri ve neyin neden düzeltilmesi gerektiğini anlatan raporlar.

Diğer kısım, yani bana en çok şey öğreten kısım, makinelerin üzerindeki ekranlardı. Bir cihaz arabadan pahalıysa ve on sekiz saat durmadan çalışıyorsa, önündeki panel süs değildir. İçeride ne olup bittiğini anlamanın tek yoludur.

Birbirinden oldukça farklı pek çok cihazın kontrol panelinde çalıştım. Bu sayfadakiler o işlerden yalnızca birkaç örnek: bir elektro eğirme sistemi, bir şırınga pompası, bir dokuma tezgahı, bir taramalı elektron mikroskobu ve bir su arıtma ünitesi. Farklı dünyalar ama altta yatan problem aynı. Birinin ekrana bakıp bir saniyeden kısa sürede her şeyin yolunda olup olmadığını anlaması gerekiyor.

RolUX/UI tasarım, HMI arayüz tasarımı, UX araştırma ve raporlama
AlanLaboratuvar cihazları, üretim makineleri, endüstriyel kontrol
PlatformGömülü dokunmatik paneller ve masaüstü kontrol yazılımı
EkranlarFarklı cihaz aileleri, biri koyu biri açık iki ayrı arayüz dili

Makine ekranı web sitesi değildir

Kulağa açık geliyor ama oturup çizmeye başlayınca iş değişiyor. Web’de işine yarayan neredeyse her alışkanlık bir kontrol panelinde sana karşı çalışıyor. Birkaç şeyi unutmam gerekti.

Web’de

  • Karşındaki oturuyor, ışık iyi, elinde fare var.
  • Neredeyse her şey geri alınabilir. Yanlış tıklamanın bedeli bir saniye.
  • Bazı şeyleri menülerin arkasına saklayabilirsin, çünkü insan arar bulur.
  • Yüklenme bir andır. Dönen bir ikon cevap olarak yeter.
  • Güzellik işe yarar. Hoş bir ekran daha hiçbir şey okunmadan güven verir.

Makinede

  • Operatör ayakta, genelde eldivenli, bazen cama vuran bir lambanın altında.
  • Yanlış bir dokunuş iki günde hazırlanan numuneyi mahvedebilir, bazen de birinin canını yakabilir.
  • Bir şey önemliyse ekranda kalır. Proses çalışırken kimse menü karıştırmaz.
  • Makinenin fiziksel bir durumu var ve ekran ona her an uymak zorunda, sonradan değil.
  • Netlik güzelliği yener. İkisi anlaşamadığında tartışmasız netlik kazanır.

Dönüp dolaşıp geldiğim kurallar

Bunların hiçbiri bana verilmedi. İlk sürümde hata yapıp sonucun karşısında birinin zorlandığını izlemekten çıktı.

01

Önce durum, gerisi sonra

Tek bir etiket okunmadan önce ekranın tek bir soruyu cevaplaması gerekiyor. Makine çalışıyor mu, bekliyor mu, sorunlu mu. Bu bir bakıştan uzun sürüyorsa yerleşim yanlıştır.

02

Bir değer, bir yer, her zaman

Akış hızı gibi bir değer ekranda tek bir yerde durur ve oradan hiç kıpırdamaz. Operatörler hızla kas hafızası kuruyor. Bir sayının yerini değiştirmek onu küçültmekten daha kötü.

03

Renk anlam taşır, duygu değil

Yeşil, sarı ve kırmızı yalnızca makine durumuna ayrıldı. Panelde başka hiçbir öğe, ne kadar iyi duracak olursa olsun bu renkleri ödünç alamadı.

04

Geri dönüşü olmayanı iki kez sor

Yüksek gerilimi başlatmak, tankı boşaltmak, bir partiyi sıfırlamak. Bunlar ikinci bir adım aldı. Geri kalan her şey tek dokunuşta kaldı, çünkü gereksiz yerdeki sürtünme de kendi başına bir risk.

05

Parmak ucuna değil eldivene göre ölçülendir

Her dokunma alanı, nitril eldivenli bir elin dirençli panele biraz fazla bastırdığı düşünülerek çizildi. Tek başına bu karar birkaç yerleşimi baştan yazdırdı.

06

Ekran zaman konusunda yalan söylemez

Bir okuma üç saniye eskiyse ekran bunu söylüyor. Taze görünen bayat bir sayı, bir panelin birinin önüne koyabileceği en tehlikeli şey.

Ortamın senin yerine verdiği kararlar

Bu ekranların hiçbiri büyük bir monitörün başında, sessiz bir odada tasarlanmadı. Salon, aydınlatma, panel donanımı ve karşısındaki insan, ben daha hiçbir şey çizmeden kararların çoğunu vermişti.

01

Mesafe

Panel yarım metre kadar uzaktan okunuyor, üstelik eller genelde başka bir işle meşgulken. Telefonda gayet iyi çalışan gövde metni o mesafede kayboluyor.

02

Eldiven

Nitril, bazen iki kat. Küçük hedefler, dar aralıklar ve hassasiyet isteyen her şey daha ilk eskizden önce elendi.

03

Işık

Laboratuvar aydınlatması sert ve yukarıdan geliyor. Yansıma altında koyu ve yüksek kontrastlı paneller açık olanlardan çok daha iyi durdu.

04

Panel donanımı

Sabit çözünürlükler, sınırlı renk aktarımı ve telefondakinin yanına bile yaklaşamayan dokunmatik katmanlar. Tasarımın panele uyması gerekiyordu, tersi değil.

05

Klavye yok

Sayılar ekrandaki tuş takımıyla ya da artı eksi ile giriliyor. Bu, bir giriş alanını tasarlama biçimini temelinden değiştiriyor.

06

Saatlerce çalışıyor

Bazı prosesler tam bir iş günü sürüyor. Ekranın bir demo süresince değil, o sürenin tamamında okunur ve sakin kalması gerekiyor.

Beş renk, beş anlam, başka yok

Dokunduğum her panel aynı küçük sözlüğü kullandı. Biri bunu bir makinede öğrendikten sonra, tek satır eğitim almadan diğerine taşıyor.

Hazır Açık ama çalışmıyor. Yüklemek de kapağı açmak da güvenli.
Çalışıyor Proses kendisine söyleneni yapıyor. Yapılacak bir şey yok.
Dikkat Bir şey kaydı. Henüz bozulan yok ama birinin bakması gerek.
Hata Proses kendini durdurdu ve sebep giderilmeden tekrar başlamayacak.
Canlı tehlike Şu anda yüksek gerilim, sıcaklık ya da hareket var. Eller makineden uzak.

Kırmızı ve turuncu aynı ekranda hiçbir zaman yan yana gelmiyor, tehlike rengi ise panelin tamamını devralmasına izin verilen tek renk.

Örnek 01

SpinBox SN100+

Elektro eğirme yavaş ve nazlı bir proses. Dört şırınga pompası polimer çözeltisini toplayıcıya doğru iterken yüksek gerilim alanı onu lif haline çekiyor. Bir pompa kayarsa parti gidiyor ve bunu genelde saatler sonra fark ediyorsun. Bu yüzden panelin tamamı tek bir fikir üzerine kuruldu. Dört pompa, dört özdeş blok, kabinin içinde fiziksel olarak durdukları düzende. Sol soldur, sağ sağdır ve kimsenin ekranla makine arasında çeviri yapması gerekmez.

SpinBox SN100+ pump screen with four mirrored pump blocks and a fixed safety rail

Aynalanmış yerleşim

Soldaki iki pompa sola, sağdaki iki pompa sağa bakıyor, tıpkı donanımdaki gibi. Toplamlar dışta duruyor ki göz dört sayıyı tek geçişte karşılaştırabilsin.

Güvenlik kendi şeridinde

Duraklat, LED, fan, nem, reçeteler ve güvenlik solda sabit bir sütunda duruyor. Yer değiştirmiyor, kaymıyor ve el onlara ekranın çalışma alanını geçmeden ulaşıyor.

Her alt sistem için bir sekme

Pompalar, yüksek gerilim, mesafe ve toplayıcı, bir ayar ağacı yerine birer sekme aldı. Öğrenilecek dört şey var ve ilk günden sonra kimse etiketleri okumuyor.

Örnek 02

Tek başına şırınga pompası

Aynı pompa tek başına da satılıyor, önünde küçük ve dikey bir panelle. Burada bağlam için yer yok. Cihazdaki her şeyden daha önemli tek bir sayı var, o yüzden ekranın ortasını ve yüzeyin kabaca üçte birini aldı.

Etrafındaki halka en sevdiğim kısım. Kimse hiçbir şey okumadan işin ne kadar ilerlediğini gösteriyor. Laboratuvarın kapısından bakınca bir pompanın hacminin sonuna yaklaşıp yaklaşmadığını görebiliyorsun.

Durdur kırmızı, geniş ve solda, başparmağın doğal olarak düştüğü yerde. Loader sarı, çünkü mekanizmayı hareket ettiriyor. Menü bilerek sessiz, çünkü çalışma sırasında içinde kimsenin ihtiyaç duyacağı bir şey yok.

Standalone syringe pump panel with a rate dial, volume readouts and stop, loader and menu buttons
Örnek 03

TEX23 dokuma tezgahı

Dokuma salonu bambaşka bir yer. Kimse tek bir tezgahın önünde durmuyor. Kırk tezgahlık bir sırayı yürüyor ve geçerken her birine göz atıyor. Bu yüzden bu ekranın önce bir durum panosu, sonra bir kontrol paneli olarak çalışması gerekiyordu. Ayrıca koyu değil açık oldu, çünkü salon aydınlık ve panel camın arkasında açılı duruyor. Laboratuvarda bu kadar işe yarayan koyu yaklaşım burada aynaya dönerdi.

TEX23 rapier loom dashboard with a machine schematic, live parameters and an event list

Liste yerine resim

Çözgü, gücü çerçeveleri, tarak, rapier ve kumaş rulosu, her biri gerçekte durduğu yere çizildi ve durumu değişince renk değiştiriyor. Önünden geçen bir şef kelimeleri değil resmi okuyor.

Tek şeritte canlı değerler

Tek sırada sekiz okuma, hepsi aynı boyutta ve aynı ritimde. Hiçbiri dikkat için yarışmıyor, çünkü normal çalışmada hiçbiri diğerinden önemli değil.

Olaylar zaman taşıyor

Her kayıtta bir zaman damgası ve yanında bir durum ikonu var. Vardiya devrinde son üç satır gecenin bütün hikayesini anlatıyor.

Örnek 04

SEM 7000F elektron mikroskobu

Taramalı elektron mikroskobu tam tersi bir problem. Tek kişi, oturarak, saatlerce, tek bir görüntüyü izlerken bir düzine ayarı değiştiriyor. Burada ürün görüntünün kendisi ve geri kalan her şey ona hizmet etmek için var.

Canlı görüntü ortayı ve ekrandaki en geniş yeri aldı. Işın, büyütme, odak ve dedektör soldaki şeride, bir seansın gerçekte ilerlediği sırayla yerleşti. Numune tablası, vakum ve spektrum sağa gitti, çünkü onlar ayarlanmaktan çok kontrol ediliyor.

Kaydırma çubukları sayısal değerin yerine geçmiyor, yanında duruyor. Araştırmacılar bu sayıları not alıyor ve makalelerine koyuyor. Tek başına bir kaydırıcı onlara hiçbir işe yaramazdı.

SEM 7000F microscope interface with the live image in the centre and beam, stage and vacuum controls on the sides
Örnek 05

PURELAB X8 su arıtma

Su arıtma dışarıdan basit görünüyor. Bir tuşa basıyorsun, su geliyor. Karmaşıklık arkasında, sol üstteki sayının herhangi bir anlam ifade etmesi için hepsinin ayakta olması gereken beş filtrasyon kademesinde.

PURELAB X8 water purification panel with water quality readings, the process chain and dispense presets

Zincir görünür

Kaynak, ön filtre, ters ozmoz, deiyonizasyon, ultraviyole ve son cila kademesi, her biri kendi göstergesini taşıyor. Direnç değeri düşerse operatör hangi kademenin bıraktığını kılavuz açmadan görüyor.

Hazır hacimler tuş takımını yener

Hacim tuşları insanların gerçekten kullandığı kaplara göre belirlendi. Özel hacim nadir durumlar için var, o yüzden günün çoğunu karşılayan dört tuşun altında duruyor.

Kalite en önde

Direnç, toplam organik karbon, sıcaklık ve bakteri sayısı her şeyin üstünde duruyor. Bir laboratuvarda yeterince temiz olmayan su, günler sonra sonuçları sessizce bozuyor.

Panel sorunu nasıl anlatır

Alarmlar en sık ters giden kısım. Fazla gürültülü olursa operatörler bir hafta içinde görmezden gelmeye başlıyor, fazla sessiz olursa bir şeye mal olana kadar kimse fark etmiyor. Dört seviyede karar kıldım ve beşincisini eklemeyi reddettim.

Bilgi

Bir şey oldu ve kayda değer. Olay listesine giriyor, başka hiçbir yere. Ses yok, renk yok, kesinti yok.

Uyarı

Bir değer normal bandından çıktı. Alan sarıya dönüyor ve öyle kalıyor. Proses çalışmaya devam ediyor, çünkü küçük bir sapma yüzünden partiyi durdurmak sapmanın kendisinden pahalı.

Hata

Makine kendini durdurdu. Ekran onu neyin durdurduğunu tek cümleyle, operatörün kendi diliyle ve etkilenen parçayı şema üzerinde işaretleyerek söylüyor. Yanında kelime olmayan hiçbir hata kodu ekrana çıkmıyor.

Acil

Fiziksel bir tehlike. Panel her şeyi bırakıp üzerinde tek bir talimat olan tam ekran tek bir duruma geçiyor, çünkü o anda başka hiçbir şeyin önemi yok.

Gerçek ellerle sınamak

Bunların hiçbiri toplantı odasında doğrulanmadı. İşe yarayan geri bildirim sahadan geldi ve büyük kısmı sormaktan değil izlemekten çıktı.

Gerçek bir çalışmayı baştan sona izlemek

İnsanlardan hayal etmelerini istemek yerine baştan sona gerçek çalışmaları izledim. Değiştirdiğim şeylerin yarısı, birinin nerede duraksadığını fark etmekten geldi, sonrasında bana anlattıklarından değil.

Gerçek ölçüde çıktı almak

Bir şey panele ulaşmadan önce yerleşim gerçek ölçüde basılıp makineye yapıştırıldı. Var olan en ucuz test bu ve dizüstünde gayet iyi görünen dokunma alanlarını yakaladı.

Servis ekibine sormak

Bu makineleri tamir eden insanlar var olan bütün arıza biçimlerini görmüş. Hangi alarmların sahada gerçekten yaşandığını, hangilerinin sadece şartnamede var olduğunu onlar söyledi.

Kapıdan okumak

Her ekranda uyguladığım basit bir kontrol. Odanın kapısında dur ve makinenin ne yaptığını anlamaya çalış. Anlayamıyorsan durum göstergesi henüz yeterince büyük değildir.

Aklımda kalan cümle, eski paneli yıllarca kullanmış bir operatörden geldi. Yenisi bana yeni bir şey öğretmedi, sadece zaten bildiğim şeyi saklamayı bıraktı, dedi.

Geriye ne kaldı

Makineler için tasarlamak geri kalan her şeye bakışımı değiştirdi. Bir web sitesinde kafa karıştıran ekranın bedeli bir ziyaretçi. Bir panelde bedeli bir parti, bir gecelik emek, bazen de bir parmak. Riskteki bu fark insanı çok hızlı dürüstleştiriyor.

Ayrıca beni sadelik konusunda çok daha rahat hale getirdi. Kontrol panelinde süse yer yok. Her öğe, makinenin karşısında duran birinin gerçekten sorduğu bir soruya cevap vererek yerini hak etmek zorunda. Böyle çalışmaya alıştıktan sonra süslemeye geri dönmek tuhaf geliyor.

Hala web işleri yapıyorum, raporları da yazmaya devam ediyorum. Ama bu makinelerin karşısında edindiğim alışkanlıklar artık her projeye taşıdığım şeyler. Karşındakinin neyi bilmesi gerektiğini sor, onu gözünün zaten olduğu yere koy ve geri kalan her şeyi kaldır.