İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)

1,504 views
1,318 views

Published on

Human Centered Design – Interface Prototyping
Prototipleme Teknikleri
Kağıt Prototipleme (Paper Prototyping)
Telkafes Prototipleme (Wireframe Prototyping)
Arayüz Prototipleme Uygulamaları
Prototipleme Amaçlı Kullanılabilecek Uygulamalar
Arayüz Prototipleme Uygulaması Seçimi
Uygulama Tanıtımları
Balsamiq Mockups
Axure RP

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,504
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)

  1. 1. <ul><li>İçerik: </li></ul><ul><li>Giriş </li></ul><ul><li>Prototipleme Teknikleri </li></ul><ul><ul><li>Kağıt Prototipleme </li></ul></ul><ul><ul><li>Telkafes Prototipleme (Wireframe Prototyping?) </li></ul></ul><ul><li>Arayüz Prototipleme Uygulamaları </li></ul><ul><ul><li>Prototipleme Amaçlı Kullanılabilecek Uygulamalar </li></ul></ul><ul><ul><li>Arayüz Prototipleme Uygulaması Seçimi </li></ul></ul><ul><li>Uygulama Tanıtımları </li></ul><ul><ul><li>Balsamiq Mockups </li></ul></ul><ul><ul><li>Axure RP </li></ul></ul><ul><li>Kaynakça </li></ul>İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme) Human Centered Design – Interface Prototyping
  2. 2. <ul><li>Giriş: </li></ul>İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme) Human Centered Design – Interface Prototyping Beklenen? Ürün?
  3. 3. <ul><li>Giriş: </li></ul><ul><li>Proje yöneticileri, bazı özelliklerin ve fonksiyonların projenin ilk saflarında yapılmasına kanaat getirmişlerdir. Bu zaman ve para tasarrufu ile birlikte geliştirilen uygulamaların en az hata (bug) içermesini sağlamaktadır. </li></ul><ul><li>Geliştiriciler proje sahiplerinin fikirlerini iyi anlamak ve istedikleri ürünü ortaya koyabilmek için iyi bir analiz yaptıktan sonra uygulamayı kullanacak kişilerin de içine katıldığı bir prototip oluşturma sürecine katılmaları gerekmektedir. </li></ul>İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme) Human Centered Design – Interface Prototyping
  4. 4. Prototipleme Teknikleri <ul><li>Prototipleme Teknikleri </li></ul><ul><ul><li>Kağıt Prototipleme </li></ul></ul><ul><ul><li>Telkafes Prototipleme (Wireframe Prototyping?) </li></ul></ul>
  5. 5. Kağıt Prototipleme (Paper Prototyping) <ul><li>Ürünün doğrudan talep edilen kişilerce etkili bir şekilde tarif edilmesini sağlar. </li></ul><ul><li>Düşük maliyet </li></ul><ul><li>Arayüz elemanlarının yerleşimi (menü, pencereler, diyaloglar, simgeler) </li></ul><ul><li>Çizerek ya da bilgisayar çıktıları kullanılarak geliştirilebilir </li></ul><ul><li>Eğlenceli </li></ul><ul><li>Ortak çalışma imkanı </li></ul>
  6. 6. <ul><li>Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www. alistapart .com/ articles / paperprototyping . </li></ul>Kağıt Prototipleme (Paper Prototyping)
  7. 7. <ul><li>Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www. alistapart .com/ articles / paperprototyping . </li></ul>Kağıt Prototipleme (Paper Prototyping)
  8. 8. <ul><li>Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www. alistapart .com/ articles / paperprototyping . </li></ul>Kağıt Prototipleme (Paper Prototyping)
  9. 9. <ul><li>Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www. alistapart .com/ articles / paperprototyping . </li></ul>Kağıt Prototipleme (Paper Prototyping)
  10. 10. <ul><li>Kaynak: “Paper Prototype Photos From the Training Film (32 minute DVD),” http://www. nngroup .com/ reports / prototyping /video_ stills .html . </li></ul>Kağıt Prototipleme (Paper Prototyping) Bir Donanım Arayüzü Prototipi (Kiosk)
  11. 11. <ul><li>Tanım: </li></ul><ul><li>Bir yazılım ya da web sitesinin arayüz tasarımında, yazılım ya da uygulamanın yapısı ve ekranları arasındaki ilişki hakkında bilgilendirici görsel bir kılavuzdur. </li></ul><ul><li>Kağıt prototiplemeye göre daha az yaratıcılık gerektirir. Bilgisayar uygulamaları ya da magnet’lerle veya print lerle yapılabilir. </li></ul><ul><li>Bir kaynağa göre: Bu protipler birbirine bağlanabilir özelliktedir, ve ürün ortaya çıkmadan içerisinde gezinti yaparak test edilebilmesine imkan tanır. </li></ul><ul><li>“ Wireframe prototypes are similar to paper prototypes, with the important exception that wireframetip prototypes can be linked together. A wireframe diagram is drawn using an application like Visio or Inspiration. We link a series of these diagrams together to give you a walkthrough of the prototype before it is built.” [1] </li></ul><ul><li>Burada kastedilen bilgisayar uygulamaları ile oluşturulan etkileşimli telkafesler. Bu sayede kullanıcılar ürün prototipi üzerinde gezinti yaparak, bir nevi kullanılabilirlik testi yapabilme imkanına kavuşmuş oluyor. </li></ul><ul><li>[1] “Prototyping - Services - Open Interface,” http://www. openinterface . ie / prototyping .html . </li></ul>Wireframing (Telkafes Prototipleme)
  12. 12. <ul><li>Bilgisayar ortamında hazırlanmış şablonların çıktıları alınarak, bir pano üzerinde çalışılabilir. </li></ul>Mıknatıs Wireframe Örneği Kaynak: “Wireframe Magnets (DIY Kit)” http:// konigi .com/ tools / wireframe - magnets - diy -kit .
  13. 13. Arayüz Prototipleme Uygulamaları
  14. 14. Arayüz Prototipleme Uygulamaları Prototip Ürün Tasarımı Bitmiş Hali
  15. 15. Prototipleme Amaçlı Kullanılabilecek Uygulamalar <ul><li>Visio, OmniGraffle Pro, Axure RP Pro, Irise Pro, Pencil, SmartDraw, MockupScreens, Balsamiq Mockups, Lucid Spec, ConceptDraw Pro, iPlotz, Go Analogue, PowerPoint or Keynote, Excel, Adobe Fireworks, Dreamweaver, Flash </li></ul><ul><li>Kullanıcıların alışkın olduğu uygulamaları prototipleme amaçlı kullanmayı talep edebilirler. </li></ul><ul><li>Yeni bir yazılım için bütçe ayrılmamışsa eldeki uygulamalar kullanılabilir. </li></ul><ul><li>Arayüz nesneleri kütüphanelerin olmayışı ya da sınırlı oluşu yeni nesnelerin tasarlanması için de zaman ayrılmasını gerektirebilir. </li></ul><ul><li>Etkileşim ekleme kullanışsız olabilir. </li></ul>
  16. 16. Arayüz Prototipleme Uygulaması Seçimi <ul><li>Hangi Arayüz? </li></ul><ul><ul><li>Statik Web sitesi </li></ul></ul><ul><ul><li>Dinamik Web Uygulamaları </li></ul></ul><ul><ul><li>Mobil Uygulamalar </li></ul></ul><ul><ul><li>Masaüstü Uygulaması </li></ul></ul><ul><li>Bütçe </li></ul><ul><li>Birlikte Çalışılabilme İmkanı </li></ul><ul><li>Süre </li></ul>
  17. 17. Uygulama Tanıtımları > Balsamiq Mockups
  18. 18. <ul><li>Tanıtım Videosu: </li></ul><ul><li>http://www.youtube.com/watch?v=aJTuFRaIi_g </li></ul>Uygulama Tanıtımları > Balsamiq Mockups
  19. 19. Uygulama Tanıtımları > Balsamiq Mockups
  20. 20. <ul><li>mockupstogo.net </li></ul><ul><li>“ Balsamiq Mockups” uygulaması kullanıcıları tarafından oluşturulan “Arayüz Bileşenleri Galerisi” </li></ul>Uygulama Tanıtımları > Balsamiq Mockups Andoid Kontrolleri
  21. 21. Uygulama Tanıtımları > Axure RP <ul><li>Özellikleri </li></ul><ul><li>Web site ağırlıklı arayüz tasarımları için ideal </li></ul><ul><li>Akış Şeması </li></ul><ul><li>Gelişmiş Bağlantılandırma </li></ul><ul><li>Web sitesi şeklinde önizleme oluşturabilme </li></ul><ul><li>Genişletilebilir Kütüphane </li></ul><ul><li>Açıklama Ekleyebilme </li></ul>
  22. 22. <ul><li>Nesne Özellikleri Sekmesi </li></ul>Uygulama Tanıtımları > Axure RP
  23. 23. <ul><li>Kütüphane Sekmesi </li></ul>Uygulama Tanıtımları > Axure RP
  24. 24. <ul><li>Prototip Önizlemesi </li></ul>Uygulama Tanıtımları > Axure RP
  25. 25. <ul><li>Kaynaklar </li></ul><ul><li>http://en.wikipedia.org/wiki/User_Centered_Design </li></ul><ul><li>http://www.openinterface.ie/prototyping_wireframe.html </li></ul><ul><li>WSDM: a user centered design method for Web sites, O.M.F. De Troyer ‘, C.J. Leune *.’ </li></ul><ul><li>http://www.alistapart.com/articles/paperprototyping </li></ul><ul><li>http://www.nngroup.com/reports/prototyping/video_stills.html </li></ul><ul><li>Nevin Berger, “The Excel Story,” interactions 13, no. 1 (2006): 14-17. </li></ul><ul><li>http://articles.sitepoint.com/article/tools-prototyping-wireframing </li></ul><ul><li>http://www.axure.com/annotated-wireframes.aspx </li></ul>Kaynaklar

×