İçerik:• Giriş• Prototipleme Teknikleri

– Kağıt Prototipleme– 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

• Kaynakça

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

Human Centered Design – Interface Prototyping

Giriş:

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

Human Centered Design – Interface Prototyping

Beklenen?

Ürün?

Giriş:

• 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.

• 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.

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

Human Centered Design – Interface Prototyping

Prototipleme Teknikleri

• Prototipleme Teknikleri– Kağıt Prototipleme– Telkafes Prototipleme (Wireframe Prototyping?)

Kağıt Prototipleme (Paper Prototyping)

• Ürünün doğrudan talep edilen kişilerce etkili bir şekilde tarif edilmesini sağlar.

• Düşük maliyet

• Arayüz elemanlarının yerleşimi (menü, pencereler, diyaloglar, simgeler)

• Çizerek ya da bilgisayar çıktıları kullanılarak geliştirilebilir

• Eğlenceli

• Ortak çalışma imkanı

Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www.alistapart.com/articles/paperprototyping.

Kağıt Prototipleme (Paper Prototyping)

Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www.alistapart.com/articles/paperprototyping.

Kağıt Prototipleme (Paper Prototyping)

Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www.alistapart.com/articles/paperprototyping.

Kağıt Prototipleme (Paper Prototyping)

Kaynak: “A List Apart: Articles: Paper Prototyping,” http://www.alistapart.com/articles/paperprototyping.

Kağıt Prototipleme (Paper Prototyping)

Kaynak: “Paper Prototype Photos From the Training Film (32 minute DVD),” http://www.nngroup.com/reports/prototyping/video_stills.html.

Bir Donanım Arayüzü Prototipi (Kiosk)

Kağıt Prototipleme (Paper Prototyping)

Tanım:

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.

Kağıt prototiplemeye göre daha az yaratıcılık gerektirir. Bilgisayar uygulamaları ya da magnet’lerle veya print lerle yapılabilir.

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.

“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]

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.

[1] “Prototyping - Services - Open Interface,” http://www.openinterface.ie/prototyping.html.

Wireframing (Telkafes Prototipleme)

Bilgisayar ortamında hazırlanmış şablonların çıktıları alınarak, bir pano üzerinde çalışılabilir.

Mıknatıs Wireframe Örneği

Kaynak: “Wireframe Magnets (DIY Kit)” http://konigi.com/tools/wireframe-magnets-diy-kit.

Arayüz Prototipleme Uygulamaları

Prototip Ürün Tasarımı Bitmiş Hali

Arayüz Prototipleme Uygulamaları

Prototipleme Amaçlı Kullanılabilecek Uygulamalar

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

•Kullanıcıların alışkın olduğu uygulamaları prototipleme amaçlı kullanmayı talep edebilirler.•Yeni bir yazılım için bütçe ayrılmamışsa eldeki uygulamalar kullanılabilir.•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.•Etkileşim ekleme kullanışsız olabilir.

Arayüz Prototipleme Uygulaması Seçimi

•Hangi Arayüz?•Statik Web sitesi•Dinamik Web Uygulamaları•Mobil Uygulamalar•Masaüstü Uygulaması

•Bütçe•Birlikte Çalışılabilme İmkanı•Süre

Uygulama Tanıtımları > Balsamiq Mockups

Tanıtım Videosu:

http://www.youtube.com/watch?v=aJTuFRaIi_g

Uygulama Tanıtımları > Balsamiq Mockups

Uygulama Tanıtımları > Balsamiq Mockups

mockupstogo.net“Balsamiq Mockups” uygulaması kullanıcıları tarafından oluşturulan “Arayüz Bileşenleri Galerisi”

Andoid Andoid KontrolleriKontrolleri

Uygulama Tanıtımları > Balsamiq Mockups

Uygulama Tanıtımları > Axure RP

Özellikleri

•Web site ağırlıklı arayüz tasarımları için ideal

•Akış Şeması

•Gelişmiş Bağlantılandırma

•Web sitesi şeklinde önizleme oluşturabilme

•Genişletilebilir Kütüphane

•Açıklama Ekleyebilme

Nesne Özellikleri Sekmesi

Uygulama Tanıtımları > Axure RP

Kütüphane Sekmesi

Uygulama Tanıtımları > Axure RP

Prototip Önizlemesi

Uygulama Tanıtımları > Axure RP

Kaynaklar

• http://en.wikipedia.org/wiki/User_Centered_Design

• http://www.openinterface.ie/prototyping_wireframe.html

• WSDM: a user centered design method for Web sites, O.M.F. De Troyer ‘, C.J. Leune *.’

• http://www.alistapart.com/articles/paperprototyping

• http://www.nngroup.com/reports/prototyping/video_stills.html

• Nevin Berger, “The Excel Story,” interactions 13, no. 1 (2006): 14-17.

• http://articles.sitepoint.com/article/tools-prototyping-wireframing

• http://www.axure.com/annotated-wireframes.aspx

Kaynaklar