Your SlideShare is downloading. ×
0
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,191

Published on

Human Centered Design – Interface Prototyping …

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,191
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. <ul><li>Giriş: </li></ul>İnsan Merkezli Tasarımda Arayüz Prototipleme (İlk Örnekleme) Human Centered Design – Interface Prototyping Beklenen? Ürün?
  • 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. 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. 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. <ul><li>Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www. alistapart .com/ articles / paperprototyping . </li></ul>Kağıt Prototipleme (Paper Prototyping)
  • 7. <ul><li>Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www. alistapart .com/ articles / paperprototyping . </li></ul>Kağıt Prototipleme (Paper Prototyping)
  • 8. <ul><li>Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www. alistapart .com/ articles / paperprototyping . </li></ul>Kağıt Prototipleme (Paper Prototyping)
  • 9. <ul><li>Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www. alistapart .com/ articles / paperprototyping . </li></ul>Kağıt Prototipleme (Paper Prototyping)
  • 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. <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. <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. Arayüz Prototipleme Uygulamaları
  • 14. Arayüz Prototipleme Uygulamaları Prototip Ürün Tasarımı Bitmiş Hali
  • 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. 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. Uygulama Tanıtımları &gt; Balsamiq Mockups
  • 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ı &gt; Balsamiq Mockups
  • 19. Uygulama Tanıtımları &gt; Balsamiq Mockups
  • 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ı &gt; Balsamiq Mockups Andoid Kontrolleri
  • 21. Uygulama Tanıtımları &gt; 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. <ul><li>Nesne Özellikleri Sekmesi </li></ul>Uygulama Tanıtımları &gt; Axure RP
  • 23. <ul><li>Kütüphane Sekmesi </li></ul>Uygulama Tanıtımları &gt; Axure RP
  • 24. <ul><li>Prototip Önizlemesi </li></ul>Uygulama Tanıtımları &gt; Axure RP
  • 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

×