ETKLEM TASARIMININ TEMELLER DERS Ders retim yesi Hazrlayan

ETKİLEŞİM TASARIMININ TEMELLERİ DERS Ders Öğretim Üyesi Hazırlayan : BTÖ 711 – İNSAN-BİLGİSAYAR ETKİLEŞİMİ : Prof. Dr. Hakan TÜZÜN : Fatma GÖLPEK SARI Dönem : 2017 -2018 Bahar, 2018

Sunu Planı • Tasarım Nedir? – Tasarımın Altın Kuralı – İnsan Hata Yapabilir – Merkezi mesaj - kullanıcı • Etkileşim Tasarım Süreci • Kullanıcı Odağı • Senaryolar • Navigasyon Tasarımı – Yerel Yapı – Global Yapı-Hiyerarşik Organizasyon – Global Yapı-Diyalog • Ekran Tasarımı ve Yerleşimi • İzleme ve Prototipleme 2

GENEL BAKIŞ • Etkileşim tasarımı, bilgisayar yazılımı, web ve fiziksel aygıtlar da dahil olmak üzere birçok türde teknolojiyi kullanarak müdahaleler yapmakla ilgilidir. • Tasarımın kapsamı: – Sınırlılıklar içinde hedeflere ulaşmak, – Bilgisayar ve insan faktörlerinin anlaşılması, – İnsanların ve tasarımın sınırlarını kabul etmek. 3

GENEL BAKIŞ • Etkileşim, kullanıcıları ve içeriklerini tanımakla başlar. • Senaryolar tasarım boyunca kullanılabilecek ve tekrar kullanılabilen zengin tasarım öyküleridir. • Kullanıcıların bir sistem etrafında yollarını bulması gerekir. – Kullanıcılara nerede olduklarını, nerede bulunduklarını ve ne yapabileceklerini bildirme • Tasarımın karmaşıklığı, ilk defada doğru yapmadığımız anlamına gelir. – Bu yüzden denemek ve değerlendirmek için yineleme ve prototiplere ihtiyacımız var. 4

1. TASARIM NEDİR? • «Sınırlılıklar içinde hedeflere ulaşmak» Hedefler • Üretmeyi • • planladığımız tasarımın amacı nedir? Kimin için üretiyoruz? Kullanıcılar neden bu tasarımı istiyorlar? Kısıtlamalar Ödün Verme (Trade-off) • Hangi materyalleri • Bir amaca kullanmalıyız? • Hangi standartları benimsemeliyiz? • Ne kadar maliyeti olabilir? • Ne kadar zamanımız var? • Sağlık ve güvenlik sorunları var mı? ulaşabilmek için diğer hangi amaçlardan ödün verilebilir? 5

1. 1. TASARIMIN ALTIN KURALI • İnsan-Bilgisayar Etkileşimi için bariz materyaller insan ve bilgisayardır. • Bilgisayarları anlamak: – Sınırlılıklar, kapasiteler, araçlar, platformlar • İnsanları anlamak: – Psikolojik, sosyal yönler, insan hatası. 6

1. 3. MERKEZİ MESAJ: KULLANICI • Kullanıcıyı merkezde tutun ve sonunda kullanıcıyı hatırlayın. • Çoğu zaman, insan bilgisayar etkileşiminde kullanılan çeşitli yöntemlerin başarısının sırırının, aynı zamanda tasarımcının zihnini sadece kullanıcıya odaklaması olduğu söylenir. 7

1. 2. İNSAN HATA YAPABİLİR • Fiziksel materyaller çoğu tasarımda insanlardan daha iyi işler. • Kaza raporlarında arkasına saklanacak bir bahane, insan doğası. • Sistemler hataların olasılığını azaltmak ve hatalar meydana geldiğinde sonuçları en aza indirmek için tasarlanmalıdır. 8

2. ETKİLEŞİM TASARIMI SÜRECİ Ne İsteniyor? Görüşmeler Ne var? Ne isteniyor? Senaryolar, Görev analizleri Analizler Yönergeler, Tasarım ilkeleri Tasarım Bulguların değerlendirilmesi Prototip Diyalog gösterimleri Şekil 1. Etkileşim Tasarım Süreci Kesin Şartname Dokümantasyon, Yardım Geliştirme 9

2. ETKİLEŞİM TASARIMI SÜRECİ Gereksinimler - ne isteniyor • İlk aşama tam olarak neye ihtiyaç duyulduğunu tespit eder. • Örneğin, şu anda insanlar film izliyor mu? Şu anda ne tür kişisel cihazlar kullanıyorlar? Analizler Ödün Verme (Trade-off) • Gözlem ve mülakat sonuçlarının bir şekilde anahtar konuların ortaya çıkarılması ve tasarımın sonraki aşamalarında iletişim kurması için sıralanması gerekmektedir • Bir amaca ulaşabilmek için diğer hangi amaçlardan ödün verilebilir? Tasarım • Çok sayıda kural, kural ve tasarım prensibi Yineleme ve prototipleme Uygulama ve dağıtım • Ne kadar iyi çalıştığını ve ne gibi iyileştirmelerin yapılabileceğin i görmek için bir tasarımı değerlendirme miz gerekir. • Tasarımımızd an memnun olduğumuzda, oluşturma ve çoğaltma. 10

3. KULLANICI ODAĞI • «Kullanıcılarınızı tanıyın» • Kullanıcılarınızı nasıl tanıyacaksınız? – – – Onlar kimdir? Muhtemelen senin gibi değil! Onlarla konuş Onları izle Hayal gücünü kullan 11

4. SENARYOLAR • Senaryolar => tasarım hikayeleri => zengin etkileşim hikayeleri. • En basit tasarım temsili. • Kısa Senaryolar: – Kullanıcı “kaydet” düğmesine basmayı amaçlıyor, ancak yanlışlıkla “çık” düğmesine basarak çalışmasını kaybediyor. 12

4. SENARYOLAR • Senaryolar, tasarım süreci boyunca kullanılabilecek ve yeniden kullanılabilen bir kaynaktır. – Neyin istenildiğini görmemize yardımcı olmak, – Kullanıcıların olası tasarımla nasıl başa çıkacaklarını önermek, – Önerilen uygulamaların çalışıp çalışmadığını kontrol etmek, – Nihai değerlendirme için test senaryoları üretmek. 13

4. SENARYOLAR • Uzun Senaryolar: • Filmi indirdikten sonra yeni film oynatıcısını çıkarır. "Menü" düğmesine basar ve küçük LCD ekranda o ‘bluetooth bağlantısı’ için ok tuşlarını kullanarak kaydırır ve ‘select’ düğmesine basar. Bilgisayarında, film indirme programının artık uyumlu bir aygıtı tanıdığını gösteren bir simge vardır ve filmin simgesini oynatıcı için simgenin üzerine sürükler. Müzikçalarda LCD ekranda yüzde indirme göstergesi ve küçük dönen simge ile "şimdi indiriliyor" yazar. . 14

4. SENARYOLAR • Örnek Senaryo: 15

5. NAVİGASYON (GEZİNİM) TASARIMI • Çeşitli seviyelerde etkileşim: – – Widgetlar (Grafik bileşenleri) Ekran ya da Pencereler Uygulama içi gezinim Çevre 16

5. NAVİGASYON (GEZİNİM) TASARIMI • Henüz bir fikrimizin olmadığı bir durumda, bir uygulamanın yapısını düşünürken başlanacak nokta, gerçek kullanım hakkında düşünmektir: • Uygulamayı kim kullanacak? • Uygulama hakkında nasıl düşünüyorlar? • Uygulamayla ne yapacaklar? 17

5. NAVİGASYON (GEZİNİM) TASARIMI • Yerel yapı - bir ekran veya sayfa • Küresel yapı - Sitenin yapısı, ekranlar arasındaki hareket. 18

5. 1. YEREL YAPI • Başlamak için, tek bir web sayfasına, ekrana veya bir cihazın durumuna bakarken aramanız gereken dört şey: • Nerede olduğunuzu bilmek • Neler yapabileceğinizi bilmek • Nereye gittiğinizi bilmek • Neyi yaptığınızı bilmek 19

5. 2. YEREL YAPI • Hedefe ulaşma 20

5. 2. YEREL YAPI • Simgelerin tipik olarak kendiliğinden açıklayıcı değillerdir. • Simgelerin, her zaman etiketlerle, en az araç ipuçlarıyla veya benzer tekniklerle birlikte sunulması gerekir. 21

5. 3. GLOBAL YAPI-HİYEYARŞİK ORGANİZASYON • Bir sistemi organize etmenin bir yolu, bir çeşit hiyerarşidir. • Hiyerarşi, mantıksal gruplamalarda ekranları, sayfaları veya durumları bağlar. 22

5. 3. GLOBAL YAPI-HİYEYARŞİK ORGANİZASYON Sistem Bilgi ve Yardım Yönetim Kullanıcı Ekleme Mesajlar Kullanıcı Silme Şekil 2. Uygulama işlevsel hiyerarşisi 23

5. 4. GLOBAL YAPI-DİYALOG • Statik web sitesinde, tamamen aynı hiyerarşik bir yapıya sahip olmak, aynı gruptaki öğeler arasındaki sonraki / önceki bağlantılarla yeterli olabilir. • Hiyerarşilerdeki çapraz bağların yanı sıra, bir kaydı düzenleme veya silme gibi ayrıntılı etkileşimlere indiğinizde, hiyerarşi ile ilgili olmayan bir perde ve komut akışı vardır. • İnsan-bilgisayar etkileşiminde, kullanıcı ve sistem arasındaki bu etkileşim modeline atıfta bulunmak için “diyalog” kelimesi kullanılır. 24

5. 4. GLOBAL YAPI-DİYALOG • • • Nikah Örneği: Görevli: …. . ’yı karın olarak kabul ediyor musun? Erkek: Evet. Görevli: …. . ’yı kocan olarak kabul ediyor musun? Kadın: Evet. Görevli: Belediye Başkanı’nın bana verdiği yetkiye dayanarak sizleri karı koca ilan ediyorum. 25

5. 4. GLOBAL YAPI-DİYALOG • Basit bir yol, oklarla birlikte bağlantılı ana durumları veya ekranları gösteren bir ağ diyagramı kullanmaktır. Ağ diyagramı ile şunlar yapılabilir: • Neyin neye yol açtığı gösterilebilir. • Ne zaman ne olacağı gösterilebilir. • Bağlantılar ve döngüler dahil edilebilir. 26

5. 4. GLOBAL YAPI-DİYALOG Ana ekran Kullanıcı sil Onayla Kullanıcı ekle Ekranlar / durumlar ağı 27

5. 5. STİLLER Stil Sorunları • Uygulamalar arasında tutarlılığı sağlamak için normal olarak, bir PC uygulamasındaki menüler için standartlara uymalıyız. • Örneğin, önerilen kişisel film oynatıcımızda standart ileri sarma, oynatma ve duraklatma ikonlarından faydalanmalıyız. 28

5. 5. STİLLER Fonksiyonel Konular : • Bir PC uygulamasında, dosyalarla etkileşimde bulunabilmemiz, standart formatları okuyabilmemiz ve kesme ve yapıştırma işlemlerini yapabilmemiz gerekir. 29

5. 5. STİLLER Gezinme Sorunları • Uygulamalar arasındaki bağlantıları desteklememiz gerekebilir. • Örneğin verilerin bir uygulamadan diğerine yerleştirilmesine izin vermek veya bir e-posta sisteminde, bir ek simgesine çift tıklamak ve ek için doğru uygulamayı başlatmak. 30

6. EKRAN TASARIMI VE YERLEŞİMİ • Etkileşim tasarımı temel ilkeleri: • Sor: – Kullanıcı ne yapıyor? • Düşün – Hangi bilgiler gereklidir? – Kullanıcının ne gibi karşılaştırmaları yapmaya ihtiyacı olabilir ? – Hangi sırada ihtiyaç duyulması muhtemeldir? • Tasarım – Form işlevi şu şekildedir: gerekli etkileşimlerin düzeni kullanmasına izin verilmelidir. 31

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR • Gruplama ve yapı • Grup ve öğelerin sıralanması • Dekorasyon • Hizalama • Boş alan 32

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR Gruplama ve Yapı • Eğer nesneler mantıksal olarak birbirine aitse, normalde onları fiziksel olarak gruplandırmalıyız. Sipariş: İdari bilgiler Fatura Detayları Teslimat Detayları Sipariş Bilgisi Sipariş satırı 1 Sipariş satırı 2. . . 33

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR Grupların ve Öğelerin Sırası • Genel olarak düşünmemiz gereken, kullanıcı için doğal sıranın nasıl olduğudur. • Veri giriş formları veya iletişim kutuları için sekme tuşunun alanlar arasında hareket ettiği sırayı ayarlamalıyız. 34

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR Dekorasyon • Grup stillerini vurgulamak için yazı tipi stili ve metin veya arka plan renkleri gibi diğer dekoratif özellikler kullanılabilir. 35

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR Hizalama • Metinleri soldan sağa okuyan kullanıcılar için, metin öğelerinin listeleri normal olarak sola hizalanmalıdır. • Rakamlar normal olarak sağa (tamsayılar için) veya ondalık noktaya hizalanmalıdır. 36

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR Hizalama • İsim gibi öğeler, • (ii) 'de olduğu gibi sütunlar halinde düzenlenmeli veya • (iii)' de olduğu gibi soyad ve ad ters çevrilmelidir. 37

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR Boşluklar • Renkli alanlar sürekli metin veya grafik alanlarını temsil eder. • (i) Bölümler arasındaki paragraflar veya boşluk arasındaki boşluklarda, blokları ayırmak için kullanılan alanı görebiliriz. 38

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR Boşluklar • (ii) 'de açıkça dört ana alan vardır: ABC, D, E ve F. Bunlardan biri, A, B ve C olmak üzere üç ayrı alandan oluşur. . 39

6. 1. EKRAN YERLEŞİMİ İÇİN ARAÇLAR Boşluklar • (iii)’de, vurgulamak için kullanılan alanı görebiliriz. • Bir alıntı veya notu vurgulamak için dergilerde sık kullanılan bir teknik. 40

6. 2. KULLANICI EYLEMİ VE KONTROL • Bilgi girişi • Ne yapılması gerektiğini bilme • Sağlarlık (Affordance) 41

6. 2. KULLANICI EYLEMİ VE KONTROL UYGUN GÖRÜNÜM Bilginin Sunumu ØEkranda bilgi sunmanın yolu, bilgi türüne bağlıdır: metin, sayılar, haritalar, tablolar; çizgi çizme, grafik, sanal gerçeklik. ØEn önemlisi, bilginin hangi amaç için kullanıldığıdır. 42

6. 2. KULLANICI EYLEMİ VE KONTROL UYGUN GÖRÜNÜM Estetik ve fayda • Bir arayüz estetik olarak hoş olmalıdır. • İyi grafik tasarım ve ilgi çekici görüntüler, kullanıcıların memnuniyetini artırabilir ve böylece verimliliği artırabilir. 43

6. 2. KULLANICI EYLEMİ VE KONTROL UYGUN GÖRÜNÜM Bir Karışıklık Yapmak: Renk ve 3 d • Birçok arabirimdeki en kötü özelliklerden biri, renklerin kötü kullanımıdır. • Arayüzlerdeki 3 boyutlu efektlerin artan kullanımı, metin ve sayısal bilgi için yeni bir dizi problem oluşturmuştur. • Fiziksel bilgi ve belirli türden grafikler sunmak için mükemmel olmakla birlikte, perspektif içinde sunulan metinlerin okunması çok zor olabilir ve tüm yaygın 3 D pasta grafikleri işe yaramayabilir. 44

6. 2. KULLANICI EYLEMİ VE KONTROL UYGUN GÖRÜNÜM Yerelleştirme / uluslararasılaşma • Farklı bir ülkede çalışıyorsanız, belgenin metninin ve dosya adlarının yerel dilde bulunduğu bir sözcüğün işlendiği bir belgeyi görebilirsiniz, ancak tüm menüler ve talimatlar hala İngilizce'dir. • Farklı diller ve kültürlere uygun yazılım yapma süreci yerelleştirme veya uluslararasılaşma olarak adlandırılır. 45

7. İZLEME VE PROTOTİPLEME • Hemen hemen tüm etkileşim tasarımı fikirlerin yinelenmesi şeklini içerir. • Genellikle iş arkadaşlarına ve potansiyel kullanıcılara gösterilen kağıt tasarımları ve hikaye tahtalarıyla başlar. • Tasarım sürecinin ilerleyen bölümlerinde, yazılımın prototip sürümlerini oluşturmak çeşitli araçlar kullanılabilir. 46

7. İZLEME VE PROTOTİPLEME Tamam? Tasarım Prototip Değerlendirme Bitti! Yeniden tasarım 47

7. İZLEME VE PROTOTİPLEME • Prototipleme yöntemlerinin çalışması için ihtiyaç duyduğunuz iki şey: • Neyin yanlış olduğunu ve nasıl geliştirileceğini anlamak. • İyi bir başlangıç noktası. 48

ÖZET • Tasarım: Sınırlılıklar içinde hedeflere ulaşmak • Etkileşim, kullanıcıları ve içeriklerini tanımakla başlar. • Senaryolar tasarım boyunca kullanılabilecek ve tekrar kullanılabilen zengin tasarım öyküleridir. • Kullanıcıların bir sistem etrafında yollarını bulması gerekir. – Kullanıcılara nerede olduklarını, nerede bulunduklarını ve ne yapabileceklerini bildirme • Kullanıcı etkileşiminin için çeşitli görsel araçlar: fiziksel gruplama, öğelerin sıralanması, yazı, çizgi, renk, hizalama ve boş alan kullanımı gibi. • Tasarımın karmaşıklığı, ilk defada doğru yapmadığımız anlamına gelir. – Denemek ve değerlendirmek için yineleme ve prototiplere ihtiyacımız var. 49

Teşekkürler… 50