etkileşimli tasarım temelleri

/ 74

Ecenaz ALEMDAĞETKİLEŞİMLİ TASARIM TEMELLERİ

BTÖ711: İnsan-Bilgisayar Etkileşimi

/ 7401.05.2023 BTÖ711: İnsan-Bilgisayar Etkileşimi 2


• Tasarım Nedir?• Tasarım Süreci • Kullanıcı Odağı• Senaryolar• Navigasyon Tasarımı• Ekran Tasarımı ve Yerleşim• Tekrarlama ve Prototipleme

Etkileşimli Tasarımın Temelleri


Tasarım Nedir?

Sınırlarla hedeflere ulaşmaktır.

Hedefler

Sınırlılıklar

Ödünler


Tasarımın Altın KuralıTasarım Nedir? >

Materyallerinizi anlayın.

İnsanlar(psikolojik, sosyal bakış açıları, hatalar)

Bilgisayarlar(kısıtlılıklar, kapasiteler, araçlar)


Hatasız Kul OlmazTasarım Nedir? >

Hata yapmak, insanın doğasında vardır. Ancak sistemler bu hataları ve hataların sonuçlarını azaltıcı yönde tasarlanmalılardır.


Ana Mesaj-KullanıcıTasarım Nedir? >

• Kullanıcıyı temel al• Kullanıcıyı merkezde tut• En sonda kullanıcıyı hatırla

/ 74

Tasarım Süreci

01.05.2023 BTÖ711: İnsan-Bilgisayar Etkileşimi 9

Ne isteniyor?

Analiz

Uygulama veharekete geçirme

Prototipleme

Görüşmeler

Ne var?Ne isteniyor?

Yönergeler,İlkeler

Diyaloggösterimleri

TamBelirleme

Dokümantasyon,Yardım

Bulgularındeğerlendirilmesi

Senaryolarİçerik analizleri

Tasarım

/ 74

Tasarım Süreci


Ne isteniyor?

Analiz

Uygulama veharekete geçirme

Prototipleme

Görüşmeler

Ne var?Ne isteniyor?

Yönergeler,İlkeler

Diyaloggösterimleri

Tam belirleme

Dokümantasyon,Yardım

Bulgularındeğerlendirilmesi

Senaryolar,İçerik analizleri

Tasarım

/ 74

Tasarım Süreci


Zaman

Kalite

Kullanılabilirlik Sorunları

/ 74

¡Hola!


Kullanıcı OdağıTüm etkileşim tasarımlarının başlangıcı, hedeflenen kullanıcı ya da kullanıcılardır.

Kullanıcılarınızı tanıyın.


Peki, kullanıcılarımızı nasıl tanıyabiliriz?

Kullanıcı Odağı

Onlar kim?

Kullanıcı senin gibi değil!

Onlarla konuş

Onları gözlemle

Hayal gücünü kullan

/ 74

¿Cómo estás?


Senaryolar• Etkileşimli tasarımlar için zengin hikayeler

• Tasarımlarımın hem en basit hem de en esnek ve en güçlü sunum hali

Brian would like to see the new film “Moments of Significance” and wants to invite Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to see if she would like it and so connects to one of the movie sharing networks. He uses his work machine as it has a higher bandwidth connection, but feels a bit guilty. He knows he will be getting an illegal copy of the film, but decides it is OK as he is intending to go to the cinema to watch it. After it downloads to his machine he takes out his new personal movie player. He presses the ‘menu’ button and on the small LCD screen he scrolls using the arrow keys to ‘bluetooth connect’ and presses the select button. On his computer the movie download program now has an icon showing that it has recognised a compatible device and he drags the icon of the film over the icon for the player. On the player the LCD screen says “downloading now”, a percent done indicator and small whirling icon.


Senaryoların resimlerle ve çizimlerle zenginleştirilmiş hali.

Ör. Film hikaye çizgisi

StoryboardSenaryo >


Mobil XSenaryo > Storyboard >

Ali, bir lise öğrencisidir. Sınıfa girerken Ali ve arkadaşları Mobil X cihazını sisteme okutur ve böylece sınıf yoklaması alınmış olur.

Tahtada yazılan her şey Ali’nin Mobil X cihazında da gözükür ve istediği alana yakınlaşarak rahatlıkla içeriği görebilir.


Ali’ye öğretmen ‘Cümledeki yanlış kelimeleri çiz.’ dediği zaman Mobil X cihazıyla o kelimeleri işaretler ve sınıf ekranında gözükür.




Öğleden sonraki ders ise öğretmenin öğrencilere çoktan seçmeli sorular sormasıyla başlar. Ali ve arkadaşları soruları görür ve cevaplarını Mobil X cihazıyla işaretler. Öğretmen her soru sonunda soruyu kaç kişinin doğru, kaç kişinin yanlış yaptığını bir grafikle görür.



Ders sonunda öğretmen pop-quiz yapar. Tüm öğrenciler Mobil X cihazlarıyla soruları cevaplarlar.

Ali, arkadaşından kopya çekerken öğretmenine yakalanır. Öğretmen, Ali’nin cihazını bloke eder ve Ali sınıftan çıkar.


SenaryolarGördüğümüz gibi senaryolar, tasarım hakkında detaylıca düşünmemizi sağlarlar. Bunun haricinde senaryolar,

• Diğerleriyle iletişim kurmak için,• Diğer modellerle uygunluğuna bakmak için ve• Dinamikleri açıklamak için kullanılır.


SenaryolarSenaryolar doğrusaldırlar. Bunun olumlu ve olumsuz yanları vardır:Zaman doğrusaldırHayat ve zaman doğrusaldır. Bu nedenle doğrusal senaryoları anlamak daha kolaydır.

Fakat alternatif yokturGerçek etkileşimlerde -insanla ya da sistemle- seçenekler vardır. Senaryolar bu alternatifleri gösteremez.

/ 74

Bien / Mal


Navigasyon TasarımıBilgisayar sitemini kullanırken çeşitli şekillerle onunla etkileşime gireriz.

Etkileşim Seviyeleri:• Widgetlar (butonlar, ikonlar, kaydırma çubuğu)• Ekran ya da pencereler• Uygulama içerisindeki navigasyon• Ortam (işletim sistemi)


Web Siteleri

Widgetlar Form elemanları, etiketler ve bağlantılar

Ekran tasarımı Sayfa TasarımıNavigasyon tasarımı Site yapısı

Ortam Browser, dış bağlantılar

Etkileşim SeviyeleriNavigasyon Tasarımı >


Fiziksel Cihazlar

Widgetlar Düğmeler, ışıklar, göstergeler

Ekran tasarımı Fiziksel DüzenNavigasyon tasarımı Aracın Temel modları

Ortam Gerçek Dünya

Etkileşim SeviyeleriNavigasyon Tasarımı >


Bir uygulamanın yapısı hakkında düşünelim.

Navigasyon Tasarımı

Aşama 1: Gerçek kullanımı hakkında düşünme• Bu uygulamayı kim kullanacak?• Bu uygulama hakkında nasıl düşünecekler?• Bu uygulamayı niçin kullanacaklar?

Aşama 2: Yapısı hakkında düşünme• Yerel yapı Bir ekranın ya da sayfanın dışarısından bakma• Global yapı Site yapısı, ekranlar arasındaki geçiş


Yerel YapıNavigasyon Tasarımı >

Hedefi Arama Davranışı

BaşlangıçHedef


Navigasyon Tasarımı >

BaşlangıçHedef

Yerel Yapı >

Hedefi Arama DavranışıBen

nerdeyim?


Navigasyon Tasarımı > Yerel Yapı >

4 Kural

Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi aramalıyız:

1. Nerde olduğunu bilme

2. Ne yapabileceğini bilme

İlk Sayfa

Bread crumbs


Navigasyon Tasarımı > Yerel Yapı >

4 Kural

Bir web sayfasına, ekrana ya da bir aracın durumuna bakarken 4 şeyi bilmeliyiz:

3. Ne olacağını bilme

Modlar: Komutların işlevselliğini değiştiren farklı ortamlara denir.

4. Ne yaptığını bilme


Global YapıNavigasyon Tasarımı >

• Bir uygulamanın genel yapısı

• Farklı ekranların, sayfaların ve araç durumların birbirleriyle bağlantı yolu

• Bir global yapıyı oluşturmak için 2 yol uygulayabiliriz:o Hiyerarşik organizasyono Diyalog (ağ diyagramı)


Hiyerarşik OrganizasyonNavigasyon Tasarımı >

• Hiyerarşik organizasyon; bağlantılar, ekranlar, sayfalar ve durumlar arasında mantıksal bir gruplama yapılmasını içerir.

• Mantıksal gruplama genellikle işlev sınırlarına göre yapılır.

• Ör. Bir uygulama yapısı veya bir web sitesinin yapısı

Global Yapı


Hiyerarşik OrganizasyonNavigasyon Tasarımı > Global Yapı

Powerpoint

Giriş

Pano

Slaytlar

Yazı Tipi

Paragraf

Çizim

Ekle

Tablo

Resimler

Çizimler

Bağlantılar

Metin

Tasarım

Sayfa Yapısı

Temalar

Arka Plan

Geçişler

Önizleme

Bu slayda Geçiş

Zamanlama

Animasyonlar

Önizleme

Animasyon

Gelişmiş animasyon

Zamanlama


Hiyerarşik OrganizasyonNavigasyon Tasarımı > Global Yapı

Hacettepe Üniversitesi

Hakkında

Tanıtım

Tarihçe

Logomuz ve Öyküsü

Misyon, Vizyon ve Değerler

Akademik

Fakülteler

Enstitüler

Yüksek okulları

Araştırma

Araştırma Merkezleri

Hacettepe Teknokent

Teknoloji Transfer Merkezi

Öğrenciler

Kanun ve Yönetmelikler

Öğrenci İşleri

Eğitim Komisyonu

Uluslararası Öğrenci Ofisi

İdari

Yönetim Birimleri

İç Denetim

Bilgi İşlem


Hiyerarşik OrganizasyonNavigasyon Tasarımı >

• Karışık hiyerarşiler yerine daha genel kategoriler kullanın.

• Sınıflama, kullanıcının amacına hizmet etmelidir.

Global Yapı

Miller’in 7+-2 sihirli sayısı sadece kısa süreli bellek içindir, görsel

arama için değil!


DiyalogNavigasyon Tasarımı >

• Hiyerarşinin olmadığı komut ve ekran akışları da vardır.• İnsan-bilgisayar etkileşiminde, kullanıcı ve sitem

arasındaki hiyerarşinin olmadığı etkileşime diyalog denir.

• Evlilik örneği

Global Yapı

…’la evlenmeyi

kabul ediyor

musun?

Evet…’la

evlenmeyi kabul ediyor

musun?

Evet


Navigasyon Tasarımı > Global Yapı

…’la evlenmeyi

kabul ediyor

musun?

Evet…’la

evlenmeyi kabul ediyor

musun?

Evet

İnsan-bilgisayar etkileşimindeki diyaloglar da aynıdır. Genel kalıplar vardır ama ayrıntılar her çalışmada farklılık gösterir.

Diyalog


DiyalogNavigasyon Tasarımı >

• Senaryolar, sistemdeki sadece bir yolu gösterir.

• Eğer tüm sistemi tanımlamak için, bir sistemdeki tüm yolları ve döngüleri göz önüne almalıyız.

• Bunu yapmanın en basit yolu ise ağ diyagramları kullanmaktır. Böylece;o Neyin neye sebep olacağını,o Neyin ne zaman olacağını veo Dalları ve döngüleri gösterebiliriz.

Global Yapı


Ağ diyagramlarıNavigasyon Tasarımı > Global Yapı

Ana ekran Kullanıcı sil Onayla

Kullanıcı ekle

> Diyalog >

Sistemdeki tüm yolları gösterir.


Wider StillNavigasyon Tasarımı >

• ‘Hiç kimse bir ada değildir. Bütünün bir parçasıdır.’ (Donne, 1624)

• Tasarımlarımız diğer araçlarla ve uygulamalarla uyumlu olmalıdır. Bunun farklı çıkarımları vardır:o Stil konularıo Fonksiyonel konularo Navigasyon konuları

/ 74

Mucho/a

/ 74





SorKullanıcı ne yapıyor?

Ekran Tasarımı ve Yerleşim

DüşünHangi bilgi gerekli? Kullanıcının ne gibi karşılaştırmalar yapması gerekebilir? Bileşenlere hangi sırada ihtiyaç duyuluyor?

TasarlaGerekli etkileşimlerin düzeni oluşturmasını sağla

Ekran tasarımındaki ilkeler:


Yerleşim için AraçlarEkran Tasarımı ve Yerleşim >

1. Gruplama ve Yapılanma

2. Grupların ve ögelerin sıralanması

3. Dekorasyon

4. Hizalama

5. Boş alan


Çevrimiçi Kitap Satın Alma FormuEkran Tasarımı ve Yerleşim >

Adres

Posta Kodu

Ülke

Ad

Soyad

E-posta adresi

Telefon

Kart Tipi Visa Mastercard

Kart Numarası

Güvenlik Kodu

Satın al

Yerleşim için Araçlar >


Gruplanma ve YapılanmaEkran Tasarımı ve Yerleşim >

Adres

Posta Kodu

Ülke

Ad

Soyad

E-posta adresi

Telefon


Kart Numarası

Güvenlik Kodu



Grupların ve Ögelerin SıralanmasıEkran Tasarımı ve Yerleşim >

Ad

Soyad

E-posta adresi

Telefon

Adres

Posta Kodu

ÜlkeKart Tipi Visa Mastercard

Kart Numarası

Güvenlik Kodu



DekorasyonEkran Tasarımı ve Yerleşim >

Ad

Soyad

E-posta adresi

Telefon

Kişisel Bilgiler

Ulaşım Bilgileri

Adres

Posta Kodu

Ülke

Ödeme Bilgileri


Kart Numarası

Güvenlik Kodu



HizalamaEkran Tasarımı ve Yerleşim > Yerleşim için Araçlar >

Ad

Soyad

E-posta adresi

Telefon

Kişisel Bilgiler

Adres

Posta Kodu

Ülke

Adres Bilgileri


Kart Numarası

Güvenlik Kodu

Kart Bilgileri


Boş AlanEkran Tasarımı ve Yerleşim > Yerleşim için Araçlar >

Ad

Soyad

E-posta adresi

Telefon

Kişisel Bilgiler

Adres

Posta Kodu

Ülke

Adres Bilgileri


Kart Numarası

Güvenlik Kodu

Kart Bilgileri

/ 74

Ad

Soyad

E-posta adresi

Telefon

Kişisel Bilgiler

Adres

Posta Kodu

Ülke

Adres Bilgileri


Kart Numarası

Güvenlik Kodu

Kart Bilgileri

Satın al

Adres

Posta Kodu

Ülke

Ad

Soyad

E-posta adresi

Telefon


Kart Numarası

Güvenlik Kodu

Satın al


Kullanıcı Hareketi ve KontrolEkran Tasarımı ve Yerleşim >

1. Bilgi Girişi

2. Ne yapacağını bilme

3. Sağlarlık


Bilgi GirişiEkran Tasarımı ve Yerleşim >

Form tabanlı ara yüzler ve diyalog kutuları, hem kullanıcıya bilgi sunulan hem de kullanıcının bilgi girdiği yerlerdir.

Yerleşim araçları (hizalama, boş alan vb.) bilgi girişi alanlarında da uygulanır.

Kullanıcı Hareketi ve Kontrol >

Ad

Soyad

E-posta adresi

Telefon

Kişisel Bilgiler


Ne Yapacağını Bilme Ekran Tasarımı ve Yerleşim >

• Hangi ögelerin aktif olduğunu bilmemek ne olacağı konusunda belirsizlik yaratır.

• Herkes aynı işlevler için benzer butonlar ve menüler tasarlayabilir. Fakat, bu yeterli değildir.

• Menülerdeki ikonlar ve etiketler açık olmalıdır.

o Kaydet, sil, yazdır gibi komutlar için standartlardan faydalanabiliriz.

o Sisteme özel hareketler için, daha genel ilkelere ihtiyacımız vardır. Ör. Kalın yazma



Sağlarlık (Affordance) Ekran Tasarımı ve Yerleşim >

• Bir nesnenin şekli ve özellikleri onunla ne yapabileceğimizi önerir.

• Sağlarlıklar içsel değildir, tecrübeye ve kültüre bağlıdır.



Uygun GörünümEkran Tasarımı ve Yerleşim >

1. Bilgiyi sunma

2. Estetik ve fayda

3. Karışım oluşturma: Renk ve 3B

4. Yerellik ve Evrensellik


Bilgiyi Sunma Ekran Tasarımı ve Yerleşim >

• Sayılar, yazılar, haritalar, tablolar, grafikler, sanal gerçeklikler

• Bilgiyi sunuşumuzun amacımızla örtüşmesi gerekir.• Etkileşimli sistemlerde bilgiyi sunmak kolaydır.

Uygun Görünüm >


Estetik ve Fayda Ekran Tasarımı ve Yerleşim >

• Güzel gözüken bir arayüz, iyi bir arayüz olduğu

anlamına gelmez.

• Estetik ve fayda bazen birbirine karşıt olabilirler.

• Okunurluğu artırmak için arkaplan düşük zıtlıkta

olmalıdır.

• Estetik kavramların dikkatli uygulanışı anlaşırlılığı da

artırır.

Uygun Görünüm >


Karışım Oluşturma: Renk ve 3B Ekran Tasarımı ve Yerleşim >

• Birçok arayüzün en kötü özelliklerinden biri aşırı renk kullanımıdır.

• Aşırı renk kullanımı dikkat dağıtıcı olabilir.• Renk körü bireyler unutulmamalıdır.• Renkler tutumlu kullanılmalıdır.• 3 boyutlu yazılar ve pasta grafikleri okumayı zorlaştırır.

Uygun Görünüm >


Yerellik ve Evrensellik Ekran Tasarımı ve Yerleşim >

• Bir yazılımı farklı diller ve kültürler için uygun yapma aşamasına denir.

• Dili değiştirme evrenselliğin sadece en basit bölümüdür.

• Hizalama ve yerleşim konusunda da tekrar düzenleme yapmak gerekir.

• Birçok ikon ve resme yüklenen anlam kültürler arasında farklılık gösterir.

Uygun Görünüm >


Türkçe VikipediEkran Tasarımı ve Yerleşim > Uygun Görünüm > Yerellik ve Evrensellik >


Arapça VikipediEkran Tasarımı ve Yerleşim > Uygun Görünüm > Yerellik ve Evrensellik >

/ 74

Terminar

/ 74





Tekrarlama ve Prototipleme

prototip değerlendirmetasarım

Yeniden tasarım

Bitti!Tamam?


Tekrarlama ve Prototipleme

A B

1. Neyin yanlış olduğunu ve onu nasıl iyileştireceğimizi anlamak2. İyi bir başlangıç noktası

/ 74

Gracias


Dix, A., Finlay, J., Abowd, G., & Beale, R. (2004). Human-computer interaction. England: Prentice Hall.

Haeffele, D. (2010). Hci work storyboard. Retrieved from http://www.drewhaeffele.com/kilin-time/single-gallery/7011802

Norman, D.A. (1990). The design of everyday things. New York: Doubleday.

Kaynaklar

etkileşimli tasarım temelleri

Education