B İ LG İ SAYAR DESTEKL İ E Ğİ T İ M 1.  Grafik arayüzün tasarımı  Tasarım ilkeleri  Esneklik  Etkileşimlilik  Kullanabilirlik  Geliştirme süreci.

... konulu sunumlar: "B İ LG İ SAYAR DESTEKL İ E Ğİ T İ M 1.  Grafik arayüzün tasarımı  Tasarım ilkeleri  Esneklik  Etkileşimlilik  Kullanabilirlik  Geliştirme süreci."— Sunum transkripti:

1 B İ LG İ SAYAR DESTEKL İ E Ğİ T İ M 1

2  Grafik arayüzün tasarımı  Tasarım ilkeleri  Esneklik  Etkileşimlilik  Kullanabilirlik  Geliştirme süreci  Görsel‐işitsel öğelerin tasarımı ve üretimi  Metne dayalı öğelerin tasarımı ve üretimi  Video öğelerinin tasarımı ve üretimi 2

3 3  Arayüz Nedir?  İnsanın makine ile etkileşimine olanak sağlayan yazılım parçasıdır.  Yazılımın kullanıcıya açılan penceresidir.

4 4  Arayüzün İşleyişi: Programın Fonksiyonelliği Kullanıcı Bilgi Akışı Çıktı Girdi Bilgisayar / Uygulama Altsistemi Kullanıcı Altsistemi Arayüz Altsistemi

5 5 Tasarım İ lkeleri Kontrol Ö ğ eleri Esneklik Etkile ş imlilik Kullanılabilirlik

6 RenkOran - OrantıUygunlukDenge 6

7 Renk Oran - Orantı UygunlukDenge 7 Renk:  Algılanma  Görülebilme Sarı Turuncu Kırmızı Sıcak Renkler Ye ş il Mavi Mor So ğ uk Renkler

8 8 Renk:  Koyu zemin- Açık renk obje  Açık zemin- Koyu renk obje Zıt Renkler Kırmızı YeşilTuruncuMaviMorSarı Renk Oran - Orantı UygunlukDenge

9 9 Renk: Tasarım İ lkeleri  Güçlü ve Parlak Renklerin Kullanımı  Açık ve Koyu Renkleri Karıştırmak  Artalan  Birlik Renk Oran - Orantı UygunlukDenge

10 10 Uygunluk:  Uygunluk = Orta kararlılık  Biçim, ölçü, renk gibi bir ya da daha çok elemanları benzer olan görsel elemanlar birbirileriyle uyumludur.  Görsel uyum: bir bölümü oluşturan parçalar arasındaki benzerlik miktarıyla doğrudan ilişkilidir. Renk Oran - Orantı UygunlukDenge

11 11 Uygunluk: Renk Oran - Orantı UygunlukDenge

12 12 Oran – Orantı:  Özellikle iki ya da daha fazla eleman arasındaki ölçüsel uygunluk  Tasarım öğelerinin ekranda kapladıkları alanlar bakımından birbirleriyle anlamlı ilişkiler kurabilmesi Ba ş lık Alt Ba ş lık Ba ş lık Alt Ba ş lık Renk Oran - Orantı UygunlukDenge

13 Denge:  Simetrik ve Asimetrik Denge  Simetrik denge: iyi oranlanmış ve dengelenmiş parçaların oluşturduğu genel yapı  Ekranın ağırlık merkezi bakımından dengede olmasını sağlar.  Gözün belirli bir noktaya yoğunlaşmasını engeller. Renk Oran - Orantı UygunlukDenge 13

14 Denge:  Asimetrik denge, biçimsel özellikleri bakımından tekrarlanan öğeler arasında değil, boyut, renk, şekil farklılığı gibi biçimsel öğeler arasındadır. Tasarım İ lkeleri Denge Asimetrik denge, biçimsel özellikleri bakımından tekrarlanan öğeler arasında değil, boyut, renk, şekil farklılığı gibi biçimsel öğeler arasındadır. Renk Oran - Orantı UygunlukDenge 14

15 Denge: Renk Oran - Orantı UygunlukDenge 15

16  Düğmeler (Buton)  Menüler  Tam ekran menüler  Çerçeve menüler  Gizli menüler 16

17  Düğmeler (Buton):Çok sık kullanılan arayüz bileşenleridir.  Bir önceki veya bir sonraki sayfaya gitme  Bir ses veya video dosyasını çalma, ilerletme ve durdurma  Çoktan seçmeli sorularda bir seçeneği seçme A B C D 17

18  Düğmeler (Buton): Kullanımlarında dikkat edilmesi gereken noktalar  Çok sayıda düğme kullanmaktan kaçınılmalıdır.  Fazla düğme kullanmak gerekiyorsa menü sistemlerine başvurulmalıdır.  Kullanılan düğmelerin amacı net olarak anlaşılabilmelidir.  Düğmelerde farklı anlama gelebilecek şekil ve resimler kullanılmamalıdır.  Fare ile düğmelerin üzerine gelindiğinde kursör şekil değiştirmeli veya çeşitli efektler kullanılmalıdır.  Bir buton seçildiğinde diğerlerinden ayırt edilebilecek bir şekil almalıdır. 18

19  Menüler: Tam Ekran Menüler  Örnek: 19

20  Menüler: Tam Ekran Menüler  Avantajları:  Bütünlüğün sağlanabilmesi için tercih edilir.  Bilginin organize edilmesini kolaylaştırırlar.  Kullanıcıya içeriğin tamamını görme imkanı sağlarlar.  Dezavantajları:  Ekranda çok yer kaplarlar.  Menüye ulaşmak için bulunulan ekran çıkmak ve menü ekranına dönmek gerekir.  Ekran yerleşimleri dikkatli yapılmazsa tasarım açısından sorun yaratabilir. 20

21  Menüler: Çerçeve Menüler  Web uygulamalarında tercih edilir.  Bölünmüş ekran prensibini kullanırlar.  Avantajları:  Kullanıcı yapıyı her ekrandan görebilir.  Kullanıcıya yazılım kontrolü sağlamasında yardımcı olur.  Dezavantajları:  İçeriğe ayrılmış alanın azalmasına neden olurlar.  Tasarlanmaları zordur ve olası hataların düzeltilmesi zaman alır. 21

22  Menüler: Çerçeve Menüler  Örnek: 22

23  Menüler: Gizli Menüler  Avantajları:  Arayüzün görsel karmaşasını engellemek amacıyla tercih edilirler.  Sadece kullanıldıkları zaman ekranda yer kaplarlar.  Dezavantajları:  Görsel olarak çekicilikleri yoktur.  Kullanıcılar tarafından fark edilmeyebilirler.  Sürekli yapılan eylemler (ileri-geri gitme) için uygun değildirler. 23

24  Menüler: Gizli Menüler  Türleri: Fareyle üzerine gelindiğinde ya da tıklandıklarında açılan gizli menüler Ekranın belirli bölgesine doğru açılırlar. Pull-down Tamamen gizlidirler ve ekrana atanmış belirli kodlar aracılığıyla kullanılırlar. Pop-up Pull-down menülere benzerler. Bir menü seçeneği ekranın istenilen bölümüne taşınabilir. Tear-off 24

25 25  Esneklik: Kullanıcının yazılım özelliklerini kendi zevklerine göre değiştirilebiliyor olmasıdır.  Etkileşimlilik: kullanıcı ile yazılım arasında gerçekçi bir etkileşim olmalıdır.  Kullanılabilirlik: Rahat kullanım. Görsel olarak güzel olan yazılım kullanışlı yazılım olmayabilir.

26 26  Görsel öğelerin öğrenme üzerinde büyük bir etkisi vardır. Su Döngüsü: Su moleküllerinin güne ş enerjisi, yer çekimi etkisiyle litosfer, hidrosfer ve atmosfer arasındaki hareketi ile olu ş an dola ş ıma su döngüsü denir.(Suyun atmosfer, karalar ile deniz ve okyanuslar arasındaki dola ş ımıdır.) Su döngüsü suyun ilk buharla ş tı ğ ı deniz ve okyanuslara dönmesiyle tamamlanır. Do ğ adaki su dola ş ımını normal hâlde sıvı, buhar olarak gaz hâlinde, buz olarak da katı hâlde sürdürür. Yeryüzünün ¾ ü sularla kaplıdır ve bu suların ço ğ u denizlerde ve okyanuslarda bulunmaktadır. Yeryüzündeki sular, sıcaklık etkisi ile buharla ş ır. Buharla ş an su meteorolojik olu ş umlarla de ğ i ş ik bölgelere ta ş ınarak so ğ uk hava tabakalarında yo ğ unla ş ır. Ya ğ mur, kar, dolu gibi ya ğ ı ş çe ş itleriyle yeryüzüne döner. Bu sular kaynak sularını, yeraltı sularını, nehirleri ve gölleri olu ş tururlar. Canlıların kullanarak kirletti ğ i sular yeraltında ve ekosistem içinde temizlenerek yeniden kullanılır.

27 27  Dikkat edilmesi gereken noktalar:  İçerikte sunulan konu ile görsel ilişkili olmalıdır.  Görsel öğelerin boyutları ve kalitesi iyi olmalıdır.  Görsel öğeler kolay anlaşılmalı ve gözü yormamalıdır.  Görsel öğeler telif sorunu çıkarmayacak şekilde seçilmelidir.

28 28  Dikkat edilmesi gereken noktalar:  Ses ve konuşmalar sadece bilgi sağlamalıdır.  Sesler anlaşılır olmalıdır.  Bilgi sağlamak için sesler kullanılıyorsa metin de ekranda yer almalıdır.  Ses ve metnin eş zamanlı hareket etmesine dikkat edilmelidir.  Metin ile ses birbiri ile çelişmemelidir.

29 29  Dikkat edilmesi gereken noktalar:  Video çok uzun olmamalıdır.  Video görüntülerinin 20sn’yi aştığı durumlarda kullanıcıya kontrol imkanı verilmelidir.  Çeşitli kaynaklardan elde edilen videoların serbest kullanıma açık olup olmadığı araştırılmalıdır.

30 30  Dikkat edilmesi gereken noktalar: Yazı Tipi, Yazı Boyutu ve Boşluklar  Metinlerin yazı tipi gözü yormayacak ve okumayı kolaylaştıracak türde seçilmelidir. Örnek: Yazı Tipi – Yazı Tipi Yazı Tipi – Yazı Tipi  Sayfalarda en fazla iki farklı yazı tipi kullanılmalıdır.  Metin boyutu: 14 punto  Satırlar arasında genellikle 1,5 veya çift satır boşluğu tercih edilir.

31 31  Dikkat edilmesi gereken noktalar: Ekran Yerleşimi ve Hizalama  Göz soldan sağa ve yukarıdan aşağı hareket eder. Örnek:

32 32  Dikkat edilmesi gereken noktalar: Ekran Yerleşimi ve Hizalama  Hizalama Örnek: Sa ğ hizalama yöntemi, metinlerin ba ş langıç noktalarını de ğ i ş tirdi ğ i ve gözün takip hareketini zorla ş tırdı ğ ı için tercih edilmemelidir.

33 33  Dikkat edilmesi gereken noktalar: Vurgulama  Görsel bir öğenin önemini arttırma, ilgi uyandırma, dikkat çekme amacıyla kullanılan bir yöntemdir. Örnek: Vurgulama Vurgulama VURGULAMA Vurgulama

34 34  Dikkat edilmesi gereken noktalar: Metin- Zemin Uyumu  Zeminlerin doku ve renkleri metnin okunurluğunu etkiler. Örnek 1: Örnek 2: Okunaklı mı? Okunaklı

35 35 Tasarım ekibinin seçilmesi İ htiyaç analizinin yapılmasıHedeflerin belirlenmesiHedef kitlenin analiziTasarım ö ğ elerinin belirlenmesiYazılım araçlarının belirlenmesiTasarımın bilgisayar ortamına aktarılması İ çeri ğ in tasarlanması ve ş ablona yerle ş tirilmesiAra de ğ erlendirmelerin yapılmasıYardımcı malzemelerin geli ş tirilmesiPilot denemelerin yapılmasıSon kontrollerin yapılması ve ço ğ altma