sosyal topluluklar / içerik & tasarım v1.0

2,624 views

Published on

1 Comment
4 Likes
Statistics
Notes
  • teşekkürler derleme için.

    biligi bombardımanı, bu bilgi yığınının altında hem ziyaretçilerin hem de site sahiplerinin(markalar şahıralar) kalma olasılığıınn büyüklüğü ve hatta bunun aslında her gün tecrübe ediliyor olması, tasarıma büyük önem verilmesine sebep oluyor. 'neden o satırdaki kelime italik?' gibi sorular sıkça duyulur olmadı mı sektörde? nihayet!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,624
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

sosyal topluluklar / içerik & tasarım v1.0

  1. 1. sosyal topluluklar içerik & deneyim tasarımı v 1.0
  2. 2. tasarım & içerik Kullanıcıyla doğru iletişim için;
  3. 3. tasarım & içerik Kullanıcıya ; hatalarını, ayarlarını, tercihlerini geri alma olanağı verilmeliyiz. Kullanıcı, her kademede “undo” yapabileceğini bilmeli, sisteme güven duymalı. Kullanıcı için çok önemli fonksiyon: “undo”
  4. 4. tasarım & içerik Sistem içindeki kullanıcıyı devamlı izlemeliyiz. Kullanıcının yorumlarına göre değil, davranışlarına göre sistem içinde revizyonlar yapmalıyız. Her türlü detay bizi ilgilendirmeli. Tasarımı tasarım yapan şey detaylardır. Kullanıcının ne yaptığına dikkat etmeliyiz, ne dediğine değil.
  5. 5. tasarım & içerik “ Konuşma dili” demek dili bozarak konuşmak anlamına gelmiyor. Sosyal “network”ün amacı kullanıcıları birbirleriyle buluşturacak zemini yaratmak. Bırakalım onlar kendi aralarında istedikleri dili kullansınlar. Biz doğru Türkçe’yi kullanmak zorundayız. Metinleri konuşma diliyle hazırlamalıyız. Kullanıcıyla samimi, yalın ve sıfır hatalı bir Türkçe ’yle konuşmalıyız. yalın & samimi içerik + basit navigasyon + anlaşılır arayüz = yüksek ticari değer
  6. 6. tasarım & içerik İlk jenerasyon sosyal “network”ler: “ Ben sana, sana ve bir de sana bağlandım.” İkinci jenerasyon sosyal “netwok”ler: “ Ben şu senle, senle ve de senle paylaşıyorum.” Anahtar kelime: “paylaşım” resmi videoyu düşünceyi
  7. 7. tasarım & içerik Yeni nesil sosyal “network”: Bireysel olarak bana bir yarar sağlar.
  8. 8. tasarım & içerik Yeni nesil sosyal “network”: <ul><li>Bana kendimi ifade edebileceğim “bite” boyutunda alanlar yaratır; </li></ul><ul><li>duygusal durum alanları </li></ul><ul><li>yaratıcı ifade alanları </li></ul><ul><li>eğlence alanları </li></ul>
  9. 9. tasarım & içerik Yeni nesil sosyal “network”: Kişisel & kamusal arasında bana kendi sınırlarımı belirleme özgürlüğü verir.
  10. 10. tasarım & içerik Yeni nesil sosyal “network”: Diğer kullanıcıların içeriklerine değer katabileceğim, içeriği paylaşabileceğim fırsatlar sunar.
  11. 11. tasarım & içerik Yeni nesil sosyal “network”: Aktif katılım sağlamam için beni cesaretlendirir; Niş lokal gruplar, organizasyon haberleri, bilgileri vb.
  12. 12. tasarım & içerik Yeni nesil sosyal “network”: Diğer kullanıcıların “şu andaki” durumlarını bana bildirir. Kim online? Kim profilini yeniledi? Kim hangi şarkıyı dinledi, hangi gruba katıldı, kim kime ne mesaj yazdı vb.
  13. 13. Sosyal Network “karşılama ekranı” Tek cümlede; mümkün olan en az kelimeyle burada “ne yapılır?” ı tanımlamalıyız.
  14. 14. Sosyal Network “karşılama ekranı” Tek cümlede; mümkün olan en az kelimeyle burada “ne yapılır?” ı tanımlamalıyız.
  15. 15. Sosyal Network “karşılama ekranı” Tek cümlede; mümkün olan en az kelimeyle burada “ne yapılır?” ı tanımlamalıyız.
  16. 16. Sosyal Network “karşılama ekranı” Tek cümlede; mümkün olan en az kelimeyle burada “ne yapılır?” ı tanımlamalıyız.
  17. 17. Yeni gelenlere “hoşgeldin mesajı” vermeliyiz. Sosyal Network “karşılama ekranı”
  18. 18. Sosyal Network “karşılama ekranı” Yeni gelenlere “hoşgeldin mesajı” vermeliyiz.
  19. 19. Sosyal Network “karşılama ekranı” Yeni gelenlere “hoşgeldin mesajı” vermeliyiz.
  20. 20. Yeni gelenlere üye olmaya karar vermeden önce bir “ ön deneyim” yaşatmalıyız Sosyal Network “karşılama ekranı”
  21. 21. Yeni gelenlere üye olmaya karar vermeden önce bir “ ön deneyim” yaşatmalıyız Sosyal Network “karşılama ekranı”
  22. 22. Yeni gelenlere üye olmaya karar vermeden önce bir “ ön deneyim” yaşatmalıyız Sosyal Network “karşılama ekranı”
  23. 23. Yeni gelenlere üye olmaya karar vermeden önce bir “ ön deneyim” yaşatmalıyız Sosyal Network “karşılama ekranı”
  24. 24. Yeni gelenlere üye olmaya karar vermeden önce bir “ ön deneyim” yaşatmalıyız Sosyal Network “karşılama ekranı”
  25. 25. Tasarımda renk kodları nı tanımlamalıyız (en fazla 2-3 renk) Last.fm: Siyah, gri ve KIRMIZI Sosyal Network “karşılama ekranı”
  26. 26. Flick: Siyah, gri ve MAVİ & KIRMIZI Tasarımda renk kodları nı tanımlamalıyız (en fazla 2-3 renk) Sosyal Network “karşılama ekranı”
  27. 27. Vimeo: Siyah, gri ve MAVİ Tasarımda renk kodları nı tanımlamalıyız (en fazla 2-3 renk) Sosyal Network “karşılama ekranı”
  28. 28. Jaiku: Siyah, gri ve YEŞİL Sosyal Network “karşılama ekranı” Tasarımda renk kodları nı tanımlamalıyız (en fazla 2-3 renk)
  29. 29. Linkedin: Siyah, gri ve MAVİ Sosyal Network “karşılama ekranı” Tasarımda renk kodları nı tanımlamalıyız (en fazla 2-3 renk)
  30. 30. <ul><li>Kullanıcıyı bilgilendirmek için “Yardım” ve “Tur” ayrı ayrı yapılandırılmalı. </li></ul><ul><li>Henüz üye olmayanlara Sosyal Network Turu ; “slide show” tarzıyla az cümle, net bilgi vererek hazırlanmalı. “Slide Show”un belli bölümlerine samimi bir dille hazırlanmış videolar entegre edilmeli. </li></ul><ul><li>Üye olup sisteme girenlere yardım ; SSS olarak yalın ve kısa cümlelerle oluşturulmalı. Belli bölümlerine samimi bir dille hazırlanmış videolar entegre edilmeli. </li></ul>Sosyal Network “karşılama ekranı”
  31. 31. Kullanıcıyı bilgilendirmek için “Tur” ve “Yardım” ayrı ayrı yapılandırılmalı. Sosyal Network “karşılama ekranı”
  32. 32. Kullanıcıyı bilgilendirmek için “Tur” ve “Yardım” ayrı ayrı yapılandırılmalı. Sosyal Network “karşılama ekranı”
  33. 33. Kullanıcıyı bilgilendirmek için “Tur” ve “Yardım” ayrı ayrı yapılandırılmalı. Sosyal Network “karşılama ekranı”
  34. 34. Kullanıcıyı bilgilendirmek için “Yardım” ve “Tur” ayrı ayrı yapılandırılmalı. Sosyal Network “karşılama ekranı”
  35. 35. “ Sosyal Network” genel <ul><li>İkon kullanımı sosyal “network”lerde tercih edilmiyor. Kullanıcıya yol göstermesi gereken ikonlar, sosyal “network”lerde karmaşaya sebep oluyor. Kullanılmamalı! </li></ul><ul><li>Yalın ve doğru bir Türkçe’yle, net başlıklarla navigasyon menüsü oluşturulmalı. </li></ul><ul><li>İmaj bankalarından görsel kullanılmamalı! Yapısı gereği sosyal “network”ler kullanıcıların kendi görselleri ile dolu. Ekstra görsel kullanılması karmaşaya neden olur. Hele ki imaj bankalarından alınan görseller ortamı yapaylaştırır, samimiyeti zedeler. </li></ul><ul><li>Tasarımı yoğunlukla tipografiyle çözmek gerekiyor. </li></ul>
  36. 36. İkonlar, sosyal “network”lerde karmaşaya sebep oluyor. Kullanılmamalı! Menüde ikon yok! “ Sosyal Network” genel
  37. 37. Menüde ikon yok! İkonlar, sosyal “network”lerde karmaşaya sebep oluyor. Kullanılmamalı! “ Sosyal Network” genel
  38. 38. “ Search” ikonu dışında ikon yok! İkonlar, sosyal “network”lerde karmaşaya sebep oluyor. Kullanılmamalı! “ Sosyal Network” genel
  39. 39. Menüde ikon yok! İkonlar, sosyal “network”lerde karmaşaya sebep oluyor. Kullanılmamalı! “ Sosyal Network” genel
  40. 40. Menüde ikon yok! İkonlar, sosyal “network”lerde karmaşaya sebep oluyor. Kullanılmamalı! “ Sosyal Network” genel
  41. 41. Tasarımı yoğunlukla tipografiyle çözmek gerekiyor. Vimeo bunun için iyi bir örnek. Tipografiye, font çeşidine, font büyüklüğünün görsellerle ve/veya ekran boyutu arasındaki orana ve ikon kullanımındaki hassaslığa dikkat! “ Sosyal Network” genel
  42. 42. Tasarımı yoğunlukla tipografiyle çözmek gerekiyor. Vimeo bunun için iyi bir örnek. Tipografiye, font çeşidine, font büyüklüğünün görsellerle ve/veya ekran boyutu arasındaki orana ve ikon kullanımındaki hassaslığa dikkat! “ Sosyal Network” genel
  43. 43. Tasarımda hareketli “flash” animasyona HAYIR! Hareketli görseller kullanıcının kafasını karıştırmaktan başka bir işe yaramıyor. CSS menüler tasarımı yalınlaştırmada çok işe yarıyor. “ Sosyal Network” genel
  44. 44. Tasarımda hareketli “flash” animasyona HAYIR! CSS menüler tasarımı yalınlaştırmada çok işe yarıyor. “ Sosyal Network” genel
  45. 45. teşekkürler

×