Dialogue Notations And Design Cem Ali Can -2009639014 Ramazan Polat-2009639504

Diyalog Gösterimleri Şematik(Diyagramsal) Metinsel State transition networks(STN)-Durum geçiş ağları JSD şemaları Akış Çizelgeleri Metinsel Formal Gramerler-Biçimsel Dilbilgisi Üretim Kuralları CSP

Biçimsel açıklamaları ile analiz edilebilir. Diyalog Baglantısı Sistemin mantığı – Bu ne? Ne iş yapar? Sistemin tanıtımı –Nasıl görünüyor. Biçimsel açıklamaları ile analiz edilebilir. Uyuşmayan eylemler Geri dönüşü zor eylemler Eksik eylemler Potansiyel hatalar

Diyalog Nedir? İki veya daha fazla taraf arasında görüşme.. Genellikle kooperatiftir. Kullanıcı arayüzünde Etkileşim yapısını ifade eder.. İnsan-bilgisayar arasındaki konuşma ve sözdizimsel düzeyde Kademeler Sözcüksel – İkon şekilleri, basılan tuşlar Sözdizimsel – giriş veya çıkış sıralamaları Anlamsal – Uygulama ve veri üzerindeki etkisi

Yapılandırılmış insan diyalogları İnsan-Bilgisayar diyaloğu çok kısıtlıdır. Memur: Sen «adamın adı» karın olarak kabul … Adam: Evet Memur: Sen «kadının adı» kocan olarak kabul… Kadın: Evet Adam: Bu yüzükle (Kadına yüzüğü takar) Kadın: Bu yüzükle (Adama yüzüğü takar) Memur: Bu yüzüklerle sizi karı koca ilan ediyorum

Diyalog Dersleri Evlenme Servisi 3 kişilik senaryo şeklinde Belirli sıra var Bazı sözcükler sabit – “Evet” Bazıları değişken – “Sen «adamın adı»…” Yüzük takıldığında «bu yüzükle…» şeklinde devam eden talimatlar var. Bu sözcükleri söyleyince evlenmiş sayılır mısınız ? Sadece doğru yerde ise… Anlamsal değil, sözdizimsel

… ve Devamı Peki kadın “Hayır” derse ? Gerçek diyaloglar genellikle alternatiflidir: Mahkeme kararı sanığın vereceği yanıtlara bağlıdır. Hakim: Suçlu olduğunu veya olmadığını nasıl savunursun? Sanık: Suçlu veya suçlu değil

Diyalog Gösterim Tasarımı Diyalog programa gömülür Büyük bir sistemde şunlar yapılabilir: Diyalog analizi: Kullanıcı alışveriş sepetini her zaman görebilmeli Değişik platformlar (Örn. Windows/Mac) Diyalog gösterimleri şunlarda yardımcı olur: Sistem analizi Sözcükleri Anlamsal ayırt etmede … ve sistem yapılmadan önce Gösterimler bize önerilen tasarımları anlamamızı sağlar.

Grafiksel Gösterimler Durum geçiş ağları(STN) Petri nets, State Charts - durum çizelgesi Flow Charts - akış şeması JSD diyagramları

Durum geçiş ağları(STN) Daireler - Durumlar Oklar - Eylemler/Olaylar

Durum geçiş ağları- olaylar Ok etiketleri biraz sıkışık çünkü Gösterimde (Notasyon) “durum agır” Ve olaylar detay gerektirir.

Durum geçiş ağları- durumlar Dairelerdeki etiketler az bilgi içerir: Durumları adlandırmak zordur Ama görsel olarak daha kolay

Hiyeraşik Durum Geçiş Ağları Karışık diyalogları yönetmek Alt-Diyalogları adlandırmak Grafik Altmenu Metin Altmenu Resim Altmenu Ana Menu select ‘graphics’ select ‘paint’ select ‘text’

Eşzamanlı Diyaloglar I Basit diyalog kutusu Text Style bold italic underline example

Eşzamanlı Diyaloglar II Üç Anahtar – Bağımsız Durum Geçişleri NO bold click on ‘bold’ bold NO italic click on ‘italic’ italic NO u’line click on ‘underline’ underline

Eşzamanlı Diyaloglar - III Kalın ve İtalik kombinasyonu Text Style bold italic underline example NO style bold only click on ‘bold’ click on ‘italic’ click on ‘italic’ italic only bold click on ‘bold’

Eşzamanlı Diyaloglar - IV Hepsi birlikte – Text Style bold italic underline example ‘italic’ NO style bold only ‘bold’ italic u’line ‘underline’

Escapes Web’de ‘geri’, çıkış/iptal tuşları Her yerde benzer davranış gösterir. Bundan kaçının Yüksek seviyeli diyagramda Her alt menü için ‘normal’ çıkış Alt menünün ‘heryerinde’ kullanılabilecek çıkış Grafik Altmenu Text Submenu Paint Submenu Ana Menu select ‘graphics’ select ‘paint’ select ‘text’ normal finish ESC

click on circumference Yardım Menüleri Benzer Problemler Neredeyse her yerde aynı Ama diyalogda aynı noktaya dönüyor Durum geçiş Ağları ile tanımlanabilir… ama çok karmaşık Finish Help Subsystem Circle 1 click on circumference Circle 2 from Menu press HELP button draw circle rubber band click on centre

Petri nets Bilgisayar bilimlerinde özellikle birbiri ile eş zamanda çalışan işlerin (concurrent jobs) modellenmesi ve çözülmesinde kullanılan özel grafiklerdir. Bu graflara Yer / Geçiş Ağları (Place / Transition Networks veya P/T Nets) ismi de verilir. Bilgisayarlardaki en eski işaretlemelerden biri. Akış grafiği: Yerler – STN’de durumlar’a benzer Geçişler – STN’de oklara benzer Sayaçlar – Durulan yerler (mevcut durum) Birkaç sayaç kullanılabilir Eşzamanlı diyalog durumları Kullanıcı Arabirimi belirtmede Araç desteği – Petshop

Dairesel Petri Ağları Paralel Petri Ağları Koşullu Petri Ağları Örneğin yandaki petri ağında 1′den 4′e kadar olan daireler mevsimleri (yaz, bahar, kış, güz) ve a-d arasındaki harflerde mevsim dönüşlerini (ekinoks) göstermektedir. Yukarıdaki şekilde bir döngü halinde mevsim dönüşü görülmektedir. Dairesel Petri Ağları

Kalın Açık İtalik Açık T1 T2 T3 T4 Italik Kapalı Kalın Kapalı Kullanıcı ‘kalın’a tıklar Kullanıcı ‘italik’e tıklar T1 T2 T3 T4 Italik Kapalı Kalın Kapalı Kullanıcı davranışı sayaca aktarılır Tüm giriş yerlerinde sayaç varsa geçiş 'çalıştırılır'

Durum Çizelgeleri UML’de kullanılır Durum geçiş ağlarının uzantısı Hiyeraşik Eşzamanlı alt ağlar Çıkışlar KAPALI hep aktif Geçmiş H ile belirtilmiş bağlantı alt diyaloğa girilen son duruma gelir. On Off 1 2 3 4 Ses Kanal H SEL SESSİZ Standby KAPALI AÇIK RESET

Akış Şemaları Programcılar için tanıdıktır. Sil D1 Çalışan no. giriniz: ____ Sil D3 İsim: Alan Dix Bölüm: Computing Silinsin mi? (Y/N): _ Lütfen E veya H ‘ye basın Sil D2 Silinsin mi? (E/H): _ cevap? C2 Bitir Kaydı oku C1 Kaydı sil C3 diğer H E Programcılar için tanıdıktır. Kutular - İşlem ve olayı gösterir ,Durumları değil Diyalog için kullanım (iç algoritma değil)

Çalışması formal notations – too much work? COBOL transaction processing Olay - akış– web arabirimi gibi program yapısı ,diyalog yapısı gibi degildir. Diyalog Akış Şeması Şunlarda Kullanılır Müşteri ile kararlaştırma Koda Çevirmek Sistematik Test 1000% Üretim Kazancı! formalism saves time!!

JSD Diyagramları Ağaç yapılı diyaloglar için kullanılır. Daha ucuz Daha temiz, anlaşılabilir İşlem Giriş Çalışan Kaydı Ekle Kaydını Değiştir Göster Çıkış Personel Kayıt Sistemi Sil *

Gramerler Üretim Kuralları Metinsel Gösterimler Gramerler Üretim Kuralları CSP ve olay cebirleri

Metinsel – Gramerler Sıradan ifadeler JSD ile karşılaştırma BNF sel-line click click* dble-click JSD ile karşılaştırma Aynı hesaplama modeli Farklı gösterim(notasyon) BNF expr ::= empty | atom expr | '(' expr ')' expr Sıradan ifadelerden ve STN lerden daha güçlü Hala eşzamanlı diyalog YOK

Üretim Kuralları Sırasız Kurallar Listesi: Kurallar listesinde sıra önemli degildir. if condition then action Koşul, durum veya bekleyen olaylara dayanmaktadır Her kural her zaman potansiyel olarak aktif Eşzamanlılık için iyi Sıralı için kötü

Olay Tabanlı Üretim Kuralları Sel-line  first C-point first  rest C-point rest  rest D-point rest  < draw line < Not: Olaylar bekleyen olaylar listesine eklenir ‘first’ ve ‘rest’ içerde oluşturulan olaylar Durum kısmında kötü!

Önkonumlandırmalı Üretim Sistemi Durum Tabanlı Özellikleri: Mouse: { mouse-off, select-line, click-point, double-click } Line-state: { menu, first, rest } Kurallar (Geribesleme gösterilmiyor): select-line -> mouse-off first click-point first -> mouse-off rest click-point rest -> mouse-off double-click rest -> mouse-off menu Olay kısmında kötü!

CSP ve İşlem Cebri Alexander SPI’ında ve agent gösteriminde kullanılır Sıralı diyaloglar için iyi Bold-tog = select-bold? -> bold-on -> select-bold? -> bold-off ->Bold-tog Italic-tog = . . . Under-tog = . . . Ve eşzamanlı diyaloglar Dialogue-box = Bold-tog || Italic-tog || Under-tog Ama nedensellik net değil

Diyalog Gösterim- Özet Diyagramatik STN, JSD, Akış Şemaları Metinsel Gramerler, Üretim Kuralları, CSP Sonuçlar Olay Tabanlı vs. Durum Tabanlı Güç vs. Netlik Model vs. İşaretleme Sıralı vs. Eşzamanlı

Alexander SPI Anlamsalları (i) İkiye ayrılır.: EventCSP – saf diyaloglar için EventISL - hedef bağımlı diyaloglar için Diyalog tanımlaması - Merkezi Sözdizimsel/Anlamsal takas-yok tolere edilebilir

Alexander SPI Anlamsalları(ii) EventCSP Login = login-mess -< get-name -< Passwd Passwd = passwd-mess -< (invalid -< Login [] valid -< Session) EventISL event: login-mess prompt: true out: “Login:” event: get-name uses: input set: user-id = input event: valid uses: input, user-id, passwd-db wgen: passwd-id = passwd-db(user-id)

Anlamsallar – Ham Kod Kelime işlemci için olay döngüsü switch ( ev.type ) { case button_down: if ( in_text ( ev.pos ) ) { mode = selecting; mark_selection_start(ev.pos); } ... case button_up: if ( in_text ( ev.pos ) && mode == selecting ) { mode = normal; mark_selection_end(ev.pos); case mouse_move: if (mode == selecting ) { extend_selection(ev.pos); } /* end of switch */ Kelime işlemci için olay döngüsü Diyalog tanımlaması - Çok dağınık Sözdizimsel/Anlamsal takas - berbat!

Eylem Özellikleri Bütünlük Belirleme Yuvalanmış çıkışlar Tutarlılığı Olmayan oklar Öngörülemeyen durumlar Belirleme Tek eylem için birden fazla yönlendirme Planlama: Uygulama kararı Accident(Kaza): Üretim kuralları Yuvalanmış çıkışlar Tutarlılığı Aynı eylem, aynı etkiyi mi yapıyor? Modlar ve görünülebilirlik

Özellik Kontrolleri (i) Bütünlük Duruma çift tıklanırsa ne olur? ? double click

Özellik Kontrolleri (ii) Geri dönülebilirlik: ‘line’ dan geri dönmek için

Özellik Kontrolleri (ii) Geri dönülebilirlik: ‘line’ dan geri dönmek için tıkla

Özellik Kontrolleri (ii) Geri dönülebilirlik: ‘line’ dan geri dönmek için Tıkla- Çift Tıkla

Özellik Kontrolleri (ii) Geri dönülebilirlik: ‘line’ dan geri dönmek için Tıkla- Çift Tıkla- `grafikler‘ i seç (3 Eylem) Geri alma Eylem değil

Durum Özellikleri Ulaşılabilirlik Geri Dönülebilirlik Her yerden, her yere gidilebiliyor mu ? Ve ne kadar kolay ? Geri Dönülebilirlik Önceki duruma geri dönülebiliyor mu? Ama 'geri al' şeklinde değil Tehlikeli Durumlar Bazı gidilmesi istenmeyen durumlar

Tehlikeli Durumlar Kelime İşlemci: İki mod ve çıkış F1 - Modu değiştirir F2 - Çıkış (ve kaydet) Esc - Modu değişimi yok. ama ... Esc otomatik kaydı sıfırlıyor düzenle çıkış menu F1 F2 Esc

Tehlikeli Durumlar (ii) Kaydederek/kaydetmeden çıkış ->tehlikeli durum Durumların çoğaltılması- anlamsal ayrım F1-F2 – Kaydederek Çık F1-Esc-F2 – Kaydetmeden Çık edit exit menu F1 F2 Esc any update Save No Save

Sözcüksel Sorunlar Görünebilirlik Stil Düzen Farklılaşmış mod ve durumlar Diyaloglara ek açıklamalar Stil Komut – fiil isim Mouse tabanlı – isim fiil Düzen Sadece görünüş değil...

Yerleşimin Önemi Kelime işlemci- tehlikeli durumlar Eski klavye - OK düzenle çıkış menu F1 F2 Esc Esc F1 F2 F3 ... F4 1 tab

Yerleşimin Önemi ... F1-Esc-F2 – Teklikeli durum! Yeni klavye yerleşimi F1-F2 ile kayıt yaptığımızı düşünelim Parmağımız Esc’ye değebilir F1-Esc-F2 – Teklikeli durum! kaydetmeden çıkar Esc F1 F2 F3 ... düzenle çıkış menu F1 F2 Esc

Diyalog Analizi - Sonuç Anlamsallar ve diyalog Anlamsalları bağlama vardır. Yaygın/merkezi diyalog tanımlaması yapılır. Sözdizimsel tanımlama: maximum düzeydedir. Diyalog özellikleri Eylem özellikleri: bütünlük, belirleme, oluşum Durum özellikleri: ulaşılabilirlik, geri dönülebilirlik, tehlikeli durumlar Sunum ve sözcüksel çıkarımlar Görünülebilirlik, stil, yerleşim Diyalogdan bağımsız değildir.

Dijital Saat – Kullanıcı Talimatları İki ana mod Kısıtlı arayüz - 3 tuşlu A tuşu durum değiştirir

Dijital Saat – Kullanıcı Talimatları Tehlikeli durumlar Korunuyor Butonun işlemesi için iki saniye basılı tutulması gerekiyor. Bütünlük A’ya basılmaması ile basmayı bırakmayı ayırt etme Tüm modlarda ne yapılıyor?

Dijital Saat – Dizayn Talimatları ve... Bunların hepsi tek bir tuş ile sağlanıyor.

http://www.hcibook.com/e3/exercises/ch16 human computer interaction.pdf (Kitap) http://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction