Kuveyt Türk Özel Eğitim Programı Bölüm 2. Sami Güzel 2013

Transkript

1 Kuveyt Türk Özel Eğitim Programı Bölüm 2 Sami Güzel 2013

2 Eğitim İçeriği Teorik Bilgiler ( Terimler, Deneyimler, Prototipler ) İnteraktif Tasarım Bölümü ( Anasayfa, Kategori, Ürün, Satın Alma ) Analiz Yöntemleri ve Araçları ( A/B Testleri ve analiz araçları, şirketleri ) Soru / Cevap

3 Kullanılabilirlik Nedir? Kullanılabilirlik, insanlar tarafından tasarlanmış ve üretilmiş bir nesnenin, öğrenim ve kullanım kolaylığıdır. Kullanılan nesne, bir araç, makine, süreç ya da konumuz olduğu üzere bir internet sitesi olabilir. Kullanılabilirlik çalışmaları, kullanılabilirlik analistleri tarafından ya da bu eğitimi almış tasarımcılar tarafından uygulanabilir.

4 E-ticaret Kullanılabilirlik İmgeleri Kullanılabilirlik Öğrenilebilirlik Hatırlanabilirlik Etkin Kullanım Güvenli Kullanım Kullanıcı Memnuniyeti Kullanım Kolaylığı

5 Kullanıcı Beklentisi Özellikleri Kullanıcı her zaman haklıdır. Sistemin kullanımında bir sorun varsa, problem kullanıcıda değil sistemdedir. Kullanıcı tüm öngörülerine yanıt vermeye elverişli olmasını bekler IBM Thomas J. Watson Research Center / Dr. Clare-Marie Karat

6 Google Kullanıcı Deneyimi Sırrı Her milisaniye sayılır. Acemileri çekin, uzmanları cezbedin. Tüm dünya için tasarlayın. Bugünü ve yarını düşünün. Ürününüz kafa karıştırmadan güzel görünsün. İnsanların güvenini hak edin. İnsancıl bir dokunuş ekleyin.

7 Kullanıcı Odaklı Tasarım Nedir? Geliştirilen ürünün, hitap ettiği kitlenin ihtiyaçları doğrultusunda biçimlendirildiği; kullanıcının, tasarımın her alanına dahil olduğu ve etkin kullandığı tasarım yöntemine Kullanıcı Odaklı Tasarım denir K.D.Easton

8 Dönüşüm Oranı Nedir? Dönüşüm oranı ( conversion rate ), yaptığınız dönüşüm ( satış, üyelik, form doldurma ) sayısının siteye gelen toplam ziyaretçilerin sayısına olan oranıdır.

9 Örnek : Staples Günlük Ziyaret : 670 Bin Aylık Ziyaret : 20 Milyon Yıllık Ziyaret : 240 Milyon 2010 Ciro : 10.6 Milyar Dolar Dönüşüm Oranı Etkisi Örnek : Vente Privee Günlük Ziyaret : 500 Bin Aylık Ziyaret : 15 Milyon Yıllık Ziyaret : 180 Milyon 2011 Ciro : 1.2 Milyar Dolar

10 Tasarımcı Körlüğü Tasarımcı körlüğü, tasarımı yapan kişinin tasarladığı nesnenin mükemmel ve hatasız olduğunu düşünmesidir. Çoğu kullanıcı nesneyi onların kullandığı şekilde kullanmayacaktır. Bu yüzden bir tasarımcı kendi tasarladığı nesnenin, kendisi rahat kullandığı için kullanılabilir olduğunu düşünmektedir.

11 Prototipler Arayüz yerleşimleri, grafikerlere bırakılmamalıdır. Belli bir plan dahilinde, yerleştirilmelidir. Uygulanabilir hale getirilmelidir. Test edilmelidir.

12 Prototipleme Yöntemleri Kağıt Prototipleme

13 Prototipleme Yöntemleri HTML Prototipleme Örnekler ; - Axure - Omnigraffle - Justinmind

14 Prototipleme Yöntemleri Online Prototipleme Örnekler ; - Pidoco - Moqups - HotGloo - irise - Mockingbird - Mybalsamiq

15 Prototipleme Avantajları Hataları önceden görmemizi sağlar ve böylelikle hem zaman hem para kaybını azaltır. Tasarım süreçlerinde hangi noktada olduğumuzu göstererek zaman skalasını ve bir sonraki adımı düzenlememizi sağlar. Kullanılabilirlik testlerinde kullanılır, yenilenir, tekrar geliştirilir ve böylelikle sürekli iyileştirme sağlanır. Parçaları birleştirerek sistemi bütün halinde görmemizi sağlar. Belirsizliği ortadan kaldırarak sistem gereksinimlerini önceden belirlememizi sağlar. Yapılan farklı prototiplerle bir çok seçenek görülmüş olur ve yaratıcılık artar. Sistem geliştirme hızımızı artırır.

16 Renkler ve Önemi

17 Renkler ve Önemi Ambulans / İtfaiye Güvenlik / Polis Taksi

18 Renkler ve Önemi

19 Gri Tevazuyu, saygıyı ve güveni simgeler ancak kullanımında dikkatli olunmalıdır. Zira birincil renk olarak kullanımı, ölümü, depresyonu ve yaşlılığı da çağrıştırabilir.

20 Beyaz Batı kültürlerinin çoğunda saflık, temizlik ve güvenilirlik hissi uyandırır. Bazı doğu kültürlerinde ise derin bir yas anlamına gelmektedir. Örneğin Japon kültüründe beyaz karanfiller ölümü sembolize eder.

21 Siyah Siyah en güçlü renklerden biridir. Şıklık ve gücü simgeler ancak aynı anda ölümü ve yası da temsil eder. Arkaplan rengi olarak kullanılması görsellerin öne çıkmasında faydalı olur. Aşırı kullanımından kaçınılmalıdır.

22 Mavi Web tasarımı için oldukça kararlı ve güvenilir bir renktir. Uyumu ve huzuru çağrıştırır. Batı kültürlerinden farklı olarak Iran da ölümü ve yası Çin de ölümsüzlüğü sembolize eder.

23 Kırmızı Bazı araştırmalara göre kırmızı renk insanın soluk alışveriş hızını ve kan basıncını arttırmaktadır. Aşk, tutku, hırs ve öfke gibi duygularla ilişkilendirilir. Doğru şekilde kullanımı etkiyi arttırabilir. Çin de şansı, Hindistan da saflığı, doğu kültürlerinde beyaz ile birlikte kullanıldığında genel olarak sevinç duygusunu sembolize eder.

24 Pembe Sakinlik, aşk ve feminenliği sembolize eder.

25 Yeşil Doğayı, canlıları ve parayı çağrıştırır. Bir çok e-ticaret sitesinde satış için kullanılan butonlarda yeşil renk tercih edilir. Bazı tropik ülkelerde tehlikeyi simgeler. Endonezya da bulunan Parangtritis Plajı nda yeşil renkte giyinenlerin deniz tarafından yutulup kaybolduğuna inanılır.

26 Mor Yaratıcılık, duygusallık, gizem, zenginlik ve refah gibi anlamlar taşır. Tasarımda renk şemasında küçük bir alan işgal etmesi tercih edilmelidir. Tonları koyulaştıkça duygusal etkileri azalır.

27 Sarı Sevinç, mutluluk, hayal gücü, umut yaz mevsimi gibi anlamlar taşır. Web tasarımında yazı rengi olarak kullanımı erişilebilirlik sorunları yaratabilir. İnsan gözünün en zor odaklandığı renklerden biridir. Bazı araştırmalar bebeklerin sarı renkli odalarda daha çok ağladığını ortaya çıkarmıştır.

28 Kahverengi Kararlı ve güvenilir bir renktir. İnsanlarda arkadaşlık ve güven duygusu yaratır. Hindistanda yas durumunu sembolize eder. Kahverengi tonlarından olan bej rengi web tasarımı için önemli bir renktir.

29 Turuncu Yoğun bir enerji, denge ve coşku hissi yaratır. Turuncu renk, sarının ve kırmızının en iyi yönlerinin bir karışımıdır. Rahatlatıcı bir renktir. Web tasarımlarında ikincil renk olarak kullanılması tavsiye edilir. İrlanda da dini önem taşır, Amerikalılar için ucuzluğu simgeler.

30 Arayüz Yerleşimi / Genel Alanlar Logo Yerleşimi Arama Kutusu Üyelik İşlemleri Sepet Fayda / Promosyon Duyuruları ( Benefits ) Navigasyon / Menü

31 Arayüz Yerleşimi / Genel Alanlar

32 Bebek Ördek Sendromu Bir sisteme alışan kullanıcıların benzer işe yarayan diğer sistemleri sürekli onunla karşılaştırması durumudur.

33 Arayüz Yerleşimi / Genel Alanlar

34 Dikey Menü Yatay Menü Açılan Menü Arayüz Yerleşimi / Menüler

35 Arayüz Yerleşimi / Dikey Menüler

36 Arayüz Yerleşimi / Yatay Menüler

37 Arayüz Yerleşimi / Açılır Menüler

38 Arayüz Yerleşimi / Açılır Menüler

39 Eye Tracking Nedir? Online ziyaretçilerin web sitesine geldiklerinde göz hareketlerini tarayarak nereye baktıklarının tespit edilmesi edilmesidir. Ziyaretçilerin sayfanın nerelerine, hangi sıra ile ve ne kadar uzunlukta baktıklarını tespit etmek mümkündür. Sıcaklık Haritası Alfred L. Yarbus / 1967

40 Eye Tracking

41 Eye Tracking

42 Eye Tracking

43 Arayüz Yerleşimi / Anasayfa Sayfa Eleştirileri Örnek Sayfalar Prototip Anasayfa

44

45 5 Saniye Testi Bu şirket ne iş yapıyor? Sizden ne yapmanızı istiyor? Ne Satıyor? Sitenin hedef kitlesi kimdir? Kime Satıyor? Bu şirkete güvenir misiniz? Aklınızda başka ne kaldı?

46

47

48 Banner Körlüğü

49 Göz Algılayabilme Süresi 230 ms / 7 Nesne

50

51

52 Yazılarınız Okunmuyor! Kullanıcılar sadece ilk iki kelimeyi okuyorlar Harald Weinreich, Hartmut Obendorf, Eelco Herder, and Matthias Mayer

53 Fold Alanı

54

55 Arayüz Yerleşimi / Listeleme Sayfa Eleştirileri Örnek Sayfalar Prototip Listeleme Sayfası

56

57

58

59

60

61

62

63

64

65 Arayüz Yerleşimi / Listeleme / Notlar Göz Algılayabilme Süresi 230 ms / 7 Nesne

66 Arayüz Yerleşimi / Ürün Sayfası Sayfa Eleştirileri Örnek Sayfalar Prototip Listeleme Sayfası

67

68

69

70

71

72

73

74

75

76

77 Fitts s Law Hedef nesnenin boyutuna ve uzaklığına bağlı olan bir şeye işaret etmek için geçen süreyi hesaplayan bir modeldir.

78

79 Arayüz Yerleşimi / Sepet - Satınalma Sayfa Eleştirileri Optimizasyon Önerileri Prototip Satın Alma Sayfası

80

81

82

83

84

85

86 Arayüz Yerleşimi / Checkout / Notlar 2 Optimizasyon Önerileri 1) Kullanıcılara hangi aşamada olduğunu gösterin 2) Kredi kartı ve güvenlik logolarını yerleştirin 3) Alışverişe Devam et ve Satın al butonlarını optimize edin 4) Satın almaya giden yolu kolaylaştırın 5) İade ve Kargo bilgilerini hatırlatın 6) Sepet özetini ve toplam tutarı sürekli hatırlatın 7) İlişkili ürünler almaları için rahatsız etmeden teşvik gösterimi yapın 8) Telefon numaranız görünür olsun 9) X lira harcarsa ücretsiz kargoyu gösterin 10) Bol bol taksit seçeneği sunun 11) İndirim ya da avantajı sürekli hatırlatın 12) Sadakat indirimi yapmayı unutmayın 13) 7/24 telefon desteği verin 14) 365 gün iade desteği verin 15) Test edin, Analiz Edin, Ölçümleyin

87 Arayüz Yerleşimi / Diğerleri K.I.S.S Üye Olma Sayfası Kontrast Oranları Arama Optimizasyonu E-Posta Optimizasyonu

88 Keep It Simple Short / Stupid

89 Üye Olma Sayfası

90 Analiz Yöntemleri ve Araçları A/B Testleri Google Analytics Eye Tracking Kart Gruplama Video Tracking Site Hızı Tarayıcı Testleri

91 A/B Testleri A B %0.2 %0.8

92 Google Analytics

93 Kart Gruplama

94 Video Tracking / Click Tale

95 Fold İçin Çözünürlük Testi

96 Site Hızı

97 Site Hızı

98 Tarayıcı Testleri İnternet sitemiz, tüm tarayıcılarda aynı görünmelidir!

99 Pareto Prensibi Ürün özelliklerinizin %20 sini kullanıcıların %80 i kullanacaktır. O yüzden sisteminize yeni fonksiyonlar eklemek yerine ana fonksiyonların çok iyi çalıştığından emin olmak gereklidir.

100 SORU / CEVAP Serbest Zaman

101 TEŞEKKÜRLER Sami Güzel