Etkileim Tasarm Temelleri Hazrlayan Hatice Gke BLG Dersin

Etkileşim Tasarım Temelleri Hazırlayan: Hatice Gökçe BİLGİÇ Dersin Sorumlusu: Yrd. Doç. Dr. Hakan TÜZÜN

Sunu Planı • • Giriş Tasarım nedir? Tasarım Süreci Kullanıcıya Odaklanmak Senaryolar Seyir –Gezinim (Navigasyon) Tasarımı Ekran Tasarımı ve Düzen İterasyon ve Prototiplendirme 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 2

Etkileşim Tasarımına Giriş • Etkileşim Tasarımı sadece yapay üretilmiş bir insan yapıtı, fiziksel bir araç ya da bilgisayar programı demek değildir. • Etkileşim Tasarımı -> Bir şeyin insanların onunla çalışmasını nasıl etkileyeceğinin anlaşılmasıdır. • ‘Designing Interventions’ Tasarımcı olarak durumu değiştirmeye müdahale ediyoruz aslında. Bu değişimi de daha iyiye ulaşmak için yapıyoruz. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 3

Tasarım nedir? • Sınırlar içerisinde amaçları başarmak – Amaçlar – Sınırlar 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 4

Tasarım nedir? • Amaçlar – Üretmek istediğimiz tasarımın amacı nedir? – Bu tasarım kimler için? – Bu tasarımı ne için istiyoruz? 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 5

Tasarım nedir? • Sınırlar – – – 27. 2. 2021 Hangi materyalleri kullanmak zorundayız? Hangi standartları benimsemek zorundayız? Maliyet? Zaman? Sağlık ve güvenlik konuları? BTÖ 611 - İnsan Bilgisayar Etkileşimi 6

Tasarım nedir? • Trade-off (Ödün vermek) – Hangi amaç ve sınırlardan diğerlerini karşılamak için ödün verilebilir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 7

Tasarımın Altın Kuralı • Materyalleri anlamak – Özellikle fiziksel tasarımlarda önemlidir. Sandalyenin tahtadan veya demirden yapıldığındaki farklı tasarımlar gibi… 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 8

Tasarımın Altın Kuralı İnsan bilgisayar etkileşimi incelendiğinde , tasarımı ilgilendiren materyaller: – İnsan – Bilgisayar 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 9

İnsanları Anlamak • İnsanları anlamak – Psikoloji – Sosyal bakış – İnsan hatası 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 10

Bilgisayarları Anlamak • Bilgisayarları anlamak – Limit – Kapasite – Araçlar – Platform 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 11

Hatasız kul olmaz – To err is human • İnsanların doğasında hata vardır. • Sistemler bu hata yapma ihtimalini en aza indirmek için tasarlanmalıdır. • Maddesel bir materyal ile tasarımda maddenin dayanaklığı ve zayıflıklarına bakılarak tasarım - yapı güçlendirilir. • İnsanlar için de hangi noktalarda hata yapılabiliri anlamaya çalışarak etkin bir ara yüz tasarımı hazırlanmalıdır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 12

Tasarım Süreci • HCI – İnsan bilgisayar etkileşimi uzmanlarının genel şikayeti: – Kendilerine çok geç başvurulması – Genellikle sistem tasarlanıp oluşturulduktan sonra, sistemin kullanılabilirliğinde bir sorun ortaya çıktığında kendilerine bunun düzeltilmesi için danışılması 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 13

Tasarım Süreci • Kullanılabilirlik (Usability) bazı şirketlerde test etmek olarak görülüyor: – Tasarımın başından itibaren kullanılmıyor. – İnsanların sistemi kullanıp kullanamadığına bakılarak problemler kontrol ediliyor. • En iyi şirketlerde ise kullanılabilirlik başlangıçtan itibaren tasarım sürecinde yer almaktadır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 14

Tasarım Süreci Gereksinimler Ne İsteniyor? Analiz Tasarım Prototip (Ön ürün) 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi Uygulama 15

Gereksinimler - Requirements • Neler isteniyor? Beklentiler neler? • Öncü yordayıcılar gereklidir -> Precursor – Örneğin; var olan sistemlerin incelenmesi gibi… • Bu bilgiler bir çok yolla toplanabilir: – İnsanlarla görüşmeler – Video kaydına almak – Belgeleri incelemek – Var olan nesne ya da sistemleri incelemek… 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 16

Analiz - Analysis • İlk aşamada toplanan veriler analiz edilerek anahtar noktalar belirlenmelidir. • Görev modelleri (Task models): (Chp. 18) – İnsanların hayatlarının parçası olan görevleri nasıl yerine getirdiklerinin incelemesi • Senaryolar: (Chp. 5) – Zengin etkileşim hikayelerinin görev modelleri ile ilişkili olarak ya da tek başlarına gerçek etkileşimi daha net bir hale getirmek için incelenmesi 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 17

Analiz - Analysis • Böylece görev modellemesi ve senaryolar ile – hem var olan durumdaki gerçek etkileşimin – hem de olması gereken –hedeflenen- etkileşimin bir temsili ortaya konur. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 18

Tasarım - Design • Tasarımda bizden beklenen ile beklenenlerin nasıl gerçekleştirileceği merkez evredir. • Bunu gerçekleştirmek için birçok kural, yönerge ve prensip bulunmaktadır. • Ekran düzeni, seyir-gezinim gibi öğelerin tasarlaması bu aşamada yapılır. • Etkileşim modellenir. • Bu aşamada bilişsel modeller, organizasyonel konular ve iletişimin anlaşılması da en yararlı noktalardan biridir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 19

Iterasyon ve Prototip – Iteration and Prototyping • İnsanlar komplekstir ve ilk seferde doğru tasarımı yapmaları beklenmez. • Tasarım her aşamada değerlendirilmeli, ne derecede düzgün çalışıp çalışmadığı kontrol edilmeli ve geliştirmeler yapılmalıdır. • Çoğu tasarımda öncelikle prototipler geliştirilir. • Kağıt üzerinden geri dönütler de alınabilir ancak bu aşamada prototipler üzerinde denemelerle alınan veriler tasarımcıya en gerçek geri dönütleri verir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 20

Iterasyon ve Prototip – Iteration and Prototyping • İterasyon aşamasının en büyük amacı: – Kullanılabilirlik problemlerini bulmak, – Bu problemlerin sebeplerini saptamak ve onarmaktır. • Bu aşamada en önemli nokta kullanılabilirlik problemlerinin sebeplerini saptamak ve onarmaktır. • Problemleri bulmak kolay olan kısım iken bunlardan hangilerinin onarılmaya değdiğini saptayarak onarmak zor olan kısımdır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 21

Uygulama ve Dağıtma – Implementation and Deployment • Tasarım istenen seviyeye gelerek, istenen sonuç elde edildiğinde artık tasarımın gerçekleştirilmesi ve hayata geçirilmesi gerekmektedir. • Bu aşama, – Kod yazma, – Donanım oluşturma, – Dokümanları hazırlama, – El kitapları hazırlama gibi gerçek sistem için gerekli her şeyin hazırlanmasının içerir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 22

Bütün bunların hepsini ben yapabilir miyim? • Tabi ki tasarımlar her zaman bu istenilen şekilde gerçekleşmez çünkü kısıtlı bir zamanda çalışılır. • Bazen kusursuz ama geç biten ve bütçeyi aşan bir tasarımdansa kusursuz olmayan ama zamanında biten ve bütçeye uygun tasarımlar kabul edilebilir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 23

Kullanıcıya Odaklanmak – User Focus • Tüm etkileşim tasarımlarının başlangıcı hedeflenen kullanıcı ya da kullanıcılar ile başlar -> Kullanıcılarını tanı –Know your users. Kullanıcını tanı – Know thy user • Geleneksel ara yüz tasarımları tek kullanıcıya odaklanırlar. • Her sistem işbirliğini desteklemese de her sistem o sistemi o anda kullanan bireyin ötesinde etkiye sahiptir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 24

Kullanıcıya Odaklanmak – User Focus • Örnekler: – Satış Firması – Kütüphane Sistemi • Zamanla bir çok insan bir sistemden direk ya da direk olmayan yollarla etkilenirler. Bu insanlara paydaşlar (stakeholders) denir. • Sistemin etkisinde olan bu paydaşlar ve aralarındaki bağlantılar tanımlanarak sınırlar kontrol altında tutulabilir ve paydaşların tanınması sağlanabilir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 25

Kullanıcılarımızı nasıl tanırız? • ‘Kullanıcılarımız kimlerdir? ’ sorusunu cevaplandırmalıyız. – Kaç yaşlarında? – Bilgisayar deneyimleri ne seviyede? gibi… • Kullanıcılarımızın bize benzememe olasılığını unutmamalıyız. • Kullanıcılara sorular sormalı, onlarla konuşmalıyız. • Kullanıcıları tasarım sürecine dahil etmeliyiz. • Kullanıcıları izlemeliyiz. • Yaratıcılığınızı kullanınız. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 26

Senaryolar • Senaryolar tasarım için öykülerdir: Etkileşimin zengin öyküleri olarak ta adlandırılır. • En basit ama en esnek ve güçlü tasarım simgeleridir. • Senaryolar metin formatında olabileceği gibi şemalarla, resimlerle veya simule edilmiş ekran görüntüleri ile zenginleştirilebilirler. • Bu şemalar öykü yaprağı –storyboard- olarak adlandırılır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 27

Senaryolar • Senaryolar tasarımcıyı daha detaylı düşünmeye iter. • Böylece olası problemlerin önceden farkına varılmasını sağlar. • Senaryoya detay ekledikçe sistem-kullanıcı etkileşimleri en ince ayrıntısına kadar basamak elde etmiş oluruz. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 28

Senaryolar • Detaylı senaryoda her aşamada: – Kullanıcı şimdi ne yapmaya niyet ediyor? – Sistem şimdi ne yapıyor? soruları sorulur. • Senaryolar, – Başkaları iletişim, – Diğer modelleri doğrulamak ve, – Dinamikleri açıklamak için de kullanılır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 29

Senaryolar • Senaryolar linear yani doğrusaldırlar. Bütün potansiyel etkileşimler arasından basit-düz bir yolu temsil ederler. • Bu doğrusallığın hem pozitif hem de negatif yönleri bulunmaktadır: – Zaman da doğrusaldır (Time is linear): Daha kolay anlaşılmasını sağlar. – Alternatifleri içermez (But no alternatives): Gerçek etkileşimde oluşabilecek alternatif etkileşimleri içermez. Kullanıcının yapacağı niyet dışı durumlar gözden kaçabilir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 30

Senaryolar • Senaryolar sonuç olarak; – Tasarım süreci boyunca tekrar kullanılabilecek kaynaklardır. – İstenileni görmemizi sağlarlar. – Potansiyel tasarım ile kullanıcıların nasıl etkileşime gireceğini görmemizi sağlarlar. – Önerilen uygulamaların çalışıp çalışmayacağının kontrolünü sağlarlar. – Final değerlendirmesi için test durumları oluşturmamızı sağlarlar. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 31

Seyir ya da Gezinim Tasarımı • Seyir-Gezinim (Navigasyon): Bir sistem içerisindeki ana ekranlar ile diğer bağlantılar arasında gezinimdeki etkileşimi içerir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 32

Seyir ya da Gezinim Tasarımı • Genel etkileşim seviyeleri: – Küçük Araçlar – Widgets – Ekran ya da Pencereler – Uygulama içindeki gezinim – Çevre 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 33

Seyir ya da Gezinim Tasarımı • Küçük Araçlar – Widgets Uygun aracın seçilmesi ve menüler ile butonlardaki dilin (kelimelerin) kullanımı kullanıcılara o araç, menü ve butonların nasıl ve hangi işlev için kullanılacağı konusunda yardımcı olur. • Ekran ya da pencereler Ekran üzerinde gerekli bağlantıların bulunması önemlidir. Bağlantıların gruplandırılması önemlidir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 34

Seyir ya da Gezinim Tasarımı • Uygulama içindeki gezinim Uygulama içerisinde bir butona basıldığında ne olacağı ve etkileşimin neresinde olunduğunun anlaşılması önemlidir. • Çevre (Environment) Örneğin, kelime işlemcinin disk üzerinden belgeleri okuyabilmesi ya da uzak bağlantı ile paylaşımı gibi… Uygulamalar arasında geçiş ya da değiş tokuş yapabilmesi önemlidir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 35

Seyir ya da Gezinim Tasarımı Etkileşim Seviyeleri PC Uygulamaları Küçük araçlar – Widget Web Siteleri Form elemanları, etiketler ve bağlantılar (linkler) Fiziksel Cihazlar Düğmeler, ışıklar, göstergeler Ekran Tasarımı Gezinim Tasarımı Sayfa Tasarımı Site yapısı Fiziksel Düzen Aracın Temel modları Gerçek Dünya Diğer uygulamalar… İnternet tarayıcısı İşletim Sistemi Dış bağlantılar 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 36

Seyir ya da Gezinim Tasarımındaki 2 Aşama • 1. Aşama: Bir sistemin yapısını düşünürken ilk düşünülmesi gereken o sistemin ya da uygulamanın gerçek kullanımını düşünmektir: (First task: to think about actual use) – Bu uygulamayı –sistemi- kimler kullanacak? – Bu uygulama hakkında nasıl düşünebilirler? – Bu uygulamayı ne için ya da hangi amaç için kullanacaklar? 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 37

Seyir ya da Gezinim Tasarımındaki 2 Aşama • 2. Aşama: Sistemin gerçek kullanımı, kullanıcıları hakkında düşünüldükten sonra yapısı hakkında düşünmek gelir. (Second task: Thinking about structure) – Lokal Yapı (Local Structure): Tek bir ekran tasarımı… – Genel Yapı (Global Structure): Site ya da sistemin yapısı, ekranlar arası gezinim… 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 38

Seyir –Gezinim Tasarımında Lokal- Yerel Tasarımı • Bir çok tasarım hedef odaklı davranış ‘goal-seeking behavior’ içermektedir. • Kullanıcılar bir davranışın peşinden ne gelmesi gerektiğine dair bir takım fikirlere sahiptirler. • Tasarımda önemli olan kullanıcıların erişmek istediği amaçlarına her adımlarından biraz daha yaklaştıklarını hissetmelerini sağlayabilmektir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 39

Seyir –Gezinim Tasarımında Lokal- Yerel Tasarımı • İdeal dünyada kullanıcılar, – Sistem içerisinde ne gerçekleştireceklerine ve sistemin nasıl çalıştığına dair kusursuz bir fikre sahip olurlar. – İstedikleri işlevi gerçekleştirmek için tüm doğru buton ve bağlantılarla en kısa yolu bilmeleri gerekir. • Öte yandan, – Eğer kullanıcılar sistem hakkında yarım bilgiye sahiplerse sistem içerisinde dolambaçlı yollarda gezinirler. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 40

Seyir–Gezinim Tasarımında Lokal- Yerel Tasarımı Goal-Seeking Başlangıç 27. 2. 2021 Hedef BTÖ 611 - İnsan Bilgisayar Etkileşimi 41

Seyir –Gezinim Tasarımında Lokal- Yerel Tasarımı • Hedeflerin başarılmasında kullanıcıların her aşama ya da ekranda bir sonraki aşama için yeterince bilgilendirilmesi gereklidir. • Kullanıcılar bir web sitesinde, bir ekranda ya da bir araç üzerinde, – Nerede olduğunu bilmek, – Ne yapabileceğini bilmek, – Nereye gittiğini bilmek ya da o aşamada ne gerçekleşeceğini bilmek, – Nerede olduğunu ve ne yaptığını bilmek. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 42

Seyir –Gezinim Tasarımında Lokal- Yerel Tasarımı • Ekran üzerindeki butonlarda tıklandığında sizi ulaştıracağı bir sonraki aşama ya da sayfa hakkında çağrışım yapan etiket ya da ifadeler bulunmalıdır. • Herkese aynı anlamı ifade edecek etiket (label) seçilmesi zordur. • Breadcrumbs (ekmek kırıntıları) kullanımı ile kullanıcıya nerede bulunduğu bilgisinin sunulması “Hacettepe Üniversitesi: Akademik Birimler: Eğitim Fakültesi” şeklinde kullanım tercih edilmesi gereken en uygun yöntemdir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 43

Seyir –Gezinim Tasarımında Global- Genel Tasarımı • Genel gezinim (navigasyon) tasarımı ekranlar, sayfalar veya cihaz durumları arasında geçişleri içerir. • Bir sistemi organize etmenin bir yolu hiyerarşi kullanmaktır. • Hiyerarşi ile bağlantılar, ekranlar, sayfalar ve durumlar arasında mantıksal bir gruplama yapılmasını içerir. • Hiyerarşi yapılırken genellikle işlev sınırlarına göre (functional boundaries) gruplandırma yapılır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 44

Seyir –Gezinim Tasarımında Global- Genel Tasarımı Sistem Bilgi ve Yardım Kullanıcı Ekleme 27. 2. 2021 Mesajlar Yönetim Kullanıcı Silme BTÖ 611 - İnsan Bilgisayar Etkileşimi 45

Seyir –Gezinim Tasarımında Global- Genel Tasarımı Ana Sayfa Personel Öğretim Programları Lisans Programı 27. 2. 2021 Ders Programları Duyurular Lisansüstü Programı BTÖ 611 - İnsan Bilgisayar Etkileşimi 46

Seyir –Gezinim Tasarımında Global- Genel Tasarımı Sistem Kullanıcı İşlemleri 27. 2. 2021 EFT İşlemleri BTÖ 611 - İnsan Bilgisayar Etkileşimi Fatura İşlemleri 47

Ekran Tasarımı ve Düzen (Layout) Sor - > Kullanıcı ne yapıyor? 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 48

Ekran Tasarımı ve Düzen (Layout) Düşün -> Hangi bilgiler gerekli? Kullanıcı hangi karşılaştırmaları yapma gereği duyuyor? Bileşenlere hangi sırada ihtiyaç duyuluyor? 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 49

Ekran Tasarımı ve Düzen (Layout) Tasarla - > Gerekli etkileşimlerin düzeni oluşturmasını sağla. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 50

Düzen (Layout) için Araçlar • Gruplama ve Yapı – Mantıksal olarak birbiriyle ilişkili olanlar genellikle fiziksel olarak ta bir arada gruplandırılarak tutulur. • Grupların ve maddelerin (item) sıralaması – Gruplama yapısına göre kullanıcıya öncelikli okuması gerekenler sunulur. Bu yüzden bu sıralama doğru mu sorusu önemlidir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 51

Düzen (Layout) için Araçlar – Tasarımcı kendine: • Kullanıcı için doğal sıralama nasıldır? sorusunu sormalıdır. • Formlarda da tab tuşunun hareket sırasının bu mantıksal sıralamaya uygun şekilde tasarlanması gereklidir. • Ayrıca bazı sıralamalarda zorlama da mevcut olabilir, kullanıcının bazı detayları atlamaması için. • Dekorasyon – Tasarımda gruplamayı belirgin hale getirmek için yazı tipi renkleri, büyüklükleri, arka plan renkleri gibi özelliklerin kullanılmasını içerir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 52

Düzen (Layout) için Araçlar • Dekorasyon – Tasarımda gruplamayı belirgin hale getirmek için yazı tipi renkleri, büyüklükleri, arka plan renkleri gibi özelliklerin kullanılmasını içerir. • Hizalama – Yazılar sola, rakamlar sağa yaslı olmalıdır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 53

27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 54

Düzen (Layout) için Araçlar • Hizalama – Okuma soldan sağa gerçekleştiği için yazılar (metinler) sola yaslı olmalıdır. Ali Yılmaz Ayşe Göktürk Özgür Koşar Buse Doğan 27. 2. 2021 Ali Yılmaz Ayşe Göktürk Özgür Koşar Buse Doğan Yılmaz, Ali Göktürk, Ayşe Koşar, Özgür Doğan, Buse BTÖ 611 - İnsan Bilgisayar Etkileşimi 55

Düzen (Layout) için Araçlar • Hizalama – Rakamlar ise sağa yaslı olmalıdır. – Ondalık sayılarda bu sağa yaslı olma durumu sayıların büyüklüğü konusunda göz yanılmasına sebep olabilir. Bunun için noktalara göre hizalama tercih edilmelidir. – Aşağıdaki tabloda soldaki sütunda ondalık sayıların büyüklüğü konusunda göz yanılması etkisi görülebilir. 532. 56 179. 3 256. 317 627. 865 1. 005763 382. 583 15 2502. 56 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 56

Düzen (Layout) için Araçlar • Birden fazla sütun içeren listeler daha fazla dikkat gerektirir: – Örneğin; metin sütunlarında sütun genişlikleri en uzun metnin sığabileceği büyüklükte olmalıdır. Böylece de sütunlar arasında büyük boşluklar oluşabilir. – Bunun üstesinden gelebilmek için bir çok görsel yol vardır: • Sütunları bağlayan noktalı çizgiler kullanılması • Farklı arka fon renklerinin kullanılması 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 57

Ali Yılmaz………………. . . 5 Ayşe Göktürkoğlu……. 6 Özgür Koşar……………. . 1 Buse Doğan……………… 8 27. 2. 2021 Ali Yılmaz 5 Ayşe Göktürkoğlu 6 Özgür Koşar 1 Buse Doğan 8 BTÖ 611 - İnsan Bilgisayar Etkileşimi 58

Düzen (Layout) için Araçlar • Beyaz Alan (White Space) Sanatta resimlerde “Counter” olarak da adlandırılır. Bir resim üzerindeki nesneler arasındaki boşluğun etkili kullanımını içerir. Ekran tasarımında da; Ekran elemanları arasındaki boşluğu ifade eder. – Ayırımı göstermek için, – Yapıları göstermek için, – Önemli bölümleri vurgulamak için kullanılır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 59

White Space Kullanımı Örnekleri 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 60

Kullanıcı Fiili ve Kontrolü • Bilgi Girişi Formları içerir. En zor ekran tasarımlarından biridir. Metin girişi yapılacak kutucuklarda hizalama önemlidir ama uzunluklar aynı olmadığından “jagged fashion” olarak adlandırılan düzensiz dizilimle karşıya kalınabilir. Kutucuk etiketleri genellikle kutucuğun solunda, hafif daha küçük yazı büyüklüğü kullanılır. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 61

Kullanıcı Fiili ve Kontrolü • Ne yapacağını bilmek Ekran üzerindeki bazı nesneler pasif bazı nesneler aktif özelliklere sahiptir. Burada önemli olan kullanıcıya hangi nesnenin aktif hangisinin pasif işlevlere yönelik olduğunu hissettirmektir. Bunun için -> Bazı standart butonların kullanımı -> Etiket ve menülerin anlaşılır olması -> Butonların ya da bağlantıların durumlarının belirgin olması, örneğin buton basılmışsa bunun renginin değişmiş olması gibi… 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 62

Kullanıcı Fiili ve Kontrolü • Affordance (Sağlayıcılık) Kullanıcıların hangi işlev için nereye basacaklarını bilmelerini nasıl sağlarız? sorusuna odaklanılır. Psikolojik olarak ekran üzerindeki nesnelerin şekillerinin ve özelliklerinin kullanıcıya onun hangi işlevi yerine getireceği konusunda çağrışım yapacağı ifade edilir. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 63

İterasyon ve Prototiplendirme Tasarım Prototip Değerlendirme (Evaluate) OK Tekrar Tasarım • Neyin yanlış olduğunu ve nasıl geliştirileceğini anlamak önemli noktadır. • İyi bir başlangıç noktası belirlemek. 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 64

Teşekkürler Hazırlayan: Hatice Gökçe BİLGİÇ Dersin Sorumlusu: Yrd. Doç. Dr. Hakan TÜZÜN 27. 2. 2021 BTÖ 611 - İnsan Bilgisayar Etkileşimi 65