Effective Screen Design

1. EffectiveScreenDesign Volkan BAL

2. Algı kolaylığı

3. CognitiveAspects Effective Screen Design • Grouping • Continuity • Picking Colors • Fonts • Text • Pictures

4. CognitiveAspects Grouping Continuity Picking Colors Fonts Text Pictures

5. Grouping is necessary for Cognitive load Grouping

6. Grouping is necessary for Cognitive load Grouping

7. Grouping

8. Grouping-Chunking • Etkinlik

9. CognitiveAspects Grouping Continuity Picking Colors Fonts Text Pictures

10. Algı kolaylığı - Süreklilik Değişiklik önemli bilgi ya da farklı bilgi demektir, ekranı sürekli farklı yapmayalım ki dinleyenin kafası karışmasın

11. Algı kolaylığı - Süreklilik

12. CognitiveAspects Grouping Continuity Picking Colors Fonts Text Pictures

13. Renk Uyumu - Renk Seçimi • Arka plan rengiyle zıt renkler kullanın • Arka plan rengiyle zıt renkler kullanın • Karmaşık arka plan seçimi yapmayın ki yazılar okunabilsin • Karmaşık arka plan seçimi yapımayın ki yazılar okunabilsin

14. Renk Uyumu - Renk Seçimi • Yazıların arkasına okunmayı kolaylaştıracak altlıklar koyun • Arka plan rengiyle zıt renkler kullanın • Karmaşık arka plan seçimi yapmayın ki yazılar okunabilsin

15. Çiçekler • A B C

16. Çiçekler • A B C

17. Çiçekler • A B C

18. Çiçekler • A B C

19. Çiçekler • A Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin

20. Çiçekler • A B C

21. Çiçekler • A Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin. Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin. Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin.

22. Çiçekler A Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin. Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin. Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin. Bitkinin özelliklerini buraya yazıyorum ki herkes okuyabilsin.

23. Renk Uyumu- Kullanım Çokluğu • Az olan, sürekli tekrar etmeyen objeler veya olaylar daha çok ilgi çeker. • Renkilgiyiçekmeninkolayyoluduramafazlakullanıldığında sıradan renkler daha çok ilgi çeker vefarkındalıkyaratır.

24. Renk Uyumu- Kullanım Çokluğu • Az olan, sürekli tekrar etmeyenobjelerveyaolaylardaha çok ilgiçeker. • Renkilgiyiçekmeninkolayyoluduramafazlakullanıldığında sıradan renklerdahaçok ilgi çekervefarkındalıkyaratır. Az olan, sürekli tekrar etmeyen objeler veya olaylar daha çok ilgi çeker. Renk ilgiyi çekmenin kolay yoludur ama fazla kullanıldığında sıradan renkler daha çok ilgi çeker ve farkındalık yaratır.

25. Renk Uyumu- Kullanım Çokluğu

26. Renk Uyumu-Taşınan anlam • Renklere bazı anlamlar yüklenebilir • Kırmızı; - dur demektir • Sarı; bekle, tetikte ol • Yeşil; güvenli

27. Renk Uyumu - Gruplama • Renklerle gruplandırmalar yapılabilir • Taşıdıkları anlamla birleşirse daha başarılı olabilir Osmanlı’nın Padişahları • Duraklama: Genç Osman, 4. Murad • Yükselme: Yavuz Sultan Selim, Kanuni Sultan Süleyman • Gerileme: 1. Abdülhamid

28. CognitiveAspects Grouping Continuity Picking Colors Fonts Text Pictures

29. Yazım şekli • Yazıların büyük küçük karakter olması önemli mi? • Fontların tipi önemli mi? • Fontların büyüklüğü önemli mi?

30. Yazım şekli – Karakter (BÜYÜK/küçük) Okulda birinci sınıf öğrencileri, bir aile fotoğrafı üzerinde tartışıyorlardı. Fotoğraftaki küçük çocuğun saç rengi ailenin öteki bireylerinin saç renginden değişikti.... OKULDA BİRİNCİ SINIF ÖĞRENCİLERİ, BİR AİLE FOTOĞRAFI ÜZERİNDE TARTIŞIYORLARDI. FOTOĞRAFTAKİ KÜÇÜK ÇOCUĞUN SAÇ RENGİ AİLENİN ÖTEKİ BİREYLERİNİN SAÇ RENGİNDEN DEĞİŞİKTİ....

31. Yazım şekli - Yazı tipi • Önemli / sunum sırasında farklı çeşitte font kullanılmamalı. Aynı cinsten yazılar aynı fontta olmalı Okulda birinci sınıf öğrencileri, bir aile fotoğrafı üzerinde tartışıyorlardı. Fotoğraftaki küçük çocuğun saç rengi ailenin öteki bireylerinin saç renginden değişikti.... Öğrencilerden biri o küçük erkek çocuğunun belki de evlat edinilmiş olabileceğini söyledi. Onun bu sözünü duyan Jocelynn Jay adında küçük bir kız öğrenci ,birden sesini yükseltti: - Ben evlat edinme konusunda her şeyi bilirim , çünkü ben de evlatlığım!... Sınıftaki bir başka öğrenci sordu: - Madem biliyorsun bize de anlatsana ...Evlat edinilmek ne demektir..? Jocelyn, kendinden emin bir biçimde bilgisini özetledi: - Annenin karnında değil, yüreğinde büyümüşsün demektir.

32. Yazım şekli - Yazı miktarı • Slaytlar para ile satılmıyor istediğiniz kadar kullanın Okulda birinci sınıf öğrencileri, bir aile fotoğrafı üzerinde tartışıyorlardı. Fotoğraftaki küçük çocuğun saç rengi ailenin öteki bireylerinin saç renginden değişikti.... Öğrencilerden biri o küçük erkek çocuğunun belki de evlat edinilmiş olabileceğini söyledi. Onun bu sözünü duyan Jocelynn Jay adında küçük bir kız öğrenci ,birden sesini yükseltti: - Ben evlat edinme konusunda her şeyi bilirim, çünkü ben de evlatlığım!... Sınıftaki bir başka öğrenci sordu: - Madem biliyorsun bize de anlatsana ...Evlat edinilmek ne demektir..? Jocelyn, kendinden emin bir biçimde bilgisini özetledi: - Annenin karnında değil, yüreğinde büyümüşsün demektir.

33. Yazım şekli - Yazı tipi • Slaytlar para ile satılmıyor istediğiniz kadar kullanın Okulda birinci sinif öğrencileri, bir aile fotoğrafı üzerinde tartışıyorlardı. Fotoğraftaki küçük çocuğun saç rengi ailenin öteki bireylerinin saç renginden değişikti.... Öğrencilerden biri o küçük erkek çocuğunun belki de evlat edinilmiş olabileceğini söyledi. Onun bu sözünü duyan Jocelynn Jay adında küçük bir kız öğrenci, birden sesini yükseltti:

34. Yazım şekli - Yazı tipi • Slaytlar para ile satılmıyor istediğiniz kadar kullanın - Ben evlat edinme konusunda her şeyi bilirim, çünkü ben de evlatlığım!... Sınıftaki bir başka öğrenci sordu: - Madem biliyorsun bize de anlatsana ...Evlat edinilmek ne demektir..? Jocelyn, kendinden emin bir biçimde bilgisini özetledi: - Annenin karnında değil, yüreğinde büyümüşsün demektir.

36. CognitiveAspects Grouping Continuity Picking Colors Fonts Text Pictures

37. Cmabridge Üinversitesinde yaıpaln bir arşaıtrmaya gröe, bir kleimedkei hafrlrein hnagi sıarda didizlikleri dğeil, ilk ve son hafrlrein dğoru yedre olamalrı öenm tşamıatkadır. Geirsi taammen karmadaşır ve ynie de surosnuz olraak okubanilir. Buunn sbeebi isnan benyinin her hafri tek tek dieğl kemileelri bir btüün oralak omukadısır. Algı

38. Algı kolaylığı • Aynı anda ilgisiz resim yazı ve video göstermeyin

39. CognitiveAspects Grouping Continuity Picking Colors Fonts Text Pictures

40. Algı kolaylığı - Resimler Kullanılan resim nasıl kullandığınız önemlidir

41. Algı kolaylığı - Resimler Kullanılan resim nasıl kullandığınız önemlidir

42. Algı kolaylığı - Resimler Kullanılan resim nasıl kullandığınız önemlidir

43. Algı kolaylığı - Resimler Kullanılan resim yazıyı bastırmamalı. Metin ve resim arasında bir uyum olmalı

44. Algı kolaylığı – Resimlerin yeri Ekranı soldan sağa, yukardan aşağı tarıyoruz. İlk metin dikkati çeksin derseniz solda yoksa sağda olmalı

45. Bir nesneden bahsederken kişiye bahsedilenin resmini ya da modelini gösterin/verin. (Gerçeğine ulaşılamayan durumlar için.) CognitiveAspects