BİLG301 DERS YAZILIMLARININ TASARIMI. Dr. Mustafa T. Babagil -Ders yazılımlarının tasarımı 1

Transkript

1 BİLG301 DERS YAZILIMLARININ TASARIMI 1

2 Ders yazılımı geliştirme süreci 1. Tasarım ekibinin seçilmesi 2. İhtiyaç analizinin yapılması 3. Hedeflerin belirlenmesi 4. Hedef kitlenin analizi 5. Tasarım öğelerinin belirlenmesi 6. Yazılım araçlarının belirlenmesi 2

3 7. Tasarımın bilgisayar ortamına aktarılması 8. İçeriğin tasarlanması ve şablona yerleştirilmesi 9. Ara değerlendirmelerinin yapılması 10. Yardımcı malzemelerin geliştirilmesi 11. Pilot denemenin yapılması 12. Son kontrollerin yapılması ve çoğaltma yazılımlarının tasarımı 3

4 1. Tasarım ekibinin seçilmesi Bir ders yazılımı geliştirirken Öğretim tasarımcısı Programcı Konu uzmanı Grafik tasarımcı Ölçme değerlendirme uzmanı Satış destek sorumlusu 4

5 2. İhtiyaç analizinin yapılması İhtiyaçlar hakkında bilgi toplamayı ve toplanan bilgileri kullanarak,öncelikler hakkında karar vermeyi içerir. Dört aşamada tamamlanan bir süreçtir. Hazırlık Bilgi toplama Bilgilerin analizi Bilgilerin raporlaştırılması 5

6 3. Hedeflerin belirlenmesi Hedef Bilgi Beceri Tutumlar 6

7 4. Hedef kitlenin analizi Hedef grubun sahip olduğu niteliklerin analizi çeşitli yöntemlerle yapılabilir: Tesadüfü olarak seçilmiş hedef kitle üyelerinin; Ve de Gözlemlenmesiyle İletişim halinde bulunarak Test uygulayarak hedef kitleyle ilgili tecrübe sahibi olan uzmanların görüşlerine başvurulması yoluyla hedef kitleye ilişkin bilgi toplama 7

8 5. Tasarım öğelerinin belirlenmesi öncelikli olarak ne gibi tasarım tekniklerinin kullanılacağı arayüzün ne gibi işlevlerin olacağı şablonun biçimsel özelliklerinin nasıl olacağı hangi renklerin kullanılacağı gibi genel hatlarıyla belirlenmeye çalışılır. 8

9 6. Yazılım araçlarının belirlenmesi o Adobe photoshop o Illustrator o Macromedia o Freehand o Corel Draw Grafik üretim yazılımları ASP,PHP,Visual Basic Flash,Dreamweaver Yazılım araçları 9

10 Geliştirilen yazılımlarının veri tabanı işlemlerinde de Extensible Markup Language (XML), Access,MYSQL gibi veri tabanı uygulamaları kullanılmaktadır. 10

11 Veri tabanı seçimi ve tasarımı * Veri tablolarının belirlenmesi * Kayıt deseninin belirlenmesi * İndeks ve anahtar alanların belirlenmesi * İlişkisel veri tabanının seçimi Arayüz tasarımı ve geliştirme araçları * *Kullanılacak yazılımlarının seçimi *Tasarım alanının belirlenmesi *Menülerin ve ikonların tasarımı *Açılış sayfasının tasarımı *Sorgulama ekranının tasarımı *Kullanıcı giriş ve veri kayıt ekranının tasarımı 11

12 7. Tasarımın bilgisayar ortamına aktarılması Bu aşamada programcının işini kolaylaştırılması amacıyla tasarımda hazırlanan senaryolar,kodlama detayları ve akış diyagramlarının programcıya yazılı olarak verilmesi ve yapılacak işin detaylı olarak anlatılması gereklidir. 12

13 8. İçeriğin tasarlanması ve şablona yerleştirilmesi Hazırlanan içeriğin dil bilgisi ve anlam yönünden kontrolünün dikkatli yapılmalı Yazılımda bulunan bilgilerin kısa ve öz cümleler Görsel ve işitsel yönü ön plana çıkarılmış Ve daha çok duyu organlarına hitap eden Bilgilerin sağlam ve güvenilir kaynaklardan temin edilmelidir. 13

14 9. Ara değerlendirmelerinin yapılması Tüm üyeleri ara değerlendirme aktivitelerinde bulunarak tasarım sürecinin sağlıklı işlemesine yardımcı olmalıdırlar. 10. Yardımcı malzemelerin geliştirilmesi o Kullanıcı kılavuzları o Yardım hizmetleri o Sözlükler o Kısayollar 14

15 11.Pilot denemenin yapılması Yazılımın aksayan yönlerinin tespit edilmesi için kullanılan bir aşamadır. ALFA TESTİ dolaşım görünüm içerik dokümantasyon güvenilirlik BETA TESTİ kurulum 15

16 12. Son kontrollerin yapılması ve çoğaltma Bu aşamada gözden kaçması muhtemel olası hataların düzeltilmesi Yazılımın çoğaltılmaya hazır hale gelmesi gerekmektedir. CD ortamında çoğaltım işleri için seçilen medyanın kaliteli bir malzemeden üretilmiş olmasına özen gösterilmelidir. 16

17 17

18 Görsel-işitsel öğelerin tasarımı Görsel öğelerin tasarımı İşitsel öğelerin tasarımı Görsel-işitsel öğelerin tasarımı 18

19 Görsel öğeler; Görsel öğelerin tasarımı Öğrenen bireylerin dikkatini çekerek onları güdüler, Bireylerin dikkatlerini canlı tutar, Duygusal tepkiler vermelerini amaçlar, Öğretilen kavramları somutlaştırır, Anlaşılması zor olan kavramları basitleştirir, Şekiller yoluyla bilginin düzenlenmesini ve alınmasını kolaylaştırırlar, Bir kavramla ilgili öğeler arasındaki ilişkileri örgüt şemaları ve akış şemaları yoluyla rahatlıkla verebilir, 19

20 Bazı öğrencilerin sözel yolla kaçırmaları muhtemel bazı noktaları anlamalarına olanak tanır.! Kullanılan malzemelerin boyutlarının ve görüntü kalitesinin iyi olma zorunluluğudur.! Kolay anlaşılır ve gözü yormayan bir yapıda olmaları gerekmektedir. Yazılımda kullanılacak görsel öğeler seçilirken,internetten veya diğer kaynaklardan temin edilen görsel malzemelerin telif sorunu çıkarmayacak biçimde(ücretsiz) olmasına da özen gösterilmelidir. 20

21 İşitsel öğelerin tasarımı Ses ve konuşmaların salt bilgi sağlamak için kullanılmasına dikkat edilmelidir. Ses kayıtlarının anlaşılırlık düzeyleri çok önemli bir konudur. Ses kayıtları sırasında mümkünse profesyonel bir seslendirme kullanılmalıdır. Sesler yürütülürken kullanıcı sesleri metin olarak da ekrandan takip edilebilmelidir. 21

22 Görsel-işitsel öğelerin tasarımı Yazılımlarda konuların anlamca desteklenmesi amacıyla çoğunlukla çeşitli yazılımlar tarafından geliştirilmiş animasyonlar ve videolar kullanılmaktadır. Video görüntülerinin,öğrencinin dikkatinin kopmasına neden olmaması bakımından mümkün olduğunca kısa tutulmasında yarar vardır. Video görüntülerinin 20 saniyeyi aştığı durumlarda kullanıcıya kontrol olağanı tanınmalı,görüntülerin hızlı olarak ileri-geri alınması seçeneği mutlaka sorulmalıdır. 22

23 Eğitim ve öğretim sürecinin her kademesinde,çeşitli engellere sahip olan öğrencilerimizin var olduğu da düşünüldüğünde, görsel ve işitsel öğelerin önemi bir kat daha artacaktır. 23

24 24

25 Yazı tipi,yazı boyutu ve boşluklar Metin-zemin uyumu Metne dayalı öğelerin tasarımı Ekran yerleşimi ve hizalama Vurgulama 25

26 Yazı tipi, yazı boyutu ve boşluklar Metinlerin bilgisayar ekranından okunacağı ve bilgisayar ekranına uzun sürekli bakmanın da gözü yoracağı gerçeği unutulmamalıdır. Arial, Verdana, Tahoma, MS Sans Serif, Metinlerin bilgisayar ekranından ve cm. mesafeden okunmalıdır.(14 punto) Metinlerde,satırlar arasındaki boşluklar metnin okunurluğun üzerinde büyük ölçüde etkide bulunabilmektedir. (genellikle bir buçuk veya çift satır boşluğu) 26

27 Ekran yerleşimi ve hizalama Ekrandaki bilgilerin biyolojik olarak gözün hareketine ters düşmeyecek şekilde tasarlanmış olması,okuyucunun gözünü yormadan ilgisini devam etmesinde yardımcı olacaktır. Paragraflar tasarım alanına yerleştirilirken dikkat edilmesi gereken nokta, gözün soldan sağa ve yukardan aşağıya doğru hareketine uygun bir yerleşimin belirlenmesidir. Gözün hareket yönü 27

28 Önemli olan paragrafların sol başlangıç ve sağ bitiş noktalarının her sayfada aynı olmak üzere birbirlerine göre hizalanmış olmasıdır. Metinlerin özellikle sola hizalanması dikkat edilmelidir. Sağa hizalanma yöntemi metinlerin başlangıç noktalarını değiştirdiği ve gözün takip hareketini zorladığı için tercih edilmemelidir. Sağa hizalanma yöntemi metinlerin başlangıç noktalarını değiştirdiği ve gözün takip hareketini zorladığı için tercih edilmemelidir. Uygun hizalama Uygun olmayan hizalama 28

29 Vurgulama genel olarak vurgulama,görsel bir öğenin Önemini artırma İlgi uyandırma Dikkat çekme amaçlı kullanılan bir yöntemdir. Metnin boyutunu büyütme,kalınlaştırma,büyük HARFLE YAZMA,altını çizme,fon rengini değiştirme gibi çeşitli yöntemler kullanılabilmektedir.! neyin vurgulanacağına dikkat edilmelidir. 29

30 Metin-zemin uyumu Mümkün olduğunca metnin karışmasına yol açacak dokulu zeminleri kullanmamakta ve renk bilgisiyle renklerin birbirleriyle uyumunu bilmekte yarar vardır. Metin ve zemin rengini belirlerken; Sarı zemin üstüne siyah metin rengi Beyaz zemin üzerine yeşil, kırmızı,mavi Mavi zemin üzerine beyaz metin rengi Siyah zemin üzerine sarı metin rengi 30

31 Grafik-arayüz tasarımı Arayüz insanın makine ile iletişimine olanak sağlayan yazılım parçasıdır. Arayüz,yazılımın kullanıcıya açılan penceresidir ve kullanıcı yazılım içerisinde bulunduğu süre boyunca bu pencereden yazılıma bakmaktadır. Bu pencere geniş ve ferah olmalıdır. Grafik arayüz tasarlanırken göz önüne alınması gereken en temel nokta gerçekleştirilecek tasarımın kullanıcı merkezli olmasıdır. 31

32 32

33 renk Tasarım ilkeleri uygunluk oran-orantı denge 33

34 Renk Sıcak renkler dalga boyu yüksek olan sarı,kırmızı,turuncu gibi renklerden oluşmaktadır. Soğuk renkler ise dalga boyları daha düşük olan mavi,mor ve yeşil gibi renklerdir. Sıcak renkler daha çabuk algılanbildikleri ve görsel düzen içinde daha kolay görülebilir oldukları için taraım elemanları içinde kullanıldığında bireyde yakın olma hissi uyandırır. Kullanılan öğeler arasında ve şablonun bütünlüğü içerisinde renk bakımından bir uyumun bulunması gerekmektedir. 34

35 Koyu renkli zeminler üzerinde açık renkli objeler; açık renkli zeminler üzerinde de koyu renkli objelerin kullanılmasıdır. güçlü ve parlak renklerin kullanımı: canlı ve parlak renkler az tercih edilmelidir. açık ve koyu renkleri karıştırmak: iki rengin bir arada kullanımı zıtlık oluşturacağı için dikkat çekmeye yardımcı olur. artalan: artalan için kullanılacak renklerin dingin,sessiz, yumuşak ve doğal renklerden seçilmesinde yarar vardır. Bu kullanımda daha parlak ve canlı renklerin metinlerin göze çarpmasını sağlar. birlik: geniş alanlar tek renkle doldurulup ekrandaki renk dengesi bozulmamalı,uygun olan başka bir renkler renk geçişi sağlanarak kullanılmalıdır. 35

36 Uygunluk Uygunluk,her bakımdan orta kararlılık ifade eden bir tasarım örneğidir. Biçim,ölçü,renk gibi bir veya daha çok elemanları benzer olan görsel elemanlar birbirleriyle uyumlu olarak nitelendirilmektedir. 36

37 Oran-orantı Bir ders yazılımında oranın yakalanabilmesi,tasarımda bir arada kullanılan grafiklerin,metinlerin,şekillerin, resimlerin, pencerelerin ekranda kapladıkları alanlar bakımından birbirleriyle orantısal olarak farklı olmak durumundadır. Örneğin,başlıklara atana yazı tipi boyutuyla paragraflara atanan yazı tipi boyutu birbirleriyle orantısal olarak farklı olmak durumundadır. 37

38 Oranlanmış ekran Oranlanmamış ekran 38

39 denge Tasarımda bir araya getirilen objeler arasında simetrik (şekilsel) ve asimetrik (şekilsiz) denge olmak üzere iki tür denge unsuru sağlanmaktadır. Ekran tasarımında simetrik dengenin sağlanmış olması, ekranın ağırlık merkezi bakımından dengede olmasına ve gözün belli bir noktaya yoğunlaşmasının önüne geçilmesine yardımcı olur. 39

40 Dengelenmiş ekran Dengelenmemiş ekran 40

41 41

42 Kontrol öğeleri Genellikle bir ders yazılımının ara yüzünde ana sayfa,içindekiler,konular, öntest-sontest,ara değerlendirme, yardım ve sözlük gibi menüler bulunmaktadır. Ara yüzde kullanıcıların denetimini sağlamak amacıyla butonlar,tam ekran menüler,çerçeve menüler ve gizli menüler yaygın olarak kullanılmaktadır. 42

43 Düğmeler Düğmeler (buton),çok sık kullanılan arayüz bileşenleridir. Genellikle bir önceki veya bir sonraki sayfaya gitme,bir ses veya video dosyasını çalma,ilerletme,durdurma ve çoktan seçmeli sorularda bir seçeneği seçme amacıyla kullanılır. Çok sayıda düğme kullanımından kaçınılmalı, Fazla düğme kullanmak gerekiyorsa menü sistemlerine başvurulmalı, Kullanılan düğmelerin amaçları net olarak anlaşılabilmeli, Düğmelerde farklı anlama gelebilecek şekil veya resimler kullanılmamalı, Fareyle düğmelerin üzerine gelindiğinde kursör şekil değiştirmemeli veya çeşitli efektler kullanılmalı, Bir buton seçildiğinde diğerlerinden ayırt edilebilecek bir şekil almalıdır. 43

44 Tam ekran menüler Özellikle bütünlüğün sağlanması noktasında sıkça tercih edilen menü türleridir. Kullanıcıya içeriğin tamamını genel olarak görme şansı da tanırlar. 44

45 45

46 Çerçeve menüler Bu menüler sıklıkla web uygulamalarında tercih edilen menü türleridir. Kullandıkları prensip bölünmüş ekran yöntemidir. 2 parçaya ayrılmış bir ekranın 1/3lük kısmı seçenek listesine,2/3 lük kısmı da içerik için ayrılmalıdır. Çerçeve menülerde, pull-down ve pop-up menülerin aksine resim,ikon gibi görsel öğeler de kullanılabilir. Kullanıcı, yapıyı genel olarak bulunduğu hr ekrandan görebilir. Bu özellikleriyle çerçeve menüler kullanıcıya yazılımın kontrolünü sağlaması konusunda da yardımcı olmaktadır. 46

47 Gizli menüler o Ders yazılımlarında arayüzün karmaşasını önlemek amacıyla sıkça tercih edilen menü türleridir. o Görsel olarak çekiciliklerinin olmaması,genellikle metin içeren tek tip font ve renkle tasarlanmış olmaları, gizli oldukları için kullanıcılar tarafından fark edilememeleri ve sürekli yapılan eylemler için uygun olmamaları gibi birtakım sınırlılıkları bulunmaktadır. 47

48 Pull-down menüler: Çoğunlukla fareyle üzerlerine gelindiğinde veya kursörle tıklandığında açılır şekildeki gizli menü türleridir. Kullanımlarında açılır haldeki pencerelerin ileri-geri gitme, ana sayfaya dönme gibi ekranın önemli yönlendiricilerini kapatmamasına özen gösterilmelidir. 48

49 Pop-up menüler: Tamamen gizli menülerdir ve ekrana atanmış belli kodlar aracılığıyla kullanılırlar. Herhangi bir ekrandayken farenin sağ tuşuna basıldığında veya çeşitli tuş kombinasyonları kullanarak ekranda görüntülenmeleri sağlanır. 49

50 Tear-off menüler: Yapı olarak pull-down menülere benzemektedirler. Avantaj, bir menü seçeneğinin menü sisteminden koparılarak ekranın istenilen bölümüne taşınabilmesi,sonra aynı menüye tekrar yerleştirilmesidir. 50

51 Kullanılabilirlik Yazılımın içerisinde karmaşadan uzak bir ilişkisel sistemin tasarlanmış olmasıdır. Arayüzü tasarlarken sadece görsel tasarım boyutuna odaklanmanın yetersiz olduğu,aynı zamanda arayüzün kolay kullanılabilir özelliklere de sahip olması gerektiği sonucuna varılabilir. 51

52 Esneklik Arayüzde kullanılan renklerin,görüntülenme biçimlerinin,menü sistemlerinin ve metinlerin yazı tipi ve yazı tipi boyutlarının kullanıcılar tarafından değiştirilebiliyor olması, kullanıcının kendini daha özgür hissetmesine yardımcı olacak ve yazılımdan alacağı memnuniyeti artıracaktır. 52

53 Etkileşim Ders yazılımlarında, kişiye özel işlemlere ait kayıtların tutulabilmesi amacıyla,kullanıcının girişinin yapıldığı bir karşılanma ekranı kullanılmaktadır. Kullanıcı kendi kullanıcı adını ve şifresiyle yazılıma giriş yaptığında kendi açtığı oturumda ders yazılımlarından yararlanabilir. Kişisel bilgileriyle giriş yapan kullanıcı,başarı durumunu, çalıştığı konu gibi çeşitli noktalarda istediği verilerin kaydının tutulması ve bir sonraki girişte bu kayıtlara göre hareket edilmesini isteyebilir. 53

54 sorular 1. Ders yazılımlarının geliştirilmesi sürecinde yapılan işlemlerden 6 tanesini yazınız ve içlerinden 2 tanesini kısaca açıklayınız. 2. İhtiyaç analizleri kaç aşamada tamamlanan bir süreçtir? 3. Hedef kitle analizinde yapılması gerekenler nelerdir? 4. Arayüz tasarımı aşamasında ne gibi işlemler gerçekleştirilmelidir? 5. Tasarımlarda görsel öğelerin kullanılması öğrencilere ne gibi kolaylıklar sağlar? 6. Metne dayalı öğelerin tasarımda nelere dikkat edilmelidir? 7. Sağa hizalama yöntemi neden uygun olamayan bir yöntemdir? 8. Metin-zemin uyumuna ilişkin örnekler veriniz. 9. Tasarım ilkeleri nelerden oluşmaktadır? 10. Arayüzde düğme kullanılırken nelere dikkat edilmelidir? 54

55 11. Çerçeve menüler hakkında bilgi veriniz. 12. Gizli menülerin dezavantajları nelerdir? 13. Ders yazılımlarında esneklik neden önemlidir? 14. Dengelenmiş ve dengelenmemiş ekrana bir örnek veriniz. 15. Metne dayalı öğelerde tercih edilen yazı tipleri nelerdir? 55