Rehber

Storyboard UX'te Neden Önemlidir? Storyboard Nasıl Yapılır?

Yazar
Eda Dimyanoğlu

Bu İçerikte Yer Alan Ana Başlıklar:

Storyboard Nedir?
Storyboard UX İçin Neden Önemlidir?
Storyboard Nasıl Yapılır?
Storyboard Oluştururken Kullanılabilecek Siteler

Bu içerik ile; son kullanıcı ile ürün arasındaki etkileşimi hem anlamamızı kolaylaştıran hem de etkili bir şekilde aktarmamızı sağlayan Storyboard tekniğini keşfedeceksiniz. Film sektörü tarafından keşfedilen ve tasarım sektörünün de sıklıkla kullandığı görüntülerle hikaye anlatma yöntemini adım adım anlattık.


Userspots Akademi’de online olarak devam eden, problemi anlama. çözüme götürme, test etme ve bunu sunuma dönüştürme adımlarını uygulamalı olarak anlattığımız Online Design Sprint ile UI/UX Eğitimi’ne katılarak storyboard ve diğer sunum yöntemlerini keşfedebilirsiniz.

Storyboard Nedir?

Walt Disney Storyboard Sunumu

Walt Disney, bir animasyon filmi yapmanın en önemli parçalarından birinin hikaye geliştirmek olduğunu biliyordu. 1930’larda ilgi çekici ve tutarlı hikayeler geliştirebilmek için storyboard yöntemini geliştirdi. Olayların kronolojik sırayla görsel hale getirilmesiyle hikayelerin tutarsız noktalarının tespit edilmesi ve diğer ekip üyelerine doğru şekilde aktarılması amaçlanmaktaydı. Böylece animasyonlar çok daha rahat ve daha ucuz bir şekilde üretilecekti.

Birkaç görselle, yüzlerce kelimenin anlatılabileceği hikayelerin aktarılması storyboardların diğer sektörlerde de kullanılması sonucunu doğurdu. Kullanıcı deneyimi tasarımı da bu sektörlerden biriydi ve storyboardları kendince yeniden yorumladı. Temelinde çok değişmeyen storyboardlar, UX tasarımında da birkaç kare görselin kronolojik olarak sıralanmasıdır. Temelde iki işe olanak sağlar: Bunlardan ilki, tasarımcıların daha az maliyetle eskiz ortaya çıkarmasıdır. İkincisi ise tasarım sürecinde tasarımcıların, meslektaşları ve ekip üyeleri arasında fikirlerini iletmek için kullandıkları basit bir yöntem olmasıdır.

Storyboard UX İçin Neden Önemlidir?

UX Storyboard Örneği - The Role of Storyboarding in Ux Design

UX tasarımında hikayeler, tasarım sürecindeki deneyimleri yakalamanın, aktarmanın ve keşfetmenin etkili ve ucuz bir yoludur. Etkili bir çözüm için sürecin tüm taraflarının sürece dahil edilmesi önemlidir. Çözümün, sorunu nasıl çözdüğünü gösteren etkileyici bir storyboard ile ürünün hedef kitle için daha çekici olması olasıdır. Tabii ürünü yaratmaya dahil olan herkes, ürünün nasıl tasarlanması gerektiğine dair sağlam bir anlayışı paylaşıyorsa ve hemfikirse storyboarda gerek kalmayabilir.

Uygun bir tasarım bulmak için UX tasarımcıları pek çok araştırma yöntemi kullanır. Araştırma bulguları, kullanıcıların durumunu açıklar ve içgörü sahibi olmamıza yardımcı olur. Özellikle açıklanan şey bir "tasarım"sa, duygular veya küçük eylemleri görsellerle aktarmak daha kolay ve verimli olabilir. Ayrıca storyboardlar, insan duygularını tasarımın kalbine yerleştirerek kullanıcıların hikayeyle empati kurmasına da olanak sağlar. Bu sayede tasarımcılar da kullanıcının gözünden olaylara bakıp onları daha iyi anlayabilir.

UX Okulundan Sena Çelebi’nin Design Thinking sunumu için hazırladığı örnek


Storyboardlar UX süreci boyunca farklı şekilde kullanılabilir:

• Araştırma ve Kullanılabilirlik Testi

Storyboard, katılımcılarınızın ürünle nasıl etkileşime girdiğini aktarabilir. Kullanılabilirlik testinin sonuçları metinle de özetlenebilir ancak görseller hikayenizi gözden geçirmeyi kolaylaştırabilir ve akılda kalıcı hale getirebilir.

• Yolculuk Haritaları Geliştirme

Bir kullanıcının cihazını veya ofis alanını görselleştirmek yolculuk haritalarını zenginleştirir. Böylece ekibin empati kurması kolaylaşır.

Storyboard Nasıl Yapılır?

Storyboard oluşturmaya başlamadan önce, bunu neden yapmak istediğinizi tam olarak bilmelisiniz. Ayrıca, çizim yeteneğiniz değil; anlatmak istediğiniz hikaye önemlidir. Unutmayın, storyboardların ilk amacı iletişimdir ve bu iletişimi kurarken ise çeşitli yardımcı elemanları kullanırız.

Öncelikle Storyboardlarda her zaman kullanılan 3 temel ögeye bakalım. Bunlar;

• Senaryo

Storyboardlar bir senaryoya dayanır. Bu senaryoda davranışları, duyguları ve beklentileri belirtilen bir kişi olmalıdır. Film şeridinin en üstünde bu kişi açıkça belirtilir. Ayrıca senaryonun kısa metin açıklaması olmalıdır. Bu sayede bir ekip üyesi, görsellere bakmadan, neyin tasvir edildiğini kısa sürede ve açıkça kavrayabilir.


• Görseller

Senaryodaki her adım, sırayla bir görsel olarak tasvir edilir. Storyboardın amacına ve hedef kitlesine bağlı olarak bu görüntüler hızlı ve düşük kaliteli ya da ayrıntılı ve yüksek kaliteli olabilir. Görüntülerde kullanıcının nasıl göründüğü, ortamı, kullanıcının etkileşimde bulunduğu ekran taslağı ve kullanıcıdan alıntılar içeren konuşma balonları bulunabilir. Karakterin bulunduğu ortamın gerçek hayatta var olması gerekmektedir. Aksi halde empati kurarken zorluk yaşanır hatta empati kurmak mümkün bile olmayabilir.


• Altyazılar

Her görselin karşılığı olan bir başlık vardır. Altyazılar; kullanıcının  eylemlerini, ortamını, duygusal durumunu, cihazını vb açıklar. Görseller en önemli içerik olduğu için ön plana çıkmalıdır. Bu yüzden altyazılar, çoğu durumda kısa tutulur.

Düşük Kaliteli Bir UX/UI Storyboard Örneği - storyboarding and user interface design

Storyboard oluşturmak çok zor gibi görünebilir, ancak önemli olanın hikayeyi aktarabilmek olduğunu unutmayalım. Yukarıda bahsettiğimiz 3 seçenek ile beraber, adım adım storyboard oluşturmayı konuşalım o zaman sizlerle.

İlk Adım; Karar Verme

Kullanıcı görüşmeleri, kullanılabilirlik testleri veya site ölçümleri gibi yöntemlerle elde ettiğimiz verilerden hangilerini storyboard üzerinde göstereceğimize karar vermeliyiz.

İkinci adım; Hedef Kitle

Hedef kitlemiz ve hedefimize yönelik etkili bir hikaye yazmalıyız. Bu hikayeyi genelde beş bölüme ayırmak önerilir ancak kendi yönteminizi de oluşturabilirsiniz. Unutmayın ki storyboardlar hikaye anlatmak içindir.

Üçüncü Adım; Senaryoyu Oluşturmak

Elinizde yeterli bilgi olduktan sonra bundan sonraki aşama storyboard'un temelini oluşturmaya geldi. Bu zamana kadar yapmış olduğunuz araştırma verilerini ve hedef kitlenizi aynı sayfa içinde düşünerek kendinize bir kullanım senaryosu oluşturun. Bu süreçte eğer daha öncesinden bir Customer Journey Map oluşturduysanız, ondan da yararlanabilirsiniz. Senaryo oluştururken, kullanıcınızı ve ürününüzün ilişkisini hayal edin ve dördüncü adıma geçin.

Dördüncü Adım; Çizim

Kurgulanan senaryoyu artık çizme vakti geldi. Genellikle UX üzerine olan storyboardlarda 4-8 arası kare kullanılır, ancak bu sayı tamamen sizin hikayenize göre değişkenlik gösterebilir. İletmeye çalıştığımız hikayeyi çubuk figürlerle, çöp adamlarla veya eskizlerle anlatabilirsiniz. Önemli olan değiştirilmesi kolay bir akış oluşturmaktır. Düşük maliyetli ve kaliteli eskizlerin ve yapışkan notların diğer avantajı da budur.

İlk bakışta anlaşılmayan görseller için birkaç başlık eklersek anlaşılması kolaylaşır. Bununla birlikte eylemleri ve hareketleri renklerle ya da birkaç çizgi ekleyerek vurgulamak her zaman işe yarar. Ekip arkadaşlarınızdan dönüt alarak ve bu dönütlere göre çalışmanızı değiştirerek storyboardınızı en doğru şekilde üretebilirsiniz.

Storyboard Oluştururken Kullanılabilecek Siteler

Canva

İçi Doldurulmuş Canva Örneği


Ücretsiz olarak pek çok bileşenin kullanımına olanak sağlayan Canva’da hazırda bulunan storyboardları kullanabilir, ihtiyacınıza göre özelleştirebilirsiniz. Canva’daki şablonlar, genelde doldurulmuş bir örneğin boş sayfasını da içerir. Bu sayede kolaylıkla şekillendirebilirsiniz.

StoryboardThat

Sahneleri, karakterleri, şekilleri hatta daha pek çok şeyi ayarlayabildiğiniz, çok başarılı bulduğum storyboardthat’ı sadece eğlenmek için bile kullanmak isteyebilirsiniz! Üst menüden sahne, karakter, metin kutusu, şekiller eklerken alt menüde de pek çok seçenek beliriyor. Aklınızdaki sahneyi tamamen canlandıracak mekanlar, her yaştan -hatta dönemden- karakterlerle mükemmel film şeritleri hazırlayabilirsiniz.

Milanote

Milanote, storyboard ve akış şeması yapmak için düzinelerce şablon sunar ve ücretsiz kullanıma da olanak sağlar. İyi bir storyboardı altı adımda nasıl yapacağınızla ilgili bilgi almak isterseniz bu yazıyı inceleyebilirsiniz.

Eğer “Ben elimle çizmek istiyorum.” diyenlerdenseniz, sizlere yardımcı olabilecek bir şablonu da aşağıya bıraktık.

Nielsen Norman Group’un hazırladığı storyboard şablonu bulunuyor. İster şablonu kullanarak isterseniz de bunun için hazırlanmış siteleri kullanarak kendi storyboardlarınızı oluşturabilirsiniz.


Oluşturulma Tarihi
01/2022
Güncellenme Tarihi
01/2022
No items found.

Space Konularımız

No items found.
Userspots Bülten
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
2300’den fazla kişinin kayıtlı olduğu kulübümüze katıl !
Başvuru için teşekkürler. En kısa sürede sizinle iletişime geçeceğiz.
Lütfen eksik bilgileri tamamlayıp, tekrar deneyin.