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 Görsel‐işitsel öğelerin tasarımı ve üretimi Metne dayalı öğelerin tasarımı ve üretimi Video öğelerinin tasarımı ve üretimi 2
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 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 Tasarım İ lkeleri Kontrol Ö ğ eleri Esneklik Etkile ş imlilik Kullanılabilirlik
RenkOran - OrantıUygunlukDenge 6
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 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 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 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 Uygunluk: Renk Oran - Orantı UygunlukDenge
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
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
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
Denge: Renk Oran - Orantı UygunlukDenge 15
Düğmeler (Buton) Menüler Tam ekran menüler Çerçeve menüler Gizli menüler 16
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
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
Menüler: Tam Ekran Menüler Örnek: 19
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
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
Menüler: Çerçeve Menüler Örnek: 22
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
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 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 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 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 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 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 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 Dikkat edilmesi gereken noktalar: Ekran Yerleşimi ve Hizalama Göz soldan sağa ve yukarıdan aşağı hareket eder. Örnek:
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 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 Dikkat edilmesi gereken noktalar: Metin- Zemin Uyumu Zeminlerin doku ve renkleri metnin okunurluğunu etkiler. Örnek 1: Örnek 2: Okunaklı mı? Okunaklı
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