Dialogue Notations And Design

... konulu sunumlar: "Dialogue Notations And Design"— Sunum transkripti:

1 Dialogue Notations And Design
Cem Ali Can Ramazan Polat

2 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

3 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

4 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

5 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

6 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

7 … 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

8 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.

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

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

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

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

13 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’

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

15 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

16 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’

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

18 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

19 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

20 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

21 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ı

22 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'

23 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

24 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)

25 Ç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!!

26 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 *

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

28 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

29 Ü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ü

30 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ü!

31 Ö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ü!

32 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

33 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ı

34 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

35 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)

36 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!

37 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

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

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

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

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

42 Ö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

43 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

44 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

45 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

46 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...

47 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

48 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

49 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.

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

51 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?

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

53 human computer interaction.pdf (Kitap)