03.11.2011

1

20076380192007638019MMĐĐNE YASEMNE YASEMĐĐNN

INTERFACE DESIGN AND INTERFACE DESIGN AND PROGRAMMINGPROGRAMMING

(ARAYÜZ TASARIMI VE (ARAYÜZ TASARIMI VE PROGRAMLAMA)PROGRAMLAMA)

� Đnsan Bilgisayar Etkileșimi (ĐBE) sisteminin amacı bilgisayarı daha hızlı ve insana daha doğal gelecek yollarla kullanılabilir hale getirmektir.

Sistemin dört ana bileșeni vardır.

� 1.Kullanıcı (user)� 2.Görev (task)� 3.Araç/arayüz (tool/interface) � 4.Bağlam (context)

http://ceng.gazi.edu.tr/~hkaracan/BM515_H1.pdf

Arayüz Nedir?

Genel anlamda, bir mekanizma ile onun kullanıcısı arasındaki etkileșime aracılık eden yüzeye, veya ortama arayüz denir. Mesela direksiyon ve pedallar sürücü için otomobilin arayüzüdür.Bilgisayar teknolojisinde kullanılan arayüzler 2'ye ayrılır:Komut satırı arayüzüKullanıcı yazarak girdigi komutlarla iș görür. (Örnek: DOS) Grafiksel kullanıcı arayüzü Kullanıcı fare, oyun çubuğu gibi yan araçlarla bir benzetmenin yardımı ile iș görür. (Örnek: Windows, KDE, Gnome)

http://baybul.com/ansiklopedik-bilgiler/330181-arayuz-nedir.html

ETKĐLEȘĐMLĐ SĐSTEMLER� Cihazlar, Yazılım Sistemleri� Uygulamalar,Ürünler� Bilginin Aktarımı, Görüntülenmesi, Saklanması � gibi ișlevleri gerçekleștirmek için insanların� komutlarına cevap veren sistemler� Web Siteleri, Web Uygulama Arayüzleri� Kișisel Bilgisayar Arayüzleri� Mobil Cihazlar, Navigasyon Sistemleri� Online Bilet Gișeleri� ATM, Akıllı Binalar, Akıllı Toplantı Salonları� Ev Sinema Sistemleri, Beyaz Eșyalar

http://www.alperendemirkan.com.tr/hafta3.pdf

Kullanıcı Kullanıcı ArayüzüArayüzü (Kullanıcı Arabirimi, (Kullanıcı Arabirimi, ĐĐnsan nsan Makine Makine ArayüzüArayüzü))

Kullanıcı arayüzü, veya kullanıcı arabirimi (Đnsan Makine Arayüzü) insanların bir makine, cihaz, bilgisayar programı ya da karmașık aletlerle etkileșimini sağlayan yöntemlerin bileșkesine verilen addır.

Kullanıcı arabirimi așağıdakilere olanak sağlar:

� Girdi, kullanıcıların bir sistemin ișleyișini değiștirmesi

� Çıktı, sistemin kullanıcının ișleyișini değiștirmesinin sonuçlarının üretilmesi

http://www.msxlabs.org/forum/x-sozluk/308676-kullanici-arayuzu-kullanici-arayuzu-nedir-kullanici-arayuzu-hakkinda.html#ixzz1cCrH928f

http://ceng.gazi.edu.tr/~hkaracan/BM515_H1.pdfhttp://ceng.gazi.edu.tr/~hkaracan/BM515_H1.pdf

03.11.2011

2

Bilgisayar uygulamalarının yeni kullanıcı kesimi tarafından kabul edilmesi ve efektif bir halde kullanılması için bilgisayar ile kullanıcının etkileșimini (interaction) sağlayan arayüzün (interface) doğru tasarlanması gerekmektedir .Đnsan Bilgisayar Etkileșimi uzmanları iyi bir arayüz tasarımı için üç yol önermektedir.

� Birincisi, stil kılavuzlarını (style guidelines) kullanmaktır. Bu kılavuzlar genellikle arayüz gelistiren büyük firmalar tarafından firma içinde gelistirilen tasarımlarda uygulanmak üzere hazırlanır (AppleMacintosh Guidelines ,Java Programming Style Guidelines gibi). Bu kılavuzların temel amacı hazırlanan tasarımlarda tutarlılıgısaglamaktır, ancak uyumluluğun kullanılabilirlik ile aynı anlama gelmediğini ihmal etmemek gerekmektedir.

� Đkinci yol iyi tasarımın genel prensiplerini veren tasarım kılavuzlarının (design guidelines) kullanılmasıdır. Tasarım kılavuzları kullanılabilirliği artırmaya yöneliktir. 1970' li yıllardan günümüze çok sayıda tasarım kılavuzu önerilmiștir.

http://www.duzce.edu.tr/kmyo/kmyo/myos/pdf/MYO_OS_9005.pdf

Günümüzde kullanıcı arayüz tasarımı için kullanılan en popülertasarım kılavuzlarından birisi Nielsen tarafından verilmektedir (Nielsen's Ten

UsabilityHeuristics).Nielsen'a göre kullanıcı arayüzlerinde șunlara dikkat edilmelidir.1- Basit ve doğal diyalog kullanımı2- Kullanıcının diliyle konuma3- Hafıza yükünün en aza indirilmesi4-Tutarlılık5- Geribildirim sağlanması6-Açıkça gösterilmiș çıkıș ve ișlem sonlandırma7- Kısayolların önerilmesi8- Uygun hata mesajlarının tasarlanması9- Hataların engellenmesi10-Yardım ve belgeleme sağlanması

http://www.duzce.edu.tr/kmyo/kmyo/myos/pdf/MYO_OS_9005.pdf

� Üçüncü yol kullanılabilirlik testlerinden elde edilen deneysel verilerikullanarak tasarımı geliștirmektir. Kullanılabilirlik testleri, kullanılabilirlikkriterlerinin belirlenmesinin ardından hedef kullanıcı kitlesine uygulanırve sonuçlar, tasarımın yeniden değerlendirilmesi için girdi olarakkullanılır. Kullanılabilirlik testleri için farklı yöntemler kullanılabilir.Kullanıcıdan, uygulama sırasında nasıl bir yol izlediğini sesli olarakaktarması istenerek (verbal protokol) alınan görüntü ve ses kayıtlarıtest sonrasında davranıșlarla birlikte değerlendirilebilir. Göz- izleme(eye- tracking) cihazları kullanılarak elde edilen sonuçlar kullanılabilirlikaçısından yorumlanabilir.

� http://www.duzce.edu.tr/kmyo/kmyo/myos/pdf/MYO_OS_9005.pdf

� Resim:http://ab.org.tr/ab06/bildiri/59.pdf

Sekil4. Sekil4. KlavuzKlavuzTürleriTürleri-- Güvenilirlik Güvenilirlik DüzeyleriDüzeyleri

Komut satırı Komut satırı arayüzüarayüzü� Komut satırı (veya komut satırı arayüzü),

bir bilgisayar kullanıcısının, belli metinleri (komutları) girerek, bilgisayarla iletișime geçmesini sağlar. Komut satırı arayüzleri; konsol,kabuk, terminal veya uçbirim diye de adlandırılır.

� Komut satırı, kullanıcıya herhangi bir grafiksel arayüz sunmaz bunan yerine kullanıcının metin kipinde bilgisayarla iletișime geçmesini sağlar. Đșletim sistemi veya yazılıma göre komutlar değișebilir. Örneğin bir dizini listelemek için MS-DOS'ta dir (ing. directory) komutu kullanılırken UNIX benzeri terminallerde ls (ing. list) komutu kullanılır.

http://tr.wikipedia.org/wiki/Komut_sat%C4%B1r%C4%B1

Grafiksel Kullanıcı Grafiksel Kullanıcı ArayüzüArayüzü

Grafiksel Kullanıcı Arayüzü (ing. Graphical User Interface; GUI), bilgisayarlarda ișletilen komutlar ve bunların çıktıları yerine simgeler, pencereler, butonlar ve panellerin tümünü ifade etmek için kullanılan genel addır.

Grafiksel kullanıcı arayüzü, bilgisayar kullanıcılarının komut satırı kodlarını ezberlemeden fare, klavye gibi araçlar sayesinde bilgisayarları kontrol etmelerini sağlamıștır. Günümüzdeki programların bir çoğu GKA ile birlikte gelse de, birçok bilgisayar kullanıcısı (özellikle programcılar) daha hızlı olduğu gerekçesiyle komut satırını GKA'larla birlikte kullanmaya devam etmektedirler.

GKA'lı ișletim sistemleri� FreeBSD� MS Windows

� Mac OS� Mac OS X� Amiga OS� Linux� BeOS� SkyOS� RISC OS

http://tr.wikipedia.org/wiki/Grafiksel_kullan%C4%B1c%C4%B1_aray%C3%BCz%C3%BC

03.11.2011

3

NmapNmapNmapNmap en iyi bilinen ve en popüler en iyi bilinen ve en popüler portport tarayıcı yazılımlardan birisidir. Güvenlik uzmanlarının tarayıcı yazılımlardan birisidir. Güvenlik uzmanlarının tercihi olan bu yazılım ile açık tercihi olan bu yazılım ile açık portlarıportları kontrol edebilirsiniz.kontrol edebilirsiniz.ZenmapZenmapNmap'inNmap'in grafik grafik arayüzearayüze sahip sürümünde özellikler desahip sürümünde özellikler değğișmiyor, hala çok güçlü.ișmiyor, hala çok güçlü.

http://www.http://www.chipchip.com.tr/galeri/komut.com.tr/galeri/komut--satirisatiri--grafikgrafik--arayuzearayuze--karsikarsi_1284_7.html_1284_7.htmlhttp://www.http://www.chipchip.com.tr/galeri/komut.com.tr/galeri/komut--satirisatiri--grafikgrafik--arayuzearayuze--karsikarsi_1284_8.html_1284_8.html

� Tasarım: Tasarım algı ile kavram arasında köprü görevindedir.� Tasarımın temel amacı, ziyaretçi ile içerik arasında gerçekleșen iletișimi

kolaylaștırmaktır. Ziyaretçilerin içeriği özgürce keșfedebilecekleri arayüz çalıșmasını geliștirmek öncelikli prensip olmalıdır. Site içerik ve tasarımı, kullanıcıları birincil derecede etkileyen, siteyi her ziyaret ettiklerinde istek ve ihtiyaçlarını hızla karșılayan ve onları yönlendiren ana bileșenler konumundadır.

� TASARIM SÜRECĐ� Sorun Tanımlama ve Çözüm Yolları� Tasarımın Genel Özelliklerinin Belirlenmesi� Ara Yüz Geliștirme� Taslak Tasarımı Geliștirme� Taslak Önerisine Göre Araștırma� Tasarım Önerileri Olușturma� Yapım Așaması� Değerlendirme ve Taslağı Test Etme� Değișiklikler Önerme

http://webbote427.blogcu.com/yazilim-gelistirme-surecinde-tasarim-design-asamasi/6483194

� Bilim Teknik, 71 Kasim sayisindan bir alinti. Alternatif klavye arayislari cok da yeni degilmis..

http://hci.metu.edu.tr/resources.htm http://www.http://www.baddesignsbaddesigns.com/.com/starbucksstarbucks.html.html

� http://www.baddesigns.com/scidoor.html

ArayüzArayüz tasarımıtasarımıTeknik olarak arayüz,iki farklı olușum arasındaki iletișimi

ifade etmektedir.Kullanıcı arayüzü ise kullanıcının,bir sistem,araç ya da programla etkileșim içinde olmasını ve üzerinde ișlem yapmasını sağlayan yazılım ve/veya donanımı ifade etmektedir.Sonuç olarak arayüz,kullanıcının etkileșime gireceği programın ekrandaki görüntüsü ve ekran özellikleridir.(Glossary of Terms,2000)

Arayüz tasarım kavramı,her çeșit ortamdaki teknolojik ürünlerin insanlar tarafından kullanılmasıyla ilgilidir.Arayüztasarımında amaç, bu ürünleri kullanan kișilere bașarılı deneyimler yașatmak ve memnuniyetlerini sağlamaktır.(Bolingve Sousa,1993)

http://www.tcmb.gov.tr/kutuphane/TURKCE/tezler/ecesenerbilgic.pdf

03.11.2011

4

Web Tasarım Süreci Nasıl Planlanmalıdır?Web Tasarım Süreci Nasıl Planlanmalıdır?

� Bir web sitesini olușturmaya bașlamadan önce o web sitesinin amacının ne olduğu, ulașması beklenen hedef kitlenin profili, ve içeriği düșünülmeli ve bu elemanlar göz önünde bulundurularak web sitesi tasarım süreci ve web geliștirme (kodlama) süreci planlanmalıdır.

� Amaç� Hedef Kitle� Đçerik

http://webbote427.blogcu.com/yazilim-gelistirme-surecinde-tasarim-design-asamasi/6483194

Web uygulamalarında iyi kullanıcı Web uygulamalarında iyi kullanıcı arayüzarayüztasarımıtasarımı için 12 kullanıșlı teknikiçin 12 kullanıșlı teknik

� 1. önemli değișiklikleri belirtinyammer

Slayt18-29: http://www.bildirgec.org/yazi/iyi-bir-kullanici-arayuz-tasarimi

2. web uygulamalarınızda klavye 2. web uygulamalarınızda klavye kısayollarınıkısayollarını etkinleștirinetkinleștirin

3. hesap sayfası üzerinden seçeneklerin 3. hesap sayfası üzerinden seçeneklerin güncellenebilmesigüncellenebilmesi

crazyegg

4. uygulamanın4. uygulamanın özellikleriniözelliklerini tanıtıntanıtın

freckle

5. renk kodlu listeleri kullanın5. renk kodlu listeleri kullanın

goplan

03.11.2011

5

6. kișiselleștirme seçenekleri sunun6. kișiselleștirme seçenekleri sunun

twitter

7. göze çekici gelen yardım mesajları 7. göze çekici gelen yardım mesajları görüntüleyingörüntüleyin

goplan

8. geribildirim mesajlarını dikkatle 8. geribildirim mesajlarını dikkatle tasarlayıntasarlayın

mailchimp

getsignoff

9. sekmeli içerik kullanın9. sekmeli içerik kullanın

freckle

10. 10. modalmodal pencerelerin altında koyu pencerelerin altında koyu arkaplanlararkaplanlar

squarespace

11. lightboxlar ve slayt gösterileri11. lightboxlar ve slayt gösterileri

smugmug

03.11.2011

6

12. kısa kayıt formları12. kısa kayıt formları

evernoteevernote

evernote

Nesneye yönelik programlamada arayüzler

Bazı durumlarda bir sınıf sadece belirli ișlemleri yapmak için kullanılır. Herhangi bir sınıfla ilișkisi olmayan ve standart bazı ișlemleri yerine getiren sınıfa benzer yapılara arayüz(interface) denir.Arayüzlerin özellikleri yoktur. Yalnızca bir takım ișleri yerine getirmek için bașka sınıflar tarafından kullanılırlar.

Sınıf ile arayüz arasındaki ilișkiyi kesik çizgilerle ve çizginin ucunda boș üçgen olacak șekilde gösteririz. Sınıf ile arayüz arasındaki bu ilișkiye gerçekleme(realization) denir. Sınıfla, arayüzün UML gösterimindeki fark arayüzdeözellik(attribute) yoktur.Diğer bir fark ise arayüz adlarını yazarken adın üstüne yazısını eklemektir.

http://www.csharpnedir.com/articles/read/?id=10

Bir Bir arayüzarayüz, bașka sınıflar için bir , bașka sınıflar için bir rehberdir.rehberdir.� Arayüz Üyeleri� A. Özellikler (properties)� B. Metodlar (methods)� C. Olaylar (events)� D. Đndeksleyiciler (indexers)

� Arayüzlerde Kullanılamayan Üyeler� i. Yapıcılar (constructors)� ii. Yokediciler (destructors)� iii. Alanlar (fields)

http://www.csharpnedir.com/articles/read/?id=185

ArayüzArayüz bildirimibildirimi� Arayüzler interface anahtar sözcüğüyle bildirilir.

interface IArayuz{

int Metot1(); int Metot2(); int sahteozellik{

set; get;

} int this[int indeks]

{ get; }

}http://tr.wikibooks.org/wiki/C_Sharp_Programlama_Dili/Aray%C3%BCzler#A

ray.C3.BCz_nesneleri

� 1.Bir arayüz'ün tüm üyeleri public kabul edilir. Private, Protectedgibi belirtiçler kullanamayız. Örneğin bir elemanı private tanımladığımız takdirde, derleme zamanında șu hatayı alırız.

"The modifier 'private' is not valid for this item“

� 2.Diğer yandan bir metodu public olarak da tanımlayamayız. Çünkü zaten varsayılan olarak bütün üyeler publictanımlanmıș kabul edilir. Bir metodu public tanımladığımızda yine derleme zamanında șu hatayı alırız.

"The modifier 'public' is not valid for this item“

� 3.Bir arayüz, bir yapı(struct)'dan veya bir sınıf(class)'tan kalıtımla türetilemez. Ancak, bir arayüzü bașka bir arayüzden veya arayüzlerdenkalıtımsal olarak türetebiliriz.

� 4.Arayüz elemanlarını static olarak tanımlayamayız.

� 5.Arayüzlerin uygulandığı sınıflar, arayüzde tanımlanan bütün üyeleri kullanmak zorundadır.

http://www.csharpnedir.com/articles/read/?id=185

� Arayüzlerin uygulanması sınıf türetmeyle aynı șekilde yapılır. Örnek:

class A:Iarayuz{

//IArayuz arayüzündeki bütün elemanları içermeli.}

� Bir sınıf birden fazla arayüzü kullanabilir.Örnek:class A:Arayuz1,Arayuz2

{ //Hem Arayuz1 hem de Arayuz2 arayüzündeki bütün elemanları içermeli.

}

� Arayüzler de sınıf türetmeyle aynı șekilde birbirlerinden türetilebilir. Bu durumda yavru arayüz ana arayüzün tașıdığı bütün elemanları tașır.

http://tr.wikibooks.org/wiki/C_Sharp_Programlama_Dili/Aray%C3%BCzler

03.11.2011

7

Sınıflardan farklı olarak arayüzleri birden fazla arayüzden türetebiliriz.

Örnek:interface Arayuz1

{ int Metot1();

} interface Arayuz2

{ string Metot2();

} interface Arayuz3:Arayuz1,Arayuz2

{ double Metot4();

}

*Burada Arayuz3'ü kullanan bir sınıf her üç metodu da içermelidir.

http://tr.wikibooks.org/wiki/C_Sharp_Programlama_Dili/Aray%C3%BCzler

� Bir arayüz türünden nesne olușturulabilir. Tıpkı türetmedeki gibi bir arayüz nesnesine o arayüzü kullanan sınıf türünden nesne atanabilir. Bu durumda o arayüz nesnesinin gizli türü o sınıf olur ve o sınıfa ait üye elemana arayüz nesnesi üzerinden erișilebilir. Örnek:

using System;

interface arayuz {

int Metot();

}

classA:arayuz {

public int Metot()

{

return 0;

}

static void Main()

{

arayuz a;

A s=newA();

a=s;

Console.WriteLine(a.Metot());

}

}

http://tr.wikibooks.org/wiki/C_Sharp_Programlama_Dili/Aray%C3%BCzler

KaynaklarKaynaklar

� http://ceng.gazi.edu.tr/~hkaracan/BM515_H1.pdf

� http://baybul.com/ansiklopedik-bilgiler/330181-arayuz-nedir.html

� http://www.alperendemirkan.com.tr/hafta3.pdf

� http://www.msxlabs.org/forum/x-sozluk/308676-kullanici-arayuzu-kullanici-arayuzu-nedir-kullanici-arayuzu-hakkinda.html#ixzz1cCrH928f

� http://ceng.gazi.edu.tr/~hkaracan/BM515_H1.pdf

� http://www.duzce.edu.tr/kmyo/kmyo/myos/pdf/MYO_OS_9005.pdf

� http://ab.org.tr/ab06/bildiri/59.pdf

� tr.wikipedia.org/wiki/Komut_sat%C4%B1r%C4%B1

� http://tr.wikipedia.org/wiki/Grafiksel_kullan%C4%B1c%C4%B1_aray%C3%BCz%C3%BC

� http://www.chip.com.tr/galeri/komut-satiri-grafik-arayuze-karsi_1284_7.html

� http://www.chip.com.tr/galeri/komut-satiri-grafik-arayuze-karsi_1284_8.html

� http://webbote427.blogcu.com/yazilim-gelistirme-surecinde-tasarim-design-asamasi/6483194

� http://hci.metu.edu.tr/resources.htm

� http://www.baddesigns.com/scidoor.html

� http://www.tcmb.gov.tr/kutuphane/TURKCE/tezler/ecesenerbilgic.pdf

� http://webbote427.blogcu.com/yazilim-gelistirme-surecinde-tasarim-design-asamasi/6483194

� http://www.bildirgec.org/yazi/iyi-bir-kullanici-arayuz-tasarimi

� http://www.csharpnedir.com/articles/read/?id=10

� http://www.csharpnedir.com/articles/read/?id=185

� http://tr.wikibooks.org/wiki/C_Sharp_Programlama_Dili/Aray%C3%BCzler

Teşekkürler Teşekkürler ☺☺