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

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.

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.

Ödün Verme (Trade-off) 1. TASARIM NEDİR? «Sınırlılıklar içinde hedeflere ulaşmak» Hedefler Kısıtlamalar Ödün Verme (Trade-off) Üretmeyi planladığımız tasarımın amacı nedir? Kimin için üretiyoruz? Kullanıcılar neden bu tasarımı istiyorlar? Hangi materyalleri 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ı? Bir amaca ulaşabilmek için diğer hangi amaçlardan ödün verilebilir?

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ı.

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.

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.

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

2. ETKİLEŞİM TASARIMI SÜRECİ Gereksinimler - ne isteniyor Analizler Ödün Verme (Trade-off) Tasarım Yineleme ve prototipleme Uygulama ve dağıtım İ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? 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? Çok sayıda kural, kural ve tasarım prensibi Ne kadar iyi çalıştığını ve ne gibi iyileştirmelerin yapılabileceğini görmek için bir tasarımı değerlendirmemiz gerekir. Tasarımımızdan memnun olduğumuzda, oluşturma ve çoğaltma.

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

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.

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.

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....

4. SENARYOLAR Örnek Senaryo:

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

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?

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

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

5.2. YEREL YAPI Hedefe ulaşma

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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

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 . . .

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.

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. Bir önceki figürde gruplama önemi

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.

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.

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.

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. .

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.

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

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.

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.

6.2. KULLANICI EYLEMİ VE KONTROL UYGUN GÖRÜNÜM Bir Karışıklık Yapmak: Renk ve 3d 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 3D pasta grafikleri işe yaramayabilir.

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.

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.

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

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ı.

Ö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.

Teşekkürler…